@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. font-family:'NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif; transform: skew(-0.1deg); font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif; ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ #wrap {position:relative;height:100%;width:100%;margin:0;padding:0;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;padding:0;} #wrap #container {width:100%;margin:0;padding:0;} #wrap #footer {width:100%;margin:0;} #btnTop {position:fixed;bottom:0px;right:40px;z-index:999;opacity:0;/*-webkit-transition: .75s;transition: .75s;*/} #btnTop.active {bottom:10px;opacity:0.65;cursor:pointer;} #btnTop.active:hover {opacity:1.0;} /* #container 안의 레이아웃 */ #contents_wrap {width:1380px;margin:0 auto;padding:0;position:relative;z-index:1;box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 */ #contents_wrap #side_box {width:100%;padding:0;box-sizing:border-box;} /* lnb 감싸는 영역 */ #contents_wrap #contents_box {width:100%;padding:0 0 60px;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */ #contents_wrap #side_box + #contents_box {padding-top:0;} /* lnb와 컨텐츠가 float 일때 사이즈 재설정 */ /* navigation layout */ #contents_wrap .nav_wrap {box-sizing:border-box;} /* #content */ #content {width:100%;margin:0;padding:0;text-align:left;box-sizing:border-box;} /* navigation 을 제외한 컨텐츠 */ #content .sub_content{width:100%;margin:0 auto;background:#fff;box-sizing:border-box;} #content .sub_content:after {clear:both;content:"";display:block;} /* 컨텐츠 전체 가로 사이즈 */ .w_custom {width:1380px;text-align:left;margin:0 auto;padding:0;box-sizing:border-box;} @media only screen and (max-width:1427px) { body.on {height:100%;overflow:hidden;} #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} .w_custom{width:100%;padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1023px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding-bottom:4%;} } @media only screen and (max-width:860px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding-bottom:5%;} } @media only screen and (max-width:767px) { /*.w_custom {padding-left:4% !important;padding-right:4% !important;}*/ #contents_wrap #side_box {display:none;} .sub_goods #contents_wrap #side_box {display:block;padding:0;} } @media only screen and (max-width:640px) { .w_custom{width:100%;padding-left:12px !important;padding-right:12px !important;} #contents_wrap {width:100%;padding-left:12px !important;padding-right:12px !important;} #contents_wrap #contents_box {padding:0 0 10.4% 0;} } @media only screen and (max-width:479px) { #contents_wrap #contents_box {padding-bottom:7%;} } @media only screen and (max-width:320px) { .w_custom{padding-left:10px !important;padding-right:10px !important;} #contents_wrap {padding-left:10px !important;padding-right:10px !important;} } /* 슬라이드 토들 */ .slide_toggle_wrap {} .slide_toggle_wrap dl {width:100%;position:relative;z-index:1;} .slide_toggle_wrap dt {cursor:pointer;width:100%;box-sizing:border-box;position:relative;z-index:1;} .slide_toggle_wrap dt:before {transition:all 0.3s;display:inline-block;content:"";position:absolute;top:50%;transform: rotate(0deg) translateY(-50%);} .slide_toggle_wrap.on dt:before {transform: rotate(180deg) translateY(50%);} .slide_toggle_wrap dd {position:absolute;display:none;width:100%;box-sizing:border-box;} .slide_toggle_wrap dd ul {} .slide_toggle_wrap dd ul li, .slide_toggle_wrap dd ul li a {} .slide_toggle_wrap dd ul li {} .slide_toggle_wrap dd ul li + li {} .slide_toggle_wrap dd ul li a {} /* 서브 상단 */ #wrap #container.sub_img_title {}/*background-repeat:no-repeat !important;background-position:50% 0 !important;background-size:auto 470px !important;*/ #wrap #container .sub_img_title_box {height:226px;} /*#wrap #container.sub_about {background-image:url(../images/sub/bg_title_about.jpg);} #wrap #container.sub_bnr {background-image:url(../images/sub/bg_title_bnr.jpg);} #wrap #container.sub_goods {background-image:url(../images/sub/bg_title_goods.jpg);} #wrap #container.sub_cs {background-image:url(../images/sub/bg_title_cs.jpg);} #wrap #container.sub_career {background-image:url(../images/sub/bg_title_career.jpg);}*/ #wrap #container .sub_bg_wrap {height:470px;background-repeat:no-repeat !important;background-position:50% 0 !important;background-size:auto 470px !important;z-index:-1;position:absolute;left:0;top:0;width:100%;margin:0;padding:0;} #wrap #container .sub_bg_wrap.sub_about {background-image:url(../images/sub/bg_title_about.jpg);} #wrap #container .sub_bg_wrap.sub_bnr {background-image:url(../images/sub/bg_title_bnr.jpg);} #wrap #container .sub_bg_wrap.sub_goods {background-image:url(../images/sub/bg_title_goods.jpg);} #wrap #container .sub_bg_wrap.sub_cs {background-image:url(../images/sub/bg_title_cs.jpg);} #wrap #container .sub_bg_wrap.sub_career {background-image:url(../images/sub/bg_title_career.jpg);} #wrap #container .sub_bg_wrap.sub_news {background-image: url(../images/sub/bg_title_news.jpg);} #wrap #container .sub_top_wrap {width:1380px;padding-bottom:114px;font-size:54px;margin:0 auto;text-align:center;position:relative;z-index:1;box-sizing:border-box;} #wrap #container h2.sub_h2 {font-size:inherit;line-height:1em;text-shadow:0px 0px 27px rgba(0, 0, 0, 0);margin:0;transform:translateY(-50%);padding:0;font-weight:400;color:#fff;text-align:center;display:inline-block;} #wrap #container h2.sub_h2 > span {position:absolute;top:100%;left:50%;transform:translate(-50%,0);font-size:40%;line-height:1.2;margin-top:10px;white-space:nowrap;} #wrap #container.sub_navi_bk h2.sub_h2 {color:#555;} #wrap #container .sub_top_wrap .sub_navi {font-size:inherit;position:absolute;right:0;top:1em;transform:translateY(-50%);text-align:right;display:none;} #wrap #container .sub_navi a, #wrap #container .sub_navi strong {font-size:14px;font-weight:300;line-height:1em;height:1em;color:#ddd;margin:0;padding:0;display:inline-block;vertical-align:top;} #wrap #container .sub_navi a {} #wrap #container .sub_navi a.navi_home {width:16px;height:13px;background-image:url(../images/skin/icon_navi_home.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;font-size:0;} #wrap #container .sub_navi strong {color:#fff;font-weight:300;} #wrap #container .sub_navi a + a:before, #wrap #container .sub_navi a + strong:before {width:5px;height:9px;margin:3px 12px;background-image:url(../images/skin/icon_navi_arrow.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;display:inline-block;vertical-align:top;content:"";} #wrap #container.sub_navi_bk .sub_navi a, #wrap #container.sub_navi_bk .sub_navi strong {color:#555;} #wrap #container.sub_navi_bk .sub_navi a.navi_home {background-image:url(../images/skin/icon_navi_home_bk.png);} #wrap #container.sub_navi_bk .sub_navi strong {color:#333;} #wrap #container.sub_navi_bk .sub_navi a + a:before, #wrap #container.sub_navi_bk .sub_navi a + strong:before {background-image:url(../images/skin/icon_navi_arrow_bk.png);} .aside_wrapper {position:relative;width:100%;margin:0;padding:0; background: rgba(255, 255, 255, 1);} .aside_wrap_box {top:0;z-index:20;position:absolute;left:50%;width:100%;transform:translateX(-50%); background: rgba(255, 255, 255, 1); } .aside_wrapper.fix {position:static;} .aside_wrapper.fix .aside_wrap_box {top:0;position:fixed;} .aside_wrapper.fix .aside_tab_wrap.aside_tab_bk {background: rgba(255, 255, 255, 0.92);} .aside_wrapper .aside_tab_wrap.aside_tab_bk:after {position:absolute;left:50%;transform:translateX(-50%);bottom:0;width: calc(100% - 80px);height:1px;background: rgba(0, 0, 0, 0);display:inline-block;content:"";} .aside_wrapper.fix .aside_tab_wrap.aside_tab_bk:after {background: rgba(0, 0, 0, 0.2);} .aside_wrapper + .sub_cont {padding-top:0px;} .aside_tab_wrap {background: rgba(255, 255, 255, 1);width:100%;margin:0;vertical-align:top;text-align:center;font-size:0;box-sizing:border-box;} .aside_tab_wrap.aside_tab_bk {background: rgba(255, 255, 255, 0.2);} .aside_tab_wrap dl {z-index:2;width:1380px;margin:0 auto;vertical-align:top;text-align:center;font-size:0;box-sizing:border-box; border-bottom: 1px solid #aaa;} .aside_tab_wrap dt {display:none;} .aside_tab_wrap dd {position:static;display:block;font-size:0;} .aside_tab_wrap dd a {height:70px;padding:23px 0;line-height:24px;font-size:20px;color:#fff;font-weight:400;margin:0;text-align:center;display:inline-block;vertical-align:top;box-sizing:border-box;transition:background 0.2s ease 0s;} /* .aside_tab_wrap dd a:after {background:#aaa; width:2px;height:20px;margin:2px 0;padding:0;content:"";vertical-align:top;float:left;} */ /* .aside_tab_wrap dd a.on:after {background:#aaa; width:1px;height:20px;margin:2px 0;padding:0;content:"";vertical-align:top;float:left;} */ /* .aside_tab_wrap dd a:before {clear:both;content:"";display:block;} */ .aside_tab_wrap dd a:hover {background: rgba(0, 0, 0, 0.4);} /* .aside_tab_wrap dd a + a:before {width:1px;height:20px;margin:2px 0;padding:0;display:none;content:"";vertical-align:top;float:left;} */ .aside_tab_wrap.aside_tab_line dd a + a:before {display:inline-block;} /* .aside_tab_wrap.aside_tab_line dd a.on + a:before, .aside_tab_wrap.aside_tab_line dd a + a.on:before {display:none;} */ .aside_tab_wrap dd a {color:#222;; background: rgba(255, 255, 255, 1);} .aside_tab_wrap dd a em, .aside_tab_wrap dd a span {line-height:inherit;font-size:inherit;color:inherit;font-weight:inherit;display:inline-block;vertical-align:top;margin:0;padding:0;} .aside_tab_wrap dd a em /*italic*/{font-style:italic;} .aside_tab_wrap dd a span, .aside_tab_wrap dd a span.label /*R*/{font-size:0.75em;line-height:1.3em;} .aside_tab_wrap.aside_tab_bk dd a {color: #5c5c5c;;} .aside_tab_wrap dd a.on {background: rgba(255, 255, 255, 1);color:#222;font-weight:700;} .aside_tab_wrap.aside_tab_bk dd a:hover {background:rgba(0, 0, 0, 0.4);} /* .aside_tab_wrap dd a:hover {background: rgba(0, 0, 0, 0.4);} */ /* .aside_tab_wrap.aside_tab_bk dd a.on {background: rgba(0, 0, 0, 0.05);} */ /* .aside_tab_wrap.aside_tab_bk dd a + a::before {background:#aaa; width:1px;height:20px;margin:2px 0;padding:0;content:"";vertical-align:top;float:left; } */ */ .aside_tab_2 dd a {width:50%;} .aside_tab_3 dd a {width:33.32%;} .aside_tab_4 dd a {width:25%;} .aside_bnr dd a:nth-of-type(1) {width:24.4%;} .aside_bnr dd a:nth-of-type(2) {width:31.6%;} .aside_bnr dd a:nth-of-type(3) {width:21.5%;} .aside_bnr dd a:nth-of-type(4) {width:20.5%;} .aside_tab_5 dd a {width:20%;} .aside_tab_6 dd a {width:16.65%;} .aside_tab_7 dd a {width:14.28%;} .aside_tab_7 dd a.idx1, .aside_tab_7 dd a.idx4, .aside_tab_7 dd a.idx7 {width: 17%;} .aside_tab_7 dd a.idx6 {width:14%;} .aside_tab_6 dd a + a.idx7:before {display:none;} .aside_tab_7 dd a.idx3, .aside_tab_7 dd a.idx5 {width: 17%;} .aside_tab_7 dd a.idx2 {width: 17%;} .aside_tab_8 dd a {width: 12.5%;} .aside_tab_9 dd a.idx8{width: 15%; padding-left: 5px; padding-right: 5;} /* .aside_tab_9 dd a {width: 11.1%;} */ /* .aside_tab_10 dd a {width: 20%; } */ .aside_wrapper dd a:nth-child(7) { clear: both; /* 7번째 요소부터 새로운 줄로 */ } .aside_tab_empty {height:70px;} .aside_tab_wrap .t_br, .aside_tab_wrap .t_br + br {display:none;} @media only screen and (max-width:1450px) { .aside_wrapper .aside_tab_wrap.aside_tab_bk:after {width: calc(100% - 60px);} } @media only screen and (max-width:1427px) { .aside_wrapper {} #wrap #container .sub_top_wrap {width:100%;padding-left:15px;padding-right:15px;} .aside_tab_wrap dl {width:100%;} #wrap #container .sub_top_wrap .sub_navi {right:15px;} } @media only screen and (max-width:1397px) { #wrap #container.sub_img_title {background-size:auto 468px !important;} #wrap #container .sub_bg_wrap {height:468px;background-size:auto 468px !important;} #wrap #container .sub_top_wrap {font-size:52px;} #wrap #container h2.sub_h2 {text-shadow:0px 0px 26px rgba(0, 0, 0, 0.17);} .aside_tab_wrap dd a {font-size:19px;} } @media only screen and (max-width:1260px) { .aside_wrapper .aside_tab_wrap.aside_tab_bk:after {width: calc(100% - 40px);} .aside_tab_wrap dd a {font-size:18px;} } @media only screen and (max-width:1217px) { #wrap #container .sub_top_wrap {padding-left:0;padding-right:0;} .aside_wrapper {width: calc(100% + 30px);margin-left:-15px;margin-right:-15px;} .aside_wrapper .aside_tab_wrap.aside_tab_bk:after {width: calc(100% - 30px);} .aside_tab_wrap dd a {font-size:17px;} /*.aside_tab_wrap {width: calc(100% + 30px);margin-left:-15px;margin-right:-15px;}*/ #wrap #container .sub_top_wrap .sub_navi {right:0;} #wrap #container.sub_img_title {background-position:50% 0 !important;background-size:auto 439px !important;} #wrap #container .sub_bg_wrap {height:439px;background-position:50% 0 !important;background-size:auto 439px !important;} #wrap #container .sub_img_title_box {height:216px;} #wrap #container .sub_top_wrap {padding-bottom:100px;font-size:48px;} #wrap #container h2.sub_h2 {font-size:48px;text-shadow:0px 0px 24px rgba(0, 0, 0, 0.17);} } @media only screen and (max-width:1023px) { #wrap #container.sub_img_title {background-size:auto 403px !important;} #wrap #container .sub_bg_wrap {height:403px;background-size:auto 403px !important;} #wrap #container .sub_img_title_box {height:194px;} #wrap #container .sub_top_wrap {padding-bottom:91px;font-size:44px;} #wrap #container h2.sub_h2 {font-size:44px;text-shadow:0px 0px 22px rgba(0, 0, 0, 0.17);} #wrap #container .sub_navi {display:none;} .aside_tab_7 dd a {} .aside_tab_7 dd a.idx7 {padding:11px 0;} .aside_tab_wrap.aside_tab_line.aside_tab_7 dd a + a.idx7:before {margin-top:12px;} .aside_tab_wrap .t_br + br {display:inline-block;} .aside_wrapper + .sub_cont {padding-top:40px;} } @media only screen and (max-width:960px) { #wrap #container.sub_img_title {background-size:auto 359px !important;} #wrap #container .sub_bg_wrap {height:359px;background-size:auto 359px !important;} #wrap #container .sub_img_title_box {height:174px;} #wrap #container .sub_top_wrap {padding-bottom:80px;font-size:40px;} #wrap #container h2.sub_h2 {text-shadow:0px 0px 20px rgba(0, 0, 0, 0.17);} .aside_tab_wrap dd a {height:60px;padding:18px 0;} .aside_tab_empty {height:60px;} .aside_tab_7 dd a.idx7 {padding:10px 0;line-height:20px;} .aside_tab_wrap .t_br + br {display:inline-block;} } @media only screen and (max-width:860px) { #wrap #container.sub_img_title {background-size:auto 318px !important;} #wrap #container .sub_bg_wrap {height:318px;background-size:auto 318px !important;} #wrap #container .sub_img_title_box {height:154px;} #wrap #container .sub_top_wrap {padding-bottom:62px;font-size:36px;} #wrap #container h2.sub_h2 {text-shadow:0px 0px 18px rgba(0, 0, 0, 0.17);} .aside_tab_wrap dd a {height:58px;padding:17px 0;} .aside_bnr dd a:nth-of-type(1) {width:23.4%;} .aside_bnr dd a:nth-of-type(2) {width:42.6%;} .aside_bnr dd a:nth-of-type(3) {width:16.5%;} .aside_bnr dd a:nth-of-type(4) {width:17.5%;} .aside_tab_7 dd a.idx7 {padding:9px 0;line-height:20px;} .aside_tab_empty {height:58px;} } @media only screen and (max-width:767px) { #wrap #container.sub_img_title {background-size:auto 290px !important;} #wrap #container .sub_bg_wrap {height:290px;background-size:auto 290px !important;} #wrap #container .sub_img_title_box {height:122px;} #wrap #container h2.sub_h2 {text-shadow:0px 0px 16px rgba(0, 0, 0, 0.17);} #wrap #container .sub_top_wrap {padding-bottom:71px;font-size:32px;} #wrap #container .sub_top_wrap.top_7 {padding-bottom:16px;} .aside_tab_wrap dd a, .aside_tab_7 dd a.idx7 {height:54px;padding:15px 0;} .aside_tab_7 dd a.idx1, .aside_tab_7 dd a.idx2, .aside_tab_7 dd a.idx3, .aside_tab_7 dd a.idx4 {width:25%;} .aside_tab_7 dd a.idx5, .aside_tab_7 dd a.idx6, .aside_tab_7 dd a.idx7 {width:33.32%;} .aside_tab_wrap.aside_tab_line.aside_tab_7 dd a + a.idx5:before {display:none;} .aside_tab_wrap.aside_tab_line.aside_tab_7 dd a + a.idx7:before {margin-top:0;} .aside_tab_7 dd a .t_br + br {display:none;} .aside_tab_empty {height:54px;} .aside_wrapper + .sub_cont {padding-top:30px;} } @media only screen and (max-width:640px) { #wrap #container.sub_img_title {background-size:auto 274px !important;} #wrap #container .sub_bg_wrap {height:274px;background-size:auto 274px !important; background-image: url(../images/sub/bg_title_news_m.jpg);} #wrap #container .sub_img_title_box {height:110px;} .aside_wrapper {width: calc(100% + 24px);margin-left:-12px;margin-right:-12px;} .aside_wrapper .aside_tab_wrap.aside_tab_bk:after {width: calc(100% - 24px);} /*.aside_tab_wrap {width: calc(100% + 24px);margin-left:-12px;margin-right:-12px;}*/ #wrap #container h2.sub_h2 {text-shadow:0px 0px 15px rgba(0, 0, 0, 0.17);} #wrap #container .sub_top_wrap {font-size:30px;} #wrap #container .sub_top_wrap.top_7 {padding-bottom:20px;} .aside_tab_wrap dd a, .aside_tab_7 dd a.idx7 {height:50px;padding:13px 0;} .aside_tab_7 dd a.idx1, .aside_tab_7 dd a.idx2, .aside_tab_7 dd a.idx3, .aside_tab_7 dd a.idx4 {width:25%;} .aside_tab_7 dd a.idx5, .aside_tab_7 dd a.idx6, .aside_tab_7 dd a.idx7 {width:33.32%;} .aside_bnr dd a:nth-of-type(1) {width:27.4%;} .aside_bnr dd a:nth-of-type(2) {width:34.6%;padding:5px 20px 5px 0;line-height:20px;} .aside_bnr dd a:nth-of-type(2):before {margin-right:20px;} .aside_bnr dd a:nth-of-type(3) {width:18.5%;} .aside_bnr dd a:nth-of-type(4) {width:19.5%;} .aside_tab_empty {height:50px;} } @media only screen and (max-width:510px) { .aside_bnr dd a:nth-of-type(2) {padding:5px 10px 5px 0;} .aside_bnr dd a:nth-of-type(2):before {margin-right:10px;} } @media only screen and (max-width:500px) { #wrap #container.sub_img_title {background-position:50% 0 !important;background-size:auto 251px !important;} #wrap #container .sub_bg_wrap {height:251px;background-size:auto 251px !important;} #wrap #container .sub_img_title_box {height:114px;} #wrap #container .sub_top_wrap, #wrap #container .sub_top_wrap.top_7 {padding-bottom:61px;font-size:27px;} #wrap #container h2.sub_h2 {text-shadow:0px 0px 13px rgba(0, 0, 0, 0.17);} .aside_tab_wrap dl {position:relative;} .aside_tab_wrap dt {height:50px;padding:13px 0 12px;border-bottom:1px #ddd solid;line-height:24px;font-size:17px;background: rgba(255, 255, 255, 1);color:#222;font-weight:300;margin:0;text-align:center;vertical-align:top;box-sizing:border-box;display:block;position:relative;z-index:1;width:100%;cursor:pointer;} .aside_tab_wrap dt > span{font-size: 0.7em; line-height: 1.8em;vertical-align: top;} .aside_tab_wrap dt > em{font-size: initial;font-style: italic;} .aside_tab_wrap dt:before {right:14px;width:9px;height:5px;background-image:url(../images/skin/icon_select_arrow.png);background-repeat:no-repeat;background-size:100% auto;background-position:50% 50%;transform: rotate(180deg) translateY(50%);display:inline-block;content:"";position:absolute;top:50%;} .aside_tab_wrap.on dt:before {transform: rotate(0deg) translateY(-50%);} .aside_tab_wrap dd {top:100%;width:100%;background:#fff;position:absolute;transition:all 0.3s; display:none;}/*height:0;overflow:hidden;*/ /*.aside_tab_wrap.on dd {height:auto;overflow:initial;} .aside_tab_wrap.on dd {}*/ .aside_tab_7 dd a.idx1, .aside_tab_7 dd a.idx2, .aside_tab_7 dd a.idx3, .aside_tab_7 dd a.idx4, .aside_tab_7 dd a.idx5, .aside_tab_7 dd a.idx6, .aside_tab_7 dd a.idx7, .aside_bnr dd a:nth-of-type(1), .aside_bnr dd a:nth-of-type(2), .aside_bnr dd a:nth-of-type(3), .aside_bnr dd a:nth-of-type(4) {width:100%;} .aside_bnr dd a:nth-of-type(2) {padding:13px 0;line-height:24px;} .aside_bnr dd a:nth-of-type(2):before {margin-right:0;} .aside_tab_wrap.aside_tab_line dd a + a:before {display:none;} .aside_tab_wrap dd a, .aside_tab_wrap dd a:hover {width:100%;border-bottom:1px #ddd solid;background:#fff;color:#222;font-weight:300;} } @media only screen and (max-width:479px) { } @media only screen and (max-width:320px) { .aside_wrapper {width: calc(100% + 20px);margin-left:-10px;margin-right:-10px;} .aside_wrapper .aside_tab_wrap.aside_tab_bk:after {width: calc(100% - 20px);} .aside_tab_wrap {width: calc(100% + 20px);margin-left:-10px;margin-right:-10px;} } /*─────────────────────────────────────────────────────────── 메인 상품 진열 ───────────────────────────────────────────────────────────*/ /* 메인상품진열 - 공통 */ .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;} } /*─────────────────────────────────────────────────────────── HEADER | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ .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 {position:fixed;left:0;top:0;z-index:10;box-sizing:border-box;font-size:0;text-align:center;} .hd_wrap {padding:27px 40px;background: rgba(255, 255, 255, 0);transition:background 0.2s ease 0s;box-sizing:border-box;width:100%;text-align:center;vertical-align:top;font-size:0;position:relative;z-index:1;} .hd_wrap:before {left:40px;bottom:0;width: calc(100% - 80px);height:1px;background: rgba(255, 255, 255, 0.4);position:absolute;display:inline-block;content:"";} .hd_wrap h1 {float:left;} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:8px;width:172px;height:30px;background-image:url(../images/skin/logo_off.png);background-repeat:no-repeat !important;background-position:50% 50% !important;background-size:auto 100% !important;vertical-align:top;display:inline-block;font-size:0;} .hd_wrap .hd_lnb {display:inline-block;margin:0 auto;vertical-align:top;} .hd_wrap .hd_lnb ul {vertical-align:top;text-align:center;font-size:0;} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:20px;line-height:33px;font-weight:500;color:#fff;text-shadow:0 0 0 rgba(0, 0, 0, 0) !important;transition:all 0.2s ease 0s;vertical-align:top;display:inline-block;margin:0;padding:0;} .hd_wrap .hd_lnb > ul > li {padding:6px 42px;position:relative;z-index:1;} .hd_wrap .hd_lnb > ul > li + li {} .hd_wrap .hd_lnb > ul > li > a {padding:0 2px;position:relative;z-index:1;transform: skew(-0.1deg);} .hd_wrap .hd_lnb > ul > li > a:after{content:"";display:block;clear:both;transition:0.5s;width:0;height:2px;background:#47aa42;position:absolute;left:0;bottom:0;margin-top:0;content:"";display:inline-block;} .hd_wrap .hd_lnb > ul > li:hover > a:after, .hd_wrap .hd_lnb > ul > li > a.on:after{width:100%;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:28px;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin:0;width:100%;display:none;} .hd_wrap .hd_lnb li:hover .lnb_sub_dep {display:block;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap {background: rgba(255, 255, 255, 0.9);} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul {padding:12px 0;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li, .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a {font-size:17px;line-height:25px;color:#555;font-weight:300;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li {padding:9px;text-align:center;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li + li {} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a {display:block;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a:hover {color:#47aa42;font-weight:300;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a em, .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a span {font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;display:inline-block;vertical-align:top;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a em {font-style:italic;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a span {font-size:0.6em;line-height:1.4em;} .hd_wrap .hd_gnb {float:right;text-align:right;font-size:0;} .hd_wrap .hd_gnb .gnb_shop {margin-right:25px;display:inline-block;vertical-align:top;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {width:120px;height:46px;border-radius:46px;line-height:44px;font-size:18px;padding:0 0 0 29px;background-image:url(../images/skin/icon_hd_cart_off.png);background-position:25px 50% !important;background-size:auto 24px !important;background-repeat:no-repeat !important;transition:0.2s;border:1px #ccc solid;text-align:center;font-weight:400;color:#fff;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;display:inline-block;box-sizing:border-box;vertical-align:top;} .hd_wrap .hd_gnb .gnb_search {margin:9px 25px;display:inline-block;vertical-align:top;} .hd_wrap .hd_gnb .gnb_search a {width:28px;height:28px;background-image:url(../images/skin/icon_hd_search_off.png);background-size:auto 100% !important;background-position:50% 50% !important;background-repeat:no-repeat !important;transition:0.2s;display:inline-block;vertical-align:top;font-size:0;} .hd_wrap .hd_gnb .aside_lang {padding:13px 0;margin-right:25px;vertical-align:top;text-align:right;display:inline-block;} .hd_wrap .hd_gnb .aside_lang a {line-height:20px;font-size:16px;font-weight:400;color:#888;display:inline-block;vertical-align:top;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;text-transform:uppercase;} .hd_wrap .hd_gnb .aside_lang a + a {color:#222;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 19px;width:1px;height:10px;background:#ccc;vertical-align:top;display:inline-block;content:"";} .hd_wrap .hd_gnb .gnb_cate {margin:10px 0;display:inline-block;vertical-align:top;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:30px;height:26px;cursor:pointer;position:relative;z-index:1;margin:0;padding:0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate span {transition:0.3s;height:2px;background:#fff;right:0;width:100%;display:inline-block;position:absolute;} .hd_wrap .hd_gnb .gnb_cate .btn_cate span:nth-of-type(1) {top:0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate span:nth-of-type(2) {width:80%;top:50%;transform:translateY(-1px);} .hd_wrap .hd_gnb .gnb_cate .btn_cate:hover span:nth-of-type(2) {width:100%;} .hd_wrap .hd_gnb .gnb_cate .btn_cate span:nth-of-type(3) {bottom:0;} #header.fix .hd_wrap, #header:hover .hd_wrap {background: rgba(255, 255, 255, 0.9);} #header.fix .hd_wrap h1 a, #header:hover .hd_wrap h1 a {background-image:url(../images/skin/logo_on.png);} #header.fix .hd_wrap .hd_lnb > ul > li, #header.fix .hd_wrap .hd_lnb > ul > li > a, #header:hover .hd_wrap .hd_lnb > ul > li, #header:hover .hd_wrap .hd_lnb > ul > li > a, #header.hd_bk .hd_wrap .hd_lnb > ul > li, #header.hd_bk .hd_wrap .hd_lnb > ul > li > a {color:#555;} #header.fix .hd_wrap .hd_lnb > ul > li:hover, #header .hd_wrap .hd_lnb > ul > li:hover > a, #header:hover .hd_wrap .hd_lnb > ul > li:hover > a, #header.hd_bk .hd_wrap .hd_lnb > ul > li:hover > a {color:#47aa42;} #header.fix .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a, #header:hover .hd_wrap .hd_gnb .gnb_shop a {background-image:url(../images/skin/icon_hd_cart_on.png);border:1px #aaa solid;color:#555;} #header.fix .hd_wrap .hd_gnb .gnb_shop a:hover, #aside .aside_box .aside_hd .gnb_shop a:hover, #header:hover .hd_wrap .hd_gnb .gnb_shop a:hover, #header.hd_bk:hover .hd_wrap .hd_gnb .gnb_shop a:hover {background-color:#47aa42;border:1px #47aa42 solid;color:#fff;background-image:url(../images/skin/icon_hd_cart_off.png);} /*article:not(.main_index) #header .hd_wrap .hd_gnb .gnb_shop a {background-color:#47aa42;border:1px #47aa42 solid;color:#fff;background-image:url(../images/skin/icon_hd_cart_off.png);}*/ #header.fix .hd_wrap .hd_gnb .gnb_search a, #header:hover .hd_wrap .hd_gnb .gnb_search a {background-image:url(../images/skin/icon_hd_search_on.png);} #header.fix .hd_wrap .hd_gnb .gnb_cate .btn_cate span, #header:hover .hd_wrap .hd_gnb .gnb_cate .btn_cate span, #header.hd_bk .hd_wrap .hd_gnb .gnb_cate .btn_cate span {background:#444;} #header.hd_bk .hd_wrap h1 a {background-image:url(../images/skin/logo_bk.png);} #header.hd_bk .hd_wrap .hd_gnb .gnb_shop a {background-image:url(../images/skin/icon_hd_cart_on.png);border:1px #555 solid;color:#555;} #header.hd_bk .hd_wrap:before {background: rgba(0, 0, 0, 0.2);} #aside {right:-68.75%;top:0;width:68.75%;margin-right:-1px;transition:0.6s;height:100%;z-index:999;box-sizing:border-box;box-sizing:border-box;display:block;position:fixed;background:#fff;opacity:0.4;display:table;visibility:hidden;table-layout:fixed;} #aside.on {right:0;visibility:visible;opacity:1;} .aside_bg {left:-40%;top:0;width:40%;background-image:url(../images/skin/bg_layer.jpg);background-position:50% 70%;background-size:auto 100%;background-repeat:no-repeat;transition:0.6s;height:100%;z-index:998;box-sizing:border-box;box-sizing:border-box;display:block;position:fixed;display:table;visibility:hidden;opacity:0;} .aside_bg.on {left:0;visibility:visible;opacity:1;} #aside .aside_box {text-align:center;display:table-cell;vertical-align:top;position:static;text-align:right;width:100%;} #aside .aside_box .aside_content {background:#fff;width:100%;z-index:5;margin:0 0 0 auto;position:relative;} #aside .aside_box.for_m {display:none;} #aside .aside_box .btn_aside_close {margin-left:20px;margin-top:8px;float:right;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:31px;height:31px;cursor:pointer;position:relative;z-index:1;} #aside .aside_box .btn_aside_close .menu-trigger2 span {height:2px;background-color:#000;right:0;top:15px;transition:0.3s;position:absolute;width:100%;display:inline-block;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(1) {-webkit-transform: translateY (0) rotate (-45deg);transform: translateY(0) rotate(-45deg);} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(2) {width:0;opacity:0;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(3) {-webkit-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);} #aside .aside_box .aside_hd {padding:27px 40px;box-sizing:border-box;width:100%;position:relative;z-index:1;} #aside .aside_box .aside_hd:before {left:0;bottom:0;width:100%;height:1px;background: rgba(221, 221, 221, 1);position:absolute;display:inline-block;content:"";} #aside .aside_box .aside_hd .aside_logo {float:left;} #aside .aside_box .aside_hd .aside_logo a {background-image:url(../images/skin/logo_on.png);} #aside .aside_box .aside_hd .aside_lang {padding:13px 22px;vertical-align:top;text-align:right;float:right;} #aside .aside_box .aside_hd .aside_lang a {line-height:20px;font-size:16px;font-weight:300;color:#222;display:inline-block;vertical-align:top;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;text-transform:uppercase;} #aside .aside_box .aside_hd .aside_lang a + a {color:#888;} #aside .aside_box .aside_hd .aside_lang a + a:before {margin:5px 19px;width:1px;height:10px;background:#ccc;vertical-align:top;display:inline-block;content:"";} #aside .aside_box .aside_hd .gnb_shop {float:right;} #aside .aside_box .aside_lnb {padding:65px 40px;width:100%;box-sizing:border-box;text-align:left;vertical-align:top;} #aside .aside_box .aside_lnb > ul {} #aside .aside_box .aside_lnb > ul.lnb_web {display:block;} #aside .aside_box .aside_lnb > ul.lnb_m {display:none;} #aside .aside_box .aside_lnb > ul > li {padding:36px 0;border-bottom:1px #ddd solid;vertical-align:middle;font-size:0;} #aside .aside_box .aside_lnb > ul > li + li {} #aside .aside_box .aside_lnb > ul > li > a {width:180px;padding:0 12px 0 0;line-height:1em;font-size:24px;font-weight:300;color:#333;vertical-align:middle;box-sizing:border-box;display:inline-block;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep {width: calc(100% - 180px);display:inline-block;vertical-align:middle;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap {} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap ul {} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li, #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a {line-height:24px;font-size:18px;font-weight:300;color:#333;vertical-align:middle;display:inline-block;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li {} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li + li {margin-left:22px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a {transform: skew(-0.1deg);} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li:hover a {color:#47aa42;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a em, #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a span {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;vertical-align:top;display:inline-block;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a em {font-style:italic;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a span {font-size:0.6em;line-height:1.4em;} #aside .aside_box .aside_lnb {} #aside ul.aside_menu {} #aside ul.aside_menu .dep1_li {text-align:left;display:inline-block;vertical-align:top;} #aside ul.aside_menu .dep1_li + .dep1_li {margin-left:85px;} #aside ul.aside_menu .dep1_li .dep1_a {transition:0.2s;display:inline-block;line-height: 48px;color: #fff;font-size: 24px;display: block;padding: 0 25px;} #aside ul.aside_menu .dep1_li:hover .dep1_a {background:#179ec9;} #aside ul.aside_menu .dep1_li .dep2 {padding:19px 0 0 25px;display: block;} #aside ul.aside_menu .dep1_li .dep2 li {padding-left:13px;position:relative;} #aside ul.aside_menu .dep1_li .dep2 li:before {content:"";display:block;width:2px;height:2px;position:absolute;left:0;top:50%;margin-top:-1px;background:#18b3e5;} #aside ul.aside_menu .dep1_li .dep2 li + li {margin-top:26px;} #aside ul.aside_menu .dep1_li .dep2 li a {display:block;font-size:18px;line-height:18px;color:#ffffff;} @media only screen and (max-width:1620px) { #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li + li {margin-left:18px;} } @media only screen and (max-width:1600px) { .hd_wrap .hd_lnb > ul > li {padding:6px 37px;} #aside {} #aside .aside_box .aside_lnb {padding:48px 40px;} #aside .aside_box .aside_lnb > ul > li {padding:32px 0;} #aside .aside_box .aside_lnb > ul > li > a {padding-right:10px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li {float:left;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li + li {margin-left:24px;} #aside .aside_box .aside_lnb > ul > li:nth-of-type(2) > .lnb_sub_dep .sub_dep_wrap li:nth-of-type(3) {clear:both;float:left;margin-left:0;} #aside .aside_box .aside_lnb > ul > li:nth-of-type(2) > .lnb_sub_dep .sub_dep_wrap li:nth-of-type(n + 3) {margin-top:12px;} } @media only screen and (max-width:1540px) { .hd_wrap .hd_lnb > ul > li {padding:6px 35px;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 13px;} } @media only screen and (max-width:1500px) { .hd_wrap .hd_lnb > ul > li {padding:6px 32px;} } @media only screen and (max-width:1480px) { .hd_wrap .hd_lnb > ul > li {padding:6px 30px;} } @media only screen and (max-width:1450px) { #header {} .hd_wrap {padding:27px 30px;} .hd_wrap:before {left:30px;width: calc(100% - 60px);} .hd_wrap .hd_gnb .gnb_shop {margin-right:20px;} .hd_wrap .hd_lnb > ul > li {padding:6px 26px;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 10px;} #btnTop {right:30px;} #aside {} #aside .aside_box .aside_hd {padding:27px 30px;} #aside .aside_box .aside_lnb {padding:40px 30px;} #aside .aside_box .aside_lnb > ul > li {padding:28px 0;} #aside .aside_box .aside_lnb > ul > li > a {width:180px;padding-right:10px;font-size:22px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep {width: calc(100% - 180px);} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li, #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a {line-height:22px;font-size:17px;} } @media only screen and (max-width:1360px) { #header {} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:20px;letter-spacing:-0.2px;} .hd_wrap .hd_lnb > ul > li {padding:6px 21px;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:27px;width:145px;} .hd_wrap .hd_gnb .gnb_shop, .hd_wrap .hd_gnb .aside_lang {margin-right:20px;} .hd_wrap .hd_gnb .gnb_shop {margin-right:15px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {height:44px;border-radius:44px;line-height:42px;} .hd_wrap .hd_gnb .gnb_cate {margin:9px 0;} .hd_wrap .hd_gnb .aside_lang {padding:12px 0;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 10px;} } @media only screen and (max-width:1280px) { .hd_wrap .hd_lnb > ul > li {padding:6px 19px;} .hd_wrap .hd_gnb .aside_lang a {font-size:15px;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 8px;} } @media only screen and (max-width:1260px) { #header {} .hd_wrap {padding:25px 20px;} .hd_wrap:before {left:20px;width: calc(100% - 40px);} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:9px;width:160px;height:28px;} .hd_wrap .hd_lnb > ul > li {padding:6px 19px;} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:19px;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:25px;width:140px;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li, .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a {font-size:16px;line-height:24px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {width:110px;padding-left:24px;background-position:20px 50% !important;} #btnTop {right:20px;} #aside {} #aside .aside_box .aside_hd {padding:25px 20px;} #aside .aside_box .aside_lnb {padding:34px 30px;} #aside .aside_box .aside_lnb > ul > li {padding:28px 0;} #aside .aside_box .aside_lnb > ul > li > a {width:156px;padding-right:10px;font-size:20px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep {width: calc(100% - 156px);} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li, #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a {line-height:20px;font-size:16px;} } @media only screen and (max-width:1217px) { #header {} .hd_wrap {padding:24px 15px;} .hd_wrap:before {left:15px;width: calc(100% - 30px);} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:7px;width:156px;height:27px;} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:18px;line-height:30px;letter-spacing:-0.4px;} .hd_wrap .hd_lnb > ul > li {padding:5px 17px 5px 16px;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:24px;width:136px;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul {padding:10px 0;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li, .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a {font-size:15px;line-height:23px;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li {padding:8px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {width:110px;height:40px;border-radius:40px;line-height:38px;font-size:17px;padding:0 0 0 24px;background-position:20px 50% !important;background-size:auto 22px !important;} .hd_wrap .hd_gnb .gnb_shop {margin-right:12px;} .hd_wrap .hd_gnb .gnb_cate {margin:7px 0;} .hd_wrap .hd_gnb .aside_lang {padding:10px 0;} .hd_wrap .hd_gnb .aside_lang a {font-size:14px;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 7px;} #btnTop {right:15px;} #aside {} #aside .aside_box .aside_hd {padding:24px 15px;} } @media only screen and (max-width:1100px) { #header {} .hd_wrap {padding:22px 15px;} .hd_wrap:before {left:20px;width: calc(100% - 40px);} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:5px;} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:17px;line-height:28px;letter-spacing:-0.2px;} .hd_wrap .hd_lnb > ul > li {padding:5px 13px;} .hd_wrap .hd_lnb > ul > li > a {padding:0 1px;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:22px;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul {padding:8px 0;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li, .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a {font-size:14px;line-height:21px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {height:38px;border-radius:38px;line-height:36px;background-size:auto 20px !important;} .hd_wrap .hd_gnb .gnb_cate {margin:6px 0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:28px;height:24px;} .hd_wrap .hd_gnb .aside_lang {padding:9px 0;} .hd_wrap .hd_gnb .aside_lang a + a:before {margin:5px 5px;} #aside {right:-72%;width:72%;} .aside_bg {left:-38%;width:38%;} #aside .aside_box .btn_aside_close {margin-left:16px;margin-top:2px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:30px;height:30px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:15px;} #aside .aside_box .aside_hd {padding:22px 15px;} #aside .aside_box .aside_hd .aside_lang {padding:9px 22px;} #aside .aside_box .aside_hd .aside_lang a + a:before {margin:5px 15px;} #aside .aside_box .aside_lnb {padding:30px 24px;} #aside .aside_box .aside_lnb > ul > li {padding:28px 0;} #aside .aside_box .aside_lnb > ul > li > a {width:148px;padding-right:10px;font-size:18px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep {width: calc(100% - 148px);} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li, #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li a {line-height:18px;font-size:15px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li + li {margin-left:20px;} } @media only screen and (max-width:1023px) { #header {} .hd_wrap {padding:20px 15px;} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:5px;width:149px;height:26px;} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:16px;line-height:27px;} .hd_wrap .hd_lnb > ul > li {padding:5px 13px;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:22px;width:132px;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul {padding:5px 0;} .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li, .hd_wrap .hd_lnb li .lnb_sub_dep .sub_dep_wrap ul li a {font-size:13px;line-height:20px;} .hd_wrap .hd_gnb .gnb_shop, .hd_wrap .hd_gnb .aside_lang {margin-right:16px;} .hd_wrap .hd_gnb .gnb_shop {margin-right:10px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {width:100px;height:37px;border-radius:37px;line-height:35px;font-size:16px;padding-left:24px;background-position:18px 50% !important;background-size:auto 21px !important;} .hd_wrap .hd_gnb .gnb_cate {margin:7px 0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:27px;height:23px;} .hd_wrap .hd_gnb .aside_lang {padding:8px 0 9px;} #aside {} #aside .aside_box .aside_hd {padding:20px 15px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:29px;height:29px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:14px;} } @media only screen and (max-width:980px) { #header {} .hd_wrap {padding:18px 15px;} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:6px;width:143px;height:25px;} .hd_wrap .hd_lnb > ul > li, .hd_wrap .hd_lnb> ul > li > a {font-size:15px;line-height:27px;} .hd_wrap .hd_lnb > ul > li {padding:5px 12px;} .hd_wrap .hd_lnb li .lnb_sub_dep {padding-top:20px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {width:90px;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:26px;height:22px;} .hd_wrap .hd_gnb .aside_lang a {font-size:13px;} #aside {right:-78%;width:78%;} .aside_bg {left:-36%;width:36%;background-position:68% 50%;background-size:auto 100%;} #aside .aside_box .btn_aside_close {margin-left:16px;margin-top:2px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:28px;height:28px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:14px;} #aside .aside_box .aside_hd {padding:18px 15px;} #aside .aside_box .aside_hd .aside_lang {padding:8px 20px;} #aside .aside_box .aside_hd .aside_lang a {line-height:19px;font-size:15px;} #aside .aside_box .aside_hd .aside_lang a + a:before {margin:4px 13px;} #aside .aside_box .aside_lnb {padding:28px 20px;} #aside .aside_box .aside_lnb > ul > li {padding:24px 0;} #aside .aside_box .aside_lnb > ul > li > a {width:132px;} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep {width: calc(100% - 132px);} #aside .aside_box .aside_lnb > ul > li > .lnb_sub_dep .sub_dep_wrap li + li {margin-left:20px;} #aside .aside_box .aside_lnb > ul > li:nth-of-type(2) > .lnb_sub_dep .sub_dep_wrap li:nth-of-type(n + 3) {margin-top:10px;} } @media only screen and (max-width:920px) { .hd_wrap .hd_lnb > ul > li {padding:5px 9px;} .hd_wrap .hd_gnb .aside_lang a {font-size:13px;} } @media only screen and (max-width:900px) { #header {} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {width:138px;height:24px;} .hd_wrap .hd_lnb {display:none;} #aside {right:-78%;width:78%;} } @media only screen and (max-width:860px) { #header {} .hd_wrap {padding:16px 15px;} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:7px;width:132px;height:23px;} .hd_wrap .hd_gnb .gnb_cate {margin:8px 0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:25px;height:21px;} #aside {right:-64%;width:64%;} .aside_bg {left:-40%;width:40%;background-position:68% 50%;background-size:auto 100%;} #aside .aside_box .btn_aside_close {margin-left:16px;margin-top:2px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:28px;height:28px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:14px;} #aside .aside_box .aside_hd {padding:18px 15px;} #aside .aside_box .aside_hd .aside_logo {} #aside .aside_box .aside_hd .aside_lang {padding:8px 20px;} #aside .aside_box .aside_hd .aside_lang a {line-height:19px;font-size:15px;} #aside .aside_box .aside_hd .aside_lang a + a:before {margin:4px 13px;width:1px;height:10px;} #aside .aside_box .aside_lnb {padding:24px 20px;} #aside .aside_box .aside_lnb > ul {position:relative;z-index:1;width:100%;box-sizing:border-box;padding:0;margin:0;background:#fff;overflow:hidden;} #aside .aside_box .aside_lnb > ul.lnb_web {display:none;} #aside .aside_box .aside_lnb > ul.lnb_m {display:block;} #aside .aside_box .aside_lnb > ul.lnb_m > li {padding:18px 0;line-height:27px;border:0;} #aside .aside_box .aside_lnb > ul.lnb_m > li > span {font-size:22px;padding:0 39px;line-height:inherit;opacity:1;visibility:inherit;font-weight:300;color:#333;transform: skew(-0.1deg);display:inline-block;vertical-align:top;margin:0;box-sizing:border-box;transition:all 0.3s;transform: matrix(1, 0, 0, 1, 0, 0);}/*20*/ #aside .aside_box .aside_lnb > ul.lnb_m.on > li > span {opacity:0;visibility:hidden;transform: matrix(1, 0, 0, 1, -60, 0);} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl {opacity:0;visibility:hidden;width:100%;position:absolute;left:0;top:0;transition:all 0.3s;height:100%;z-index:10;background:#fff;margin:0;padding:0;transform: matrix(1, 0, 0, 1, 60, 0);} #aside .aside_box .aside_lnb > ul.lnb_m > li.open > dl {opacity:1;visibility:inherit;transform: matrix(1, 0, 0, 1, 0, 0);} #aside .aside_box .aside_lnb > ul.lnb_m > li.closed > dl {opacity:0;visibility:hidden;transform: matrix(1, 0, 0, 1, 60, 0);} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt, #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd {} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt {line-height:27px;padding:18px 0 14px;vertical-align:top;text-align:left;}/*27*/ #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span.btn_cate_prev {height:27px;line-height:inherit;font-size:0;cursor:pointer;display:inline-block;vertical-align:top;margin:0;box-sizing:border-box;width:100%;position:relative;z-index:1;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span.btn_cate_prev:before {width:27px;height:inherit;background-image:url(../images/skin/icon_cate_arrow.png);background-position:50% 50%;background-repeat:no-repeat;background-size:auto 13px;display:inline-block;vertical-align:top;margin:0;box-sizing:border-box;content:"";} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span strong {font-size:22px;padding:0 12px;line-height:inherit;font-weight:300;color:#333;transform: skew(-0.1deg);display:inline-block;vertical-align:top;margin:0;box-sizing:border-box;}/*20*/ #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd {padding:0 0 0 39px;box-sizing:border-box;width:100%;margin:0;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li, #aside .aside_box .aside_lnb > ul > li > dl dd li a {line-height:20px;font-size:17px;color:#333;font-weight:300;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li {padding:12px 0;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li em{ font-style: italic;font-size: initial;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li span{line-height: 1.5em;vertical-align: top;} } @media only screen and (max-width:767px) { #header {} .hd_wrap {padding:14px 15px;} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {width:127px;height:22px;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:24px;height:20px;} #aside {right:-70%;width:70%;} .aside_bg {left:-35%;width:35%;background-position:60% 50%;background-size:auto 100%;} #aside .aside_box .btn_aside_close {margin-left:16px;margin-top:2px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:28px;height:28px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:14px;} #aside .aside_box .aside_hd {padding:14px 15px;} #aside .aside_box .aside_hd .aside_lang {padding:8px 16px;} #aside .aside_box .aside_hd .aside_lang a {font-size:14px;} #aside .aside_box .aside_lnb {padding:20px 15px;} #aside .aside_box .aside_lnb > ul.lnb_m > li {padding:17px 0;line-height:27px;} #aside .aside_box .aside_lnb > u.lnb_ml > li > span {font-size:21px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt {padding:17px 0 14px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span strong {font-size:21px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li, #aside .aside_box .aside_lnb > ul > li > dl dd li a {font-size:16px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li {padding:11px 0;} } @media only screen and (max-width:640px) { #header {} .hd_wrap {padding:12px 12px;} .hd_wrap:before {left:12px;width: calc(100% - 24px);} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:7px;width:127px;height:22px;} .hd_wrap .hd_gnb .gnb_shop, .hd_wrap .hd_gnb .aside_lang {margin-right:16px;} .hd_wrap .hd_gnb .gnb_shop a, #aside .aside_box .aside_hd .gnb_shop a {width:90px;height:37px;border-radius:37px;line-height:35px;font-size:15px;padding-left:24px;background-position:18px 50% !important;background-size:auto 21px !important;} .hd_wrap .hd_gnb .gnb_cate {margin:8px 0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:24px;height:20px;} #btnTop {right:12px;} #aside {right:-70%;width:70%;} .aside_bg {left:-35%;width:35%;background-position:60% 50%;background-size:auto 100%;} #aside .aside_box .btn_aside_close {margin-left:16px;margin-top:1px;} #aside .aside_box .aside_hd {padding:13px 12px;} #aside .aside_box .aside_hd .gnb_shop {padding-top:1px;} #aside .aside_box .aside_hd .gnb_shop a {width:27px;height:27px;border-radius:0;line-height:27px;font-size:0;padding-left:0;background-position:50% 50% !important;background-size:auto 27px !important;border:0;} #aside .aside_box .aside_lnb {padding:20px 12px;} } @media only screen and (max-width:560px) { #aside {right:-100%;width: calc(100% + 2px);margin-left:-1px;} .aside_bg {display:none !important;width:0;height:0;overflow:hidden;} #aside .aside_box .aside_lnb > u.lnb_ml > li > span {font-size:20px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span strong {font-size:20px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li, #aside .aside_box .aside_lnb > ul > li > dl dd li a {font-size:15px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li {padding:10px 0;} } @media only screen and (max-width:479px) { #header {} .hd_wrap {padding:11px 12px;} .hd_wrap:before {left:12px;width: calc(100% - 24px);} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {margin-top:8px;width:121px;height:21px;} .hd_wrap .hd_gnb .gnb_shop, .hd_wrap .hd_gnb .aside_lang {margin-right:16px;} .hd_wrap .hd_gnb .gnb_shop a {width:90px;height:37px;border-radius:37px;line-height:35px;font-size:14px;padding-left:24px;background-position:18px 50% !important;background-size:auto 21px !important;} .hd_wrap .hd_gnb .gnb_cate {margin:8px 0;} .hd_wrap .hd_gnb .gnb_cate .btn_cate {width:24px;height:20px;} #aside {} #aside .aside_box .aside_hd .aside_logo a {margin-top:3px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:26px;height:26px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:13px;} #aside .aside_box .aside_hd {padding:15px 12px;} #aside .aside_box .aside_hd .aside_lang {padding:5px 16px;} } @media only screen and (max-width:375px) { #header {} .hd_wrap {padding:10px 12px;} #aside {} #aside .aside_box .btn_aside_close {margin-left:16px;margin-top:1px;} #aside .aside_box .btn_aside_close .menu-trigger2 {width:26px;height:26px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:13px;} #aside .aside_box .aside_hd {padding:14px 12px;} #aside .aside_box .aside_hd .aside_logo {} #aside .aside_box .aside_hd .aside_logo a {margin-top:3px;} #aside .aside_box .aside_hd .aside_lang {padding:5px 16px;} #aside .aside_box .aside_hd .aside_lang a {line-height:19px;font-size:14px;} #aside .aside_box .aside_hd .aside_lang a + a:before {margin:4px 13px;width:1px;height:10px;} #aside .aside_box .aside_hd .gnb_shop {padding-top:1px;} #aside .aside_box .aside_hd .gnb_shop a {width:27px;height:27px;border-radius:0;line-height:27px;font-size:0;padding-left:0;background-position:50% 50% !important;background-size:auto 27px !important;border:0;} #aside .aside_box .aside_lnb {padding:20px 12px;} #aside .aside_box .aside_lnb > ul.lnb_m > li {padding:15px 0;} #aside .aside_box .aside_lnb > ul.lnb_m > li > span {font-size:20px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt {padding:15px 0 14px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span strong {font-size:20px;padding:0 12px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li, #aside .aside_box .aside_lnb > ul > li > dl dd li a {font-size:15px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li {padding:10px 0;} } @media only screen and (max-width:320px) { #header {} .hd_wrap {padding:10px 10px;} .hd_wrap:before {left:10px;width: calc(100% - 20px);} .hd_wrap h1 a, #aside .aside_box .aside_hd .aside_logo a {width:115px;height:20px;} .hd_wrap .hd_gnb .gnb_shop, .hd_wrap .hd_gnb .aside_lang {margin-right:14px;} .hd_wrap .hd_gnb .gnb_shop a {width:86px;height:35px;border-radius:35px;line-height:33px;font-size:14px;padding-left:22px;background-position:15px 50% !important;background-size:auto 20px !important;} .hd_wrap .hd_gnb .gnb_cate {margin:7px 0;} #btnTop {right:10px;} #aside {} #aside .aside_box .btn_aside_close .menu-trigger2 {width:24px;height:24px;} #aside .aside_box .btn_aside_close .menu-trigger2 span {top:12px;} #aside .aside_box .aside_hd {padding:14px 10px;} #aside .aside_box .btn_aside_close {margin-left:12px;} #aside .aside_box .aside_hd .aside_lang {padding:3px 12px;} #aside .aside_box .aside_hd .aside_lang a {font-size:12px;} #aside .aside_box .aside_hd .aside_lang a + a:before {margin:4px 9px;} #aside .aside_box .aside_hd .gnb_shop {padding-top:0px;} #aside .aside_box .aside_hd .gnb_shop a {width:25px;height:25px;line-height:25px;background-size:auto 25px !important;} #aside .aside_box .aside_lnb {padding:20px 10px;} #aside .aside_box .aside_lnb > ul.lnb_m > li {padding:12px 0;} #aside .aside_box .aside_lnb > ul.lnb_m > li > span {font-size:18px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt {padding:12px 0 10px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dt span strong {font-size:18px;padding:0 12px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li, #aside .aside_box .aside_lnb > ul > li > dl dd li a {font-size:14px;} #aside .aside_box .aside_lnb > ul.lnb_m > li > dl dd li {padding:9px 0;} } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* pc */ #scr_right {display:none;position:fixed;right:15px;bottom:15px;z-index:10;} #scr_right .scr_box {position:relative;z-index:1;} #scr_right .scr_box > span {width:35px;height:35px;top:26px;background:url(../images/skin/icon_quick_closed.png) no-repeat 50% 50%;font-size:0;right:0;position:absolute;display:inline-block;cursor:pointer;z-index:5;} #scr_right .scr_box > a {} #scr_right .scr_box a, #scr_right .scr_box img {vertical-align:top;} #scr_right .scr_box img {transform:translateY(0px);transition:all 0.3s;} #scr_right .scr_box:hover img {transform:translateY(-5px);} #scr_right.closed {width:0;height:0;overflow:hidden;} #footer {background:#f5f5f5;position:relative;z-index:2;border-top:1px #a6a6a6 solid;} #footer .ft_logo {} #footer .ft_logo a, #footer .ft_logo img {vertical-align:top;} #footer .ft_logo img {height:33px;width:auto;} #footer .ft_lnb_wrap {text-align:right;padding:51px 0 38px;margin:0 auto;width:100%;max-width:1380px;box-sizing:border-box;position:relative;z-index:1;font-size:0;} #footer .ft_lnb_wrap .ft_logo {display:none;} #footer .ft_lnb_wrap .ft_lnb_box {display:inline-block;vertical-align:top;text-align:left;} #footer .ft_lnb_wrap .ft_lnb_box + .ft_lnb_box {margin-left:20px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu {position:absolute;left:0;top:50%;transform:translateY(-50%);} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu ul {} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li {display:inline-block;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li + li {} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li + li:before {height:12px;margin:5px 12px;vertical-align:top;background:#ccc;width:1px;content:"";display:inline-block;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li, #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu a {line-height:23px;font-size:14px;font-weight:300;color:#555;vertical-align:top;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu a {transform: skew(-0.1deg);color: #555;font-weight: 300;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu strong {color:#000;font-weight:300;font-size:inherit;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_family {} #footer .ft_lnb_wrap .ft_lnb_box.lnb_family .ft_family {width:180px;} .ft_family dt {height:40px;line-height:20px;padding:9px 33px 9px 15px;font-size:14px;border:1px #ccc solid;font-weight:300;color:#555;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} .ft_family dt:before {right:14px;width:9px;height:5px;background-image:url(../images/skin/icon_select_arrow.png);background-repeat:no-repeat;background-size:100% auto;background-position:50% 50%;} .ft_family dd {background:#fff;border:1px #ccc solid;top:auto;bottom:100%;border-bottom:0;} .ft_family dd ul {padding:10px 0;} .ft_family dd ul li, .ft_family dd ul li a {line-height:20px;font-size:14px;font-weight:300;color:#555;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} .ft_family dd ul li {padding:7px 18px;background:#fff;transition:all 0.3s;} .ft_family dd ul li + li {} .ft_family dd ul li a {display:inline-block;width:100%;} .ft_family dd ul li:hover {background:#f9f9f9;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns {padding-top:2px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns {text-align:right;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li {display:inline-block;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li + li {margin-left:10px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li, #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li a, #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li img {vertical-align:top;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li a {} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li img {height:36px;width:auto;transition:all 0.3s;opacity:1;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li:hover img {opacity:0.6;} #footer .ft_info_wrap {border-top:1px #a6a6a6 solid;} #footer .ft_info {padding:54px 0;margin:0 auto;width:100%;max-width:1380px;box-sizing:border-box;} #footer .ft_info .ft_logo {} #footer .ft_info p, #footer .ft_info p a {line-height:26px;font-size:14px;font-weight:300;color:#777;vertical-align:top;} #footer .ft_info p {margin-top:33px;} #footer .ft_info p span {width:18px;line-height:inherit;display:inline-block;vertical-align:top;} #footer .ft_info p span.pc_br {display:none;} #footer .ft_info p span.pc_br + br {} #footer .ft_info p span.m_br {} #footer .ft_info p span.m_br + br {display:none;} #footer .ft_info p + p {margin-top:2px;font-size:13px;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} @media only screen and (max-width:1427px) { #footer .ft_lnb_wrap, #footer .ft_info {width: calc(100% - 30px);} #footer .ft_info p br {display:none;} } @media only screen and (max-width:1140px) { #footer .ft_lnb_wrap {padding:4% 0;} #footer .ft_info {padding:4.5% 0;} #footer .ft_info p {margin-top:2.8%;} #footer .ft_info p span.pc_br {display:inline-block;} #footer .ft_info p span.pc_br + br {display:none;} #footer .ft_info p span.m_br + br {display:inline-block;} } @media only screen and (max-width:1023px) { #scr_right {display:none;} #footer .ft_lnb_wrap {text-align:center;} #footer .ft_lnb_wrap .ft_logo {display:inline-block;margin:0 auto;} #footer .ft_lnb_wrap .ft_lnb_box {margin-top:20px;} #footer .ft_lnb_wrap .ft_lnb_box + .ft_lnb_box {margin-left:16px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu {width:100%;text-align:center;position:static;transform:translateY(0);} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li + li:before {margin:5px 10px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_family {margin-left:0;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_family .ft_family {width:160px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns {padding-top:0;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li img {height:40px;} #footer .ft_info_wrap {border-top:0;} #footer .ft_info {padding:0 0 5%;text-align:center;} #footer .ft_info .ft_logo {display:none;} #footer .ft_info p {margin-top:0;} } @media only screen and (max-width:860px) { #footer .ft_logo img {height:30px;} #footer .ft_lnb_wrap {padding:6% 0 4%;} #footer .ft_info_wrap {border-top:0;} #footer .ft_info p {line-height:25px;} #footer .ft_info p span.pc_br + br {display:inline-block;} } @media only screen and (max-width:767px) { #footer .ft_logo img {height:28px;} #footer .ft_info {padding:0 0 5%;} #footer .ft_info p {line-height:24px;} #footer .ft_info p + p {margin-top:4px;} } @media only screen and (max-width:640px) { #footer .ft_logo img {height:26px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li, #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu a {line-height:22px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li + li:before {margin:5px 8px;position:absolute;left:-8px;} #footer .ft_info p {line-height:23px;} } @media only screen and (max-width:500px) { #footer .ft_logo img {height:25px;} #footer .ft_lnb_wrap {padding:11% 0 4%;} #footer .ft_lnb_wrap .ft_lnb_box {text-align:center;margin:0 auto;display:block;margin-top:20px;} #footer .ft_lnb_wrap .ft_lnb_box + .ft_lnb_box {margin-left:auto;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu {display:table;width: calc(100% + 30px);margin-left:-15px;margin-right:-15px;table-layout:fixed;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu ul {display:table-row;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li {display:table-cell;box-sizing:border-box;border-collapse:collapse;position:relative;} /*#footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li + li:before {display:none;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li:nth-of-type(2) {width:25%;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li:nth-of-type(3) {width:29%;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li:nth-of-type(4) {width:19%;}*/ #footer .ft_lnb_wrap .ft_lnb_box.lnb_family .ft_family {width:60.8%;margin:0 auto;text-align:left;} .ft_family dd ul li:hover {background:#fff;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns {display:inline-block;text-align:center;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li + li {margin-left:15px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li:hover img {opacity:1;} #footer .ft_info p + p {margin-top:8px;} #footer .ft_info p span.m_br {display:none;} #footer .ft_info p span.m_br + br {display:inline-block;} } @media only screen and (max-width:375px) { #footer .ft_logo img {height:24px;} #footer .ft_lnb_wrap {padding:12% 0 6%;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li img {height:38px;} #footer .ft_info {padding-bottom:7%;} #footer .ft_info p span {width:12px;} } @media only screen and (max-width:360px) { #footer .ft_logo img {height:22px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu {width: calc(100% + 20px);margin-left:-10px;margin-right:-10px;} #footer .ft_lnb_wrap, #footer .ft_info {width: calc(100% - 20px);} #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu li, #footer .ft_lnb_wrap .ft_lnb_box.lnb_menu a {line-height:20px;font-size:12px;} .ft_family dt {height:36px;line-height:20px;padding:7px 29px 7px 10px;font-size:13px;} .ft_family dd ul li {padding:6px 12px;} .ft_family dd ul li, .ft_family dd ul li a {line-height:20px;font-size:13px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li + li {margin-left:12px;} #footer .ft_lnb_wrap .ft_lnb_box.lnb_sns .ft_sns li img {height:34px;} #footer .ft_info p, #footer .ft_info p a {line-height:22px;font-size:13px;} #footer .ft_info p + p {font-size:12px;} #footer .ft_info p span {width:10px;} } /*─────────────────────────────────────────────────────────── SIDE_BOX | outline/left_bbs.html｜outline/left_goods.html｜outline/left_member.html｜outline/left_service.html ───────────────────────────────────────────────────────────*/ #side_box {padding-bottom:1.8%;} #side_box .sub_menu {width:100%;padding:0;margin:0;z-index:2;text-align:center;vertical-align:top;} #side_box .sub_menu dl {position:relative;display:inline-block;margin:0 auto;z-index:3;font-size:0;text-align:center;vertical-align:top;padding:0;} #side_box .sub_menu dt, #side_box .sub_menu dd {display:inline-block;margin:0;padding:0;} #side_box .sub_menu dt {display:none;} #side_box .sub_menu dd {line-height:31px;height:32px;padding:0 12px;border-bottom:1px #ccc solid;position:relative;z-index:1;box-sizing:border-box;vertical-align:top;} #side_box .sub_menu dd + dd {} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:31px;line-height:31px;font-size:15px;font-weight:300;padding:0 2px;color:#888;display:inline-block;box-sizing:border-box;vertical-align:top;} #side_box .sub_menu dd:hover a, #side_box .sub_menu dd.on a, #side_box .sub_menu dd strong {border-color:#333;color:#333;position:relative;} #side_box .sub_menu dd:hover a:before, #side_box .sub_menu dd.on a:before, #side_box .sub_menu dd strong:before {bottom:-1px;width:100%;height:2px;background:#333;left:50%;transform:translateX(-50%);position:absolute;content:"";display:block;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1023px) { } @media only screen and (max-width:860px) { #side_box .sub_menu dd {line-height:29px;height:30px;padding:0 8px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:29px;line-height:29px;font-size:14px;padding:0 2px;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #side_box .sub_menu dd {line-height:27px;height:28px;padding:0 8px;} #side_box .sub_menu dd a, #side_box .sub_menu dd strong {height:27px;line-height:27px;font-size:14px;padding:0 2px;} } @media only screen and (max-width:479px) { #side_box {display:none;} } /*─────────────────────────────────────────────────────────── MAIN | index.html ───────────────────────────────────────────────────────────*/ /* pc */ .main_section {position:relative;z-index:2;} .main_title {padding:116px 0 106px;line-height:56px;font-size:48px;font-weight:300;color:#555;text-align:center;vertical-align:top;} .main_title span {font-size:26px;margin-top:1px;line-height:1em;font-weight:inherit;color:inherit;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;display:inline-block;vertical-align:top;} .main_pr .main_title {padding-bottom:96px;} /* 비주얼 */ .main_visual_v {width:100%;margin:0;/*padding:56.25% 0 0;height:0;*/height:100vh;box-sizing:border-box;position:relative;z-index:2;background:#fff;} /*.main_visual_v .web_visual {display:block;width:100%;position:absolute;left:50%;top:0;height:100%;z-index:3;transform:translateX(-50%);text-align:center;} .main_visual_v .web-video {display:block;width:auto;min-width:100%;min-height: 100%;height:100%;position:absolute;text-align:center;overflow:hidden;left:0;top:0;transform:translate(0%, 0%);} .main_visual_v .web-video video, .main_visual_v .web_visual iframe{position: absolute; top:50%;transform:translate(-50%, -50%);left:50%;height: auto; z-index: -1000; } .main_visual_v .web_visual iframe {width:100%;height:100%;min-width:1920px;}*/ .main_visual_v .web_visual {position:absolute;top:0;left:0;right:0;bottom:0;z-index:-99;text-align:center;} .main_visual_v .web_visual .web-video, .main_visual_v .web_visual .web-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } @media (min-aspect-ratio: 16/9) { .main_visual_v .web_visual .web-video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .main_visual_v .web_visual .web-video { width: 300%; left: -100%; } } .main_visual_v .web-video img {width:auto;min-width:100%;height:auto;min-height:100%;max-width:inherit;} .main_visual_v .mobile-img {display:none;text-align:center;} .main_visual_v .visual_title {display:none;transform:translate(-50%, -52%);left:50%;top:50%;width: calc(100% - 30px);position:absolute;text-align:left;margin:0;padding:0;box-sizing:border-box;z-index:5;} .main_visual_v .visual_title .title_box {text-align:center;} .main_visual_v .visual_title .title_box h3, .main_visual_v .visual_title .title_box p, .main_visual_v .visual_title .title_box a {color:#fff;display:block;margin:0;padding:0;box-sizing:border-box;text-align:Center;position:relative;z-index:1;} .main_visual_v .visual_title .title_box h3 {font-size:35px;line-height:1.17em;font-weight:300;letter-spacing:-0.01em;text-shadow:0 0 10px rgba(0, 0, 0, 0.3);font-family:'Gothic A1','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} .main_visual_v .visual_title .title_box p {font-size:16px;margin-top:0.87em;margin-bottom:2.18em;line-height:1.62em;text-shadow:0 0 6px rgba(0, 0, 0, 0.2);font-weight:300;} .main_visual_v .visual_title .title_box p span {font-size:inherit;line-height:inherit;font-weight:inherit;transform: skew(-0.1deg);} .main_visual_v .visual_title .title_box a {border-radius:45px;height:45px;line-height:43px;font-size:20px;padding:0 20px;text-shadow:0 0 6px rgba(0, 0, 0, 0.2);color:#fff;border:1px #fff solid;text-align:center;display:inline-block;margin:0 auto;transition:all 0.3s;} .main_visual_v .visual_title .title_box a img {margin-right:5px;height:15px;width:auto;vertical-align:middle;} .main_visual_v .visual_title .title_box a span {padding-right:36px;transform: skew(-0.1deg);height:inherit;line-height:inherit;font-size:inherit;color:inherit;margin:0;display:inline-block;position:relative;z-index:1;} .main_visual_v .visual_title .title_box a span:before {width:22px;height:11px;background-image:url(../images/skin/icon_arrow_wh.png);background-repeat:no-repeat;background-position:100% 50%;transition:all 0.3s;background-size:cover;margin:0;padding:0;display:inline-block;content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);} .main_visual_v .visual_title .title_box a:hover {background-color:#47aa42;border:1px #47aa42 solid;} .main_visual_v .visual_title .title_box a:hover span:before {background-position:0% 50%;} .main_visual_v .btn_scroll {font-size:14px;line-height:18px;padding:0 0 10px;bottom:20px;transform:translate(-50%, 0);text-align:center;position:absolute;left:50%;display:inline-block;margin:0;font-weight:300;color:#fff;z-index:15;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;cursor:pointer;} .main_visual_v .btn_scroll span {padding:0 0 46px 0;background-image:url(../images/skin/btn_icon_scroll.png);background-size:auto;34px;background-position:50% 100%;background-repeat:no-repeat;font-family:inherit;font-weight:inherit;color:inherit;font-size:inherit;line-height:inherit;display:inline-block;margin:0;} /* Science */ .main_science {padding-bottom:172px;background:#fff;} .main_science h1.main_copy {display:flex;justify-content:center;padding-top:116px;} .main_science h1.main_copy > div {position:relative;} .main_science h1.main_copy > div > p {font-size:40px;letter-spacing:-0.03em;text-align:center;} .main_science h1.main_copy > div > p > em {color:#47AA42;font-size:40px;font-weight:700;font-style:italic;} .main_science h1.main_copy > div:before {/*content:"";position:absolute;top:0;left:0;transform:translateX(calc(-100% - 5px));width:30px;height:28px;background:url('../images/skin/quotes_left.jpg') no-repeat center center/cover;*/} .main_science h1.main_copy > div:after {/*content:"";position:absolute;top:0;right:0;transform:translateX(calc(100% + 5px));width:30px;height:28px;background:url('../images/skin/quotes_right.jpg') no-repeat center center/cover;*/} .main_science .science_box {display:table;width:100%;margin:0;table-layout:fixed;} .main_science .science_box .thumb, .main_science .science_box .txt {width:50%;display:table-cell;vertical-align:middle;box-sizing:border-box;padding:0;} .main_science .science_box .thumb {font-size:0;} .main_science .science_box .thumb img {width:100%;height:auto;vertical-align:top;} .main_science .science_box.box_odd .thumb {text-align:right;} .main_science .science_box.box_even .thumb {text-align:left;} .main_science .science_box .txt {text-align:left;} .main_science .science_box.box_odd .txt {padding-left:45px;} .main_science .science_box.box_even .txt {padding-left:40px;padding-right: 30px;} .main_science .science_box.box_even .thumb + .txt {display:none;} .main_science .science_box .txt h4, {font-weight:300;color:#555;text-align:left;vertical-align:top;} .main_science .science_box .txt p, .main_science .science_box .txt a {font-weight:300;color:#555;text-align:left;vertical-align:top;} .main_science .science_box .txt h4 {line-height:38px;font-size:32px;color:#555;} .main_science .science_box .txt p {margin:22px 0 64px;line-height:32px;font-size:20px;letter-spacing: -0.8px;font-weight:300;} .main_science .science_box .txt p em, .main_science .science_box .txt p strong, .main_science .science_box .txt p span {letter-spacing:0;display:inline-block;vertical-align:top;line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;font-family:'roboto','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} .main_science .science_box .txt p em strong {font-style:italic;} .main_science .science_box .txt p em span {margin-top:5px;font-size:15px;line-height:1em;} .main_science .science_box .txt a {padding-right:36px;line-height:28px;font-size:16px;display:inline-block;position:relative;z-index:1;} .main_science .science_box .txt a:before {width:22px;height:11px;background-image:url(../images/skin/icon_arrow_bk.png);background-repeat:no-repeat;background-position:100% 50%;transition:all 0.3s;background-size:cover;margin:0;padding:0;display:inline-block;content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);} .main_science .science_box .txt a:hover:before {background-position:0% 50%;} /* 고정배너 */ .main_fixed {height:0;padding:0;padding-top:740px;position:relative;z-index:1;margin:0;width:100%;overflow:hidden;transition:all 0.3s;} .main_fixed .bg_fixed {background-image:url(../images/skin/bg_fixed.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%;position:fixed;left:50%;top:50%;width:100%;transform:translate(-50%, -50%);z-index:1;} .main_fixed .bnr_fixed {width:1666px;height:851px;background-image:url(../images/skin/bnr_fixed.png);background-repeat:no-repeat;background-position:0% 50%;background-size:auto 100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:2;transition:all 0.3s;} .main_fixed .bnr_fixed a {display:inline-block;position:absolute;z-index:3;width:100%;height:100%;font-size:0;} /* 제품 */ .main_pr {padding-bottom:228px;background:#fff;} .main_pr .main_title {} .main_pr .pr_wrap {width:100%;max-width:1580px;margin:0 auto;} .main_pr .pr_wrap ul {vertical-align:top;text-align:center;font-size:0;} .main_pr .pr_wrap li {width: calc(20% - 16px);display:inline-block;vertical-align:top;position:relative;z-index:1;box-sizing:border-box;} .main_pr .pr_wrap li + li {margin-left:20px;} .main_pr .pr_wrap li > a {width:100%;height:100%;display:inline-block;position:absolute;left:0;top:0;z-index:10;box-sizing:border-box;} .main_pr .pr_wrap li .pr_content {position:relative;z-index:1;box-sizing:border-box;width:100%;} .main_pr .pr_wrap li .pr_content:after {height:102px;bottom:0;border:1px #ddd solid;border-top:0;z-index:-1;left:0;box-sizing:border-box;display:inline-block;content:"";position:absolute;width:100%;} .main_pr .pr_wrap li .pr_content .thumb, .main_pr .pr_wrap li .pr_content .txt {text-align:center;width:100%;box-sizing:border-box;position:relative;} .main_pr .pr_wrap li .pr_content .thumb {vertical-align:middle;z-index:1;} .main_pr .pr_wrap li .pr_content .thumb img {width:100%;height:auto;vertical-align:middle;} .main_pr .pr_wrap li .pr_content .txt {z-index:8;padding:0;margin:0;} .main_pr .pr_wrap li .pr_content .txt > div {position:relative;height:102px;padding:20px 12px;box-sizing:border-box;width:100%;} .main_pr .pr_wrap li .pr_content .txt > div h4{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:22px;line-height:31px;letter-spacing:-1.2px;font-weight:300;color:#555;transform: skew(-0.1deg);} .main_pr .pr_wrap li .pr_content .txt h4 br {display:none;} .main_pr .pr_wrap li .pr_content .txt p {margin-top:10px;font-size:20px;line-height:30px;font-weight:300;color:#444;transform: skew(-0.1deg);} .main_pr .pr_wrap li .pr_content .txt p span {font-size:14px;margin-top:4px;line-height:1em;display:inline-block;vertical-align:top;font-weight:inherit;color:inherit;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} .main_pr .pr_wrap li .pr_content .pr_web_over {padding-bottom:140px;transition:background 0.3s ease 0s;background: rgba(66,141,65,0);background: linear-gradient(320deg, rgba(66,141,65,0) 0%, rgba(133,178,89,0) 62%, rgba(184,207,108,0) 100%);position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;box-sizing:border-box;text-align:Center;vertical-align:middle;display:none;} .main_pr .pr_wrap li .pr_content .pr_web_over img {width:100%;height:auto;vertical-align:middle;} .main_pr .pr_wrap li .pr_content .pr_web_over span {width:25px;height:25px;bottom:160px;background-image:url(../images/skin/icon_more_wh.png);background-size:cover;transform:translateX(-50%);margin:0 auto;background-position:50% 50%;background-repeat:no-repeat;vertical-align:top;padding:0;display:inline-block;position:absolute;left:50%;} .main_pr .pr_wrap li:hover .pr_content .txt h4, .main_pr .pr_wrap li:hover .pr_content .txt p {color:#fff;} .main_pr .pr_wrap li:hover .pr_content .pr_web_over {display:inline-block;background: rgba(20,113,17,0.8);background: linear-gradient(320deg, rgba(20,113,17,0.8) 0%, rgba(97,156,45,0.8) 62%, rgba(166,195,71,0.8) 100%);} /* 게시판 */ .main_board {margin:0;width:100%;background:#fff;} .main_board ul {background-image:url(../images/skin/bg_board01.jpg);background-position:50% 50%;background-size:cover;background-repeat:no-repeat;width:100%;transition:all 0.3s;} .main_board ul:after {clear:both;content:"";display:block;} /*.main_board ul.bbs_new {background-image:url(../images/skin/bg_board01.jpg);} .main_board ul.bbs_career {background-image:url(../images/skin/bg_board02.jpg);} .main_board ul.bbs_contact {background-image:url(../images/skin/bg_board03.jpg);}*/ .main_board li {height:260px;width:33.32%;background: rgba(0, 0, 0, 0);float:left;position:relative;z-index:1;transition:all 0.3s;} .main_board li:hover {background: rgba(0, 0, 0, 0.2);} .main_board li + li:before {height:100%;background:#fff;opacity:0.2;width:1px;position:absolute;left:0;top:0;display:inline-block;content:"";z-index:10;} .main_board li a {position:absolute;left:0;top:0;width:100%;height:100%;display:inline-block;z-index:5;} .main_board li .bbs_txt {z-index:1;text-align:center;position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%, -50%);} .main_board li .bbs_txt span, .main_board li .bbs_txt strong {display:block;margin:0 auto;vertical-align:top;} .main_board li .bbs_txt span {margin-bottom:13px;line-height:22px;font-size:20px;font-weight:300;color:#ddd;font-family:'Lato','NanumSquare','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,sans-serif;} .main_board li .bbs_txt strong {line-height:38px;font-size:30px;font-weight:300;color:#fff;} @media only screen and (max-width:1720px) { .main_visual_v {padding-top:100vh;} } @media only screen and (max-width:1627px) { /* 제품 */ .main_pr .pr_wrap {width:100%;padding:0 15px;box-sizing:border-box;} } @media only screen and (max-width:1570px) { /* 제품 */ .main_pr .pr_wrap li {width: calc(20% - 12.8px);} .main_pr .pr_wrap li + li {margin-left:16px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:20px;} .main_pr .pr_wrap li .pr_content .txt p {font-size:18px;} } @media only screen and (max-width:1484px) { /* 제품 */ .main_pr .pr_wrap li .pr_content:after {height:98px;} .main_pr .pr_wrap li .pr_content .txt > div {height:98px;padding:18px 8px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:19px;line-height:28px;letter-spacing:-0.8px;} .main_pr .pr_wrap li .pr_content .txt p {font-size:17px;line-height:27px;} .main_pr .pr_wrap li .pr_content .txt p span {font-size:13px;margin-top:3px;} .main_pr .pr_wrap li .pr_content .pr_web_over {padding-bottom:128px;} .main_pr .pr_wrap li .pr_content .pr_web_over span {bottom:148px;} } @media only screen and (max-width:1380px) { /* 고정배너 */ .main_fixed .bnr_fixed {width:1480px;height:790px;} /* 제품 */ .main_pr {padding-bottom:200px;} .main_pr .pr_wrap li {width: calc(20% - 9.6px);} .main_pr .pr_wrap li + li {margin-left:12px;} .main_pr .pr_wrap li .pr_content:after {height:88px;} .main_pr .pr_wrap li .pr_content .txt > div {height:88px;padding:18px 8px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:18px;line-height:26px;} .main_pr .pr_wrap li .pr_content .txt p {margin-top:8px;font-size:15px;line-height:25px;} .main_pr .pr_wrap li .pr_content .txt p span {font-size:12px;} .main_pr .pr_wrap li .pr_content .pr_web_over {padding-bottom:118px;} .main_pr .pr_wrap li .pr_content .pr_web_over span {bottom:138px;} } @media only screen and (max-width:1280px) { /* 제품 */ .main_pr {padding-bottom:180px;} .main_pr .pr_wrap li .pr_content:after {height:80px;} .main_pr .pr_wrap li .pr_content .txt > div {height:80px;padding:16px 7px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:17px;line-height:24px;letter-spacing:-0.4px;} .main_pr .pr_wrap li .pr_content .txt p {line-height:23px;} .main_pr .pr_wrap li .pr_content .txt p span {font-size:12px;margin-top:3px;} .main_pr .pr_wrap li .pr_content .pr_web_over {padding-bottom:110px;} .main_pr .pr_wrap li .pr_content .pr_web_over span {width:22px;height:22px;bottom:124px;} } @media only screen and (max-width:1240px) { /* 메인 비주얼 동영상 */ .main_visual_v .visual_title {width:94%;} } @media only screen and (max-width:1217px) { .main_title {padding:9.6% 0 8.3%;line-height:52px;font-size:44px;} .main_pr .main_title {padding-bottom:8%;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:74vw;} .main_visual_v .web_visual iframe {min-width:1600px;} /* Science */ .main_science {padding-bottom:14.3%;} .main_science h1.main_copy {padding-top:9.6%;} .main_science h1.main_copy > div > p {font-size:34px;} .main_science h1.main_copy > div > p > em {font-size:34px;} .main_science h1.main_copy > div:before, .main_science h1.main_copy > div:after {width:26px;height:24px;} .main_science .science_box {width: calc(100% + 30px);margin-left:-15px;margin-right:-15px;} .main_science .science_box.box_odd .txt {padding-left:2.6%;} .main_science .science_box.box_even .txt {padding-left: calc(3% + 15px);} .main_science .science_box .thumb {box-sizing:border-box;} .main_science .science_box.box_odd .thumb {padding-left:0px;} .main_science .science_box.box_even .thumb {padding-right:0px;} .main_science .science_box .txt h4 {line-height:36px;font-size:30px;} .main_science .science_box .txt p {margin:3.6% 0 10.6%;line-height:30px;font-size:19px;} .main_science .science_box .txt p br {display:none;} .main_science .science_box .txt p em span {font-size:14px;} .main_fixed .bnr_fixed {width:125%;height:118%;} /* 제품 */ .main_pr {padding-bottom:150px;} .main_pr .pr_wrap {text-align:center;} .main_pr .pr_wrap li {width: calc(33.32% - 16px);} .main_pr .pr_wrap li + li {margin-left:24px;} .main_pr .pr_wrap li:nth-of-type(4) {margin-left:0;} .main_pr .pr_wrap li:nth-of-type(n + 4) {margin-top:24px;} .main_pr .pr_wrap li .pr_content .txt h4 br {display:inline-block;} /* 게시판 */ .main_board li {height:0;padding-top:21.6%;} .main_board li .bbs_txt span {margin-bottom:11px;line-height:21px;font-size:19px;} .main_board li .bbs_txt strong {line-height:36px;font-size:28px;} } @media only screen and (max-width:1100px) { .main_visual_v {padding-top:82vw;} } @media only screen and (max-width:1023px) { .main_title {padding:10.6% 0 7.8%;line-height:48px;font-size:40px;} .main_title span {font-size:25px;} .main_pr .main_title {padding-bottom:7.8%;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:88vw;} /* Science */ .main_science {padding-bottom:14.3%;} .main_science .science_box .txt h4 {line-height:34px;font-size:27px;} .main_science .science_box .txt p {margin:3.2% 0 9.6%;line-height:28px;font-size:18px;letter-spacing: -0.6px;} .main_science .science_box .txt a {line-height:26px;} /* 제품 */ .main_pr {padding-bottom:120px;} .main_pr .pr_wrap li {width: calc(33.32% - 12px);} .main_pr .pr_wrap li + li {margin-left:18px;} .main_pr .pr_wrap li:nth-of-type(n + 4) {margin-top:18px;} /* 게시판 */ .main_board li {padding-top:22.6%;} .main_board li .bbs_txt span {margin-bottom:9px;line-height:20px;font-size:18px;} .main_board li .bbs_txt strong {line-height:34px;font-size:27px;} } @media only screen and (max-width:960px) { .main_title {padding:11.6% 0 7.2%;line-height:44px;font-size:36px;} .main_title span {font-size:24px;} .main_pr .main_title {padding-bottom:7.2%;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:100%;} .main_visual_v .visual_title {display:block;} .main_visual_v .visual_title .title_box h3 {font-size:55px;} .main_visual_v .visual_title .title_box p {font-size:23px;} .main_visual_v .visual_title .title_box a {border-radius:54px;height:54px;line-height:52px;font-size:18px;padding:0 28px;} .main_visual_v .visual_title .title_box a img {margin-right:5px;height:19px;margin-top:-4px;} .main_visual_v .visual_title .title_box a span {padding-right:33px;} .main_visual_v .visual_title .title_box a span:before {width:20px;height:10px;} .main_visual_v .web-video {display:none;} .main_visual_v .mobile-img {display:block;width:100%;height:100%;position:absolute;} .main_visual_v .mobile-img img {width:auto;height:100%;max-width:inherit;transform: translateX(-25%);} .main_visual_v .btn_scroll {display:none;} /* Science */ .main_science h1.main_copy {padding-top:11.6%;} .main_science h1.main_copy > div > p {font-size:30px;} .main_science h1.main_copy > div > p > em {font-size:30px;} .main_science h1.main_copy > div:before, .main_science h1.main_copy > div:after {width:26px;height:24px;} .main_science .science_box .txt h4 {line-height:31px;font-size:25px;} .main_science .science_box .txt p {margin:2.8% 0 8.8%;line-height:26px;font-size:17px;letter-spacing: -0.5px;} .main_science .science_box .txt a {font-size:15px;} } @media only screen and (max-width: 860px) { .main_title {padding-top:11.6%;line-height:41px;font-size:33px;} .main_title span {font-size:23px;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:110%;} .main_visual_v .visual_title .title_box h3 {font-size:52px;} .main_visual_v .visual_title .title_box p {font-size:22px;} .main_visual_v .visual_title .title_box a {border-radius:52px;height:52px;line-height:50px;font-size:18px;padding:0 26px;} .main_visual_v .visual_title .title_box a img {margin-right:5px;height:19px;margin-top:-4px;} /* Science */ .main_science h1.main_copy {padding-top:11.6%;} .main_science h1.main_copy > div {padding:0 20px;} .main_science h1.main_copy > div > p {font-size:6.0vw;word-break:keep-all;} .main_science h1.main_copy > div > p > em {font-size:6.0vw;} .main_science h1.main_copy > div > p > br {display:none;} .main_science h1.main_copy > div:before {left:20px;transform:none;width:20px;height:18px;} .main_science h1.main_copy > div:after {right:20px;transform:none;width:20px;height:18px;} .main_science .science_box .txt h4 {line-height:27px;font-size:22px;} .main_science .science_box .txt p {margin:2.6% 0 8.2%;line-height:25px;font-size:16px;letter-spacing: -0.2px;} .main_science .science_box .txt p em span {margin-top:3px;font-size:14px;} .main_science .science_box .txt a {padding-right:32px;line-height:24px;font-size:14px;} .main_science .science_box .txt a:before {width:21px;height:10px;} /* 고정배너 */ .main_fixed {padding-top:64%;} .main_fixed .bg_fixed {background-position:60% 50%;height:93%;} .main_fixed .bnr_fixed {width:122%;height:112%;} /* 게시판 */ .main_board li {padding-top:23.6%;} .main_board li .bbs_txt span {margin-bottom:8px;line-height:19px;font-size:17px;} .main_board li .bbs_txt strong {line-height:33px;font-size:26px;} } @media only screen and (max-width:767px) { .main_title {line-height:39px;font-size:31px;} .main_title span {font-size:22px;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:114%;} .main_visual_v .visual_title {width:88%;} .main_visual_v .visual_title .title_box h3 {font-size:50px;} .main_visual_v .visual_title .title_box a span {padding-right:31px;} /* Science */ .main_science {padding-bottom:0;} .main_science .science_box {display:block;} .main_science .science_box .thumb, .main_science .science_box .txt {width:100%;display:block;} .main_science .science_box .txt {padding-top:4.3%;padding-bottom:10%} .main_science .science_box.box_odd .txt {padding-left: calc(6.2% + 15px);padding-right:10px;} .main_science .science_box.box_even .txt {display:none;padding-left: calc(6.2% + 15px);} .main_science .science_box.box_even .thumb + .txt {display:block;} .main_science .science_box .txt p br {display:inline-block;} /* 제품 */ .main_pr {padding-bottom:94px;} .main_pr .pr_wrap li {width: calc(33.32% - 8px);} .main_pr .pr_wrap li + li {margin-left:12px;} .main_pr .pr_wrap li:nth-of-type(4) {margin-left:0;} .main_pr .pr_wrap li:nth-of-type(n + 4) {margin-top:12px;} .main_pr .pr_wrap li .pr_content:after {height:78px;} .main_pr .pr_wrap li .pr_content .txt > div {height:78px;padding:16px 6px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:15px;line-height:23px;} .main_pr .pr_wrap li .pr_content .txt p {font-size:14px;line-height:22px;} .main_pr .pr_wrap li:hover .pr_content .pr_web_over {display:none;} .main_pr .pr_wrap li:hover .pr_content .txt h4 {color:#000;} .main_pr .pr_wrap li:hover .pr_content .txt p {color:#444;} /* 게시판 */ .main_board ul {background:#fff !important;} .main_board li {padding-top:23.6%;width:100%;background-repeat:no-repeat;background-size:cover !important;background-position:50% 50% !important;} .main_board ul li:nth-of-type(1) {background-image:url(../images/skin/bg_board01.jpg);} .main_board ul li:nth-of-type(2) {background-image:url(../images/skin/bg_board02.jpg);} .main_board ul li:nth-of-type(3) {background-image:url(../images/skin/bg_board03.jpg);} .main_board li:hover {background: rgba(0, 0, 0, 0);} .main_board li + li:before {display:none;} .main_board li .bbs_txt span {margin-bottom:7px;line-height:19px;font-size:17px;} .main_board li .bbs_txt strong {line-height:32px;font-size:25px;} } @media only screen and (max-width:700px) { /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:122%;} } @media only screen and (max-width:680px) { /* 제품 */ .main_pr {padding-bottom:84px;} .main_pr .pr_wrap li .pr_content:after {height:72px;} .main_pr .pr_wrap li .pr_content .txt > div {height:72px;padding:15px 6px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:14px;line-height:21px;} .main_pr .pr_wrap li .pr_content .txt p {font-size:13px;line-height:20px;} .main_pr .pr_wrap li .pr_content .pr_web_over {padding-bottom:99px;} .main_pr .pr_wrap li .pr_content .pr_web_over span {width:20px;height:20px;bottom:100px;} } @media only screen and (max-width: 640px) { .main_title {padding-top:13.1%;line-height:38px;font-size:30px;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:130%;} .main_visual_v .mobile-img img {transform: translateX(-30%);} .main_visual_v .visual_title .title_box h3 {font-size:47px;} .main_visual_v .visual_title .title_box p {font-size:21px;} .main_visual_v .visual_title .title_box a span {padding-right:28px;} /* Science */ .main_science .science_box {width: calc(100% + 24px);margin-left:-12px;margin-right:-12px;} .main_science .science_box.box_odd .thumb {padding-left:0px;} .main_science .science_box.box_even .thumb {padding-right:0px;} .main_science .science_box .txt {padding-top:5.3%;padding-bottom:12%} .main_science .science_box.box_odd .txt, .main_science .science_box.box_even .txt {padding-left: calc(6.2% + 12px);} .main_science .science_box .txt h4 {line-height:26px;font-size:21px;} .main_science .science_box .txt p {margin-bottom:7.2%;font-size:16px;letter-spacing:0px;} .main_science .science_box .txt p br {display:inline-block;} .main_science .science_box .txt p em span {margin-top:3px;font-size:14px;} .main_science .science_box .txt a {padding-right:30px;line-height:23px;font-size:13px;} .main_science .science_box .txt a:before {width:20px;height:9px;} /* 고정배너 */ .main_fixed {padding-top:68%;} .main_fixed .bg_fixed {background-position:66% 50%;height:83%;} /* 제품 */ .main_pr {padding-bottom:74px;} .main_pr .pr_wrap {padding:0 12px;} .main_pr .pr_wrap li {width: calc(50% - 6px);} .main_pr .pr_wrap li + li {margin-left:12px !important;} .main_pr .pr_wrap li:nth-of-type(odd) {margin-left:0 !important;} .main_pr .pr_wrap li:nth-of-type(n + 3) {margin-top:12px;} .main_pr .pr_wrap li:nth-of-type(5) {width:100%;} .main_pr .pr_wrap li .pr_content:after {height:72px;} .main_pr .pr_wrap li .pr_content .txt > div {height:72px;padding:15px 5px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:14px;line-height:21px;letter-spacing:0;} .main_pr .pr_wrap li .pr_content .txt h4 br {display:inline-block;} .main_pr .pr_wrap li .pr_content .txt p {margin-top:6px;font-size:13px;line-height:20px;} .main_pr .pr_wrap li .pr_content .txt p span {font-size:12px;margin-top:2px;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content:after {display:none;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content {display:table;table-layout:fixed;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content .thumb, .main_pr .pr_wrap li:nth-of-type(5) .pr_content .txt {width:50%;height:auto;display:table-cell;box-sizing:border-box;border-collapse:collapse;vertical-align:middle;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content .thumb > div {padding-top:95.5%;overflow:hidden;position:relative;z-index:1;width:100%;height:0;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content .thumb > div img {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .main_pr .pr_wrap li:nth-of-type(5) .pr_content .txt {border:1px #ddd solid;border-left:0;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content .txt > div {height:auto;display:inline-block;vertical-align:middle;position:static;} /* 게시판 */ .main_board li {padding-top:24.6%;} .main_board li .bbs_txt span {margin-bottom:6px;line-height:18px;font-size:16px;} .main_board li .bbs_txt strong {line-height:30px;font-size:24px;} } @media only screen and (max-width:580px) { /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:138%;} .main_visual_v .visual_title .title_box h3 {font-size:44px;} .main_visual_v .visual_title .title_box p {font-size:20px;} .main_visual_v .visual_title .title_box a {border-radius:50px;height:50px;line-height:48px;font-size:17px;padding:0 24px;} .main_visual_v .visual_title .title_box a img {height:18px;margin-top:-3px;} .main_science h1.main_copy > div:before {left:10px;transform:none;width:16px;height:15px;} .main_science h1.main_copy > div:after {right:10px;transform:none;width:16px;height:15px;} } @media only screen and (max-width:500px) { /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:144%;} .main_visual_v .visual_title .title_box h3 {font-size:39px;} .main_visual_v .visual_title .title_box p {font-size:19px;} .main_visual_v .visual_title .title_box a {border-radius:48px;height:48px;line-height:46px;font-size:16px;} .main_visual_v .visual_title .title_box a img {height:17px;} .main_visual_v .mobile-img img {transform: translateX(-32%);} } @media only screen and (max-width:479px) { .main_title {padding-top:15.1%;font-size:29px;} /* 메인 비주얼 동영상 */ .main_visual_v .visual_title .title_box h3 {font-size:35px;} .main_visual_v .visual_title .title_box p {font-size:16px;} .main_visual_v .visual_title .title_box a {border-radius:45px;height:45px;line-height:43px;font-size:14px;padding:0 20px;} .main_visual_v .visual_title .title_box a img {height:15px;margin-top:-2px;} .main_visual_v .visual_title .title_box a span {padding-right:26px;} .main_visual_v .visual_title .title_box a span:before {width:18px;height:9px;} /* Science */ .main_science .science_box .txt {padding-top:6.3%;padding-bottom:13%} .main_science .science_box.box_odd .txt, .main_science .science_box.box_even .txt {padding-left: calc(6% + 12px);} .main_science .science_box .txt p {font-size:15px;letter-spacing:-0.2px;} .main_science .science_box .txt p br {display:none;} .main_science .science_box .txt p em span {font-size:13px;} /* 고정배너 */ .main_fixed {padding-top:72%;} .main_fixed .bg_fixed {height:80%;} /* 제품 */ .main_pr {padding-bottom:64px;} .main_pr .pr_wrap li .pr_content:after {height:70px;} .main_pr .pr_wrap li .pr_content .txt > div {height:70px;} .main_pr .pr_wrap li .pr_content .txt h4 {line-height:20px;} /* 게시판 */ .main_board li {padding-top:26.6%;} .main_board li .bbs_txt span {margin-bottom:4px;line-height:16px;font-size:15px;} .main_board li .bbs_txt strong {line-height:28px;font-size:22px;} } @media only screen and (max-width:423px) { /* 제품 */ .main_pr .pr_wrap li .pr_content:after {height:70px;} .main_pr .pr_wrap li .pr_content .txt > div {height:70px;} .main_pr .pr_wrap li:nth-of-type(3) .pr_content:after, .main_pr .pr_wrap li:nth-of-type(4) .pr_content:after, .main_pr .pr_wrap li:nth-of-type(3) .pr_content .txt > div, .main_pr .pr_wrap li:nth-of-type(4) .pr_content .txt > div {height:90px;} } @media only screen and (max-width:375px) { .main_title {padding-top:17.1%;} /* 메인 비주얼 동영상 */ /* Science */ .main_science h1.main_copy {padding-top:15%;} .main_science h1.main_copy > div:before {left:10px;transform:none;width:16px;height:15px;} .main_science h1.main_copy > div:after {right:10px;transform:none;width:16px;height:15px;} .main_science .science_box.box_odd .txt {padding-left:5.8%;} .main_science .science_box.box_even .txt {padding-right:14%;} .main_science .science_box .txt h4 {line-height:26px;font-size:21px;} .main_science .science_box .txt p {margin-bottom:7.2%;font-size:14px;letter-spacing:-0.2px;} .main_science .science_box .txt p br {display:none;} .main_science .science_box .txt p em span {margin-top:3px;font-size:13px;} .main_science .science_box .txt a {padding-right:30px;line-height:23px;font-size:13px;} .main_science .science_box .txt a:before {width:20px;height:9px;} /* 제품 */ .main_pr {padding-bottom:64px;} .main_pr .pr_wrap {padding:0 10px;} .main_pr .pr_wrap li {width: calc(50% - 5px);} .main_pr .pr_wrap li + li {margin-left:10px !important;} .main_pr .pr_wrap li:nth-of-type(odd) {margin-left:0 !important;} .main_pr .pr_wrap li:nth-of-type(n + 3) {margin-top:10px;} .main_pr .pr_wrap li:nth-of-type(5) {width:100%;} .main_pr .pr_wrap li .pr_content:after {height:60px;} .main_pr .pr_wrap li .pr_content .txt > div {height:60px;padding:11px 5px;} .main_pr .pr_wrap li:nth-of-type(3) .pr_content:after, .main_pr .pr_wrap li:nth-of-type(4) .pr_content:after, .main_pr .pr_wrap li:nth-of-type(3) .pr_content .txt > div, .main_pr .pr_wrap li:nth-of-type(4) .pr_content .txt > div {height:79px;} .main_pr .pr_wrap li .pr_content .txt h4 {font-size:14px;line-height:19px;} .main_pr .pr_wrap li .pr_content .txt p {font-size:13px;line-height:20px;} .main_pr .pr_wrap li .pr_content .txt p span {font-size:12px;margin-top:2px;} .main_pr .pr_wrap li:nth-of-type(5) .pr_content .thumb > div {padding-top:95.5%;} } @media only screen and (max-width:330px) { .main_title {font-size:26px;} /* 메인 비주얼 동영상 */ .main_visual_v {padding-top:148%;} .main_visual_v .visual_title {width:92%;} .main_visual_v .visual_title .title_box h3 {font-size:32px;} .main_visual_v .visual_title .title_box p {font-size:15px;} .main_visual_v .visual_title .title_box a {border-radius:42px;height:42px;line-height:40px;font-size:13px;padding:0 18px;} .main_visual_v .visual_title .title_box a img {margin-right:3px;height:13px;} .main_visual_v .visual_title .title_box a span {padding-right:20px;} /* Science */ .main_science .science_box {width: calc(100% + 20px);margin-left:-10px;margin-right:-10px;} .main_science .science_box.box_odd .thumb {padding-left:10px;} .main_science .science_box.box_even .thumb {padding-right:10px;} .main_science .science_box.box_odd .txt, .main_science .science_box.box_even .txt {padding-left: calc(5.5% + 10px);} .main_science .science_box .txt h4 {line-height:24px;font-size:20px;} .main_science .science_box .txt p {font-size:13px;line-height:23px;letter-spacing:-0.2px;} .main_science .science_box .txt p em span {font-size:12px;} /* 제품 */ .main_pr .pr_wrap li .pr_content:after, .main_pr .pr_wrap li .pr_content .txt > div {height:79px;} .main_pr .pr_wrap li .pr_content .txt p {font-size:12px;} /* 고정배너 */ .main_fixed {padding-top:72%;} .main_fixed .bg_fixed {height:77%;} .main_fixed .bnr_fixed {width:124%;} /* 게시판 */ .main_board li {padding-top:28.6%;} } /*230201 이진하 추가*/ #wrap #container .sub_bg_wrap.sub_goods2 {background:#f2f2f2;height:720px;z-index: 1;position:relative} /*#wrap #container .sub_bg_wrap.sub_goods2 .goods_slide {position: relative;top: 50px;max-width: 1380px;left: 50%;margin-left: -690px;height:100%;padding-bottom:100px}*/ #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide {position: relative;top: 50px;width: 90%;margin:0 auto;height:100%;padding-bottom:100px} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide ul li{background-repeat: no-repeat;background-position: bottom 180px right;} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {color: #444;font-size: 62px;font-weight:800;position:relative;padding-top:240px;padding-left:95px;max-width:calc(100% - 920px);z-index:100} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .info{color: #444;font-size: 26px;position:relative;padding-top:22px;padding-left:95px;line-height:130%;;max-width:calc(100% - 920px);z-index:100} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .img_area{position:absolute;right:40px;top:50%;transform: translateY(-50%)} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .img_area .small{display:none} #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area img{max-width:100%} /*#wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area img{position:relative;float:right;top:-280px} #wrap #container .sub_bg_wrap.sub_goods2 .btnl{position:absolute;left:50%;margin-left:-740px;top:385px;width:24px;height:49px;background-image:url(../images/sub/btn_left.png);background-size:24px 49px} #wrap #container .sub_bg_wrap.sub_goods2 .btnr{position:absolute;right:50%;margin-right:-740px;top:385px;width:24px;height:49px;background-image:url(../images/sub/btn_right.png);background-size:24px 49px}*/ #wrap #container .sub_bg_wrap.sub_goods2 .btnl{position:absolute;left:4%;width:24px;height:49px;background-image:url(../images/sub/btn_left.png);background-size:24px 49px} #wrap #container .sub_bg_wrap.sub_goods2 .btnr{position:absolute;right:4%;width:24px;height:49px;background-image:url(../images/sub/btn_right.png);background-size:24px 49px} #wrap #container .sub_bg_wrap.sub_goods2 .swiper-pagination{top: 562px;left: calc(5% + 92px)} #wrap #container .sub_bg_wrap.sub_goods2 .swiper-pagination-bullet{width: 10px;height:10px;;border-radius: 50%;display:inline-block;margin-right:10px;vertical-align:middle} #wrap #container .sub_bg_wrap.sub_goods2 .swiper-pagination-bullet span+span{ margin-right: 30px} #wrap #container .sub_bg_wrap.sub_goods2 .swiper-pagination-bullet-active{;width: 7px;height: 7px;border:2px solid #777777;background-color:transparent;border-radius: 50%;} #wrap #container .sub_img_title_box.title_goods{height:700px} #contents_wrap.contents_goods{width:100%} @media only screen and (max-width: 1449px){ #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .img_area{max-width:800px} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {color: #444;font-size: 62px;font-weight:800;position:relative;padding-top:240px;padding-left:95px;max-width:calc(100% - 800px)} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .info{color: #444;font-size: 26px;position:relative;padding-top:22px;padding-left:95px;line-height:130%;;max-width:calc(100% - 800px)} } @media only screen and (max-width: 1320px){ #wrap #container .sub_bg_wrap.sub_goods2{height:100%;} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide{width:90%;top: 0;max-width:100%;left: 0;margin:0 auto;padding-bottom:50px} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {padding-top:180px; padding-left:0;text-align:center;max-width:100%} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .info{padding-top:22px; padding-left:0;text-align:center;max-width:100%} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .img_area{max-width:100%;margin:0 auto;padding-top:6%;width:100%;text-align:center;position:relative;right:unset;top:unset;transform:unset} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .img_area .big{display:none} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .img_area .small{display:unset} /*#wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area img{top:0;;float:unset;}*/ #wrap #container .sub_bg_wrap.sub_goods2 .swiper-pagination{width:100%;top:unset;left:unset;bottom:25px;margin-left:0} } @media only screen and (max-width: 767px){ #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {padding-top:130px; } } .goods_view_top{margin-top:100px;} .goods_view_top .goods_wrap { display: table; table-layout: fixed; width:1440px; margin: 0; border-collapse: collapse; box-sizing: border-box; margin: 0 auto; } .goods_view_top .goods_img, .goods_view_top .goods_info, .goods_view_top .goods_space { display: table-cell; border-collapse: collapse; vertical-align: middle; box-sizing: border-box; } .goods_view_top .goods_img{ width: 45%; /*background-image:url(../images/sub/goods_thum_box.png);*/ background-repeat: no-repeat; position:relative; background-size: 100%; } .goods_view_top .goods_img:after { content: ""; display: block; padding-bottom: 100%; } .goods_view_top .goods_img .img_box{ position:absolute; max-width:60%; margin:0 auto; top: 15%; left:20% } .goods_img .swiper-button { width: 23px; height: 42px; position: absolute; cursor:pointer } .goods_img .swiper-button-next { background: url(../images/sub/btn_right_s.png) no-repeat right; background-size:100%; right:40px; } .goods_img .swiper-button-prev { background: url(../images/sub/btn_left_s.png) no-repeat right; background-size:100%; left: 40px; } .goods_view_top .goods_space{ width: 10%; } .goods_view_top .goods_info{ width: 45%; vertical-align:top } .goods_view_top .goods_info .cate_txt{ font-size: 20px; font-weight:800; color: rgb(71, 170, 66); margin-bottom:25px; letter-spacing: -0.03em; } .goods_view_top .goods_info .name_txt{ font-size: 50px; font-weight:800; color: rgb(68, 68, 68); margin-bottom:47px; letter-spacing: -0.03em; } .goods_view_top .goods_info .summary_txt{ font-size: 20px; color: rgb(68, 68, 68); line-height: 1.3; letter-spacing: -0.03em; margin-bottom:43px; } .goods_view_top .goods_info .line{ background-color: rgb(204, 204, 204); width: 100%; height: 1px; margin-bottom:45px; } .goods_view_top .goods_info .goods_check ul{ margin-bottom:70px } .goods_view_top .goods_info .goods_check li{ font-size: 17px; color: rgb(68, 68, 68); margin-bottom:28px } .goods_view_top .goods_info .goods_check li p{ width:110px; font-size: 17px; font-weight:bold; color: rgb(34, 34, 34); display:inline-block } .goods_view_top .goods_info button { font-size: 26px; color:#fff; width:100%; background:#47aa42; padding:22px; letter-spacing: -0.02em; } .goods_view_top .goods_info button .arrow { position: relative; display:inline-block; } .goods_view_top .goods_info button .arrow::after { position: absolute; left: 0; top: -16px; content: ''; width: 11px; /* 사이즈 */ height: 11px; /* 사이즈 */ border-top: 2px solid #fff; /* 선 두께 */ border-right: 2px solid #fff; /* 선 두께 */ transform: rotate(45deg); /* 각도 */ } .goods_view_top .goods_detail{ /*width:1440px; min-width:1440px;*/ max-width:2000px; margin:5em auto; } .goods_view_top .goods_detail img{ display:block; margin:0 auto; } @media only screen and (max-width: 1320px){ .goods_view_top .goods_wrap {width:100%} .goods_view_top .goods_detail{width:100%} } @media only screen and (max-width: 992px){ .goods_view_top{margin-top:70px;width:100%;margin-left:0;margin-right:0} .goods_view_top .goods_img .img_box{top: 15%;} .goods_view_top .goods_img, .goods_view_top .goods_info, .goods_view_top .goods_space{display:block;width:100%} .goods_view_top .goods_img{max-width:650px;margin:0 auto 5em} /*.goods_img .swiper-button {top:calc(55% - 21px)}*/ .goods_img .swiper-button-next {right:2rem;width:18px;height:33px;} .goods_img .swiper-button-prev { left: 2rem;width:18px;height:33px;} .goods_view_top .goods_info button {position: fixed;bottom: 0;z-index: 100000;left:0} .goods_view_top .goods_info .goods_check ul {margin-bottom:0} } .goods_wrapper{background: #f8f8f8;margin-left: -15px;margin-right: -15px;} .goods_wrapper .goods_aside_wrapper {position:relative;width:1500px;margin:0 auto;padding:0;height:70px} .goods_wrapper .goods_aside_wrap_box {top:0;z-index:20;position:absolute;left:50%;width:100%;transform:translateX(-50%);} .goods_wrapper .goods_aside_wrapper.fix {position:static;} .goods_wrapper .goods_aside_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk:after {position:absolute;left:50%;transform:translateX(-50%);bottom:0;width: calc(100% - 80px);height:1px;background: rgba(0, 0, 0, 0);display:inline-block;content:"";} .goods_wrapper .goods_aside_wrapper + .sub_cont {padding-top:0px;} .goods_wrapper .goods_aside_tab_wrap {background: rgba(0, 0, 0, 0.2);width:100%;margin:0;vertical-align:top;text-align:center;font-size:0;box-sizing:border-box;} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk {background: rgba(255, 255, 255, 0.2);} .goods_wrapper .goods_aside_tab_wrap dl {z-index:2;width:100%;margin:0 auto;vertical-align:top;text-align:center;font-size:0;box-sizing:border-box;} .goods_wrapper .goods_aside_tab_wrap dt {display:none;} .goods_wrapper .goods_aside_tab_wrap dd {position:static;;font-size:0;} .goods_wrapper .goods_aside_tab_wrap dd a {width:auto;height:70px;padding:23px 5%;line-height:24px;font-size:20px;color:#fff;font-weight:400;margin:0;text-align:center;display:inline-block;vertical-align:top;box-sizing:border-box;transition:background 0.2s ease 0s;margin:0 auto} .goods_wrapper .goods_aside_tab_wrap dd a:after {clear:both;content:"";display:block;} .goods_wrapper .goods_aside_tab_wrap dd a:hover {background: rgba(0, 0, 0, 0.4);} .goods_wrapper .goods_aside_tab_wrap dd a + a:before {width:1px;height:20px;margin:2px 0;padding:0;display:none;content:"";vertical-align:top;float:left;} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_line dd a + a:before {display:inline-block;} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_line dd a.on + a:before, .aside_tab_wrap.aside_tab_line dd a + a.on:before {display:none;} .goods_wrapper .goods_aside_tab_wrap dd a.on {background: rgba(255, 255, 255, 1);color:#222;font-weight:700;} .goods_wrapper .goods_aside_tab_wrap dd a {color:#fff;} .goods_wrapper .goods_aside_tab_wrap dd a em, .aside_tab_wrap dd a span {line-height:inherit;font-size:inherit;color:inherit;font-weight:inherit;display:inline-block;vertical-align:top;margin:0;padding:0;} .goods_wrapper .goods_aside_tab_wrap dd a em /*italic*/{font-style:italic;} .goods_wrapper .goods_aside_tab_wrap dd a span, .aside_tab_wrap dd a span.label /*R*/{font-size:0.75em;line-height:1.3em;} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk dd a {color:#222;} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk dd a:hover {background: rgba(255, 255, 255, 0.6);} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk dd a.on {background: rgba(255, 255, 255, 1);} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk dd a + a:before {background:#aaa;} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk dd a.on{color:#47aa42;font-weight:800} .goods_wrapper .goods_aside_tab_wrap.goods_aside_tab_bk dd a + a:before {background:none} @media only screen and (max-width: 1320px){ .goods_wrapper .goods_aside_wrapper {width:100%} } /*폰트사이즈 조절*/ @media only screen and (max-width:960px) { #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {;font-size: 58px} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .info{font-size: 22px;} .goods_view_top .goods_info .name_txt{font-size: 46px} .goods_view_top .goods_info button{font-size:22px} .goods_view_top .goods_info button .arrow::after{top:-14px;width:10px;height:10px} } @media only screen and (max-width:860px) { #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {;font-size: 54px} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .info{font-size: 20px;} .goods_view_top .goods_info .name_txt{font-size: 44px} } @media only screen and (max-width:767px) { #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {;font-size: 50px} #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area .info{font-size: 18px;} .goods_view_top .goods_info .name_txt{font-size: 40px} .goods_wrapper .goods_aside_tab_wrap dd a{font-size:17px} .goods_view_top .goods_info .goods_check li{margin-bottom:18px} .goods_view_top .goods_info .summary_txt{margin-bottom:25px} .goods_view_top .goods_info .line{margin-bottom:25px} .goods_view_top .goods_info button{font-size:20px} .goods_view_top .goods_info button .arrow::after{top:-12px;width:9px;height:9px} } @media only screen and (max-width:640px) { #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {;font-size: 46px} .goods_view_top .goods_info .name_txt{font-size: 38px} .goods_view_top .goods_info .summary_txt{font-size: 18px} .goods_img .swiper-button-next {width:15px;height:27px;} .goods_img .swiper-button-prev {width:15px;height:27px;} } @media only screen and (max-width:510px) { #wrap #container .sub_bg_wrap.sub_goods2 .goods_slide .goods_slide_area h1 {;font-size: 44px} }