@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
/* CSS Document */
html {font-size: 62.5%;}
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, select, textarea{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 1.4rem;
    font-family: 'Open Sans', sans-serif;
    vertical-align: baseline;
    box-sizing: border-box;
    text-decoration: none;
    color: #666;
    list-style: none;
    background: none;
    line-height: 1;
    outline: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
:root {
    --brand-color-1: #13A633;
    --brand-color-2: #d3414f;
    --brand-color-3: #a61723;
    --brand-color-4: #f06a77;
    --brand-color-5: #7a101a;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, span {display: inline-block;}
p, span {line-height: 1.4;}
button {cursor: pointer;}
button:focus, button:active, input:focus {outline: none;}
label {cursor: pointer;}
legend {display: none;}
/*main*/
.wrap { overflow: hidden; position: relative; }
.header_wrap {width: 100%; z-index: 999; border-bottom: 1px solid rgba(255, 255, 255, .2); position: relative;}
.header_wrap .header { position:relative; max-width: 1200px; margin:0 auto; overflow: hidden; height: 90px;}
.header_wrap .header h1 {position:absolute; top:0; left: 0; z-index: 9;}
.header_wrap .header h1 img {height: 90px; width: auto;}
.header_wrap .header .nav_box {position: absolute; top:0px; left: 0; padding-left: 220px; width: 100%; }
.header_wrap .header .nav_box li {float: left; width: 12%; }
.header_wrap .header .nav_box li a {font-size: 1.8rem; color: #333; letter-spacing: -0.5px; font-weight: bold; height: 90px; line-height: 90px; display: block; text-align: center; }
.header_wrap .header .nav_box li a:hover {color:#13A633;}
.header_wrap .header .nav_box li a.on {color:#13A633;}
.header_wrap .nav_drop_wrap { background:#13A633; display: none; width: 100%; position: absolute; top:90px; z-index: 99; }
.header_wrap .nav_drop_wrap .nav_drop {max-width: 1200px; margin:0 auto; overflow: hidden; padding:20px 0 20px 220px;} 
.header_wrap .nav_drop_wrap .nav_drop ul {float: left; width: 12%;}
.header_wrap .nav_drop_wrap .nav_drop ul li a {padding:15px 0; color: #fff; display: block; text-align: center; font-size: 1.5rem;}
.header_wrap .nav_drop_wrap .nav_drop ul li a:hover {color: #fff; font-weight: bold;}
.header_wrap .header_link {position:absolute; top:30px; right: 0; height: 35px; margin:0 auto; text-align: right; overflow: hidden; z-index: 1}
.header_wrap .header_link > a { color: #999; height: 35px; line-height: 33px; padding:0 1.5rem; border:1px solid #ddd; float: left;}
.header_wrap .header_link > a:last-child { vertical-align: middle; border-left: 0;}

.mobile_gnb {display: none;}
.mobile_gnb_open_btn {position: absolute; top:40px; right: 20px; width: 32px; height: 32px; border: 0; background: transparent; padding: 0; display: block;}
.mobile_gnb_open_btn::before,
.mobile_gnb_open_btn::after {content: ''; position: absolute; left: 4px; right: 4px; height: 2px; background: #333; transition: transform 0.2s ease, top 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;}
.mobile_gnb_open_btn::before {top: 9px; box-shadow: 0 6px 0 #333;}
.mobile_gnb_open_btn::after {top: 21px;}
.header_wrap.is-mobile-menu-open .mobile_gnb_open_btn::before {top: 15px; transform: rotate(45deg); box-shadow: none; background: #333;}
.header_wrap.is-mobile-menu-open .mobile_gnb_open_btn::after {top: 15px; transform: rotate(-45deg); background: #333;}
.mobile_gnb {position: relative; z-index: 100000;}
.mobile_gnb_list {position: fixed; top:0px; left: 100%; width: 100vw; background: #13A633; z-index: 99999; 
-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    overflow-y: auto;
}
.mobile_gnb_list .gnb_area {margin:30px; margin-top: 50px;}
.mobile_gnb_list .gnb_area a {display: block; padding:20px 0; color: #fff; }
.mobile_gnb_close_btn { position: absolute; top:20px; right: 20px; }
.mobile_gnb_list .gnb_area .oneD {border-bottom: 1px solid #572c00; font-size: 15px;}
.mobile_gnb_list .gnb_area .oneD.on {font-weight: bold;}
.mobile_gnb_list .gnb_area .nodep {border-bottom: 1px solid #572c00; font-size: 15px;}
.mobile_gnb_list .gnb_area .twoD {display: none; border-bottom: 1px solid #572c00; padding: 15px 0;}
.mobile_gnb_list .gnb_area .twoD a {padding:7px 0; font-size: 13px; padding-left: 10px;}

/* 탭설정 */
.tabsContainer{overflow:hidden;}
.tabs-nav{overflow:hidden;}
.tabs-nav li {display: inline-block;}
.tabs-nav li a {display: block;}
.tabs-content {overflow:hidden;}
.tabs-content .tabs{overflow:hidden; display:none; }
.tabs-content .tabs.active{display:block;}

.main_content .best_products {margin-bottom: 3rem;}
.main_content .best_products .best_group {width: 100%; margin-bottom: 2rem;}
.main_content .best_products .best_group h3 {font-size: 20px; color: #333; margin-bottom: 1.2rem; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 1.2rem;}
.main_content .best_products .best_group .best_box {border: 1px solid #eee; padding: 2rem;}
.main_content .best_products .best_group ul {overflow: hidden;}
.main_content .best_products .best_group ul li {float: left; width: 23.5%; margin-right: 2%; margin-bottom: 2%; border: 1px solid #eee;}
.main_content .best_products .best_group ul li:nth-child(4n) {margin-right: 0;}
.main_content .best_products .best_group ul li a {display: block;}
.main_content .best_products .best_group ul li .name {display: block; padding: 0.8rem; font-size: 1.4rem; color: #333; text-align: center;}
.main_content .best_products .best_group ul li.empty {width: 100%; margin-right: 0; border: 0; text-align: center; color: #999;}

.main_content .product {margin-bottom: 3rem;}
.main_content .product h3 {font-size: 20px; color: #333; margin-bottom: 2rem; font-weight: bold;}
.main_content .product .tabs-nav {border-bottom: 1px solid #ddd; margin-bottom: 20px;}
.main_content .product .tabs-nav li {display:table; float: left; width: 100px; border:1px solid #ddd; border-bottom: 0; border-collapse: collapse; margin-right:-1px; position: relative; }
.main_content .product .tabs-nav li a {display:table-cell; text-align: center; vertical-align: middle; padding:1.8rem 0; }
.main_content .product .tabs-nav li.active {border-color:#13A633; background: #13A633; z-index: 2;}
.main_content .product .tabs-nav li.active a {color: #fff;}
.main_content .product .tabs-content ul {overflow: hidden;}
.main_content .product .tabs-content ul li {float: left; width: 23%; margin-right: 2%; margin-bottom: 2%; border:1px solid #eee;}
.main_content .product .tabs-content ul li:last-child {margin-right: 0;}
.main_content .product .tabs-content ul li a {display: block;}
.main_content .product .tabs-content ul li .thumbnail {padding-top: 100%;}

/*메인비주얼*/
.main_visual_wrap {width: 100%;}
.main_visual_wrap .inner { max-width: 1200px; margin:0 auto; padding:8%; text-align: center;}
.main_visual_wrap .owl-stage .owl-item:nth-child(1) .item { background:url('../images/main_visual1.jpg') no-repeat center center; background-size: cover; }
.main_visual_wrap .owl-stage .owl-item:nth-child(2) .item{ background:url('../images/main_visual2.jpg') no-repeat center center; background-size: cover;}
.main_visual_wrap .owl-stage .owl-item:nth-child(2) .item strong {color: #333;}
.main_visual_wrap .owl-stage .owl-item:nth-child(2) .item strong:after {border-color: #555;}
.main_visual_wrap .owl-stage .owl-item:nth-child(2) .item p {color: #555;}
.main_visual_wrap .item {height: 65rem; position: relative; }
.main_visual_wrap .inner {position: relative; z-index: 1;}
.main_visual_wrap .inner strong {font-size:7rem; line-height: 1.2; font-weight: bold; color: #000; font-family: 'Roboto', sans-serif; }
.main_visual_wrap .inner strong:after {content: ''; display: block; width: 70px; border-bottom: 1px solid #000; margin-top: 2rem; position: absolute; left: 50%; transform: translateX(-50%);)}
.main_visual_wrap .inner p {font-size:3.5rem; color: #000; margin:30px 0 5%; font-weight: lighter; letter-spacing: -2px;}
.main_visual_wrap .inner span {font-size: 6rem; color: #31475b; font-family: 'Roboto', sans-serif; font-weight: 100; text-transform: uppercase;}

/*메인컨텐츠*/
.main_content  {max-width: 1200px; margin:5rem auto; overflow: hidden;}
.main_content .model { overflow: hidden; background: #f6f6f6; border:1px solid #ddd; margin-bottom: 5rem; }
.main_content .model .tit_box {float: left; width: 15%; background: #13A633; padding:4% 0; text-align: center; }
.main_content .model .tit_box span { color: #fff; font-size: 2.2rem; font-weight: bold; }
.main_content .model .list_box {float: left; width: 85%; padding:1.5% 3%; }
.main_content .model .list_box .item img { width: 70px; margin:0 auto;}
.main_content .model .list_box .item {text-align: center;}
.main_content .model .list_box .item span {margin-top:2rem; color: #000;}

.main_content .section {overflow: hidden; }
.main_content .section > div { float: left; width: 31.3%; margin-right: 3%; margin-bottom: 2rem; min-height: 250px; position: relative; padding:2.5rem;}
.main_content .section .more_btn {position: absolute; top:3px; right:0px; font-size: 1.4rem; color: #999; }
.main_content .section h3 {font-size:2rem; font-weight: bold; color:#333; margin-bottom: 3rem; }
.main_content .section .txt_box > a {display: block;}
.main_content .section .txt_box strong {font-size: 1.6rem; color: #000; letter-spacing: -1px; line-height: 1.4; display: block; margin-bottom: 2rem;}
.main_content .section .txt_box .date {color: #666; font-size: 1.3rem; padding:2rem 0 0rem;}
.main_content .section .inquiry .thumbnail {padding-top: 45%; margin-top:2rem;}
.main_content .section .inquiry {background: #444 url('../images/inquiry_bg.png') no-repeat 90% center; }
.main_content .section .inquiry strong {color: #eaebe6; font-size: 1.4rem;}
.main_content .section .inquiry h3 {color: #fff;}
.main_content .section .inquiry span {border:1px solid #fff; color: #fff; display: inline-block; padding: 3px 10px; font-size: 1.3rem; margin-top: 10px;}

.main_content .section .cs {margin-right: 0; padding:0; border:0;}
.main_content .section .cs h3 {color: #fff; margin-bottom: 1rem;}
.main_content .section .cs p {color: #fff;}
.main_content .section .cs .inquiry {background: url('../images/inquiry_bg.jpg') no-repeat 0 0; margin-bottom: 2rem; background-size: cover;}
.main_content .section .cs .inquiry a {display: block; padding:3rem; padding-bottom: 4rem;  }
.main_content .section .cs .tel {background:#13A633; padding:2rem 2.5rem;}
.main_content .section .cs .tel a {font-size:3rem; font-weight: bold; color:#fff; font-family: 'Roboto', sans-serif; font-weight: 500; }
.main_content .section .cs .tel p {margin-top: 5px; color: #fff;}
.main_content .section .cs .location { padding:3rem 2.5rem; margin-top: 17px; background: #eaebe6 url('../images/location_bg.png') no-repeat 60% center; cursor: pointer;}
.main_content .section .cs .location h3 {color: #333;}

/*섬네일설정*/
.thumbnail {position: relative; padding-top: 87%; overflow: hidden;}
.thumbnail img {position: absolute; top:0; left:0; height: auto; width: 100%;}
.thumbnail .centered {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);}
.thumbnail .centered img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.thumbnail .landscape {width: auto !important; max-width:none !important; height: 100% !important;}
.thumbnail .portrait  {width: 100% !important; height: auto !important;}

.footer_wrap {width: 100%; border-top:1px solid #ccc; background: #fff; }
.footer_wrap .footer .footer_inner {max-width: 1200px; margin:0 auto; position: relative; padding: 4rem 0;}
.footer_wrap .footer .footer_inner h2 {display: inline-block; margin-right: 2rem;}
.footer_wrap .footer .footer_inner .add_info {display: inline-block; vertical-align: top; padding-left: 2rem; }
.footer_wrap .footer .footer_inner .add_info span {display: block; line-height: 1.5; color: #888;}
.footer_wrap .footer .footer_inner .social_link {position: absolute; top:3rem; right: 0;}



@media all and (max-width: 1200px) {
    html {font-size: 59%;}
    .header_wrap .header, .main_content, .footer_wrap .footer .footer_inner {margin-right: 20px; margin-left: 20px;}
    .header_wrap .header .nav_box {padding-left: 220px;}
    .header_wrap .nav_drop_wrap .nav_drop {padding-left: 220px;}

    .main_visual_wrap .inner {padding:8% 13%;}
}

@media all and (max-width: 1100px) {
    .header_wrap .header .nav_box {padding-left: 200px;}
    .header_wrap .nav_drop_wrap .nav_drop {padding-left: 200px;}
}

@media all and (max-width: 980px) {
    .header_wrap .header_link {display: none;}
    .header_wrap .header .search_box {right: 30px;}
    .header_wrap .header .nav_box {display: none;}
    .header_wrap .header {display: flex; align-items: center; justify-content: space-between;}
    .header_wrap .header h1 {position: static; flex: 0 0 auto;}
    .mobile_gnb {display: flex; align-items: center; justify-content: flex-end;}
    .mobile_gnb_open_btn {position: relative; top: auto; right: auto; margin-right: 0; align-self: center;}
    .main_content .model .tit_box {padding:5% 0;}
    .main_content .section > div {width: 48.5%;}
    .main_content .section .event {margin-right: 0;}
    .main_content .best_products .best_group {width: 100%; margin-bottom: 2rem;}
}

@media all and (max-width: 768px) {
    html {font-size: 50%;}
    .header_wrap .header h1 img {width: auto; height: 52px;}
    .main_visual_wrap .item {height: 40rem; }
    .main_visual_wrap .inner {text-align: center; padding:15% 13%;}
    .main_visual_wrap .owl-stage .owl-item:nth-child(1) .item {background-position: 80% center;}
    .main_visual_wrap .inner strong:after {margin:20px auto;}
    .main_visual_wrap .owl-carousel .owl-nav .owl-next, .main_visual_wrap .owl-carousel .owl-nav .owl-prev {width: 40px; height: 40px; background-size: 12px;}
    .main_content {margin:2rem 1.5rem;}      
    .main_content .model {margin-bottom: 2rem;}
    .main_content .model .tit_box {float: none; width: 100%; padding:3% 0;}
    .main_content .model .list_box {float: none; width: 100%; padding:5% 3%;}
    .main_content .section > div {min-height: unset; padding:2rem;}
    .main_content .section .more_btn {top:15px;}

    .footer_wrap .footer .footer_inner h2 img {width: 110px;}
    .footer_wrap .footer .footer_inner .add_info {display: block; border:0; padding-left: 0; padding-top: 2rem;}
    .footer_wrap .footer .footer_inner .social_link img {width: 35px;}

    .main_content .product .tabs-nav {border-bottom: 0;}
    .main_content .product .tabs-nav li {width: 33.5%; border-bottom: 1px solid #ddd;}
    .main_content .product .tabs-nav li a {padding:1.2rem 0;}
    .main_content .product .tabs-content ul li {width: 48%;}
    .main_content .product {margin-bottom: 1rem;}
    .main_content .best_products {margin-bottom: 2rem;}
    .main_content .best_products .best_group {width: 100%;}

    .main_visual_wrap .inner strong { font-size: 5rem;}
    .main_visual_wrap .inner p { font-size: 2.5rem; }
    .footer_wrap { background: #fff; }

}
@media all and (max-width: 640px) {
    .footer_wrap .footer .footer_inner p {position: relative; top:0; left: 0; text-align: left; margin-top:10px;}
    .main_content .section > div {width: 100%; float: none; margin-right: 0;}
    .main_content .section .cs {width: 100%;}
}

@media all and (max-width: 480px) {
    .main_visual_wrap .inner {text-align: center; padding:22% 13%;}
    .main_visual_wrap .item {height: 45rem;}

}
@media all and (max-width: 380px) {
}