@charset "utf-8";
/**************************************************
	Font
**************************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/* noto-sans-kr-900 - Black */
@font-face {
    font-display: swap;
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url('../../font/NotoSansKR-Black.woff2') format('woff2');
}
/* noto-sans-kr-800 - ExtraBold */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 800;
	src: url('../../font/NotoSansKR-ExtraBold.woff2') format('woff2');
}
/* noto-sans-kr-700 - Bold */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url('../../font/NotoSansKR-Bold.woff2') format('woff2');
}
/* noto-sans-kr-600 - SemiBold */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 600;
	src: url('../../font/NotoSansKR-SemiBold.woff2') format('woff2');
}
/* noto-sans-kr-500 - Medium */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url('../../font/NotoSansKR-Medium.woff2') format('woff2');
}
/* noto-sans-kr-400 - Medium */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url('../../font/NotoSansKR-Regular.woff2') format('woff2');
}
/* noto-sans-kr-300 - Light */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url('../../font/NotoSansKR-Light.woff2') format('woff2');
}
/* noto-sans-kr-200 - ExtraLight */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 200;
	src: url('../../font/NotoSansKR-ExtraLight.woff2') format('woff2');
}
/* noto-sans-kr-100 - Thin */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url('../../font/NotoSansKR-Thin.woff2') format('woff2');
}


/**************************************************
	Reset
**************************************************/
html,body{width:100%;height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0;}
body,h1,h2,h3,h4,input,button{font-size:14px; line-height:auto; }
/* body{font-family: 'Nanum Gothic', '나눔고딕', 'Dotum', sans-serif;} */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}/* HTML5 display-role reset for older browsers */
table {border-collapse: collapse; border-spacing: 0;}
img,fieldset,iframe{border: 0 none;}
ol, ul{list-style:none;}
a{color: inherit; text-decoration: none; outline: none}
a:hover, a:active {text-decoration: none; color: inherit; background-color:none;}
.clearfix{*zoom:1}
.clearfix:after {content:'';display:block;clear:both}
.fl{float:left !important}
.fr{float:right !important}
.fn{float:none !important}
.cb{clear:both !important}
.ac{text-align:center !important}
.al{text-align:left !important}
.ar{text-align:right !important}
.vt{vertical-align:top !important}
.vm{vertical-align:middle !important}
.vb{vertical-align:bottom !important}
.oh{overflow:hidden !important}
.cp{cursor:pointer !important}
.di{display:inline !important}
.dib{display:inline-block;display:-moz-inline-box}
.dn{display:none !important}
.db{display:block !important}
.vv{visibility:visible !important}
.vh{visibility:hidden !important}
.bbn{border-bottom:none !important}
.brn{border-right:none !important}
.bln{border-left:none !important}
.btn{border-top:none !important}
.bn, .bn td, .bn th{border:none !important}
.bgn, .bgn td, .bgn th{background:none !important} 
.fb{font-weight:bold !important}
.fn{font-weight:normal !important}
.fixed{table-layout:fixed}
.pr{position:relative !important}
.tc{text-align: center !important;}
.move{-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;}
.ml0{margin-left: 0 !important;}



/**************************************************
	Basic
**************************************************/
#wrap{position: relative; width: 100%; max-width: 1500px; margin: 0 auto; }
#header{position: relative; width: 100%;  background-color: #ffffff;}
#section{width: 100%;}
#footer{width: 100%; position: relative; background-color: #68762f;}

