@charset "utf-8"; /* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden} 
#skipToContent a:focus, 
#skipToContent a:active {width:200px; height:50px; background:#21272e; color:#fff; font-size:14px; font-weight:bold; text-align:center; text-decoration:none; line-height:50px} 

.only-desktop-tablet {display:block;} 
.only-desktop {display:block;} 
.only-tablet {display:none;} 
.only-mobile {display:none !important;} 

#wrapper {overflow:hidden;} 

/* header */
#header {position:relative; width:100%; background:#fff; border-bottom:1px solid #ddd; z-index:100;} 
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); z-index:10; max-width: 1600px;} 

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;} 
#gnb>ul {display:flex; justify-content:flex-end;} 
#gnb>ul>li {position:relative; padding:0 var(--padding-40-20);} 
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:var(--header-height); color:#242424; font-size:var(--font-size-22-18); font-weight:600; letter-spacing:-.03em; line-height:1.3em;} 
#gnb .submenu {display:none; position:absolute; left:50%; width:180px; transform:translateX(-50%); margin-top: -10px; background:#ff89b9; border-top-right-radius: var(--border-radius-30-16); border-bottom-left-radius: var(--border-radius-30-16); text-align:center;} 
#gnb .submenu>ul {padding:var(--padding-20-10) 5px;} 
#gnb .submenu>ul>li>a {display:block; padding:5px 0; color:#fff; font-size:var(--font-size-18); line-height:1.33em;} 
#gnb .submenu>ul>li>a:hover {text-decoration:underline;} 
#gnb .submenu>ul>li.active>a {text-decoration:underline;} 

