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


/**************************************************
	CSS
**************************************************/
#wrap{position: relative; width: 100%; margin: 0 auto; }
.layFull{width: 100%; margin: 0 auto; position: relative; box-sizing: border-box;} 
.layGrid{max-width: 1240px; width: 100%; margin: 0 auto; position: relative; box-sizing: border-box;}
.flexBox{display: flex; flex-wrap: wrap; }
.flexSpbet{justify-content: space-between;}
.flexRowre{flex-direction: row-reverse;}
.flexBox .flexItem{padding: 0 10px; box-sizing: border-box; position: relative; }
.flexItem12 {width: 100%;}
.flexItem10 {width: 83.33333333%;}
.flexItem9 {width: 75%;}
.flexItem8 {width: 66.66666667%;}
.flexItem7 {width: 58.33333333%;}
.flexItem6 {width: 50%;}
.flexItem5 {width: 41.66666667%;}
.flexItem4 {width: 33.33333333%;}
.flexItem3 {width: 25%;}
.flexItem2 {width: 16.66666667%;}
.flexItem img{max-width: 100%;}
.imgFull img{width: 100%;}
.basicPd{padding-left: 10px; padding-right: 10px;}
.black-bg{background: rgba(0, 0, 0, .7); position: fixed; top: 0; left:0; z-index: 90; width: 100%; height: 100%;} 

