@charset "utf-8";

.tit-dl {position:relative;}
.tit-dl dt {position:relative;font-size:36px; color:#333; line-height:50px; padding-bottom:35px; letter-spacing:-2px}
.tit-dl dt span {position:absolute; bottom:0; left:2px; display:block; width:90px; height:2px; background:#333}
.tit-dl dd.txt {margin:33px 0 0 2px; line-height:32px}
.tit-dl .img {position:absolute; right:-27px; top:35px; z-index:5; width:550px; text-align:center}
.tit-dl .img span {position:absolute; height:35px}
.tit-dl .img span.circle_top:before {content:url(../images/tech/dott.png); position:absolute; top:-25px; width:100%; text-align:center; font-size:10px}
.tit-dl .img span.circle_bot:before {content:url(../images/tech/dott.png); position:absolute; bottom:-5px; width:100%; text-align:center; font-size:10px}
.tit-dl .img .safety_simg {top:71px; left:127px; width:303px; height:287px; background:url(../images/tech/safety_simg02.png) no-repeat center}
.tit-dl .img .safety_txt01 {top:28px; left:210px; transform:scale(0)}
.tit-dl .img .safety_txt02 {top:135px; left:409px; transform:scale(0)}
.tit-dl .img .safety_txt03 {bottom:105px; right:58px; transform:scale(0)}
.tit-dl .img .circle_bot.safety_txt03:before {content:content:url(../images/tech/dott.png); position:absolute; bottom:-25px; width:100%; text-align:center; font-size:10px}
.tit-dl .img .safety_txt04 {bottom:-4px; left:212px; height:52px; transform:scale(0)}
.tit-dl .img .safety_txt05 {bottom:105px; left:20px; transform:scale(0)}
.tit-dl .img .circle_bot.safety_txt05:before {content:content:url(../images/tech/dott.png); position:absolute; bottom:-25px; width:100%; text-align:center; font-size:10px}
.tit-dl .img .safety_txt06 {top:135px; left:37px; transform:scale(0)}
.tit-dl .img .envi_simg {top:128px; left:159px; width:241px; height:229px; background:url(../images/tech/environment_simg02.png) no-repeat center}
.tit-dl .img .envi_img01 {top:0; left:214px; width:120px; height:120px; transform:scale(0)}
.tit-dl .img .envi_img02 {bottom:50px; right:47px; width:120px; height:120px; transform:scale(0)}
.tit-dl .img .envi_img03 {bottom:50px; left:47px; width:120px; height:120px; transform:scale(0)}
.tit-dl .img .envi_line01 {z-index:-1; top:110px; left:50%;}
.tit-dl .img .envi_line02 {z-index:-1; bottom:110px; left:150px;}
.tit-dl .img .envi_line03 {z-index:-1; bottom:110px; right:150px;}
.tit-dl .img .envi_txt01 {top:108px; right:39px; line-height:20px; transform:scale(0)}
.tit-dl .img .circle_bot.envi_txt01:before {content:content:url(../images/tech/dott.png); position:absolute; bottom:-25px; width:100%; text-align:center; font-size:10px}
.tit-dl .img .envi_txt02 {bottom:25px; left:197px; line-height:20px; transform:scale(0)}
.tit-dl .img .circle_bot.envi_txt02:before {content:content:url(../images/tech/dott.png); position:absolute; bottom:-25px; width:100%; text-align:center; font-size:10px}
.tit-dl .img .envi_txt03 {top:130px; left:45px; transform:scale(0)}

.tit-dl.quality .img img.img_pc {z-index:10}
.tit-dl.environment .img img.img_pc {z-index:10; opacity:0}
.tit-dl.safety .img img.img_pc {z-index:10; opacity:0}
.tit-dl .img img.img_m {display:none}
.tit-dl .img.type2 span {position:absolute; text-indent:-9999px}
.tit-dl .img .quality_txt01 {top:50px; left:230px; width:90px; height:26px; background:url(../images/tech/font01.png) no-repeat center}
.tit-dl .img .quality_txt02 {bottom:42px; left:248px; width:75px; height:26px; background:url(../images/tech/font02.png) no-repeat center}
.tit-dl .img .quality_txt03 {top:130px; right:129px; width:61px; height:78px; background:url(../images/tech/font03.png) no-repeat center}
.tit-dl .img .quality_txt04 {top:152px; left:127px; width:61px; height:42px; background:url(../images/tech/font04.png) no-repeat center}
.tit-dl .img .arrow01 {top:0px; left:380px; width:12px; height:143px; background:url(../images/tech/arrow01.png) no-repeat center; top:144px}
.tit-dl .img .arrow02 {top:50px; left:100px; width:130px; height:12px; background:url(../images/tech/arrow02.png) no-repeat center}
.tit-dl .img .arrow03 {bottom:30px; left:100px; width:127px; height:12px; background:url(../images/tech/arrow03.png) no-repeat center}
.tit-dl .img .arrow04 {bottom:30px; left:323px; width:43px; height:12px; background:url(../images/tech/arrow04.png) no-repeat center}
.tit-dl .img .arrow05 {z-index:-1; bottom:30px; left:420px; width:55px; height:12px; background:url(../images/tech/arrow05.png) no-repeat center}
.tit-dl .img .arrow06 {top:158px; left:426px; width:33px; height:12px; background:url(../images/tech/arrow06.png) no-repeat center}
.tit-dl .img .side01 {top:20px; left:20px; width:64px; height:297px; background:url(../images/tech/side01.png) no-repeat center}
.tit-dl .img .side02 {bottom:20px; right:29px; width:62px; height:297px; background:url(../images/tech/side02.png) no-repeat center}
.tit-dl .img .quality_product {bottom:15px; left:370px; width:69px; height:69px; background:url(../images/tech/quality_product.png) no-repeat center; transform:scale(0)}
.tit-dl .img .quality_tit {top:-50px; left:20px; width:497px; height:37px; background:url(../images/tech/quality_tit.png) no-repeat center; transform:scale(0)}


.arrow02_msk{position:absolute;overflow:hidden;width:0;height:64px;left:230px;top:0}
.arrow03_msk{position:absolute;overflow:hidden;width:0;height:330px;left:0;top:0;}
.arrow04_msk{position:absolute;overflow:hidden;width:318px;height:330px;left:0;top:0;}
.arrow05_msk{position:absolute;overflow:hidden;width:405px;height:330px;left:0;top:0;}
.arrow06_msk{position:absolute;overflow:hidden;width:425px;height:330px;left:40px;top:0;}
.arrow01_msk{position:absolute;overflow:hidden;width:416px;height:143px;left:0;top:-10px;}
.side01_msk{position:absolute;overflow:hidden;width:107px;height:0;left:0;top:0}
.side02_msk{position:absolute;overflow:hidden;width:550px;height:0;left:0;bottom:0}

.tit-dl .img img {max-width:100%}
.tit-dl .img.type2 {top:-5px; }

.techfull {height:420px; color:#fff;  margin-top:-20px}
.techfull.safe { background:url(../images/tech/safety_bg.jpg) no-repeat center 0;}
.techfull.environment {height:530px; background:url(../images/tech/environment_bg.jpg) no-repeat center 0;}
.techfull.quality {height:416px; background:url(../images/tech/quality_bg.jpg) no-repeat center 0;}
.techfull h4 {font-size:24px; color:#fff;  font-family:NotoSansCJKkr-Medium; padding-top:75px; margin:0 0 35px 0}
.techfull ul li {line-height:32px}

.techfull ul.round-ver {position:relative}
.techfull ul.round-ver li {float:left; width:25%;} 
.techfull ul.round-ver:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.techfull ul.round-ver li span.round, .techfull ul.round-ver li span.txt {display:block; text-align:center; }
.techfull ul.round-ver li span.round {display:table; width:100%; margin:0 auto}
.techfull ul.round-ver li span.round .tit {display:table-cell; vertical-align:top; ; font-family:NotoSansCJKkr-Medium}
.techfull ul.round-ver li span.round.property {position:relative; z-index:100; height:100px; background:url(../images/tech/circle_white.png) no-repeat center bottom}
.techfull ul.round-ver li .line {position:absolute; z-index:10; top:87px; width:260px; border-top:1px solid #ccc}
.techfull ul.round-ver li span.txt {line-height:32px; margin-top:25px;  text-align:left; font-size:15px}

.techfull p {font-size:15px; line-height:26px; color:#ccc; margin-top:16px; }
.techfull.quality ul li {line-height:26px; margin-bottom:22px}
.techfull.quality ul li strong {display:block; font-weight:normal; font-family:NotoSansCJKkr-Medium; }
.techfull.quality ul li span {display:block; margin-left:10px; font-size:15px}
.techfull.quality ul li:last-child {margin-bottom:0}
.act-list {position:relative; padding-bottom:100px; margin-top:25px}
.act-list:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.act-list dl {position:relative; float:left; width:31.3%; box-sizing:border-box; margin-left:2%}
.act-list dl:first-child {margin-left:0}
.act-list dl dt {color:#916b4a; }
.act-list dl dd {font-size:15px; line-height:26px; text-indent:-10px; margin-left:8px; margin-top:7px}
.act-list dl .img {position:absolute; top:0; left:0; line-height:0; text-indent:0; margin-left:0; margin-top:0}
.act-list dl .img img {max-width:100%}
.section-in h4 {padding-top:72px}

.certificate {position:relative; padding-top:70px; border-top:2px solid #eaeaea; margin-top:108px;}
.certificate.type4 {padding-top:0; border-top:0; margin-top:0}/* 2016.07.06 수정 */
.certificate h4 {font-size:30px; margin:-10px 0 0 0; font-family:NotoSansCJKkr-Light}
.certificate p {line-height:32px; color:#333; margin-bottom:35px}
.certificate dl dt {font-size:24px; color:#333; font-family:NotoSansCJKkr-Medium; margin-top:16px;}
.certificate dl dt:first-child {margin-top:0}
.certificate dl dd {line-height:32px;}
.certificate ul {margin-top:20px}
.certificate ul li {font-size:15px; line-height:30px; color:#666}
.certificate ul li:after {content:""; clear:both; display:block; height:0; visibility:hidden; }
.certificate ul li span:first-child {float:left; display:block; width:103px}
.certificate ul li span:last-child {float:left; display:block;  }
.certificate .img {position:absolute; text-align:center}
.certificate .img img {max-width:100%; display:block; margin-bottom:20px}
.certificate.type1 .img {top:60px; right:5%;}
.certificate.type2 .img {top:60px; left:5%;}
.certificate.type3 .img {top:80px; right:5%;}
.certificate.type4 .img {top:9px; left:5%;}/* 2016.07.06 추가 */
.certificate.type2 .text-area {padding-left:38%; box-sizing:border-box}
.certificate.type4 .text-area {padding-left:38%; box-sizing:border-box}/* 2016.07.06 추가 */
.certificate .btw {width:200px; font-family:NotoSansCJKkr-Light}
.certificate ul li span:last-child {width:80%}


@media all and (min-width:1600px) {
.techfull.safe {background-size:cover;}
.techfull.environment {background-size:cover;}
.techfull.quality {background-size:cover;}
}

@media all and (min-width:1280px) {
.techfull ul.round-ver li span.txt {padding-left:14px}
}

@media all and (max-width:1279px) {
.tit-dl {padding:0 50px; }
.section-in {padding:0 50px}
.section-in h4 {padding-left:0;}
.certificate {margin-left:50px; margin-right:50px}
.certificate h4 {padding:0; }
.tit-dl dd.txt br {display:none}
.tit-dl .img {position:relative; margin:80px auto 0; text-align:center; top:0; right:0 }
.tit-dl .img .safety_txt01 {top:28px; left:230px}
.tit-dl .img .safety_txt02 {top:135px; left:416px}
.tit-dl .img .safety_txt03 {bottom:105px; left:416px}
.tit-dl .img .safety_txt04 {bottom:-3px; left:203px}
.tit-dl .img .safety_txt05 {bottom:105px; left:19px}
.tit-dl .img .safety_txt06 {top:135px; left:43px}
.tit-dl .img img.img_pc, .tit-dl .img span {display:none}
.tit-dl .img img.img_m {display:block; margin:0 auto}

.techfull.safe {position:relative; margin-top:-190px; background-size:cover}
.techfull.environment {position:relative; margin-top:-155px; height:auto; padding-bottom:100px; background-size:cover}
.techfull.quality {position:relative; margin-top:-170px; height:auto; padding-bottom:100px; background-size:cover}
.act-list dl {float:none; width:100%; padding-left:38%; padding-top:0; margin-top:60px; margin-left:0; height:190px }
.act-list dl:first-child {margin-top:0}
.act-list dl dt {margin-top:-5px}
.act-list dl dd {font-size:15px}
.act-list dl dd br {display:none}
.act-list dl .img {position:absolute; width:34.2%; height:100%; top:5px}

.techfull ul.round-ver {margin-top:-60px}
.techfull ul.round-ver li {position:relative; width:40%; height:250px; margin-top:60px; margin-left:5%; margin-right:5%; box-sizing:border-box}
.techfull ul.round-ver li span.txt {width:100%; text-align:left; margin:25px auto 0}
.techfull ul.round-ver li span.txt br {display:none}
.techfull ul.round-ver li .line {position:absolute; z-index:1; top:87px; width:100%; border-top:1px solid #ccc}

.tit-dl.quality dt br {display:none}
.certificate.type1 .text-area, .certificate.type3 .text-area {padding-right:38%; box-sizing:border-box}
.text-area br {display:none}
.certificate.type1 .img img, .certificate.type2 .img img, .certificate.type3 .img img, .certificate.type4 .img img {margin:0 auto 20px }/* 2016.07.06 수정 */
.certificate.type1 .img {top:15%}
.certificate.type2 .img {top:15%}
.certificate.type2 .text-area {margin-left:0; width:100%;}
.certificate.type2 ul li span:last-child {width:80% }
.certificate.type4 .text-area {margin-left:0; width:100%;}/* 2016.07.06 추가 */
.certificate.type4 ul li span:last-child {width:80% }/* 2016.07.06 추가 */
.certificate.type1 .img {right:0;}
.certificate.type2 .img {left:0;}
.certificate.type3 .img {right:0;}
.certificate.type4 .img {left:0;}/* 2016.07.06 추가 */
}


@media all and (max-width:980px) {
.certificate ul li span:last-child {width:65% }
.certificate.type2 .text-area, .certificate.type4 .text-area {width:100%;}/* 2016.07.06 수정 */
}
@media all and (max-width:950px) {
.certificate.type2 ul li span:last-child, .certificate.type4 ul li span:last-child {width:70%}/* 2016.07.06 수정 */
}

@media all and (max-width:880px) {
.tit-dl dt br {display:none}
}

@media all and (max-width:850px) {
.certificate.type2 .text-area, .certificate.type4 .text-area {padding-left:45%}/* 2016.07.06 수정 */
.certificate.type1 .text-area, .certificate.type3 .text-area {padding-right:45%}
}
@media all and (max-width:767px) {
.tit-dl {padding:0 15px}
.section-in {padding:0 15px}
.tit-dl dt {font-size:23px; line-height:32px; letter-spacing:-1px;padding-bottom:25px}
.tit-dl dt span {width:60px; }
.tit-dl dd.txt {margin:25px 0 0 2px; font-size:16px; line-height:26px}
.tit-dl .img {width:80%; margin:40px auto 0;}

.tit-dl .img .safety_txt01 {top:6.5%; left:42%}
.tit-dl .img .safety_txt02 {top:31%; left:74.5%}
.tit-dl .img .safety_txt03 {bottom:24.5%; left:74.5%}
.tit-dl .img .safety_txt04 {bottom:-0.8%; left:37%}
.tit-dl .img .safety_txt05 {bottom:24.5%; left:5.5%}
.tit-dl .img .safety_txt06 {top:31%; left:9.7%}

.tit-dl .img.type2 div, .tit-dl .img.type2 span {display:none}

.techfull.safe {margin-top:-133px; height:auto; padding-bottom:74px; }
.techfull.environment {margin-top:-145px; }
.techfull h4 {font-size:20px; margin:0 0 25px 0}
.techfull ul li {font-size:16px; line-height:26px; text-indent:-10px; margin-left:6px}
.act-list dl {padding-left:0; padding-top:215px; margin-top:35px; height:auto }
.act-list dl dt {margin-top:0px; margin-bottom:5px}
.act-list dl dt, .act-list dl dd {font-size:16px}
.act-list dl .img {width:100%;top:0; text-align:center}
.act-list dl dd {margin-top:3px}

.techfull ul.round-ver {margin-top:0px; box-sizing:border-box}
.techfull ul.round-ver li {width:100%; margin-top:35px; margin-left:0; margin-right:0; box-sizing:border-box}
.techfull ul.round-ver li:first-child{margin-top:0}
.techfull ul.round-ver li span.txt {width:100%; text-align:center; margin:10px auto 0}
.techfull ul.round-ver li span.round {height:129px;}
.techfull ul.round-ver li span.round .bratt,
.techfull ul.round-ver li span.round br {display:none}
.techfull ul.round-ver li span.round.property {height:62px}
.techfull ul.round-ver li span.round .tit {height:29px;}
.techfull ul.round-ver li span.txt {line-height:26px; margin-top:25px; width:80%}
.techfull ul.round-ver li .line {position:absolute; z-index:1; top:50px; width:100%; border-top:1px solid #ccc}
.techfull ul.round-ver li {height:180px}

.tit-dl.quality dt br {display:block}
.techfull.quality ul li strong {text-indent:-9px; margin-left:10px }
.certificate {margin-left:15px; margin-right:15px; padding-top:0; margin-top:50px; border-top:0}
.certificate .img  {position:relative; top:0 !important; left:0; margin:40px auto 0; text-align:center}
.certificate .img img {width:auto !important; margin:0 auto}
.certificate .img a {display:none}
.certificate dl, .certificate ul {width:100%; }
.certificate.type2 dl, .certificate.type2 ul,
.certificate.type4 dl, .certificate.type4 ul {padding-left:0}/* 2016.07.06 수정 */
.certificate h4 {font-size:23px; margin-bottom:17px}
.certificate p {font-size:16px; line-height:26px; color:#333;}
.certificate dl dt {font-size:20px; margin-top:27px;}
.certificate dl dt:first-child {margin-top:0}
.certificate dl dd {font-size:16px; line-height:26px;}
.certificate ul {margin-top:7px}
.certificate ul li {font-size:13px; line-height:22px;}
.certificate .text-area {width:100%;}
.certificate ul li span:first-child {width:74px}
.certificate ul li span:last-child {width:79%}
.certificate.type2 ul li span:last-child, .certificate.type4 ul li span:last-child {width:70%}/* 2016.07.06 수정 */
.certificate.type2 .text-area, .certificate.type4 .text-area {padding-left:0; width:100%; margin-left:0}/* 2016.07.06 수정 */
.certificate.type1 .text-area, .certificate.type3 .text-area {padding-right:0; width:100%; }
.certificate.type2 ul li span:first-child, .certificate.type4 ul li span:first-child {width:74px;}/* 2016.07.06 수정 */

    
}

@media all and (max-width:400px) {
.certificate ul li span:last-child {width:75%}
.techfull ul.round-ver li {height:200px}
}

@media all and (max-width:370px) {
.tit-dl dt br {display:none;}
.certificate ul li span:last-child {width:70%}
}

@media all and (max-width:350px) {
.techfull ul.round-ver li span.round .tit {font-size:15px}
.techfull ul.round-ver li span.txt {font-size:14px}
}