/* 메인아이콘 */
.mainTitle {font-size:30px; font-weight:600; font-family:"Metropolis-Bold", "Noto Sans KR"; text-align:center;}
.iconWrapT {position:relative; width:100%; height:550px; padding:50px 0; z-index:-1;}

/* 중앙 라인 */
.process-list {width:95%; /* width:1500px; */ margin:90px auto 0; }
/* .process-list ul {positiokn:relative; } */
.process-line {position:absolute; top:300px; left:0; display:block; content:''; width:100%; height:1px; background-color:#ddd;}
.process-line.m-line {display:none;}

/* li 영역 */
.process-list ul li {position:relative; width:20%; float:left; bottom:-6px; left:0px; min-height:110px; text-align:center; }

/* 아이콘 */
.process-list ul li .icon {position:absolute; display:inline-block; width:100%; height:85px; background:url(/insert/img/icon_bg.png) no-repeat center bottom; background-size:75px auto; text-align:center; top:0; left:0;}
.process-list ul li .icon img {display:inline-block; height:80px; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

/* dot */
.process-list ul li .dot {display:block; position:absolute; top:114px; margin-top:; left:50%; width:11px; height:11px; margin-left:-6px; background-color:#ddd; border-radius:50%; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.process-list ul li .dot:before {position: absolute; top:0px; margin-top:-8.5px; left:50%; margin-left:-13.5px; display:block; content: ''; width:27px; height:27px; border: 2px solid #22b1bc; border-radius:50%; opacity: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

/* 텍스트 */
.process-list ul li strong {position:absolute; display:inline-block; width:100%; text-align:center; font-weight:700; top:160px; left:0; padding:0 35px; color:#222; font-size:18px; letter-spacing:-0.5px;}
.process-list ul li strong em {display:block; margin-top:15px; width:100%; font-size:13px; font-weight:400; line-height:1.4;}
.process-list .en li strong {font-size:17px;}

/* active */
.process-list ul li.active .icon img {-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-20px);}
.process-list ul li.active .dot {background-color:#13ae67;}
.process-list ul li.active .dot:before {opacity: 1;}



/* 
@media only screen and (max-width: 1300px) {
	.mainTitle {font-size:35px;}
	.iconWrapT {height:750px; }

	.process-list {width:95%; margin:100px auto 0;}
	.process-line {top:456px;}

	.process-list ul li {min-height:100px; height:100px;}

	.process-list ul li .icon {height:90px; background-size:80px auto;}
	.process-list ul li .icon img {height:75px;}

	.process-list ul li .dot {top:116px; width:11px; height:11px; margin-left:-6px;}
	.process-list ul li .dot:before {margin-top:-8.5px; margin-left:-13.5px; width:27px; height:27px;}
	.process-list ul li strong {top:160px; padding:0 30px; font-size:20px; letter-spacing:-1.5px;}
	.process-list ul li strong em {margin-top:20px; font-size:14px;}
} */

@media only screen and (max-width: 960px) {
	.process-list ul li strong {padding:0 17px;}
}


@media only screen and (max-width: 768px) {
	.mainTitle {font-size:30px;}
	.iconWrapT {height:650px; padding:;}

	.process-list {margin:80px auto 0;}
	.process-line {top:270px;}
	

	.process-list ul li {min-height:90px; height:90px;}

	.process-list ul li .icon {height:70px; background-size:70px auto;}
	.process-list ul li .icon img {height:60px;}

	.process-list ul li .dot {top:100px; width:9px; height:9px; margin-left:-5px;}
	.process-list ul li .dot:before {margin-top:-6px; margin-left:-10.5px; width:21px; height:21px;}
	.process-list ul li strong {top:140px; padding:0 17px; font-size:17px;}
	.process-list ul li strong em {margin-top:10px; font-size:12px;}


}

@media only screen and (max-width: 640px) {
	.mainTitle {font-size:27px;}
	.iconWrapT {height:850px;}

	.process-line {top:267px;}
	.process-line.m-line{display:block; top:auto; bottom:282px; }
	.process-list ul li {width:33.3%; min-height:300px; height:100px;}
	.process-list ul li:nth-child(6)~*{margin-top:85px;}
}


@media only screen and (max-width: 560px) {
	.mainTitle {font-size:23px;}
	.iconWrapT {height:790px;}

	.process-line {top:245px;}
	.process-line.m-line{display:block; top:auto; bottom:244px; }

	.process-list ul li {min-height:300px;}
	.process-list ul li .icon {height:60px; background-size:60px auto;}
	.process-list ul li .icon img {height:50px;}

	.process-list ul li .dot {top:82px;}
	.process-list ul li strong {top:120px;}
}

@media only screen and (max-width: 400px) {
	.mainTitle {padding:0 5%; font-size:23px;}
	.iconWrapT {padding:80px 5%;}

	.process-line {top:295px;}
	.process-line.m-line{display:block; top:auto; bottom:193px; }

	.process-list {margin:60px auto 0;}
	.process-list ul li strong {top:110px; padding:0 10px; font-size:15px;}
	.process-list ul li strong em {font-size:11px;}

}


/* 메인 키보드 */
.keyWrap {position:relative; width:100%; height:642px; background:#f2f2f2; }
.keyWrap .fido {position:absolute; width:100px; height:39px; top:55px; right:60px; background:url(/insert/img/icon_fido.png); background-size:100%;}
.keyWrap .notebook {position:absolute; width:875px; height:642px; background:url(/insert/img/notebook.png) no-repeat; background-size:100%;}
.keyWrap .notebook .light {position:absolute; top:188px; left:648px; width:19px; height:31px; background:url(/insert/img/light.gif) no-repeat; background-size:100%;}
.keyWrap .text {position:absolute; top:190px; left:680px; width:640px; height:180px; background:url(/insert/img/icon_text.png); background-size:100%;}
.keyWrap .usb01 {position:absolute; top:10px; right:120px; width:290px; height:229px; background:url(/insert/img/usb01.png); background-size:100%; z-index:1;}
.keyWrap .usb02 {position:absolute; top:470px; right:0; width:242px; height:227px; background:url(/insert/img/usb02.png); background-size:100%; z-index:1;}
.keyWrap .dec {position:absolute; bottom:0; right:0; width:55%; padding:55px 120px 50px 55px; background:#fff; }
.keyWrap .dec strong {font-size:28px; font-weight:700; }
.keyWrap .dec .content {padding:15px 0 0 0; font-size:14px; font-weight:400; line-height:1.4;} 


@media only screen and (max-width: 1600px) {
	.keyWrap .text {top:190px; left:680px; width:640px; height:180px;}
	/* .keyWrap .usb01 {top:22px; width:422px; height:333px;}
	.keyWrap .usb02 {top:470px; width:352px; height:330px;} */
	.keyWrap .dec {width:55%; padding:65px 160px 50px 75px;}
	.keyWrap .dec strong {font-size:30px;}
	.keyWrap .dec .content {font-size:16px;}
}


@media only screen and (max-width: 1300px) {
	.keyWrap .notebook {left:-80px;}
	.keyWrap .text {top:230px; left:602px; width:490px; height:138px;}
	.keyWrap .usb01 {top:22px; width:211px; height:166px;}
	.keyWrap .usb02 {width:176px; height:165px;}
	.keyWrap .dec {width:55%; padding:65px 160px 50px 75px;}
	.keyWrap .dec strong {font-size:28px;}
	.keyWrap .dec .content {font-size:15px;}
}

@media only screen and (max-width: 1100px) {
	.keyWrap .text {width:420px; height:118px;}
}


@media only screen and (max-width: 1000px) {
	.keyWrap {height:550px;}
	.keyWrap .fido {top:45px; right:45px; width:100px; height:39px;}
	.keyWrap .notebook {left:-350px; height:550px;}
	.keyWrap .text {left:340px; width:375px; height:106px;}
	.keyWrap .usb01 {right:180px;}
	.keyWrap .usb02 {top:380px;}
	.keyWrap .dec {width:60%; padding:55px 120px 50px 55px;}
	.keyWrap .dec strong {font-size:24px;}
	.keyWrap .dec .content {font-size:14px;}
}

@media only screen and (max-width: 768px) {
	.keyWrap .text {top:210px; left:330px; width:328px; height:92px;}
	.keyWrap .usb01 {top:22px; width:211px; height:166px;}
	.keyWrap .usb02 {top:420px; width:176px; height:165px;}
	.keyWrap .dec {width:55%; padding:45px 60px 40px 45px;}
	.keyWrap .dec strong {font-size:22px;}
	.keyWrap .dec .content {font-size:13px;}
}

@media only screen and (max-width: 640px) {
	.keyWrap .fido {top:30px; right:30px;}
	.keyWrap .text {top:150px; left:300px; width:250px; height:70px;}
	.keyWrap .usb01 {top:40px; right:100px;}
	.keyWrap .usb02 {top:390px;}
}


@media only screen and (max-width: 540px) {
	.keyWrap {margin:60px 0 0 0;}
	.keyWrap .notebook {left:-470px;}
	.keyWrap .text {left:180px; }
	.keyWrap .usb01 {top:22px; right:120px; width:237px; height:187px;}
	.keyWrap .usb02 {width:242px; height:227px;}
	.keyWrap .dec {width:100%; box-shadow:0 20px 30px rgba(0,0,0,.03);}
}

@media only screen and (max-width: 500px) {
	.keyWrap {height:500px;}
	.keyWrap .notebook {left:-350px; width:656px; height:481px; }
	.keyWrap .notebook .light {top:141px; left:485px; width:14px; height:23px; background-size:100%; }
	.keyWrap .fido {top:20px; right:20px; width:90px; height:35px;}
	.keyWrap .text {top:190px; left:150px;}
	.keyWrap .usb01 {top:60px; right:100px; width:184px; height:145px;}
	.keyWrap .usb02 {width:163px; height:152px;}
}

@media only screen and (max-width: 400px) {
	.keyWrap .notebook {left:-375px;} 
	.keyWrap .text {top:170px; left:140px; width:224px; height:63px;}
	.keyWrap .usb01 {top:40px; right:100px;}
	.keyWrap .usb02 {top:370px;}
}




/* 메인 youtube */
.uWrap {position:relative; width:100%; padding:180px 0 150px 0; overflow:hidden;}
.uWrap .uBg {position:absolute; bottom:0; width:100%; height:430px; background:#f8f8f8; z-index:-1;}
.uWrap .usb03 {position:absolute; top:230px; right:0; width:300px; height:163px; background:url(/insert/img/usb03.png) no-repeat; background-size:100%; z-index:1;}
.uWrap .uInner {width:85%; margin:0 auto;}
.uWrap .uInner ul {position:relative; float:left; width:50%; box-shadow:30px 40px 40px rgba(0,0,0,.17);}
.uWrap .uInner .left {height:350px; background:url(/insert/img/you01.jpg) no-repeat center center; background-size:110% auto; }
.uWrap .uInner .left .text {position:absolute; top:230px; width:100%; text-align:center; font-size:16px; color:#fff; z-index:1;}
.uWrap .uInner strong {font-size:20px; font-weight:600; }
.uWrap .uInner .left .over {position:absolute; top:0; left:0; width:100%; height:100%; background:url(/insert/img/btn_play.png) no-repeat center center rgba(0,0,0,1); background-size:auto, auto; opacity:0.5;}
.uWrap .uInner .right {height:450px; background:url(/insert/img/you02.jpg) no-repeat center center; background-size:110% auto; }
.uWrap .uInner .right .text {position:absolute; top:280px; width:100%; text-align:center; font-size:16px; color:#fff; z-index:1;}
.uWrap .uInner .right .over {position:absolute; top:0; left:0; width:100%; height:100%; background:url(/insert/img/btn_play.png) no-repeat center center rgba(43,182,115,1); background-size:auto, auto; opacity:0.75;}
.uWrap .uInner .left:hover, .uWrap .uInner .right:hover {background-size:120% auto;}
.uWrap .uInner .left:hover > .over {}
.uWrap .goldLogo {position:absolute; top:833px; left:50%; margin-left:-18%; width:100px; height:28px; background:url(/insert/img/icon_logo.png) no-repeat; background-size:100%;}




@media only screen and (max-width: 768px) {
	.uWrap .usb03 {top:250px; width:250px; height:136px; left:auto; right:-2%;}
	.uWrap .uInner .left {height:300px;}
	.uWrap .uInner .left .text {top:200px; font-size:14px;}
	.uWrap .uInner strong {font-size:20px;}
	.uWrap .uInner .right {height:400px;}
	.uWrap .uInner .right .text {top:250px; font-size:14px;}
	.uWrap .goldLogo {top:520px; margin-left:-17%;}
}

@media only screen and (max-width: 680px) {
	.uWrap .uBg {height:330px;} 
	.uWrap .uInner .left {height:250px;}
	.uWrap .uInner .left .text {top:165px; font-size:13px;}
	.uWrap .uInner .left .over {background-size:50px auto, auto;}
	.uWrap .uInner strong {font-size:18px;}
	.uWrap .uInner .right {height:300px;}
	.uWrap .uInner .right .text {top:190px; font-size:13px;}
	.uWrap .uInner .right .over {background-size:50px auto, auto;}
	.uWrap .goldLogo {top:460px; margin-left:-20%;}
}

@media only screen and (max-width: 520px) {
	.uWrap {padding:100px 0 100px 0;}
	.uWrap .usb03 {top:180px; width:200px; height:109px;}
	.uWrap .uBg {height:250px;} 
	.uWrap .uInner .left {height:180px;}
	.uWrap .uInner .left .text {top:115px; font-size:13px;}
	.uWrap .uInner .left .over {background-size:40px auto, auto;}
	.uWrap .uInner .right {height:230px;}
	.uWrap .uInner .right .text {top:140px; font-size:13px;}
	.uWrap .uInner .right .over {background-size:40px auto, auto;}
	.uWrap .goldLogo {top:310px; margin-left:-21%; width:80px; height:23px;}
}

@media only screen and (max-width: 400px) {
	.uWrap .usb03 {top:180px; right:-3%; width:180px; height:98px;}
	.uWrap .uInner {width:90%; }
	.uWrap .goldLogo {margin-left:-26%;}
}


.uWrap .cirBig {
	position:absolute; top:-325px; left:-150px; 
	width:649px; height:649px; 
	background:url(/insert/img/circle_big.png) no-repeat center center; 
	background-size:100%; 
	-webkit-animation: lot 13s linear infinite;
    animation: lot 35s linear infinite;
}
.uWrap .cirMid {
	position:absolute; top:117px; right:183px; 
	width:413px; height:412px; 
	background:url(/insert/img/circle_mid.png) no-repeat center center; 
	background-size:100%; 
	-webkit-animation: lot 13s linear infinite;
    animation: lot 30s linear infinite;
}
.uWrap .cirSmall {
	position:absolute; top:670px; left:280px; 
	width:200px; height:200px; 
	background:url(/insert/img/circle_small.png) no-repeat center center; 
	background-size:100%; 
	-webkit-animation: lot 13s linear infinite;
    animation: lot 25s linear infinite;
}

@media only screen and (max-width: 1200px) {
	.uWrap .cirBig {width:550px; height:550px;}
	.uWrap .cirMid {top:80px; right:10px; width:350px; height:350px;}
	.uWrap .cirSmall {top:540px; left:30px; width:130px; height:130px; }
}

@media only screen and (max-width: 960px) {
	.uWrap .cirSmall {top:460px;}
}

@media only screen and (max-width: 768px) {
	.uWrap .cirBig {width:450px; height:450px;}
	.uWrap .cirMid {top:80px; right:10px; width:280px; height:280px;}
	.uWrap .cirSmall {top:400px; left:10px; width:130px; height:130px; }
}

@media only screen and (max-width: 520px) {
	.uWrap .cirBig {top:-260px; left:-100px; width:330px; height:330px;}
	.uWrap .cirMid {top:20px; right:-10px; width:200px; height:200px;}
	.uWrap .cirSmall {top:200px; left:10px; width:120px; height:120px; }
}


@-webkit-keyframes lot /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
@keyframes lot {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}



/* 메인 수치 */
.numWrap {position:relative; width:100%; height:550px; background:url(/insert/img/num_bg.jpg) no-repeat center center; background-attachment:fixed; background-size:100% auto; padding:100px 0 0 0; color:#fff; }
.numWrap ul {width:90%; margin:90px auto 0;  text-align:center;}
.numWrap ul li {float:left; width:20%;}
.numWrap .bigNum {font-size:47px; font-weight:600;}
.numWrap .midTxt {font-size:20px; font-weight:400;}
.numWrap .smTxt {font-size:14px; padding:15px 20px 0 20px; line-height:1.4;}
.numWrap .ssmall {position:absolute; width:100%; left:0; bottom:50px; font-size:13px; text-align:center;}





@media only screen and (max-width: 1000px) {
	.numWrap {height:500px; background-size:160% auto; padding:90px 0 0 0;}
	.numWrap ul {margin:70px auto 0;}
	.numWrap .bigNum {font-size:45px;}
	.numWrap .midTxt {font-size:20px;}
	.numWrap .smTxt {font-size:14px; padding:15px 20px 0 20px;}
	.numWrap .ssmall {font-size:12px;}
}

@media only screen and (max-width: 820px) {
	.numWrap {background-size:200% auto;}
}

@media only screen and (max-width: 768px) {
	.numWrap {height:600px; }
	.numWrap ul {margin:60px auto 0;}
	.numWrap ul li {width:33.3%; height:160px; }
	.numWrap ul li.bottom {width:50%;}
	.numWrap ul li.bottom .smTxt {padding:15px 50px 0 50px;}
	.numWrap .bigNum {font-size:43px;}
	.numWrap .smTxt {font-size:13px; padding:15px 25px 0 25px;}
	.numWrap .ssmall {bottom:30px; font-size:11px;}
}

@media only screen and (max-width: 520px) {
	.numWrap {background-size:auto 100%; padding:90px 10% 0 10%; }
	.numWrap .bigNum {font-size:38px;}
	.numWrap ul li.bottom .smTxt {padding:15px 20px 0 20px;}
	.numWrap .smTxt {font-size:13px; padding:15px 15px 0 15px;}
}

@media only screen and (max-width: 480px) {
	.numWrap .bigNum {font-size:35px;}
	.numWrap ul {width:100%;}
	.numWrap ul li.bottom .smTxt {padding:15px 15px 0 15px;}
	.numWrap .smTxt {font-size:13px; padding:15px 10px 0 10px;}
}



/* 요건 */
.nowWrap {width:100%; padding:150px 0 0 0;}
.nowInner {width:90%; margin:0 auto; overflow:hidden;}
.nowInner .left {float:left; width:30%; padding:0 7% 0 0; text-align:left;}
.nowInner .right {float:right; width:70%;}
.nowInner .right ul {position:relative; float:left; width:50%; min-height:160px; margin:0 0 45px 0; padding:25px 25px 0 25px;}
.nowInner .right ul .title {font-size:17px; font-weight:600; letter-spacing:0;}
.nowInner .right .bigNum {position:absolute; top:-5px; left:0; font-size:60px; font-weight:700; font-family:"Metropolis-ExtraBold"; color:rgba(0,0,0,.05); z-index:-1;}
.nowInner .right ul .content {font-size:14px; font-weight:400; padding:20px 20px 0 0; line-height:1.4;}


@media only screen and (max-width: 1500px) {
	.nowInner .right ul .title {font-size:18px;}
	.nowInner .right ul .content {font-size:14px;}
}

/* @media only screen and (max-width: 1200px) {
	.nowInner .right ul {min-height:170px;}
	.nowInner .right ul .title {font-size:18px;}
	.nowInner .right ul .content {font-size:13px;}
	.nowInner .right .bigNum {font-size:65px;}
}

@media only screen and (max-width: 960px) {
	.nowInner .right ul {min-height:185px;}
} 

@media only screen and (max-width: 1400px) {
	.nowInner .right ul {min-height:195px;}
	.nowInner .right .bigNum {font-size:60px;}
}*/

@media only screen and (max-width: 1400px) {
	.nowInner .right ul {min-height:210px;}
	.nowInner .right .bigNum {font-size:60px;}
	.nowInner .right ul .title {font-size:17px;}
	.nowInner .right ul .content {font-size:13px;}
}

@media only screen and (max-width: 1000px) {
	.nowWrap {padding:90px 0;}
	.nowInner .left {float:none; width:100%; padding:0 0 70px 0; text-align:center;}
	.nowInner .right {float:none; width:90%; margin:0 auto;}
	.nowInner .right ul {min-height:180px;}
	.nowInner .right .bigNum {font-size:60px;}
	.nowInner .right ul .title {font-size:19px;}
}

@media only screen and (max-width: 620px) {
	.nowInner .right {float:right; width:95%; margin:0;}
	.nowInner .right .bigNum {top:-5px; font-size:50px;}
	.nowInner .right ul {min-height:160px; padding:15px 25px 0 15px;}
	.nowInner .right ul .title {font-size:17px;}
	.nowInner .right ul .content {font-size:12px;}
}

@media only screen and (max-width: 520px) {
	.nowInner .right {width:100%;}
	.nowInner .right ul {padding:15px 10px 0 10px;}
}

@media only screen and (max-width: 460px) {
	.nowInner .left {padding:0 0 40px 0;}
	.nowInner .right {float:none; width:80%; margin:0 auto;}
	.nowInner .right ul {width:100%; min-height:auto; padding:15px 0 0 15px;}
}


/* 파트너 */
.partWrapT {width:100%; background:#f3f3f3; margin:0 0 120px 0; padding:100px 10%; }
.partWrapT ul {width:100%; margin:80px auto 0; overflow:hidden;}
.partWrapT ul li {float:left; width:25%; height:60px; background-position:center top; background-repeat:no-repeat; background-size:auto 120px; }
.partWrapT ul li:hover {background-position:center bottom;}

.p01 {background-image:url(/insert/img/part01.png);}
.p02 {background-image:url(/insert/img/part02.png);}
.p03 {background-image:url(/insert/img/part03.png);}
.p04 {background-image:url(/insert/img/part04.png);}
.p05 {background-image:url(/insert/img/part05.png);}
.p06 {background-image:url(/insert/img/part06.png);}
.p07 {background-image:url(/insert/img/part07.png);}
.p08 {background-image:url(/insert/img/part08.png);}
.p09 {background-image:url(/insert/img/part09.png);}
.p10 {background-image:url(/insert/img/part10.png);}
.p11 {background-image:url(/insert/img/part11.png);}
.p12 {background-image:url(/insert/img/part12.png);}
.p13 {background-image:url(/insert/img/part13.png);}



@media only screen and (max-width: 640px) {
	.partWrapT {padding:90px 20%;}
	.partWrapT ul {margin:40px auto 0;}
	.partWrapT ul li {height:50px; background-size:auto 100px;}
}


@media only screen and (max-width: 520px) {
	.partWrapT {padding:90px 10%;}
	.partWrapT ul li {width:33.3%; height:40px; background-size:auto 80px;}
}


/* product */
.width1300 {width:100%; margin:100px auto; word-break:break-all; overflow:hidden;}



@media all and (max-width:960px) {
	.width1300 {margin:80px auto;}
}


@media all and (max-width:640px) {
	.width1300 {margin:70px auto 50px auto;}
}

@media all and (max-width:480px) {
	.width1300 {margin:60px auto 40px auto;}
}



.iconWrap2 {overflow:hidden; margin:50px auto 150px auto !important;}
.iconWrap2 ul {float:left; width:33.3%; height:460px; padding:40px 3% 0 3%; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
.iconWrap2 ul:nth-child(3n+3) {border-right:0;}
.iconWrap2 ul:nth-child(4) {border-bottom:0;}
.iconWrap2 ul:nth-child(5) {border-bottom:0;}
.iconWrap2 ul:nth-child(6) {border-bottom:0;}

.iconWrap2 ul li {width:100%;  overflow:hidden;}
.iconWrap2 ul li .name {float:left; font-size:17px; font-weight:500; line-height:1.1; display:inline-block;}
.iconWrap2 ul li .cir {float:left; margin:0 12px 0 0; width:38px; height:38px; border-radius:50px; background:#000; color:#fff; font-size:14px; font-weight:600; text-align:center; line-height:38px; display:inline-block;}
.iconWrap2 ul li.cont {height:160px; padding:20px 0 0 5px; font-size:13px; font-weight:300; line-height:1.5;}
.iconWrap2 ul li.icon {height:200px; background-size:auto 100%;}

.picon01 {background:url(/insert/img/picon01.png) no-repeat center center; }
.picon02 {background:url(/insert/img/picon02.png) no-repeat center center;}
.picon03 {background:url(/insert/img/picon03.png) no-repeat center center;}
.picon04 {background:url(/insert/img/picon04.png) no-repeat center center;}
.picon05 {background:url(/insert/img/picon05.png) no-repeat center center;}
.picon06 {background:url(/insert/img/picon06.png) no-repeat center center;}



@media all and (max-width:1300px) {
	.iconWrap2 ul {padding:30px 2% 0 2%;}
}

@media all and (max-width:1200px) {
	.iconWrap2 ul {height:420px;}
	.iconWrap2 ul li .name {font-size:15px;}
	.iconWrap2 ul li .cir {margin:0 10px 0 0; width:34px; height:34px; font-size:13px; line-height:34px;}
	.iconWrap2 ul li.cont {height:170px; font-size:12px;}
	.iconWrap2 ul li.icon {height:170px;}
}

@media all and (max-width:1000px) {
	.iconWrap2 ul {width:50%; padding:20px 3% 0 3%;}
	.iconWrap2 ul:nth-child(2) {border-right:0;}
	.iconWrap2 ul:nth-child(3n+3) {border-right:1px solid #e5e5e5;}
	.iconWrap2 ul:nth-child(4) { border-bottom:1px solid #e5e5e5; border-right:0;}
	.iconWrap2 ul:nth-child(6) { border-right:0;}

	.iconWrap2 ul li.cont {height:145px;}
	
}


@media all and (max-width:620px) {
	.iconWrap2 {width:80%; margin:40px auto 100px auto !important;}
	.iconWrap2 ul {width:100%; height:260px; padding:30px 3% 0 3%; border-right:0;}
	.iconWrap2 ul li .name {font-size:16px;}
	.iconWrap2 ul li.cont {float:right; width:55%; padding:30px 0 0 0;}
	.iconWrap2 ul li.icon {float:left; width:45%; background-size:auto 90%;}

	.iconWrap2 ul:nth-child(5) { border-bottom:1px solid #e5e5e5;}
	.iconWrap2 ul:nth-child(3n+3) {border-right:0px solid #e5e5e5;}
}

@media all and (max-width:520px) {
	.iconWrap2 {width:90%;}
	.iconWrap2 ul {height:250px;}
	.iconWrap2 ul li.cont {height:100%;}
	.iconWrap2 ul li.icon {background-size:auto 80%;}
}

@media all and (max-width:480px) {
	.iconWrap2 {width:95%; margin:20px auto 100px auto !important;}
	.iconWrap2 ul li.cont {padding:20px 0 0 0;}
}


/* 제품소개 */
.proWrap {position:relative; width:100%; height:575px;}
.proWrap .inner1 {position:absolute; right:0; width:100%; height:500px; overflow:hidden;}
.proWrap .menu {float:left; width:17%; height:575px; background:#fff; border-left:3px solid #e6e6e6; }
.proWrap .menu li {position:relative; height:74px; line-height:74px; padding:0 0 0 25%; font-size:20px; font-weight:300; color:#b8b8b8; transition: 0.5s ease; -moz-transition: 0.5s ease; -webkit-transition: 0.5s ease;  -o-transition: 0.5s ease;}
.proWrap .menu li a {display:block;}
.proWrap .menu li.on {font-size:25px; color:#000; font-weight:600; font-family:"Metropolis-Bold"; }
.proWrap .menu li:hover {font-size:30px; color:#000; font-weight:600; font-family:"Metropolis-Bold";}
.proWrap .menu li:before {content:""; position:absolute; width:0px; left:-3px; top:0; bottom:100%;  width:3px; border-radius:3.5px; background:#d22027; transition:0.3s; -webkit-transition:0.3s;}
.proWrap .menu li.on:before, .proWrap .menu li:hover:before {width:100%; bottom:0; width:3px; background:#d22027;}

@media all and (max-width:900px) {
	.proWrap {width:95%; margin:0 auto;}
}

@media all and (max-width:860px) {
	.proWrap {height:400px;}
	.proWrap .inner1 {height:400px;}
	.proWrap .menu {width:20%;}
	.proWrap .menu li {height:65px; line-height:65px;}
}

@media all and (max-width:690px) {
	.proWrap {height:700px;}
	.proWrap .inner1 {height:700px;}
	.proWrap .menu {width:25%; height:700px;}
}

@media all and (max-width:520px) {
	.proWrap {height:650px;}
	.proWrap .inner1 {height:650px;}
	.proWrap .menu {width:25%; height:650px;}
	.proWrap .menu li {font-size:16px;}
	.proWrap .menu li.on {font-size:18px;}
}

@media all and (max-width:460px) {
	.proWrap {height:560px;}
	.proWrap .inner1 {height:560px;}
	.proWrap .menu { height:560px;}
}



.proWrap .cont {float:left; width:83%; height:500px; background:#f7f7f7; }
.proWrap .contWrap {position:relative; width:95%; overflow:hidden;}
.proWrap .cont .pic {float:left; width:50%; margin:90px 0 0 0; text-align:center;}
.proWrap .cont .pic img {width:77%; height:auto;}
.proWrap .cont .con {float:left; width:50%;}
.proWrap .cont .name {padding:100px 0 0 0; font-size:35px; letter-spacing:-1.2px;}
.proWrap .cont .name strong {font-weight:600; font-family:"Metropolis-Bold"; letter-spacing:-1.5px;}
.proWrap .cont .textT {padding:20px 0; font-size:14px; font-weight:300; line-height:1.5;}
.proWrap .cont .textB {background:#fff; padding:20px 30px; font-weight:400; font-size:13px; }
.proWrap .cont .btn {margin:10px 0 0 0; background:#464646; padding:7px 25px 5px 25px; color:#fff; font-weight:500; font-size:14px; display:inline-block; cursor:pointer; }
.mask {height:575px; overflow:hidden;}
#section_1, #section_2, #section_3, #section_4, #section_5, #section_6 {top:0; margin:0; height:500px; clear:both; }




@media all and (max-width:860px) {
	.proWrap .cont {width:80%; height:400px;}
	.proWrap .cont .name {padding:60px 0 0 0; font-size:30px;}
	.proWrap .cont .textT {font-size:13px;}
	.proWrap .cont .textB {padding:15px 20px; font-size:13px;}
	.proWrap .cont .btn {padding:7px 15px 5px 15px; font-size:12px;}

	#section_1, #section_2, #section_3, #section_4, #section_5, #section_6 {height:400px; }
}


@media all and (max-width:690px) {
	.proWrap .cont {width:75%; height:700px;}
	.proWrap .contWrap {width:100%;}
	.proWrap .cont .pic {float:none; width:70%; margin:0 auto 0; padding:65px 0 0 0;}
	.proWrap .cont .con {float:none; width:80%; margin:0 auto; }
	.proWrap .cont .name {padding:30px 0 0 0;}
	
	#section_1, #section_2, #section_3, #section_4, #section_5, #section_6 {height:700px; }
}

@media all and (max-width:520px) {
	.proWrap .cont {height:650px;}
	.proWrap .cont .pic {width:80%;}
	.proWrap .cont .name {text-align:center;}
	#section_1, #section_2, #section_3, #section_4, #section_5, #section_6 {height:650px; }
}

@media all and (max-width:460px) {
	.proWrap .cont {height:560px;}
	.proWrap .cont .pic {padding:45px 0 0 0;}
	.proWrap .cont .name {font-size:25px;}
	.proWrap .cont .textT {padding:15px 0; font-size:12px;} 
	.proWrap .cont .textB {padding:7px 12px 3px 12px; font-size:11px;}
	#section_1, #section_2, #section_3, #section_4, #section_5, #section_6 {height:560px; }
}


/* 제품라인업 */
.lineOver {position:relative; width:100%; margin:30px auto 150px auto; overflow-x:auto;}
.lineOver .hand {position:absolute; top:0; left:0; width:100%; height:100%; background:url(/insert/img/scroll_hand.png) center 20% no-repeat rgba(0,0,0,.6); z-index:1; display:none;}
.lineWrap {width:100%; margin:0 auto; text-align:center; border-top:3px solid #000; z-index:-1;}
.lineWrap .lTop {border-bottom:1px solid #000; height:152px; z-index:-1;}
.lineWrap .lTop .th {position:relative;  float:left; width:14.33%; height:152px; padding:23px 0 0 0; font-size:16px; font-weight:600; border-left:1px solid #e5e5e5; } 
.lineWrap .lTop .th img {cursor:pointer;}
.lineWrap .lTop .th .zoom {position:absolute; top:100%; left:50%; margin-left:-225px; display:none;}
.lineWrap .lTop .th:hover .zoom {display:block; box-shadow:10px 15px 20px rgba(0,0,0,.05); z-index:3;}
.lineWrap .lTop .thN {float:left; width:14%; height:152px; font-size:16px; font-weight:600; line-height:152px; }
.lineWrap .lBottom {border-bottom:1px solid #000; }
.lineWrap .lBottom .thN {background:#fbfbfb; width:14%; font-size:14px; font-weight:600; border-left:0;}
.lineWrap .lBottom ul {border-bottom:1px solid #e5e5e5; overflow:hidden;}
.lineWrap .lBottom li {float:left; width:14.33%; padding:20px 0; border-left:1px solid #e5e5e5; font-size:14px;}

.borL0 {border-left:0;}
.borR0 {border-right:0;}
.borB0 {border-bottom:0;}
.borT0 {border-top:0;}



@media all and (max-width:1000px) {
	.lineOver {width:95%; height:auto; margin:30px auto 50px auto;}
	.lineOver .hand {display:block; }
	.lineOver:hover {position:inherit;}
	.lineOver:hover .hand {background:none;}
	.lineWrap {width:1200px; margin:0 0 0 0;}
}

@media all and (max-width:640px) {
	.lineOver .hand {background-size:180px auto;}
}


.innerHtml {display:none;}
#mask22 {position:fixed; overflow:hidden; z-index:9000; top:0; left:0; width:100%; height:100%; background:#000; text-align:center; display:none; } 
#pop {display:none; position:fixed; top:50% !important; left:50% !important; overflow:hidden; padding:10px; transform:translate(-50%, -50%); z-index:9999; background:#fff; border-radius:7px; text-align:center; }
/* #pop {display:none; overflow:hidden; padding:10px; position:absolute; margin:0 auto; z-index:9999; background:#fff; border-radius:7px; text-align:center; } */
#pop1 {display:none; overflow:hidden; padding:10px; position:absolute; margin:0 auto; z-index:9999; background:#fff; border-radius:7px; text-align:center; }

iframe.i500 {width:500px; height:500px;}
.size450 {width:450px; height:450px;}

@media all and (max-width:500px) {
	iframe.i500 {width:100%; height:auto; height:500px;}
}

@media all and (max-width:450px) {
	#pop img {width:100%; height:auto;}
}

.close-button {
	float: right;
	width: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
	font-size:0;
	background:url(/img/icon_close.png) no-repeat center center;
}