/* Setting */ .section{overflow:hidden;line-height:1.2;position:relative;height:100vh;} .section .section_fix{width:calc(100% - 200px);margin:0 auto;overflow:hidden;} .section .section_title{text-align:center;overflow:hidden;margin:0 auto 30px;} .section .section_title h3{font-size:50px;} .section .section_body{position:relative;width:100%;margin:0 auto} /* Section01 */ #section01{} #section01 .main_slide{width: 100%;min-height: 600px;height: 100vh;overflow: hidden;position: relative;} #section01 .main_slide .slick-slide{vertical-align:top;height:100vh;position:relative;transition:0.5s;float:left} #section01 .main_slide .slick-slide img{vertical-align:top;position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%)} #section01 .video {width: 100%;min-height: 600px;height: 100vh;overflow: hidden;position: relative;margin:0 auto;} #section01 .video #video{width:100%;height:100%;object-fit: cover !important;max-height:100vh;outline:none;border:0;} #section01 .textarea{position:absolute;width:calc(100% - 200px);z-index:100;top:50%;left:50%;transform:translate(-50%,-50%);word-break:keep-all;} #section01 .textarea h2{font-size:40px;line-height:1.2;font-weight:900;margin-bottom:20px;} #section01 .textarea a{width:138px;line-height:38px;text-align:center;color:#fff;background:#000;font-size:16px;display:block;border:1px solid #000;} #section01 .textarea a:hover{background:#fff;color:#000;} #section01 .bottom_text{position:absolute;bottom:0;left:50%;font-weight:bold;font-size:18vw;transform:translateX(-50%);line-height:0.71} /* Section02 */ #section02{background:#000;color:#fff} #section02 .section_title{text-align:left;} #section02 .section_title b{font-size:40px;} #section02 .section_fix{overflow:visible} #section02 .section_body{position:relative;} #section02 .section_body ul{overflow:hidden;position:relative;margin-bottom:20px;} #section02 .section_body ul a{display:block;vertical-align:top;position:relative;} #section02 .section_body ul li{transform-style: preserve-3d;transition:0.5s;} #section02 .section_body ul li span{font-size:7vw;line-height:1;display:inline-block;} #section02 .section_body ul li.en{color:#6d6d6d;font-weight:700;position:relative;top:0;left:0;} #section02 .section_body ul li.en span{position:relative;padding-bottom:15px} #section02 .section_body ul li.en span:after{content:'';width:100%;height:1px;position:absolute;background:#6d6d6d;bottom:1px;left:0;} #section02 .section_body ul li.kr{color:#fff;position:absolute;top:100%;left:0%;transform:translate3d(0%,0%,0);font-weight:700} #section02 .section_body ul li.kr span{position:relative;padding-bottom:16px} #section02 .section_body ul li.kr span:after{content:'';width:0;height:1px;position:absolute;background:#fff;bottom:1px;left:0;transition:1s;transition-delay: 0.5s;} #section02 .section_body ul:hover li.en{top:-200px;} #section02 .section_body ul:hover li.kr{transform: translate3d(0%, -100%, 0);} #section02 .section_body ul:hover li.kr span:after{width:100%} #section02 .section_body .img_box{position:absolute;z-index:9999;} /* Section03 */ #section03{background:#000;color:#fff;} #section03 .section_body{padding-left:100px} #section03 .section_body:after{content:'';position:absolute;width:300px;height:100%;background:linear-gradient(-90deg , rgba(255,255,255,0) 64% , #000 100%);left:0;top:0;pointer-events: none} /* Section04 */ #section04{background:#000;color:#fff;cursor: url('../img/01_index/mouse.png'), auto;} #section04 .section_body:after{content:'';position:absolute;width:300px;height:100%;background:linear-gradient(-90deg , rgba(255,255,255,0) 64% , #000 100%);left:0;top:0;pointer-events: none} #section04 .section_body{padding-left:100px} #section04 .section_body .artist_box{position:relative;} #section04 .section_body .artist_box .artist-list{} #section04 .section_body .artist_box .artist-list a{display:block;vertical-align:top;cursor: url('../img/01_index/mouse.png'), auto;} #section04 .section_body .artist_box .artist-list a .thumb_img{width:100%;padding-bottom:140%;position:relative;overflow:hidden;height:0;margin:0 auto 10px;} #section04 .section_body .artist_box .artist-list a b{font-size:30px;border-bottom:1px solid #fff;margin-bottom:10px;color:#fff;} #section04 .section_body .artist_box .slick-slide{margin:0 10px} /* Section05 */ #section05{background:#000;color:#fff} #section05 .section_body{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1600px;word-break:keep-all} #section05 .section_body ul{overflow:hidden;position:relative;border-bottom:2px solid #6D6D6D;transition:0.5s;} #section05 .section_body ul li.que{line-height:30px;margin:20px 0;cursor: pointer;} #section05 .section_body ul li.que:hover b{color:#fff} #section05 .section_body ul li.que b{display:block;font-size:25px;color:#6D6D6D;padding:0 30px 0 5px;transition:0.5s;position:relative;} #section05 .section_body ul li.que b span{padding-right:5px;} #section05 .section_body ul li.que b i{position:absolute;top:8px;right:0} #section05 .section_body ul li.ans{display:none;position:relative;cursor: text;z-index:1} #section05 .section_body ul li.ans:after{content:'';position:absolute;width:100%;height:80px;background:linear-gradient(180deg , rgba(0,0,0,100%) 80% , #e5e5e5 100%);left:0;bottom:0;opacity:0.2;z-index:-1} #section05 .section_body ul li.ans p{font-size:20px;color:#fff;padding:20px;position:relative;z-index:10} #section05 .section_body ul.on{border-bottom:2px solid #fff} #section05 .section_body ul.on li.que b{color:#fff} /* Section06 */ #section06{background:#000;color:#fff} #section06 .section_fix{display:table;margin-top:74px;max-width:1440px;} #section06 .section_fix>div{display:table-cell;vertical-align:middle;width:50%;} #section06 .section_fix .fl{padding-right:40px;} #section06 .section_fix .fl h3{font-size:48px;margin-bottom:30px;} #section06 .section_fix .fl h3 img{width:100%;max-width:196px;} #section06 .section_fix .fl .map{width:100%;height:320px;max-width:560px;margin-bottom:30px;} #section06 .section_fix .fl p{font-size:20px;font-weight:bold;line-height:1.4} #section06 .section_fix .fl p.mobile{display:none} #section06 .section_fix .fr{padding-left:40px;} #section06 .section_fix .fr .input_box{overflow:hidden;} #section06 .section_fix .fr .input_box>ul{overflow:hidden;position:relative;padding-bottom:50px;z-index:1} #section06 .section_fix .fr .input_box>ul:after{content:'';width:1px;height:100%;background:#fff;position:absolute;top:4px;left:30px;z-index:-1} #section06 .section_fix .fr .input_box>ul li{padding-left:60px;position:relative;} #section06 .section_fix .fr .input_box>ul li.text{margin-bottom:10px;cursor: pointer;} #section06 .section_fix .fr .input_box>ul li.text p{font-size:20px;font-weight:bold;margin-left:5px;} #section06 .section_fix .fr .input_box>ul li.text p strong{color:#E74F12;padding:0 2px;} #section06 .section_fix .fr .input_box>ul li.text span{position:absolute;top:4px;left:22px;background:#fff;width:16px;height:16px;border-radius:16px;color:#000;text-align:center;line-height:16px;font-weight:bold} #section06 .section_fix .fr .input_box>ul:last-child{padding-bottom:10px;} #section06 .section_fix .fr .input_box>ul.first li.var label{display:block;width:calc(50% - 14px);margin:5px;background:#252525;border:1px solid #252525;text-align:center;font-size:15px;font-weight:500;color:#fff;border-radius:5px;line-height:45px;float:left;cursor: pointer;} #section06 .section_fix .fr .input_box>ul.first li.var input[type="checkbox"]{display:none} #section06 .section_fix .fr .input_box>ul.first li.var input[type="checkbox"]:checked + label{border:1px solid #E74F12;color:#E74F12} #section06 .section_fix .fr .input_box>ul.two li.var .inp{display:block;width:calc(50% - 14px);margin:5px;background:#252525;border:1px solid #252525;font-size:15px;font-weight:500;color:#fff;border-radius:5px;line-height:45px;float:left;overflow:hidden;} #section06 .section_fix .fr .input_box>ul.two li.var .inp.on{border:1px solid #E74F12} #section06 .section_fix .fr .input_box>ul.two li.var .inp label{padding:0 10px 0 15px;width:95px;display:block;float:left;cursor: pointer;} #section06 .section_fix .fr .input_box>ul.two li.var .inp label strong{color:#E74F12;padding:0 2px;} #section06 .section_fix .fr .input_box>ul.two li.var .inp input{float:left;background:#252525;border:0;width:calc(100% - 120px);line-height:45px;outline:none;color:#fff;} #section06 .section_fix .fr .input_box>ul li.var .inp textarea{width:calc(100% - 42px);margin:5px;padding:10px 15px;background:#252525;border:1px solid #252525;font-size:15px;font-weight:500;color:#fff;border-radius:5px;line-height:24px;float:left;overflow:hidden;outline:none;resize: none;} #section06 .section_fix .fr .input_box>ul li.var .inp.on textarea{border:1px solid #E74F12} #section06 .section_fix .fr .input_box>ul.four li.var .inp input{background:#252525;border:1px solid #252525;width:calc(100% - 40px);padding:0 15px;margin:5px;line-height:43px;outline:none;color:#fff;border-radius:5px;font-size:15px;} #section06 .section_fix .fr .input_box>ul.four li.var .inp input.on{border:1px solid #E74F12} #section06 .section_fix .fr .input_box>ul.four li.var .agree{line-height:35px;margin:5px;overflow:hidden;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul{overflow:hidden;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul input[type="checkbox"]{vertical-align:text-top;background:#252525;margin-right:5px;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul label{font-size:15px;font-weight:500;cursor: pointer;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul label strong{color:#E74F12;padding:0 2px;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul a{background:#aaa;color:#252525;font-size:10px;padding:2px 6px;border-radius:2px;display:inline-block;line-height:14px;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul a:hover{background:#E74F12;color:#fff;} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul input[type="submit"]{width:116px;line-height:33px;border:1px solid #E74F12;color:#fff;font-size:15px;text-align:center;background:#E74F12;border-radius:5px} #section06 .section_fix .fr .input_box>ul.four li.var .agree ul input[type="submit"]:hover{color:#E74F12;background:#252525} #section06 .section_fix>.mobile{display:none;line-height:48px;} #section06 .section_fix>.mobile a{display:block;width:calc(100% - 40px);border-radius:4px;border:1px solid #fff;color:#fff;font-size:14px;font-weight:bold;text-align:center;position:relative;overflow:hidden;z-index:1;margin:0 auto} #section06 .section_fix>.mobile a:after{content:'';position:absolute;top:0;left:0;background:#fff;width:0;height:100%;transition:0.5s;z-index:-1} #section06 .section_fix>.mobile a:hover{color:#000;transition:0.5s} #section06 .section_fix>.mobile a:hover:after{width:100%;} #section06 .section_fix>.mobile a i{margin-left:50px;font-size:24px;vertical-align:middle} /* Responsive */ @media all and (max-width:1720px){ .section .section_fix{width:calc(100% - 40px);} #section01 .textarea{width:calc(100% - 40px);} #section02 .section_body ul li span{font-size:7vw} #section02 .section_title b{font-size:32px;} #section03 .section_body{padding-left:20px} #section04 .section_body{padding-left:20px} } @media all and (max-width:1480px){ #section02 .section_title b{font-size:27px;} .section .section_title h3{font-size:40px;} #section04 .section_body .artist_box .artist-list a b{font-size:21px;} #section06 .section_fix>div{width:auto} #section06 .section_fix .fl{padding-right:0} #section06 .section_fix .fl h3{font-size:42px;} #section06 .section_fix .fl h3 img{max-width:160px;} #section06 .section_fix .fr{width:680px;} } @media all and (max-width:1200px){ #section06 .section_fix .fl h3{font-size:36px;} #section06 .section_fix .fl h3 img{max-width:120px;} #section06 .section_fix .fr{width:600px;} } @media all and (max-width:1024px){ .section .section_title h3{font-size:35px;} #section02 .section_title b{font-size:24px;} #section03 .section_body:after{width:100px;} #section04 .section_body:after{width:100px;} #section05 .section_body ul li.que b{font-size:21px;} #section05 .section_body ul li.ans p{font-size:18px;} #section06 .section_fix{display:block;margin-top:100px;} #section06 .section_fix>div{display:block;width:100%;} #section06 .section_fix .fl{overflow:hidden;width:calc(100% - 40px);margin:0 auto 40px;} #section06 .section_fix .fl h3{font-size:32px;float:left;} #section06 .section_fix .fl h3 img{max-width:100px;} #section06 .section_fix .fl p{float:left;font-size:18px;} #section06 .section_fix .fl .map{float:right;height:270px;max-width:420px;} #section06 .section_fix .fr{width:calc(100% - 20px);padding:0 20px 0 0;overflow:hidden;margin:0 auto 100px;} } @media all and (max-width:900px){ #section06 .section_fix .fl h3{font-size:28px;} #section06 .section_fix .fl p{font-size:16px;} #section06 .section_fix .fl .map{height:210px;max-width:360px;} } @media all and (max-width:768px){ .section .section_title h3{font-size:30px;} #section02 .section_title b{font-size:21px;} #section04 .section_body .artist_box{left:-240px;width:calc(100% + 240px);} #section04 .section_body .artist_box .artist-list a b{font-size:30px;} #section05 .section_body ul li.que b{font-size:18px;} #section05 .section_body ul li.ans p{font-size:15px;padding:10px 10px 20px;} #section06 .section_fix .fl h3{font-size:25px;} #section06 .section_fix .fl p{font-size:14px;} #section06 .section_fix .fl .map{height:180px;max-width:320px;} } @media all and (max-width:720px){ #section06 .section_fix .fl h3{width:100%;font-size:32px;} #section06 .section_fix .fl p.mobile{display:block;float:left;width:100%;margin-bottom:10px;font-size:18px;} #section06 .section_fix .fl p.pc{display:none} #section06 .section_fix .fl .map{max-width:100%;height:210px;} } @media all and (max-width:640px){ #section02 .section_title b{font-size:18px;} #section04 .section_body .artist_box .artist-list a b{font-size:25px;} #section06 .section_fix .fr .input_box>ul li.text p{font-size:18px;} #section06 .section_fix .fr .input_box>ul.two li.var .inp{width:calc(100% - 12px)} } @media all and (max-width:480px){ .section .section_title h3{font-size:25px;} #section02 .section_title b{font-size:14px;} #section04 .section_body .artist_box{left:-150px;width:calc(100% + 150px);} #section04 .section_body .artist_box .artist-list a b{font-size:20px;} #section05 br{display:none} #section05 .section_body ul li.ans p{padding:0 5px 20px;} #section06 .section_fix .fl{width:100%;margin-top:0;} #section06 .section_fix .fl h3{font-size:25px;} #section06 .section_fix .fl p{font-size:14px;} #section06 .section_fix .fr{display:none} #section06 .section_fix>.mobile{display:block;} } @media all and (max-width:420px){ #section04 .section_body .artist_box{left:-60px;width:calc(100% + 60px);} #section05 .section_body ul li.que b{font-size:16px;} #section05 .section_body ul li.ans p{font-size:13px;} #section06 .section_fix .fl h3{font-size:27px;} #section06 .section_fix .fl p.mobile{font-size:16px;} #section06 .section_fix .fl .map{height:150px;} }