@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ p, div, span, a, dd, dt, td, th {white-space:normal;word-break:keep-all;word-wrap:break-word;} .dn {display:none !important;} /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ address, em {font-style:normal;} /* clear type */ .clear, .after_div {*zoom:1;} .clear:after, .after_div:after {content:"";display:block;clear:both;} .fl {float:left;} .fr {float:right;} .clear_fl {clear:both;float:left;} /* display type */ .db {display:block;} .dn {display:none !important;} .di {display:inline-block;} .dt {display:table;} .dr {display:table-row;} .dc {display:table-cell;} /* hidden type */ .blind {width:0;height:0;text-indent:-9999999px} .opacityhidden {opacity:0;} /* position type */ .relative {position:relative;} .absolute {position:absolute;} /*** align type ***/ .ta_left {text-align:left !important;} .ta_center {text-align:center !important;} .ta_right {text-align:right !important;} .va_top {vertical-align:top !important;} .va_middle {vertical-align:middle !important;} .va_bottom {vertical-align:bottom !important;} #wrap {min-height:100%;width:100%;margin:0;padding:0;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;padding:0;} #wrap #container {width:100%;margin:0;padding:0;} /* #container 안의 레이아웃 */ #contents_wrap {width:1200px;margin:0 auto;padding:0;z-index:0;box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 서브페이지 레이어 팝업 기능을 위해 relative제거*/ #contents_wrap #side_box {width:100%;padding:5.6% 0 0 0;box-sizing:border-box;} /* lnb 감싸는 영역 */ #contents_wrap #contents_box {width:100%;padding:5.6% 0 7.2% 0;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */ #contents_wrap #side_box + #contents_box {padding-top:0;} /* lnb와 컨텐츠가 float 일때 사이즈 재설정 */ /* 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 {padding:0;width:100%;max-width:1200px;text-align:left;margin:0 auto;box-sizing:border-box;overflow: visible;} @media only screen and (max-width:1247px) { body.on {height:100%;overflow:hidden;} #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} .w_custom {padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1023px) { #contents_wrap #side_box {padding:4.8% 0 0 0;} #contents_wrap #contents_box {padding:4.8% 0 6.4% 0;} } @media only screen and (max-width:860px) { #contents_wrap #side_box {padding:4.2% 0 0 0;} #contents_wrap #contents_box {padding:4.2% 0 6.4% 0;} } @media only screen and (max-width:767px) { /*.w_custom {padding-left:4% !important;padding-right:4% !important;}*/ #contents_wrap #side_box {display:none;} } @media only screen and (max-width:640px) { #contents_wrap #contents_box {padding:4.2% 0 10.4% 0;} } @media only screen and (max-width:479px) { #contents_wrap #contents_box {padding:4.2% 0 12% 0;} } @media only screen and (max-width:500px) { } @media only screen and (max-width:375px) { } @media only screen and (max-width:320px) { .w_custom {padding-left:12px !important;padding-right:12px !important;} } /*─────────────────────────────────────────────────────────── 메인 상품 진열 ───────────────────────────────────────────────────────────*/ /* pc */ /* 메인상품진열 - 공통 */ .main .list_cont {} .main .list_cont ul {font-size:0;width:calc(100% + 15px);margin-left:-15px;} .main .list_cont ul li {display:inline-block;margin-left:15px;vertical-align:top;} .main .list_cont ul li a {display:block;height:100%;} .main .list_cont ul li .thumb {} .main .list_cont ul li .thumb img {max-width:100%;width:100%;} .main .list_cont ul li .info {} .main .list_cont ul li .info p {color:#333;line-height:1.2;} .main .list_cont ul li .info .name {font-size:14px;} /* 메인상품진열 - 갤러리형 */ .main .list_Galleryform {} .main .list_Galleryform ul {text-align:left;} .main .list_Galleryform ul li {width:calc(25% - 15px);} .main .list_Galleryform ul li:nth-of-type(n+5) {margin-top:40px;} .main .list_Galleryform ul li .thumb {} .main .list_Galleryform ul li .thumb img {} .main .list_Galleryform ul li .info {margin-top:10px;} .main .list_Galleryform ul li .info p {} .main .list_Galleryform ul li .info .name {} /* 메인상품진열 - 리스트형 */ .main .list_Listform {} .main .list_Listform ul {} .main .list_Listform ul li {width:calc(50% - 15px);} .main .list_Listform ul li a {width:100%;display:table;} .main .list_Listform ul li:nth-of-type(n+3) {margin-top:40px;} .main .list_Listform ul li .thumb, .main .list_Listform ul li .info {display:table-cell;vertical-align:middle;width:50%;box-sizing:border-box;} .main .list_Listform ul li .thumb {} .main .list_Listform ul li .thumb img {} .main .list_Listform ul li .info {border:1px solid #ddd;padding:0 15px;} .main .list_Listform ul li .info p {} .main .list_Listform ul li .info .name {} @media only screen and (max-width:860px) { /* 메인상품진열 - 갤러리형 */ .main .list_Galleryform ul li {width:calc(50% - 15px);} .main .list_Galleryform ul li:nth-of-type(n+3) {margin-top:40px;} /* 메인상품진열 - 리스트형 */ .main .list_Listform ul li {width:calc(100% - 15px);} .main .list_Listform ul li:nth-of-type(n+2) {margin-top:40px;} } /*─────────────────────────────────────────────────────────── sub custom ───────────────────────────────────────────────────────────*/ /*** company/history (연혁) ***/ /* 연도 */ .sub_history.history1 .history_box .his_year .year strong {background:#4aabe6;} /* 원 */.sub_history.history1 .history_box .his_year .year::before {background-color:#4aabe6;} /* 삼각형 */.sub_history.history1 .history_box .his_year .year strong::after {border-bottom:12px solid #4aabe6;border-color:#4aabe6 !important;} /*** company/history2 (연혁2) ***/ /* 연도 */ .sub_history.history2 .history_box .his_year .year strong {color:#4aabe6;} .sub_history.history2 .history_box .his_year .year strong::before {background:#4aabe6;} .sub_history.history2 .history_box .his_year .year strong::after {border-color:#4aabe6;} /*** company/history3 (연혁3) ***/ /* 연도 */ .sub_history.history3 .history_box table.history span {color:#49abe6;} /*** company/work (조직도1번) ***/ .sub_chart.chart1 .chart .chart_box h3 + h3 {background:#ffa531;} /*** company/work (조직도2번) ***/ /* :before 요소는 라인, :after 요소는 원형 */ .sub_chart.chart2 .chart h3 {box-shadow:0 0 0 20px #f2fafd;border:2px #0095da solid;} .sub_chart.chart2 .chart h3:before{border-color:#0095da;} .sub_chart.chart2 .chart h4{border-color:#0095da;0 0 0 8px #f2fafd;} .sub_chart.chart2 .chart h3:after, .sub_chart.chart2 .chart h4:after, .sub_chart.chart2 .chart li.chart_side li h5:after{border-color:#0095da;} @media only screen and (max-width:479px) { /* 삼각형 */.sub_history.history1 .history_box .his_year .year strong::after {border-bottom:8px solid #4aabe6;} } /*─────────────────────────────────────────────────────────── HEADER | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ #wrap #header {width:100%;padding:33px 0;background-color: rgba(255, 255, 255, 0);transition:background 0.2s ease 0s;box-sizing:border-box;position:fixed;width:100%;left:0;top:0;z-index:10;} #wrap #header.on, #wrap #header.fix {background-color: rgba(255, 255, 255, 0.9);} #wrap #header:before {height:1px;background:#ddd;opacity:0;width:100%;position:absolute;left:0;bottom:0;display:inline-block;content:"";} #wrap #header.on:before, #wrap #header.fix:before {opacity:1;transition:0.2s;} #wrap #header.fix {padding:19px 0;} #header .hd_wrap {position:relative;text-align:center;z-index: 1;height:100%;width:calc(100% - 160px);margin:0 auto;vertical-align:top;} #header .hd_wrap .logo {float:left;padding-top:2px;transition:0.2s;position: relative;z-index:2;} #header .hd_wrap .logo a {display:block;background:url('../images/skin/logo.png') no-repeat 0 0;font-size:0;width:151px;height:29px;transition:all 0.3s;background-size:auto 100%;} #header.on .hd_wrap .logo a, #header.fix .hd_wrap .logo a {background-image:url('../images/skin/logo_on.png');} #header .hd_wrap .hd_lnb {transform:translateX(154px);display:inline-block;margin:0 auto;vertical-align:top;z-index:1;} #header .hd_wrap .hd_lnb ul#lnb_nav {text-align:right;} #header .hd_wrap .hd_lnb ul#lnb_nav li {padding:0 28px;margin:0;line-height:33px;font-size:16px;font-weight:500;letter-spacing:1px;color:#fff;vertical-align:top;box-sizing:border-box;display:inline-block;transition:all 0.3s;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;position:relative;z-index:1;} #header.fix .hd_wrap .hd_lnb ul#lnb_nav li, #header.on .hd_wrap .hd_lnb ul#lnb_nav li {color:#333;} #header .hd_wrap .hd_lnb ul#lnb_nav li + li {} #header .hd_wrap .hd_lnb ul#lnb_nav li > a {text-transform:uppercase;padding:0 7px;line-height:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;box-sizing:border-box;display:inline-block;vertical-align:top;margin:0;position:relative;z-index:1;} #header .hd_wrap .hd_lnb ul#lnb_nav li > a:before {left:50%;bottom:0;height:1px;transform:translateX(-50%);background:#fff;width:0;margin:0;padding:0;display:inline-block;content:"";position:absolute;transition:all 0.3s;} #header .hd_wrap .hd_lnb ul#lnb_nav li:hover > a:before {width:100%;} #header.fix .hd_wrap .hd_lnb ul#lnb_nav li:hover, #header.on .hd_wrap .hd_lnb ul#lnb_nav li:hover {color:#0095da;} #header.fix .hd_wrap .hd_lnb ul#lnb_nav li > a:before, #header.on .hd_wrap .hd_lnb ul#lnb_nav li > a:before {background:#0095da;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {position:absolute;left:50%;top:100%;min-width:100%;width: calc(100% + 40px);transform:translateX(-50%);display:none;z-index:2;box-sizing:border-box;padding:32px 0 0;text-align:center;} #header .hd_wrap .hd_lnb ul#lnb_nav li:first-child .lnb_layer {width:186px;} #header .hd_wrap .hd_lnb ul#lnb_nav li:nth-of-type(3) .lnb_layer {width:220px;} #header .hd_wrap .hd_lnb ul#lnb_nav li:hover .lnb_layer {display:inline-block;} #header.fix .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {padding-top:19px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul {background: rgba(255, 255, 255, 0);height:0;overflow:hidden;}/*border-top:1px #fff solid;*/ #header .hd_wrap .hd_lnb ul#lnb_nav li:hover .lnb_layer ul {background: rgba(255, 255, 255, 0.9);height:auto;overflow:inherit;padding-top:10px;padding-bottom:10px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li {line-height:20px;padding:10px 20px;font-size:14px;color:#888;font-weight:400;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;box-sizing:border-box;display:block;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li + li {} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li a {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:inherit;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li:hover {color:#0095da;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li:hover a {} #header .hd_lang {text-align:left;float:right;padding:0;position: relative;z-index:10;} #header .hd_lang dl.toggle_box {border-color: rgba(204, 204, 204, 1);width:82px;height:33px;border-radius:33px;border-width:1px;border-style:solid;text-align:left;box-sizing:border-box;transition:all 0.3s;display:inline-block;position:relative;z-index:1;} #header.fix .hd_lang dl.toggle_box, #header.on .hd_lang dl.toggle_box {border-color: rgba(0, 0, 0, 1);} #header .hd_lang dt, #header .hd_lang dd a {font-size:12px;line-height:19px;font-weight:400;text-transform:uppercase;color:#eee;font-family:'Montserrat','Nanum Gothic',Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif;box-sizing:border-box;} #header.fix .hd_lang dt, #header.fix .hd_lang dd a, #header.on .hd_lang dt, #header.on .hd_lang dd a {color:#333;} #header .hd_lang dt {height:31px;line-height:19px;padding:6px 33px 6px 11px;position:relative;z-index:1;cursor:pointer;} #header .hd_lang .toggle_box dt:before {width:8px;height:8px;border-width:1px 1px 0 0;border-color:#ccc;border-style:solid;position:absolute;display:inline-block;content:"";transition:all 0.3s;right:11px;top:50%;transform:translateY(-90%) rotate(135deg)} #header.fix .hd_lang .toggle_box dt:before, #header.on .hd_lang .toggle_box dt:before {border-color:#000;} #header.fix .hd_lang .toggle_box.on dt:before, #header.on .hd_lang .toggle_box.on dt:before {transform:translateY(-25%) rotate(315deg);} #header .hd_lang dd {top:100%;width: calc(100% + 2px);left:0;margin-left:-1px;border-radius:18px;margin-top:0px;border-color: rgba(0, 0, 0, 0.6);border-width:1px;border-style:solid;background: rgba(255, 255, 255, 0.9);box-sizing:border-box;display:block;overflow:hidden;height:0;position:absolute;opacity:0;transition:opacity 0.3s;} #header.fix .hd_lang .toggle_box.on dd, #header.on .hd_lang .toggle_box.on dd {height:auto;opacity:1;transition:opacity 0.3s;} #header .hd_lang dd ul {padding:5px 0;} #header .hd_lang dd li {line-height:20px;padding:6px 17px;width:100%;transition:all 0.3s;white-space:normal;word-break:keep-all;word-wrap:break-word;} #header .hd_lang dd li:hover {} #header .hd_lang dd li + li {} #header .hd_lang dd li a {font-size:12px;transition:all 0.3s;position:relative;z-index:1;font-weight:400;color:#333;} #header .hd_lang dd li:hover a {color:#0095da;} #header .hd_lang ul.lnb_mini {padding:0 17px 0 0;text-align:right;display:inline-block;vertical-align:top;} #header .hd_lang ul.lnb_mini li {padding:0 10px 4px;line-height:29px;font-size:14px;font-weight:400;color:#fff;position:relative;z-index:1;vertical-align:top;box-sizing:border-box;display:inline-block;transition:all 0.3s;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #header.fix .hd_lang ul.lnb_mini li, #header.on .hd_lang ul.lnb_mini li {color:#333;} #header .hd_lang ul.lnb_mini li a, #header .hd_lang ul.lnb_mini li span {opacity:0.7;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:inherit;position:relative;z-index:1;} #header .hd_lang ul.lnb_mini li a:before, #header .hd_lang ul.lnb_mini li span:before {left:50%;bottom:0;width:0;height:1px;background:#0095da;opacity:0;display:inline-block;content:"";position:absolute;} #header .hd_lang ul.lnb_mini li:hover {color:#0095da;} #header .hd_lang ul.lnb_mini li:hover a:before, #header .hd_lang ul.lnb_mini li:hover span:before {width:100%;} #header .hd_lang ul.lnb_mini li + li {} #header .hd_lang ul.lnb_mini li .mini_layer {position:absolute;left:50%;top:100%;min-width:100%;width: calc(100% + 40px);transform:translateX(-50%);display:none;z-index:2;box-sizing:border-box;padding:33px 0 0;text-align:center;} #header .hd_lang ul.lnb_mini li:hover .mini_layer {display:inline-block;} #header .hd_lang ul.lnb_mini li:nth-of-type(2) .mini_layer {min-width:220px;} #header.fix .hd_lang ul.lnb_mini li .mini_layer {padding-top:22px;} #header .hd_lang ul.lnb_mini li .mini_layer ul {background: rgba(255, 255, 255, 0);height:0;overflow:hidden;}/*border-top:1px #fff solid;*/ #header .hd_lang ul.lnb_mini li:hover .mini_layer ul {background: rgba(255, 255, 255, 0.9);height:auto;overflow:inherit;padding-top:10px;padding-bottom:10px;} #header .hd_lang ul.lnb_mini li .mini_layer ul li {line-height:20px;padding:10px 20px;font-size:14px;color:#888;font-weight:400;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;box-sizing:border-box;} #header .hd_lang ul.lnb_mini li .mini_layer ul li + li {} #header .hd_lang ul.lnb_mini li .mini_layer ul li a {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:inherit;} #header .hd_lang ul.lnb_mini li .mini_layer ul li:hover {color:#0095da;} #header .hd_lang ul.lnb_mini li .mini_layer ul li:hover a {} #header .hd_wrap .hd_menu {margin-right:-10px;width:40px;height:34px;box-sizing:border-box;display:none;vertical-align:middle;float:right;} #header .hd_wrap .hd_menu .menu-trigger {position:relative;display:block;padding:10px;width:100%;height:100%;box-sizing:border-box;} #header .hd_wrap .hd_menu .menu-trigger span {transition:0.3s;position:absolute;width:20px;height:2px;background-color: rgba(255, 255, 255, 1);left:50%;margin-left:-10px;border:0;outline:0;} #header.on .hd_wrap .hd_menu .menu-trigger span, #header.fix .hd_wrap .hd_menu .menu-trigger span {background-color: rgba(51, 51, 51, 1);} #header .hd_wrap .hd_menu .menu-trigger span:nth-of-type(1) {top:10px;} #header .hd_wrap .menu-trigger span:nth-of-type(2) {top:50%;margin-top: -1px;} #header .hd_wrap .menu-trigger span:nth-of-type(3) {bottom:10px;} #aside {top:0px;left: -100%;width:73.3%;max-width:550px;transition:0.8s;height:100%;box-sizing:border-box;display:block;position:fixed;background: rgba(255, 255, 255, 1);z-index: 500;} #aside.on {left:0%;} #aside .aside_box.for_m {display:none;} #aside .btn_aside_close {position:fixed;left:560px;top:33px;width:40px;height:0;overflow:hidden;opacity:0;z-index:5;transition:all 0.3s;} #header.fix + #aside .btn_aside_close {top:19px;} #aside.on .btn_aside_close {height:34px;opacity:1;} #aside .btn_aside_close .menu-trigger2.active-1 {width:100%;height: 100%;padding:10px;} #aside .btn_aside_close .menu-trigger2.active-1 span {transition:0.3s;position:absolute;width:26px;height:2px;background-color: rgba(255, 255, 255, 1);opacity:1;left:50%;top:17px;margin-left:-13px;border:0;outline:0;} #aside .btn_aside_close:hover .menu-trigger2.active-1 span {opacity:0.8;} #aside .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(1) {-webkit-transform: translateY (0) rotate (-45deg);transform: translateY(0) rotate(-45deg);} #aside .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(2) {opacity:0;} #aside .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(3) {-webkit-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);} #aside .aside_box {width:100%;height:100%;margin:0;padding:0;overflow-y:auto;position:relative;z-index:1;box-sizing:border-box;display: block;text-align:Center;} #aside .aside_top {padding:35px 15px 36px;border-bottom:1px #eee solid;box-sizing:border-box;} #header.fix + #aside .aside_top {padding:21px 15px;} #aside .aside_top:after {clear:both;content:"";display:block;} #aside .aside_box .aside_logo {text-align:left;padding:0;margin:0;float:left;} #aside .aside_box .aside_logo a {width:151px;height:29px;display:block;background:url('../images/skin/logo_on.png') no-repeat 0 0;font-size:0;transition:all 0.3s;background-size:auto 100%;} #aside .lang_group {vertical-align:top;float:right;} #aside .lang_group li {line-height:20px;font-size:14px;font-weight:400;color:#333;font-family:'Montserrat','Nanum Barun Gothic','Nanum Gothic',Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif;display:inline-block;vertical-align:top;margin:0;padding:0;text-transform:uppercase;} #aside .lang_group li + li {margin-left:12px;} #aside .lang_group li a {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;} #aside .lang_group li.on {color:#0095da;} #aside ul.slidemenu {padding:17px 0 0;} #aside ul.slidemenu .dep1_li {text-align:left;display: block;vertical-align:top;} #aside ul.slidemenu .dep1_li + .dep1_li {margin-top: 0;margin-left: 0;} #aside ul.slidemenu .dep1_li .dep1_a {padding:11px 15px;line-height:22px;font-size:17px;width: calc(100% - 50px);color:#333;transition:0.2s;box-sizing:border-box;display:inline-block;text-transform:uppercase;font-weight:500;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;vertical-align:top;} #aside ul.slidemenu .dep1_li span.dep_arrow {width:50px;height:44px;margin:0;padding:0;cursor:pointer;display:inline-block;vertical-align:top;float:right;position:relative;z-index:1;} #aside ul.slidemenu .dep1_li span.dep_arrow:before {width:8px;height:8px;transform:translate(-50%, -50%) rotate(135deg);border-width:1px 1px 0 0;border-color:#888;border-style:solid;position:absolute;display:inline-block;content:"";transition:all 0.3s;left:50%;top:50%;transition:all 0.3s;} #aside ul.slidemenu .dep1_li .dep1_a.now span, #aside ul.slidemenu .dep1_li .dep1_a:hover span {color:#0095da;} #aside ul.slidemenu .dep1_li.on span.dep_arrow:before {border-color:#0095da;transform:translate(-50%, -50%) rotate(315deg);} #aside ul.slidemenu .dep1_li .dep2 {height:0;overflow:hidden;padding:0;background:#f5f5f5;margin:0;border:0;transition:all 0.3s;} #aside ul.slidemenu .dep1_li.on .dep2 {height:auto;overflow:inherit;} #aside ul.slidemenu .dep1_li .dep2 li {padding:10px 30px;font-size:13px;line-height:20px;font-weight:400;color:#888;box-sizing:border-box;position:relative;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #aside ul.slidemenu .dep1_li .dep2 li:first-child {padding-top:25px;} #aside ul.slidemenu .dep1_li .dep2 li:last-child {padding-bottom:25px;} #aside ul.slidemenu .dep1_li .dep2 li + li {} #aside ul.slidemenu .dep1_li .dep2 li a {font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;font-family:inherit;display:block;position:relative;} #aside .lnb_mini {margin:20px auto;padding-top:11px;border-top:1px #ddd solid;width: calc(100% - 30px);display:inline-block;vertical-align:top;text-align:left;} #aside .lnb_mini > li {line-height:20px;padding:0;font-size:15px;font-weight:500;color:#333;display:block;width:100%;vertical-align:top;margin:0;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #aside .lnb_mini > li > a, #aside .lnb_mini > li > span {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;vertical-align:top;display:inline-block;margin:9px 0;} #aside .lnb_mini li span.dep_arrow {width:50px;height:20px;margin:9px 0;margin-right:-15px;padding:0;cursor:pointer;display:inline-block;vertical-align:top;float:right;position:relative;z-index:1;} #aside .lnb_mini li span.dep_arrow:before {width:8px;height:8px;transform:translate(-50%, -50%) rotate(135deg);border-width:1px 1px 0 0;border-color:#888;border-style:solid;position:absolute;display:inline-block;content:"";transition:all 0.3s;left:50%;top:50%;transition:all 0.3s;} #aside .lnb_mini li.on span.dep_arrow:before {border-color:#0095da;transform:translate(-50%, -50%) rotate(315deg);} #aside .lnb_mini li .dep2 {height:0;overflow:hidden;padding:0;background:#f5f5f5;margin:0;border:0;transition:all 0.3s;} #aside .lnb_mini li.on .dep2 {height:auto;overflow:inherit;} #aside .lnb_mini li .dep2 li {padding:10px 20px;font-size:13px;line-height:20px;font-weight:400;color:#888;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;box-sizing:border-box;} #aside .lnb_mini li .dep2 li:first-child {padding-top:20px;} #aside .lnb_mini li .dep2 li:last-child {padding-bottom:20px;} #aside .lnb_mini li .dep2 li a {} .aside_bg {left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,0.7);opacity:0;transition:0.8s;z-index: 15;position:fixed;display: none;} .aside_bg.on {opacity:1;display: block;} @media only screen and (max-width:1800px) { #header .hd_wrap {width:calc(100% - 130px);} #header .hd_wrap .hd_lnb {transform:translateX(135px);} #header .hd_wrap .hd_lnb ul#lnb_nav li {padding:0 22px;} #header .hd_wrap .hd_lnb ul#lnb_nav li > a {padding:0 6px;} #header .hd_lang {} #header .hd_lang ul.lnb_mini {padding-right:16px;} #header .hd_lang ul.lnb_mini li {padding:0 8px;} } @media only screen and (max-width:1700px) { #header .hd_wrap {width:calc(100% - 100px);} #header .hd_wrap .hd_lnb {transform:translateX(123px);} #header .hd_wrap .hd_lnb ul#lnb_nav li {padding:0 18px;} #header .hd_lang {} #header .hd_lang ul.lnb_mini {padding-right:12px;} #header .hd_lang ul.lnb_mini li {padding:0 5px;} } @media only screen and (max-width:1600px) { #header .hd_wrap {width:calc(100% - 80px);} #header .hd_wrap .hd_lnb {transform:translateX(118px);} #header .hd_wrap .hd_lnb ul#lnb_nav li {padding:0 15px;font-size:15px;} #header .hd_wrap .hd_lnb ul#lnb_nav li > a {padding:0 5px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {width: calc(100% + 30px);} #header .hd_wrap .hd_lnb ul#lnb_nav li:first-child .lnb_layer {width:162px;} #header .hd_wrap .hd_lnb ul#lnb_nav li:hover .lnb_layer ul {padding-top:8px;padding-bottom:8px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li {padding:8px 15px;font-size:13px;} #header .hd_lang {} #header .hd_lang ul.lnb_mini {padding-right:10px;} #header .hd_lang ul.lnb_mini li {padding:0 4px;font-size:13px;} #header .hd_lang ul.lnb_mini li .mini_layer {width: calc(100% + 30px);} #header .hd_lang ul.lnb_mini li:hover .mini_layer ul {padding-top:8px;padding-bottom:8px;} #header .hd_lang ul.lnb_mini li .mini_layer ul li {padding:8px 15px;font-size:13px;} } @media only screen and (max-width:1500px) { #header .hd_wrap {width:calc(100% - 40px);} } @media only screen and (max-width:1400px) { #header .hd_wrap {width:calc(100% - 30px);} #header .hd_wrap .hd_lnb {transform:translateX(105px);} #header .hd_wrap .hd_lnb ul#lnb_nav li {padding:0 10px;letter-spacing:0.6px;} #header .hd_wrap .hd_lnb ul#lnb_nav li > a {padding:0 4px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {width: calc(100% + 20px);} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer ul li {line-height:18px;padding:7px 10px;} #header .hd_lang {} #header .hd_lang dl.toggle_box {width:72px;} #header .hd_lang dt {padding:6px 30px 6px 10px;} #header .hd_lang dd li {padding:6px 10px;} #header .hd_lang ul.lnb_mini {padding-right:10px;margin-top:-1px;} #header .hd_lang ul.lnb_mini li {padding:0 3px 0 4px;line-height:35px;} #header .hd_lang ul.lnb_mini li .mini_layer {width: calc(100% + 20px);} #header .hd_lang ul.lnb_mini li .mini_layer ul li {line-height:18px;padding:7px 10px;} } @media only screen and (max-width:1320px) { #header .hd_wrap .hd_lnb {transform:translateX(-45px);} #header .hd_wrap .hd_menu {display:inline-block;} #header .hd_lang {display:none;} } @media only screen and (max-width:1240px) { #wrap #header {padding:31px 0;} #header .hd_wrap .logo {padding-top:3px;} #header .hd_wrap .logo a, #aside .aside_box .aside_logo a {width:146px;height:28px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {padding-top:31px;} #aside {} #aside .btn_aside_close {top:31px;} #header.fix + #aside .btn_aside_close {top:19px;} #aside .aside_top {padding:33px 15px 34px;} } @media only screen and (max-width:1100px) { #wrap #header {padding:29px 0;} #header .hd_wrap .logo {padding-top:4px;} #header .hd_wrap .logo a, #aside .aside_box .aside_logo a {width:135px;height:26px;} #header .hd_wrap .hd_lnb {transform:translateX(-38px);} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {padding-top:29px;} #aside .btn_aside_close {top:29px;} #header.fix + #aside .btn_aside_close {top:19px;} #aside .aside_top {padding:31px 15px 32px;} #header.fix + #aside .aside_top {padding:23px 15px;} } @media only screen and (max-width:1023px) { #wrap #header {padding:27px 0;} #header .hd_wrap .logo a, #aside .aside_box .aside_logo a {width:130px;height:25px;} #header .hd_wrap .hd_lnb {transform:translateX(-35px);} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {padding-top:27px;} #aside .btn_aside_close {top:27px;} #aside .aside_top {padding:31px 15px 32px;} } @media only screen and (max-width:960px) { #wrap #header {padding:25px 0;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {padding-top:25px;} #aside .btn_aside_close {top:25px;} #aside .aside_top {padding:29px 15px 30px;} } @media only screen and (max-width:860px) { #wrap #header {padding:23px 0;} #header .hd_wrap .hd_lnb ul#lnb_nav li {padding:0 7px;} #header .hd_wrap .hd_lnb ul#lnb_nav li > a {padding:0 3px;} #header .hd_wrap .hd_lnb ul#lnb_nav li .lnb_layer {padding-top:23px;} #aside .btn_aside_close {top:23px;} #aside .aside_top {padding:27px 15px 28px;} } @media only screen and (max-width:767px) { #wrap #header {padding:21px 0;} #header .hd_wrap .hd_lnb {display:none;} #aside .btn_aside_close {top:21px;} #aside .aside_top {padding:25px 15px 26px;} } @media only screen and (max-width:750px) { #aside .btn_aside_close{left:75%;} } @media only screen and (max-width:640px) { #wrap #header, #wrap #header.fix {padding:19px 0;} #aside .btn_aside_close, #header.fix + #aside .btn_aside_close {top:19px;} #aside .aside_top, #header.fix + #aside .aside_top {padding:23px 15px 24px;} } @media only screen and (max-width:500px) { #header .hd_wrap .logo a, #aside .aside_box .aside_logo a {width:125px;height:24px;} } @media only screen and (max-width:350px) { #header .hd_wrap .logo {padding-top:5px;} #header .hd_wrap .logo a, #aside .aside_box .aside_logo a {width:115px;height:22px;} #aside {width:83%;} #aside .btn_aside_close, #header.fix + #aside .btn_aside_close {top:19px;} #aside .btn_aside_close{left:83%;} #aside .aside_top, #header.fix + #aside .aside_top {padding:24px 15px 25px;} #aside .lang_group li {font-size:13px;} #aside .lang_group li + li {margin-left:9px;} #aside ul.slidemenu .dep1_li .dep1_a {font-size:16px;} #aside ul.slidemenu .dep1_li .dep2 li {font-size:12px;} #aside .lnb_mini li {font-size:14px;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* pc */ .quick_scr_wrap {right:2.6vw;bottom:2.6vw;position:fixed;z-index:5;width:60px;} .quick_scr_wrap button {background-color:rgba(72, 79, 87, 0.8);background-repeat:no-repeat;background-size:17px auto;width:100%;height:60px;margin:0;outline:0;border:0;display:inline-block;vertical-align:top;box-sizing:border-box;text-align:center;cursor:pointer;} .quick_scr_wrap button span {font-size:13px;line-height:1;font-weight:400;color:#fff;font-family: 'Lato','Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;display:inline-block;vertical-align:top;margin:0 auto;} .quick_scr_wrap button:nth-of-type(1) {background-image:url(../images/skin/icon-quick-arrow@2x.png);background-position:50% 15px;padding-top:32px;padding-bottom:15px;} .quick_scr_wrap button:nth-of-type(1) span {} .quick_scr_wrap button:nth-of-type(2) {background-image:url(../images/skin/icon-quick-arrow-down@2x.png);background-position:50% 35px;padding-top:14px;padding-bottom:33px;margin-top:10px;} .quick_scr_wrap button:nth-of-type(2) span {} #footer {margin-top:80px;} .ft_gnb_wrap {background:#484f57;} .ft_gnb_wrap .w_custom {padding-top:25px;padding-bottom:25px;} .ft_gnb_wrap ul.fl {font-size:0;vertical-align:middle;} .ft_gnb_wrap ul.fl li {font-size:14px;font-weight:300;color:#fff;line-height:1.42em;vertical-align:middle;display:inline-block;} .ft_gnb_wrap ul.fl li + li {} .ft_gnb_wrap ul.fl li + li:before {height:10px;margin:0 20px;width:1px;vertical-align:middle;display:inline-block;background:#888;content:"";padding:0;} .ft_gnb_wrap ul.fl li a {font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit;vertical-align:inherit;} .ft_info_wrap {background:#f5f5f5;} .ft_info_wrap .w_custom {padding-top:40px;padding-bottom:58px;} .ft_info_wrap .ft_logo {width:29%;padding-top:5px;float:left;} .ft_info_wrap .ft_logo a, .ft_info_wrap .ft_logo img {vertical-align:top;font-size:0;} .ft_info_wrap .ft_logo img {width:auto;height:58px;} .ft_info_wrap .ft_info {width:71%;float:left;} .ft_info_wrap .ft_info p, .ft_info_wrap .ft_info address {color:#666;font-weight:300;} .ft_info_wrap .ft_info p {font-size:15px;line-height:1.73em;} .ft_info_wrap .ft_info p a {font-size:inherit;line-height:inherit;} .ft_info_wrap .ft_info p a.ft_contact{font-weight:700;} .ft_info_wrap .ft_info p span {width:22px;height:5px;display:inline-block;vertical-align:middle;} .ft_info_wrap .ft_info p span.m_br + br {display:none;} .ft_info_wrap .ft_info address {margin-top:28px;font-size:14px;line-height:1.4em;} @media only screen and (max-width:1800px) { .quick_scr_wrap {right:2.4vw;bottom:2.4vw;} } @media only screen and (max-width:1600px) { .quick_scr_wrap {right:2.1vw;bottom:2.1vw;} } @media only screen and (max-width:1460px) { .quick_scr_wrap {right:1.8vw;bottom:1.8vw;} } @media only screen and (max-width:1360px) { .quick_scr_wrap {right:1.4vw;bottom:1.4vw;width:50px;} .quick_scr_wrap button {background-size:14px auto;height:50px;} .quick_scr_wrap button:nth-of-type(1) {background-position:50% 12px;padding-top:25px;padding-bottom:12px;} .quick_scr_wrap button:nth-of-type(2) {background-position:50% 32px;padding-top:12px;padding-bottom:25px;} } @media only screen and (max-width:1140px) { .quick_scr_wrap {right:15px;bottom:15px;} .quick_scr_wrap button span {font-size:12px;} .quick_scr_wrap button:nth-of-type(2) {margin-top:5px;} .ft_gnb_wrap .w_custom {padding-top:20px;padding-bottom:20px;} .ft_info_wrap .w_custom {padding-bottom:52px;} .ft_info_wrap .ft_logo {width:32%;} .ft_info_wrap .ft_logo img {height:52px;} .ft_info_wrap .ft_info {width:68%;} .ft_info_wrap .ft_info p {font-size:14px;line-height:1.64em;} .ft_info_wrap .ft_info address {font-size:13px;} } @media only screen and (max-width:960px) { .ft_gnb_wrap .w_custom {padding-top:18px;padding-bottom:18px;} .ft_gnb_wrap ul.fl li {font-size:13px;} .ft_gnb_wrap ul.fl li + li:before {margin:0 16px;} .ft_info_wrap .w_custom {padding-bottom:48px;} .ft_info_wrap .ft_logo img {height:44px;} .ft_info_wrap .ft_info p {font-size:13px;} .ft_info_wrap .ft_info p span {width:18px;} .ft_info_wrap .ft_info address {font-size:12px;} } @media only screen and (max-width:767px) { .ft_gnb_wrap .w_custom {padding-top:16px;padding-bottom:16px;} .ft_gnb_wrap ul.fl li + li:before {margin:0 14px;} .ft_info_wrap .w_custom {padding-bottom:44px;} .ft_info_wrap .ft_logo {width:38%;} .ft_info_wrap .ft_logo img {height:40px;} .ft_info_wrap .ft_info {width:62%;} .ft_info_wrap .ft_info p span.m_br + br {display:inline-block;} } @media only screen and (max-width:640px) { .ft_gnb_wrap .w_custom {padding-top:16px;padding-bottom:16px;} .ft_gnb_wrap ul.fl li + li:before {height:8px;margin:0 12px;} .ft_info_wrap .w_custom {padding-bottom:40px;} .ft_info_wrap .ft_logo {width:100%;padding-top:0;} .ft_info_wrap .ft_info {width:100%;padding-top:26px;} .ft_info_wrap .ft_info p {line-height:1.54em;} .ft_info_wrap .ft_info p span {width:16px;} } @media only screen and (max-width:500px) { .ft_info_wrap .ft_logo img {height:37px;} .ft_info_wrap .ft_info address {margin-top:34px;font-size:11px;} } @media only screen and (max-width:479px) { .quick_scr_wrap {right:15px;bottom:15px;width:42px;} .quick_scr_wrap button {background-size:17px auto;height:42px;} .quick_scr_wrap button span {font-size:0;} .quick_scr_wrap button:nth-of-type(1), .quick_scr_wrap button:nth-of-type(2) {background-position:50% 50%;padding-top:0;padding-bottom:0;} } @media only screen and (max-width:375px) { .quick_scr_wrap {right:15px;bottom:15px;width:38px;} .quick_scr_wrap button {background-size:16px auto;height:38px;} .quick_scr_wrap button:nth-of-type(2) {margin-top:5px;} } @media only screen and (max-width:360px) { .quick_scr_wrap {right:10px;width:34px;} .quick_scr_wrap button {background-size:15px auto;height:34px;} .ft_gnb_wrap ul.fl li + li:before {margin:0 9px;} .ft_info_wrap .ft_logo img {height:34px;} .ft_info_wrap .ft_info {padding-top:26px;} .ft_info_wrap .ft_info p span {width:14px;} } @media screen and (max-width:320px) { } /*─────────────────────────────────────────────────────────── SIDE_BOX | outline/left_bbs.html｜outline/left_goods.html｜outline/left_member.html｜outline/left_service.html ───────────────────────────────────────────────────────────*/ /* pc */ #side_box {padding-bottom:1.8%;} #side_box .sub_menu {width:100%;padding:0;margin:0;z-index:2;text-align:center;vertical-align:top;} #side_box .sub_menu dl {position:relative;display:inline-block;margin:0 auto;z-index:3;font-size:0;text-align:center;vertical-align:top;padding:0;} #side_box .sub_menu dt, #side_box .sub_menu dd {display:inline-block;margin:0;padding:0;} #side_box .sub_menu dt {display:none;} #side_box .sub_menu dd {line-height:31px;height:32px;padding:0 12px;border-bottom:1px #ccc solid;position:relative;z-index:1;box-sizing:border-box;vertical-align:top;} #side_box .sub_menu dd + dd {} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:31px;line-height:31px;font-size:15px;font-weight:600;padding:0 2px;color:#888;display:inline-block;box-sizing:border-box;vertical-align:top;} #side_box .sub_menu dd:hover a, #side_box .sub_menu dd.on a, #side_box .sub_menu dd strong {border-color:#333;color:#333;position:relative;} #side_box .sub_menu dd:hover a:before, #side_box .sub_menu dd.on a:before, #side_box .sub_menu dd strong:before {bottom:-1px;width:100%;height:2px;background:#333;left:50%;transform:translateX(-50%);position:absolute;content:"";display:block;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1023px) { } @media only screen and (max-width:860px) { #side_box .sub_menu dd {line-height:29px;height:30px;padding:0 8px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:29px;line-height:29px;font-size:14px;padding:0 2px;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #side_box .sub_menu dd {line-height:27px;height:28px;padding:0 8px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:27px;line-height:27px;font-size:14px;padding:0 2px;} } @media only screen and (max-width:479px) { #side_box {display:none;} } /*─────────────────────────────────────────────────────────── MAIN | index.html ───────────────────────────────────────────────────────────*/ /* pc */ .main_index #container {padding-top:0 !important;} .main {width:100%;overflow:hidden;} /* .w_custom {max-width:1290px;} */ .main .w_set {width:100%;box-sizing:border-box;max-width:1290px;padding:0;margin:0 auto;} /* visual */ .main_visual {position:relative;width:100%;margin:0;overflow:hidden;z-index:1;} .main_visual .slick-slide {overflow:hidden;position:relative;text-align:center;padding:940px 0 0;height:0;} .main_visual .slick-slide a {display:inline-block;height:100%;width:100%;margin:0 auto;text-align:Center;position:absolute;left: 0;top:0;outline:0;z-index:5;} .main_visual .slick-slide .slide_bg {transition:transform 2s ease-in-out, opacity 2s ease-in-out;transform:scale(1.2) rotate(0.003deg);display:inline-block;height:100%;width:100%;margin:0 auto;text-align:Center;position:absolute;left: 0;top:0;outline:0;background-position: center;background-size:cover !important;z-index:1;} .main_visual .slick-slide.slick-current .slide_bg {transform:scale(1) rotate(0.003deg);} .main_visual .slick-slide img {display:inline-block;height:auto;width:100%;max-width:1920px;} .main_visual .txt_box {width: 100%;text-align:center;transform:translate(-50%, -50%);position:absolute;left:50%;top:50%;font-size: 0;z-index:4;box-sizing:border-box;} .main_visual .txt_box h3, .main_visual .txt_box p {display:block;text-align:center;color:#fff;margin:0;padding:0;} .main_visual .txt_box h3 {margin-bottom:24px;font-size:70px;font-weight:400;line-height:1.25em;font-family: 'Crimson Text',serif;} .main_visual .txt_box p {font-size:18px;font-weight:500;line-height:1.66em;font-family: 'Lato','Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;white-space:normal;word-break:keep-all;word-wrap:break-word;} .main_visual h3.activate, .main_visual p.activate {animation: visualani 0.7s cubic-bezier(0,.72,.44,.99);animation-fill-mode:forwards;animation-delay: 0.5s;} .main_visual p.activate {animation-delay: 1.2s;} .main_visual .m_br, .main_visual .m_br + br {display:none;} .main_visual .animated {transform: translate(0,100px);-webkit-transform: translate(0,100px);-moz-transform: translate(0,100px);-ms-transform: translate(0,100px);-o-transform: translate(0,100px);} @keyframes visualani{ 0%{opacity:0;} 100%{opacity:1;transform: translate(0,0);-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);} } .main_visual .visual_btn_wrap {position:absolute;left:50%;bottom:90px;overflow:hidden;width:auto;max-width:315px;text-align: center;vertical-align:top;font-size:0;margin:0 auto;transform:translateX(-50%);} .main_visual .visual_btn_wrap .control_btn {width:246px;display:inline-block;vertical-align:top;height:44px;border-radius:44px;background: rgba(0, 0, 0, 0.5);box-sizing:border-box;line-height:34px;padding:5px 12px;font-size:0;} .main_visual .visual_btn_wrap .control_btn + .control_btn {margin-left:25px;width:44px;padding:5px;} .main_visual .visual_btn_wrap .control_btn #pause-btn {font-size:0;display:inline-block;width:34px;height:34px;border:0;outline:0;background:url(../images/skin/icon_visual_pause.png) no-repeat 50% 50%;background-size:auto 12px;margin:0 auto;} .main_visual .visual_btn_wrap .control_btn .slide_count {text-align:center;display:inline-block;vertical-align:top;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {line-height:34px;height:34px;padding:0 10px;font-size:16px;font-weight:300;color:#fff;opacity:1;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;display:inline-block;vertical-align:top;margin:0;} .main_visual .visual_btn_wrap .control_btn .slide_count > span.total {opacity:0.6;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap {width:80px;display:inline-block;vertical-align:top;transition:all 0.3s;z-index:5;margin:16px auto;padding:0;text-align:center;font-size: 0;height:2px;line-height:2px;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap .slider-progress {width:100%;background:rgba(255,255,255,0.6);display: inline-block;vertical-align: middle;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap .slider-progress .progress {height:2px;background:#fff;width: 0;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap .slider-progress .progress.active {width:100%;} .main_visual .visual_btn_wrap .control_btn .slick-arrow {width:27px;height:34px;font-size:0;display:inline-block;vertical-align:top;float:right;} .main_visual .visual_btn_wrap .control_btn .slick-prev {background: url('../images/skin/icon_visual_prev.png') no-repeat 50% 50%;background-size:auto 12px;margin-left:0px;} .main_visual .visual_btn_wrap .control_btn .slick-next {background: url('../images/skin/icon_visual_next.png') no-repeat 50% 50%;background-size:auto 12px;} /* 공통 */ .main_title {font-size:40px;margin:0 auto 34px;font-weight:700;text-align:center;font-family: 'Montserrat','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;color:#333;} .main_pr_wrap .main_title {} .main_about_wrap .main_title {margin-bottom:110px;color:#fff;} /* PRODUCT */ .main_pr_wrap {padding-top:314px;padding-bottom:318px;width:100%;margin:0 auto;} .main_pr_wrap .main_pr {width:100%;max-width:1790px;margin:0 auto;padding:0 15px;box-sizing:border-box;} .main_pr ul {font-size:0;vertical-align:top;display:flex;direction:ltr;} .main_pr ul li.pr_cut {flex:1;will-change:flex;margin:0;padding:0;height:0;padding-top:640px;position:relative;z-index:1;vertical-align:top;display:inline-block;transition:flex 1s cubic-bezier(.29,0,.2,1);overflow:hidden;} .main_pr ul li.pr_cut + li {margin-left:10px;} .main_pr ul li.pr_cut .cut_link {z-index:10;position:absolute;left:0;top:0;width:100%;height:100%;} .main_pr ul li.pr_cut .cut_bg {background-repeat:no-repeat !important;position:absolute;left:0;width:100%;height:100%;top:0;z-index:1;} .main_pr ul li.pr_cut .cut_bg:before {opacity:1;position:absolute;left:0;top:0;width:100%;height:100%;background: rgb(0,0,0);background: linear-gradient(0deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.3) 100%);display:inline-block;content:"";z-index:2;transition:all 0.5s cubic-bezier(.19,0,.2,1);} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-image:url(../images/skin/bnr_pr_slide01.jpg);background-position:50% 50%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-image:url(../images/skin/bnr_pr_slide02_new.jpg);background-position:50% 50%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-image:url(../images/skin/bnr_pr_slide03.jpg);background-position:50% 50%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-image:url(../images/skin/bnr_pr_slide04.jpg);background-position:50% 50%;background-size:cover;} /* .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-image:url(../images/skin/bnr_pr_slide05.jpg);background-position:50% 50%;background-size:cover;} */ .main_pr ul li.pr_cut.pr_cate5 .cut_bg {background-image:url(../images/skin/bnr_pr_slide06.jpg);background-position:50% 50%;background-size:cover;} .main_pr ul li.pr_cut .cut_preview, .main_pr ul li.pr_cut .cut_txt h4, .main_pr ul li.pr_cut .cut_txt p {line-height:1.4em;text-align:left;margin:0;padding:0;color:#fff;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .main_pr ul li.pr_cut .cut_preview {font-size:26px;width:280px;height:1.6em;transform: rotate(-90deg) translate(-55%, -210%);opacity:1;white-space:nowrap;font-weight:500;left:0;text-shadow:0 0 6px rgba(0, 0, 0, 0.25);top:0;text-align:right;position:absolute;z-index:3;transition:all 1s cubic-bezier(.29,0,.2,1);} .main_pr ul li.pr_cut .cut_txt {padding:60px 45px 40px;width:800px;text-align:left;min-width:100%;left:0;bottom:0;opacity:0;box-sizing:border-box;position:absolute;z-index:5;transition:all 0.5s cubic-bezier(.19,0,.2,1);} .main_pr ul li.pr_cut .cut_txt h4, .main_pr ul li.pr_cut .cut_txt p {text-shadow:0 0 6px rgba(0, 0, 0, 0.25);} .main_pr ul li.pr_cut .cut_txt h4 {font-size:70px;font-weight:700;letter-spacing:-2px;} .main_pr ul li.pr_cut .cut_txt h4 br {display:none;} .main_pr ul li.pr_cut .cut_txt p {font-size:16px;margin-top:7px;font-weight:400;font-family: 'Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .main_pr ul li.pr_cut:nth-of-type(1) .cut_txt p .pc_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(1) .cut_txt p .m_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p .pc_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p .m_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p .pc_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p .m_br + br {display:none;} .main_pr ul li.pr_cut.open {flex:4.6;} .main_pr ul li.pr_cut.open .cut_link {} .main_pr ul li.pr_cut.open .cut_bg {} .main_pr ul li.pr_cut.open .cut_bg:before {background: rgb(0,0,0);background: linear-gradient(0deg, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0) 100%);} .main_pr ul li.pr_cut.open .cut_preview {opacity:0;} .main_pr ul li.pr_cut.open .cut_txt {opacity:1;} .main_pr ul li.pr_cut.open .cut_txt h4 {} .main_pr ul li.pr_cut.open .cut_txt p {} /* ABOUT */ .main_about_wrap {padding:144px 0 97px;background:url(../images/skin/bg_about_main.jpg) no-repeat 50% 50%;background-size:cover;width:100%;margin:0;} .main_about_wrap .main_about {} .main_about ul {width:100%;max-width:1320px;padding:0 15px;margin:0 auto;text-align:center;font-size:0;vertical-align:top;box-sizing:border-box;} .main_about li {width: calc(16.65% - 80px);margin:0;padding:0;display:inline-block;vertical-align:top;} .main_about li + li {margin-left:96px;} .main_about li.about2.aos-animate {transition-delay: .2s;} .main_about li.about3.aos-animate {transition-delay: .3s;} .main_about li.about4.aos-animate {transition-delay: .4s;} .main_about li.about5.aos-animate {transition-delay: .5s;} .main_about li.about6.aos-animate {transition-delay: .6s;} .main_about li > span {height:88px;display:inline-block;width:100%;margin:0;padding:0;background-repeat:no-repeat !important;background-position:50% 50% !important;background-size:auto 100% !important;} .main_about li.about1 > span {background-image:url(../images/skin/kcon_about01.png);} .main_about li.about2 > span {background-image:url(../images/skin/kcon_about02.png);} .main_about li.about3 > span {background-image:url(../images/skin/kcon_about03.png);} .main_about li.about4 > span {background-image:url(../images/skin/kcon_about04.png);} .main_about li.about5 > span {background-image:url(../images/skin/kcon_about05.png);} .main_about li.about6 > span {background-image:url(../images/skin/kcon_about06.png);} .main_about li h4, .main_about li p {text-align:center;color:#fff;margin:0;padding:0;vertical-align:middle;} .main_about li h4 {margin:68px 0 17px;font-size:23px;line-height:24px;font-weight:500;font-family: 'Montserrat','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .main_about li p {font-size:15px;line-height:18px;padding-top:18px;height:54px;font-weight:400;box-sizing:border-box;} .main_about li.about2 p {padding-top:0;} .main_about li p .up_arrow {margin-top:-3px;width:12px;height:15px;background:url(../images/skin/icon_up_arrow.png) no-repeat 50% 50%;background-size:auto 15px;vertical-align:middle;font-size:0;display:inline-block;} /* MARKETING */ .main_kind_wrap {padding:320px 0;width:100%;margin:0 auto;} .main_kind_wrap .main_kind {} .main_kind {} .main_kind ul {font-size:0;text-align:left;vertical-align:top;} .main_kind li.kind_box {width:33.32%;padding:0;height:0;padding-top:540px;display:inline-block;vertical-align:top;position:relative;z-index:1;} .main_kind li.kind_box:before {background: linear-gradient(360deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%);position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:1;content:"";display:inline-block;} .main_kind li.kind_box.kind1 {background:url(../images/skin/bnr_intro01.jpg) no-repeat 50% 50%;background-size:cover;} .main_kind li.kind_box.kind2 {transition-delay: .5s;background:url(../images/skin/bnr_intro02.jpg) no-repeat 50% 50%;background-size:cover;margin-top:90px;} .main_kind li.kind_box.kind3 {transition-delay: .3s;background:url(../images/skin/bnr_intro03.jpg) no-repeat 50% 50%;background-size:cover;} .main_kind li.kind_box.kind3:before {width:88px;height:88px;position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%, -50%);display:inline-block;content:"";background:url(../images/skin/icon_play.png) no-repeat 50% 50%;background-size:cover;} .main_kind li.kind_box .kind_txt {left:40px;bottom:40px;width: calc(100% - 80px);position:absolute;z-index:5;text-align:left;} .main_kind li.kind_box .kind_txt h4, .main_kind li.kind_box .kind_txt p, .main_kind li.kind_box .kind_txt a {text-shadow: 0 0 7px rgba(0, 0, 0, 0.4);line-height:1em;color:#fff;text-align:left;margin:0;padding:0;box-sizing:border-box;} .main_kind li.kind_box .kind_txt h4 {font-size:28px;font-weight:700;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .main_kind li.kind_box .kind_txt p {margin:12px 0 17px;font-size:14px;font-weight:400;line-height:1.4em;} .main_kind li.kind_box.kind2 .kind_txt p br {display:none;} .main_kind li.kind_box.kind1 .kind_txt p .pc_br + br {display:inline-block;} .main_kind li.kind_box.kind1 .kind_txt p .m_br + br {display:none;} .main_kind li.kind_box .kind_txt a {height:40px;line-height:38px;width:120px;font-size:12px;font-weight:500;border:1px #fff solid;text-align:center;display:inline-block;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;position:relative;z-index:1;} .main_kind li.kind_box .kind_txt a:before {display:inline-block;content:"";position:absolute;left:0;top:0;width:0;height:100%;background:#fff;opacity:0;transition:all 0.3s cubic-bezier(.29,0,.2,1);z-index:-1;} .main_kind li.kind_box .kind_txt a:hover {color:#333;} .main_kind li.kind_box .kind_txt a:hover:before {width:100%;opacity:1;width:100%;} /* FIXED */ .main_fix_wrap {background:url(../images/skin/bg_fixed_main.jpg) no-repeat 50% 50%;background-attachment:fixed;background-size:cover;padding:0;padding-top:400px;height:0;width:100%;margin:0;overflow:hidden;position:relative;z-index:1;} .main_fix_wrap .main_fix_txt {transform:translate(-50%, -50%);position:absolute;left:50%;top:50%;width:100%;margin:0 auto;padding:0;z-index:5;} .main_fix_wrap .main_fix_txt .fix_logo {height:60px;width:100%;background:url(../images/skin/logo_v2.png) 50% 50% no-repeat;background-size:auto 100%;} .main_fix_wrap .main_fix_txt h3, .main_fix_wrap .main_fix_txt p {color:#fff;text-align:center;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .main_fix_wrap .main_fix_txt h3 br, .main_fix_wrap .main_fix_txt p br {display:none;} .main_fix_wrap .main_fix_txt h3 {transition-delay: .2s;margin:29px auto 6px;font-size:40px;line-height:1.6em;font-weight:700;} .main_fix_wrap .main_fix_txt p {transition-delay: .2s;font-size:16px;line-height:1.36em;font-weight:300 !important;} /* INSTA */ .main_insta_wrap {padding-top:265px;padding-bottom:120px;} .main_insta_wrap h3 {height:69px;background-image:url(../images/skin/title_insta.png);background-repeat:no-repeat;background-position:50% 50%;background-size:auto 100%;text-align:center;font-size:0;} .main_insta_wrap h3 img {width:auto;height:69px;} .main_insta_wrap > dl {transition-delay: .3s;margin:40px auto 42px;width:80%;max-width:390px;display:block;font-size:0;text-align:center;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:86px;line-height:86px;box-sizing:border-box;display:inline-block;vertical-align:middle;text-align:left;} .main_insta_wrap > dl dt {width:86px;background-image:url(../images/skin/icon_insta.gif);background-repeat:no-repeat;background-position:50% 50%;background-size:auto 100%;font-size:0;} .main_insta_wrap > dl dd {padding-left:20px;font-size:22px;font-weight:300;color:#888;width:auto;font-family: 'GmarketSans','Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .main_insta_wrap .main_insta {transition-delay: .4s;padding:0 70px;width:100%;margin:0 auto;max-width:1760px;position:relative;z-index:1;box-sizing:border-box;} .main_insta .slide_wrap {} .main_insta .slide_wrap .slick-list {padding:0 !important;} .main_insta .slide_cut {max-width:324px;padding:0 2px;box-sizing:border-box;text-align:center;} .main_insta .slide_cut a, .main_insta .slide_cut img {vertical-align:top;font-size:0;} .main_insta .slide_cut a {width:100%;overflow:hidden;position:relative;z-index:1;height:0;padding:100% 0 0;display:inline-block;} .main_insta .slide_cut img {width:100%;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .main_insta .slick-arrow {width:23px;height:45px;top:50%;transform:translateY(-50%);border:0;outline:0;position:absolute;z-index:5;font-size:0;box-sizing:border-box;transition:all 0.3s;} .main_insta .slick-arrow:before {width:28px;height:28px;border-width:2px 2px 0 0;border-color:#aaa;border-style:solid;position:absolute;display:inline-block;content:"";transition:all 0.3s;} .main_insta .slick-arrow:hover:before {border-color:#555;} .main_insta .slick-arrow.slick-prev {left:-70px;} .main_insta .slick-arrow.slick-next {right:-70px;} .main_insta .slick-arrow.slick-prev:before {left:50%;top:25%;transform:rotate(-135deg) translate(0%, -50%);margin-top:-12px;margin-left:5px;} .main_insta .slick-arrow.slick-next:before {right:50%;top:50%;transform:rotate(45deg) translate(0%, -50%);margin-top:-4px;margin-right:6px;} @media only screen and (max-width:1777px) { .main_insta_wrap .main_insta {padding:0 85px;} } @media only screen and (max-width:1640px) { /* MARKETING */ .main_kind li.kind_box.kind2 .kind_txt p br {display:inline-block;} /* INSTA */ .main_insta_wrap .main_insta {padding:0 65px;} .main_insta .slick-arrow.slick-prev {left:-50px;} .main_insta .slick-arrow.slick-next {right:-50px;} } @media only screen and (max-width:1580px) { /* PRODUCT */ .main_pr ul li.pr_cut .cut_txt {padding:50px 30px 35px;width:700px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:66px;} } @media only screen and (max-width:1480px) { /* PRODUCT */ .main_pr_wrap {padding-top:270px;padding-bottom:280px;} .main_pr ul li.pr_cut .cut_txt {padding:40px 20px 30px;width:604px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:60px;width: calc(100% + 10px);margin-left:-5px;margin-right:-5px;} .main_pr ul li.pr_cut.open {flex:3.6;} /* INSTA */ .main_insta_wrap {padding-top:18%;padding-bottom:10%;} .main_insta_wrap .main_insta {padding:0 55px;} .main_insta .slick-arrow.slick-prev {left:-40px;} .main_insta .slick-arrow.slick-next {right:-40px;} } @media only screen and (max-width:1360px) { /* 공통 */ .main_title {font-size:40px;} .main_about_wrap .main_title {margin-bottom:100px;} /* PRODUCT */ .main_pr_wrap {padding-top:230px;padding-bottom:240px;} .main_pr ul li.pr_cut {padding-top:580px;} .main_pr ul li.pr_cut + li {margin-left:8px;} .main_pr ul li.pr_cut .cut_preview {font-size:24px;width:230px;} .main_pr ul li.pr_cut .cut_txt {padding:30px 15px 25px;width:534px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:54px;} .main_pr ul li.pr_cut.open {flex:3.4;} /* ABOUT */ .main_about_wrap {padding-top:132px;padding-bottom:90px;} .main_about li {width:10.6%;} .main_about li + li {margin-left:7.28%;} .main_about li > span {height:82px;} .main_about li h4 {margin-top:60px;margin-bottom:18px;font-size:22px;line-height:23px;} /* MARKETING */ .main_kind_wrap {padding-top:300px;padding-bottom:300px;} .main_kind_wrap .w_set {padding-left:15px;padding-right:15px;} /* INSTA */ .main_insta_wrap {padding-top:20%;padding-bottom:9%;} .main_insta .slick-arrow {width:20px;height:42px;} .main_insta .slick-arrow:before {width:24px;height:24px;} } @media only screen and (max-width:1307px) { /* visual */ .main_visual .slick-slide {padding-top:90vh;} .main_visual .txt_box h3 {margin-bottom:22px;font-size:66px;} .main_visual .visual_btn_wrap .control_btn {height:42px;border-radius:42px;line-height:32px;padding-left:10px;padding-right:10px;} .main_visual .visual_btn_wrap .control_btn + .control_btn {width:42px;} .main_visual .visual_btn_wrap .control_btn #pause-btn {width:32px;height:32px;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {line-height:32px;height:32px;font-size:15px;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap {margin:15px auto;} .main_visual .visual_btn_wrap .control_btn .slick-arrow {height:32px;} } @media only screen and (max-width:1240px) { /* visual */ .main_visual .txt_box h3 {margin-bottom:20px;font-size:62px;} .main_visual .visual_btn_wrap {bottom:80px;} .main_visual .visual_btn_wrap .control_btn {width:240px;height:40px;border-radius:40px;line-height:30px;padding-left:10px;padding-right:10px;} .main_visual .visual_btn_wrap .control_btn + .control_btn {margin-left:20px;width:40px;} .main_visual .visual_btn_wrap .control_btn #pause-btn {width:30px;height:30px;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {line-height:30px;height:30px;font-size:15px;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap {margin:14px auto;} .main_visual .visual_btn_wrap .control_btn .slick-arrow {width:20px;height:30px;} /* 공통 */ .main_title {font-size:38px;margin-bottom:30px;} .main_about_wrap .main_title {margin-bottom:90px;} /* PRODUCT */ .main_pr_wrap {padding-top:210px;padding-bottom:220px;} .main_pr ul li.pr_cut {padding-top:570px;} .main_pr ul li.pr_cut .cut_preview {font-size:21px;width:200px;transform: rotate(-90deg) translate(-50%, -200%);} .main_pr ul li.pr_cut .cut_txt {padding:25px 15px;width:470px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:52px;line-height:1.15em;} .main_pr ul li.pr_cut .cut_txt h4 br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p br, .main_pr ul li.pr_cut:nth-of-type(3) .cut_txt p br, .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p br {display:inline-block;} /* ABOUT */ .main_about_wrap {padding-top:114px;padding-bottom:90px;} .main_about li {width:10.8%;} .main_about li + li {margin-left:7.04%;} .main_about li > span {height:78px;} .main_about li h4 {margin-top:50px;margin-bottom:19px;} } @media only screen and (max-width:1217px) { /* 공통 */ .main_title {font-size:37px;} .main_about_wrap .main_title {margin-bottom:82px;} /* ABOUT */ .main_about_wrap {padding-top:96px;padding-bottom:94px;} .main_about li {width:11.9%;} .main_about li + li {margin-left:5.72%;} .main_about li > span {height:75px;} .main_about li h4 {margin-top:40px;} /* MARKETING */ .main_kind_wrap {padding-top:270px;padding-bottom:270px;} .main_kind li.kind_box .kind_txt {left:30px;bottom:30px;width: calc(100% - 60px);} /* FIXED */ .main_fix_wrap .main_fix_txt {transform:translate(-50%, -46%);} .main_fix_wrap .main_fix_txt .fix_logo {height:56px;} .main_fix_wrap .main_fix_txt h3 {margin-top:25px;font-size:38px;} /* INSTA */ .main_insta_wrap {padding-top:22%;padding-bottom:10%;} .main_insta_wrap h3 {height:62px;} .main_insta_wrap > dl {margin:34px auto 38px;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:80px;line-height:80px;} .main_insta_wrap > dl dt {width:80px;} .main_insta_wrap > dl dd {padding-left:14px;font-size:21px;} .main_insta_wrap .main_insta {padding:0;} .main_insta .slide_cut {width:26%;} } @media only screen and (max-width:1100px) { /* 공통 */ .main_title {font-size:36px;} .main_about_wrap .main_title {margin-bottom:78px;} /* PRODUCT */ .main_pr_wrap {padding-top:190px;padding-bottom:200px;} .main_pr ul li.pr_cut {padding-top:550px;} .main_pr ul li.pr_cut .cut_preview {font-size:19px;width:180px;} .main_pr ul li.pr_cut .cut_txt {width:440px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:48px;letter-spacing:-1.4px;} .main_pr ul li.pr_cut .cut_txt p {font-size:15px;} /* ABOUT */ .main_about_wrap {padding-top:92px;padding-bottom:100px;} .main_about li {width:12.8%;} .main_about li + li {margin-left:4.64%;} .main_about li > span {height:72px;} .main_about li h4 {margin-top:36px;} /* MARKETING */ .main_kind li.kind_box.kind1 .kind_txt p .pc_br + br {display:none;} .main_kind li.kind_box.kind1 .kind_txt p .m_br + br {display:inline-block;} } @media only screen and (max-width:1023px) { /* visual */ .main_visual .txt_box {top:47%;} .main_visual .txt_box h3 {font-size:60px;} .main_visual .txt_box p {font-size:17px;} .main_visual .visual_btn_wrap {bottom:70px;} .main_visual .visual_btn_wrap .control_btn {width:224px;padding-left:8px;padding-right:8px;} .main_visual .visual_btn_wrap .control_btn + .control_btn {margin-left:15px;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {font-size:14px;} /* 공통 */ .main_title {font-size:35px;} .main_about_wrap .main_title {margin-bottom:74px;} /* PRODUCT */ .main_pr_wrap {padding-top:170px;padding-bottom:180px;} .main_pr ul li.pr_cut {padding-top:510px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:55% 50%;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:54% 50%;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:45% 50%;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 50%;} .main_pr ul li.pr_cut .cut_preview {font-size:18px;width:180px;} .main_pr ul li.pr_cut .cut_txt {padding:25px 15px;width:386px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:42px;letter-spacing:-1.2px;} .main_pr ul li.pr_cut .cut_txt p {font-size:14px;} .main_pr ul li.pr_cut.open {flex:3.1;} .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p .pc_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p .m_br + br, .main_pr ul li.pr_cut:nth-of-type(5) .cut_txt p .m_br + br {display:inline-block;} /* ABOUT */ .main_about li {width:13.0%;} .main_about li + li {margin-left:4.4%;} .main_about li > span {height:70px;} .main_about li h4 {margin-top:32px;font-size:21px;line-height:22px;} .main_about li p {font-size:14px;} /* MARKETING */ .main_kind_wrap {padding-top:230px;padding-bottom:230px;} .main_kind li.kind_box {padding-top:520px;} .main_kind li.kind_box.kind2 {;margin-top:70px;} .main_kind li.kind_box.kind3:before {width:84px;height:84px;} .main_kind li.kind_box .kind_txt {left:25px;bottom:30px;width: calc(100% - 50px);} .main_kind li.kind_box .kind_txt h4 {font-size:27px;} .main_kind li.kind_box .kind_txt p {margin-top:0.9em;margin-bottom:16px;} /* INSTA */ .main_insta_wrap {padding-top:23%;padding-bottom:12%;} .main_insta_wrap h3 {height:56px;} .main_insta_wrap > dl {margin:30px auto 35px;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:70px;line-height:70px;} .main_insta_wrap > dl dt {width:70px;} .main_insta_wrap > dl dd {padding-left:10px;font-size:20px;} } @media only screen and (max-width:960px) { /* 공통 */ .main_title {font-size:34px;margin-bottom:25px;} .main_about_wrap .main_title {margin-bottom:9.6%;} /* PRODUCT */ .main_pr_wrap {padding-top:150px;padding-bottom:160px;} .main_pr ul li.pr_cut {padding-top:480px;} .main_pr ul li.pr_cut + li {margin-left:7px;} .main_pr ul li.pr_cut .cut_txt {width:325px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:38px;} .main_pr ul li.pr_cut .cut_txt p {font-size:13px;} .main_pr ul li.pr_cut.open {flex:3;} /* ABOUT */ .main_about_wrap {padding-top:11.8%;padding-bottom:12.3%;} .main_about li {width:14.6%;} .main_about li + li {margin-left:2.48%;} .main_about li > span {height:68px;} .main_about li h4 {margin-top:27px;} .main_about li p .up_arrow {margin-top:-4px;width:11px;height:13px;background-size:auto 13px;} /* MARKETING */ .main_kind_wrap {padding-top:200px;padding-bottom:200px;} .main_kind li.kind_box {padding-top:490px;} .main_kind li.kind_box.kind2 {margin-top:60px;} .main_kind li.kind_box.kind3:before {width:80px;height:80px;} .main_kind li.kind_box .kind_txt h4 {font-size:26px;} .main_kind li.kind_box .kind_txt p {margin-top:0.8em;margin-bottom:1.23em;line-height:1.4em;} /* FIXED */ .main_fix_wrap .main_fix_txt {transform:translate(-50%, -47%);} .main_fix_wrap .main_fix_txt .fix_logo {height:52px;} .main_fix_wrap .main_fix_txt h3 {margin-top:23px;font-size:34px;} /* INSTA */ .main_insta_wrap h3 {height:52px;} .main_insta_wrap > dl {margin:25px auto 30px;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:62px;line-height:62px;} .main_insta_wrap > dl dt {width:62px;} .main_insta_wrap > dl dd {font-size:19px;} .main_insta .slide_cut {width:28%;} } @media only screen and (max-width:860px) { /* 공통 */ .main_title {font-size:33px;margin-bottom:3.2%;} .main_about_wrap .main_title {margin-bottom:10.6%;} /* PRODUCT */ .main_pr_wrap {padding-top:15.6%;padding-bottom:16%;} .main_pr ul li.pr_cut {padding-top:460px;} .main_pr ul li.pr_cut + li {margin-left:6px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:55% 50%;background-size:auto 105%;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:61% 50%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:38% 50%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:44% 50%;background-size:auto 110%;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 50%;background-size:cover;} .main_pr ul li.pr_cut .cut_txt {width:280px;padding:25px 12px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:35px;width: calc(100% + 6px);margin-left:-3px;margin-right:-3px;} .main_pr ul li.pr_cut .cut_txt h4 br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(1) .cut_txt p .pc_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(1) .cut_txt p .m_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p .pc_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p .m_br + br {display:inline-block;} .main_pr ul li.pr_cut.open {flex:2.7;} /* ABOUT */ .main_about_wrap {padding-top:12.8%;padding-bottom:13.3%;} .main_about ul {max-width:720px;} .main_about li {width:26.6%;} .main_about li + li {margin-left:10.1%;} .main_about li:nth-of-type(4) {margin-left:0;} .main_about li:nth-of-type(n + 4) {margin-top:10.2%;} .main_about li.about2.aos-animate {transition-delay: .2s;} .main_about li.about3.aos-animate {transition-delay: .3s;} .main_about li.about4.aos-animate {transition-delay: .1s;} .main_about li.about5.aos-animate {transition-delay: .2s;} .main_about li.about6.aos-animate {transition-delay: .3s;} .main_about li > span {height:65px;} .main_about li h4 {margin-top:23px;font-size:20px;line-height:21px;} .main_about li p .up_arrow {width:10px;height:12px;background-size:auto 12px;} /* MARKETING */ .main_kind_wrap {padding-top:170px;padding-bottom:170px;} .main_kind li.kind_box {width:50%;padding-top:460px;} .main_kind li.kind_box.kind2 {transition-delay: .2s;margin-top:120px;} .main_kind li.kind_box.kind3 {transition-delay: .2s;margin-top:-60px;} /* FIXED */ .main_fix_wrap {padding-top:360px;} .main_fix_wrap .main_fix_txt {transform:translate(-50%, -50%);} .main_fix_wrap .main_fix_txt .fix_logo {height:48px;} .main_fix_wrap .main_fix_txt h3 {margin-top:21px;margin-bottom:10px;font-size:32px;} /* INSTA */ .main_insta_wrap h3 {height:48px;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:56px;line-height:56px;} .main_insta_wrap > dl dt {width:56px;} .main_insta_wrap > dl dd {font-size:18px;} .main_insta .slide_cut {width:30%;} } @media only screen and (max-width:767px) { /* visual */ .main_visual .txt_box {top:45%;} .main_visual .txt_box h3 {margin-bottom:18px;font-size:57px;} .main_visual .txt_box p.slide_3 .pc_br + br {display:none;} .main_visual .txt_box p.slide_3 .m_br + br {display:inline-block;} .main_visual .visual_btn_wrap .control_btn {width:214px;padding-left:6px;padding-right:6px;} .main_visual .visual_btn_wrap .control_btn + .control_btn {margin-left:12px;} /* 공통 */ .main_title {font-size:32px;margin-bottom:3.9%;} .main_about_wrap .main_title {margin-bottom:14.6%;} /* PRODUCT */ .main_pr_wrap {padding-top:21.6%;padding-bottom:22%;} .main_pr ul {display:block;} .main_pr ul li.pr_cut {display:block;padding-top:45%;transition:flex 0s cubic-bezier(.29,0,.2,1);} .main_pr ul li.pr_cut + li {margin-left:0;} .main_pr ul li.pr_cut .cut_bg:before {background: linear-gradient(0deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 45%);transition:all 0s cubic-bezier(.19,0,.2,1);} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 58%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:50% 60%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:50% 55%;background-size:cover;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 60%;background-size:cover;} .main_pr ul li.pr_cut .cut_preview {opacity:0;transition:all 0s cubic-bezier(.29,0,.2,1);} .main_pr ul li.pr_cut .cut_txt {padding:25px 20px;width:100%;opacity:1;transition:all 0s cubic-bezier(.19,0,.2,1);} .main_pr ul li.pr_cut .cut_txt h4 {font-size:35px;} .main_pr ul li.pr_cut .cut_txt h4 br {display:none;} .main_pr ul li.pr_cut:nth-of-type(1) .cut_txt p .pc_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(1) .cut_txt p .m_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p .pc_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(2) .cut_txt p .m_br + br {display:none;} .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p .pc_br + br {display:inline-block;} .main_pr ul li.pr_cut:nth-of-type(4) .cut_txt p .m_br + br {display:none;} .main_pr ul li.pr_cut.open {display:block;} .main_pr ul li.pr_cut.open .cut_bg:before {opacity:1;} .main_pr ul li.pr_cut.open .cut_preview {opacity:0;} .main_pr ul li.pr_cut.open .cut_txt {opacity:1;} /* ABOUT */ .main_about_wrap {padding-top:15.8%;padding-bottom:16.3%;} /* MARKETING */ .main_kind_wrap {padding-top:160px;padding-bottom:160px;} .main_kind li.kind_box {padding-top:430px;} .main_kind li.kind_box .kind_txt a:before {display:none;} .main_kind li.kind_box .kind_txt a:hover {color:#fff;} /* FIXED */ .main_fix_wrap {background-attachment:inherit;background-size:180% auto;} .main_fix_wrap .main_fix_txt .fix_logo {height:44px;} .main_fix_wrap .main_fix_txt h3 {margin-top:19px;font-size:30px;} .main_fix_wrap .main_fix_txt p {font-size:15px;} /* INSTA */ .main_insta_wrap h3 {height:45px;} .main_insta_wrap > dl {margin:20px auto 25px;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:52px;line-height:52px;} .main_insta_wrap > dl dt {width:52px;} .main_insta_wrap > dl dd {padding-left:10px;font-size:17px;} .main_insta .slide_cut {width:35%;} } @media only screen and (max-width:640px) { /* visual */ .main_visual .txt_box {top:46%;} .main_visual .txt_box h3 {font-size:53px;} .main_visual .txt_box p {font-size:16px;} .main_visual .m_br + br {display:inline-block;} .main_visual .visual_btn_wrap {width:340px;} .main_visual .visual_btn_wrap .control_btn {width:210px;padding-left:5px;padding-right:6px;} .main_visual .visual_btn_wrap .control_btn + .control_btn {margin-left:10px;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {font-size:13px;padding:0 8px;} /* 공통 */ .main_title {font-size:31px;margin-bottom:4.9%;} .main_about_wrap .main_title {margin-bottom:16.6%;} /* PRODUCT */ .main_pr_wrap {padding-top:24.6%;padding-bottom:25%;} .main_pr ul li.pr_cut {padding-top:58.8%;} /* ABOUT */ .main_about_wrap {padding-top:19.8%;padding-bottom:20.3%;} .main_about li:nth-of-type(n + 4) {margin-top:11.2%;} .main_about li p .up_arrow {width:9px;height:11px;background-size:auto 11px;} /* MARKETING */ .main_kind_wrap {padding-top:30%;padding-bottom:30%;} .main_kind li.kind_box {width:70%;padding-top:420px;} .main_kind li.kind_box.kind1 {z-index:1;} .main_kind li.kind_box.kind2 {transition-delay: .1s;margin-top:15px;float:right;z-index:5;} .main_kind li.kind_box.kind3 {transition-delay: .1s;margin-top:15px;z-index:1;} .main_kind li.kind_box .kind_txt {bottom:35px;} .main_kind li.kind_box .kind_txt h4 {font-size:25px;} /* FIXED */ .main_fix_wrap .main_fix_txt .fix_logo {height:42px;} .main_fix_wrap .main_fix_txt h3 {margin-top:17px;font-size:28px;} .main_fix_wrap .main_fix_txt p {font-size:15px;} /* INSTA */ .main_insta_wrap {padding-top:26%;} .main_insta_wrap > dl dt, .main_insta_wrap > dl dd {height:50px;line-height:50px;} .main_insta_wrap > dl dt {width:50px;} .main_insta_wrap > dl dd {padding-left:8px;font-size:16px;} .main_insta .slide_cut {width:40%;} } @media only screen and (max-width:580px) { } @media only screen and (max-width:500px) { /* visual */ .main_visual .txt_box h3 {margin-bottom:14px;font-size:48px;} .main_visual .txt_box p {font-size:15px;} /* 공통 */ .main_title {font-size:30px;margin-bottom:5.9%;} .main_about_wrap .main_title {margin-bottom:19.6%;} /* PRODUCT */ .main_pr_wrap {padding-top:30.6%;padding-bottom:32%;} .main_pr ul li.pr_cut {padding-top:68.8%;} .main_pr ul li.pr_cut .cut_bg {background-size:125% auto !important;} /* ABOUT */ .main_about_wrap {padding-top:22.8%;padding-bottom:23.3%;} .main_about li {width:44%;} .main_about li + li, .main_about li:nth-of-type(4) {margin-left:12%;} .main_about li:nth-of-type(2n + 1) {margin-left:0;} .main_about li:nth-of-type(n + 3) {margin-top:15.2%;} .main_about li.about2.aos-animate {transition-delay: .2s;} .main_about li.about3.aos-animate {transition-delay: .1s;} .main_about li.about4.aos-animate {transition-delay: .2s;} .main_about li.about5.aos-animate {transition-delay: .1s;} .main_about li.about6.aos-animate {transition-delay: .2s;} /* MARKETING */ .main_kind_wrap {padding-top:32%;padding-bottom:32%;} .main_kind li.kind_box {width:100%;padding-top:124%;} /* FIXED */ .main_fix_wrap {background-size:210% auto;padding-top:100%;} .main_fix_wrap .main_fix_txt .fix_logo {height:40px;} .main_fix_wrap .main_fix_txt h3 br, .main_fix_wrap .main_fix_txt p br {display:inline-block;} .main_fix_wrap .main_fix_txt h3 {margin-top:13px;margin-bottom:12px;font-size:26px;} /* INSTA */ .main_insta_wrap {padding-top:30%;} .main_insta .slide_cut {width:220px;} } @media only screen and (max-width:479px) { } @media only screen and (max-width:414px) { /* visual */ .main_visual .txt_box h3 {margin-bottom:12px;font-size:43px;} .main_visual .visual_btn_wrap {min-width:250px;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {padding:0 7px;} } @media only screen and (max-width:375px) { /* visual */ .main_visual .slick-slide {padding-top:94vh;} .main_visual .txt_box h3 {font-size:40px;} /* 공통 */ .main_title {margin-bottom:6.9%;} .main_about_wrap .main_title {margin-bottom:21.6%;} /* PRODUCT */ .main_pr_wrap {padding-top:34.6%;padding-bottom:36%;} /* ABOUT */ .main_about_wrap {padding-top:24.8%;padding-bottom:25.3%;} /* MARKETING */ .main_kind_wrap {padding-top:38%;padding-bottom:38%;} .main_kind li.kind_box {width:100%;padding-top:126%;} .main_kind li.kind_box .kind_txt h4 {font-size:24px;} /* FIXED */ .main_fix_wrap {background-size:230% auto;padding-top:120%;} .main_fix_wrap .main_fix_txt h3 {margin-top:11px;margin-bottom:14px;font-size:25px;} .main_fix_wrap .main_fix_txt p {font-size:14px;} } @media only screen and (max-width:360px) { /* visual */ .main_visual .txt_box {width:100%;padding: 0 15px;box-sizing:border-box;} .main_visual .txt_box h3 {font-size:39px;} .main_visual .txt_box p {font-size:14px;width:100%;padding: 0;box-sizing:border-box;} .main_visual .txt_box p .m_br + br {display:inline-block;} .main_visual .txt_box p.slide_3 {} /* PRODUCT */ .main_pr ul li.pr_cut .cut_txt {padding:20px 15px;} .main_pr ul li.pr_cut .cut_txt h4 {font-size:32px;} /* INSTA */ .main_insta .slide_cut {width:210px;} } @media screen and (max-width:320px) { z/* visual */ .main_visual .txt_box h3 {font-size:38px;} .main_visual .txt_box p {font-size:14px;} .main_visual .visual_btn_wrap {bottom:60px;min-width:250px;} .main_visual .visual_btn_wrap .control_btn {width:200px;height:36px;border-radius:36px;line-height:26px;} .main_visual .visual_btn_wrap .control_btn + .control_btn {width:36px;} .main_visual .visual_btn_wrap .control_btn #pause-btn {width:26px;height:26px;} .main_visual .visual_btn_wrap .control_btn .slide_count > span {line-height:26px;height:26px;} .main_visual .visual_btn_wrap .control_btn .slide_count .slider-progress-wrap {margin:12px auto;} .main_visual .visual_btn_wrap .control_btn .slick-arrow {width:20px;height:26px;} }