@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ /* pc 일반 */ body.on {height:100%;overflow:hidden;} #wrap {position:relative;height:100%;width:100%;margin:0;padding:0;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;padding:0;overflow:visible;} #wrap #container {width:100%;margin:0;padding:0;} #wrap #footer {width:100%;margin:0;} /* #container 안의 레이아웃 */ #contents_wrap {width:100%;max-width:1430px;margin:0 auto;padding:0;padding-left:15px !important;padding-right:15px !important;position:relative;z-index:1;box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 */ #contents_wrap.w_1200 {max-width:1200px;} #contents_wrap #side_box {width:100%;padding:0 0 0 0;box-sizing:border-box;} /* lnb 감싸는 영역 */ #contents_wrap #contents_box {width:100%;padding:0 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; margin:0 0 9% 0;} /* #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 {width:100%;max-width:1430px;text-align:left;margin:0 auto;padding:0;padding-left:15px !important;padding-right:15px !important;box-sizing:border-box;} .w_1200 {width:100%;max-width:1200px;text-align:left;margin:0 auto;padding:0;padding-left:15px !important;padding-right:15px !important;box-sizing:border-box;} @media only screen and (max-width:1447px) { } @media only screen and (max-width:1023px) { #contents_wrap #side_box {padding: 85px 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: 85px 0 0 0;} } @media only screen and (max-width:767px) { #contents_wrap #side_box {display:none;} .sub_goods #contents_wrap #side_box {display:block;padding:0;} } @media only screen and (max-width:640px) { #contents_wrap #contents_box {padding:4.2% 0 10% 0;} } @media only screen and (max-width:479px) { } @media only screen and (max-width:350px) { .w_1200, .w_custom, #contents_wrap {padding-left:12px !important;padding-right:12px !important;} } @media only screen and (max-width:330px) { .w_1200, .w_custom, #contents_wrap {padding-left:10px !important;padding-right:10px !important;} } /*─────────────────────────────────────────────────────────── 메인 상품 진열 ───────────────────────────────────────────────────────────*/ /* 메인상품진열 - 공통 */ .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 ───────────────────────────────────────────────────────────*/ /* pc 일반 */ .navi_step {width:100%;margin:0 auto;display:block;position:relative;z-index:3;box-sizing:border-box;} .navi_step dt, .navi_step dd {font-size:15px;width:100%;box-sizing:border-box;margin:0;padding:0;} .navi_step dt {border-radius:2em;border-width:1px;border-color:#909091;border-style:solid;line-height:1em;padding:0.5em 15px;background: rgba(255, 255, 255, 0);color:#fff;font-weight:500;cursor:pointer;position:relative;z-index:2;} .navi_step.on dt {background: rgba(255, 255, 255, 1);color:#333;} .navi_step dd {border-width:1px;border-color:#909091;border-style:solid;border-radius:2em;position:absolute;left:0;top:100%;z-index:1;background: rgba(255, 255, 255, 1);height:0;overflow:hidden;opacity:0;} .navi_step.on dd {height:auto;overflow:initial;opacity:1;} .navi_step dd ul {padding:12px 15px;border-radius:2em;width:100%;box-sizing:border-box;background:#fff;} .navi_step dd ul li {font-size:14px;line-height:1.3em;padding:0.4em 0;color:#333;font-weight:400;vertical-align:top;} .navi_step dd ul li + li {} .navi_step dd ul li.on {color:#111;font-weight:500;} .navi_step dd ul li a {font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;display:inline-block;vertical-align:top;width:100%;box-sizing:border-box;} .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;} /* pc 일반 */ /* 상단 기본 */ #header_warp {position:fixed;z-index:10;width:100%;} #header {background:#fff;transition:background 0.3s;width:100%;margin:0;padding:0;z-index:10;border:0;border-bottom:1px #ddd solid;} #header.fix{position:fixed;left:0;top:0;} #header .header_cont {position:relative;height:103px;z-index:1;vertical-align:top;text-align:center;} #header .header_cont.w_custom {max-width:1780px;} .hd_logo {box-sizing:border-box;} .hd_logo a {vertical-align:top;font-size:0;} .hd_logo img {height:53px;width:auto;} .hd_logo div {margin:0 0 0 21px;padding:0;/* opacity:0; */transition:opacity 0.3s;text-align:center;vertical-align:top;display:inline-block;} .hd_logo div strong, .hd_logo div span {color: #333;text-align:center;display:block;vertical-align:top;margin:0;padding:0;} #header.fix .hd_logo div strong, #header.fix .hd_logo div span {color:#333;} .hd_logo div strong {font-size:20px;line-height:26px;font-weight:400;} .hd_logo div span {font-size:14px;line-height:19px;font-weight:300;} #header h1.hd_logo {left:15px;top:50%;transform:translateY(-50%);position:absolute;} #header .hd_lnb {transform:translateX(-27px);display:inline-block;margin:0 auto;vertical-align:top;box-sizing:border-box;text-align:center;z-index:10;} #header .hd_lnb > ul {font-size:0;vertical-align:top;} #header .hd_lnb li, #header .hd_lnb li a {padding:0;vertical-align: middle;text-align:center;display:inline-block;box-sizing:border-box;transition: all .2s;} #header .hd_lnb > ul > li, #header .hd_lnb > ul > li > a {line-height:1.5em;font-size:20px;font-weight:400;color:#333;} #header .hd_lnb > ul > li {padding:35px 38px;position:relative;z-index:1;} #header .hd_lnb > ul > li > a {padding:0;position:relative;z-index:1;} #header .hd_lnb > ul > li.on > a{color:#1a478d;} #header .hd_lnb > ul > li > a:after{height:2px;background:#333;content:"";display:block;clear:both;transition:0.3s;width:0;position:absolute;left:0;bottom:0;margin-top:0;content:"";display:inline-block;} #header .hd_lnb > ul > li > a:hover:after, #header .hd_lnb > ul > li > a.on:after {width:100%;} #header .dep2_wrap{display:none;position:absolute; border-top:1px solid #ddd; height:240px; background:rgba(255,255,255,0.8); box-shadow:5px 5px 5px rgba(0,0,0,0.1);width:100%;} #header .hd_lnb_dep2 {z-index:55;position:absolute;left:50%; margin-left:-296px; top:0; width:100%;text-align:left;} #header .hd_lnb_dep2 li{display:inline-block; vertical-align:top; padding:0 !important; text-align:left;} #header .hd_lnb_dep2 li dt:first-child{padding:20px 0 5px;} #header .hd_lnb_dep2 li:nth-child(1){margin-right:87px} #header .hd_lnb_dep2 li:nth-child(2){margin-right:30px;} #header .hd_lnb_dep2 li:nth-child(3){margin-right:92px;} #header .hd_lnb_dep2 li dt{padding:5px 0;} #header .hd_lnb_dep2 li dt a{font-size:16px; font-weight:400; color:#333;} #header .hd_lnb_dep2 li dd{padding:5px 0 0 10px;} #header .hd_lnb_dep2 li dd a{font-size:15px; font-weight:400; color:#333;} #header .hd_lnb_dep2 li a:hover{color:#1a478d;} #header .hd_right {right:15px;top:50%;transform:translateY(-50%);position:absolute;box-sizing:border-box;} .hd_gnb {vertical-align:top;font-size:0;display:inline-block;vertical-align:top;} .hd_gnb > li {margin:0;padding:0;box-sizing:border-box;display:inline-block;vertical-align:top;} .hd_gnb > li.hd_call {} .hd_gnb > li.hd_call a {} .hd_gnb > li.hd_call a span {padding:0 42px 0 31px;font-size:20px;font-weight:500;color:#333;position:relative;z-index:1;display:inline-block;vertical-align:top;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .hd_gnb > li.hd_call a span:before, .hd_gnb > li.hd_call a span:after {display:inline-block;box-sizing:border-box;content:"";vertical-align:top;margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%);background-repeat:no-repeat !important;background-position:50% 50% !important;background-size:100% 100% !important;} .hd_gnb > li.hd_call a span:before {width:20px;height:20px;left:0;background-image:url(../images/skin/icon_call_ov.png);} .hd_gnb > li.hd_call a span:after {width:32px;height:32px;right:0;background-image:url(../images/skin/icon_qr_ov.png);background-size:32px;} #header_warp .navi_step {width:100%;margin:-4px 0;} #header_warp .navi_step dt, #header_warp .navi_step dd {font-size:15px;} #header_warp .navi_step dt {border-radius:2em;border-color:#bbb;line-height:1em;padding:0.5em 15px;background: rgba(255, 255, 255, 0);color:#333;font-weight:400;} #header_warp .navi_step.on dt {background: rgba(255, 255, 255, 1);color:#333;} #header_warp .navi_step dd {border-color:#bbb;border-radius:1em;margin-top:-1px;overflow:hidden;} #header_warp .navi_step dd ul {padding:5px 5px;border-radius:1em;text-align:center;} #header_warp .navi_step dd ul li {font-size:14px;line-height:1.3em;padding:0.4em 0;color:#333;text-transform:uppercase;} #header_warp .navi_step dd ul li.on {color:#111;} #header .hd_right .hd_gnb {text-align:right;} #header .hd_gnb > li:nth-of-type(2) {margin:0 20px 0 44px;} #header .hd_gnb > li:nth-of-type(3) {margin:0 17px 0 0;} #header .hd_gnb > li:nth-of-type(3) a {width:24px;height:24px;background-image:url(../images/skin/icon_search_ov.png);background-size:100%;background-repeat:no-repeat !important;background-position:50% 50% !important;vertical-align:top;font-size:0;display:inline-block;} #header .hd_right .menu-trigger {width:28px;height:26px;padding:0;margin:0;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;} #header .hd_right .menu-trigger span {width:100%;height:2px;top:50%;background-color:#333;right:0;transition:0.3s;position:absolute;} #header .hd_right .menu-trigger span:nth-of-type(1) {transform:translateY(-13px);} #header .hd_right .menu-trigger span:nth-of-type(2) {width:100%;margin-top: -1px;} #header .hd_right .menu-trigger span:nth-of-type(3) {transform:translateY(12px);} #header .hd_right .menu-trigger.active-1 span:nth-of-type(1) {transform: translateY(0) rotate(-45deg);} #header .hd_right .menu-trigger.active-1 span:nth-of-type(2) {width:0;} #header .hd_right .menu-trigger.active-1 span:nth-of-type(3) {transform: translateY(0) rotate(45deg);} #header.fix .hd_logo div {opacity:1;} #header.fix .navi_step dt {background: rgba(255, 255, 255, 1);color:#333;} /* main header */ .main_index #header{background:rgba(255, 255, 255, 0);border-bottom:0;} .main_index #header.fix, #wrap #header.fix {background:rgba(255, 255, 255, 1);border-bottom:1px #ddd solid;} .main_index #header .hd_lnb > ul > li, .main_index #header .hd_lnb > ul > li > a, .main_index #header .navi_step dt, .main_index #header .hd_right > ul > li.hd_call a span {color:#fff;} #header_warp .navi_step.on dt{color:#333;} .main_index #header .navi_step dt, .main_index #header .navi_step dd {border-color: rgba(170, 170, 170, 0.8);} .main_index #header .hd_right > ul > li.hd_call a span:before {background-image:url(../images/skin/icon_call.png);} .main_index #header .hd_right > ul > li.hd_call a span:after {background-image:url(../images/skin/icon_qr.png);} .main_index #header .hd_right > ul > li:nth-of-type(3) a {background-image:url(../images/skin/icon_search.png);} .main_index #header .hd_right .menu-trigger span {background-color:#fff;} .main_index #header.fix .hd_lnb > ul > li, .main_index #header.fix .hd_lnb > ul > li > a, .main_index #header.fix .navi_step dt, .main_index #header.fix .hd_right > ul > li.hd_call a span {color:#333;} .main_index #header.fix .navi_step dt, .main_index #header.fix .navi_step dd {border-color:#bbb;} .main_index #header.fix .hd_right > ul > li.hd_call a span:before {background-image:url(../images/skin/icon_call_ov.png);} .main_index #header.fix .hd_right > ul > li.hd_call a span:after {background-image:url(../images/skin/icon_qr_ov.png);} .main_index #header.fix .hd_right > ul > li:nth-of-type(3) a {background-image:url(../images/skin/icon_search_ov.png);} .main_index #header.fix .hd_right .menu-trigger span {background-color:#333;} /* aside */ #aside {top:0px;right:-500px;width:500px;border-left:1px #ddd solid;transition:0.8s;height:100%;box-sizing:border-box;box-sizing:border-box;position:fixed;background:#fff;z-index:99;} #aside.on {right:0%;} .aside_bg {left:0px;top:0px;bottom:0;right:0;width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;transition:0.8s;z-index:50;position:fixed;display:none;} .aside_bg.on {opacity:1;display:block;} #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;} #aside .aside_top, #aside .hd_gnb {padding-left:15px;padding-right:15px;box-sizing:border-box;} #aside .aside_top {border-bottom:1px #fff solid;width:100%;position:relative;z-index:1;} #aside .hd_logo {left:15px;position:absolute;top:50%;transform:translateY(-50%);} #aside .hd_logo div {opacity:0;} #aside .btn_aside_close {right:15px;width:28px;height:26px;position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;} #aside .menu-trigger2 {width:28px;height:26px;padding:0;margin:0;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;} #aside .menu-trigger2 span {width:100%;height:2px;top:50%;background-color:#333;right:0;transition:0.3s;position:absolute;} #aside .menu-trigger2 span:nth-of-type(1) {transform:translateY(-13px);} #aside .menu-trigger2 span:nth-of-type(2) {width:68%;margin-top: -1px;} #aside .menu-trigger2 span:nth-of-type(3) {transform:translateY(12px);} #aside .menu-trigger2.active-1 span:nth-of-type(1) {transform: translateY(0) rotate(-45deg);} #aside .menu-trigger2.active-1 span:nth-of-type(2) {width:0;} #aside .menu-trigger2.active-1 span:nth-of-type(3) {transform: translateY(0) rotate(45deg);} #aside .hd_gnb {margin:0;padding-bottom:50px;width:100%;} #aside .hd_gnb > li.hd_call {} #aside .hd_gnb > li.hd_call + li {float:right;} #aside .aside_search {margin:5px auto 30px;height:50px;border-bottom:2px #333 solid;width: calc(100% - 30px);position:relative;display:block;font-size:0;vertical-align:top;} #aside .aside_search .search_input {width: calc(100% - 27px);padding:10px 5px;font-size:16px;color:#888;line-height:30px;height:50px;font-weight:300;border:none;vertical-align:top;box-sizing:border-box;display:inline-block;} #aside .aside_search .search_input::-webkit-input-placeholder {font-size:16px;color:#888;} #aside .aside_search .search_input::-moz-placeholder {font-size:16px;color:#888;} #aside .aside_search .search_input:-ms-input-placeholder {font-size:16px;color:#888;} #aside .aside_search .search_input:-moz-placeholder {font-size:16px;color:#888;} #aside .aside_search .search_enter {width:24px;height:24px;margin:13px 0;background:url('../images/skin/icon_search_ov.png') no-repeat 0 0;background-size:auto 100%;font-size:0;border:0;vertical-align:top;box-sizing:border-box;display:inline-block;} #aside ul.slidemenu {padding:0 15px 50px;box-sizing:border-box;} #aside ul.slidemenu .depth1_li {text-align:left;display:block;vertical-align:top;font-size:0;position:relative;} #aside ul.slidemenu .depth1_li + .depth1_li {margin-top:0;margin-left:0;} #aside ul.slidemenu .depth1_li a, #aside ul.slidemenu .depth1_li .icons {display:inline-block;vertical-align:middle;cursor:pointer;} #aside ul.slidemenu .depth1_li a {width:100%} #aside ul.slidemenu .depth1_li .depth1_a {transition:0.2s;padding:20px 0;font-size:20px;line-height:26px;font-weight:500;color:#111;} #aside ul.slidemenu .depth1_li .icons {width:60px;right:0;top:0;height:66px;padding:23px 0;line-height:20px;position:absolute;text-align:right;box-sizing:border-box;z-index: -1;} #aside ul.slidemenu .depth1_li .icons span {width:20px;height:20px;background:linear-gradient(#999,#999),linear-gradient(#999,#999),transparent;background-position:center;background-size:100% 2px,2px 100%;background-repeat:no-repeat;display:inline-block;vertical-align:middle;} #aside ul.slidemenu li.on > .icons span {background:linear-gradient(#999,#999),linear-gradient(#999,#999),transparent;background-position:center;background-size:100% 2px,0 100%;background-repeat:no-repeat;} #aside ul.slidemenu .depth1_li .depth {padding:20px 20px;background:#f5f5f5;display:none;border-width:0;border-style:solid;border-color:#eee;} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;position:relative;} #aside ul.slidemenu .depth1_li .depth li + li {margin-top:14px;} #aside ul.slidemenu .depth1_li .depth li a {font-size:16px;line-height:22px;padding-left:10px;color:#666;position:relative;} #aside ul.slidemenu .depth1_li .depth li:before {width:2px;height:2px;top:10px;content:"";display:block;border-radius:100%;position:absolute;left:0;background:#999;} /* sub_visual */ .sub_visual .visual_bg .img_sub_bg{width:100%; height:200px; text-align:center; display:flex; align-items:center; justify-content:center;} .sub_visual .visual_bg .img_sub_bg > h2{font-size:50px; font-weight:500; color:#fff;} .sub_visual .visual_bg .img_sub_bg > h2.search{font-family:'Montserrat'; font-size:48px; font-weight:600;} @media only screen and (max-width:1620px) { #header .hd_lnb {transform:translateX(-20px);} #header .hd_lnb > ul > li {padding-left:33px;padding-right:33px;} .hd_gnb > li.hd_call a span {padding:0 40px 0 29px;} #header .hd_right > ul > li:nth-of-type(2) {margin:0 20px 0 32px;} #header .hd_lnb_dep2{margin-left:-275px;} #header .hd_lnb_dep2 li:nth-child(1){margin-right:76px;} #header .hd_lnb_dep2 li:nth-child(2){margin-right:22px;} #header .hd_lnb_dep2 li:nth-child(3){margin-right:82px;} } @media only screen and (max-width:1540px) { .hd_logo img {height:50px;} .hd_logo div {margin-left:17px;} .hd_logo div strong {font-size:19px;line-height:25px;} .hd_logo div span {font-size:13px;line-height:18px;} #header .header_cont {height: 95px;} #header .hd_lnb {transform:translateX(-19px);} #header .hd_lnb > ul > li, #header .hd_lnb > ul > li > a {font-size:19px;} #header .hd_lnb > ul > li {padding:32px 28px;} .hd_gnb > li.hd_call a span {padding:0 40px 0 28px;font-size:19px;} #header .hd_right > ul > li:nth-of-type(2) {margin:0 15px 0 24px;} #header .hd_right > ul > li:nth-of-type(3) {margin-right:15px;} #header .dep2_wrap{height:233px} #header .hd_lnb_dep2{margin-left:-250px;} #header .hd_lnb_dep2 li:nth-child(1){margin-right:66px;} #header .hd_lnb_dep2 li:nth-child(2){margin-right:11px;} #header .hd_lnb_dep2 li:nth-child(3){margin-right:71px;} #header .hd_lnb_dep2 li dt a{font-size:15px;} } @media only screen and (max-width:1440px) { .hd_logo img {height:46px;} .hd_logo div {margin-left:12px;} .hd_logo div strong {font-size:18px;line-height:24px;} .hd_logo div span {font-size:12px;line-height:16px;} #header .header_cont {height: 89px;} #header .hd_lnb {transform:translateX(-26px);} #header .hd_lnb > ul > li {padding:29px 35px;} .hd_gnb > li.hd_call a span {padding:0 40px 0 28px;font-size:18px;} #header .hd_lnb_dep2{margin-left:-278px;} #header .hd_lnb_dep2 li:nth-child(1){margin-right:81px;} #header .hd_lnb_dep2 li:nth-child(2){margin-right:24px;} #header .hd_lnb_dep2 li:nth-child(3){margin-right:85px;} } @media only screen and (max-width:1340px) { .hd_logo img {height:44px;} .hd_logo div {margin-left:8px;} .hd_logo div strong {font-size:16px;line-height:20px;} #header .header_cont {height: 77px;} #header .hd_lnb {transform:translateX(62px);} #header .hd_lnb > ul > li, #header .hd_lnb > ul > li > a {font-size:18px;} #header .hd_lnb > ul > li {padding:24px 35px;} #header .hd_gnb > li.hd_call {display:none;} #header .hd_right > ul > li:nth-of-type(2) {margin:0 15px 0 0;} #header .hd_lnb_dep2{margin-left:-182px;} #header .hd_lnb_dep2 li:nth-child(1){margin-right:77px;} #header .hd_lnb_dep2 li:nth-child(2){margin-right:18px;} #header .hd_lnb_dep2 li:nth-child(3){margin-right:82px;} } @media only screen and (max-width:1200px) { #header .header_cont {height: 76px;} #header .hd_lnb {transform:translateX(64px);} #header .hd_lnb > ul > li, #header .hd_lnb > ul > li > a {font-size:17px;} #header .hd_lnb > ul > li {padding:24px 35px;} #header .navi_step {margin:-3px 0;} #header .navi_step dt, #header .navi_step dd {font-size:14px;} #header .navi_step dd ul li {font-size:13px;} #header .hd_lnb_dep2 li dd{padding-left:3px;} #header .hd_lnb_dep2{margin-left:-173px;} #header .hd_lnb_dep2 li:nth-child(3){margin-right:75px;} .menu-trigger, .menu-trigger2, #aside .btn_aside_close {width:26px;height:22px;} .menu-trigger span:nth-of-type(1), .menu-trigger2 span:nth-of-type(1) {transform:translateY(-11px);} .menu-trigger span:nth-of-type(3), .menu-trigger2 span:nth-of-type(1) {transform:translateY(10px);} } @media only screen and (max-width:1023px) { #header .header_cont {height:72px;} .hd_logo img {height:42px;} .hd_logo div strong {font-size:15px;line-height:17px;} .hd_logo div span {font-size:11px;line-height:15px;} #header .hd_lnb {display:none;} #header .dep2_wrap{display:none;} #aside .aside_search .search_input {font-size:15px;} #aside .aside_search .search_input::-webkit-input-placeholder {font-size:15px;} #aside .aside_search .search_input::-moz-placeholder {font-size:15px;} #aside .aside_search .search_input:-ms-input-placeholder {font-size:15px;} #aside .aside_search .search_input:-moz-placeholder {font-size:15px;} #aside ul.slidemenu .depth1_li .depth1_a {padding:18px 0;font-size:19px;line-height:24px;} #aside ul.slidemenu .depth1_li .icons {height:60px;padding:20px 0;} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;} #aside ul.slidemenu .depth1_li .depth li + li {margin-top:12px;} #aside ul.slidemenu .depth1_li .depth li a {font-size:15px;line-height:21px;} } @media only screen and (max-width:860px) { #header .header_cont {height:64px;} .hd_logo img {height:38px;} .hd_logo div strong {font-size:14px;} #aside .aside_search {margin-bottom:26px;} #aside ul.slidemenu .depth1_li a {/* width:calc(100% - 56px); */} #aside ul.slidemenu .depth1_li .depth1_a {padding:16px 0;font-size:18px;} #aside ul.slidemenu .depth1_li .icons {width:56px;height:56px;padding:18px 0;} #aside ul.slidemenu .depth1_li .depth {padding:16px 15px;} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;} #aside ul.slidemenu .depth1_li .depth li + li {margin-top:10px;} #aside ul.slidemenu .depth1_li .depth li a {padding-left:7px;} .sub_visual .visual_bg .img_sub_bg > h2{font-size:41px;} #side_box .sub_menu{border-bottom:0;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #header .header_cont {height:56px;} .hd_logo img {height:36px;} .hd_logo div strong {font-size:13px;line-height:16px;} .hd_logo div span {font-size:10px;line-height:14px;} .menu-trigger, .menu-trigger2, #aside .btn_aside_close {width:24px;height:20px;} .menu-trigger span:nth-of-type(1), .menu-trigger2 span:nth-of-type(1) {transform:translateY(-10px);} .menu-trigger span:nth-of-type(3), .menu-trigger2 span:nth-of-type(1) {transform:translateY(9px);} #header .hd_right .menu-trigger {margin:2px 0;} #aside .hd_gnb {padding-bottom:40px;} #aside .aside_search {margin-bottom:24px; } #aside .aside_search .search_input {padding:14px 5px;line-height:22px;} #aside .aside_search .search_enter {width:22px;height:22px;margin:14px 0;} #aside ul.slidemenu {padding-bottom:40px;} #aside ul.slidemenu .depth1_li a {/* width:calc(100% - 54px); */} #aside ul.slidemenu .depth1_li .depth1_a {padding:15px 0;} #aside ul.slidemenu .depth1_li .icons {width:54px;height:54px;padding:17px 0;} #aside ul.slidemenu .depth1_li .depth li a {padding-left:6px;} .sub_visual .visual_bg .img_sub_bg > h2:after{background-size:80%;} } @media only screen and (max-width:500px) { #header .hd_right > ul {display:none;} #aside {right:-86%;width:86%;} } @media only screen and (max-width:479px) { #header .header_cont {height:52px;} .hd_logo div strong {font-size:12px;line-height:15px;} .hd_logo div span {font-size:9px;line-height:13px;} .hd_gnb > li.hd_call a span {padding:0 38px 0 25px;font-size:17px;} .hd_gnb > li.hd_call a span:before {width:18px;height:18px;} .hd_gnb > li.hd_call a span:after {width:30px;height:30px;background-size:30px;} .menu-trigger, .menu-trigger2, #aside .btn_aside_close {width:22px;height:18px;} .menu-trigger span:nth-of-type(1), .menu-trigger2 span:nth-of-type(1) {transform:translateY(-9px);} .menu-trigger span:nth-of-type(3), .menu-trigger2 span:nth-of-type(1) {transform:translateY(8px);} #header .hd_right .menu-trigger {margin:0;} #aside .hd_gnb {padding-bottom:40px;} #aside .hd_gnb > li.hd_call {} #aside .aside_search {margin:5px auto 20px;height:44px;} #aside .aside_search .search_input {width: calc(100% - 27px);padding:12px 5px;font-size:14px;line-height:20px;height:44px;} #aside .aside_search .search_input::-webkit-input-placeholder {font-size:14px;} #aside .aside_search .search_input::-moz-placeholder {font-size:14px;} #aside .aside_search .search_input:-ms-input-placeholder {font-size:14px;} #aside .aside_search .search_input:-moz-placeholder {font-size:14px;} #aside .aside_search .search_enter {width:20px;height:20px;margin:12px 0;} #aside ul.slidemenu {padding-bottom:40px;} #aside ul.slidemenu .depth1_li a {/* width:calc(100% - 48px); */} #aside ul.slidemenu .depth1_li .depth1_a {padding:13px 0;font-size:17px;line-height:22px;} #aside ul.slidemenu .depth1_li .icons {width:48px;height:48px;padding:15px 0;line-height:18px;} #aside ul.slidemenu .depth1_li .icons span {width:18px;height:18px;} #aside ul.slidemenu .depth1_li .depth {padding:16px 15px;} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;} #aside ul.slidemenu .depth1_li .depth li + li {margin-top:10px;} #aside ul.slidemenu .depth1_li .depth li a {font-size:14px;line-height:20px;padding-left:6px;} #aside ul.slidemenu .depth1_li .depth li:before {top:10px;} .sub_visual .visual_bg .img_sub_bg > h2{font-size:8.5vw} } @media only screen and (max-width:350px) { #header h1.hd_logo, #aside .hd_logo {left:12px;} #header .hd_right, #aside .btn_aside_close {right:12px;} #aside .aside_top, #aside .hd_gnb, #aside ul.slidemenu {padding-left:12px;padding-right:12px;} #aside .aside_search {width: calc(100% - 24px);} .hd_gnb > li.hd_call a span {font-size:16px;} #aside .hd_gnb {padding-bottom:40px;} #aside .hd_gnb > li.hd_call {} #aside .aside_search {margin:5px auto 20px;height:44px;} #aside ul.slidemenu .depth1_li a {width:calc(100% - 46px);} #aside ul.slidemenu .depth1_li .depth1_a {padding:12px 0;font-size:16px;} #aside ul.slidemenu .depth1_li .icons {width:46px;height:46px;padding:14px 0 15px;line-height:17px;} #aside ul.slidemenu .depth1_li .icons span {width:17px;height:17px;} #aside ul.slidemenu .depth1_li .depth {padding:14px 12px;} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;} #aside ul.slidemenu .depth1_li .depth li + li {margin-top:8px;} #aside ul.slidemenu .depth1_li .depth li a {font-size:13px;} } @media only screen and (max-width:330px) { #header h1.hd_logo, #aside .hd_logo {left:10px;} #header .hd_right, #aside .btn_aside_close {right:10px;} #aside .aside_top, #aside .hd_gnb, #aside ul.slidemenu {padding-left:10px;padding-right:10px;} #aside .aside_search {width: calc(100% - 20px);} #aside ul.slidemenu .depth1_li .depth {padding:14px 10px;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* pc 일반 */ #footer {padding-top:60px;padding-bottom:40px;background:#000518;position:relative;z-index:1;} #footer > .w_custom {} #footer .ft_info {width:44%;padding-right:15px;float:left;box-sizing:border-box;} #footer .ft_info .logo {} #footer .ft_info .logo img {width:auto;height:55px;vertical-align:top;} #footer .ft_info .logo strong {margin-left:21px;padding-top:14px;line-height:27px;font-size:20px;font-weight:400;color:#fff;vertical-align:top;display:inline-block;} #footer .ft_info p, #footer .ft_info p a {line-height:28px;font-size:13px;font-weight:300;color:#aaa;} #footer .ft_info p {padding-top:32px;} #footer .ft_info p span.empty {width:22px;display:inline-block;vertical-align:top;} #footer .ft_info p .pc_br, #footer .ft_info p .m_br, #footer .ft_info p .m_br + br {display:none;} #footer .ft_info address {margin-top:40px;line-height:17px;font-size:13px;font-weight:300;color:#777;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} #footer .ft_menu {margin-top:-3px;width:56%;float:right;box-sizing:border-box;text-align:left;} #footer .ft_menu > ul {font-size:0;vertical-align:top;} #footer .ft_menu > ul:before {width:56%;height:1px;left:44%;top:97px;background:#808189;display:inline-block;content:"";position:absolute;} #footer .ft_menu > ul > li {width:20%;display:inline-block;vertical-align:top;position:relative;z-index:1;} #footer .ft_menu > ul > li:before {width:8px;height:8px;border-radius:8px;top:36px;left:-4px;border-width:1px;background:#000518;border-color:#808189;border-style:solid;box-sizing:border-box;display:inline-block;content:"";position:absolute;z-index:-1;} #footer .ft_menu > ul > li + li {} #footer .ft_menu > ul > li > a {line-height:21px;font-size:15px;font-weight:400;color:#fff;display:block;margin:0;padding:0;} #footer .ft_menu > ul > li > ul {padding:45px 0 0;} #footer .ft_menu > ul > li > ul > li {padding:5px 0;} #footer .ft_menu > ul > li > ul > li + li {} #footer .ft_menu > ul > li > ul > li > a {line-height:20px;font-size:14px;font-weight:300;color:#ddd;display:block;margin:0;padding:0;} #quick {position:fixed;bottom:30px;right:30px;z-index:100;} #quick .quick_menu {} #quick .quick_menu li {} #quick .quick_menu li + li {margin-top:10px;} #quick .quick_menu li a, #quick .quick_menu li button {display:block;width:54px;height:54px;border-radius:100%;font-size:0;} #quick .quick_menu li.top {} #quick .quick_menu li.top button {background:#333333 url('../images/skin/quick_top.png') no-repeat center;} @media only screen and (max-width:1447px) { #footer .ft_info {width:44%;} #footer .ft_menu {width:56%;} #footer .ft_menu > ul:before {width:56%;left:44%;} } @media only screen and (max-width:1247px) { #footer {padding-top:50px;} #footer .ft_info {width:50%;padding-right:10px;} #footer .ft_info .logo img {height:48px;} #footer .ft_info .logo strong {margin-left:18px;padding-top:12px;line-height:26px;font-size:19px;} #footer .ft_info p, #footer .ft_info p a {line-height:26px;} #footer .ft_info p {padding-top:28px;} #footer .ft_info p span.empty {width:20px;} #footer .ft_info address {margin-top:32px;} #footer .ft_menu {width:50%;} #footer .ft_menu > ul:before {width:51%;left:50%;top:87px;} } @media only screen and (max-width:1023px) { #footer {padding-top:40px;} #footer .ft_info .logo img {height:44px;} #footer .ft_info .logo strong {margin-left:15px;padding-top:9px;line-height:24px;font-size:18px;} #footer .ft_info p, #footer .ft_info p a {line-height:24px;} #footer .ft_info p {padding-top:20px;} #footer .ft_info address {margin-top:26px;} #footer .ft_menu {margin-top:-2px;} #footer .ft_menu > ul:before {top:77px;} #footer .ft_menu > ul > li > a {line-height:20px;font-size:14px;} #footer .ft_menu > ul > li > ul {padding-top:38px;} #footer .ft_menu > ul > li > ul > li {padding:4px 0;} #footer .ft_menu > ul > li > ul > li > a {line-height:20px;font-size:13px;} } @media only screen and (max-width:960px) { #footer .ft_info {width:100%;padding-right:0;float:none;} #footer .ft_menu {display:none;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #footer {padding-top:30px;padding-bottom:30px;} #footer .ft_info .logo img {height:40px;} #footer .ft_info .logo strong {display:none;} #footer .ft_info p, #footer .ft_info p a {line-height:22px;} #footer .ft_info p {padding-top:18px;} #footer .ft_info address {margin-top:24px;} } @media only screen and (max-width:479px) { #footer {padding-top:20px;padding-bottom:20px;} #footer .ft_info .logo img {height:36px;} #footer .ft_info .logo strong {display:none;} #footer .ft_info p, #footer .ft_info p a {line-height:20px;} #footer .ft_info p {padding-top:16px;} #footer .ft_info p .m_br + br {display:inline-block;} #footer .ft_info p .m_br + br + .empty {display:none;} #footer .ft_info address {margin-top:22px;} } @media only screen and (max-width:375px) { } /*─────────────────────────────────────────────────────────── SIDE_BOX | outline/left_bbs.html｜outline/left_goods.html｜outline/left_member.html｜outline/left_service.html ───────────────────────────────────────────────────────────*/ #side_box {padding-bottom:75px;} #side_box .sub_menu {width:100%;padding: 15px 0;margin:0;z-index:2;text-align:center;vertical-align:top;border-bottom: 1px solid #eee;} #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: 50px;height: 50px;border-bottom:0;position:relative;z-index:1;box-sizing:border-box;vertical-align: top;background: #f5f5f5; margin-right:20px; border-radius:5px;} #side_box .sub_menu dd:last-child{margin-right:0;} #side_box .sub_menu dd + dd {} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height: 50px;line-height: 50px;font-size:16px;font-weight:400;padding: 0px 32px;color:#666;display:inline-block;box-sizing:border-box;vertical-align:top; border-radius: 5px;} #side_box .sub_menu dd:hover a, #side_box .sub_menu dd.on a, #side_box .sub_menu dd strong {background:#1a478d; color:#fff;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 {} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1023px) { #side_box{padding-bottom:50px} } @media only screen and (max-width:860px) { #side_box .sub_menu dd {line-height:1;height:auto;padding:0px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:38px;line-height:38px;font-size:14px;padding:0 20px;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { } @media only screen and (max-width:479px) { #side_box .sub_menu dd:hover a{color:#666;background:#f5f5f5;} #side_box{padding-bottom:20px} #side_box .sub_menu{padding:15px 0 0;} #side_box .sub_menu dl{width:95%;} #side_box .sub_menu dd{margin-right:10px; width:calc(100% / 2 - 10px); margin-bottom:15px;} #side_box .sub_menu dd:nth-child(3n){margin-right:0;} #side_box .sub_menu dd:nth-child(4n){margin-right:10px;} #side_box .sub_menu dd:nth-child(5){margin-right:0;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong{width:100%; height:100%;} } /*─────────────────────────────────────────────────────────── MAIN | index.html ───────────────────────────────────────────────────────────*/ /* pc 일반 */ /* 메인 비주얼 */ .main_visual .slick-slide {} .main_visual_wrap {} .main_visual {height: calc(100vh - 0px);min-height:700px;padding:0;position:relative;width:100%;margin:0 auto;box-sizing:border-box;overflow:hidden;z-index:1;} .main_visual .slick-slide {height: calc(100vh - 0px);min-height:700px;overflow:hidden;position:relative;text-align:center;z-index:1;} .main_visual .slick-slide .thumb {background-position: center;background-size:cover !important;height:100%;width: 100%;margin:0 auto;text-align:Center;position:absolute;left: 0;top:0;outline:0;z-index:1;} .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 .txt_box {width:100%;max-width:1440px;padding:0 20px;left:50%;top:45.3%;text-align:left;transform:translate(-50%, -50%);position:absolute;font-size:0;z-index:3;box-sizing:border-box;} .main_visual .slick-slide .txt_box h3, .main_visual .slick-slide .txt_box p, .main_visual .slick-slide .txt_box span {line-height:1.2em;color:#fff;font-weight:400;margin:0;padding:0;text-align:left;vertical-align:top;display:block;font-family:'S-CoreDream-5Medium','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .main_visual .slick-slide .txt_box h3 {font-size:40px;} .main_visual .slick-slide .txt_box p {font-size:80px;letter-spacing:-3px;line-height:1.15em;margin-top:0.24em;font-family:'S-CoreDream-8Heavy','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .main_visual .slick-slide .txt_box span {font-size:30px;margin-top:1em;} .main_visual .slick-slide .txt_box .m_br, .main_visual .slick-slide .txt_box .m_br + br {display:none;} .main_visual .visual_control {width:100%;max-width:1430px;padding:0 15px;left:50%;transform:translateX(-50%);bottom:44px;top:auto;position:absolute;text-align:left;z-index:1;box-sizing:border-box;} .main_visual .slick-arrow {width:70px;height:70px;top:50%;position:absolute;z-index:6;font-size:0;display:inline-block;vertical-align:top;margin:0;padding:0;border:0;outline:0;font-size:0;}/*position:absolute;top:50%;*/ .main_visual .slick-arrow:before {width:38px;height:38px;border-width:2px 2px 0 0;left:50%;top:50%;opacity:0.5;position:absolute;border-style:solid;box-sizing:border-box;border-color:#fff;display:inline-block;content:"";} .main_visual .slick-prev {left:43px;} .main_visual .slick-next {right:43px;} .main_visual .slick-prev:before {transform:translate(-25%, -50%) rotate(-135deg);} .main_visual .slick-next:before {transform:translate(-75%, -50%) rotate(45deg);} .main_visual .slick-arrow:hover:before {opacity:1;} .main_visual .slick-dots {line-height:21px;height:21px;bottom:76px;left: calc(50% - 127px);width:auto;transform:translateX(-50%);font-size:0;vertical-align:top;text-align:left;position:absolute;box-sizing:border-box;z-index:6;} .main_visual .slick-dots li {padding:0;line-height:inherit;margin:0;display:inline-block;vertical-align:top;font-size:0;text-align:center;} .main_visual .slick-dots li button {font-size:14px;letter-spacing:0;line-height:inherit;padding:0 10px;color:#fff;font-weight:400;outline:0;display:inline-block;vertical-align:top;margin:0;opacity:0.5;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;border:0;} .main_visual .slick-dots li button:before {font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;font-weight:inherit;vertical-align:inherit;display:inline-block;content:"0";font-family:inherit;} .main_visual .slick-dots li + li {} .main_visual .slick-dots li.slick-active {} .main_visual .slick-dots li.slick-active button {opacity:1;} .main_visual .slideCount {line-height:20px;padding:0;height:20px;font-size:20px;letter-spacing:1.8px;font-weight:500;color:#000;box-sizing:border-box;display:inline-block;vertical-align:top;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .main_visual .slideCount span {line-height:inherit;height:inherit;font-size:inherit;letter-spacing:inherit;font-weight:inherit;color:inherit;opacity:0.55;vertical-align:top;display:inline-block;font-family:inherit;} .main_visual .slideCount .slideCountItem {opacity:1;} .main_visual .slider-progress-wrap {width: calc(100% - 140px);height:2px;margin:9px 23px 0 0;z-index:1;transition:all 6s;padding:0;font-size:0;text-align:left;vertical-align:top;display:inline-block;box-sizing:border-box;position:relative;} .main_visual .slider-progress-wrap .slider-progress {width:100%;background:rgba(255, 255, 255, 0.4);display: inline-block;vertical-align:top;box-sizing:border-box;text-align:left;} .main_visual .slider-progress-wrap .slider-progress .progress {height:2px;background: rgba(26, 70, 141,1);width: 0;} .main_visual .slider-progress-wrap .slider-progress .progress.active {width:100%;} .main_visual .slide_btn {width:1px;height:1px;background-size:auto 13px !important;font-size:0;outline:0;border:0;margin:0;padding:0;display:inline-block;vertical-align:top;background-repeat:no-repeat !important;background-position:50% 50% !important;position:relative;z-index:6;overflow:hidden;} .main_visual .slide_btn.btn_pause {background-image:url(../images/skin/icon_pause.png);} .main_visual .slide_btn.btn_play {background-image:url(../images/skin/icon_play.png);} .main_visual .visual_all_txt {width:100%;padding:0 80px;text-align:left;transform:translate(-50%, 0%);position:absolute;z-index:2;left:50%;top:10.5%;box-sizing:border-box;} /* visual active */ .main_visual .slick-slide .thumb {transition:transform 5s ease-in-out, opacity 5s ease-in-out;transform:scale(1.2) rotate(0.003deg);opacity: .9;} .main_visual .slick-slide.slick-active .thumb {animation: step01 5s ease-in-out;animation-fill-mode:forwards;animation-delay: 0.1s;}/*transition:transform 5s ease-in-out, opacity 5s ease-in-out;transform:scale(1) rotate(0.003deg);opacity:1;*/ #container .txtani {-webkit-transition: all 1s ease-in-out 0.1s;-moz-transition: all 1s ease-in-out 0.1s;-o-transition: all 1s ease-in-out 0.1s;transition: all 1s ease-in-out 0.1s;opacity:0;} .main_visual .visual_all_txt .txtani, .main_visual .slick-slide.slick-active .txtani {animation: step02 1.0s ease-in-out;animation-fill-mode:forwards;animation-delay: 0.6s;} .main_visual .visual_all_txt h3.txtani{} .main_visual .visual_all_txt p.txtani{} .main_visual .slick-slide.slick-active .txtani{animation-delay: 0.6s;} .main_visual .slick-slide.slick-active p.txtani {animation-delay: 1.0s;} #container .over-wr {overflow:hidden;} #container .left-right {transform: translate(-100px,0);} #container .right-left {transform: translate(100px,0);} #container .top-bottom {transform: translate(0,-100px);} #container .bottom-top {transform: translate(0,100px);} @keyframes step01{ 0%{transition:transform 5s ease-in-out, opacity 5s ease-in-out;transform:scale(1.2) rotate(0.003deg);opacity: .9;} 100%{transition:transform 5s ease-in-out, opacity 5s ease-in-out;transform:scale(1) rotate(0.003deg);opacity:1;} } @keyframes step02{ 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_title {margin:0;padding:0;line-height:1em;font-size:56px;font-weight:700;letter-spacing:-2.4px;text-align:center;width:100%;color:#00000f;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;display:block;} .main_title strong {padding:0 10px 0 0;margin:0 auto;display:inline-block;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;font-family:inherit;position:relative;z-index:1;vertical-align:top;} .main_title strong:after {width:6px;height:6px;right:0;top:2px;border-radius:100%;background:#1a468d;display:inline-block;content:"";position:absolute;} /* 제품 */ .main_product {padding:128px 0 120px;} .main_product .main_title {margin-bottom:60px;} .pr_fold_wrap {} .main_pr {width:100%;max-width:1400px;margin:0 auto;padding:0;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:460px;background-color:#f5f5f5;background-position:50% 0;background-size:cover;position:relative;z-index:1;vertical-align:top;display:inline-block;transition:all 1s cubic-bezier(.29,0,.2,1);overflow:hidden;z-index:1;} .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 {filter: grayscale(100%);background-repeat:no-repeat !important;position:absolute;left:0;width:100%;height:100%;top:0;z-index:1;transition:all 0.3s;} .main_pr ul li.pr_cut .cut_bg:before {border-width:0;opacity:0;position:absolute;z-index:-1;width:100%;height:100%;box-sizing:border-box;background:none;border-style:solid;border-color:#1a478d;display:inline-block;content:"";transition:all 0.2s;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-image:url(../images/skin/bnr_pr_cut01.png);background-position:50% 50%;background-size:auto 185px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-image:url(../images/skin/bnr_pr_cut02.png);background-position:48.8% 50%;background-size:auto 185px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-image:url(../images/skin/bnr_pr_cut03.png);background-position:50% 50%;background-size:auto 185px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-image:url(../images/skin/bnr_pr_cut04.png);background-position:55% 50%;background-size:auto 185px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-image:url(../images/skin/bnr_pr_cut05.png);background-position:55% 50%;background-size:auto 185px;} .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:#333;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .main_pr ul li.pr_cut .cut_preview {font-size:20px;width:100%;line-height:22px;font-weight:600;left:0;top:26px;text-align:center;position:absolute;z-index:3;} .main_pr ul li.pr_cut .cut_preview span {text-align:left;font-size:inherit;line-height:inherit;font-weight:inherit;display:inline-block;vertical-align:top;margin:0 auto;font-family:inherit;color:inherit;} .main_pr ul li.pr_cut .cut_txt {padding:14px 40px 22px;width:696px;background:#1a478d;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 p {font-size:16px;font-weight:400;color:#fff;font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;word-break:keep-all;} .main_pr ul li.pr_cut.open {flex:4.2;background-image:url(../images/skin/bg_pr.png);box-shadow:0 0 50px rgba(0, 0, 0, 0.5);z-index:2;} .main_pr ul li.pr_cut.open .cut_link {} .main_pr ul li.pr_cut.open .cut_bg {filter: grayscale(0%);} .main_pr ul li.pr_cut.open .cut_bg:before {border-width:6px;opacity:1;position:absolute;z-index:-1;width:100%;height:100%;box-sizing:border-box;background:none;border-style:solid;border-color:#1a478d;display:inline-block;content:"";} .main_pr ul li.pr_cut.open .cut_preview {font-size:24px;font-weight:600;left:40px;text-align:left;} .main_pr ul li.pr_cut.open .cut_txt {opacity:1;} .main_pr ul li.pr_cut.open .cut_txt p {} /* 브랜드 */ .main_brand {padding:98px 0 130px;background-image:url(../images/skin/bg_brand.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;} .main_brand .main_title {margin-bottom:45px;} .brand_slide_wrap {} .brand_slide_wrap .brand_slide_zoom {width:39.4%;float:left;} .brand_slide_wrap .brand_slide_zoom .brand_zoom {overflow:hidden;} .brand_zoom {} .brand_zoom .slick_cut {border:1px #ddd solid;position:relative;z-index:1;box-sizing:border-box;} .brand_zoom .slick_cut .thumb {width:100%;height:0;padding:67% 0 0;position:relative;z-index:1;background:#fff;} .brand_zoom .slick_cut .thumb img {left:50%;top:50%;transform:translate(-50%, -50%);position:absolute;} .brand_zoom .slick_cut .txt {height:0;padding:0;padding-top:33%;box-sizing:border-box;background:#1a478d;z-index:2;width:100%;text-align:left;position:relative;z-index:1;} .brand_zoom .slick_cut .txt .txt_box {width:calc(100% - 66px);left:33px;top:50%;transform:translateY(-50%);position:absolute;} .brand_zoom .slick_cut .txt p {margin-bottom:17px;font-size:16px;line-height:22px;max-height:88px;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;word-wrap:break-word;font-weight:300;color:#fff;} .brand_zoom .slick_cut .txt .btn_more {height:30px;line-height:27px;border-radius:30px;padding:0 20px;font-size:16px;font-weight:300;overflow:hidden;background: #133366;color: #fff;box-sizing:border-box;text-align:left;display:inline-block;vertical-align:top;margin:0 auto 0 0;} .brand_zoom .slick_cut .txt .btn_more span {padding:0 22px 0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;display:inline-block;vertical-align:top;margin:0 auto;position:relative;z-index:1;} .brand_zoom .slick_cut .txt .btn_more span:after {width:8px;height:8px;transform:translate(-25%, -50%) rotate(45deg);border-width:1px 1px 0 0;top:50%;right:0px;position:absolute;display:inline-block;content:"";box-sizing:border-box;border-style:solid;border-color: #fff;} .brand_slide_wrap .brand_slide_pager {width:57.9%;float:right;} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 30px);margin:-10px -15px;overflow:hidden;} .brand_pager {} .brand_pager .slick-slide {outline:0;border:0;padding:0;margin:0;font-size:0;} .brand_pager .slick-track {width:100% !important;} .brand_pager .slick_cut {width:25%;padding:10px 15px;position:relative;z-index:1;box-sizing:border-box;opacity:1 !important;cursor:pointer;} .brand_pager .slick_cut:before {border-width:0;opacity:0;width: calc(100% - 30px);height: calc(100% - 20px);left:50%;top:50%;transform:translate(-50%, -50%);border-style:solid;border-color:#385f9c;position:absolute;display:inline-block;box-sizing:border-box;z-index:2;content:"";} .brand_pager .slick_cut .thumb {padding:0;padding-top:94.35%;height:0;background:#fff;position:relative;z-index:1;width:100%;} .brand_pager .slick_cut .thumb img {width:100%;height:auto;position:absolute;left:0;top:50%;transform:translateY(-50%);} .brand_pager .slick_cut .arrow_sm {right:35px;bottom:30px;width:30px;height:30px;border-radius:100%;display:inline-block;z-index:3;background:#1a478d;position:absolute;} .brand_pager .slick_cut .arrow_sm:after {width:10px;height:10px;border-width:1px 1px 0 0;top:50%;left:50%;transform:translate(75%, 100%) rotate(45deg);display:inline-block;content:"";box-sizing:border-box;border-style:solid;border-color:#fff;} .brand_pager .slick_cut.slick-current:before {border-width:4px;opacity:1;} /* 서비스 */ .main_service {padding:98px 0 140px;} .main_service .main_title {margin-bottom:53px;} .bnr_service {width:45.7%;height:0;padding:310px 0 0;background-image:url(../images/skin/bg_service.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;box-shadow:20px 20px 0 rgba(238, 238, 238, 1);float:left;position:relative;z-index:1;} .bnr_service a {position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:2;} .bnr_service .txt {width: calc(100% - 100px);position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1;} .bnr_service h4, .bnr_service .btn_arrow {color:#fff;} .bnr_service h4 {} .bnr_service h4 span, .bnr_service h4 strong {display:block;} .bnr_service h4 span {font-size:22px;line-height:28px;font-weight:400;} .bnr_service h4 strong {margin:20px 0 60px;font-size:42px;line-height:48px;font-weight:500;} .bnr_service .btn_arrow {font-size:17px;line-height:24px;height:50px;border-radius:50px;padding:12px 24px;font-weight:400;box-sizing:border-box;border-width:1px;border-style:solid;border-color: rgba(255, 255, 255, 0.5);display:inline-block;margin:0 auto 0 0;} .bnr_service .btn_arrow span {padding:0 32px 0 0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;display:inline-block;vertical-align:top;position:relative;z-index:1;} .bnr_service .btn_arrow span:after {width:25px;height:6px;background-repeat:no-repeat;background-position:100% 50%;background-size:cover;background-image:url(../images/skin/icon_arrow.png);right:0;top:50%;transform:translateY(-50%);position:absolute;display:inline-block;content:"";} .bnr_bbs {width:47.8%;float:right;} .bnr_bbs h4 {border-bottom:2px #000 solid;padding:8px 0 23px;text-align:left;vertical-align:top;} .bnr_bbs h4 a {font-size:32px;line-height:40px;font-weight:500;color:#333;display:block;vertical-align:top;position:relative;} .bnr_bbs h4 a:after {width:23px;height:23px;background:linear-gradient(#5e4929,#5e4929),linear-gradient(#5e4929,#5e4929),transparent;background-position:center;background-repeat:no-repeat;background-size:100% 1px,1px 100%;top:50%;right:0;transform:translateY(-50%);position:absolute;display:inline-block;content:"";vertical-align:middle;} .bnr_bbs ul {padding:35px 0 0;} .bnr_bbs ul li {padding:0 0 0 14px;font-size:17px;font-weight:400;color:#444;margin:0;box-sizing:border-box;position:relative;z-index:1;} .bnr_bbs ul li + li {margin-top:19px;} .bnr_bbs ul li:before {width:3px;height:3px;border-radius:100%;background:#888;left:0;top:50%;transform:translateY(-50%);display:inline-block;content:"";position:absolute;} .bnr_bbs ul li a {position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:2;} .bnr_bbs ul li .txt {display:table;table-layout:fixed;margin:0 auto;width:100%;box-sizing:border-box;border-collapse:collapse;} .bnr_bbs ul li strong, .bnr_bbs ul li span {line-height:23px;padding:0;display:table-cell;vertical-align:middle;box-sizing:border-box;border-collapse:collapse;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bnr_bbs ul li strong {width:70%;font-size:17px;font-weight:400;color:#444;text-align:left;} .bnr_bbs ul li span {font-size:15px;font-weight:400;color:#777;text-align:right;} /* 지점찾기 */ .main_map {background-image:url(../images/skin/bg_map.png);background-repeat:no-repeat;background-position:50% 63%;background-size:1920px auto;} .main_map h3 {display:none;} .main_map .w_custom {position:relative;z-index:1;} .main_map .txt {left:15px;color:#fff;transform:translateY(-50%);top:50%;position:absolute;text-align:left;z-index:5;} .main_map .txt strong, .main_map .txt p, .main_map .txt a {font-weight:400;color:inherit;margin:0;padding:0;vertical-align:top;text-align:left;box-sizing:border-box;} .main_map .txt strong {font-size:40px;line-height:46px;font-weight:500;} .main_map .txt p {font-size:20px;line-height:25px;margin:22px 0 37px;} .main_map .txt a {font-size:17px;height:50px;line-height:48px;padding:0 22px;border-radius:50px;border-color:rgba(255, 255, 255, 0.4);font-weight:500;border-width:1px;border-style:solid;display:inline-block;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .main_map .txt a span {padding:0 32px 0 0;font-size:inherit;display:inline-block;vertical-align:top;line-height:inherit;margin:0;position:relative;z-index:1;font-family:inherit;} .main_map .txt a span:after {width:25px;height:6px;background-repeat:no-repeat;background-position:100% 50%;background-size:cover;background-image:url(../images/skin/icon_arrow.png);right:0;top:50%;transform:translateY(-50%);position:absolute;display:inline-block;content:"";} .main_map .mark_wrap {width: calc(100% - 30px);min-width:1400px;max-width:1430px;transform:translateX(-50%);position:absolute;left:50%;top:0;height:100%;z-index:2;} .main_map .mark_wrap span {width:46px;height:54px;margin:0;padding:0;opacity:0;background-size:100% 100%;background-position:50%;background-image:url(../images/skin/icon_mark.png);background-repeat:no-repeat;display:inline-block;vertical-align:top;font-size:0;position:absolute;transition:all 0.3s;} .main_map .mark_wrap span.on {opacity:1;} .main_map .mark_wrap span#mark1 {left:35.2%;top:22.0%;} .main_map .mark_wrap span#mark2 {left: 37.7%;top: 75.8%;} .main_map .mark_wrap span#mark3 {left:29.6%;top:41.7%;} .main_map .mark_wrap span#mark4 {left: 23%;top: 68.6%;} .main_map .call_list {padding:65px 0;width:340px;float:right;position:relative;z-index:3;} .main_map .call_list ul {} .main_map .call_list li {height:50px;padding:12px 22px 12px 34px;line-height:24px;border-radius:50px;background-color: rgba(0, 0, 0, 0.2);border-color: rgba(255, 255, 255, 0.4);border-width:1px;border-style:solid;box-sizing:border-box;position: relative;} .main_map .call_list li.on {background-color: rgba(0, 0, 0, 0.4);border-color: rgba(255, 255, 255, 1);} .main_map .call_list li + li {margin-top:10px;} .main_map .call_list li a.link {position:absolute;width:100%;height:100%;left:0;top:0;z-index:10;display:block;} .main_map .call_list li dl {display:table;table-layout:fixed;width:100%;margin:0 auto;border-collapse:collapse;box-sizing:border-box;} .main_map .call_list li dt, .main_map .call_list li dd {margin:0;padding:0;line-height:24px;font-size:16px;font-weight:500;color:#fff;text-align:left;display:table-cell;border-collapse:collapse;box-sizing:border-box;} .main_map .call_list li dt {width:152px;font-weight:400;letter-spacing:-0.7px;} .main_map .call_list li dd {padding-left:17px;background-size:auto 14px;background-position:0 60%;background-image:url(../images/skin/icon_tel.png);background-repeat:no-repeat;font-family:'Montserrat','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,dotum,sans-serif;} .main_map .call_list li > span {display:block;cursor:pointer;} .main_map .call_list li > a {display:none;} @media only screen and (max-width:1647px) { /* 메인 비주얼 */ .main_visual .slick-prev {left:18px;} .main_visual .slick-next {right:18px;} } @media only screen and (max-width:1547px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box h3 {font-size:39px;} .main_visual .slick-slide .txt_box p {font-size:78px;} .main_visual .slick-prev {left:50%;transform:translate(-750px, -50%);} .main_visual .slick-next {right:50%;transform:translate(750px, -50%);} } @media only screen and (max-width:1497px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 58px;} .main_visual .slick-slide .txt_box h3 {font-size:38px;} .main_visual .slick-slide .txt_box p {font-size:74px;letter-spacing:-3px;} .main_visual .slick-slide .txt_box span {font-size:29px;} .main_visual .slick-arrow {width:62px;height:62px;} .main_visual .slick-arrow:before {width:34px;height:34px;} .main_visual .slick-prev {transform:translate(-705px, -50%);} .main_visual .slick-next {transform:translate(705px, -50%);} .main_visual .slideCount {float:right;} .main_visual .slider-progress-wrap {width: calc(100% - 100px);margin-right:0;} } @media only screen and (max-width:1447px) { /* 제품 */ .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-size:auto 160px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-size:auto 160px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-size:auto 160px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-size:auto 160px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-size:auto 160px;} .main_pr ul li.pr_cut .cut_txt {padding:14px 30px 22px;width:696px;} .main_pr ul li.pr_cut.open {flex:3.9;box-shadow:0 0 35px rgba(0, 0, 0, 0.5);} .main_pr ul li.pr_cut.open .cut_bg:before {border-width:5px;} .main_pr ul li.pr_cut.open .cut_preview {left:30px;} /* 지점찾기 */ .main_map {background-position:38% 63%;} .main_map .mark_wrap {min-width:1400px;left:56%;} } @media only screen and (max-width:1430px) { /* 지점찾기 */ .main_map .mark_wrap span#mark1 {left: 33.5%;top:22.0%;} .main_map .mark_wrap span#mark2 {left: 37.7%;top: 75.8%;} .main_map .mark_wrap span#mark3 {left: 28%;top:41.7%;} .main_map .mark_wrap span#mark4 {left: 23%;top: 68.6%;} } @media only screen and (max-width:1380px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box h3 {font-size:35px;} .main_visual .slick-slide .txt_box p {font-size:69px;letter-spacing:-2.6px;} .main_visual .slick-slide .txt_box span {font-size:28px;} .main_visual .slick-arrow {width:60px;height:60px;} .main_visual .slick-arrow:before {width:32px;height:32px;} .main_visual .slick-prev {left:0px;transform:translate(0, -50%);} .main_visual .slick-next {right:0px;transform:translate(0, -50%);} .main_visual .slideCount {font-size:19px;letter-spacing:1.5px;} } @media only screen and (max-width:1280px) { /* 메인 비주얼 */ .main_visual {min-height:680px;} .main_visual .slick-slide {min-height:680px;} .main_visual .slick-slide .txt_box {padding:0 45px;top:45.5%;} .main_visual .slick-slide .txt_box h3 {font-size:31px;} .main_visual .slick-slide .txt_box p {font-size:64px;letter-spacing:-2.4px;} .main_visual .slick-slide .txt_box span {font-size:27px;} .main_visual .visual_control {bottom:40px;} .main_visual .slick-arrow {width:50px;height:50px;} .main_visual .slick-arrow:before {width:30px;height:30px;} .main_visual .slideCount {font-size:18px;} .main_visual .slider-progress-wrap {width: calc(100% - 90px);} /* 타이틀 */ .main_title {font-size:53px;} /* 브랜드 */ .brand_slide_wrap .brand_slide_zoom {width:41%;} .brand_zoom .slick_cut .thumb {padding-top:65%;} .brand_zoom .slick_cut .txt {padding-top:35%;} .brand_zoom .slick_cut .txt .txt_box {width:calc(100% - 66px);left:33px;} .brand_zoom .slick_cut .txt p {margin-bottom:16px;font-size:15px;line-height:21px;max-height:84px;} .brand_zoom .slick_cut .txt .btn_more {font-size:15px;} .brand_zoom .slick_cut .txt .btn_more span {padding-right:22px;} .brand_slide_wrap .brand_slide_pager {width:56%;} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 20px);margin:-10px;} .brand_pager .slick_cut {padding:10px;} .brand_pager .slick_cut:before {width: calc(100% - 20px);height: calc(100% - 20px);} .brand_pager .slick_cut .thumb {padding-top:98.45%;} .brand_pager .slick_cut .arrow_sm {right:25px;bottom:25px;width:28px;height:28px;} .brand_pager .slick_cut .arrow_sm:after {width:8px;height:8px;transform:translate(100%, 50%) rotate(45deg);} /* 제품 */ .main_pr ul li.pr_cut {padding-top:430px;} .main_pr ul li.pr_cut + li {margin-left:8px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 50%;background-size:auto 140px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:48.8% 50%;background-size:auto 140px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:auto 140px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:55% 50%;background-size:auto 140px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:55% 50%;background-size:auto 140px;} .main_pr ul li.pr_cut .cut_preview {font-size:19px;letter-spacing:-0.8px;line-height:21px;top:24px;} .main_pr ul li.pr_cut .cut_txt {padding:14px 20px 22px;width:596px;} .main_pr ul li.pr_cut.open {flex:3.6;box-shadow:0 0 25px rgba(0, 0, 0, 0.5);} .main_pr ul li.pr_cut.open .cut_bg:before {border-width:4px;} .main_pr ul li.pr_cut.open .cut_preview {font-size:22px;left:20px;letter-spacing:-0.4px;} /* 서비스 */ .bnr_service {width:47.5%;padding-top:290px;box-shadow:15px 15px 0 rgba(238, 238, 238, 1);} .bnr_service .txt {width: calc(100% - 70px);} .bnr_service h4 span {font-size:21px;line-height:26px;} .bnr_service h4 strong {margin:20px 0 60px;font-size:39px;line-height:44px;} .bnr_service .btn_arrow {font-size:16px;line-height:22px;height:46px;border-radius:46px;padding:11px 20px;} .bnr_service .btn_arrow span {padding-right:30px;} .bnr_service .btn_arrow span:after {width:21px;height:5px;} .bnr_bbs {width:48%;} .bnr_bbs h4 {padding:10px 0 23px;} .bnr_bbs h4 a {font-size:30px;line-height:38px;} .bnr_bbs h4 a:after {width:22px;height:22px;} .bnr_bbs ul {padding-top:35px;} .bnr_bbs ul li {padding-left:14px;font-size:16px;} .bnr_bbs ul li + li {margin-top:18px;} .bnr_bbs ul li strong, .bnr_bbs ul li span {line-height:22px;} .bnr_bbs ul li strong {font-size:16px;} .bnr_bbs ul li span {font-size:14px;} /* 지점찾기 */ .main_map {background-position:35% 63%;} .main_map .txt strong {font-size:38px;line-height:44px;} .main_map .txt p {font-size:19px;line-height:23px;margin:19px 0 34px;} .main_map .txt a {font-size:16px;height:46px;line-height:44px;padding:0 20px;border-radius:46px;} .main_map .txt a span {padding-right:30px;} .main_map .txt a span:after {width:21px;height:5px;} .main_map .mark_wrap {left:63%;} } @media only screen and (max-width:1217px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box p {font-size:60px;line-height:1.2em;} /* 제품 */ .main_product {padding:10% 0 9.5%;} .main_product .main_title {margin-bottom:4.5%;} .main_pr ul li.pr_cut + li {margin-left:5px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 50%;background-size:auto 135px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:48.8% 50%;background-size:auto 135px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:auto 135px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:55% 50%;background-size:auto 135px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:55% 50%;background-size:auto 135px;} .main_pr ul li.pr_cut .cut_txt {width:556px;} /* 브랜드 */ .brand_slide_wrap .brand_slide_zoom {width:42%;} .brand_zoom .slick_cut .txt .txt_box {width:calc(100% - 50px);left:25px;} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 16px);margin:-8px;} .brand_pager .slick_cut {padding:8px;} .brand_pager .slick_cut:before {width: calc(100% - 16px);height: calc(100% - 16px);} .brand_pager .slick_cut .thumb {padding-top:101.15%;} } @media only screen and (max-width:1100px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 38px;} .main_visual .slick-slide .txt_box h3 {font-size:28px;} .main_visual .slick-slide .txt_box p {font-size:58px;letter-spacing:-2.8px;} .main_visual .slick-slide .txt_box span {font-size:27px;} .main_visual .visual_control {bottom:36px;} .main_visual .slick-arrow {width:40px;height:40px;} .main_visual .slick-arrow:before {width:26px;height:26px;} .main_visual .slideCount {font-size:17px;letter-spacing:1.3px;color:#fff;} .main_visual .slider-progress-wrap {width: calc(100% - 80px);} /* 제품 */ .main_product {padding:11.5% 0 12%;} .main_pr ul li.pr_cut {padding-top:410px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 50%;background-size:auto 125px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:48.8% 50%;background-size:auto 125px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:auto 125px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:55% 50%;background-size:auto 125px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:55% 50%;background-size:auto 125px;} .main_pr ul li.pr_cut .cut_txt {width:506px;} .main_pr ul li.pr_cut.open {box-shadow:0 0 20px rgba(0, 0, 0, 0.5);} /* 브랜드 */ .main_brand {padding:8% 0 10.3%;} .main_brand .main_title {margin-bottom:3.5%;} .brand_zoom .slick_cut .thumb {padding-top:63%;} .brand_zoom .slick_cut .txt {padding-top:37%;} .brand_zoom .slick_cut .txt .txt_box {width:calc(100% - 40px);left:20px;} .brand_zoom .slick_cut .txt p {font-size:14px;line-height:20px;max-height:80px;} .brand_zoom .slick_cut .txt .btn_more {height:30px;line-height:27px;border-radius:30px;padding:0 15px;font-size:15px;} .brand_zoom .slick_cut .txt .btn_more span {padding-right:20px;} .brand_zoom .slick_cut .txt .btn_more span:after {transform:translate(-25%, -40%) rotate(45deg);} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 10px);margin:-5px;} .brand_pager .slick_cut {padding:5px;} .brand_pager .slick_cut:before {width: calc(100% - 10px);height: calc(100% - 10px);} .brand_pager .slick_cut .thumb {padding-top:100.85%;} .brand_pager .slick_cut .arrow_sm {right:20px;bottom:20px;width:24px;height:24px;} .brand_pager .slick_cut .arrow_sm:after {transform:translate(75%, 25%) rotate(45deg);} } @media only screen and (max-width:1023px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 34px;} .main_visual .slick-slide .txt_box p {font-size:54px;} /* 타이틀 */ .main_title {line-height:1.14em;font-size:48px;letter-spacing:-2.0px;} .main_title strong:after {width:5px;height:5px;} /* 제품 */ .main_product {padding:12.5% 0 13%;} .main_pr ul li.pr_cut {padding-top:400px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:48.8% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:55% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:55% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut .cut_preview {font-size:18px;letter-spacing:-0.5px;line-height:20px;top:20px;} .main_pr ul li.pr_cut .cut_txt p {font-size:15px;line-height:21px;} .main_pr ul li.pr_cut.open .cut_bg:before {border-width:3px;} .main_pr ul li.pr_cut.open .cut_preview {font-size:20px;letter-spacing:-0.3px;} /* 브랜드 */ .main_brand {padding:8.4% 0 10.1%;} .main_brand .main_title {margin-bottom:3.9%;} .brand_zoom .slick_cut .txt .btn_more {height:25px;line-height:23px;border-radius:25px;padding:0 15px;font-size:13px;} .brand_zoom .slick_cut .txt .btn_more span {padding-right:20px;} .brand_zoom .slick_cut .txt .btn_more span:after {width:6px;height:6px;transform:translate(-25%, -25%) rotate(45deg);top:50%;right:0px;} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 6px);margin:-3px;} .brand_pager .slick_cut {padding:3px;} .brand_pager .slick_cut:before {width: calc(100% - 6px);height: calc(100% - 6px);} .brand_pager .slick_cut .arrow_sm {right:15px;bottom:15px;width:24px;height:24px;} .brand_pager .slick_cut .arrow_sm:after {width:6px;height:6px;transform:translate(125%, 25%) rotate(45deg);} .brand_pager .slick_cut.slick-current:before {border-width:3px;} /* 서비스 */ .main_service {padding:10% 0 13%;} .main_service .main_title {margin-bottom:4.2%;} .bnr_service {padding-top:250px;box-shadow:10px 10px 0 rgba(238, 238, 238, 1);} .bnr_service .txt {width: calc(100% - 40px);} .bnr_service h4 span {font-size:18px;line-height:20px;} .bnr_service h4 strong {margin:12px 0 44px;font-size:33px;line-height:39px;} .bnr_service .btn_arrow {font-size:15px;line-height:22px;height:44px;border-radius:44px;padding:10px 20px;} .bnr_bbs {width:48%;} .bnr_bbs h4 {padding:12px 0 19px;} .bnr_bbs h4 a {font-size:26px;line-height:31px;} .bnr_bbs h4 a:after {width:20px;height:20px;} .bnr_bbs ul {padding-top:30px;} .bnr_bbs ul li {padding-left:12px;font-size:15px;} .bnr_bbs ul li + li {margin-top:14px;} .bnr_bbs ul li strong, .bnr_bbs ul li span {line-height:20px;} .bnr_bbs ul li strong {width:80%;font-size:15px;} .bnr_bbs ul li span {font-size:13px;} /* 지점찾기 */ .main_map .txt strong {font-size:36px;line-height:41px;} .main_map .txt p {font-size:18px;line-height:21px;margin:16px 0 30px;} .main_map .txt a {font-size:15px;height:44px;line-height:42px;padding:0 24px;border-radius:44px;} .main_map .mark_wrap {display:none;} .main_map .call_list {padding:65px 0;width:340px;float:right;}/*50 53 100% float:none;*/ .main_map .call_list li {padding:12px 22px 12px 34px;line-height:24px;border-radius:50px;} .main_map .call_list li dt {width:152px;} .main_map .call_list li > span {display:none;} .main_map .call_list li > a {display:block;} } @media only screen and (max-width:960px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box {padding:0 32px;} .main_visual .slick-slide .txt_box h3 {font-size:25px;} .main_visual .slick-slide .txt_box p {font-size:52px;letter-spacing:-2.0px;line-height:1.25em;margin-top:0.35em;} .main_visual .slick-slide .txt_box span {font-size:23px;} .main_visual .slick-slide .txt_box .m_br + br {display:inline-block;} .main_visual .visual_control {bottom:30px;} .main_visual .slick-arrow {width:34px;height:34px;} .main_visual .slick-arrow:before {width:20px;height:20px;} .main_visual .slideCount {font-size:16px;letter-spacing:1.1px;} .main_visual .slider-progress-wrap {width: calc(100% - 66px);} /* 제품 */ .main_product {padding:13.5% 0 14%;} .main_product .main_title {margin-bottom:4.7%;} .main_pr ul li.pr_cut {padding-top:380px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 50%;background-size:auto 110px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:46.7% 50%;background-size:auto 105px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:55% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:55% 50%;background-size:auto 115px;} .main_pr ul li.pr_cut .cut_txt {padding:15px 20px;width:400px;} .main_pr ul li.pr_cut.open {flex:3.6;box-shadow:0 0 15px rgba(0, 0, 0, 0.5);} .main_pr ul li.pr_cut.open .cut_bg:before {border-width:2px;} /* 브랜드 */ .brand_slide_wrap .brand_slide_zoom {width:53%;} .brand_slide_wrap .brand_slide_pager {width: calc(47% - 15px);} .brand_pager .slick_cut .thumb {padding-top:87.35%;} .brand_pager .slick_cut .arrow_sm {right:12px;bottom:12px;width:22px;height:22px;} .brand_pager .slick_cut .arrow_sm:after {transform:translate(125%, 0%) rotate(45deg);} .brand_pager .slick_cut.slick-current:before {border-width:2px;} } @media only screen and (max-width: 860px) { /* 메인 비주얼 */ .main_visual .slick-slide .txt_box h3 {font-size:23px;} .main_visual .slick-slide .txt_box p {font-size:49px;} .main_visual .slick-slide .txt_box span {font-size:21px;} .main_visual .slideCount {font-size:15px;letter-spacing:0.8px;} .main_visual .slider-progress-wrap {width: calc(100% - 58px);} /* 타이틀 */ .main_title {font-size:42px;letter-spacing:-1.8px;} .main_title strong {padding-right:8px;} .main_title strong:after {width:4px;height:4px;top:4px;} /* 제품 */ .main_product {padding:13.5% 0 15%;} .main_product .main_title {margin-bottom:4.7%;} .main_pr ul li.pr_cut {padding-top:380px;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 50%;background-size:auto 90px;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:46.7% 50%;background-size:auto 85px;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 50%;background-size:auto 95px;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:55% 50%;background-size:auto 95px;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:55% 50%;background-size:auto 95px;} .main_pr ul li.pr_cut .cut_preview {font-size:16px;letter-spacing:-0.8px;line-height:19px;} .main_pr ul li.pr_cut .cut_txt p {line-height:20px;} .main_pr ul li.pr_cut.open {flex:3.2;box-shadow:0 0 15px rgba(0, 0, 0, 0.5);} .main_pr ul li.pr_cut.open .cut_preview {font-size:19px;letter-spacing:-0.3px;} /* 브랜드 */ .brand_pager .slick_cut {width:33.32%;padding:3px;} .brand_pager .slick_cut:before {width: calc(100% - 6px);height: calc(100% - 6px);} .brand_pager .slick_cut .thumb {padding-top:87.35%;} .brand_pager .slick_cut .arrow_sm {display:none;} /* 서비스 */ .bnr_service {padding-top:230px;box-shadow:8px 8px 0 rgba(238, 238, 238, 1);} .bnr_service .txt {width: calc(100% - 40px);} .bnr_service h4 span {font-size:17px;line-height:19px;} .bnr_service h4 strong {margin:10px 0 36px;font-size:29px;line-height:31px;} .bnr_bbs h4 {padding:12px 0;} .bnr_bbs h4 a {font-size:23px;line-height:28px;} .bnr_bbs h4 a:after {width:18px;height:18px;} .bnr_bbs ul {padding-top:24px;} .bnr_bbs ul li {padding-left:10px;} .bnr_bbs ul li + li {margin-top:12px;} .bnr_bbs ul li strong, .bnr_bbs ul li span {line-height:20px;} .bnr_bbs ul li strong {font-size:15px;} .bnr_bbs ul li span {font-size:12px;} /* 지점찾기 */ .main_map {background-size:1320px auto;} .main_map .txt strong {font-size:35px;line-height:40px;} .main_map .call_list {width:100%;max-width:340px;} } @media only screen and (max-width: 767px) { /* 타이틀 */ .main_title {font-size:38px;letter-spacing:-1.6px;} /* 제품 */ .main_product {padding:13.5% 0 15%;} .main_pr ul {display:block;} .main_pr ul li.pr_cut {display:block;padding-top:48%;background-image:url(../images/skin/bg_pr.png);} .main_pr ul li.pr_cut + li {margin-left:0;margin-top:15px;} .main_pr ul li.pr_cut .cut_bg {filter: grayscale(0%);} .main_pr ul li.pr_cut .cut_bg:before {border-width:2px;opacity:1;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 45%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:50% 45%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 40%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:50% 40%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 35%;background-size:80% auto;} .main_pr ul li.pr_cut .cut_preview {font-size:19px;letter-spacing:-0.3px;line-height:19px;left:20px;top:20px;text-align:left;} .main_pr ul li.pr_cut .cut_preview br {display:none;} .main_pr ul li.pr_cut .cut_txt {padding:15px 20px;width:100%;opacity:1;} .main_pr ul li.pr_cut.open {display:block;box-shadow:0 0 0 rgba(0, 0, 0, 0);} /* 브랜드 */ .brand_slide_wrap .brand_slide_zoom {width:56%;} .brand_zoom .slick_cut .thumb {padding-top:62%;} .brand_zoom .slick_cut .txt {padding-top:38%;} .brand_slide_wrap .brand_slide_pager {width: calc(44% - 15px);} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 6px);margin:-3px;} .brand_pager .slick-track {width:100% !important;} .brand_pager .slick_cut {width:33.32%;padding:3px;} .brand_pager .slick_cut:before {width: calc(100% - 6px);height: calc(100% - 6px);} .brand_pager .slick_cut .thumb {padding-top:100.35%;} /* 서비스 */ .main_service {padding:12.3% 0 13.2%;} .main_service .main_title {margin-bottom:4.5%;} .bnr_service {width:100%;padding-top:260px;float:none;} .bnr_service .txt {width: calc(100% - 40px);} .bnr_bbs {margin-top:7%;width:100%;float:none;} .bnr_bbs h4 a {font-size:23px;line-height:28px;} /* 지점찾기 */ .main_map {background-position:40% 63%;} .main_map .txt {padding-top:62px;position:static;left:0;transform:translateY(0);top:0;display:block;width:100%;} .main_map .call_list {padding:50px 0 60px;} } @media only screen and (max-width: 680px) { /* 메인 비주얼 */ .main_visual, .main_visual .slick-slide {min-height:640px;max-height:800px;} .main_visual .slick-slide:nth-of-type(2) .thumb {background-position:100% 50%;} .main_visual .slick-slide .txt_box {padding:0 22px;} .main_visual .slick-slide .txt_box h3 {font-size:21px;} .main_visual .slick-slide .txt_box p {font-size:47px;} .main_visual .slick-slide .txt_box span {font-size:19px;} .main_visual .slick-arrow {display:none !important;} .main_visual .slideCount {font-size:14px;} /* 브랜드 */ .brand_slide_wrap .brand_slide_zoom {width:100%;float:none;} .brand_zoom .slick_cut .thumb {padding-top:44%;} .brand_zoom .slick_cut .thumb img {width:auto;height:100%;left:50%;top:50%;transform:translate(-50%, -50%);position:absolute;} .brand_zoom .slick_cut .txt {height:auto;padding:15px 0;} .brand_zoom .slick_cut .txt .txt_box {width:calc(100% - 40px);margin:0 auto;left:0;top:0;transform:translateY(0);position:static;} .brand_zoom .slick_cut .txt p {height:60px;max-height:80px;-webkit-line-clamp:3;} .brand_slide_wrap .brand_slide_pager {width:100%;margin-top:15px;float:none;} .brand_pager .slick_cut {width:16.65%;} .brand_pager .slick_cut .thumb {padding-top:82%;} } @media only screen and (max-width: 640px) { /* 제품 */ .main_pr ul li.pr_cut {padding-top:56%;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 45%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:50% 45%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 40%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:50% 40%;background-size:80% auto;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 35%;background-size:80% auto;} } @media only screen and (max-width: 540px) { /* 브랜드 */ .main_brand {padding:9.4% 0 8.1%;} .brand_pager .slick_cut .thumb {padding-top:64%;} } @media only screen and (max-width:500px) { /* 메인 비주얼 */ .main_visual, .main_visual .slick-slide {min-height:620px;} .main_visual .slick-slide .txt_box {padding:0 20px;} .main_visual .slick-slide .txt_box h3 {font-size:20px;} .main_visual .slick-slide .txt_box p {font-size:44px;letter-spacing:-1.8px;line-height:1.25em;margin-top:0.45em;} .main_visual .slick-slide .txt_box span {font-size:18px;letter-spacing:-0.8px;} /* 타이틀 */ .main_title {font-size:34px;letter-spacing:-1.4px;} /* 제품 */ .main_product {padding:14.5% 0 16%;} .main_product .main_title {margin-bottom:4.9%;} .main_pr ul li.pr_cut {padding-top:68.5%;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 45%;background-size:85% auto;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:50% 45%;background-size:85% auto;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 40%;background-size:85% auto;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:50% 40%;background-size:85% auto;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 35%;background-size:85% auto;} .main_pr ul li.pr_cut .cut_preview {font-size:18px;line-height:18px;left:25px;} .main_pr ul li.pr_cut .cut_txt {padding:15px 15px;} .main_pr ul li.pr_cut .cut_txt p {font-size:14px;} /* 브랜드 */ .main_brand {padding:9.4% 0 7.1%;} .main_brand .main_title {margin-bottom:4.9%;} .brand_zoom .slick_cut .thumb {padding-top:56%;} .brand_zoom .slick_cut .txt p {height:80px;-webkit-line-clamp:4;} /* 서비스 */ .main_service {padding:14.3% 0 15.2%;} .main_service .main_title {margin-bottom:4.7%;} .bnr_service {padding-top:48.25%;box-shadow:10px 10px 0 rgba(238, 238, 238, 1);} .bnr_service .txt {width: calc(100% - 30px);} .bnr_service h4 span {font-size:15px;line-height:17px;} .bnr_service h4 strong {margin:8px 0 35px;font-size:27px;line-height:31px;} .bnr_service .btn_arrow {font-size:15px;line-height:22px;height:40px;border-radius:40px;padding:8px 28px;} .bnr_bbs {margin-top:9%;} .bnr_bbs h4 {padding:9px 0;} .bnr_bbs h4 a {font-size:18px;line-height:23px;} .bnr_bbs h4 a:after {width:16px;height:16px;} .bnr_bbs ul {padding-top:19px;} .bnr_bbs ul li {padding-left:10px;font-size:14px;} .bnr_bbs ul li strong, .bnr_bbs ul li span {line-height:19px;} .bnr_bbs ul li strong {font-size:14px;} .bnr_bbs ul li span {font-size:12px;} /* 지점찾기 */ .main_map {background-size:1020px auto;} .main_map .txt strong {font-size:32px;line-height:37px;} .main_map .txt p {font-size:17px;line-height:20px;margin:12px 0 20px;} .main_map .txt a {font-size:15px;height:40px;line-height:38px;padding:0 28px;border-radius:40px;} .main_map .call_list {max-width:100%;float:none;} .main_map .call_list li dt {width:50%;} } @media only screen and (max-width:479px) { /* 서비스 */ .bnr_service {padding-top:54.25%;} .bnr_service .txt {width: calc(100% - 30px);} } @media only screen and (max-width:414px) { /* 메인 비주얼 */ .main_visual, .main_visual .slick-slide {min-height:580px;} .main_visual .slick-slide .txt_box {padding:0 15px 0 20px;} .main_visual .slick-slide .txt_box h3 {font-size:20px;} .main_visual .slick-slide .txt_box p {font-size:40px;letter-spacing:-1.6px;} .main_visual .slick-slide .txt_box span {font-size:17px;letter-spacing:-0.7px;} .main_visual .slideCount {font-size:13px;} /* 타이틀 */ .main_title {font-size:32px;} /* 제품 */ .main_pr ul li.pr_cut {padding-top:72.5%;} .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 45%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:50% 45%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 40%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:50% 40%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 35%;background-size:88% auto;} .main_pr ul li.pr_cut .cut_preview {font-size:17px;line-height:17px;top:18px;} /* 브랜드 */ .main_brand {padding:9.4% 0 6.1%;} .brand_zoom .slick_cut .thumb {padding-top:56%;} .brand_zoom .slick_cut .txt p {line-height:19px;height:76px;max-height:76px;} .brand_pager .slick_cut .thumb {padding-top:64%;} /* 서비스 */ .main_service {padding:14.3% 0 15.2%;} .main_service .main_title {margin-bottom:4.7%;} .bnr_service {padding-top:56.25%;box-shadow:10px 10px 0 rgba(238, 238, 238, 1);} .bnr_service .txt {width: calc(100% - 30px);} .bnr_service h4 span {font-size:14px;line-height:15px;} .bnr_service h4 strong {margin:8px 0 33px;font-size:26px;line-height:31px;} .bnr_service .btn_arrow {font-size:13px;line-height:18px;height:34px;border-radius:34px;padding:7px 28px;} .bnr_service .btn_arrow span {padding-right:24px;} .bnr_service .btn_arrow span:after {width:17px;height:4px;} .bnr_bbs h4 {border-bottom:1px #000 solid;padding:7px 0;} .bnr_bbs h4 a {font-size:17px;line-height:21px;} .bnr_bbs h4 a:after {width:14px;height:14px;} .bnr_bbs ul {padding-top:15px;} .bnr_bbs ul li {padding-left:7px;font-size:13px;} .bnr_bbs ul li:before {width:2px;height:2px;} .bnr_bbs ul li strong, .bnr_bbs ul li span {line-height:18px;} .bnr_bbs ul li strong {width:100%;font-size:13px;} .bnr_bbs ul li span {display:none;} /* 지점찾기 */ .main_map {background-position:40% 63%;background-size:980px auto;} .main_map .txt strong {font-size:31px;line-height:35px;} .main_map .txt p {font-size:15px;line-height:19px;margin:10px 0 12px;} .main_map .txt a {font-size:13px;height:34px;border-radius:34px;line-height:32px;padding:0 28px;} .main_map .txt a span {padding-right:24px;} .main_map .txt a span:after {width:17px;height:4px;} .main_map .call_list li {padding:12px 22px;} .main_map .call_list li dt {width:51.5%;} } @media only screen and (max-width:375px) { /* 메인 비주얼 */ .main_visual, .main_visual .slick-slide {min-height:560px;} .main_visual .slick-slide .txt_box p {font-size:37px;} .main_visual .slick-slide .txt_box span {font-size:15px;} .main_visual .slideCount {font-size:12px;} .main_visual .slider-progress-wrap {width: calc(100% - 48px);} /* 타이틀 */ .main_title {font-size:30px;} .main_title strong {padding-right:7px;} .main_title strong:after {top:3px;} /* 제품 */ .main_pr ul li.pr_cut.pr_cate0 .cut_bg {background-position:50% 45%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate1 .cut_bg {background-position:50% 45%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate2 .cut_bg {background-position:50% 40%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate3 .cut_bg {background-position:50% 40%;background-size:88% auto;} .main_pr ul li.pr_cut.pr_cate4 .cut_bg {background-position:50% 35%;background-size:88% auto;} .main_pr ul li.pr_cut .cut_preview {font-size:16px;line-height:16px;left:25px;top:18px;} .main_pr ul li.pr_cut .cut_txt p {font-size:14px;line-height:20px;} /* 브랜드 */ .brand_pager .slick_cut .thumb {padding-top:62%;} .brand_pager .slick_cut .thumb img {width:auto;max-width:100%;height:auto;max-height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} /* 서비스 */ .bnr_service h4 span {font-size:13px;} .bnr_service h4 strong {font-size:25px;} .bnr_service .btn_arrow {font-size:13px;line-height:18px;height:34px;border-radius:34px;padding:7px 28px;} .bnr_service .btn_arrow span {padding-right:20px;} .bnr_service .btn_arrow span:after {width:13px;height:3.5px;background-size:13px 3.5px;} .bnr_bbs h4 a {font-size:17px;line-height:21px;} .bnr_bbs h4 a:after {width:12px;height:12px;} /* 지점찾기 */ .main_map {background-position:40% 63%;background-size:980px auto;} .main_map .txt {padding-top:62px;} .main_map .txt strong {font-size:30px;line-height:35px;letter-spacing:-0.4px;} .main_map .txt p {font-size:14px;line-height:19px;margin:10px 0 12px;} .main_map .txt a {font-size:12px;height:30px;border-radius:30px;line-height:28px;padding:0 28px;} .main_map .txt a span {padding-right:20px;} .main_map .txt a span:after {width:13px;height:3.5px;background-size:13px 3.5px;} .main_map .call_list {padding:50px 0 60px;} .main_map .call_list li {padding:12px 20px;line-height:24px;border-radius:50px;} .main_map .call_list li dt {width:54.5%;} .main_map .call_list li > a {display:block;} } @media screen and (max-width:360px) { .main_pr ul li.pr_cut .cut_txt p{font-size:13px;} } @media screen and (max-width:350px) { /* 메인 비주얼 */ .main_visual {height: calc(100vh - 0px);min-height:540px;} .main_visual .slick-slide {height: calc(100vh - 0px);min-height:540px;} .main_visual .slick-slide .txt_box {padding:0 10px 0 15px;} .main_visual .slick-slide .txt_box h3 {font-size:19px;} .main_visual .slick-slide .txt_box p {font-size:35px;letter-spacing:-1.6px;line-height:1.25em;margin-top:0.45em;} .main_visual .slick-slide .txt_box span {font-size:14px;letter-spacing:-0.7px;} .main_visual .visual_control {bottom:30px;} /* 타이틀 */ .main_title {font-size:29px;} /* 제품 */ .main_pr ul li.pr_cut {padding-top:74.5%;} /* 브랜드 */ .brand_zoom .slick_cut .thumb {padding-top:60%;} .brand_zoom .slick_cut .txt {padding:12px 0;} .brand_zoom .slick_cut .txt .txt_box {width:calc(100% - 30px);} .brand_zoom .slick_cut .txt p {font-size:12px;line-height:18px;height:72px;max-height:72px;} .brand_slide_wrap .brand_slide_pager .brand_pager {width: calc(100% + 6px);margin:-3px;} .brand_pager .slick-track {width:100% !important;} .brand_pager .slick_cut {width:25%;padding:3px;} .brand_pager .slick_cut:before {width: calc(100% - 6px);height: calc(100% - 6px);} .brand_pager .slick_cut .thumb {padding-top:62%;} /* 지점찾기 */ .main_map {background-position:40% 65%;background-size:880px auto;} .main_map .txt {padding-top:58px;} .main_map .txt strong {font-size:27px;line-height:32px;} .main_map .call_list {padding:44px 0 54px;} .main_map .call_list li {padding:12px 16px;line-height:22px;border-radius:46px;} .main_map .call_list li dt, .main_map .call_list li dd {line-height:22px;font-size:15px;} } @media screen and (max-width:335px) { .main_pr ul li.pr_cut .cut_txt{padding:15px 10px;} .main_pr ul li.pr_cut .cut_txt p{font-size:12px;} } @media screen and (max-width:320px) { /* 메인 비주얼 */ .main_visual, .main_visual .slick-slide {min-height:500px;} .main_visual .slick-slide .txt_box h3 {font-size:18px;} .main_visual .slick-slide .txt_box p {font-size:34px;} .main_visual .slick-slide .txt_box span {font-size:14px;} .main_visual .visual_control {bottom:24px;} /* 제품 */ .main_pr ul li.pr_cut {padding-top:77.5%;} .main_pr ul li.pr_cut .cut_preview {left:20px;} }