/* #header */
#header{position: fixed; top: 0; left: 0; z-index: 99; background-color: #fff; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.logo{float: left; padding: 18px 0px;}
.logo > a{display: block;}
.logo > a > img{height: 44px;}
#nav{margin-left: auto;}
#lnb{display: flex; align-items: center; column-gap: 70px;}
#lnb > li{padding: 0 0px; position: relative;}
#lnb > li > a{display: block; font-size: 19px; color: #222; font-weight: bold; line-height: 80px;}
#lnb > li > ul{display: none; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 100%; background-color: #fff; width: 170px; border: 1px solid #ccc;}
#lnb > li > ul > li{padding: 0 0px; position: relative;}
#lnb > li > ul > li > a{display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; text-align: center; padding: 5px 0; column-gap: 5px;}
#lnb > li > ul > li:hover > a{color: #6cbb5a;}
#lnb > li:hover > ul{display: block; }
#lnb > li:hover > a{color: #6cbb5a;}
#lnb > li > ul.deps2_1{width: 210px;}
#lnb > li > ul.deps2_2{width: 260px;}
#lnb > li > ul ul.deps3{background: #f6f6f6; position: absolute; top: 0; left: 100%; display: none; padding: 8px 0; }
#lnb > li > ul ul.deps3 a{font-size: 14px; text-align: center; display: block; width: 120px; font-size: 14px; padding: 2px 0;}
#lnb > li > ul > li:hover ul.deps3{display: block;}
#lnb > li > ul ul.deps3 a:hover{color: #6cbb5a;}
.bt_link{padding: 4px 10px; color: #6cbb5a; margin-top: 22px; display: inline-block; font-size: 15px; border-bottom: 3px solid #6cbb5a; font-weight: bold;}
.bt_link i{font-weight: bold;}
.bt_link:hover{background-color: #333; color: #fff; border-bottom: 2px solid #333;} 
.btn_nav{display: none;}

.andIf {display: flex; align-items: center; justify-content: space-between;}
.langBtn {font-size: 19px; color: #000; display: flex; align-items: center; column-gap: 2px;}
.langBtn img {min-width: 30px;}

/* #footer */
#footer{position: relative; background-color: #2a2a2a;}
#footer .layGrid{padding-top: 40px; padding-bottom: 40px;}
.ft_logo{margin-bottom: 20px;}
.ft_logo > img{height: 40px;}
.ft_info{position: relative;}
.ft_info > p{color: #999; font-size: 15px;}
.ft_info > p > span{color: inherit; font-size: inherit; margin-right: 20px;}
.ft_link{position: absolute; top: 40px; right: 10px; z-index: 30}
.ft_link li{margin-bottom: 10px;}
.ft_link li a{display: block; background-color: #999; color: #2a2a2a;  border-radius: 5px; padding: 10px 20px; font-size: 14px; font-weight: 500; text-align: center; line-height: 20px; height: auto; line-height: 16px; }
/* .ft_link li:first-child a{line-height: 16px; padding: 3px 15px; font-size: 12px;} */
.ft_link li a:hover{background-color: #fff;}
.ft_bot{background-color: #111; padding: 9px 0 ;}
.ft_bot > p{color: #fff;font-size: 14px; line-height: 22px; text-transform: uppercase; max-width: 1240px; width: 100%; padding: 0 10px; margin: 0 auto; box-sizing: border-box;}
.ft_right_logo{position: absolute; bottom: 40px; right: 20px;}
.ft_right_logo img{height: 46px;}


/* Main */
#mainSlide{overflow: hidden; width: 100%; height:100vh}
#mainSlide .swiper-pagination-bullet{ background-color: #fff; width: 24px; height: 4px; opacity: .5; border-radius: 0; } 
#mainSlide .swiper-pagination-bullet-active{background-color: #fff; opacity: 1;}
#mainSlide .swiper-button{color: #fff; font-size: 18px; width: 40px; height: 40px; box-sizing: border-box; background-color: rgba(0,0,0,.6);}
#mainSlide .swiper-button:hover{background-color: rgba(0,0,0,1); color: #fff;}
#mainSlide .swiper-button:after{display: none;}
#mainSlide .swiper-button-prev{left: 0;}
#mainSlide .swiper-button-next{right: 0;}
#mainVisual01{background: url(../images/main_visual01.jpg) no-repeat center center; background-size: cover;}
#mainVisual02{background: url(../images/main_visual02.jpg) no-repeat center center; background-size: cover;}
#mainVisual03{background: url(../images/main_visual03.jpg) no-repeat center center; background-size: cover;}
#mainVisual04{background: url(../images/main_visual04.jpg) no-repeat center center; background-size: cover;}
#mainVisual05{background: url(../images/main_visual05.jpg) no-repeat center center; background-size: cover;}
.main_visual_txt{width: 100%; max-width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px; box-sizing: border-box; /*background-color: rgba(0,28,2,0.8);*/}


/* Sub 공통사항 */
#sub_top{text-align: center; height: 300px; position: relative; background-color: #999; position: relative; background-size: cover; margin-top: 80px;}
#sub_top h2{font-size: 30px; font-weight: 700; letter-spacing: -0.5px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); letter-spacing: 10px; z-index: 50;}
.s_visual01{background: url(../images/s_visual01.jpg) no-repeat center center; }
.s_visual02{background: url(../images/s_visual01.jpg) no-repeat center center; }
.s_visual03{background: url(../images/s_visual01.jpg) no-repeat center center; }
#topSlide{overflow: hidden; width: 100%; height:300px}
#topSlide .swiper-button{color: #fff; font-size: 18px; width: 40px; height: 40px; box-sizing: border-box; }
#topSlide .swiper-button:hover{ color: #fff;}
#topSlide .swiper-button:after{display: none;}
#topSlide .swiper-button-prev{left: 0;}
#topSlide .swiper-button-next{right: 0;}

#contents{padding: 120px 0;}
.article{margin-top: 60px;}
#contents .article:first-child{margin-top: 0px;}
.article p{margin-bottom: 15px;}
.sub_tit{color: #333; font-size: 46px; line-height: 44px; text-align: center;  position: relative; padding: 25px 0; margin-bottom: 60px; text-transform: uppercase;}
.sub_tit::before{content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 38px; height: 12px; background: url('../images/title_icon.png') no-repeat;}
.con_tit{color: #6cbb5a; font-size: 30px; letter-spacing: -0.5px; line-height: 40px; margin-bottom: 20px; padding-top: 8px;  position: relative;}
.con_tit::before{content: ''; display: block; position: absolute; top: 0; left: -10px; width: 38px; height: 30px; background-color: #ddeed9; z-index: -10; border-radius: 50%;}
.par_tit{color: #6cbb5a; font-size: 30px; letter-spacing: -0.5px; line-height: 40px; margin-bottom: 20px; padding-top: 8px; position: relative; padding-bottom: 8px;}
.par_tit::before{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 20px; height: 3px; background-color: #6cbb5a; z-index:0; }

/* greetings */
.gre_box h3.gre_txt{font-size: 24px; font-weight: bold; letter-spacing: -0.5px; line-height: 38px; margin-bottom: 30px; font-weight: 600;}
.gre_box h3.gre_txt > b{color: #6cbb5a; font-weight: 800; font-size: 30px;}

/* environment_certification */
.enbi_box img{margin-bottom: 20px;}
.cert_box img{border: 1px solid #ddd;}
.cert_box p{text-align: center; margin-top: 10px; color: #23ac39;}

/* location */
.loca_box{width: 100%; max-width: 1100px; margin: -100px auto 0; background-color: #3a983a; box-sizing: border-box; padding: 40px 20px;text-align: center; position: relative; z-index: 99; }
.loca_box > dl{padding: 0 20px; display: inline-block; }
.loca_box > dl > dt{ color: #fff; font-size: 16px; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; line-height: 24px; text-align: left;}
.loca_box > dl > dd > p{ color: #fff; font-size: 18px; font-weight: 300; margin-bottom: 0;}
.loca_box > dl.loca_add{display: block !important; text-align: center; margin-bottom: 30px;}
.loca_box > dl.loca_add > dt{font-size: 20px; text-align: center;}
.loca_box > dl.loca_add > dd > p{font-size: 24px; line-height: 34px}


.snb{display: flex; flex-wrap: wrap; justify-content: center; padding: 0 10px;}
.snb > li{}
.snb > li > a{border: 1px solid #ddd; background: #fff; padding: 8px 36px; display: block; color: #333; font-weight: 500; font-size: 17px; margin-left: -1px;}
.snb > li.on a{border-color: #6cbb5a; background-color: #6cbb5a; color: #fff; position: relative; z-index: 1;}

.pro_top{padding: 0 10px;  margin-bottom: 40px;}
.pro_top .flexBox{background-color: #eff1ef; padding: 40px;}
.pro_top .flexBox h3{color: #6cbb5a; font-size: 26px; font-weight: 600; }
.line_list li{ padding-left: 10px; position: relative;}
.line_list li::before{content: '-'; display: block; position: absolute; top: 0; left: 0; }

/* product_overview */
.cata_box{margin-bottom: 40px;}
.cata_box a{color: #6cbb5a; border: 1px solid #6cbb5a; display: inline-block; padding: 8px 18px; font-weight: 600; text-transform: uppercase; margin-top: 40px;}
.cata_box a:hover{background-color: #6cbb5a; color: #fff;  border: 1px solid #6cbb5a;}
.cata_box .cata_img{margin-top: 20px;}
.pro_detail h3{font-size: 36px; color: #6cbb5a;}
.pro_detail h3 span{display: inline-block; font-size: 20px; margin-bottom: 20px; margin-top: 10px; font-weight: 500; color: #fff; background-color: #6cbb5a; padding: 5px 10px;}
.pro_detail p{margin-top: 20px;}
.pro_detail li{color: #666; line-height: 24px; margin-bottom: 3px;}
.pro_detail img{width: 100%;}
.bar_list li{ padding-left: 10px; position: relative; color: #6cbb5a;}
.bar_list li::before{content: '-'; display: block; position: absolute; top: 0; left: 0; }
.type_box {text-align: center;}
.type_box span{width: 80px; height: 80px; display: block; background: #6cbb5a; text-align: center; margin: 0 auto;
border-radius: 50%; font-size: 20px; font-weight: bold; line-height: 80px; color: #fff;}
.type_box p{padding: 10px 25px; line-height: 24px; }
.pallette_box h3{font-size: 20px; background-color: #6cbb5a; color: #fff; padding: 5px 10px;}
.class_palette{position: relative; display: flex; flex-wrap: wrap;}
.class_palette li{width:  10%; }
.class_palette li p{text-align:center; color: #666;}

.btn_move{display: block; margin: 60px auto 0; text-align: center; width: 180px; border: 1px solid #6cbb5a; height: 50px; line-height: 50px; border-radius: 25px; color: #6cbb5a; font-weight: 600;}
.btn_move:hover{background-color: #6cbb5a; color: #fff;}
/* color_design */
.pd_list { margin-bottom:20px;}
.pd_list li{box-sizing:border-box; border:1px solid #cfcfcf; float:left; width: 12.5%; text-align:center; font-size:20px; font-weight:bold; padding:10px; margin-top: -1px; margin-left: -1px;}
.pd_list li img{display:block; margin:0px auto 0px; /* border:1px solid #ccc; */ width: 100%; box-sizing: border-box; }
.pd_list li div{margin-top: 5px;}
.color_info{font-size:17px;}
.pd_list li.black{background-color: #162859;}
.pd_list li.black div{color: #fff;}
.tbl01{width: 100%; margin-bottom: 30px;}
.tbl01 th{background-color: #6cbb5a; text-align: center; padding: 10px 20px; border-top: 1px solid #c4debf; border-bottom: 1px solid #c4debf; border-left: 1px solid #c4debf; color: #fff; box-sizing: border-box;}
.tbl01 th:first-child{ border-left: 0; }
.tbl01 td{border-bottom: 1px solid #6cbb5a; padding: 10px 20px; text-align: center; border-left: 1px solid #6cbb5a; box-sizing: border-box;}
.tbl01.tbl_class td, .tbl01.tbl_class th{padding-left: 10px; padding-right: 10px;}
.tbl01 .tbl01_cls{width: 100px; }
.tbl01 .tbl01_rmk{width: 240px; }
.tbl01 .tbl01_ccn{width: 280px; }
.tbl01 td span.color_red{color: #6cbb5a;}
.tbl01 .bdl0{border-left: 0 !important; }
/* .tbl01 .tbl01_cls{width: 40px }
.tbl01 .tbl01_rmk{width: 180px; }
 */

/* .tbl01 .tbl01_app{width: 100px; } */



#proSlide{overflow: hidden;}
#proSlide .swiper-button{color: #fff; font-size: 18px; width: 40px; height: 40px; box-sizing: border-box; background-color: rgba(0,0,0,.6);}
#proSlide .swiper-button:hover{background-color: rgba(0,0,0,1); color: #fff;}
#proSlide .swiper-button:after{display: none;}
#proSlide .swiper-button-prev{left: 0;}
#proSlide .swiper-button-next{right: 0;}



#tooltip {position: absolute; z-index: 999; color: white; font-size: 15px;}
#tooltip .tipBody { background-color: #23ac39; padding: 8px;}


/* ##Device = Desktops */
@media (max-width: 1281px)
{
    
}
/* ##Device = Laptops, Desktops */
@media (max-width: 1025px)
{
.layGrid, .basicPd{padding-left: 16px; padding-right: 16px;}
.layGrid {display: block;}
/* #header */
.logo{padding-left: 10px; padding-right: 10px;}
#open_nav{display: block; }
#nav{width: 280px; position: fixed; top: 81px; right: -280px; background: #fff; height: 100vh; padding: 0px 0;}
#lnb{flex-direction: column;}
#lnb > li{margin-left: 0; width: 100%;  padding: 5px 16px; box-sizing: border-box;}
#lnb > li > a{line-height: 36px; padding: 5px 0;border-bottom: 1px solid #ddd; }
#lnb > li > ul{display: none; position: relative; top: auto; left: auto; margin-right:0; transform: none; border: 0; padding: 5px 0;}
#lnb > li > ul > li{width: 100%;}
#lnb > li > ul > li > a{padding: 0px 0px; justify-content: space-between; text-align: left; align-items: flex-start;}
#lnb > li > ul > li > a i {margin-top: 4px;}
#lnb > li > ul.deps2_2, #lnb > li > ul.deps2_2{width: 100%}
#lnb > li:hover > ul{display: none; }
#lnb > li > ul > li:hover ul.deps3{display: none;}
#lnb > li > ul > li{padding: 0 10px;  box-sizing: border-box;}
#lnb > li > ul ul.deps3{position: relative; top: auto; left: auto;  box-sizing: border-box; margin-bottom: 5px;}
#lnb > li > ul ul.deps3 a{width: 100%; text-align: left; padding: 0px 10px; box-sizing: border-box;}
.btn_nav{position: absolute; top: 50%; right: 26px; transform: translateY(-50%); font-size: 36px; color: #222}
.langBtn {position: absolute; right: 62px; top: 50%; transform: translateY(-50%); font-size: 16px;}
.langBtn img {min-width: 24px;}
/* #footer */
#footer .layGrid{padding-top: 40px; padding-bottom: 40px;}
#footer .ft_logo{padding: 0 10px;text-align: left;}
#footer .ft_info{padding: 0 10px;}
#footer .ft_link{right: 26px}
#footer .ft_bot{padding-left: 16px; padding-right: 16px;}

.gre_top .flexItem7{width: 50%}
.gre_top .flexItem5{width: 50%}


.cata_box .flexItem7{width: 55%;}
.cata_box .flexItem5{width: 45%;}
.cata_box a{margin-top: 0px; font-size: 15px} 
.par_tit{padding-top: 0;}

.pd_list li{padding: 0;}
.pd_list li div{margin-bottom: 5px; font-size: 16px}


}
/* ##Device = Tablets, Ipads(portrait) */
@media (max-width: 769px)
{

/* #header */
.logo{padding: 14px 0 10px;}
.logo > a > img{height: 36px;}
.btn_nav{right: 16px; font-size: 30px; }
#nav{top: 61px;}

/* #footer */
#footer .ft_logo{ margin-bottom: 10px; }
#footer .ft_logo img{height: 40px}
#footer .ft_info > p{font-size: 14px; line-height: 18px; display: block;}
#footer .ft_info > p > span{display: block;}
#footer .ft_link{position: relative; top: auto; right: auto; width: 100%; box-sizing: border-box; padding: 0 10px; display: flex; justify-content: space-between; margin-bottom: 20px; }
#footer .ft_link li{width: 48%;}
#footer .ft_link li a{height: 38px; box-sizing: border-box; font-size: 12px; line-height: 14px; padding: 6px 10px;}
#footer .ft_link li:last-child a{line-height: 26px;}
#footer .ft_bot > p{font-size: 12px; letter-spacing: -0.8px;}

#mainSlide .main_visual_txt{max-width: auto; width: 90%}

/* Sub 공통사항 */
#sub_top{ margin-top: 60px; height: 220px}
#sub_top h2{font-size: 24px;}

#contents{padding: 100px 0;}
.article{margin-top: 50px;}
.article p{margin-bottom: 10px;}
.sub_tit{font-size: 36px; line-height: 46px; padding: 20px 0; margin-bottom: 50px;}
.con_tit{font-size: 26px; line-height: 36px; margin-bottom: 10px; padding-top: 0px;  position: relative;}
.con_tit::before{content: ''; display: block; position: absolute; top: 0; left: -10px; width: 30px; height: 24px;}

/* greetings.html */
.gre_top .flexItem7{width: 100%}
.gre_top .flexItem5{width: 100%; text-align: center;}
.gre_box h3.gre_txt{font-size: 20px; line-height: 28px; margin-bottom: 20px; }
.gre_box h3.gre_txt > b{ font-size: 24px;}
.map-box iframe{height: 440px;}
.loca_box{margin-top: 0; ;text-align: left; padding: 30px 10px}
.loca_box > dl.loca_add{text-align: left; margin-bottom: 20px}
.loca_box > dl.loca_add > dt, .loca_box > dl dt{text-align: left; font-size: 14px;}
.loca_box > dl.loca_add > dd > p{font-size: 19px; line-height: 26px;}
.loca_box > dl{display: table; margin-bottom: 10px;}
.loca_box > dl dt{display: table-cell; width: 65px; }
.loca_box > dl > dd > p{font-size: 16px;}

.cata_box{display: block; width: 100%;}
.cata_box .flexItem{width: 100%}
.cata_box .flexItem7{margin-bottom: 10px}
.par_tit{font-size: 24px; line-height: 32px; margin-bottom: 10px;}
.cata_box a{padding: 0px 30px; height: 36px; line-height: 36px;}


.snb{display: none;}
.pro_top .flexBox{padding: 20px;}
.pro_top .flexItem{width: 100%;}
.pro_top .flexBox h3 br{display: none;}
.pro_top .flexBox h3{margin-bottom: 8px; font-size: 22px}
.pro_detail{}
.pro_detail > .flexItem{width: 100%; margin-bottom: 25px}
.pro_detail h3{font-size: 26px;}
.pro_detail h3 span{font-size: 16px; padding: 2px 10px; margin-top: 5px; margin-bottom: 10px;}
.pro_detail p{margin-top: 10px;}
.bt_link{margin-top: 10px; font-weight: normal; border-bottom: 2px solid #6cbb5a;}
.type_box .flexItem{width: 50%;}
.type_box .flexItem p br{display: none;}
.type_box p{padding: 10px}
.pallette_box{margin-bottom: 20px;}
.pallette_box .flexItem{width: 100%;}
.pallette_box h3{margin-bottom: 10px;}
.class_palette li{width: 20%;}
.table_wrap{width: 100%; overflow-x: scroll}
.tbl01 th{padding: 5px 10px; font-size: 14px;line-height: 20px;}
.tbl01 td{padding: 5px 10px; font-size: 14px; line-height: 18px;}
.pd_list li div{margin-bottom: 3px; margin-top: 3px; font-size: 13px}

.cert_box .flexItem{width: 50%}
}
/* ##Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (max-width: 481px)
{

/* #footer */
#footer .layGrid{padding-top: 30px; padding-bottom: 30px;}
#footer .ft_logo{padding: 0 0px;}
#footer .ft_logo img{height: 30px}
#footer .ft_info{padding: 0 0px;}
#footer .ft_link{padding: 0 0px; margin-bottom: 10px;}
#footer .ft_bot > p{padding-left: 0px; padding-right: 0px;}

/* Sub 공통사항 */
#sub_top{height: 160px}

#contents{padding: 80px 0;}
.article{margin-top: 40px;}
.sub_tit{font-size: 30px; line-height: 40px; padding: 15px 0; margin-bottom: 40px;}
.con_tit{font-size: 24px; line-height: 34px; margin-bottom: 10px; padding-top: 0px;  position: relative;}

/* greetings.html */
.gre_box h3.gre_txt{font-size: 18px; line-height: 24px; margin-bottom: 15px; }
.gre_box h3.gre_txt > b{ font-size: 20px;}
.map-box iframe{height: 320px;}

.par_tit{font-size: 18px; line-height: 26px; margin-bottom: 10px;}
.cata_box a{padding: 0px 20px; height: 32px; line-height: 32px; font-size: 14px;}
.pro_top .flexBox{padding: 15px;}
.pro_top .flexBox h3{margin-bottom: 0px; font-size: 18px}



}

@media (max-width: 360px)
{
#wrap{width: 360px;}
}