@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ #wrap {position:relative;height:100%;width:100%;margin:0;padding:0; overflow:hidden;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;overflow: visible;} #wrap #container {width:100%;margin:0;padding:0;} #wrap #footer {width:100%;margin:0;} /* #container 안의 레이아웃 */ #contents_wrap {width:1200px;margin:0 auto;padding:0;position:relative;z-index:1;box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 */ #contents_wrap #side_box {width:100%;box-sizing:border-box;} /* lnb 감싸는 영역 */ #contents_wrap #contents_box {width:100%;padding:80px 0 150px 0;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */ /* navigation layout */ #contents_wrap .nav_wrap {box-sizing:border-box;} /* #content */ #content {width:100%;margin:0;padding:0;text-align:left;box-sizing:border-box;} /* navigation 을 제외한 컨텐츠 */ #content .sub_content{width:100%;margin:0 auto;background:#fff;box-sizing:border-box;} #content .sub_content:after {clear:both;content:"";display:block;} /* 컨텐츠 전체 가로 사이즈 */ .w_custom {position:relative; width:1230px;padding-left:15px;padding-right:15px;text-align:left;margin:0 auto;padding:0;box-sizing:border-box;} @media only screen and (max-width:1217px) { body.on {height:100%;overflow:hidden;} #contents_wrap {width:calc(100% - 30px);} .w_custom{width:calc(100% - 30px);} } @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #contents_wrap #contents_box{padding-top:40px; padding-bottom:100px;} } @media only screen and (max-width:479px) { } @media only screen and (max-width:320px) { #contents_wrap, .w_custom {width:calc(100% - 20px);} } /*─────────────────────────────────────────────────────────── 메인 상품 진열 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── sub custom ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── HEADER | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ .dg.ac{display: none !important;} .skip_nav {position:relative;z-index:9999;} .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;} .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;} #header {position:fixed; width:100%; top:0; left:0; z-index:10;width:100%;box-sizing:border-box;font-size:0;background:#fff0; transition:all 0.4s;} #header .header_cont{position:relative;display:flex;align-items:center;justify-content:center;width: calc(100% - 100px);height: 130px;margin:0 auto; transition:all 0.4s;} #header .hd_logo {width: 156px;height: 30px; transition:all 0.4s;} #header .hd_logo a {background: url('../images/skin/hd_logo_wh.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: 100% auto; transition:all 0.4s;} #header .hd_lnb{position:absolute;top:60px;left: 0;text-align:left; transition:all 0.4s;} #header .hd_lnb > li{position:relative;width: max-content;} #header .hd_lnb > li + li{margin-top: 16px;} #header .hd_lnb > li > a{display:block; font-size:20px;font-weight:400;color:#fff;letter-spacing: 0.08em; padding-right:30px;} #header .hd_lnb .hd_lnb_dep2{display:flex; position:absolute; top:50%; transform:translateY(-50%); left:calc(100% - 5px); opacity:0; pointer-events:none; transition:all 0.4s;} #header .hd_lnb .hd_lnb_dep2.on{opacity:1; pointer-events:inherit;} #header .hd_lnb .hd_lnb_dep2 > li{} #header .hd_lnb .hd_lnb_dep2 > li + li{margin-left:10px;} #header .hd_lnb .hd_lnb_dep2 > li > a{display:inline-flex; align-items:center; height:45px; font-size:15px; font-weight:500; color:#333; background:#fff; width:max-content; padding:0 15px; border:1px solid #ddd; box-sizing:border-box; transition:all 0.4s;} /* on */ #header.on{background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.3);} #header.on .header_cont{height:100px; justify-content:flex-start;} #header.on .hd_logo a{background-image:url('../images/skin/hd_logo.png');} #header.on .hd_right .menu-trigger{background-image:url('../images/skin/menu_trigger_on.png');} #header.on .hd_lnb{top:50%;left:50%;transform: translate(-50%, -50%);display:flex;height: 100%;} #header.on .hd_lnb > li + li{margin-top:0;} #header.on .hd_lnb > li > a{color:#333;font-weight: 500;padding:0 25px;display: flex;height: 100%;align-items: center; } #header.on .hd_lnb .hd_lnb_dep2{display:block;top:100%;left:50%;transform:translateX(-50%);min-width: 100%; width:max-content; background: #fff;box-shadow:5px 10px 10px rgba(0,0,0,0.1); text-align:center; opacity:0; pointer-events:none;} #header.on .hd_lnb .hd_lnb_dep2 > li + li{margin:0;} #header.on .hd_lnb .hd_lnb_dep2 > li > a{border:0; width:100%; justify-content:center;} /* over */ @media only screen and (min-width:1024px){ #header .hd_lnb > li > a:hover{color:#fe4483; font-weight:500;} #header .hd_lnb .hd_lnb_dep2 > li > a:hover{background:#fe4483; border-color:#fe4483; color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.3);} #header.on .hd_lnb > li:hover .hd_lnb_dep2{opacity:1; pointer-events:inherit;} } #header .hd_right {top:50%;right:0;font-size:0;position:absolute;display:inline-block;box-sizing:border-box;z-index:15; transform:translateY(-50%);} #header .hd_right .hd_gnb, #header .hd_right .hd_lang, #header .hd_right .menu-trigger {display:inline-block;vertical-align:middle;} #header .hd_right .hd_lang {margin-right:30px;} #header .hd_right .hd_lang li, #header .hd_right .hd_lang li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #header .hd_right .hd_lang li {} #header .hd_right .hd_lang li + li a {padding:0 0 0 30px;} #header .hd_right .hd_lang li, #header .hd_right .hd_lang li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #header .hd_right .hd_gnb {} #header .hd_right .hd_gnb li, #header .hd_right .hd_gnb li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #header .hd_right .hd_gnb li {} #header .hd_right .hd_gnb li + li a {padding:0 0 0 30px;} #header .hd_right .menu-trigger {position:relative;padding:0;width: 26px;height: 26px;box-sizing: border-box; background:url('../images/skin/menu_trigger.png') no-repeat center;} @media only screen and (max-width:1320px) { } @media only screen and (max-width:1217px) { #header .header_cont{width:calc(100% - 30px); } #header .hd_lnb > li > a{font-size:18px;} #header.on .hd_lnb > li > a{padding:0 20px;} } @media only screen and (max-width:1023px) { #header .hd_lnb, #header.on .hd_lnb{display:none;} #header .header_cont{height:100px;} #header.on .header_cont{height:80px;} #header .hd_logo{width:140px;} } @media only screen and (max-width:980px) { } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #header .header_cont{height:90px;} #header.on .header_cont{height:70px;} #header .hd_logo{width: 125px;} } @media only screen and (max-width:479px) { #header .header_cont{height: 73px;justify-content:flex-start;} #header.on .header_cont{height:60px;} #header .hd_logo{width: 117px;} } @media only screen and (max-width:320px) { #header .header_cont{width:calc(100% - 20px);} } /*─────────────────────────────────────────────────────────── ASIDE | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ #aside {top:0;right:0;width:100%; height:100%; box-sizing:border-box;box-sizing:border-box;position:fixed;background:#fff;z-index:95; opacity:0; pointer-events:none; transition:all 1.5s; transition-delay:0.6s;} #aside.on {opacity:1; pointer-events:inherit; } .aside_bg {position:fixed; width:100%; height:100%; top:0; left:0; z-index:90;background:#fff0; pointer-events:none; transform:scaleX(-1)} .aside_bg.on {opacity:1;display:block; pointer-events:inherit;} .aside_bg div {position: absolute;z-index: 1; background-repeat: no-repeat; transform: rotateY(-50deg) scale(0.5); opacity: 0; transform-origin: bottom; transition: all .6s cubic-bezier(.71, .05, .09, .91); transition-delay:0.3s;} .aside_bg.on div{ opacity: 1; transform: rotate(0deg) translateY(0);} #aside .aside_box.for_m {display:none;} #aside .aside_box{display: block;width:100%;height:100%;} #aside .aside_head{height:130px;position: relative; border-bottom:1px solid #ddd; box-sizing:border-box; transition:all 0.4s;} #aside .aside_head .aside_logo{left:50%;top: 50%;position:absolute;z-index:15;width:160px;height:30px;transform: translate(-50%, -50%);} #aside .aside_head .aside_logo a {display:block;background: url('../images/skin/hd_logo.png') no-repeat left;font-size:0;background-size:100% auto;height:100%;} #aside .aside_head_right {top:50%;right:50px;transform:translate(0,-50%);margin:0;padding:0;font-size:0;position:absolute;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;z-index:15;} #aside .menu-trigger2.active-1{position:relative;padding:0;width:26px;height:26px;box-sizing: border-box;background:url('../images/skin/menu_trigger_close.png')no-repeat center;background-size:26px;display: inline-block;} /* 스크롤 */ #aside.scroll .aside_head{height:100px;} #aside.scroll .aside_head .aside_logo{left:60px; transform: translateY(-50%);} #aside ul.aside_menu {} #aside ul.aside_menu .dep1_li {text-align:left;display: inline-flex;vertical-align:top;align-items: center;} #aside ul.aside_menu .dep1_li .dep1_a {transition:0.2s;color:#333;font-size:44px;display: block;padding:0;font-weight:700;} #aside ul.aside_menu .dep1_li .dep2 {display: block; width:calc(100% - 315px);} #aside ul.aside_menu .dep1_li .dep2 li {position:relative;display: inline-block;} #aside ul.aside_menu .dep1_li .dep2 li a {display:block;font-size:16px;line-height:1.2;color:#888;font-weight:500;} #aside .aside_box .aside_cont{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1425px;} #aside .aside_box ul.aside_menu{position: relative;width:100%;} #aside .aside_box .dep1_li{position: relative;display: block;width:50%;} #aside .aside_box .dep1_li + .dep1_li{margin-top:60px;} #aside .aside_box .dep1_li:nth-child(4){margin-top:0;} #wrap #aside .aside_box .dep1_li:nth-child(5){margin-top:0;top:104px;} #wrap #aside .aside_box .dep1_li:nth-child(6){margin-top:0;top:208px;} #aside .aside_box .dep1_li:after{clear:both;content:"";display: block;} #aside .aside_box .dep1_li > a{width:315px;} #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4){position: absolute;top:0;right:0;} #aside .aside_box .dep1_li .dep2{display: block;} #aside .aside_box .dep1_li .dep2 li{position: relative;} #aside .aside_box .dep1_li .dep2 li + li{margin-left:26px;} #aside .aside_box .dep1_li .dep2 li + li:before{width:3px;height:3px;background:#888;content:"";border-radius:100%;position: absolute;top:50%;left:-17px;transform:translate(0,-50%);} /* over */ @media only screen and (min-width:1024px) { #aside .aside_box .dep1_li:hover > a, #aside .aside_box .dep1_li:focus > a{color:#fe4483;} #aside .aside_box .dep1_li .dep2 li:hover a{color:#fe4483;} } @media only screen and (max-width:1600px) { #aside .aside_box .aside_cont{width:1250px;} #aside .aside_box .dep1_li > a{width:275px;} #aside ul.aside_menu .dep1_li .dep2{width:calc(100% - 275px);} } @media only screen and (max-width:1350px) { #aside .aside_box .aside_cont{width:100%;box-sizing:border-box;padding:0 50px;} #aside .aside_box .dep1_li{width:50%;} #aside .aside_box .dep1_li > a{font-size:38px;} #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4){width:43%;} } @media only screen and (max-width:1217px) { #aside .aside_head_right{right:15px;} #aside.scroll .aside_head .aside_logo{left:15px;} } @media only screen and (max-width:1150px) { #aside .aside_box .dep1_li > a{font-size:30px;} #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4) > a{} } @media only screen and (max-width:1100px) { #aside .aside_box .aside_cont{padding:0 30px;} #aside .aside_box .dep1_li > a{} #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4) > a{} #aside ul.aside_menu .dep1_li .dep2 li a{font-size:14px;} } @media only screen and (max-width:1023px) { #aside .aside_head{height:100px;} #aside.scroll .aside_head{height:80px;} #aside .aside_head .aside_logo{width:140px;} } @media only screen and (max-width:940px) { #aside .aside_box .dep1_li{width: 50%; padding-right:15px; box-sizing:border-box;} #aside .aside_box .dep1_li > a{}{width:145px;} #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4){width:45%;} } @media only screen and (max-width:900px) { #aside .aside_box .aside_cont{padding:0 45px;} #aside ul.aside_menu .dep1_li{display:inline-block;} #aside .aside_box .dep1_li > a{width: 100%;} #aside ul.aside_menu .dep1_li .dep2, #aside .aside_box .dep1_li .dep2{width:100%; margin-top:15px;} #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4){width:35%;} #wrap #aside .aside_box .dep1_li:nth-child(5){top:141px;} #wrap #aside .aside_box .dep1_li:nth-child(6){top:282px;} } @media only screen and (max-width:800px) { #aside .aside_box .dep1_li:nth-child(n+4):nth-child(n+4){width: 50%;} } @media only screen and (max-width:700px) { #aside .aside_box{display: block;height:100%;overflow-y:scroll;} #aside.on {right:0;} #aside .aside_box.for_pc{display:none;} #aside .aside_box.for_m{display:block;} #aside .aside_box .aside_cont{padding:0; top:auto; left:auto; position:relative; transform:none;} #aside .aside_box .aside_menu{box-sizing:border-box;padding:40px 30px 20px 30px;} #aside .aside_box .dep1_li{width:100% !important; position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;} #aside .aside_box .dep1_li + .dep1_li{margin-top:35px !important;} #aside ul.aside_menu .dep1_li .dep1_a{font-size:22px;color:#333;font-weight:700;display: block;width:100% !important;height:100%;position: relative;transition:all 0.5s;} #aside .aside_box .dep1_li .dep1_a.on{color:#f14b51;transition:all 0.5s;} #aside .aside_menu .group_tit > a:before{width:20px;height:2px;content:"";background:#666;position: absolute;right: 0;top:50%;transform:translate(0,-50%); transition:all 0.4s;} #aside .aside_menu .group_tit > a:after{width:2px;height:20px;content:"";background:#666;position: absolute;right: 9px;top:50%;transform:translate(0,-50%); transition:all 0.4s;} #aside .aside_menu .group_tit > a.on:before{background:#f14b51;} #aside .aside_menu .group_tit > a.on:after{opacity:0;} #aside ul.aside_menu .dep1_li .dep2{position:relative;display: none ; line-height:145%;} #aside ul.aside_menu .dep1_li .dep2 li{box-sizing:border-box;padding-left:25px;position: relative; display:block; margin:0;} #aside ul.aside_menu .dep1_li .dep2 > li a{display:block;font-size:16px;line-height:30px;color:#888;font-weight:500;} #aside ul.aside_menu .dep1_li .dep2 > li a:before{width:3px;height:3px;background:#888;content:"";border-radius:100%;position: absolute;top:50%;left:10px;transform:translate(0,-50%);} #aside ul.aside_menu .dep1_li .dep2 li + li:before{display:none;} } @media only screen and (max-width:640px) { #aside .aside_head{height:90px;} #aside.scroll .aside_head{height:70px;} #aside .aside_head .aside_logo{width:125px;} } @media only screen and (max-width:600px) { #aside .aside_box .aside_menu {} #aside ul.aside_menu .dep1_li .dep2 > li a{font-size:14px;} } @media only screen and (max-width:479px) { #aside .aside_head{height:73px;} #aside.scroll .aside_head{height:60px;} #aside .aside_head .aside_logo{width:117px;} #aside .aside_box .aside_menu{padding:30px 20px;} #aside ul.aside_menu .dep1_li .dep1_a{font-size:20px;} #aside ul.aside_menu .dep1_li .dep2 > li a:before{width:2px;height:2px;left:3px;} #aside ul.aside_menu .dep1_li .dep2 li{padding-left:20px;} } @media only screen and (max-width:360px) { #aside ul.aside_menu .dep1_li .dep1_a{font-size:18px;} #aside .aside_box .dep1_li + .dep1_li{margin-top:30px !important;} } @media only screen and (max-width:360px) { #aside ul.aside_menu .dep1_li .dep1_a{font-size:18px;} #aside .aside_box .dep1_li + .dep1_li{margin-top:30px !important;} #aside.scroll .aside_head .aside_logo{left:10px;} #aside .aside_head_right{right:10px;} #aside .aside_box .aside_menu{padding:25px 15px;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ #footer{padding-top: 76px;padding-bottom:115px; border-top:1px solid #ddd;} #footer .w_custom{display:flex;} #footer .tit_nav{position:relative;font-weight: 700;} #footer .exp{} #footer .exp dt{} #footer .exp dt + dd{margin-top: 19px;} #footer .exp dd{font-size:14px; font-weight:300; color:#666; line-height:171%; padding:0 15px; font-family:'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #footer .exp dd .read_more_btn{display:block; margin-top:30px;} #footer .info{width:780px;} #footer .info .exp dd{line-height:214%; padding:0;} #footer .info .exp dd span + span:before{display:inline-flex; content:''; width:1px; height:10px; background:#ddd; margin:0 15px;} #footer .contact{width:420px;} #footer .career{width:400px;} #footer .copyright a{display:block;margin-top: 8px;font-size:inherit;font-weight:inherit;color:inherit;} #footer .ftr_nav{width:calc(100% - 1600px);margin-top: -10px;} #footer .ftr_nav ul{} #footer .ftr_nav ul li{text-align:right;} #footer .ftr_nav ul li + li{margin-top: 12px;} #footer .ftr_nav ul li a{font-size:14px; font-weight:300; color:#666;} #footer .ftr_nav ul li a strong{font-size:inherit; font-weight:400; color:#333;} #footer .btm_sec{margin-top: 57px;} #footer .copyright{width:calc(100% - 180px);font-size:14px;font-weight: 400;letter-spacing: 0.04em;color:rgba(102,102,102,0.7);font-family:'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #footer .sns_list{position:absolute;top: 10px;right:0;display:flex;align-items: center;font-size: 0;} #footer .sns_list li{} #footer .sns_list li + li{margin-left: 25px;} #footer .sns_list li a{display:inline-flex;} #footer .sns_list li a.insta{width:20px; height:20px; background:url('../images/skin/sns_insta_icon.png') no-repeat center;} #footer .sns_list li a.youtube{width:20px; height:14px; background:url('../images/skin/sns_youtube_icon.png') no-repeat center;} #footer .sns_list li a.facebook{width:11px; height:20px; background:url('../images/skin/sns_facebook_icon.png') no-repeat center;} #footer .sns_list li a.kakako{width:19px; height:20px; background:url('../images/skin/sns_kakao_icon.png') no-repeat center;} @media only screen and (max-width:1817px) { #footer .info{width:calc(53% - 120px);} #footer .contact{width:24%;} #footer .career{width:23%;} #footer .ftr_nav{width:120px;} } @media only screen and (max-width:1300px) { #footer .contact .exp dd br, #footer .career .exp dd br{display:none;} } @media only screen and (max-width:1217px) { #footer .w_custom{flex-wrap:wrap;} #footer .info{width:50%;} #footer .contact{width:25%;} #footer .career{width:25%;} #footer .ftr_nav{width:100%; margin-top:0px;} #footer .ftr_nav ul{display:flex;} #footer .ftr_nav ul li{text-align:left;} #footer .ftr_nav ul li + li{margin:0 0 0 35px;} } @media only screen and (max-width:975px) { #footer .info{width:100%; margin-bottom:51px;} #footer .contact, #footer .career{width:50%;} #footer .contact .exp dd br, #footer .career .exp dd br{display:block;} #footer .ftr_nav{margin-top:60px;} } @media only screen and (max-width:640px) { #footer{padding-top: 55px;padding-bottom:75px;background: #f5f5f5;} #footer .exp dt + dd{margin-top:22px;} #footer .exp dd .read_more_btn{margin-top:27px;} #footer .exp dd .read_more_btn span{color:#666; font-weight:300; letter-spacing:0.05em;} #footer .exp dd .read_more_btn span:brefore{bottom:5px; background:#666;} #footer .info .exp dd{line-height:178%;} #footer .contact, #footer .career{width:100%;} #footer .career{margin-top:42px;} #footer .contact .exp dd, #footer .career .exp dd{font-size:16px; line-height:150%; margin-top:18px;} #footer .copyright{font-size:13px; width:calc(100% - 150px);} #footer .btm_sec{margin-top:77px;} #footer .sns_list li + li{margin-left:20px;} #footer .info .exp dd br, #footer .info .exp dd span + span:before{display:none;} #footer .info .exp dd br.for_m{display:block;} #footer .info .exp dd span{display:inline-block; margin-right:30px;} } @media only screen and (max-width:479px) { #footer .w_custom.btm_sec{flex-direction:column-reverse;} #footer .info .exp dd span{margin-right:24px;} #footer .copyright, #footer .sns_list{width:100%;} #footer .sns_list{position:relative; top:0; right:0; margin-bottom:37px;} #footer .sns_list li + li{margin-left:25px;} } @media only screen and (max-width:374px) { #footer .info .exp dd span{margin-right:15px;} #footer .contact .exp dd, #footer .career .exp dd{font-size:14px;} #footer .exp dd{font-size:13px;} #footer .ftr_nav ul li + li{margin-left:25px;} #footer .ftr_nav ul li a{font-size:13px;} #footer .copyright{font-size:12px;} } /*─────────────────────────────────────────────────────────── MAIN | index.html ───────────────────────────────────────────────────────────*/ /* *PC 일반 **/ .main_index #container {padding-top:0 !important;} /* visual */ #wrap .main_visual, #wrap .main_visual .slick-slide{height:940px;} #wrap .main_visual {position:relative;width:100%; background:#000; z-index:2;} #wrap .main_visual .slick-slide {position:relative; overflow:hidden;} #wrap .main_visual .slick-slide > a{position:absolute; top:0; left:0; width:100%; height:100%; z-index:3;} .main_visual .txt_box {width:calc(100% - 30px);text-align:center;transform:translate(-50%, -50%);position:absolute;left: 50%;top: 51%;font-size:0; z-index:1;} .main_visual .txt_box h2{font-size:100px; font-weight:bold; color:#fff;} .main_visual .txt_box h2 + h5{margin-top: 13px;} .main_visual .txt_box h5{font-size:30px; font-weight:600; color:#fff;} .main_visual .thumb{width:100%; height:100%;} .main_visual .slick-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:74px; display:inline-flex; font-size:0;} .main_visual .slick-dots li{} .main_visual .slick-dots li + li{margin-left:18px;} .main_visual .slick-dots li button{font-size:0; width:12px; height:12px; border-radius:100%; background:rgba(255,255,255,0.5);} .main_visual .slick-dots li.slick-active button{background:#fe4483;} /* 애니 효과 */ .main_visual .slick-slide .TxtAni{opacity:0;} .main_visual .slick-slide.active .TxtAni{animation-name: TxtUpDown; animation-duration:2s; animation-direction:alternate; animation-fill-mode: forwards; } .main_visual .slick-slide h5.TxtAni{animation-delay: 0.2s;} .main_visual .slick-slide .thumb{transition:all 3s; transform:scale(1.1); opacity:0.7;} .main_visual .slick-slide.active .thumb{transform:scale(1); opacity:1;} @-webkit-keyframes TxtUpDown { 0% {transform: translate(0px, 100px) scale(0.7);opacity: 0;} 70% {transform: translate(0px, -30px) scale(1);opacity: 1;} 100% {transform: translate(0px, 0px) scale(1);opacity: 1;} } /*재생, 정지버튼*/ /*.main_visual .visual_btn_wrap .play_btn_box{display: inline-block;vertical-align: top;position: relative;width:16px;height:16px;text-align: center;} .main_visual .visual_btn_wrap .play_btn_box .slickBtn{font-size:0;width:100%;height:100%;cursor:pointer;} .main_visual .visual_btn_wrap .slickPause {background:url('../images/test/visual_sld_pause.png') no-repeat center;} .main_visual .visual_btn_wrap .play_btn_box .slickPlay{width:auto;height:auto;content:"";border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:none;border-left: 10px solid #fff;margin-left:3px;}*/ /*도트 타입 B*/ /* #wrap .main_visual .slick-dots {text-align: center;display: inline-block;vertical-align: middle;position: absolute;font-size:0;left:48%;bottom:152px;z-index:11;} #wrap .main_visual .slick-dots li{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:0;} #wrap .main_visual .slick-dots li button{opacity:0.5;width:10px;height:10px;box-sizing:border-box;border-radius:100%;background:#fff;display: inline-block;margin:0 5px;font-size:0;} #wrap .main_visual .slick-dots li.slick-active button{opacity:1;background:#de0000;}*/ /*도트 타입 C*/ /*#wrap .main_visual .slick-dots {text-align: center;display: inline-block;vertical-align: middle;position: absolute;font-size:0;left:48%;bottom:149px;z-index:11;} #wrap .main_visual .slick-dots li{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:0;} #wrap .main_visual .slick-dots li button{font-size: 15px;color: #fff;font-weight: 400;box-sizing: border-box;display: inline-block;margin: 0 5px;width: auto;height: auto;background: none;opacity: 1;border-radius: 0;} #wrap .main_visual .slick-dots li.slick-active button{color:#de0000;}*/ /*타입 A*/ .main_visual .visual_btn_wrap.type_A {position:absolute;left:0;bottom:150px;overflow:hidden;width:100%;text-align:center;z-index:10;} .main_visual .visual_btn_wrap.type_A .control_box, .main_visual .visual_btn_wrap.type_A .slider-progress, .main_visual .visual_btn_wrap.type_A .slideController {display:inline-block;vertical-align:middle;width:auto;box-sizing:border-box;} .main_visual .visual_btn_wrap.type_A .control_box {font-size:0;} .main_visual .visual_btn_wrap.type_A .control_box .play_btn_box, #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow {font-size:0;display:inline-block;vertical-align:middle;height:20px;} /*화살표*/ #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow {width:32px;margin:0;position: static;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow:after{display: none;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .prev {background:url('../images/test/visual_sld_prev.png') no-repeat left;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .next {background:url('../images/test/visual_sld_next.png') no-repeat right;} /*프로그래스바*/ .main_visual .visual_btn_wrap.type_A .slider-progress{width:100px;vertical-align:middle;height:2px;background:rgba(255,255,255,0.4);margin-left:20px;} .main_visual .visual_btn_wrap.type_A .slider-progress .progress{height:100%;background:#de0000;} /*카운팅*/ .main_visual .visual_btn_wrap.type_A .slideController{margin-left:20px;} .main_visual .visual_btn_wrap.type_A .slideController span{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:15px;color:#fff;font-weight:400;letter-spacing:0;width:auto;position:relative;top:0;left:0;z-index:20;} .main_visual .visual_btn_wrap.type_A .slideController .slideCountItem{font-weight:600;} .main_visual .visual_btn_wrap.type_A .slideController .slideCountItem:before{content:"0";font-size:inherit;color:inherit;font-weight:inherit;} /*타입 B*/ .main_visual .visual_btn_wrap.type_B {position:absolute;left:0;bottom:150px;overflow:hidden;width:100%;text-align:center;z-index:10;box-sizing:border-box;} /*화살표*/ #wrap .main_visual .arw_box.type_B .slick-arrow {width:40px;height:40px;border:2px solid #333;border-width:2px 2px 0 0;margin:0;position:absolute;font-size:0;background:none;top:calc(50% - 20px);} #wrap .main_visual .arw_box.type_B .slick-arrow:after{display: none;} #wrap .main_visual .arw_box.type_B .prev {transform:rotate(-135deg);left:30px;} #wrap .main_visual .arw_box.type_B .next {transform:rotate(45deg);right:30px;} /*타입 C*/ .main_visual .visual_btn_wrap.type_C {position:absolute;left:0;bottom:150px;overflow:hidden;width:100%;text-align:center;z-index:10;} /*화살표*/ #wrap .main_visual .arw_box.type_C .slick-arrow {width:40px;height:40px;border:2px solid #333;border-width:2px 2px 0 0;margin:0;position:absolute;font-size:0;background:none;top:calc(50% - 20px);} #wrap .main_visual .arw_box.type_C .slick-arrow:after{display: none;} #wrap .main_visual .arw_box.type_C .prev {transform:rotate(-135deg);left:30px;} #wrap .main_visual .arw_box.type_C .next {transform:rotate(45deg);right:30px;} @media only screen and (max-width:1217px) { #wrap .main_visual, #wrap .main_visual .slick-slide{min-height:700px; height:77.2vw;} .main_visual .txt_box h2{font-size:8.2vw;} .main_visual .txt_box h5{font-size:26px;} } @media only screen and (max-width:1023px) { .main_visual .txt_box h5{font-size:24px; font-weight:300;} .main_visual .slick-dots{bottom:50px;} } @media only screen and (max-width:860px) { .main_visual .txt_box h5{font-size:21px;} } @media only screen and (max-width:767px) { .main_visual .txt_box{top:50%;} .main_visual .txt_box h2{font-size:60px; line-height:116%;} .main_visual .txt_box h2 + h5{margin-top:30px;} } @media only screen and (max-width:640px) { .main_visual .txt_box h5{font-size:17px;} .main_visual .slick-dots{bottom:40px;} .main_visual .slick-dots li + li{margin-left:13px;} } @media only screen and (max-width:431px) { .main_visual .txt_box h5{font-size:14px;} } @media only screen and (max-width:374px) { .main_visual .txt_box h2{font-size:16vw;} .main_visual .slick-dots{bottom:30px;} .main_visual .slick-dots li button{width:10px; height:10px;} #wrap .main_visual, #wrap .main_visual .slick-slide{height:186.4vw; min-height:auto;} } /* 공통 */ .main_content .w_custom{width:calc(100% - 90px);} .main_content .main_tit{} .main_content .main_tit h2{font-size:140px; font-weight:bold; color:#111;} .main_content .main_tit h3{font-size:80px;font-weight: 800;color:#111;letter-spacing: -0.025em;} .main_content .main_tit h3 + h6{margin-top: 29px;} .main_content .main_tit h4{font-size:36px; font-weight:400; color:#333;} .main_content .main_tit h5{font-size:24px; font-weight:400; color:#111;} .main_content .main_tit h6{font-size:20px; font-weight:400; color:#666; line-height:150%;} .main_content .main_tit p{font-size:16px;font-weight: 400;color:#666;line-height:187%;letter-spacing: 0.1em;} .main_content .tit_nav{position:absolute;top:0;left:0;font-size:16px;font-weight: 600;color:#333;line-height: 1;display: inline-flex;align-items: center;letter-spacing: 0.08em;} .main_content .tit_nav:before{display:inline-flex;content:'';width:6px;height:6px;background:#ff4483;margin-right: 8px;vertical-align:middle;} .main_content .read_more_btn{display:inline-block;} .main_content .read_more_btn span{display:inline-block;position:relative;font-size:15px;color:#333;font-weight: 600;transition:all 0.4s;} .main_content .read_more_btn span:before{position:absolute;content:'';width:100%;height:1px;background:#333;left:0;bottom: 1px;} .main_content .read_more_btn span:after{position:absolute; content:''; width:30px; height:1px; background:#fe4483; left:0; bottom:1px; opacity:0; transition:all 0.4s;} .main_content .view_more_btn{position:fixed; display:none; transform:translate(-50%, -50%); z-index:2;} .main_content .view_more_btn span{display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; background:#fe4483; font-size:14px; font-weight:500; color:#fff; border-radius:100%;} .main_content .swiper-button-prev:after, .main_content .swiper-button-next:after{display:none;} /* over */ @media only screen and (min-width:1024px) { .main_content .read_more_btn:hover span{color:#fe4483;} .main_content .read_more_btn:hover span:after{animation-name: ReadMore; animation-duration:2s; animation-duration: leaner; animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode: forwards; opacity:1;} @keyframes ReadMore { 0% {left:0; opacity:1;} 100% {left:calc(100% - 30px);} } } /* main_about */ .main_about{padding: 140px 0 160px;position:relative; z-index:2;} .main_about .w_custom{display:flex; align-items:center;} .main_about .tit_nav{top: 24px;left: 7px;} .main_about .main_tit{width: calc(100% - 740px);padding-right:15px;box-sizing:border-box;padding-left: 65px;padding-top: 19px;} .main_about .main_tit .read_more_btn{margin-top:50px;} .main_about .thumb{width: 740px;height:400px;box-sizing:border-box;padding-right: 40px;} .main_about .thumb img{width:100%; height:100%; object-fit:cover;} /* main_wide_bnr */ .main_wide_bnr{ opacity:0; transition:all 0.7s;} .main_wide_bnr.aos-animate{opacity:1;} .main_wide_bnr .bnr_list{display:flex; justify-content:space-between;} .main_wide_bnr .bnr_list > li{position:relative; width:100%; box-sizing:border-box; overflow:hidden;} .main_wide_bnr .bnr_list .link{position:absolute; top:0; left:0; width:100%; height:100%;} .main_wide_bnr .bnr_list .tittle{position:absolute;left: 7.5%;top: 77.5%; z-index:1; width:85%;} .main_wide_bnr .bnr_list .tittle dt{font-size:36px;font-weight:500;color:#fff;letter-spacing: -0.01em;} .main_wide_bnr .bnr_list .tittle dt + dd{margin-top: 16px;} .main_wide_bnr .bnr_list .tittle dd{font-size:16px;font-weight:400;color:#fff;letter-spacing: 0.085em;} .main_wide_bnr .bnr_list .thumb{display:block; font-size:0; width:100%; height:34.99vw; overflow:hidden; background:#fff;} .main_wide_bnr .bnr_list .thumb img{width:100%; height:100%; object-fit:cover; transition:all 0.4s;} /* over */ @media only screen and (min-width:1024px) { .main_wide_bnr .bnr_list > li:hover .thumb img{transform:scale(1.05); opacity:0.9;} } /* main_service */ .main_service{position:relative; padding-top: 207px; padding-bottom:140px; border-bottom:204px solid #000; z-index:3; } .main_service .tit_nav{top: -63px;left:0;} .main_service .ser_list{border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:67px 0 78px;display:flex;height: 775px;box-sizing: border-box;} .main_service .ser_list > li{position:relative; border-left:1px solid #ddd;width: calc(40% / 3);box-sizing: border-box; transition:all 0.8s; cursor:pointer;} .main_service .ser_list > li .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} .main_service .ser_list > li dl{display:flex;align-items: flex-end;height: 100%;position: relative;} .main_service .ser_list > li dl dt{writing-mode:vertical-rl;font-size:60px;font-weight: 600;color:#111;transform:rotate(-180deg);padding-right: 25px;box-sizing: border-box;letter-spacing: -0.02em; height:100%; transition:all 0.8s; } .main_service .ser_list > li dl dd{ opacity:0; height:100%; overflow:hidden; } .main_service .ser_list > li .cont{display: inline-flex;align-items: flex-end;height: 100%;} .main_service .ser_list > li .thumb{font-size:0; width:0; height:620px; opacity:0; transition:all 0.8s;} .main_service .ser_list > li .thumb img{width:100%; height:100%; object-fit:cover;} .main_service .ser_list > li .main_tit{opacity:0; transition:all 0.6s; transition-delay:0.4s; transition-property:opacity;} .main_service .ser_list > li .main_tit p{letter-spacing:0;} .main_service .ser_list > li .main_tit .read_more_btn{margin-top:47px;} .main_service .ser_list > li.on{border-color:#fe4483;width: 60%;} .main_service .ser_list > li.on dl dt{width: 230px;} .main_service .ser_list > li.on dl dd{width: calc(100% - 230px); opacity:1;} .main_service .ser_list > li.on .thumb{width: 320px; opacity:1;} .main_service .ser_list > li.on .main_tit{width: calc(100% - 320px);padding: 0 60px 40px;box-sizing: border-box; opacity:1;} @media only screen and (min-width:1024px) { .main_service .ser_list{transform:none !important;} .main_service .ser_list > li:nth-child(n+5){display:none;} .main_service .ser_list > li:hover .read_more_btn span{color:#fe4483;} .main_service .ser_list > li:hover .read_more_btn span:after{animation-name: ReadMore; animation-duration:2s; animation-duration: leaner; animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode: forwards; opacity:1;} @keyframes ReadMore { 0% {left:0; opacity:1;} 100% {left:calc(100% - 30px);} } } /* main_portfolio */ .main_portfolio{background:#000;} .main_portfolio .tit_nav{color:#fff;left: 53px;z-index:7;top: 56px;font-weight: 500;} .main_portfolio .slide_wrap{position:relative;display:flex; opacity:0; padding-top:100px;transition:all 1.5s;} .main_portfolio.aos-animate .slide_wrap{opacity:1; padding-top:0;} .main_portfolio .slide_wrap .main_tit{position:relative;display:flex;flex-wrap:wrap;align-items:center;height: auto;width: 29vw;background:#000;z-index:5;align-content: center;padding-left: 50px;box-sizing:border-box;overflow:hidden;/* padding-top: 124px; */} .main_portfolio .slide_wrap .main_tit h4, .main_portfolio .slide_wrap .main_tit p{width:100%; color:#fff;} .main_portfolio .slide_wrap .main_tit h4 + p{margin-top:10px;} .main_portfolio .slide_wrap .main_tit p{font-weight:200;} .main_portfolio .slide_wrap .main_tit h4 a, .main_portfolio .slide_wrap .main_tit p a{font-size:inherit; font-weight:inherit; color:inherit;} .main_portfolio .slide_wrap .main_tit .read_more_btn{display:none;} .main_portfolio .slide_wrap .main_tit .read_more_btn span{color:#fff;font-weight: 100;} .main_portfolio .slide_wrap .main_tit .read_more_btn span:before{background-color:#fff;} .main_portfolio .slide_wrap .main_tit .swiper-wrapper{height:auto;} .main_portfolio .slide_wrap .main_tit .swiper-slide{opacity:0 !important; transition:all 0.4s; pointer-events:none;} .main_portfolio .slide_wrap .main_tit .swiper-slide.swiper-slide-thumb-active{opacity:1 !important; pointer-events:inherit;} .main_portfolio .slide_wrap .PortfolioSwiper{width: calc(100% - 29vw);height: auto;padding-right:17.9vw;box-sizing:border-box;} .main_portfolio .slide_wrap .PortfolioSwiper .swiper-slide{} .main_portfolio .slide_wrap .PortfolioSwiper .swiper-slide .thumb{font-size:0;background:#000;overflow:hidden; height: 30.28vw; } .main_portfolio .slide_wrap .PortfolioSwiper .swiper-slide .thumb img{width:100%; height:100%; object-fit:cover;} .main_portfolio .slide_wrap .slide_btn_wrap{font-size:0;margin-top: 94px;} .main_portfolio .slide_wrap .swiper-button-prev, .main_portfolio .slide_wrap .swiper-button-next{position:relative;top:auto; right:auto; bottom:auto; left:auto; width:40px; height:29px; margin:0; display:inline-flex; background:url('../images/skin/main_slide_btn.png') no-repeat center; transition:all 0.4s;} .main_portfolio .slide_wrap .swiper-button-prev{margin-right:30px;} .main_portfolio .slide_wrap .swiper-button-next{transform:scaleX(-1);} /* over */ @media only screen and (min-width:1024px) { .main_portfolio .slide_wrap .swiper-button-prev:hover, .main_portfolio .slide_wrap .swiper-button-next:hover{background-image:url('../images/skin/main_slide_btn_on.png');} } /* main_news */ .main_news{border-top:126px solid #000;padding-top: 137px;position:relative;z-index:3;} .main_news .tit_nav{position:relative; margin-bottom:47px;} .main_news .NewsSwiper{overflow:hidden; box-sizing:border-box;} .main_news .NewsSwiper .swiper-slide{position:relative;} .main_news .NewsSwiper .swiper-slide .thumb{font-size:0; background:#fff; width:100%; height:20.94vw;overflow:hidden; } .main_news .NewsSwiper .swiper-slide .thumb + .txt{margin-top: 24px;} .main_news .NewsSwiper .swiper-slide .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;} .main_news .NewsSwiper .swiper-slide .thumb img{width:100%; height:100%; object-fit:cover; transition:all 0.4s;} .main_news .NewsSwiper .swiper-slide .txt{} .main_news .NewsSwiper .swiper-slide .txt strong{display:block;font-size:24px;font-weight: 600;color:#111;letter-spacing: -0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .main_news .NewsSwiper .swiper-slide .txt .read_more_btn{margin-top: 14px;} .main_news .controller{position:relative; margin-top:99px;} .main_news .swiper-pagination{position:relative;width:calc(100% - 120px);height:2px;background:#ddd;} .main_news .swiper-pagination .swiper-pagination-progressbar-fill{background:#fe4483;} .main_news .read_more_btn.all_more{position:absolute; right:0; bottom:0;} .main_news .read_more_btn.all_more span{width:120px; text-align:center; line-height:1;} .main_news .read_more_btn.all_more span:before, .main_news .read_more_btn.all_more span:after{display:none;} /* over */ @media only screen and (min-width:1024px) { .main_news .NewsSwiper .swiper-slide:hover .thumb img{transform:scale(1.05); opacity:0.9;} .main_news .NewsSwiper .swiper-slide:hover .read_more_btn span{color:#fe4483;} .main_news .NewsSwiper .swiper-slide:hover .read_more_btn span:after{animation-name: ReadMore; animation-duration:2s; animation-duration: leaner; animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode: forwards; opacity:1;} @keyframes ReadMore { 0% {left:0; opacity:1;} 100% {left:calc(100% - 30px);} } } /* main_move_txt */ .main_move_txt{} .main_move_txt h4{font-size:7.3vw; font-weight:bold; color:#111; line-height:1;margin: 6.5vw 0 2.9vw;} /* 키프레임 */ .main_move_txt h4{display:inline-block;animation: TxtFlow 20s cubic-bezier(1, 1, 1, 1);animation-fill-mode:forwards;animation-delay: 0s;animation-iteration-count:infinite;width: max-content;} @keyframes TxtFlow { 0% {transform: translateX(70%);} 100% {transform: translateX(-100%);} } /* main_video_bnr */ .main_video_bnr{position:relative; width:100%; height:600px; background:url('../images/skin/main_video_bnr.jpg') no-repeat center; background-size:cover;} .main_video_bnr .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; opacity:0; background:#000; transition:all 0.4s;} .main_video_bnr .play_btn{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80px; height:80px; z-index:2;} .main_video_bnr .play_btn:before{position:absolute; content:''; width:calc(100% + 40px); height:calc(100% + 40px); top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(255,255,255,0.3); border-radius:100%; transition:all 1s;} .main_video_bnr .play_btn:after{position:absolute; content:''; width:0; height:0; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(255,68,131,0.6); border-radius:100%; transition:all 1s;} .main_video_bnr .play_btn span{position:relative; display:inline-flex; width:100%; height:100%; background:#fff url('../images/skin/main_video_bnr_play_icon.png') no-repeat 56% 50%; border-radius:100%; transition:all 1s; z-index:2;} .main_video_layer{position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:50%; padding-bottom:28%; opacity:0; pointer-events:none; transition:all 0.4s; z-index:99;} .main_video_layer iframe, .main_video_layer embed, .main_video_layer object{position:absolute; width:100%; height:100%; top: 50%; left: 50%; transform: translate(-50%, -50%); border:0; } .main_video_layer.on{opacity:1; pointer-events:inherit;} #layer_dim{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); opacity:0; pointer-events:none; transition:all 0.4s;} #layer_dim.on{opacity:1; pointer-events:inherit;z-index:98;} .main_video_layer .close_btn {position:absolute;right: -60px;top: 0;width:32px;height:32px;cursor:pointer;} .main_video_layer .close_btn span {} .main_video_layer .close_btn span {position:absolute;width:100%;height:2px;background-color:#fff;left:0;top:14px;} .main_video_layer .close_btn span:nth-child(1) {transform:rotate(-45deg);} .main_video_layer .close_btn span:nth-child(2) {transform:rotate(45deg);} /* over */ @media only screen and (min-width:1024px) { .main_video_bnr:hover{} .main_video_bnr:hover .link{opacity:0.2;} .main_video_bnr:hover .play_btn span{transform:rotateY(1turn);} .main_video_bnr:hover .play_btn:after{width:calc(100% + 40px); height:calc(100% + 40px);} } @media only screen and (max-width:1600px) { .main_content .main_tit h3{font-size:5vw;} .main_content .main_tit h4{font-size:33px;} .main_content .main_tit h6{font-size:18px;} .main_content .main_tit p{font-size:15px; line-height:153%;} .main_about .tit_nav{top:0;} .main_about .main_tit{padding-left:4vw; width:calc(100% - 46.2vw);} .main_about .thumb{width:calc(43.7vw + 2.5vw); padding-right:2.5vw; height:25vw; min-height:230px;} .main_wide_bnr .bnr_list .tittle dt{font-size:33px;} .main_wide_bnr .bnr_list .tittle dd{font-size:15px;} .main_service .ser_list{height:48vw;} .main_service .ser_list > li dl dt{font-size:3.7vw;} .main_service .ser_list > li .thumb{height:38.75vw;} .main_service .ser_list > li .main_tit .read_more_btn{margin-top:30px;} .main_service .ser_list > li.on dl dt{width:14.37vw;} .main_service .ser_list > li.on dl dd{width:calc(100% - 14.37vw);} .main_service .ser_list > li.on .thumb{width:20vw;} .main_service .ser_list > li.on .main_tit{padding:0 3.7vw 2.5vw; width:calc(100% - 20vw);} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:22px;} .main_video_bnr{height:37.5vw; min-height:450px;} .main_video_bnr .play_btn{width:70px; height:70px;} .main_video_bnr .play_btn span{background-size:18px auto;} } @media only screen and (max-width:1400px) { .main_content .main_tit h6{font-size:17px;} .main_content .main_tit h4{font-size:30px;} .main_wide_bnr .bnr_list .tittle dt{font-size:30px;} .main_service .ser_list > li.on dl dt{width:11vw;} .main_service .ser_list > li.on dl dd{width:calc(100% - 11vw);} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:20px;} .main_video_bnr .play_btn{width:60px; height:60px;} .main_video_bnr .play_btn:before{width:calc(100% + 30px); height:calc(100% + 30px);} .main_video_bnr .play_btn span{background-size:16px auto;} } @media only screen and (max-width:1217px) { .main_content .w_custom{width:calc(100% - 30px);} .main_content .main_tit h3 + h6{margin-top: 24px;} .main_content .main_tit h4{font-size:27px;} .main_content .main_tit h6{font-size:16px;} .main_about .main_tit{padding-top: 43px;} .main_about .main_tit .read_more_btn{margin-top:30px;} .main_wide_bnr .bnr_list .thumb{height:34.9vw;} .main_wide_bnr .bnr_list .tittle{top:73%;} .main_wide_bnr .bnr_list .tittle dt{font-size:27px;} .main_wide_bnr .bnr_list .tittle dd{font-size:14px;} .main_portfolio .tit_nav{top:0; left:15px;} .main_portfolio .slide_wrap .main_tit{padding-left:15px;} .main_portfolio .slide_wrap .slide_btn_wrap{margin-top:65px;} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:18px;} } @media only screen and (max-width:1023px) { .main_content .main_tit h4{font-size:24px;} .main_content .main_tit h6{font-size:15px;} .main_content .main_tit p{font-size:14px;} .main_content .view_more_btn{display:none !important;} .main_about{padding: 120px 0 130px;} .main_wide_bnr .bnr_list .tittle dt{font-size:24px;} .main_wide_bnr .bnr_list .tittle dt + dd{margin-top:12px;} .main_service{padding-top:180px; padding-bottom:120px; border-bottom:0;} .main_service .tit_nav{top: -43px;} .main_service .ServiceSwiper{width:100%; box-sizing:border-box; padding-right:7vw;} .main_service .ser_list{height:auto; border:0; padding:0;} .main_service .ser_list > li{border:0;} .main_service .ser_list > li dl{display:block;} .main_service .ser_list > li dl dt{position:absolute;top:59vw;left: 5px;height:auto;writing-mode:inherit;transform:none; padding-right:0;} .main_service .ser_list > li dl dd{height:auto; opacity:1;} .main_service .ser_list > li .cont{display:block; height:auto;} .main_service .ser_list > li .thumb{width:100%; opacity:1; height:57vw;} .main_service .ser_list > li .main_tit, .main_service .ser_list > li.on .main_tit{padding: 8vw 0 0 0;} .main_service .ser_list > li .main_tit{opacity:1;} .main_service .ser_list > li.on{width: auto;} .main_service .ser_list > li.on dl dt{width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .main_service .ser_list > li.on dl dd{width: 100%;} .main_service .ser_list > li.on .thumb{width: 100%;} .main_service .ser_list > li.on .main_tit{width: 100%;padding-left: 5px;} .main_portfolio{padding:150px 0;} .main_portfolio .slide_wrap{flex-wrap:wrap; flex-direction:column-reverse;} .main_portfolio .tit_nav{top:-60px;} .main_portfolio .slide_wrap .main_tit{width:calc(100% - 30px);padding: 21px 0 0 0;margin: 0 auto;} .main_portfolio .slide_wrap .PortfolioSwiper{width:calc(100% - 30px);padding-right:0;margin: 0 auto;} .main_portfolio .slide_wrap .PortfolioSwiper .swiper-slide .thumb{height: 52.33vw;} .main_portfolio .slide_wrap .swiper-button-prev, .main_portfolio .slide_wrap .swiper-button-next{width:32px; background-size:100% auto;} .main_portfolio .slide_wrap .main_tit .read_more_btn{display:block;margin-top: 33px;} .main_news{border-top:0;} .main_news .NewsSwiper{overflow:visible; padding-right:14.8vw;} .main_news .NewsSwiper .swiper-slide .thumb{height:29.6vw;} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:17px;} .main_news{padding-top:100px;} .main_video_layer{width:calc(100% - 30px); padding-bottom:56.25%;} .main_video_layer .close_btn{right:0; top:-45px;} } @media only screen and (max-width:975px) { .main_move_txt h4{font-size:70px;margin: 79px 0 20px;text-transform: uppercase; animation: TxtFlow 20s cubic-bezier(1, 1, 1, 1);animation-fill-mode:forwards;animation-delay: 0s;animation-iteration-count:infinite;} @keyframes TxtFlow { 0% {transform: translateX(20%);} 100% {transform: translateX(-100%);} } } @media only screen and (max-width:860px) { .main_content .main_tit h3{font-size:40px;} .main_content .main_tit h4{font-size:21px;} .main_content .main_tit h6{font-size:14px;line-height: 142%;} .main_content .read_more_btn span{font-size:14px;} .main_about{padding: 100px 0 110px;} .main_about .tit_nav{left:0;} .main_about .main_tit{padding-left:0; width:calc(100% - 43.7vw);} .main_about .thumb{padding-right:0; width:calc(43.7vw);} .main_about .main_tit .read_more_btn{margin-top:20px;} .main_wide_bnr .bnr_list .tittle dt{font-size:20px;} .main_wide_bnr .bnr_list .tittle dd{font-size:13px;} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:16px;} } @media only screen and (max-width:767px) { .main_wide_bnr .bnr_list .tittle{top:68%;} .main_service .ser_list > li dl dt{font-size:25px;} .main_service .ser_list > li .main_tit, .main_service .ser_list > li.on .main_tit{padding-top:55px;} } @media only screen and (max-width:730px) { .main_about .w_custom{display:block;} .main_about .main_tit{width:100%;padding: 43px 5px 30px;} .main_about .main_tit + .thumb{} .main_about .main_tit .read_more_btn{display:none;} .main_about .thumb{width:100%;height:54.7vw;min-height: 200px;} } @media only screen and (max-width:640px) { .main_about{padding: 70px 0 80px;} .main_content .main_tit h4{font-size:18px;} .main_content .read_more_btn span{font-size:13px;} .main_wide_bnr .bnr_list{display:block;} .main_wide_bnr .bnr_list .tittle{left: 18px;top: 72%;} .main_wide_bnr .bnr_list .thumb{height:70vw; min-height:300px;} .main_wide_bnr .bnr_list .tittle dt + dd{margin-top:7px;} .main_wide_bnr .bnr_list .tittle dd{font-weight:300;} .main_service{padding-top: 96px;padding-bottom:80px;} .main_portfolio{padding:94px 0 60px;} .main_portfolio .tit_nav{top:-44px;} .main_portfolio .slide_wrap .swiper-button-prev, .main_portfolio .slide_wrap .swiper-button-next{width:21px; height:15px;} .main_portfolio .slide_wrap .swiper-button-prev{margin-right:15px;} .main_news{padding-top: 77px;} .main_news .tit_nav{margin-bottom:30px;} .main_news .NewsSwiper .swiper-slide .thumb{height:53.6vw;} .main_news .NewsSwiper .swiper-slide .thumb + .txt{margin-top: 15px;} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:15px;} .main_news .NewsSwiper .swiper-slide .txt .read_more_btn{margin-top:11px;} .main_news .controller{margin-top:59px;} .main_news .swiper-pagination{width:100%;} .main_news .read_more_btn.all_more span{display:none;} .main_video_layer .close_btn{width:25px; height:25px; top:-40px;} } @media only screen and (max-width:479px) { .main_content .main_tit p{font-size:13px;} .main_service .ServiceSwiper{padding-right:20vw; } .main_service .ser_list > li .thumb{height:82.7vw;} .main_service .ser_list > li dl dt{top: 90vw;} .main_service .ser_list > li .main_tit, .main_service .ser_list > li.on .main_tit{padding-top: 70px;} .main_service .ser_list > li .main_tit p{letter-spacing:-0.01em;} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:14px;} .main_video_bnr .play_btn{width:50px; height:50px;} .main_video_bnr .play_btn:before{width:calc(100% + 20px); height:calc(100% + 20px);} .main_video_bnr .play_btn span{background-size:13px auto;} } @media only screen and (max-width:374px) { .main_content .main_tit h3{font-size:10.5vw;} .main_content .main_tit h4{font-size:17px;} .main_content .main_tit h6{font-size:13px;} .main_content .main_tit p{font-size:12px;} .main_content .read_more_btn span{font-size:12px;} .main_content .tit_nav{font-size:15px;} .main_wide_bnr .bnr_list .tittle dt{font-size:18px;} .main_wide_bnr .bnr_list .tittle dd{font-size:12px;} .main_service .ser_list > li dl dt{font-size:23px;} .main_service .ser_list > li .main_tit, .main_service .ser_list > li.on .main_tit{padding-top:65px;} .main_service .ser_list > li .main_tit .read_more_btn{margin-top:25px;} .main_news .NewsSwiper .swiper-slide .txt strong{font-size:13px;} } @media only screen and (max-width:320px) { .main_content .w_custom{width:calc(100% - 20px);} }