body{font-family: 'Noto Sans KR', sans-serif;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{word-break: keep-all;}
.mb-only {display: none;}

/**************************************************
	Header
**************************************************/
#gnb{width: 100%; background-color: #719808; border-bottom: 4px solid #a8cb06;}
#gnb > ul{width: 1000px; margin: 0 auto; text-align: right;}
#gnb > ul > li{display: inline-block; zoom:1; *display:inline; color: #ffffff; font-size: 13px; margin: 0 2px;}
#gnb > ul > li > a{display: block; color: #ffffff; font-size: 13px; padding: 3px; }
#gnb > ul > li > a:hover{background-color: #ffffff; color: #719808; font-weight: 900;}

#headerWrap{display: flex; justify-content: space-between; max-width:1500px; margin: 0 auto;}
#logo{padding: 20px 0;}
#logo img{vertical-align: top; width: 100%;}
#header .logo {height: 64px;}

#nav{position: relative; font-size: 0; text-align: center; padding: 35px 0;}
#nav > li{display: inline-block; zoom:1; *display:inline; line-height: 40px; padding: 0 20px; box-sizing: border-box; position: relative;}
#nav > li:last-child{margin:0 0 0 10px;}
#nav > li > a{position: relative; color: #5a5a5a; font-size: 18px; font-weight: 600; height: 40px; display: block;}
#nav > li:hover > a{color: #ff671d;}
#nav > li:hover > ul.deps2{ display: block; opacity:1; background-color: #6b4634; text-align: left;}
ul.deps2{position:absolute; display: none; opacity:0; width: 140px; top:39px; left:0px; z-index: 6000; border-top: 2px solid #ff671d;  box-shadow: 0 1px 3px rgba(0,0,0,0.11); }
ul.deps2 > li{line-height: 19px; border-top: 0px; background: #ffffff; position: relative;}
ul.deps2 > li > a{display:block; font-size: 14px; padding: 7px 0px; line-height: 26px; color: #666666; font-weight: bold; text-align: center; }
ul.deps2 > li:hover > a{background-color: #f0f0f0; color: #ff671d;}
.deps2_1{left: -3px !important;}
.deps2_2{left: -25px !important;}
.deps2_3{left: -40px !important;}
.deps2_4{left: -36px !important;}
.deps2_6{left: -25px !important;}
.deps2_5{left: -36px !important;}

#nav img{vertical-align:middle;}
#nav .pagelinks{background-color: #ff671d; padding: 0 10px; border-radius:5px;}
#nav .pagelinks a{color:#fff !important;}

#header .customer-box {padding: 15px 0;}
#header .customer-box .sub-tit {font-size: 18px; font-weight: 700; color: #ff671d;}
#header .customer-box .sub-txt {display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 22px; font-weight: 700; margin: 0 auto; line-height: 28px;}

/* header-style */
#header {width: 100%; max-width: 1500px; height: 110px;z-index: 99;display: flex;justify-content: space-between;
	background-color: white;left: 50%;transform: translate(-50%, 0);align-items: center;
}
#header .nav {display: flex;align-items: center;width: 60%;justify-content: space-between;height: 100%;}
#header .nav .gnb {display: flex;align-items: center;font-size: 18px;line-height: 28px;height: 100%;width: 100%;justify-content: space-between;}


#header .nav .gnb li a {color: #707070;font-weight: bold;white-space: nowrap;}
.menu {display: none; position: fixed; top: 50px; right: 30px; z-index: 100;}
.menu a {display: flex;align-items: center;color: black;font-size: 18px;line-height: 28px;}
.menu a img {margin-right: 13px;}
#header .nav .gnb>li {position: relative;height: 100%;align-content: center;text-align: center;width: 20%;}
#header .nav .gnb>li:hover a{color: #ff671d;transition: 0.3s;}
#header .nav .gnb > li:hover .lnb,
#header .nav .gnb > li:focus-within .lnb {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;}
#header .lnb {position: absolute;display: flex;justify-content: space-between;background-color: white;width: 770px;border-top: 1px solid #ff671d;padding: 10px 25px;top: 110px;left: 50%;opacity: 0;visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;transform: translateX(-50%) !important;transform: translateY(-20px);z-index: 10;pointer-events: none;box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
#header .lnb.about {left: 90%;text-align: left;}
#header .lnb.about .left>a:hover h2 {color: #ff671d;transition: 0.3s;}
#header .lnb.products {width: 230px;flex-direction: column;}
#header .lnb.products a {margin: 10px 0;}
#header .lnb.contact {width: 150px;flex-direction: column;}
#header .lnb.contact a {margin: 10px 0;}
#header .lnb.news {width: 230px;flex-direction: column;}
#header .lnb.news a {margin: 10px 0;}
#header .lnb .bar {display: block;width: 1px;height: 409px;background-color: #c9c9c9;margin: 0 40px;}
#header .lnb .left {width: 50%;}
#header .lnb .right {width: 100%;}
#header .lnb h2 {font-size: 19px;line-height: 25px;color: #545454;margin-bottom: 17px;}
#header .lnb h3 {font-size: 18px;line-height: normal;color: #707070;}
#header .lnb h3:hover {color: #ff671d;transition: 0.3s;}
#header .lnb p {font-size: 13px;line-height: 19px;color: #707070;margin-bottom: 28px;}
.side-panel {display: none;}


/**************************************************
	Footer
**************************************************/

/* #boInfo [하단정보] */
#boInfoWrap{border-top: 3px solid #ff671d; background-color: #282828;}
#boInfo{max-width: 1500px; position: relative;  margin: 0 auto; padding: 40px 0;}
#boInfo > h4{display: table-cell; vertical-align: middle;}
#boInfo > p{display: table-cell; vertical-align: middle; padding-left: 50px; color: #d2d2d2; font-size: 12px; line-height: 20px;}
#boInfo > p > a{color: #d2d2d2;}
#boInfo > p > a:hover{text-decoration: underline;}
#boInfo > p > span{font-weight: 500; display: inline-block; }
#boInfo .copy {color: #ff671d; font-weight: 300;}

.boLink{}
.boLink > li{float: left; margin-left: 20px;}

.csCenter{float: left; color: #d2d2d2; font-size: 15px;}
.csCenter > span.boTitle{font-size: 17px; display: block; margin-bottom: 5px;}
.csCenter > span.boNum{font-size: 15px; font-weight: 400;line-height: 20px;}

/* 방문자 집계 */
#visit {border: 1px solid #d2d9e6; border-bottom: 1px solid #c1ccda;margin:40px 20px 20px;background:#fff;position:relative;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow:0 1px 2px rgba(0,0,0,0.1); position: fixed; z-index: 999; bottom: 0; right: 0;}
#visit .btn_admin{position:absolute;top:10px;right:10px;height:25px;line-height:25px;padding:0 5px;border-radius:3px}
#visit h2 {font-size:1.167em;text-align:center;padding-bottom:15px;padding-top:25px;color:#719808;position:relative}
#visit h2 i{position:absolute;top:-22px;left:50%;width:44px;line-height:44px;margin-left:-22px;border-radius:25px;background:#719808;color:#fff}
#visit dl {border-top:1px solid #e9e9e9;padding:10px 15px;border-radius:5px}
#visit dl:after {display:block;visibility:hidden;clear:both;content:""}
#visit dt {float:left;width:20%;padding:0 5px;line-height:23px;height:23px;color:#555; box-sizing: border-box;}
#visit dt span{display:inline-block;width:5px;height:5px;border-radius:50%;vertical-align: middle;}
#visit dd {float:left;;width:30%;padding:0 5px;;text-align:right;text-align:right;font-weight:bold;line-height:23px;height:23px;font-size:0.92em; box-sizing: border-box;}
#visit dd strong{display:inline-block;padding:0 5px;border-radius:20px;line-height:15px;color:#666; }


/**************************************************
	section common
**************************************************/
#section .section {width: 100%; height: auto; margin: 0 auto; padding: 100px 0; box-sizing: border-box;}
.section .title-box {text-align: center; padding-bottom: 10px;}
.section .title-box .title-symbol {display: inline-block; width: 36px; height: 10px; margin: 0 auto; padding-bottom: 10px; background: url(../../images/symbol.png) no-repeat center center/contain;}
.section .main-title {font-size: 45px; font-weight: 600; padding-bottom: 5px;}
.section .sub-title {font-size: 20px; font-weight: 300; padding-bottom: 30px;}
.section .contents-box {margin: 0 auto;}
.btn-basic {display: block; background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; margin: 0 auto; overflow:visible; cursor:pointer}
.btn-more {display: block; border: 1px solid #bdc0c0; border-radius: 30px; padding: 10px 30px; font-size: 16px;}
.btn-more:hover {color: #fff; background-color: #bdc0c0;}
.btn-black {display: block; border: 1px solid #ff671d; border-radius: 30px; padding: 10px 30px; color: #fff; font-size: 16px;}
.btn-black:hover {color: #fff; background-color: #ff671d;}

/**************************************************
	Drag Effect
**************************************************/
::selection {background:#ff671d; color:#ffffff; text-shadow:none;}
::-moz-selection {background:#ff671d; color:#ffffff; text-shadow:none;}
::-webkit-selection {background:#ff671d; color:#ffffff; text-shadow:none;} 
::-o-selection {background:#ff671d; color:#ffffff; text-shadow:none;}


/**************************************************
	popup
**************************************************/
#hd_pop {z-index:1000;position:relative;margin:0 auto;/*width:970px;*/ height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

/**************************************************
	반응형
**************************************************/
@media (max-width:1400px) {
    #header .nav .gnb li {margin-right: 40px;}
}
@media (max-width:1100px) {
    #header .customer-box {display: none;}
}
@media (max-width:1024px) {
	#section .section {padding: 100px 16px;}
	#section {margin-top: 110px;}


	#header {position: fixed; top: 0; border-bottom: 1px solid #5a5a5a;}
	#header .logo {padding-left: 20px;}
    #header .nav {justify-content: flex-end;}
    #header .nav .gnb {display: none;}

	#header .customer-box{display: none;}

	.menu {display: block;}
	.side-panel {
        display: block;
        z-index: 9991;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: -100%;
        background-color: white;
        color: #333;
        overflow-x: hidden;
        overflow-y: auto;
        transition: 0.5s;
        padding-top: 60px;
    }
    .side-panel h2 {padding-left: 20px;color: #333;font-size: 35px;}
    .side-panel p {padding: 20px;}
    .side-panel a {color: #333;}

    .side-panel>ul {padding: 30px;}
    .side-panel>ul>li {margin-bottom: 30px;}
    .side-panel>ul>li>a {display: block;font-size: 26px;display: flex;justify-content: space-between;}

    .side-panel>ul>li>ul>li {margin: 20px 0;}
    .side-panel>ul>li>ul>li>a>h3 {font-size: 20px;}
    .side-panel .logo {margin-left: 30px;}
    .side-panel .lang {margin-left: 30px;margin-top: 30px;}
    
    #side-panel .close-btn {position: absolute;top: 20px;right: 25px;font-size: 36px;cursor: pointer;}
    .side-panel > ul > li > ul {display: none;overflow: hidden;padding-left: 20px;}
    .side-panel > ul > li > a {background-color: transparent;color: #333;text-decoration: none;padding: 10px;border-radius: 5px;transition: background-color 0.3s ease;}
    .side-panel > ul > li > a.active {background-color: #ff671d; color: white;}
}
@media (max-width:768px) {
	#boInfo {padding: 50px 16px;}
	.csCenter {width: 100%; padding-top: 30px;}
    #header .logo {height: 50px;}
}
@media (max-width:711px) {
	#boInfo > p {padding-top: 20px; padding-left: 0; }
}
@media (max-width:426px) {
	.mb-only {display: block;}
	#section .section {padding: 100px 20px;}
    .menu {top: 32px;}
    #header {padding: 20px 0; height: auto; border-bottom: none;}
    #header .logo {height: 40px;}
    #section {margin-top: 75px;}
    .menu a img {margin-right: 0;}
    .side-panel .logo {height: 50px; margin-top: 20px; margin-left: 16px;}
    .side-panel>ul {padding: 30px 16px;}
    .side-panel>ul>li {margin-bottom: 18px;}
    .side-panel>ul>li>a {font-size: 20px;}
    .side-panel>ul>li>ul>li>a>h3 {font-size: 16px;}
    #boInfo {padding: 50px 16px 30px;}
}