@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

*{padding: 0; margin: 0; border: 0; list-style: none; color: inherit; text-decoration: none; box-sizing: border-box;}
img{vertical-align: top; filter: none;}
button{background-color: inherit;}
html, body{padding: 0; margin: 0;}
body{overflow-x: hidden; letter-spacing: 0px; color: #333;}
#wrapper{overflow-x: hidden;}

body, h1, h2, h3, h4, h5, h6, input, textarea, select {font-family: 'nanumsquare', 'oppo', sans-serif;}
#detach-button-host {display: none;}

/* common */
.title_h2 {font-size: 36px; line-height: 36px; font-weight: 900;}
.title_h2 span {font-size: 36px; line-height: 36px; font-weight: 400; margin-right: 10px;}

.top_mob {position: fixed; bottom: 30px; right: 20px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background-color: #f1592a; color: #fff; font-size: 14px; font-weight: 900; z-index: 99990; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); display: none; cursor: pointer;}


/* header */
header {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 80px; background-color: #fff; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);}
header .ham-btn {position: absolute; top: 50%; left: 30px; transform: translateY(-50%); cursor: pointer; display: none; z-index: 111;}
header .inner {position: relative; max-width: 1280px; height: 80px; margin: 0 auto;}
header .inner .h-menu::after {display: block; clear: both; content: '';}
header .inner .h-menu .logo {float: left; width: 150px; padding-top: 24px;}
header .inner .h-menu .logo a {display: block; width: 100%; height: 100%;}
header .inner .h-menu .logo a img {width: 100%;}
header .inner .h-menu .chi {float: left; display: block; width: 70px; height: 27px; border-radius: 10px; background-color: #ed1c24; color: #fff; font-size: 16px; font-weight: 600; font-family: 'oppo', sans-serif; text-align: center; line-height: 27px; margin-left: 20px; margin-top: 28px;}
header .inner .h-menu nav {float: left; margin-left: 70px; padding-top: 20px;}
header .inner .h-menu nav .gnb::after {display: block; clear: both; content: '';}
header .inner .h-menu nav .gnb > li {position: relative; float: left; width: 140px; height: 60px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
header .inner .h-menu nav .gnb > li > a {display: block; width: 100%; height: 100%; font-size: 20px; font-weight: 700; color: #333; text-align: center; line-height: 60px;}
/* header .inner .h-menu nav .gnb > li:hover::before {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));} */
header .inner .h-menu nav .gnb > li:hover {background-color: #f1592a;}
header .inner .h-menu nav .gnb > li:hover > a {color: #fff;}
header .inner .h-menu nav .gnb ul {display: none;}
header .inner .h-menu nav .gnb ul li {position: relative; width: 140px; height: 50px; background-color: #fff; color: #333; font-weight: 600;}
header .inner .h-menu nav .gnb ul li:hover {color: #fff;}
header .inner .h-menu nav .gnb ul li:last-child {border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
header .inner .h-menu nav .gnb ul li a {display: block; width: 100%; height: 100%;  font-size: 15px; text-align: center; line-height: 50px; color: #333;}
header .inner .h-menu nav .gnb ul li a span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130px; height: 30px; line-height: 30px;}
header .inner .h-menu nav .gnb ul li:hover a span {background-color: #f1592a; border-radius: 5px; color: #fff;}
header .inner .h-menu .join-login {position: absolute; top: 40px; right: 0px; display: flex; align-items: center;}
header .inner .h-menu .join-login a {font-size: 12px; font-weight: 700;}
header .inner .h-menu .join-login a:first-child {margin-right: 18px; position: relative;}
header .inner .h-menu .join-login a:first-child::before {content: ''; display: block; position: absolute; top: 1px; right: -9px; width: 1px; height: 10px; background-color: #333;}
header .inner .h-menu .mypage-logout {position: absolute; top: 40px; right: 0px; display: flex; align-items: center;}
header .inner .h-menu .mypage-logout a {font-size: 12px; font-weight: 700; height: 17px; display: block; position: relative; height: 14px;}
header .inner .h-menu .mypage-logout a:first-child {margin-right: 18px; top: -2.7px;}
header .inner .h-menu .mypage-logout a:first-child::before {content: ''; display: block; position: absolute; top: 4px; right: -9px; width: 1px; height: 10px; background-color: #333;}


/* aside */
aside {display: block; position: fixed; z-index: 9999; top: 0; left: -280px; background-color: #fff; width: 260px; height: 100vh; border-top-right-radius: 10px; overflow: auto; scrollbar-width: none; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.45)}
aside::-webkit-scrollbar {display: none;}
aside .a-logo {width: 126px; padding: 20px 20px 15px;}
aside .a-logo a {display: block; width: 100%; height: 100%;}
aside .a-logo a img {width: 100%;}
aside .login-join {display: flex; padding: 0 20px;}
aside .login-join a {display: block; width: 120px; height: 25px; border-radius: 10px; background-color: #4d4d4d; font-size: 12px; font-weight: 700; color: #fff; text-align: center; line-height: 25px;}
aside .login-join a:last-child {background-color: #ff9116; margin-left: 5px;}
aside .mypage-logout {display: flex; padding: 0 20px;}
aside .mypage-logout a {display: block; width: 120px; height: 25px; border-radius: 10px; background-color: #4d4d4d; font-size: 12px; font-weight: 700; color: #fff; text-align: center; line-height: 25px;}
aside .mypage-logout a:last-child {background-color: #ff9116; margin-left: 5px;}
aside .line {width: 100%; height: 1px; background-color: #999; margin: 15px auto;}
aside .gnb > li {width: 220px; margin-bottom: 8px; margin-left: 20px;}
aside .gnb > li:last-child {margin-bottom: 0;}
aside .gnb > li.on > a {background-color: #ff9116;}
aside .gnb > li > a {display: block; width: 100%; height: 100%; position: relative; font-weight: 700; color: #fff; line-height: 40px; padding-left: 20px; background-color: #b3b3b3; border-radius: 15px;}
aside .gnb > li > a img {width: 12px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%) rotate(90deg); transition: all 0.3s;}
aside .gnb > li.on > a img {transform: translateY(-50%) rotate(-90deg);}
aside .gnb .depth {display: none;}
aside .gnb .depth li {width: 220px; height: 40px;}
aside .gnb .depth li a {display: block; width: 100%; height: 100%; line-height: 40px; color: #808080; font-weight: 100; padding-left: 20px;}
aside .reservation {display: flex; margin-top: 40px;}
aside .reservation div {width: 50%; text-align: center;}
aside .reservation div a {display: block; width: 100%; height: 100%;}
aside .reservation div a img {width: 35px;}
aside .reservation div a p {font-size: 12px; font-weight: 700; margin-top: 5px;}
aside .aside-person {display: flex; margin-top: 25px; margin-bottom: 15px; padding-left: 20px;}
aside .aside-person a {position: relative; font-size: 11px; color: #4d4d4d; margin-right: 10px;}
aside .aside-person a:first-child::before {content: ''; display: block; width: 1px; height: 10px; background-color: #4d4d4d; position: absolute; top: 1px; right: -6px;}
aside .aside-person a:last-child {margin-right: 0px; top: -3px;}
aside .aside-footer {padding: 0 0 20px 20px;}
aside .aside-footer h2 {font-size: 14px; font-weight: 700; margin-bottom: 3px;}
aside .aside-footer p {font-size: 11px; margin-bottom: 2px;}
aside .aside-footer div::after {display: block; clear: both; content: '';}
aside .aside-footer div p {float: left;}
aside .aside-footer .copy {font-size: 10px; color: #4d4d4d; margin-bottom: 0; margin-top: 8px; letter-spacing: -0.5px;}
.aside_close {position: fixed; bottom: 100px; left: 210px; transform: rotate(90deg); width: 100px; height: 30px; border-radius: 10px; background-color: #333; font-size: 12px; font-weight: 700; line-height: 30px; text-align: center; color: #fff; cursor: pointer; z-index: 100000; display: none;}
.aside_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 7777; display: none;}


/* right-fix */
.right-fix {position: fixed; top: 50%; right: 1%; transform: translateY(-50%); width: 100px; text-align: center; z-index: 100;}
.right-fix > ul {box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column;}
.right-fix > ul li {display: block; width: 100px; height: 95px;}
.right-fix > ul > li:first-child {width: 100px; height: 140px; background-color: #f1592a;}
.right-fix > ul > li:first-child a {position: relative; gap: 0; height: 140px; z-index: 3;}
.right-fix > ul > li:first-child a h2 {font-size: 21px; font-weight: 900; color: #fff;}
.right-fix > ul > li:first-child a p {font-size: 14px; font-weight: 700; color: #fff;}
.right-fix > ul > li:first-child a img {width: 40px; height: 53px;}
.right-fix > ul li a {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; gap: 10px;}
.right-fix > ul li a img {width: 35px; height: 35px;}
.right-fix > ul li a p {font-size: 16px; font-weight: 600; color: #999;}
.right-fix > ul > li.top {width: 100px; height: 70px; background-color: #fff; position: relative; top: -1px;}
.right-fix > ul > li.top a span {display: block; width: 50px; height: 50px; border-radius: 50%; background-color: #f1592a; color: #fff; font-size: 14px; font-weight: 900; text-align: center; line-height: 50px; position: relative; z-index: 5;}
.right-fix > ul ul {background-color: #fff;}
.right-fix > ul > li:nth-child(2) {display: none; background-color: #fff;}
.right-fix > ul > li:nth-child(4) {display: none; background-color: #fff;}

.right-fix .side-list > li:last-child {height:140px;}

/* bottom-fix */
.bottom-fix {position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; background-color: #fff; z-index: 6666; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2); display: none;}
.bottom-fix > ul {display: flex; align-items: center; height: 100%;}
.bottom-fix > ul > li:first-child {background-color: #f1592a; width: 20%; height: 100%;}
.bottom-fix > ul > li:first-child a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; gap: 10px;}
.bottom-fix > ul > li:first-child a img {filter: none; width: 30px;}
.bottom-fix > ul > li:first-child a h2 {color: #fff;}

.bottom-fix > ul > li:last-child {width: 80px; height: 100%; background-color: #f1592a;}
.bottom-fix > ul > li:last-child a {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.bottom-fix > ul > li:last-child a span {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; color: #f1592a; font-size: 14px; font-weight: 800;}

.bottom-fix > ul ul {display: flex; justify-content: space-around; align-items: center; width: calc(100% - 20% - 80px); height: 100%;}
.bottom-fix > ul ul li {width: 80px; height: 100%;}
.bottom-fix > ul ul li a {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 5px; width: 100%; height: 100%;}
.bottom-fix > ul ul li img {filter: none; width: 35px;}
.bottom-fix > ul ul li p {font-size: 14px; line-height: 14px; color: #999;}
.bottom-fix > ul ul li:first-child {display: none;}
.bottom-fix-br {display: none;}


/* contents */
.contents {position: relative; width: 100%;}
/* .contents .bg {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);} */


#vid {max-width: 100%; width: 100%; object-fit: cover; filter: brightness(0.6);}
/* page1 */
/* #page1 {width: 100%; height: 100vh; background: url(../img/main.jpg) no-repeat center/cover; position: relative;} */
#page1 {position: relative; margin-top: 80px; height: 760px; overflow: hidden;}
/* #page1 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);} */
#page1 .inner {margin: 0 auto; position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); max-width: 960px; width: 100%;}
#page1 .inner .txt {color: #fff; max-width: 960px;}
#page1 .inner .txt img {max-width: 860px; width: 100%; display: block; margin: 0 auto;}
#page1 .inner .txt h2 {font-size: 120px; font-weight: 500; line-height: 120px; margin-bottom: 10px; font-family: 'InkLipquid', sans-serif; letter-spacing: -10px;}
#page1 .inner .txt p {font-size: 50px; font-weight: 700; margin-bottom: 40px;}
#page1 .inner .txt h3 {font-size: 60px; font-weight: 900; line-height: 65px;}
#page1 .inner .txt span {font-weight: 400;}
#page1 .inner .txt a {display: block; width: 220px; height: 40px; border-radius: 15px; background-color: #ff9116; font-size: 18px; font-weight: 700; text-align: center; line-height: 40px; margin-top: 10px;}
#page1 .reservation {position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); display: flex; width: 1200px; height: 80px;}
#page1 .reservation li {width: 25%; background-color: #ff9116; height: 80px;}
#page1 .reservation li:nth-child(2n) {background-color: #fff;}
#page1 .reservation li:hover {background-color: #eb3f06; color: #fff;}
#page1 .reservation li a {display: block; width: 100%; height: 100%;}
#page1 .reservation li a::after {display: block; clear: both; content: '';}
#page1 .reservation li a .left {float: left; padding: 20px 0 0 15px;}
#page1 .reservation li a p {float: left; font-size: 16px; font-weight: 500; line-height: 80px; margin-left: 20px;}
#page1 .reservation li a .right {float: right; width: 30px; padding: 35px 15px 0 0;}

.index-btn {max-width: 1440px; width: 100%; height: 120px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); z-index: 15;}
.index-btn div {cursor: pointer; height: 100%;}
.index-btn div img {height: 100%;}

.index_robot {width: 100%; height: 100%;}




/* page2 */ 
#page2 {width: 100%; background: #fff;}
#page2 .inner {position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: 120px 0;}
#page2 .inner .title {display: flex; align-items: center; margin-bottom: 50px;}
#page2 .inner .title h2 {font-size: 36px; line-height: 36px;}
#page2 .inner .title span {font-size: 36px; line-height: 36px; margin-right: 10px;}

#page2 .docdoc {width: 100%;}
#page2 .docdoc .swiper-slide {display: flex; width: 100%; gap: 2.66%;}
#page2 .docdoc .swiper-slide a {display: block; width: 23%;}
#page2 .docdoc .swiper-slide a .image-boxes {position: relative;}
#page2 .docdoc .swiper-slide a .image-boxes img {width: 100%; height: 300px; object-fit: contain; border: 1px solid #ccc;}
#page2 .docdoc .swiper-slide a .image-boxes span {position: absolute; bottom: 20px; left: 25px; width: 120px; height: 30px; background-color:#999; font-size: 14px; font-weight: 700; color: #fff; text-align: center; line-height: 30px; border-radius: 30px;}
#page2 .docdoc .swiper-slide a .txt {width: 100%; padding: 30px; color: #666; border: 1px solid #ccc; border-top: none; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: #fff;}
#page2 .docdoc .swiper-slide a .txt b {font-weight: 600;}
#page2 .docdoc .swiper-slide a .txt h2 {font-size: 24px; font-weight: 400; margin-top: 5px; margin-bottom: 20px;}
#page2 .docdoc .swiper-slide a .txt p {font-weight: 600;}
#page2 .docdoc .swiper-slide a .txt div {display: flex; gap: 5px;}
/* #page2 .docdoc .swiper-slide a .txt span {display: flex; justify-content: center; align-items: center; padding: 5px 10px; border-radius: 25px; border: 1px solid #999; text-align: center; font-size: 12px;} */
#page2 .docdoc .swiper-slide a .txt span {font-weight: 600; font-size: 14px;}
#page2 .docdoc .swiper-slide a:hover .image-boxes img {border: 1px solid #f1592a;}
#page2 .docdoc .swiper-slide a:hover .image-boxes span {background-color: #f1592a;}
#page2 .docdoc .swiper-slide a:hover .txt {background-color: #f1592a; color: #fff; border: 1px solid #f1592a; border-top: none;}
.swiper-btn-prev {position: absolute; top: 50%; left: -50px; cursor: pointer;}
.swiper-btn-next {position: absolute; top: 50%; right: -50px; transform: rotate(180deg); cursor: pointer;}
#page2 .inner > a {display: block; float: right; width: 150px; height: 45px; border-radius: 45px; border: 2px solid #666; line-height: 45px; font-weight: 400; padding-left: 20px; position: relative; margin-top: 20px;}
#page2 .inner > a img {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#page2 .docdoc .swiper-slide a .txt div {width:100%;display: flex; align-items: center; flex-wrap: wrap;}
#page2 .docdoc .swiper-slide a .txt div span {display: flex; justify-content: center; align-items: center; padding: 5px 10px; border-radius: 25px; border: 1px solid #999; text-align: center; font-size: 12px;}
#page2 .docdoc .swiper-slide a:hover .txt div span {border: 1px solid #fff;}

/* page3 */
/* #page3 {width: 100%; height: 100vh; background: #fff;}
#page3 .inner {max-width: 1440px; width: 100%; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
#page3 .inner .title {display: flex; margin-bottom: 30px;}
#page3 .inner .title img {width: 182px;}
#page3 .inner .title h2 {font-size: 36px; font-weight: 300; margin-left: 35px;}
#page3 .inner .category {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}
#page3 .inner .category a {width: 150px; height: 150px; border-radius: 50%; border: 3px solid #ccc; font-size: 21px; font-weight: 300; color: #b3b3b3; text-align: center; line-height: 145px;}
#page3 .inner .category a.active {border: none; background-color: #ff9116; color: #fff; font-weight: 700;}

#page3 .inner .part-wrap {height: 400px; position: relative; display: none;}
#page3 .inner .part-wrap.on {display: block;}

#page3 .inner .part-wrap .swiper-btn-prev01 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next01 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev02 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next02 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev03 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next03 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev04 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next04 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev05 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next05 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev06 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next06 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev07 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next07 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-prev08 {cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 999;}
#page3 .inner .part-wrap .swiper-btn-next08 {cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 999;}

#page3 .inner .part-wrap .swiper-slide .slide-inner {display: flex; justify-content: center; align-items: center;}
#page3 .inner .part-wrap .swiper-slide .slide-inner img {max-height: 400px;}
#page3 .inner .part-wrap .swiper-slide .slide-inner .txt {margin-left: 50px;}
#page3 .inner .part-wrap .swiper-slide .slide-inner .txt h2 {font-size: 36px;}
#page3 .inner .part-wrap .swiper-slide .slide-inner .txt p {font-size: 18px; font-weight: 300; line-height: 36px; margin-top: 20px; margin-bottom: 20px;}
#page3 .inner .part-wrap .swiper-slide .slide-inner .txt a {display: block; width: 200px; height: 50px; border-radius: 25px; background-color: #333; color: #fff; text-align: center; line-height: 50px;}

#page3 .inner .detail-category {display: flex; flex-direction: row; flex-wrap: wrap; width: 1024px; justify-content: space-between; margin: 40px auto 0; display: none;}
#page3 .inner .detail-category.on {display: flex;}
#page3 .inner .detail-category a {display: block; width: 200px; height: 50px; border-radius: 25px; border: 3px solid #808080; font-size: 18px; font-weight: 300; color: #666; text-align: center; line-height: 45px;}
#page3 .inner .detail-category a.on {border: none; background-color: #ff9116; color: #fff; font-weight: 700} */


/* page3 */
#page3 {width: 100%; background: url(../img/main000.png) no-repeat center/ cover; padding: 100px 0; position: relative;}
#page3 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4;}
#page3 .inner {position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding-top: 50px;}
#page3 .inner > h2 {font-size: 48px; color: #fff;}
#page3 .inner > p {font-size: 20px; font-weight: 400; color: #fff; line-height: 26px; margin: 20px 0 40px; word-break: keep-all;}
#page3 .inner .real {width: 100%;}
#page3 .inner .real .swiper-slide {display: flex; width: 100%; gap: 2%;}
#page3 .inner .real .swiper-slide a {display: block; width: 32%; position: relative;}
#page3 .inner .real .swiper-slide a .hover_box {position: relative; width: 100%;}
#page3 .inner .real .swiper-slide a img {width: 100%; object-fit: cover;}
#page3 .inner .real .swiper-slide a .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0;}
#page3 .inner .real .swiper-slide a .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; color: #fff; opacity: 0;}
#page3 .inner .real .swiper-slide a .txt h2 {font-size: 16px; font-weight: 900; margin-bottom: 5px; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis; overflow: hidden;}
#page3 .inner .real .swiper-slide a .txt div {display: flex; gap: 16px; align-items: center;}
#page3 .inner .real .swiper-slide a .txt div p {font-size: 14px;}
#page3 .inner .real .swiper-slide a .txt div p:first-child {position: relative;}
#page3 .inner .real .swiper-slide a .txt div p:first-child::before {content: ''; position: absolute; top: 2px; right: -8px; width: 1px; height: 10px; background-color: #fff;}
#page3 .inner .real .swiper-slide a .txt .adj p:first-child::before {content: ''; position: absolute; top: 5px; right: -11px; width: 1px; height: 10px; background-color: #fff;}
#page3 .inner .real .swiper-slide a .txt .adj p:last-child {position: relative; top: 2px; left: 4px;}
#page3 .inner .real .swiper-slide a span {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #f1592a; font-size: 14px; font-weight: 900; text-align: center; line-height: 40px; color: #fff; opacity: 0;}
#page3 .inner .real .swiper-slide a:hover .bg {opacity: 0.4;}
#page3 .inner .real .swiper-slide a:hover .txt {opacity: 1;}
#page3 .inner .real .swiper-slide a:hover span {opacity: 1;}
.swiper-btn-prev01 {position: absolute; bottom: 21%; left: -50px; cursor: pointer;}
.swiper-btn-next01 {position: absolute; bottom: 21%; right: -50px; transform: rotate(180deg); cursor: pointer;}

#page3 .inner .real .swiper-slide a .review-date {position: absolute;left: 35%;color: white;}

#page3 .inner .real .swiper-slide a .flex-contents {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px;}
#page3 .inner .real .swiper-slide a .flex-contents div {display: flex; gap: 16px; align-items: center;}
#page3 .inner .real .swiper-slide a .flex-contents div p {font-size: 14px; color: #fff; position: relative; z-index: 11;}
#page3 .inner .real .swiper-slide a .flex-contents div p:first-child {position: relative;}
#page3 .inner .real .swiper-slide a .flex-contents div p:first-child::before {content: ''; position: absolute; top: 2px; right: -8px; width: 1px; height: 10px; background-color: #fff; z-index: 11;}
#page3 .inner .real .swiper-slide a .flex-contents span {display: block; width: 60px; height: 20px; background-color: #f1592a; color: #fff; font-size: 12px; line-height: 20px; text-align: center; position: unset; transform: translate(0); opacity: 1; border-radius: 0;}


/* page4 */
#page4 {width: 100%; background-color: #fff;}
#page4 .inner {position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: 130px 0 80px;}
#page4 .inner .title {display: flex; align-items: center; margin-bottom: 50px; position: relative;}
#page4 .inner .title a {display: block; width: 150px; height: 45px; border-radius: 45px; border: 2px solid #666; line-height: 45px; font-weight: 400; padding-left: 20px; position: absolute; right: 0;}
#page4 .inner .title a img {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#page4 .inner .title span {font-size: 36px; line-height: 36px; margin-right: 10px;}
#page4 .inner .title h2 {font-size: 36px; line-height: 36px;}
#page4 .inner .s-sns {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 2.66%;}
#page4 .inner .s-sns a {display: block; width: 23%; margin-bottom: 35px;}
#page4 .inner .s-sns a .image-boxes {position: relative;}
#page4 .inner .s-sns a .image-boxes img:first-child {width: 100%; height: 300px; object-fit: cover; border: 1px solid #b3b3b3; border-bottom: none;}
#page4 .inner .s-sns a .image-boxes img:last-child {position: absolute; top: 15px; left: 15px; width: 50px; height: 50px;}
#page4 .inner .s-sns a .txt {padding: 20px 25px; color: #808080; border: 1px solid #ccc; border-top: none; height: 110px;}
#page4 .inner .s-sns a .txt span {display: block; font-size: 14px; font-weight: 400; margin-bottom: 5px;}
#page4 .inner .s-sns a .txt > p {font-size: 14px; font-weight: 400; line-height: 24px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#page4 .inner .s-sns a .txt div {display: flex; gap: 8px;}
#page4 .inner .s-sns a .txt div p {width: 60px; height: 25px; border-radius: 25px; border: 1px solid #808080; font-size: 13px; line-height: 25px; text-align: center;}

.contents_h2 {font-size: 28px; font-weight: 700; padding-left: 15px; color: #fff; margin-bottom: 15px;cursor: pointer;}


/* page5 */
#page5 {width: 100%; background-color: #302f2e;}
#page5 .inner {position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: 120px 0;}
#page5 .inner .title {display: flex; align-items: center; margin-bottom: 50px;}
#page5 .inner .title span {font-size: 36px; line-height: 36px; margin-right: 10px; color: #fff;}
#page5 .inner .title h2 {font-size: 36px; line-height: 36px; color: #fff;}
#page5 .inner .news {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#page5 .inner .news .press {width: 31.25%;}
#page5 .inner .news .press .line {width: 100%; height: 2px; background-color: #fff;}
#page5 .inner .news .press .line.mb10 {margin-bottom: 10px;}
#page5 .inner .news .press .line.mt10 {margin-top: 10px;}
#page5 .inner .news .press a {display: block; width: 100%; height: 35px; border-radius: 15px;align-items: center; position: relative;}
#page5 .inner .news .press a p {line-height: 35px; font-weight: 300; color: #fff; width: 100%; padding: 0 15px; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis; overflow: hidden;}
#page5 .inner .news .press a span {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: block; width: 25px; height: 25px; border-radius: 50%; background-color: #f1592a; color: #fff; font-size: 10px; font-weight: 900; line-height: 25px; text-align: center; opacity: 0;}
#page5 .inner .news .press a:hover {border: 1px solid #b3b3b3; background-color: #fff;}
#page5 .inner .news .press a:hover p {color: #f1592a; font-weight: 700; width: calc(100% - 30px);}
#page5 .inner .news .press a:hover span {opacity: 1;}
#page5 .inner .news .photo-news {width: 31.25%; position: relative;}
#page5 .inner .news .photo-news .pt-n {width: 100%;}
#page5 .inner .news .photo-news .pt-n .swiper-slide {width: 100%; height: 200px;}
#page5 .inner .news .photo-news .pt-n .swiper-slide a {display: block; width: 100%; height: 100%;}
#page5 .inner .news .photo-news .pt-n .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

#page5 .inner .news .photo-news .swiper-pagination {bottom: 10px; right: 10px;}
#page5 .inner .news .photo-news .swiper-pagination-bullet {background-color: #fff; width: 10px; height: 10px; margin-right: 3px; opacity: 1;}
#page5 .inner .news .photo-news .swiper-pagination-bullet:last-child {margin-right: 0px;}
#page5 .inner .news .photo-news .swiper-pagination-bullet-active {background-color: #ff9116;}
.swiper-btn-prev02 {position: absolute; top: 0px; right: 40px; width: 25px; height: 25px; background-color: #fff; cursor: pointer;}
.swiper-btn-prev02 img {width: 7px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.swiper-btn-next02 {position: absolute; top: 0px; right: 0px; width: 25px; height: 25px; background-color: #fff; transform: rotate(180deg); cursor: pointer;}
.swiper-btn-next02 img {width: 7px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}


/* footer, page6 */
footer {width: 100%; padding: 100px 0; background-color: #f5f5f5;}
footer .inner {max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between;}
footer .inner .left div:first-child {margin-bottom: 50px;}
footer .inner .left div:nth-child(2) {margin-bottom: 5px;}
footer .inner .left div:last-child {margin-top: 40px;}
footer .inner .left .footer-flex {display: flex; gap: 40px;}
footer .inner .left a {font-weight: 400; position: relative;}
footer .inner .left a::before {content: ''; display: block; position: absolute; top: 2px; right: -20px; width: 1px; height: 12px; background-color: #808080;}
footer .inner .left a:last-child::before {display: none;}
footer .inner .left .footer-flex p {font-weight: 400; position: relative;}
footer .inner .left .footer-flex p::before {content: ''; display: block; position: absolute; top: 6px; right: -20px; width: 1px; height: 12px; background-color: #808080;}
footer .inner .left .footer-flex p:last-child::before {display: none;}
footer .inner .left div:last-child p:first-child {font-size: 18px; color: #808080; margin-bottom: 5px;}
footer .inner .left div:last-child p:last-child {font-size: 14px; color: #808080; word-break: keep-all;}
footer .inner .left div:last-child p:last-child br {display: none;}
footer .inner .right {display: flex; flex-direction: column; align-items: flex-end;}
footer .inner .right select {width: 200px; height: 45px; border: 1px solid #808080; font-size: 14px; font-weight: 400; color: #333; padding-left: 10px; outline: none; appearance: none; background: #fff url(../img/r_down.png) no-repeat 95%;}
footer .inner .right .sns {display: flex; gap: 15px; margin-top: 20px; margin-bottom: 40px;}
footer .inner .right .right-bot {display: flex; align-items: baseline; position: relative; top: 18px;}
footer .inner .right .right-bot p {font-size: 21px; font-weight: 400; margin-right: 10px;}
footer .inner .right .right-bot h2 {font-size: 36px; font-weight: 900;}
/* footer .inner .footer-top {display: flex; justify-content: space-between; color: #808080;}
footer .inner .footer-top div {display: flex; gap: 40px;}
footer .inner .footer-top div a {font-weight: 300; position: relative;}
footer .inner .footer-top div a::before {content: ''; display: block; position: absolute; top: 2px; right: -20px; width: 1px; height: 12px; background-color: #808080;}
footer .inner .footer-top div a:last-child:before {display: none;}
footer .inner .footer-top select {width: 200px; height: 45px; border: 1px solid #808080; font-size: 14px; font-weight: 300; color: #333; padding-left: 10px; outline: none; appearance: none; background: #fff url(../img/r_down.png) no-repeat 95%;}
footer .inner .footer-mid {display: flex; justify-content: space-between; color: #808080; margin-top: 40px;}
footer .inner .footer-mid div {display: flex;}
footer .inner .footer-mid .left {display: flex; flex-direction: column;}
footer .inner .footer-mid .left div {display: flex; gap: 36px; margin-bottom: 5px;}
footer .inner .footer-mid .left div p {position: relative;}
footer .inner .footer-mid .left div p::before {content: ''; display: block; position: absolute; top: 2px; right: -18px; width: 1px; height: 12px; background-color: #808080;}
footer .inner .footer-mid .left div p:last-child:before {display: none;}
footer .inner .footer-mid .right {display: flex; gap: 15px;}
footer .inner .footer-bot {display: flex; justify-content: space-between; margin-top: 30px;}
footer .inner .footer-bot .left p:first-child {font-size: 18px; color: #808080; margin-bottom: 5px;}
footer .inner .footer-bot .left p:last-child {font-size: 14px; color: #808080;}
footer .inner .footer-bot .left p:last-child br {display: none;}
footer .inner .footer-bot .right {display: flex; align-items: baseline;}
footer .inner .footer-bot .right p {font-size: 21px; font-weight: 300; margin-right: 10px;}
footer .inner .footer-bot .right h2 {font-size: 36px; font-weight: 900;} */







/* page4 */
/* #page4 {background-color: #333; padding: 200px 0;}
#page4 .inner {max-width: 1440px; margin: 0 auto; color: #fff;}
#page4 .inner > h2 {font-size: 36px; text-align: center;}
#page4 .inner > p {font-size: 21px; font-weight: 300; text-align: center;}
#page4 .inner .static {display: flex; justify-content: space-between;}
#page4 .inner .static div h2 {font-size: 96px; text-align: center;}
#page4 .inner .static div p {font-size: 36px; font-weight: 700; text-align: center;} */


/* page3 */
/* #page3 {width: 100%; height: 100%; padding: 120px 0;}
#page3 .inner {max-width: 1440px; margin: 0 auto;}
#page3 .inner .title {display: flex; margin-bottom: 30px;}
#page3 .inner .title h2 {font-size: 30px; margin-right: 40px;}
#page3 .inner .title p {font-size: 30px; font-weight: 300;}

#page3 .inner .n-p {display: flex; justify-content: space-between; margin-bottom: 50px;}
#page3 .inner .n-p > div {position: relative; width: 47%; padding: 30px; background-color: #f2f2f2;}
#page3 .inner .n-p > div h2 {font-size: 24px; margin-bottom: 20px;}
#page3 .inner .n-p > div img {position: absolute; top: 30px; right: 30px; width: 16px; height: 16px;}
#page3 .inner .n-p > div a::after {display: block; clear: both; content: '';}
#page3 .inner .n-p > div a {display: block; color: #6e7179; margin-bottom: 10px;}
#page3 .inner .n-p > div a p {float: left; font-size: 18px; width: 80px;}
#page3 .inner .n-p > div a h3 {float: left; font-size: 18px; font-weight: 400; width: calc(100% - 190px); white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis;}
#page3 .inner .n-p > div a span {float: right; font-size: 18px; width: 100px;}
#page3 .inner .n-p .press-contents a p {float: left; font-size: 18px; width: 140px;}
#page3 .inner .n-p .press-contents a h3 {float: left; font-size: 18px; font-weight: 400; width: calc(100% - 250px); white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis;}
#page3 .inner .r-h {display: flex; justify-content: space-between;}
#page3 .inner .r-h > div {position: relative; width: 47%;}
#page3 .inner .r-h > div .title {display: flex; position: relative;}
#page3 .inner .r-h > div .title h2 {font-size: 24px;}
#page3 .inner .r-h > div .title p {font-size: 18px; color: #6e7179; position: relative;top: 8px;}
#page3 .inner .r-h > div .title img {position: absolute; bottom: 5px; right: 30px; width: 16px; height: 16px;}
#page3 .inner .r-h > div .swiper-slide {width: 100%;}
#page3 .inner .r-h > div .swiper-slide a {position: relative; display: block; width: 100%; height: 100%;}
#page3 .inner .r-h > div .swiper-slide a img {width: 100%; border-radius: 10px; filter: brightness(0.65);}
#page3 .inner .r-h > div .swiper-slide a .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; word-break: keep-all;}
#page3 .inner .r-h > div .swiper-slide a .txt h2 {font-size: 24px; color: #fff; text-align: center;}
#page3 .inner .r-h > div .swiper-slide a .txt p {font-size: 18px; color: #fff; text-align: center;}

#page3 .inner .r-h .real-contents .swiper-pagination {position: absolute; bottom: 30px; text-align: right; padding-right: 30px;}
#page3 .inner .r-h .real-contents .swiper-pagination-bullet {background-color: #fff; width: 15px; height: 15px; margin-right: 5px; opacity: 1;}
#page3 .inner .r-h .real-contents .swiper-pagination-bullet:last-child {margin-right: 0px;}
#page3 .inner .r-h .real-contents .swiper-pagination-bullet-active {background-color: #eb3f06;}

#page3 .inner .r-h .health-contents .swiper-pagination {position: absolute; bottom: 30px; text-align: right; padding-right: 30px;}
#page3 .inner .r-h .health-contents .swiper-pagination-bullet {background-color: #fff; width: 15px; height: 15px; margin-right: 5px; opacity: 1;}
#page3 .inner .r-h .health-contents .swiper-pagination-bullet:last-child {margin-right: 0px;}
#page3 .inner .r-h .health-contents .swiper-pagination-bullet-active {background-color: #eb3f06;} */


/* footer, page6 */
/* footer {width: 100%; background-color: #f2f2f2; padding: 40px 0;}
footer .inner {position: relative; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
footer .inner .left h2 {font-size: 30px;}
footer .inner .left h3 {font-size: 40px;}
footer .inner .left h3 span {font-size: 16px; font-weight: 900; margin-right: 5px;}
footer .inner .left .time {display: flex; margin-bottom: 3px;}
footer .inner .left .time span {color: #808080;}
footer .inner .left .time p {font-size: 17px; font-weight: 700; margin-left: 30px;}
footer .inner .left .time.sel p {margin-left: 15px;}
footer .inner .left > p {color: #808080;}

footer .inner .center {position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; padding-top: 50px;}
footer .inner .center::before {content: ''; display: block; position: absolute; top: 50px; left: -30px; width: 2px; height: 240px; background-color: #ddd;}
footer .inner .center li {width: 33%; height: 90px;}
footer .inner .center li a {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer .inner .center li a p {color: #666;}

footer .inner .right {position: relative; padding-top: 50px;}
footer .inner .right::before {content: ''; display: block; position: absolute; top: 50px; left: -50px; width: 2px; height: 240px; background-color: #ddd;}
footer .inner .right h2 {font-size: 30px; margin-bottom: 10px;}
footer .inner .right > p {font-size: 18px; color: #808080; margin-bottom: 30px;}
footer .inner .right ul {display: flex; flex-wrap: wrap; flex-direction: row; gap: 20px;}
footer .inner .right ul li a {display: flex; flex-direction: column; justify-content: center; align-items: center;}

footer .footer-banner {width: 100%; height: 360px; background: url(../img/ffffff.jpg) no-repeat center/cover; background-color: #333; position: relative; margin-top: 40px;}
footer .footer-banner .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
footer .footer-banner > .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
footer .footer-banner > .txt h2 {font-size:  36px; font-weight: 300; color: #fff;}
footer .footer-banner .txt .line {width: 100px; height: 2px; background-color: rgba(255,255,255,0.6); margin: 20px auto;}
footer .footer-banner > .txt h3 {font-size: 24px; color: #fff;}
footer .footer-banner > .txt h3 span {font-weight: 700; color: #ff9116;}
footer .footer-banner > .txt .btn {width: 140px; height: 40px; border-radius: 20px; border: 1px solid #fff; background-color: rgba(255,255,255,0.2); color: #fff; font-weight: 500; text-align: center; line-height: 40px; margin: 15px auto 0;}

footer .f-b {max-width: 1440px; margin: 0 auto;}
footer .f-b .logo-images {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; margin: 50px auto 35px;}
footer .f-b .logo-images li {width: 13%;}
footer .f-b .logo-images li img {width: 100%;}
footer .f-b .f-contents {display: flex; gap: 30px; justify-content: center; align-items: center;}
footer .f-b .f-contents li {color: #666; position: relative;}
footer .f-b .f-contents li::before {content: ''; display: block; position: absolute; top: 8px; right: -15px; width: 1px; height: 10px; background-color: #666;}
footer .f-b .f-contents li:last-child:before {display: none;} */


.news-view{width: 100%; height:50px; line-height: 50px; box-sizing: border-box; border-top: 1px solid #999; border-bottom: 1px solid #ccc;  padding-left: 15px; color: #666;font-size: 14px;margin-top: 25px;}
.news-view::after{clear: both;content: '';display: block;}
.news-view .title{float: left; width: 70%; font-weight: 900;}
.info_wrap01{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box; z-index: 100001;}
.info_wrap02{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box; z-index: 100001;}
.info_wrap03{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box; z-index: 100001;}
.view-detail {width: 100%}
.info_close_btn {width: 20px; height: 20px; position: absolute; right: 25px; top: 47px; cursor: pointer;}
.info_close_btn img{ display: block;}
.info_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100000; display: none;}




.robot_left .pop_btn {position: fixed; bottom: 90px; left: 0; z-index: 299; width: 40px; height: 40px; border-radius: 0px 10px 10px 0; background-color: #f1592a; cursor: pointer; display: none;}
.robot_left .pop_btn span:first-child {position: absolute; top: 13px; left: 12px; width: 17px; height: 3px; border-radius: 3px; background-color: #fff; transform: rotate(45deg);}
.robot_left .pop_btn span:last-child {position: absolute; top: 24px; left: 12px; width: 17px; height: 3px; border-radius: 3px; background-color: #fff; transform: rotate(-45deg);}


.pop_contents {position: fixed; bottom: 0px; left: 0; z-index: 300; width: 110px;}
/* top: -15px; display: none;*/
.pop_contents .close {position: absolute; top: 50%; right: -15px; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); cursor: pointer; z-index: 11;}
.pop_contents .close span:first-child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 16px; height: 3px; border-radius: 3px; background-color: #000;}
.pop_contents .close span:last-child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 16px; height: 3px; border-radius: 3px; background-color: #000;}

.pop_contents .fix_slide {width: 110px;}
.pop_contents .fix_slide .swiper-slide {display: block; width: 100%;}

.pop_contents img {width: 100%;}





/* 반응형 시작 */
@media(max-width:1600px){

}

@media(max-width:1440px){

    header .inner .h-menu nav .gnb > li {width: 120px;}
    header .inner .h-menu nav .gnb > li > a {font-size: 16px;}
    header .inner .h-menu nav .gnb ul li {width: 120px;}
    header .inner .h-menu nav .gnb ul li a {font-size: 13px;}
    header .inner .h-menu nav .gnb ul li a span {width: 110px;}

    header .inner {padding: 0 5%;}
    header .inner .h-menu .join-login {padding: 0 5%;}
    #page1 .inner {padding: 0 5%;}
    #page2 .inner {padding: 120px 5%;}
    #page3 .inner {padding: 0 5%;}
    #page4 .inner {padding: 130px 5% 80px;}
    #page5 .inner {padding: 120px 5%;}
    footer .inner {padding: 0 5%;}

    .index-btn {padding: 0 5%;}
    .swiper-btn-prev {left: 16px;}
    .swiper-btn-next {right: 16px;}
    .swiper-btn-prev01 {left: 16px;}
    .swiper-btn-next01 {right: 16px;}

    #page2 .docdoc .swiper-slide a .txt span {font-size: 12px;}
    #page2 .docdoc .swiper-slide a .txt p {font-size: 12px;}
    #page2 .docdoc .swiper-slide a .txt div span {padding: 3px 8px; font-size: 10px;}

}

@media(max-width:1350px){

    .robot_left .pop_btn {display: block; left: -40px;}
    .pop_contents .close {display: block;}
    .pop_contents {left: 0; bottom: 75px;}

    .bottom-fix {display: block;}

    header .inner .h-menu .mypage-logout {display: none;}
    .right-fix {display: none;}

    #page1 {margin-top: 80px; height: 600px;}
    #vid {margin-top: 0;}

    header .ham-btn {display: block;}
    header .inner .h-menu .logo {float: none; margin: 0 auto;}
    header .inner .h-menu .chi {display: block; position: absolute; top: 30px; right: 5%; margin-top: 0;}
    header .inner .h-menu nav {display: none;}
    header .inner .h-menu .join-login {display: none;}

    /* .right-fix {width: 75px; top: auto; bottom: 20px; right: 1%; transform: translateY(0); opacity: 0.5;}
    .right-fix ul li {width: 75px; height: 70px;}
    .right-fix ul li a {gap: 5px;}
    .right-fix ul li a img {width: 35px;}
    .right-fix ul li a p {font-size: 12px;}
    .right-fix > ul > li:first-child {width: 75px; height: 100px;}
    .right-fix > ul > li:first-child a {height: 100px;}
    .right-fix > ul > li:first-child a h2 {font-size: 16px;}
    .right-fix > ul > li:first-child a p {font-size: 12px;}
    .right-fix > ul > li:first-child a img {width: 30px; height: 40px;}
    .right-fix > ul > li:last-child {width: 75px; height: 80px;}
    .right-fix ul ul {display: none;}
    .right-fix > ul > li:nth-child(2) {display: block; height: 60px;}
    .right-fix > ul > li:nth-child(4) {display: none; height: 30px;}
    .right-fix .el {top: 0px; width: 75px; height: 75px;}
    .right-fix .el_box {top: 40px; left: 50%; width: 75px; height: 80px;}
    .right-fix > ul > li.top img {width: 75px;} */

    #page2 .docdoc .swiper-slide a .image-boxes img {height: 260px;}

    #page4 .inner .s-sns a .image-boxes img:first-child {height: 260px;}

    footer .inner .left div:last-child p:last-child br {display: block;}

}

@media(max-width:1240px){

    #page2 .docdoc .swiper-slide a .txt {padding: 20px;}

}

@media(max-width:1100px){

    #page1 .inner .txt img {width: 400px;}
    .index-btn {height: 80px;}
    
    #page2 .docdoc .swiper-slide {flex-direction: row; flex-wrap: wrap;}
    #page2 .docdoc .swiper-slide a {width: 48%; margin-bottom: 30px;}
    #page2 .docdoc .swiper-slide a:nth-child(3) {margin-bottom: 0;}
    #page2 .docdoc .swiper-slide a:nth-child(4) {margin-bottom: 0;}
    #page2 .docdoc .swiper-slide a .image-boxes img {object-fit: contain;}

    .swiper-btn-prev {top: 51%;}
    .swiper-btn-next {top: 51%;}

    #page4 .inner .s-sns a .image-boxes img:first-child {height: 200px;}

}

@media(max-width:1053px){

    footer .inner {display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;}
    footer .inner .left {-webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2;  box-ordinal-group: 2; display: flex; flex-direction: column; align-items: center;}
    footer .inner .right {-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1;  box-ordinal-group: 1; align-items: center;}
    footer .inner .right .sns {margin-bottom: 20px;}
    footer .inner .right .right-bot {margin-bottom: 20px;}
    footer .inner .left div:first-child {margin-bottom: 5px;}


    #page1 {height: 450px;}

}

@media(max-width:1024px){

    /* .top_mob {display: flex;} */
    #page3 .inner .real .swiper-slide a:hover .txt {display: none;}
    #page3 .inner .real .swiper-slide a span {display: none;}

    
    #page2 .inner .title span {font-size: 24px; line-height: 24px; margin-right: 5px; height: 24px;}
    #page2 .inner .title h2 {font-size: 24px; line-height: 24px; height: 24px;}
    #page2 .inner .title h2 span {font-size: 24px; line-height: 24px; margin-right: 5px; height: 24px;}
    #page2 .inner .title a {width: 100px; height: 35px; line-height: 33px; padding-left: 10px;}
    #page2 .inner .title a img {width: 6px; right: 10px;}

    #page3 .inner > h2 {font-size: 36px;}
    #page3 .inner > p {font-size: 18px; line-height: 24px; margin: 25px 0 20px;}

    #page4 .inner .title h2 {font-size: 24px;}
    #page4 .inner .title span {font-size: 24px; line-height: 24px; margin-right: 5px;}
    #page4 .inner .title h2 span {font-size: 24px; margin-right: 5px;}
    #page4 .inner .title a {width: 100px; height: 35px; line-height: 33px; padding-left: 10px;}
    #page4 .inner .title a img {width: 6px; right: 10px;}
    #page4 .inner .s-sns {gap: 2%;}
    #page4 .inner .s-sns a {width: 49%;}
    #page4 .inner .s-sns a .image-boxes img:first-child {height: 300px;}

    #page5 .inner {padding: 80px 5%;}
    #page5 .inner .title {margin-bottom: 30px;}
    #page5 .inner .title span {font-size: 24px; line-height: 24px; margin-right: 5px;}
    #page5 .inner .title h2 {font-size: 24px; line-height: 24px;}

    #page5 .inner .news {justify-content: flex-start; gap: 4%;}
    #page5 .inner .news .press {width: 48%; margin-bottom: 30px;}
    #page5 .inner .news .press h2 {font-size: 20px; margin-bottom: 10px;}
    #page5 .inner .news .photo-news {width: 100%;}
    #page5 .inner .news .photo-news > h2 {font-size: 20px; margin-bottom: 10px;}

}

@media(max-width:926px){
    
    

} /* 반응형 가로 926px */ 

@media(max-width:875px){

    .bottom-fix > ul > li:first-child {display: none;}
    .bottom-fix > ul > li:last-child {position: absolute; right: 16px; bottom: 100px; width: 50px; height: 50px; background-color: transparent; border-radius: 50%; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);}
    .bottom-fix > ul > li:last-child a {background-color: #f1592a; border-radius: 50%;}
    .bottom-fix > ul > li:last-child a span {color: #fff; background-color: #f1592a;}
    .bottom-fix > ul ul {width: 100%;}
    .bottom-fix > ul ul li:first-child {display: block; background-color: #f1592a;}
    .bottom-fix > ul ul li:nth-child(4) {display: none;}
    .bottom-fix > ul ul li h2 {font-size: 12px; line-height: 14px; font-weight: 400; color: #fff;}

} /* 반응형 가로 875px */ 

@media(max-width:810px){

    #page1 {height: 350px;}

} /* iPad */

@media(max-width:768px){

    .info_wrap01 {width: 343px; margin: 0; transform: translate(-50%, -50%);}
    .info_wrap02 {width: 343px; margin: 0; transform: translate(-50%, -50%);}
    .info_wrap03 {width: 343px; margin: 0; transform: translate(-50%, -50%);}

    #page1 .inner .txt img {width: 300px;}
    .index-btn {height: 50px;}

    #page2 .inner {padding: 100px 5% 120px;}

    .swiper-btn-prev {top: auto; bottom: 60px; left: 5%; transform: scale(0.7);}
    .swiper-btn-next {top: auto; bottom: 60px; left: 70px; right: auto; transform: rotate(180deg) scale(0.7);}

    .swiper-btn-prev01 {bottom: -50px; left: auto; right: 70px; transform: scale(0.7);}
    .swiper-btn-next01 {bottom: -50px; right: 5%; transform: rotate(180deg) scale(0.7);}

    #page4 .inner .title {margin-bottom: 25px;}
    #page4 .inner .s-sns a .image-boxes img:first-child {height: 240px;}

    #page5 .inner .news .press {width: 100%; margin-bottom: 50px;}

    footer .inner .left div:first-child {flex-direction: row; flex-wrap: wrap;  gap: 10px; justify-content: center; font-size: 13px; margin-bottom: 15px;}
    footer .inner .left div:first-child a::before {right: -5px;}
    footer .inner .left div:nth-child(2) {flex-direction: column; gap: 0; text-align: center;}
    footer .inner .left div:nth-child(3) {flex-direction: column; gap: 0; text-align: center;}
    footer .inner .left div:nth-child(2) p {margin-bottom: 5px; font-size: 13px;}
    footer .inner .left div:nth-child(2) p::before {display: none;}
    footer .inner .left div:nth-child(3) p {margin-bottom: 5px; font-size: 13px;}
    footer .inner .left div:nth-child(3) p::before {display: none;}
    footer .inner .left div:last-child {text-align: center;}
    footer .inner .left div:last-child p:first-child {font-size: 15px;}
    footer .inner .left div:last-child p:last-child {font-size: 13px; word-break: keep-all;}


    #page3 .inner .real .swiper-slide a .flex-contents {display: flex; flex-direction: column-reverse; justify-content: unset; align-items: unset;}
    #page3 .inner .real .swiper-slide a .flex-contents span {margin-bottom: 5px; width: 40px;}

}

@media(max-width:676px){

}

@media(max-width:635px){

    #page1 {height: 300px;}

}

@media(max-width:600px){

    #page1 .inner .txt img {width: 250px;}
    .index-btn {height: 35px;}

    #page2 .docdoc .swiper-slide a .image-boxes img {height: 200px;}
    #page2 .docdoc .swiper-slide a .image-boxes span {width: 90px; bottom: 10px; left: 15px; font-size: 12px;}
    #page2 .docdoc .swiper-slide a .txt {padding: 15px;}
    #page2 .docdoc .swiper-slide a .txt b {font-size: 14px;}
    #page2 .docdoc .swiper-slide a .txt h2 {font-size: 18px; line-height: 18px; margin-bottom: 10px;}
    /* #page2 .docdoc .swiper-slide a .txt p {font-size: 14px;} */
    /* #page2 .docdoc .swiper-slide a .txt span {font-size: 14px; line-height: 14px;} */
    
    #page2 .docdoc .swiper-slide a .txt > div {flex-direction: column; align-items: flex-start;}

    #page4 .inner .s-sns a .image-boxes img:first-child {height: 200px;}

}

@media(max-width:520px){

    #page1 {height: 250px;}


    #page3 .inner .real .swiper-slide a .flex-contents div {gap: 10px;}
    #page3 .inner .real .swiper-slide a .flex-contents div p {font-size: 10px;}
    #page3 .inner .real .swiper-slide a .flex-contents div p:first-child::before {top: 1px; right: -5px; height: 9px;}

}

@media(max-width:480px){

    #page4 .inner .s-sns a {width: 100%;}
    /* #page2 .inner > a {margin-top: 0;} */
    #page2 .inner {padding: 80px 5% 120px;}
    #page2 .docdoc .swiper-slide a:nth-child(3) {position: relative; bottom: 1px;}
    #page2 .docdoc .swiper-slide a:nth-child(4) {position: relative; bottom: 1px;}
    #page2 .inner .title {margin-bottom: 30px;}

    #page3 {padding: 50px 0;}
    #page3 .inner > h2 {font-size: 24px;}
    #page3 .inner > p {font-size: 14px; line-height: 20px; margin: 15px 0 10px;}
    .swiper-btn-prev01 {bottom: -45px;}
    .swiper-btn-next01 {bottom: -45px;}

    .bottom-fix {height: 75px;}
    .bottom-fix > ul > li:last-child {bottom: 85px;}
    /* .bottom-fix > ul ul {position: relative; top: -5px;} */
    .bottom-fix > ul ul li img {width: 30px;}
    .bottom-fix > ul ul li p {font-size: 12px; line-height: 12px;}

}

@media(max-width:440px){

    #page2 .docdoc .swiper-slide a .image-boxes img {height: 150px;}
    
    footer .inner .left div:last-child p:last-child br {display: none;}

    #page2 .docdoc .swiper-slide a .txt div span {padding: 3px 8px; font-size: 10px;}

    #page1 {height: 200px;}

} /* NOTE, S10, S20, 20+, Ultra, iphone 11/12/13 pro max */

@media(max-width:390px){

} /* iphone 11/12/13 pro, mini, se */