@charset "utf-8";

/* COMMON */
body {background:#fff;}
.cf::after {content:''; display:block; clear:both;}
.inner {width:94%; max-width:1400px; margin:0 auto;}
.inner.half {max-width:700px; margin:0;}
.inner.h-left {margin-left:auto;}
.mb-br {display:none;}
.navi-btn {cursor:pointer; background:none; border:none;}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0;text-indent:-9999em;line-height:0;border:0 !important;overflow:hidden !important}


/* RADIO + CHECKBOX */
.ck-box {display:inline-block; position:relative; font-size:1.6rem; color:#666; font-weight:300; line-height:1;}
.ck-box.full {display:block;}
.ck-box.full + .ck-box.full {margin-top:1.5rem; margin-left:0;}
.ck-box + .ck-box {margin-left:2rem;}

.ck-box .checkbox {background:none; opacity:0; position:absolute; left:0; top:0; z-index:10; width:100%; height:3rem; cursor:pointer;}
.ck-box.has-a .checkbox {width:3rem;}
.ck-box .checkbox + label {position:relative; display:inline-block; z-index:5; padding-left:4.5rem; font-size:2rem; color:#211e1f; font-weight:400; font-family:'Noto Sans KR'; line-height:1;}
.ck-box .checkbox + label::before {content:''; display:inline-block; z-index:5; position:absolute; top:50%; left:0; transform:translateY(-50%); width:3rem; height:3rem; background:transparent; border:1px solid #211e1f;}
.ck-box .checkbox:checked + label::before {background:url('/images/common/checkbox-chk-blk.png') no-repeat center;}
.ck-box .checkbox + label a {font-weight:800; display:inline-block; position:relative;}
.ck-box .checkbox + label a:after {display:block; content:''; width:100%; height:1px; background:#211e1f; position:absolute; bottom:-0.5rem; left:0;}

/* TOP BUTTON */
.top-btn {transition:.2s; background:#fff; border:2px solid #333333; position:fixed; right:5rem; bottom:5rem; z-index:8; cursor: pointer; width:5rem; height:5rem; display:inline-flex; align-items:center; justify-content:center;}
.top-btn .ico {background:url('/images/common/topbtn-arr.png') no-repeat center/contain; width:1rem; height:1.5rem; display:inline-block;}
.top-btn:hover {background:#333333;}
.top-btn:hover .ico {background:url('/images/common/topbtn-arr-on.png');}

.float-btn {transition:.2s; background: #333333; position:fixed; right:5rem; bottom:11rem; z-index:8; cursor: pointer; padding: 1.6rem 0 1.4rem; width:5rem; display:inline-flex; flex-direction: column; align-items:center; justify-content:center;}
.float-btn .ico {background:url('/images/common/float-btn.png') no-repeat center/contain; margin-bottom: 0.4rem; width:3rem; height:3rem; display:inline-block; filter:invert(1);}
.float-btn .text {display: block; padding: 3rem 0; font-size: 2rem; font-weight: 600; color: #fff; text-transform: uppercase; transform: rotate(-90deg);}



/* POPUP */
.popup {visibility:hidden; opacity:0; display:flex; transition:.3s; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.8); z-index:99; justify-content:center; align-items:center;}
.popup.on {visibility:visible; opacity: 1;}
.popup .popup-wrap {max-width:95%;}
.popup .pop-cont {position:relative; width:100%; max-width:1200px; height:auto; max-height:calc(96vh - 12rem);}
.popup .top-btnbox {text-align:right;}
.pop-close-btn {position:relative; width:3.6rem; height:3.6rem; margin-bottom:2rem;display: inline-block;}
.pop-close-btn .bar {display:inline-block; width:100%;height: 2px; background:#fff;position: absolute;top: 50%;left: 0;}
.pop-close-btn .bar:nth-child(1) {transform:rotate(45deg);}
.pop-close-btn .bar:nth-child(2) {transform:rotate(-45deg);}




/* CURSOR */
@media ( min-width: 1024px ) {
    body * {cursor: none !important;}

    .cursor { position:fixed; pointer-events:none; z-index:1000; top: 50%; left: 50%;transform:translate(-50%,-50%);mix-blend-mode: difference; -webkit-mix-blend-mode: difference; will-change: transform; pointer-events: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
    .cursor .r {position: relative; width: 1.2rem; height: 1.2rem; background:#fff; display: block; border-radius: 50%; top:0; left:0; transition: all .3s; pointer-events: none; box-sizing: border-box; }
    .cursor.a-hov .r {width:3rem; height:3rem;}
}

/* HEADER */
.header {position:relative; z-index:9; font-family:'Bebas Neue','Noto Sans KR',Dotum,Helvetica,AppleGothic,Gulim,'Roboto','굴림',Sans-serif;}
.header .inner {width:100%; max-width:100vw !important; padding:0 5rem; display:flex; align-items:center; height:10rem; justify-content:space-between;}
.header .logo {display:inline-block; width:12.6rem; height:5rem; background:url('/images/common/logo.png') no-repeat center center/contain;}

.header .right {display:flex; justify-content:space-between; align-items: center;}
.header .right .menu-btn {cursor:pointer; margin-left:3rem;}
.header .gnb {display:flex;}
.header .gnb li a {display:inline-block;}
.header .gnb > li {display:inline-flex; align-items:center; position:relative; flex-shrink:0; margin:0 2.5rem; height:10rem;}
.header .gnb > li > a {font-size:2.4rem; position:relative;}
.header .gnb > li > a::after {display:inline-block; content:''; z-index:-1; transition:all .2s ease; width:0; height:100%; background:#f1f1f1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.header .gnb > li > a:hover::after {width:calc(100% + 2rem);}
.header .gnb > li:first-child > a:hover::after {width: calc(100% + 7rem);}
.header .gnb .hangle {position: absolute; left: 50%; font-family: 'Noto Sans KR'; font-size: 80%; font-weight: 700; transform: translateX(-50%);opacity: 0; transition: all ease .15s;}
.header .gnb .english {transition: all ease .15s;}
.header .gnb > li:hover > a .hangle {opacity: 1;}
.header .gnb > li:hover > a .english {opacity: 0;}
.header .gnb li .dep2 {display:none; position:absolute; top:10rem; left:-1rem; background:#211e1f; min-width:15rem; padding:2.5rem;}
.header .gnb li .dep2 a {display:flex; justify-content:space-between; align-items:center; font-size:1.8rem; color:#fff; padding:1rem; width:15rem; overflow:hidden;}
.header .gnb li .dep2 a:after {display:inline-block; content:''; opacity:0; transform:translateX(100%); transition:all .2s ease; width:2rem; height:0.7rem; background:url('/images/common/gnb-arrow-wht.png') no-repeat center/contain;}
.header .gnb li .dep2 a:hover:after {opacity:1; transform:translateX(0);}
.header .gnb li .dep2 .hangle {left: auto; transform: translateX(0);}
.header .gnb li .dep2 a:hover .hangle {opacity: 1;}
.header .gnb li .dep2 a:hover .english {opacity: 0;}


/* FULLMENU */
.fullmenu {background:#211e1f; position:fixed; top:0; left:0; width:100%; height:100vh; z-index:99; font-family:'Bebas Neue','Noto Sans KR',Dotum,Helvetica,AppleGothic,Gulim,'Roboto','굴림',Sans-serif; display:flex; align-items:center; transform:translate(-100vw, 0); transition:1s cubic-bezier(.64,0,.36,1); overflow:hidden;}
.fullmenu.on {transform:translate(0, 0);}
.fullmenu .fullmenu-hd {position:absolute; top:0; left:0; width:100%; padding:0 5rem; display:flex; justify-content:space-between; align-items:center; height:10rem;}
.fullmenu .fullmenu-hd .fullmenu-logo {display:inline-block; width:14.6rem; height:4.5rem; background:url('/images/common/logo-wht.png') no-repeat center center/contain;}

.fullmenu .fullmenu-hd .close-btn {display:block; position:relative; width:3rem; height:3rem; cursor:pointer;}
.fullmenu .fullmenu-hd .close-btn .bar {width:3rem; height:2px; background:#ffffff; position:absolute; transition:all .2s ease;}
.fullmenu .fullmenu-hd .close-btn .bar:nth-child(1) {transform:rotate(-45deg); top:50%; right:0;}
.fullmenu .fullmenu-hd .close-btn .bar:nth-child(2) {transform:rotate(45deg); top:50%; right:0;}
.fullmenu .fullmenu-bg-deco {position:fixed; bottom:0; left:-1rem; width:100%; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; font-size:21rem; letter-spacing: 0.1em; line-height:0.295; opacity:0.07;}


.fullmenu .inner {display:flex; align-items:flex-start; justify-content:space-between;}
.fullmenu .left {width:48rem;}
.fullmenu .left .menu-list li {padding-bottom:4rem;}
.fullmenu .left .menu-list li:last-child {padding-bottom:0;}
.fullmenu .left .menu-list li a {display:flex; line-height:1;}
.fullmenu .left .menu-list li .num {font-size:2.4rem; color:#fff; opacity:0.2;}
.fullmenu .left .menu-list li .tit {font-size:4.6rem; color:#fff; padding-top:2.5rem; padding-left:0.5rem; position:relative;}
.fullmenu .left .menu-list li .tit:after {display:inline-block; content:''; width:0; height:4px; background:#fff; position:absolute; bottom:0; left:0; transition:all .2s ease;}
.fullmenu .left .menu-list li .tit .hangle {position: absolute;left: 0;bottom: 0.625rem;font-size: 80%;font-weight: 700;opacity: 0;transition: all ease .15s;}
.fullmenu .left .menu-list li .tit .english {transition: all ease .15s;}
.fullmenu .left .menu-list li.on .tit:after {width:100%;}
.fullmenu .left .menu-list li.on .hangle {opacity: 1;}
.fullmenu .left .menu-list li.on .english {opacity: 0;}
.fullmenu .left .menu-list li.on:nth-child(1) .tit:after {width: 180%;}
.fullmenu .left .menu-list li.on:nth-child(2) .tit:after {width: 86%;}
.fullmenu .left .menu-list li.on:nth-child(3) .tit:after {width: 81%;}
.fullmenu .left .menu-list li.on:nth-child(4) .tit:after {width: 48%;}
.fullmenu .left .menu-list li.on:nth-child(5) .tit:after {width: 103%;}
.fullmenu .right {position:relative; width:100%; height:100%;}
.fullmenu .right:after {display:inline-block; content:''; width:1px; height:200vh; background:#fff; opacity:0.2; position:absolute; top:-50vh; right:21rem; z-index:-1;}
.fullmenu .right-box:not(:first-child) {display:none;}
.fullmenu .right-box.show {display:flex;}
.fullmenu .right .depth2-list {width:48rem; position:relative; padding-top:2.5rem;}
.fullmenu .right .depth2-list:before {display:inline-block; content:''; width:1px; height:200vh; background:#fff; opacity:0.2; position:absolute; top:-50vh; left:0;}
.fullmenu .right .depth2-list li {margin-bottom:4.5rem;}
.fullmenu .right .depth2-list li.dep1-li {display:none;}
.fullmenu .right .depth2-list li a {font-size:3.6rem; color:#fff; letter-spacing:0.025em;}
.fullmenu .right .depth2-list li a::before {display:inline-block; content:''; width:1px; height:2.4rem; background:#fff; margin-right:3rem; opacity:0;}
.fullmenu .right .depth2-list li:nth-child(2) a::before {opacity:1;}
.fullmenu .right .depth2-list li a .ico {display:inline-block; margin-left:1rem;}
.fullmenu .right .depth2-list li a .hangle {position: absolute;left: 3rem;font-size: 80%; font-weight: 700; opacity: 0;transition: all ease .15s;}
.fullmenu .right .depth2-list li a .english {opacity: 1;transition: all ease .15s;}
.fullmenu .right .depth2-list li a:hover .hangle {opacity: 1;}
.fullmenu .right .depth2-list li a:hover .english {opacity: 0;}
.fullmenu .right .img {position:absolute; top:0; right:-13.5rem; z-index:0;}
.fullmenu .right .img:after {display:block; content:''; width:100%; height:100%; position: absolute; top:0; left:0; background:#211e1f;}
.fullmenu .right-box.show .img:after {animation:fullmenuImg 0.6s forwards;}

@keyframes fullmenuImg {
    from{
        width:100%;
        opacity:0.6;
    }
    to{
        width:0;
        opacity:0;
    }
}


/* FOOTER */
.footer {font-family:'Bebas Neue','Noto Sans KR',Dotum,Helvetica,AppleGothic,Gulim,'Roboto','굴림',Sans-serif;}
.footer .ft-01 {background:#211e1f; padding:7rem 0;}
.footer .ft-01 .inner {display:flex;}
.footer .ft-01 .inner > div {width:50%;}
.footer .ft-01 .inner .right {padding-left:1.5rem;}
.footer .ft-01 .inner .right h3 {font-size:4.6rem; color:#fff; margin-bottom:3rem; line-height:1;}
.footer .ft-01 .inner .right form ul li {display:flex; margin-bottom:1.5rem;}
.footer .ft-01 .inner .right form ul li:last-child {margin-bottom:0;}
.footer .ft-01 .inner .right form ul li.half dl {width:50%;}
.footer .ft-01 .inner .right form ul li.half dl:first-child {margin-right:3rem;}
.footer .ft-01 .inner .right form dl {border-bottom:1px solid #504f4f; display:flex; align-items: center; width:100%; letter-spacing: -0.025em;}
.footer .ft-01 .inner .right form dl dt {flex-shrink:0; font-size:1.8rem; color:#d9d9d9; width:5.5rem; margin-right:2rem;}
.footer .ft-01 .inner .right form dl dd {width:100%;}
.footer .ft-01 .inner .right form dl.long {align-items:flex-start;}
.footer .ft-01 .inner .right form input[type=text], .footer .ft-01 .inner .right form textarea {background:none; border:none; color:#fff; font-size:1.6rem;}
.footer .ft-01 .inner .right form input[type=text] {height:3.8rem;}
.footer .ft-01 .inner .right form textarea {height:5.8rem;}
.footer .ft-01 .inner .right .bot-area {display:flex; justify-content:space-between; align-items:center; margin-top:3rem;}
.footer .ft-01 .inner .right .bot-area .m-btnbox {margin-top:0;}
.footer .ft-01 .logo {display:inline-block; width:14.6rem;}
.footer .ft-01 .link {margin-top:6rem;}
.footer .ft-01 .link a {display:inline-block; font-weight:600; color:#888;  font-family:'Noto Sans KR'; letter-spacing: -0.025em; margin-left:3rem;}
.footer .ft-01 .link a:first-child {color:#fff; margin-left:0;}
.footer .ft-01 .info {margin-top:2rem;}
.footer .ft-01 .info p {margin-top:1rem; color:#888888; font-family:'Noto Sans KR'; letter-spacing: -0.025em;}
.footer .ft-01 .info p:first-child {margin-top:0;}
.footer .ft-01 .info p span {display:inline-block;}
.footer .ft-01 .info p span::after {content:''; display:inline-block; width:1px; height:8px; background:#555354; margin:0 1.12rem;}
.footer .ft-01 .info p span:last-child::after {display:none;}
.footer .ft-01 .family-site {position:relative; display:inline-block; width:auto; margin-top:5.5rem;}
.footer .ft-01 .family-site .family-btn {position:relative; border:1px solid #888888; cursor:pointer; width:24rem; height:5.6rem; padding:1.5rem 1.8rem; display:flex; justify-content:space-between; font-size:1.8rem; color:#888888; letter-spacing: -0.025em;}
.footer .ft-01 .family-site .family-btn .arr {position:absolute; top:50%; right:1.8rem; transform:translateY(-50%); transition: all .2s ease;}
.footer .ft-01 .family-site .family-btn.active .arr {transform:translateY(-50%) rotate(180deg);}
.footer .ft-01 .family-site .dep2 {display:none; z-index:1; position:absolute; bottom:calc(5.6rem - 1px); left:0; width:100%; border:1px solid #888888; background:#211e1f;}
.footer .ft-01 .family-site .dep2 a {font-size:1.5rem; color: #888888; text-align: left; display:block; padding:1.6rem 1.8rem; border-bottom:1px solid #888888;}
.footer .ft-01 .family-site .dep2 a:last-child {border-bottom:none;}


.footer .ft-02 {background:#171516;}
.footer .ft-02 .copy {text-align:center; font-size:1.8rem; color:#888888; padding:1.5rem; line-height: 1.444;}



/* animation */
@media ( min-width: 768px ) {
    .hov-ani {transition:all .4s;}
    .hov-ani:hover {transform:scale(0.95);}
}

.img-move-ani {position:relative; overflow:hidden;}
.img-move-ani::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:3; background: rgba(255,255,255,1); transition: left 1s ease-in-out;}
.img-move-ani.aos-animate::before {left: 100%;}

.img-zoom-ani {position:relative; overflow:hidden;}
.img-zoom-ani img {transform:scale(1.1);}
.img-zoom-ani.aos-animate img {transform:scale(1); transition:2s ease;}




@media ( max-width: 1400px ) {
    .header .inner {padding:0 3%;}
    .fullmenu .fullmenu-hd {padding:0 3%;}
    .fullmenu .right .img {right:0; width:46rem;}
}

@media ( max-width: 1024px ) {
    .fullmenu .left .menu-list li .tit {font-size:3.6rem;}
    .fullmenu .right .depth2-list li a {font-size:3rem;}
    .fullmenu .right .img {width:34rem;}

	.cursor {display:none;}
    .top-btn {right:3%; bottom:3%; width:4.5rem; height:4.5rem;}
	.float-btn{right:3%; bottom:calc(3% + 5rem); padding: 0.45rem 0; width:4.5rem; }
    .float-btn .ico {display: none;}
    .float-btn .text {padding: 3rem 0 2.8rem;font-size: 1.6rem; }
    .ck-box .checkbox + label {font-size:1.8rem;}
}

@media ( max-width: 768px ) {

    .pop-close-btn {width:3rem; height:3rem; margin-bottom:1rem;}

    .header .gnb {display:none;}

    .fullmenu {align-items:flex-start;}
    .fullmenu .inner {position:relative; top:10rem; height:calc(100vh - 10rem); margin-top:1rem;}
    .fullmenu .left {display:none;}
    .fullmenu .right-box.box00 {display:none !important;}
    .fullmenu .right-box:not(:first-child) {display:block !important; margin-bottom:5rem;}
    .fullmenu .right-box:last-child {margin-bottom:10rem;}
    .fullmenu .right:after {opacity:1; right:0; display:none;}
    .fullmenu .right {height:100%; overflow-y:auto; padding-bottom: 50px;}
    .fullmenu .right {scrollbar-width: none;}
    .fullmenu .right::-webkit-scrollbar { display:none; -ms-overflow-style:none;}
    .fullmenu .right .depth2-list {width:100%; padding-top:0;}
    .fullmenu .right .depth2-list:before {display:none;}
    .fullmenu .right .depth2-list li {margin-bottom:1.8rem;}
    .fullmenu .right .depth2-list li.dep1-li {display:block; padding:1.5rem 0; border-bottom:1px solid rgba(255,255,255,0.4);}
    .fullmenu .right .depth2-list li.dep1-li a {font-size:2.7rem;}
    .fullmenu .right .depth2-list li.dep1-li a:before {margin-right:1rem; opacity: 0.2; width:auto; background: none; font-size:2.4rem; vertical-align:super; }
    .fullmenu .right .depth2-list li a {font-size:2.2rem;}
    .fullmenu .right .depth2-list li a::before {margin-right:0;}
    .fullmenu .right .depth2-list li:nth-child(2) a::before {opacity:0;}
    .fullmenu .right .depth2-list li a .ico {width:1.5rem;}
    .fullmenu .right .img {display:none;}
    .fullmenu .fullmenu-bg-deco {display:none;}

    .fullmenu .right-box.box01 .depth2-list li.dep1-li a:before {content:'01';}
    .fullmenu .right-box.box02 .depth2-list li.dep1-li a:before {content:'02';}
    .fullmenu .right-box.box03 .depth2-list li.dep1-li a:before {content:'03';}
    .fullmenu .right-box.box04 .depth2-list li.dep1-li a:before {content:'04';}
    .fullmenu .right-box.box05 .depth2-list li.dep1-li a:before {content:'05';}
    .fullmenu .right-box.box06 .depth2-list li.dep1-li a:before {content:'06';}

    .fullmenu .right .depth2-list li a .hangle {display: inline; opacity: 1;}
    .fullmenu .right .depth2-list li a .english {display: none;}

    .footer .ft-01 {padding:4rem 0;}
    .footer .ft-01 .inner {flex-wrap:wrap;}
    .footer .ft-01 .inner > div {width:100%;}
    .footer .ft-01 .inner .left {order:2; text-align:center;}
    .footer .ft-01 .link {margin-top:3rem;}
    .footer .ft-01 .family-site {margin-top:4rem;}
    .footer .ft-01 .inner .right {padding-left:0; margin-bottom:5rem; order:1;}
    .footer .ft-01 .inner .right h3 {font-size:2.8rem;}
    .footer .ft-01 .info p span::after {opacity:0; margin:0 0.6rem;}

    .ck-box .checkbox {width:2rem;}
    .ck-box .checkbox + label {font-size:1.6rem; padding-left:3.5rem;}
    .ck-box .checkbox + label::before {width:2rem; height:2rem;}
}

@media all and (max-width:500px) {

}