@charset utf-8;

body.open{overflow:hidden; onContextmenu:return false; ondragstart:return false; onSelectstart:return false;}

#header .gnb .gnbMenu .oneD > a  {height:44px;}
#header .gnb .gnbMenu .twoD {height:285px;}

/* topImage */
/* #topImage {background-image:linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url('/images/company/twi001t2179418.jpg');} */
#topImage {background:url('/images/solutions/sub_top_img_sol.jpg')no-repeat center center; background-size:cover;}

/* contents */

/*layout*/
#contents {width:100%;}
.contentsW {width:1200px; margin:0 auto; text-align:center; padding-bottom:80px;}
#contents .contentsTit {padding:90px 0; margin:0 auto;}
#contents .contentsTit .title {margin-bottom:40px; font-size:35px; font-weight:bold;}
#contents .contentsTit .titText {font-size:18px;}

/*contents1*/
.contentsW:first-child {padding-bottom:0;}
.contentsW:first-child .titText {width:60%; margin:0 auto;}

/* solutions toggle : accordion - box design
.list-con3 > ul {overflow:hidden;-ms-display:flex;display:flex;flex-wrap:wrap;}
.list-con3 > ul > li {counter-increment:num;overflow:hidden;position:relative;float:left;width:calc(18% + 2px);margin:0 -1px;height:620px;padding:40px 41px 0;border:1px solid #e6e6e6;background:#fff;}
.list-con3 > ul > li:nth-child(1) {margin-left:0;}

.list-con3 > ul > li .title {display:block; font-size:20px; line-height:580px; text-align:center; font-weight:normal;}
.list-con3 > ul > li .title ~ * {position:relative; opacity:0; display:block;}
.list-con3 > ul  > li.active {width:43%; border:1px solid #0063A6; z-index:1; font-size:16px;}
.list-con3 > ul  > li.active .title {color:#0063A6; text-align:left; line-height:30px;}
.list-con3 > ul  > li.active .title ~ * {opacity:1; text-align:left;}*/

