@charset "utf-8";



/* 공통 */
.s-part {padding:8% 0 ;}

.ss-Tit {margin:1em 0 3em; text-align:center}
.ss-Tit h3 {display:inline-block; font-size:2.0em; font-weight:600; color:#009040; line-height:1.2em; position:relative; font-family: 'GongGothic'; font-weight:500; letter-spacing:0.1em}
.ss-Tit h3:after {content:''; width:100%; height:5px; background:#fdd000; position:absolute; left:0; top:-15px;}
.ss-Tit h3:before {content:''; width:100%; height:5px; background:#fdd000; position:absolute; right:0; bottom:-13px;}
@media all and (max-width:430px) {
	.ss-Tit h3:after {height:3px; }
	.ss-Tit h3:before {height:3px; }
}


.table-t { width:100%;  border-top: 2px solid #212121; line-height: 1.4em;}
.table-t th,
.table-t td { text-align: left; padding: 1em 1.8em; border-bottom: 1px solid #e3e5ef; }
.table-t th { width:140px;  font-size:1.05em; text-align:center; background: #f3f4f8; color:#212121; font-weight: 600; text-transform:uppercase; letter-spacing:0; word-break: keep-all;}
.table-t td { background: #FFF;}



.table-t.rnd1 th,
.table-t.rnd1 td {padding: 1.5em 1.8em; }

.table-t.prd5 th,
.table-t.prd5 td { text-align: left; padding: 1.5em 1.8em; border-bottom: 1px solid #e3e5ef; }
.table-t.prd5 th { font-size:1.4em;font-family: 'GongGothic'; font-weight:500;   text-align:center; background: #f3f4f8; color:#212121; text-transform:uppercase; letter-spacing:0; }
.table-t.prd5 td.td-tit {font-size:1.125em; text-align:center; color:#212121; font-weight: 600; text-transform:uppercase; letter-spacing:0; line-height:2.0em }
.table-t.prd5 td.td-tit .br480 {display:none}
.table-t.prd5 td.s-tel {font-size:1.125em; }
.table-t.prd5 td p .name {padding-right:0.7em;}
.table-t.prd5 td.td-f {border-left: 1px solid #e3e5ef;}


@media all and (max-width:767px) {
	.table-t th { width:23%}
}
@media all and (max-width:480px) {
		.table-t.rnd1 th { width:30%}
		.table-t.rnd1 th,
		.table-t.rnd1 td {padding: 1em 1.3em; }
		.table-t.prd5 td.td-tit .br480 {display:block}
}
@media all and (max-width:430px) {
		.table-t th { width:29%}
		.table-t.prd5 th{width:25%}
}





/* intro1 */
.intro1{}
.intro1 .bg{width: 100%; height: 390px; background: url(/images/sub/intro1_bg1.jpg) no-repeat center center;}
.intro1 .sss-inner{padding: 70px 40px 0; margin-top: -80px; background: #fff;}
.intro1 .sss-inner .text{text-align: center;}
.intro1 .sss-inner .text h3{font-family: 'GongGothic', 'S-CoreDream', sans-serif; font-size: 3.8rem; margin-bottom: 50px; word-break: keep-all;}
.intro1 .sss-inner .text h3 span{color: #00712f;}
.intro1 .sss-inner .text p{color: #555555; line-height: 1.9em; word-break: keep-all;}
.intro1 .sss-inner .text .img{margin: 50px 0;}
.intro1 .sss-inner .text .img img{max-width: 100%;}
.intro1 .sss-inner .flex{margin-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.intro1 .sss-inner .flex table{width: 100%; border-bottom: 2px solid #484848;}
.intro1 .sss-inner .flex table tr{}
.intro1 .sss-inner .flex table tr th{color: #222; font-weight: 500; text-align: left; padding-left: 30px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #d1d1d1;}
.intro1 .sss-inner .flex table tr:first-child th{ border-top: 2px solid #00712f;}
.intro1 .sss-inner .flex table tr td{ padding-left: 30px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #d1d1d1;}
.intro1 .sss-inner .flex table tr:first-child td{border-top: 2px solid #484848;}

@media all and (max-width:1279px){
    .intro1 .sss-inner .flex table{width: 100%; margin-bottom: 3em;}
}
@media all and (max-width:780px){
    .intro1 .bg{height: 40vh;}
    .intro1 .sss-inner{padding: 10% 4% 0}
    .intro1 .sss-inner .text h3{font-size: 3.2rem;}
    .intro1 .sss-inner .text p br{display: none;}
    .intro1 .sss-inner .text .img{margin: 30px 0;}
    .intro1 .sss-inner .flex{margin-top: 50px;}
    .intro1 .sss-inner .flex table tr th{padding-top: 14px; padding-bottom: 14px; padding-left: 15px;}
    .intro1 .sss-inner .flex table tr td{padding-top: 14px; padding-bottom: 14px; padding-left: 15px;}
}





#intro2 {overflow:hidden}
#intro2 .intro2-img {float:left; width:50%; }
#intro2 .intro2-cont {width:50%; margin-top:5em; padding-bottom:7vw; float:left; position:relative;}
#intro2 .intro2-cont:before {content:'CEO GREETING'; font-size:5vw; font-weight:800; color:#f3f8ed; font-family: 'Poppins', sans-serif; position:absolute; right:0; bottom:0; z-index:-1}
#intro2 .intro2-cont .t1 {font-size:1.7em; line-height:1.5em; color:#009040; letter-spacing:-0.07em; font-weight:700;  font-family: 'Nanum Myeongjo', serif; transform: rotate(-0.03deg); margin-bottom: 1em;}
#intro2 .intro2-cont .pt-t {font-size:1.4em; padding:2em 0 1em; color:#222; font-weight:600}
#intro2 .intro2-cont .t2 {padding-bottom:3em; line-height:2.3em; color:#555}
#intro2 .intro2-cont .name {font-size:1.2em; }
#intro2 .intro2-cont .sign {font-size:1.4em; padding-left:10px; color:#222; font-weight:500}
#intro2 .intro2-2-img {text-align:right; padding-right:1em; margin-top:-70px;}
@media all and (max-width:1399px){
		#intro2 .intro2-img {width:45%; padding:0 2%;}
	#intro2 .intro2-img img { width:100%; }
	#intro2 .intro2-cont { width:55%; margin-top:5vw;  padding-bottom:6vw;}
}
@media all and (max-width:1280px){
	#intro2 .intro2-cont .t1 {font-size:1.5em;}
	#intro2 .intro2-cont .pt-t {font-size:1.3em; }
	#intro2 .intro2-cont .t2 br {display:none;}
	#intro2 .intro2-2-img { padding-right:0;  margin-top:0;}
}
@media all and (max-width:999px){
	#intro2 .intro2-img {width:100%; text-align:center}
	#intro2 .intro2-img img { max-width:580px; }
	#intro2 .intro2-cont { width:100%; padding:0 5%;  padding-bottom:15vw;}
	#intro2 .intro2-cont:before { font-size:9vw;}
	#intro2 .intro2-2-img {text-align:left; margin-top:2em;}
}





#intro6 {text-align:center}
#intro6 ul li {padding-bottom:6em}
@media all and (max-width:870px){
	#intro6 ul li img {width:100%}
}

#imgList {margin-top:5em;}
#imgList ul {overflow:hidden; display: flex; flex-wrap: wrap;}
#imgList ul li {width:calc(20% - 20px); margin:10px; margin-bottom:2em; float:left; text-align:center}
#imgList ul li .img {border:1px solid #ddd; padding:10px;}
#imgList ul li .img img {width:100%}
#imgList ul li P {display:inline-block; line-height:2.0em;  padding:0 1em; margin-top:1em; border-bottom:1px solid #555}

#imgList ul.w1 {text-align:center}
#imgList ul.w1 li {display:inline-block; float:unset} 
#imgList ul.w4 {text-align:center}
#imgList ul.w4 li {display:inline-block; float:unset} 

@media all and (max-width:1180px){
	#imgList ul li {width:calc(25% - 20px); }
	#imgList ul li P { margin-bottom:2em; }
	#imgList ul.w4 li {width:calc(25% - 20px);  display:unset; float:left} 
}
@media all and (max-width:978px){
	#imgList ul li {width:calc(33.333% - 20px); }
	#imgList ul.w4 li {width:calc(33.333% - 20px); }

}
@media all and (max-width:680px){
	#imgList ul li {width:calc(50% - 20px); }
	#imgList ul li P { margin-bottom:1em; }
	#imgList ul.w4 li  {width:calc(50% - 20px); }
	#imgList ul.w1 li {width:calc(50% - 20px);  display:unset; float:left} 
}
@media all and (max-width:480px){
	#imgList ul li {width:calc(50% - 10px); margin:5px; }
	#imgList ul.w4 li {width:calc(50% - 10px); margin:5px; }
	#imgList ul.w1 li {width:calc(50% - 10px); margin:5px; }
}



/* table */
.tb-style {width:100%; margin:0 auto;}
.tb-style th {font-size:1.2em;  padding:1em 0; background:#009040;  border-left:1px solid #fff;  color:#fff; line-height:1.5em; font-weight:500 }
.tb-style td {font-size:1.06em; padding:0.8em 0;  text-align:center;  border-left:1px solid #ddd; border-bottom:1px solid #ddd; line-height:1.5em;  font-weight:400; letter-spacing:-0.01em;}
.tb-style td:first-child { border-left:0; text-align:center;  padding-left:0; background:#f9f9f9}
.tb-style td.row-td {border-left:1px solid #ddd; background:#FFF}

.tb-style th.th-fi {background:#555; font-size:1.35em;}

.scroll-txt { display: none; color:#999; text-align:left; font-size: 1em; margin: 1em 0;}

@media screen and (max-width:800px) {	
	.tb-style.w800 {width:800px;}
	.tb-scroll { overflow-x: auto; }
	.scroll-txt.w800 { display: block;  }
}
@media screen and (max-width:640px) {	
	.tb-style.w800 {width:640px;}
}
@media screen and (max-width:350px) {	
	.tb-style.w800 {width:480px;}
}





/*연혁*/
.history-top { text-align: center; color:#fff; width: 100%; height: 350px; position: relative; display: table;
                    background: url("/images/sub/history_top.png") no-repeat center; background-size: cover; }
.history-top.emp3-t {  background: url("/images/sub/emp3-bg.png") no-repeat center; } 
.history-top dl { display: table-cell; vertical-align: middle;}
.history-top dl dt { font-size: 2.5em; font-weight: 600; }
.history-top dl dd { font-size: 1.25em; }
.history-top p { position: absolute; bottom:-0.2em; left:0; width: 100%; line-height: 1.0em; opacity: 0.4;
                      font-size: 7vw; font-family: 'Montserrat'; letter-spacing: 0.25em; font-weight: 900; }


@media all and (max-width:1480px) {
  .history-top { height: 30vw; }
}

@media all and (max-width:976px) {
  .history-top { height: 36vw; }
  .history-top p { font-size: 8vw; }
}

@media all and (max-width:568px) {
  .history-top { height: auto; padding: 15% 5%;  }
  .history-top dl dt { font-size: 2.2em; }
  .history-top p { font-size: 10vw; }
}



.his_wrap {overflow:hidden; box-sizing:border-box; position:relative; }
.his_wrap:before{content:""; position:absolute; top:0; left:50%; margin-left:-0.5px; width:1px; height:100%; background:#ddd; z-index:1;}

.his_wrap .his_bx{box-sizing:border-box; padding-top:5em; position:relative; overflow:hidden;}
.his_wrap .his_bx .in{clip: rect(auto, auto, auto, auto); top:0; left:0; width:100%; height:100%; position:absolute; z-index:0; overflow:hidden;}
.his_wrap .his_bx .in .bg{position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center center; transform: translateZ(0); will-change: transform; }
.his_wrap .his_bt{padding-bottom:8em}

.his_wrap li {position:relative; z-index:2;  width:50%; float:right; text-align:left; padding:0 20px 3em; box-sizing:Border-box; 	
					/* background:url('/images/sub/his-dot.png')no-repeat; background-position:5% top; */ }
.his_wrap li+li{clear:both;}

.his_wrap li .t { position:relative; font-size:3.3em;  font-family: 'Barlow'; padding-top:10px;  margin-bottom:20px; color:#009040; font-weight:600;	}
 .his_wrap li .t:before {content:""; position:absolute; top:0.45em; left:-30px; width:20px; height:20px; border-radius:100%; background:#009040; border:6px solid #f2f9f5;} 
.his_wrap li .c { font-size: 1.05em; line-height: 1.8em;}
.his_wrap li .c dt{ width:60px; display:inline-block; vertical-align:top; margin-bottom:10px; color:#212121; font-weight: 700;  font-size:1.125em; }
.his_wrap li .c dd{width:calc(100% - 60px); display:inline-block; vertical-align:top; margin-bottom:10px; }
.his_wrap li .c p { position: relative; margin-bottom:10px; padding: 0 15px; }
.his_wrap li .c p::before { content:''; width: 3px; height: 3px; background: #009040; position: absolute; left:0; top: 50%; margin-top: -1.8px; }

.his_wrap li:nth-of-type(2n) {float:left; text-align:right; }
.his_wrap li:nth-of-type(2n) .t:before{left:auto; right:-30px;}
.his_wrap li:nth-of-type(2n) dt{float:right; }
.his_wrap li:nth-of-type(2n) .c p::before { left: unset; right:0; }

@media all and (max-width:767px) {
	.his_wrap .his_bx{ padding-left:10px;}
	.his_wrap:before{ margin-left:0; left:10px;  }
	.his_wrap li{ width:100%;}
  .his_wrap li .t { font-size: 2.5em; }
  .his_wrap li .t:before { top:0.35em;  }
  .his_wrap li .c dt{ width:50px; }
  .his_wrap li .c dd{width:calc(100% - 50px); }
	.his_wrap li .c dd img{max-width:100%;}
	.his_wrap li .c dd.img img{width:47%;}

	.his_wrap li:nth-of-type(2n){float:right; text-align:left; }
	.his_wrap li:nth-of-type(2n) .t:before{left:-30px; right:inherit;}
	.his_wrap li:nth-of-type(2n) dt{float:left; }

	.his_wrap li:nth-of-type(2n) .c p::before { right:unset; left: 0;  }
}

@media all and (max-width:568px) {
  .history-top { padding: 12% 0; }
  .history-top h4 { font-size: 2.2em; }
}





#intro5 {text-align:center}
@media all and (max-width:982px) {
	#intro5 img {width:100%;}
}





#intro7 {overflow:hidden;  }
#intro7 .img {width:50%;padding:20px; float:left; }
#intro7 .img img {width:100%}
#intro7 .cont {width:50%;padding:20px;   float:left;  background:#FFF; margin-bottom: 5em;}
@media all and (max-width:1280px) {
	#intro7 .img img {width:664px}
}
@media all and (max-width:1140px) {
	#intro7 {width:80%; margin:0 auto;}
	#intro7 .img {width:100%; margin-bottom:1em;}
	#intro7 .img img {width:100%}
	#intro7 .cont {width:100%; padding:0 2em 3em 2em;  } 
}
@media all and (max-width:750px) {
	#intro7 {width:100%;}
}




#sMap { position: relative; overflow: hidden; z-index:-1  }
#sMap .root_daum_roughmap .wrap_map  { height: 550px !important; }
.wrap_controllers  { display: none; }
.map_border {  display: none;}


#sMap-info { position: relative; overflow: hidden; width: 92%; margin: -3vw auto 0; padding: 3% ; border:1px solid #f4f4f4; border-right-color:#e6dfc6; border-bottom-color:#e6dfc6;
			 background:#FFF ;z-index:11; }
#sMap-info .tit { float: left; width: 30%; }
#sMap-info .tit h4 {  color:#222; font-size: 2.0em; line-height: 1.5em; font-weight:600;   }
#sMap-info .tit p.t1 { color:#999; font-size: 1.05em; line-height: 1.5em; font-weight:500  }
#sMap-info .txt { float: left; width: 60%; padding: 1% 0 0 5%;  border-left: 1px solid #e5e5e5;  }
#sMap-info .txt li {overflow:hidden}
#sMap-info .txt li .eng {display:inline-block;  vertical-align:top; width:100px; font-size:0.9375em;color:#009040; letter-spacing:0;  font-family: 'Montserrat', sans-serif;font-weight:700; }
#sMap-info .txt li .t1 {  width:calc(100% - 100px); display:inline-block; font-size:1.3em; padding-bottom:0.5em;  line-height:1.5em; font-family: 'Montserrat','S-CoreDream';  font-weight:500 }
#sMap-info .txt li .t1.ts1 {color:#555; font-size:1em}
@media all and (max-width:1050px) {
	#sMap-info .tit p.t1 .br1050 {display:none}
}
@media all and (max-width:976px) {
	#sMap .root_daum_roughmap .wrap_map  { height: 55vw !important; }
}
@media screen and (max-width:760px){
	#sMap-info { padding: 5%}
	#sMap-info .tit { width: 100%; }
	#sMap-info .txt { width: 100%;   margin-top:2em; padding: 2em 0 0 0;  border-left: 0;   border-top: 1px solid #e5e5e5;}
}
@media screen and (max-width:480px){
	#sMap-info .txt li .eng { width:80px; }
	#sMap-info .txt li .t1 {  width:calc(100% - 80px);}
}









/* 제품소개 */

.goods_list {overflow:hidden; display: flex; flex-wrap: wrap;}
.goods_list li {display: block; width:calc(25% - 10px); margin:5px; float: left; }
.goods_list .box {border: 1px solid #EFEFEF; overflow:hidden}
.goods_list .box a {display: block; padding:15px}
.goods_list .box img {
	width: 100%;
	transition: ease-in .2s;
    -webkit-transition: ease-in .2s;
    -moz-transition: ease-in .2s;
    -ms-transition: ease-in .2s;
    -o-transition: ease-in .2s;
    transform: scale(1);
    -webkit-transform: scale(1);
}
.goods_list .box a:hover img {transform:scale(1.02); -webkit-transform:scale(1.02)} 
.goods_list .box h2 {display: block; text-align: left; padding:10px 0 20px;  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #000; letter-spacing:0; text-align: center}
.goods_list .box span {display: block; text-align: left; padding:0px 0 20px;  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing:0; text-align: center}
.goods_list .box p {text-align: left; height: 40px; font-family:맑은고딕,Malgun Gothic,MalgunGothic; font-size: 12px; line-height: 1.7em; display: none}

@media all and (max-width:976px) {
	.goods_list li { width:calc(50% - 10px); }
}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url('/images/sub/pro-pop-bg.png') repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:0;text-align: center; font-size:16px; width:100%; color:#949494;}
        #cboxLoadingOverlay{background:url('/images/loading_background.png') no-repeat center center;}
        #cboxLoadingGraphic{background:url('/images/loading.gif') no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; top:43%; left:-80px; background:url('/images/sub/prev-arrow.png') no-repeat 0 0; width:64px; height:64px; text-indent:-9999px;}
        #cboxNext{position:absolute; top:43%; right:-80px; background:url('/images/sub/next-arrow.png') no-repeat 0 0; width:64px; height:64px; text-indent:-9999px;}
        #cboxClose{position:absolute; top:0; right:-65px;  background:url('/images/sub/pop_close.png') no-repeat 0 0; width:30px; height:30px; text-indent:-9999px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
@media screen and (max-width:768px) {
	#cboxPrevious, #cboxNext, #cboxClose {background: none; display: none}
}
@media screen and (max-width:450px) {
	#cboxPrevious, #cboxNext, #cboxClose {background: none; display: none}
}






/* 연구개발 */
#proImg {overflow:hidden; margin-bottom:2em;}
#proImg > div {width:calc(50% - 5px); margin-left:10px; margin-bottom:10px; float:left}
#proImg > div:first-child {margin-left:0}

@media screen and (max-width:1399px){
	#proImg > div img {width:100%} 
}
@media screen and (max-width:978px){
	#proImg > div {width:100%; margin-left:0;}
}

#pro {width:100%; background-position:left bottom; background-size:auto 100%; background-repeat:no-repeat; overflow:hidden}
#pro.pro2-bg {/* background-image:url('/images/sub/pro2-bg.png') */}
#pro.pro2-bg .img {padding-bottom:1em}
#pro.pro2-bg .img img {width:100%}
#pro .pro-cont {width:50%; padding-left:20px; background:#FFF; float:right; }
#pro .pro-cont .pro2-tb {max-width:700px}
@media screen and (max-width:1399px){
	#pro .pro-cont .pro2-tb {padding-right:6%}
}
@media screen and (max-width:978px){
	#pro {background-position:center bottom; background-size:100% auto }
	#pro.pro2-bg {padding-bottom:51vw}
	#pro .pro-cont {width:100%;padding-left:0; }
	#pro .pro-cont .pro2-tb {max-width:100%; padding:0 3%}
}





/* 연구소 */
#rnd1-bg {padding-bottom:6%; background:url('/images/sub/rnd1-bg-all.png') no-repeat; background-position:center bottom;  background-size:100% auto;  }
#rnd1 {/*width:100%; */ height:605px;  background:url('/images/sub/rnd1-bg.png') no-repeat; background-size:auto 100%; overflow:hidden}
#rnd1 .cont {margin-top:9em; margin-right:3em; width:100%; max-width:600px; background:rgba(255,255,255,0.9); padding:2em; float:right}

@media screen and (max-width:1770px){
	#rnd1-bg { background-size:auto 80%;  }
}
@media screen and (max-width:1100px){
	#rnd1 {height:auto; background-size: 100% auto;  }
	#rnd1 .cont {margin-top:30vw; width:100%; max-width:100%; float:unset; }
}



#rnd1-2 {margin-top:5em; text-align:center}
#rnd1-2 .img1 img {width:96%; max-width:1194px}



#rnd2 {text-align:center}
#rnd2 img {width:100%; max-width:768px}

#rnd3 {text-align:center}
#rnd3 img {width:100%; max-width:1086px}


#pro1 {text-align:center; padding-right:190px}
#pro1 img {width:100%; max-width:894px}
@media screen and (max-width:1120px){
	#pro1 {padding-right:0}
}


#pro2-1 {padding-top:2em; text-align:center; }
#pro2-1 img {width:100%; max-width:876px}

#pro2-2 {padding-top:2em; text-align:center; }
#pro2-2 img {width:100%; max-width:1138px}


#quality1 {padding-top:2em; text-align:center; }
#quality1 img {width:100%; max-width:1069px}




.zzWrap .zzCont { position: relative;  width: 100%; overflow: hidden; margin: 0 auto;
                            background-size: 50% cover;  background-position: left center; background-repeat: no-repeat;}
.zzWrap .zzCont:nth-child(even) { background-position: right center;  }
.zzWrap .zzCont:nth-child(odd) { background-position: left center; }

.zzWrap .zzCont .zz-cont { float: right; width: 50%; padding: 7% 5%; box-sizing: border-box; background:#FFF  }
.zzWrap .zzCont:nth-child(even) .zz-cont { float: left;  background:#FFF }
.zzWrap .zzCont .zz-cont .eng {font-size:1.0em; font-weight:600; font-family: 'Poppins', sans-serif; color:#fdd000; text-transform:uppercase; letter-spacing:0 }
.zzWrap .zzCont .zz-cont dt { position: relative; font-family: 'GongGothic'; color:#009040; font-size: 2.7em; margin:0.8em 0 0.1em; }
.zzWrap .zzCont .zz-cont dd {font-size:1.125em;  line-height: 1.7em; }

#quality2_1 { background-image: url("/images/sub/quality2_img1.png");}
#quality2_2 { background-image: url("/images/sub/quality2_img2.png");}
#quality2_3 { background-image: url("/images/sub/quality2_img3.png");}


@media all and (max-width:1280px) {
   .zzWrap .zzCont { background-size: auto 100%; }
   .zzWrap .zzCont .zz-cont dt { font-size: 2.4em; }
}

@media all and (max-width:860px) {
   .zzWrap .zzCont { background-size: 100% auto; background-position: center top !important; padding-top: 46vw;  }
   .zzWrap .zzCont .zz-cont { width: 100%; }
}






#emp3-img img {width:100%;}
#emp3 .cont {text-align:center; padding-top:5em;}
#emp3 .cont h3 { font-size:2.3em; color:#222; font-family: 'GongGothic'; margin-bottom:0.5em; font-weight:500}
#emp3 .cont .t2 {font-size:1.25em; /* display:inline-block; */}
#emp3 .cont .t1 {padding-top:1em;}


.orderCircle { margin:0 auto; text-align: center; overflow: hidden; display: flex; width: 100%;   justify-content: center; flex-wrap: wrap; }
.orderCircle li { display: inline-block; *zoom:1; width: 200px; height:200px; border:7px solid #009040; border-radius:200px;
                      background:#fff; counter-increment: number; position: relative; overflow: hidden; margin: 5px; }
.orderCircle li::before { content: counter(number, decimal-leading-zero); position: absolute; bottom: 0; right:8%; color:rgba(153,204,30, 0.1);
                                 font-size: 5.33em; font-family: 'Poppins', cursive; font-weight:700 }
.orderCircle li:nth-child(even) { border-color:#009040; }

.orderCircle li dl {  display:table; width:100%; height:100%; }
.orderCircle li dl dt { display:table-cell; box-sizing:border-box; vertical-align:middle; text-align:center; font-size: 1.35em; color:#222;   font-weight: 500;   line-height: 1.3em; }
.orderCircle li dl dt .st1 {font-size:0.8em;color:#747474; margin-top:0.5em;}


@media all and (max-width:1099px) {
   .orderCircle li dl dt { font-size: 1.5em; }
   .orderCircle li dl dd { font-size: 1.0em; }
}
@media all and (max-width:976px) {
   .orderCircle { margin: 0 auto; width: 90%; } 
   .orderCircle li { width: calc(25vw - 30px); height: calc(25vw - 30px); margin-top: 2vw  }
   .orderCircle li::before { font-size: 8rem; }
}
@media all and (max-width:830px) {
    .orderCircle li { width: calc(28vw - 30px); height: calc(28vw - 30px);}
   .orderCircle li::before { font-size: 7rem; }
}
@media all and (max-width:640px) {
	   .orderCircle li {  width: calc(26vw - 10px); height: calc(26vw - 10px); margin-top: 1vw;   }
}

@media all and (max-width:480px) {
	.orderCircle li {  width: calc(42vw - 10px); height: calc(42vw - 10px); margin-top: 1vw;   }
	.orderCircle li dl dt { font-size: 1.6em; }
   .orderCircle li dl dd { font-size: 1.2em; margin-top: 1vw; }
   .orderCircle li::before { font-size:7rem; }
}






#stepList { overflow: hidden; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap;}
#stepList li { position: relative; counter-increment: number; float: left; width: calc(33.333% - 20px); max-height: 230px; margin: 0 0 30px 30px;
                 border:10px solid transparent; box-sizing: border-box; padding: 30px 40px; background: #fbfbf5; border-radius: 5px; }
#stepList li:nth-child(3n+1) { margin-left:0; }
#stepList li dl::before { content: 'SUPPORT 'counter(number, decimal-leading-zero); color:#85bb62; line-height: 60px; display: block;
                                  text-transform: uppercase; font-size: 1.0em; margin-bottom: 1em; font-weight: 600; font-family: 'Poppins'; }
#stepList li img { position: absolute; top: 20px; right: 7%; background: #85bb62; border-radius: 100%; width: 70px; height: 70px;}
#stepList li dl { position: relative; width: 100%; display: block; }
#stepList li dl dt { font-size: 1.5em; color:#009040;  font-family: 'GongGothic'; font-weight: 500; line-height: 1.2em; margin-bottom: 0.7em; }
#stepList li dl dd { font-size: 1.125em; color:#0c331d; line-height: 1.5em; }





@media all and (max-width:976px) {
  #stepList li { width: calc(50% - 20px); margin: 0 0 30px 30px; height: 280px;  }
  #stepList li:nth-child(3n+1) { margin-left:30px; }
  #stepList li:nth-child(3n+1)::before { display: block; }
  #stepList li:nth-child(odd) { margin-left:0; }
  #stepList li:nth-child(odd)::before { display: none; }
  #stepList li::before { width: 30px; left: -40px;  background-size: 70% auto; }
}


@media all and (max-width:680px) {
  #stepList li { width: 100%; margin: 0 0 20px 0 !important; height: auto; padding: 5%; max-height:auto;  border-width: 8px; }
  #stepList li dl dt br,
  #stepList li dl dd br { display: none; }
  #stepList li img { right: 3%; width: 50px; height: 50px;}
  #stepList li::before { width: 100%; height: 25px; background-size: auto 30%; left:0; top: inherit; bottom: -33px; 
                                -webkit-transform:rotate(90deg);  -moz-transform:rotate(90deg); }
  #stepList li:nth-child(odd)::before { display: block; }
  #stepList li:last-child::before { display: none; }
  #stepList li dl::before {  line-height: 1.2em;  margin-bottom: 1.0em; }

}
@media all and (max-width:430px) {
	  #stepList li { margin: 0 0 10px 0 !important; padding: 5% 3%}
	  #stepList li img {  top: 10px;  width: 40px; height: 40px;}
}




#emp2 {padding-top:2em; text-align:center; }
#emp2 img {width:100%; max-width:850px}




#prd5 {padding:5% 0; background:url('/images/sub/prd5-bg.png') no-repeat; background-size:70% auto;  overflow:hidden; position:relative; }

#prd5 .tit {position: relative; padding-bottom:5%; width:94%; max-width:1400px; margin: 0 auto; color:#FFF}
#prd5 .tit h3 {font-size:3.0em; letter-spacing:-0.03em; padding-bottom:10px;}
#prd5 .tit .t1 {font-size:1.25em; line-height:1.4em }

#prd5 .cont { background:#FFF; padding:3%;    float: right;    width: 70%; overflow:hidden}
#prd5 .cont .prd5-table { float:left ; }

@media all and (max-width:1200px) {	
	#prd5 {background-size:50% auto; }
	#prd5 .cont { width: 80%; }
}
@media all and (max-width:1040px) {	
	#prd5 .cont { font-size:1.5vw}
}
@media all and (max-width:640px) {
	#prd5 {padding-top:30vw; background-size:80% auto;} 
	#prd5 .cont {width: 95%; }
}
@media all and (max-width:480px) {
	#prd5 {padding-top:45vw; background-size:90% auto;} 
}



#emp5 {padding:5em 0 8em; background:url('/images/sub/emp5-bg.png') no-repeat center; background-size:cover; width:100%; }
#emp5 .t1 {font-size:3.8em; text-align:center; color:#FFF; font-family: 'ROEHOE-CHAN'; font-weight:500}
#emp5 .t1 .point {font-size:1.3em; }

#emp5-2 {background:#FFF; width:90%; margin:-80px auto 0; padding-top:4em; }
#emp5-2 ul {width:90%; max-width:800px; margin:0 auto}
#emp5-2 ul li {border:5px solid #fdd000; padding:0.5em; border-radius:100px; margin-bottom:1em; 
				font-size:1.5em;}
#emp5-2 ul li .num {display:inline-block;   font-weight: 600;  text-align:center; margin-right:1em; background:#009040; line-height:60px; width:60px; border-radius:60px; color:#FFF}

@media all and (max-width:1280px) {
	#emp5 {padding:5em 0 6em;}
	#emp5-2 { margin:-40px auto 0;}
}
@media all and (max-width:910px) {
	#emp5 .t1 {font-size:6vw}
	#emp5-2 {padding-top:2em; }
}
@media all and (max-width:640px) {
	#emp5-2 ul li .num { line-height:40px; width:40px; }
}