/* main */
[data-aos=fade-up] {transform: translate3d(0,100px,0);} 
.main-visual {position:relative; height:620px; overflow:hidden; color:#fff;} 
.main-visual .item {position:relative; height:620px; overflow:hidden;} 
.main-visual .image {position:relative; height:620px; overflow:hidden; transition:5s; transform:scale(1.1);} 
.main-visual .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;} 
.main-visual .main-video {position:absolute; bottom:0; left:0; width:100%; height:100%; overflow:hidden; background-color: #000;} 
.main-video video {position: absolute; bottom: 0; left: 0; width: 100%; height: 116.6%; object-fit: cover;} 
.main-visual .caption {position:absolute; top:50%; transform:translateY(-50%); width:100%; z-index:40;} 
.main-visual .caption p {opacity:0; transform:translateY(50px); transition:1.4s; font-size:var(--font-size-50-30); font-weight:700; line-height:1.12em; filter: drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.4));} 
.main-visual .active .image {transform:scale(1);} 
.main-visual .active .caption p {opacity:1; transform:translateY(0);} 
.main-visual .slick-dots {display:flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: 50%; z-index: 50; width: 100%; max-width: 1400px; height: fit-content; margin: 0 auto; margin-left: -700px; margin-top: var(--margin-60-30); padding: 0; line-height: 0;} 
.main-visual .slick-dots li {margin-right:var(--margin-18-10);} 
.main-visual .slick-dots li:last-child {margin-right:0;} 
.main-visual .slick-dots li button {display:block; width: 14px; height: 14px; background-color: transparent; border: 4px solid rgba(255, 255, 255, 0.6); overflow:hidden; transition:.2s; font-size:0; line-height:0; text-indent:-99999em; border-radius:100%;} 
.main-visual .slick-dots li.slick-active button {width: 20px; height: 20px; border: 0; background-color: #fff;} 

.section {padding:var(--padding-100-60) 0;} 

.sec-tit {margin-bottom:var(--margin-60-30); text-align:center;} 
.sec-tit .en {margin-bottom:10px; text-align:center; font-weight:700; font-size: var(--font-size-18); line-height:1em; color: var(--color-primary);} 
.sec-tit h2 {font-size:var(--font-size-40); color:#242424; line-height:1.4em;} 

/* sec1 */
.sec1 ul {display:flex; flex-wrap:wrap; margin:0 -30px;} 
.sec1 ul li {width:33.3333%; padding:0 30px; cursor:pointer;} 
.sec1 ul li:nth-child(2) {padding-top:var(--padding-60-20);} 
.sec1 ul li .inner {position:relative; width:100%; height:440px; background: url(/images/main/service-01.jpg) no-repeat center/cover; border-top-right-radius: var(--border-radius-80-20); border-bottom-left-radius: var(--border-radius-80-20); padding:var(--padding-30-16);} 
.sec1 ul li:nth-child(2) .inner {background-image: url(/images/main/service-02.jpg);} 
.sec1 ul li:nth-child(3) .inner {background-image: url(/images/main/service-03.jpg);} 
.sec1 ul li .inner::before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:12px solid rgb(255, 137, 185); z-index:1; border-top-right-radius: var(--border-radius-80-20); border-bottom-left-radius: var(--border-radius-80-20); opacity:0; transition: .3s;} 
.sec1 ul li:hover .inner::before {opacity:0.9;} 
.sec1 ul li .inner .tit {position:relative; padding-left:45px; font-weight:700; font-size: var(--font-size-28-20); color: #fff; line-height: 1.2em; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);} 
.sec1 ul li .inner .tit::before {content: ""; position: absolute; top:0; left:0; width:34px; height:39px; background: url(/images/main/bullet.png) no-repeat center/contain;} 

/* sec2 */
.bg-pink {background-color: #fef6f9;} 

.sec2 .sec-tit .en {position: relative; width: fit-content; margin: 0 auto 10px;} 
 .sec2 .sec-tit .en::before {content: ""; position: absolute; top:-30px; left:-100px; width:64px; height:70px; background: url(/images/main/bullet2.png) no-repeat center/contain;} 
.sec2 .sec-tit {position:relative;} 
.sec2 .sec-tit .btn-more {position: absolute; right:0; bottom:0; font-weight:600;} 
.sec2 .sec-tit .btn-more p {position:relative; color: #454545;} 
.sec2 .sec-tit .btn-more p::after {content: "↗"; display:inline-block; margin-left: 5px; transition: 0.1s;} 
.sec2 .sec-tit .btn-more:hover p {color: var(--color-primary);} 
.sec2 .sec-tit .btn-more:hover p::after {content: "→";} 

.sec2 .link {display:block;} 
.sec2 .link .thumb {position:relative; padding-bottom: 85.11%; overflow:hidden; border-top-right-radius: var(--border-radius-30-16); border-bottom-left-radius: var(--border-radius-30-16);} 
.sec2 .link .thumb::after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.2); opacity:0; transition: 0.3s;} 
.sec2 .link .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;} 
.sec2 .link .thumb p {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); opacity:0; transition: 0.3s; font-weight:500; color: #fff; z-index:1;} 
.sec2 .link:hover .thumb p {opacity:1;} 
.sec2 .link:hover ::after {opacity:1;} 
.sec2 .link .cnt {text-align:center;} 
.sec2 .link .cnt .tit {margin-top:var(--margin-25-15); color:#242424; font-size:var(--font-size-20); font-weight:500; line-height:1em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition: 0.3s;} 
.sec2 .link .cnt .date {margin-top:10px; font-weight:300; font-size: var(--font-size-15); color: #686868; transition: 0.3s;} 
.sec2 .link:hover .tit {font-weight:600;} 
.sec2 .link:hover .date {font-weight:400;} 
 
.gallery-slide {position:relative;} 
.gallery-slide .arrows {position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; z-index: 50; width: 100%;} 
.gallery-slide .swiper-button-next, 
.gallery-slide .swiper-button-prev {position: absolute; top:50% !important; transform: translateY(-50%) !important; margin-top: -30px !important; z-index: 10; cursor: pointer; display:block !important; width: 50px !important; height: 50px !important; --swiper-theme-color: none; --swiper-navigation-size: 0; border-radius: 100%; border: 1px solid var(--color-primary); color: var(--color-primary); font-weight:600; font-size: var(--font-size-26-16); text-align: center; line-height: 48px; transition: 0.3s;} 
.gallery-slide .swiper-button-next:hover ,
.gallery-slide .swiper-button-prev:hover {background-color: var(--color-primary); color: #fff;} 
.gallery-slide .swiper-button-prev {right: auto; left: -100px; transform: translateY(-50%) rotate(180deg) !important;} 
.gallery-slide .swiper-button-next {right: -100px;; left: auto;} 
.swiper .swiper-button-next:after, 
.swiper .swiper-button-prev:after {font-size: 0;} 

/* sec3 */
.sec3 .banner {width:100%; height:400px; display:flex; justify-content: center; align-items: center; flex-direction: column; background: url(/images/main/bg-banner.jpg) no-repeat center/cover; border-radius: var(--border-radius-50-30);} 
.sec3 .banner .tit {color: #fff; font-weight:700; font-size: var(--font-size-40); line-height:1.25em; text-align:center;} 
.sec3 .banner .tit strong {font-size: var(--font-size-46-28);} 

.btn-apply {display: block; position: relative; margin: var(--margin-50-20) auto 0; padding: 0 var(--padding-40-20); border-radius: 50vh; background-color: #fff; line-height: 54px;} 
.btn-apply::after {content: ""; position: absolute; top:50%; right:5px; transform: translateY(-50%); width:44px; height:44px; background: url(/images/main/arrow-apply.svg) no-repeat center/contain; opacity:0; transition: 0.3s;} 
.btn-apply p {color: var(--color-primary); font-weight:500; transition: 0.3s;} 
.btn-apply:hover::after {opacity:1;} 
.btn-apply:hover p {padding-right: var(--padding-20-16);} 

/* sub page */
.contain {max-width:1600px; margin:0 auto; padding-left:var(--container-space); padding-right:var(--container-space);} 
#contArea {max-width:1600px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;} 
#contArea.wide {max-width:100% !important; padding-left:0; padding-right:0;} 

#sub #contArea,
#sub .contain {max-width: 1400px;} 

.sub-title {margin:var(--margin-80-40) 0 30px; text-align:center;} 
.sub-title h1 {position:relative; padding-bottom:var(--padding-25-15); line-height:1em; color: var(--color-dark); font-size:var(--font-size-35-25);} 
.sub-title h1::after {content: ""; position: absolute; bottom:0; left:50%; transform: translateX(-50%); width: 70px; height: 3px; background-color: rgb(255, 137, 185);} 

.real-cont {padding:0 0 var(--padding-150-80);} 

.sub-visual {position:relative; height:400px; z-index:10; overflow:hidden;} 
.sub-visual .background {position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */
 -moz-transform:scale(1.09); /* Firefox */
 -webkit-transform:scale(1.09); /* Safari and Chrome */
 -o-transform:scale(1.09); /* Opera */
transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0;} 
.sub-visual.load .background {transform:scale(1); -ms-transform:scale(1); /* IE 9 */
 -moz-transform:scale(1); /* Firefox */
 -webkit-transform:scale(1); /* Safari and Chrome */
 -o-transform:scale(1); /* Opera */} 
 .sub-visual .tt-wrap {width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; text-align: center;} 
.sub-visual .tt-wrap .tit {font-size: var(--font-size-40); line-height: 1.2em; font-weight: 700;} 

.lnb-wrap {position:relative; border-bottom:1px solid #ddd;} 
.lnb {margin:0 auto; max-width:1200px;} 
.lnb ul {display:flex;} 
.lnb ul li {flex:1; text-align:center; border-right:1px solid #ddd;} 
.lnb ul li:first-child {border-left:1px solid #ddd;} 
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:var(--lnb-height); padding:0 15px; color:#242424; font-size:var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em;} 
.lnb ul li.active {background:var(--color-primary); border:0;} 
.lnb ul li.active a {color:#fff;} 


/* quick */
.quick {position: fixed; top: 35%; right: 50px; z-index: 80;} 
#sub .quick {top: 19%;} 
.quick a {display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; border-radius: 100%; color: #fff; font-size: var(--font-size-20); font-weight: 500; line-height: 1.25em; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.3);} 
.quick ul {display: flex; flex-direction: column; align-items: end;} 
.quick ul li {margin-bottom: 10px;} 
.quick ul li:last-child {margin-bottom: 0;} 
.quick ul li a {background-color: #fff; border: 0; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);} 
.quick ul li a i {width: 33px; height: 33px; background-position: center; background-repeat: no-repeat; background-size: contain;} 
.quick ul li a i.quick01 {background-image: url(../images/common/quick-01.png);} 
.quick ul li a i.quick02 {background-image: url(../images/common/quick-02.png);} 
.quick ul li a i.quick03 {background-image: url(../images/common/quick-03.png);} 
.quick ul li a i.quick04 {background-image: url(../images/common/quick-04.png);} 
.quick ul li a p {display: none; font-weight: 500; font-size: var(--font-size-20); color: #fff;} 
.quick ul li a:hover {justify-content: flex-start; width: 210px; padding: 0 var(--padding-20-16); border-radius: 50vh; background: var(--color-primary);} 
.quick ul li a:hover i {display: inline-block; margin-right: 15px;} 
.quick ul li a:hover i.quick01 {background-image: url(../images/common/quick-01-on.png);} 
.quick ul li a:hover i.quick02 {background-image: url(../images/common/quick-02-on.png);} 
.quick ul li a:hover i.quick03 {background-image: url(../images/common/quick-03-on.png);} 
.quick ul li a:hover p {display: block;} 

/* main-bnr */
.main-bnr {position:relative; width:100%; height:var(--header-height); background:#fff; border-top:1px solid #ddd;} 
.main-bnr .contain {max-width: 1600px; height: 100%;} 
.main-bnr .wrap {position:relative; height: 100%; padding-right: 130px;} 
.main-bnr .wrap .rolling {position:relative; overflow:hidden;} 
.main-bnr .wrap .rolling ul {width:9999px;} 
.main-bnr .wrap .rolling ul li {float: left; line-height: 0; height:var(--header-height); display: flex; justify-content: center; align-items: center;} 
.main-bnr .ctr {position:absolute; top:50%; right:0; transform: translateY(-50%); display:flex;} 
.main-bnr .ctr a {font-size:0; line-height:0; text-indent:-9999em; width: 32px; height: 32px; margin-left: -1px; background-size: contain; background-position: center; background-repeat: no-repeat;} 
.main-bnr .ctr a.prev {background-image:url("../images/common/slide-prev.png");} 
.main-bnr .ctr a.next {background-image:url("../images/common/slide-next.png");} 
.main-bnr .ctr a.stop {background-image:url("../images/common/slide-play.png");} 

/* footer */
#footer {background-color: #2f2f2f; padding:var(--padding-50-20) 0;} 
#footer .contain {display:flex; justify-content:space-between; max-width: 1600px;} 
#footer .foot-info {flex:1 1 auto; min-width:0; width:1%; max-width: 750px;} 
#footer .foot-info .tit {margin-bottom:var(--margin-20-10);} 
#footer .foot-info address {font-style:normal; display:flex; flex-wrap:wrap; margin:0 -17px;} 
#footer .foot-info address p {margin-bottom: 10px; padding:0 17px; font-weight:300; font-size: var(--font-size-15); color: #b8b8b8; line-height:1em; letter-spacing: -0.02em;} 
#footer .foot-info address p .bar {font-size:15px;} 
#footer .foot-info address p .txt {color: #b6b6b6;} 
#footer .foot-info .copy {margin-top:10px; font-size:var(--font-size-14); color: #b8b8b8; line-height:1em; letter-spacing: -0.02em; font-weight:300;} 
#footer .foot-info .copy a {color: #646464;} 
#footer .foot-info .copy a:hover {text-decoration:underline} 
#footer .foot-map {display:flex; margin:0 -12px var(--margin-50-20);} 
#footer .foot-map li {position:relative; padding:0 12px;} 
#footer .foot-map li:after {content:''; position: absolute; top:50%; transform: translateY(-50%); right:1px; width:1px; height:11px; background-color: #fff; opacity:.3;} 
#footer .foot-map li:last-child:after {display:none;} 
#footer .foot-map li a {color: #fff; font-size: var(--font-size-16);} 
#footer .foot-link {display: flex; flex-direction: column; justify-content: space-between; align-items: end;} 
#footer .foot-link .foot-menu {display:flex; justify-content:flex-end; margin:0 -17px;} 
#footer .foot-link .foot-menu li {padding:0 17px;} 
#footer .foot-link .foot-menu li a {position:relative; padding-left:21px; color: #b8b8b8; font-size: var(--font-size-16);} 
#footer .foot-link .foot-menu li a:before {content:''; width:15px; height:15px; background:url('../images/common/pop-up.png')no-repeat 50% 50%/contain; position: absolute; left:0; top:2px;} 

/* for mobile */
.only-mobile {display:none;} 
.btn-m-menu {display:none; position:absolute; top:50%; margin-top:-11px; right:30px; width:30px; height:22px; text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out;} 
.btn-m-menu span {position:absolute; right:0; top:50%; margin-top:-1px; height:2px; width:23px; background:#242424;} 
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:30px; height:2px; background:#242424; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;} 
.btn-m-menu span:before {top:-10px; transition-property:top, transform;} 
.btn-m-menu span:after {bottom:-10px; transition-property:bottom, transform;} 
.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:400px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202;} 
.mobile-navigation .home {display:block; margin-bottom:20px; padding-left:15px;} 
.mobile-navigation .home a {display:block;} 
.mobile-navigation .home img {height:31px;} 
.mobile-navigation .nav-menu>ul {margin-top:30px;} 
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;} 
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 15px; display:block; color:#454545; font-size:18px; font-weight:500; line-height:1.3em;} 
.mobile-navigation .nav-menu>ul>li a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c;} 
.mobile-navigation .nav-menu>ul>li.active>a {color:#ff89b9} 
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#ff89b9;} 
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:0 15px 15px;} 
.mobile-navigation .nav-menu .submenu>ul:after {content:""; display:block; clear:both;} 
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 15px; color:#454545; font-size:16px; font-weight:400; line-height:1.3em;} 
.mobile-navigation .nav-menu .submenu>ul>li>a:after {display:block; content:""; position:absolute; top:14px; left:5px; width:4px; height:4px; background:#dfdfdf; border-radius:50%; transition:.3s ease-in-out;} 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#ff89b9} 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#ff89b9} 
.mobile-navigation .close {position:absolute; top:20px; right:15px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;} 
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#2c2c2c;} 
.mobile-navigation .close:before {transform:rotate(45deg);} 
.mobile-navigation .close:after {transform:rotate(-45deg);} 

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:201;} 

html.menu-opened {overflow:hidden;} 
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);} 
html.menu-opened .mobile-overlay {display:block;}