/* offering about - second */
.offering_about_second {height:500px; overflow:hidden;}
.offering_about_second ul {position:relative;}
.offering_about_second > li {float:left; width:50%; height:100%; border-left:rgba(255,255,255,0.3) 1px solid;}
.offering_about_second > li > ul > li {padding:220px 40px 50px; text-align:left;}
.offering_about_second > li > ul > li > h1 {font-weight:bold; font-size:20px; line-height:28px; color:#fff;}
.offering_about_second > li > ul > li > div {margin-top:30px; font-size:16px; line-height:24px; color:#fff; opacity:0;}

.offering_about_second_moblie {display:none;}

/*contents2*/
#contents .contentsW:nth-child(2) .contentsTit .title {margin-bottom:0;}
#contents .contents2 .sp1 {margin-bottom:20px;}
#contents .contents2 .sp2 {text-align:left;}
#contents .contents2 .sp2 span {color:#f00;}

/*contents3*/
.contentsW:nth-child(3) {width:100%; background:url('/images/solutions/solutions_img_01.jpg') center center no-repeat;}
#contents .contentsW:nth-child(3) .contentsTit .title {margin-bottom:0;}
#contents .contents3 {width:1200px; margin:0 auto; overflow:hidden;}
#contents .contents3 .contentsTit {color:#fff;}
#contents .contents3 .cont {width:49%; height:380px; float:left; background:rgba(255,255,255,0.7); padding-top:40px;}
#contents .contents3 .con1, #contents .contents3 .con3 {margin-right:2%;}
#contents .contents3 .con1, #contents .contents3 .con2 {height:420px; margin-bottom:2%;}
#contents .contents3 .con1 .text, #contents .contents3 .con2 .text {width:90%; margin:0 auto; text-align:left;}

#contents .contents3 .cont .percent {width:177px; height:175px; margin:0 auto; line-height:176px;}
#contents .contents3 .con1 .percent {background:url('/images/solutions/solutions_02_1.png') center center no-repeat;}
#contents .contents3 .con2 .percent {background:url('/images/solutions/solutions_02_2.png') center center no-repeat;}
#contents .contents3 .con3 .percent {background:url('/images/solutions/solutions_02_3.png') center center no-repeat;}
#contents .contents3 .con4 .percent {background:url('/images/solutions/solutions_02_4.png') center center no-repeat;}

#contents .contents3 .cont .percent {font-size:20px; font-weight:bold;}
#contents .contents3 .cont .title {padding:20px 0; font-size:20px; font-weight:bold;}

/*contents4*/
#contents .contentsW:nth-child(4) .contentsTit .title {margin-bottom:0;}
#contents .contents4 {overflow:hidden;}
#contents .contents4 video {box-shadow:5px 5px 10px #bbb;}

#contents .contents4 .sp1, #contents .contents4 .text {float:left; width:48%;}
#contents .contents4 .sp1 {margin-right:2%;}
#contents .contents4 .text {padding-top:40px;}

#contents .contents4 .text .title {font-size:22px; font-weight:bold; padding-bottom:40px;}
#contents .contents4 .text .sp2 {padding-bottom:40px; width:90%; margin:0 auto; text-align:left;}

#contents .contents4 .button {width:180px; height:48px; margin:0 auto; border-radius:40px; border:1px solid #0063A6;}
#contents .contents4 .button a {display:block; line-height:42px;}
#contents .contents4 .button a span {color:#0063A6;}

@media all and (max-width:1217px) {
	
	.contentsW {width:920px;}
	#lnb .lnbDiv {width:920px;}

	.contentsW:first-child .titText {width:80%;}

	#contents .contents3 {width:920px;}
	
	#contents .contents4 .sp1, #contents .contents4 .text {float:none; width:90%;}
	#contents .contents4 .sp1 {margin:0 0 4% 0;}
	#contents .contents4 .text {margin:0 auto;}
	#contents .contents4 .text .sp2 {text-align:center;}
}

@media all and (max-width:943px) {
	
	#topImage {display:none;}
	.contentsW {width:90%;}
	#lnb .lnbDiv {width:100%;}
	#contents .contents1 {width:100%;}
	
	#contents .contents3 {width:90%; margin:0 auto;}
	#contents .contents3 .cont .percent {background-size:80%;}
}

@media all and (max-width:929px){
	
	.contentsW:nth-child(3) {background-size:cover;}
	#contents .contents3 .cont {width:100%; height:auto; float:none; padding:40px 0;}
	#contents .contents3 .cont .text {width:90%; margin:0 auto;}
	#contents .contents3 .con1, #contents .contents3 .con3 {margin-right:0;}
	#contents .contents3 .cont {margin-bottom:4%;} 
	#contents .contents3 .con4 {margin-bottom:0;}
}

@media all and (max-width:636px){
	
	#contents .contentsTit {padding:60px 0;}
	#contents .contentsTit .title {font-size:30px;}
	#contents .contentsTit .titText {font-size:16px; padding:0 8%;}
	
	.offering_about_second {display:none;}
	.offering_about_second_moblie {display:block;  margin:0 auto; overflow:hidden;}
	.offering_about_second_moblie > li > ul > li {text-align:left; padding:30px; border-bottom:rgba(255,255,255,0.3) 1px solid;}
	.offering_about_second_moblie > li > ul > li > h1 {margin-top:15px; font-weight:bold; font-size:20px; line-height:28px; color:#fff;}
	.offering_about_second_moblie > li > ul > li > div {margin-top:15px; font-size:14px; line-height:22px; color:#fff; opacity:1;}

}

@media all and (max-width:528px){
	
}

@media all and (max-width:360px){
	
	#contents .contentsTit .title {font-size:25px; margin-bottom:30px;}
	
	#contents .contents3 .cont .percent {background-size:80%;}
}