@charset "utf-8";

.tabberlive .tabbertabhide{display:none;}
ul.tabbernav{margin-bottom: 10px; padding: 0 5px;}
ul.tabbernav:after, .tabbertab:after{ content: ""; display: block; clear:both;}
ul.tabbernav li{float:left;margin-right: 10px;line-height: 22px;letter-spacing: -0.04em;}
ul.tabbernav li a{font-size:14px; color:#000;}
ul.tabbernav li a:hover, ul.tabbernav li.tabberactive a{color:#9b785c;}
.tabbertab{}
.tabbertab ul{display: flex; flex-wrap: wrap; gap: 1%;}
.tabbertab li{width: calc(19.2% - 0px); margin-bottom: 1%;}
.tabbertab li a{display:block;}
.tabbertab li a img, .tabbertab li img{width:100%;border: 1px solid #e1e1e1; transition-duration:0.5s;}
.tabbertab li a img:hover{box-shadow: 0 10px 20px 0 rgba(17,21,23,.1);-webkit-transform: translateY(-5px);-moz-transform: translateY(-5px);-ms-transform: translateY(-5px);-o-transform: translateY(-5px);transform: translateY(-5px);}

.tabberlive .tabbertab h2 {display:none;}

.mainToptxt{padding:80px; }
.mainToptxt .toptxtB{font-family: 'Philosopher', sans-serif; font-size:40px; color:#1e3639; line-height: 42px;}
.mainToptxt p{font-size:22px; line-height:32px; }

/*메인비주얼*/
.mainBanner{position: relative}
.mainBanner .cycle-slide{width:100%;height:490px;}
.mainBanner .cycle-slide a{display: block; width: 100%; height: 100%; cursor:pointer;}
.mainBanner .mainVis01{background:url('../images/main/vis_erom.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis02{background:url('../images/main/vis_bom.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis03{background:url('../images/main/vis_apyld.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis04{background:url('../images/main/vis_exo.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis05{background:url('../images/main/vis_cos.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis06{background:url('../images/main/vis_cell.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis07{background:url('../images/main/vis_na.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis08{background:url('../images/main/vis_celig.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis09{background:url('../images/main/vis_ale.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis10{background:url('../images/main/vis_kahi.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis11{background:url('../images/main/vis_onstar.jpg') no-repeat 50% 50%; background-size: cover}
.mainBanner .mainVis12{background:url('../images/main/vis_the.jpg') no-repeat 50% 50%; background-size: cover}

.btn_cycleLB {display:inline-block;position:absolute;top:50%;left:0;width:26px;height:48px;background:url(../images/main/arr_prev.png) no-repeat;z-index:101;}
.btn_cycleRB {display:inline-block;position:absolute;top:50%;right:0;width:26px;height:48px;background:url(../images/main/arr_prev.png) no-repeat) no-repeat;z-index:101;}

.cycle_slideshow {position:relative}
.cycle_slideshow > div.slide {position:absolute;top:0;left:0;width:100%;padding:0}

.cycle-pager {position:absolute;bottom:20px;width:100%;text-align:center;z-index:800;}
.cycle-pager a {display:inline-block;width:10px;height:10px;margin:0 4px;background:#fff; border-radius:5px;}
.cycle-pager a.cycle-pager-active {background:#1e3639;}
.cycle-pager .bubble {font-size:13px;text-align:center;color:#fff;background:#1e3639; border-radius:3px;
	-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.cycle-pager .bubble span.arr {display:block;position:absolute;left:50%;bottom:-2px;margin-left:-1px;background:#000;border-radius:5px;}
.cycle-pager > * {cursor:pointer}
.cycle-caption {position:absolute;color:#fff;bottom:15px;right:15px;z-index:700}
.cycle-overlay {font-family:tahoma, arial;position:absolute;bottom:0;width:100%;padding:15px;background:black;color:white;z-index:600;opacity:.5}

.cycle-pager a {position:relative;}
.cycle-pager a .balloon {display:none;position:absolute;bottom:20px;left:-195px;width:400px;text-align:center;}
.cycle-pager a .balloon .bubble {position:relative;bottom:0;padding:5px 10px;}
.cycle-pager a.cycle-pager-active .balloon {display:block;}


/*레이어팝업모션*/
.pop-perspective,
.pop-perspective body {height: 100%;overflow: hidden;}
.pop-perspective body  {background: #222;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;}
.pop-modal {	position: fixed;top: 50%;	left: 50%;	width: 1200px;	max-width: 1200px;	min-width: 320px;	height: auto;	z-index: 2000;	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.pop-show {	visibility: visible;}

.pop-overlay {position: fixed; width: 100%;	height: 100%;	visibility: hidden;	top: 0;	left: 0;	z-index: 1000;	opacity: 0;	background: rgba(17,26,39,0.9);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.pop-show ~ .pop-overlay {	opacity: 1;	visibility: visible;}

/* Content styles */
.pop-content {	color: #000;	background: #fff;	position: relative;	border-radius: 3px;	margin: 0 auto;	padding: 70px;}

/* Effect 17:  Slide in from bottom with perspective on container */
.pop-show.pop-effect ~ .container {	height: 100%;	overflow: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}	

.pop-show.pop-effect ~ .container,
.pop-show.pop-effect ~ .pop-overlay  {
	-webkit-transform: rotateX(-2deg);
	-moz-transform: rotateX(-2deg);
	-ms-transform: rotateX(-2deg);
	transform: rotateX(-2deg);
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.pop-effect .pop-content {	opacity: 0;
	-webkit-transform: translateY(200%);
	-moz-transform: translateY(200%);
	-ms-transform: translateY(200%);
	transform: translateY(200%);
}

.pop-show.pop-effect .pop-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 0.3s 0.2s;
	-moz-transition: all 0.3s 0.2s;
	transition: all 0.3s 0.2s;
}

.pop-effect2 .pop-content {
	-webkit-transform: translateX(20%);
	-moz-transform: translateX(20%);
	-ms-transform: translateX(20%);
	transform: translateX(20%);
	opacity: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.pop-show.pop-effect2 .pop-content {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

/* 레이어팝업 */
.closeInner{width: 90px; height: 90px; border-radius: 45px; position: absolute; top: -45px; right:-45px; }
.pop-close{width:90px;height:90px;background:url('../images/common/popClose.png') no-repeat 50% 50%; transition: -webkit-transform 1s; text-indent:-9999px; }
.pop-close_b{background:url('../images/common/popClose_b.png') no-repeat 50% 50%;}
.pop-close:hover{transform: rotate(180deg);}

/* 오시는길 */
.map, .mapList{width:50%;}
.mapList{padding-left: 60px; }
.mapList li{font-size:16px;color:#666;border-bottom:1px solid #ededed;padding-bottom:20px;margin-top: 20px;line-height: 26px;}
.mapList li span{position: relative; font-family: 'Montserrat', sans-serif;color:#000;font-weight: 700;}
.mapList li span:before { content: ""; position: absolute;  left: 0;  right: 0;  bottom: 0;  height: 8px; border-radius: 1px;  background: rgba(139,185,191, 0.8); z-index: -1;}
.mapList li:first-child{margin-top:0;}
.mapList li:last-child{border:0; }
.mapList .btn_more{width:50%;margin:0 auto;}

/* 온라인문의 */
.pop-content .onlineSc{height: 700px;overflow: hidden;overflow-y: scroll;padding-bottom: 100px;}
.onlineSc .onlineTop{background:#9c785a;color:#fff;padding:30px;margin-bottom: 100px;}
.onlineSc .onlineTop ul, .onlineSc .onlineTop li{float:left;color: #fff;margin-right: 15px;line-height: 42px;}
.onlineTop ul.ask li{ font-size: 36px; font-weight: 600;}
.onlineTop ul.ask li:first-child{font-size: 28px; font-weight: 400;}
.onlineTop ul.ask_s li{font-size: 22px;}
.onlineTop .help{float:right;color: #fff;font-size: 25px;line-height: 42px;}

.onlineSc .onTitInner, .onlineSc fieldset{padding: 0 100px 80px;}
.onTitInner{color:#000;}
.onTitInner .topTit{font-size: 45px;font-weight: 600;margin-bottom: 20px;}
.onTitInner .topTitS{font-size: 18px; border-bottom:1px solid #d9d9d9; padding:0 0 5px 2px;}
.onTitInner .topTitS span{font-size: 20px;font-weight: 500; color:#333;}

.pop-content fieldset{}
.pop-content fieldset p{position:relative;display:inline-block;font-size: 22px;font-weight:500; }
.pop-content fieldset p:before { content: ""; position: absolute;  left: 0;  right: 0;  bottom: 0;  height: 8px; border-radius: 1px;  background: rgba(139,185,191, 0.8); z-index: -1;}
.pop-content fieldset ul{}
.pop-content fieldset li{position:relative;height:55px;line-height: 55px;margin-top: 20px;}
.pop-content fieldset li input,
.pop-content fieldset li select,
.pop-content fieldset li textarea{color: #3a3a3a;position:relative;z-index:1;}
.pop-content fieldset li select option{color:#222;}
.pop-content fieldset ul.li50 li{float:left; width:46%;margin-left:8%;}
.pop-content fieldset ul.li50 li:nth-child(odd){margin-left:0;}

.pop-content fieldset li::before{content:"";width:100%;height:1px;background:#8d9091; position: absolute; bottom: 0; left: 0;}
.pop-content fieldset li::after{content:"";width:0;height:1px;background:#fff; position: absolute; bottom: 0; left: 0;transition: width .2s;transition-delay: .2s;}
.pop-content fieldset li span,
.pop-content fieldset li label{position:absolute;bottom:0;font-weight:400;z-index:0}
.pop-content fieldset li span{left:0;font-size: 18px;}
.pop-content fieldset li label{right:0;display:none}
.pop-content fieldset li input{height:55px;background:none;border:none;width:100%;padding-left: 70px;}
.pop-content fieldset li input:focus,
.pop-content fieldset li textarea:focus{outline:none}
.pop-content fieldset li.textareaWrap{height:auto;}
.pop-content fieldset li.textareaWrap span{top:0;}
.pop-content fieldset li.textareaWrap textarea{width:100%; background: transparent; border: none; padding-top: 50px;}
.pop-content fieldset li>p{font-size:16px;font-weight:300}

.pop-content fieldset li select{padding:0;width: 100%;border: none;font-size: 18px;line-height: 22px;font-weight: 400;}

.agreeWrap{margin-bottom:50px;position:relative;}
.agreeWrap label {margin: 35px 0 15px;display: block;height: 18px;font-size: 16px;line-height: 20px;}
.agreeWrap label i{display:inline-block;width: 18px;height: 18px;border: 2px solid #444;transition: background .4s;}
.agreeWrap label span{color:#999;}
.agreeWrap input[type="checkbox"]{float:left; width: 18px; height: 18px;margin-right:10px}
.agreeWrap .scrollBox{border:1px solid #ddd;font-size: 14px;color: #888; line-height: 22px; padding: 20px; height: 180px; overflow: hidden; overflow-y: auto;}

.onlineBtm{display:table; margin:0 auto; text-align: center; }
.onlineBtm .btmTxt{font-size:50px;color:#1f3639;font-weight: 600;}
.onlineBtm .btmTxt2{font-size:22px;font-weight: 400;}

.pop-content .btn_more{width:50%;margin: 0 auto;}

/* 서브카테고리 */
.subTab{}
.subTab .subTabs{margin-bottom: 10px; padding: 0 5px;}
.subTab .subTabs li{position: relative;display: table;line-height: 30px;margin-bottom: 15px;}
.subTab .subTabs li a{font-size:20px;color:#000;}
.subTab .subTabs li a::after {content: "";width: 0;height: 15px;background: #899598;border-radius: 20px;position: absolute;bottom: 5px;left: -5px;z-index: -1;transition: width .3s;}
.subTab .subTabs li a.tabOn{font-size:26px; font-weight:500;}
.subTab .subTabs li a.tabOn::after {width: calc(100% + 10px);height: 15px;background: #899598;border-radius: 20px;position: absolute;bottom: 5px;left: -5px;z-index: -1;}
.subTab .subTabs li a:hover::after{width: calc(100% + 10px); transition: width .3s; }

.subTab .tab_content{}
.subTab .tab_content li{float:left;width:18%;margin:1%; border:1px solid #e1e1e1; transition-duration:0.5s;}
.subTab .tab_content li a{display:block;}
.subTab .tab_content li a img{width:100%;}
.subTab .tab_content li:hover{box-shadow: 0 10px 20px 0 rgba(17,21,23,.1);-webkit-transform: translateY(-5px);-moz-transform: translateY(-5px);-ms-transform: translateY(-5px);-o-transform: translateY(-5px);transform: translateY(-5px);}

.portListInner{display: flex; flex-wrap: wrap;}
.portListInner .portList{width: calc(33.3% - 0px); margin-bottom: 50px;}
.portListInner .portList dl{padding: 5% 8%;}
.portListInner .portList dt{ font-size: 22px; color: #2c2e2b; margin-bottom: 5px;;}
.portListInner .portList dd{font-size: 14px; color: #8d8d8d;  font-family: 'Montserrat', sans-serif;   font-weight: 500;}

/* action */
.box {border:1px solid #ccc; width: 84%; margin:0 8%;	 box-sizing:border-box;	 -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.action {overflow:hidden;position:relative;}
.action img {	 width:100%;	 height:352px;}
.action .social_bg {	 position:absolute;	 bottom:-220px;	 left:50px;	 width:100%;	 height:220px;	 background-color:rgba(0,0,0,0.5);
	 transform:skew(-55deg);
	 -webkit-transform:skew(-55deg);
	 transform-origin:bottom left;
	 -webkit-transform-origin:bottom left;
}
.action .social_box {	 position:absolute;	 right:20px;	 bottom:20px;	 height:35px; cursor: pointer;}
.action .social_box span {	 display:inline-block;	 width:35px;	 height:35px;	 margin-left:10px;	 text-indent:-9999px;	 opacity:0;}
.action .social_box span a{display:block;	 width:35px;	 height:35px;}
.action .social_box span:nth-child(1) {background:url('../images/sub/ico_social.png') 0 0 no-repeat;}
.action:hover img {
	 filter:blur(2px);
	 -webkit-filter:blur(2px);
	 -moz-filter:blur(2px);
	 -o-filter:blur(2px);
}
.action:hover .social_bg {	 bottom:0;
	 transition:all .3s ease;
	 -webkit-transition:all .3s ease;
}
.action:hover .social_box span {	 opacity:1;}
.action:hover .social_box span:nth-child(1) {
	 animation:ballScaleImg 1.5s;
	 -webkit-animation:ballScaleImg 1.5s;
	 animation-fill-mode:both;
	 -webkit-animation-fill-mode:both;
}
.action:hover .social_box span:nth-child(2) {
	 animation:ballScaleImg 1.5s .15s;
	 -webkit-animation:ballScaleImg 1.5s .15s;
	 animation-fill-mode:both;
	 -webkit-animation-fill-mode:both;
}
.action:hover .social_box span:nth-child(3) {
	 animation:ballScaleImg 1.5s .3s;
	 -webkit-animation:ballScaleImg 1.5s .3s;
	 animation-fill-mode:both;
	 -webkit-animation-fill-mode:both;
}

@keyframes ballScaleImg {
0%,30% {
	 transform:scale3d(0,0,1) rotate3d(0,0,1,0.01deg);
	 -webkit-transform:scale3d(0,0,1) rotate3d(0,0,1,0.01deg);
	 opacity:0;
}
45% {
	 transform:scale3d(1.2,1.2,1) rotate3d(0,0,1,0.01deg);
	 -webkit-transform:scale3d(1.2,1.2,1) rotate3d(0,0,1,0.01deg);
	 opacity:1;
}
55%, 100% {
	 transform:scale3d(1,1,1) rotate3d(0,0,1,0.01deg);
	 -webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,0.01deg);
}}
@-webkit-keyframes ballScaleImg {
0%,30% {
	 transform:scale3d(0,0,1) rotate3d(0,0,1,0.01deg);
	 -webkit-transform:scale3d(0,0,1) rotate3d(0,0,1,0.01deg);
	 opacity:0;
}
45% {
	 transform:scale3d(1.2,1.2,1) rotate3d(0,0,1,0.01deg);
	 -webkit-transform:scale3d(1.2,1.2,1) rotate3d(0,0,1,0.01deg);
	 opacity:1;
}
55%, 100% {
	 transform:scale3d(1,1,1) rotate3d(0,0,1,0.01deg);
	 -webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,0.01deg);
}}

/* 회사소개 */
.comTop{}
.comTop p{font-size: 35px;color:#000;}
.comTop .txtS{font-size: 20px;font-weight: 500;}
.comTop .txtB{font-size: 50px;margin: 25px 0 20px;}

/*
.comBg{position: relative;background: url('../images/sub/about.jpg') 0 0 no-repeat;height:400px;margin-top: 200px;border-radius: 50px 0 50px 0;background-size: cover;}
.comBg p{position: absolute;bottom: 50px;left: 70px;color: #fff;font-size: 22px;line-height: 32px;}
*/

.comTxtInner{width:100%; background:#f7f7f7; display: flex; flex-wrap: wrap; margin: 70px 0;}
.comTxtInner div{flex-basis: 50%;display: flex;flex-direction: column;height: 350px;padding: 50px 30px;}
.comTxtInner div.comTxtImgR{float:right; background: url('../images/sub/about01.jpg') no-repeat; }
.comTxtInner div.comTxtImgL{float:left; background: url('../images/sub/about02.jpg') no-repeat 50%; }
.comTxtInner div.comTxtImgR, .comTxt div.comTxtImgL{background-size: cover;}
.comTxtInner .comTxt{font-size:18px;line-height: 30px;padding: 120px 7%;}
.comTxtInner .comTxt span{font-size: 25px; color:#000; margin-bottom:10px; text-decoration: underline; }
.comTxtList li{color:#444;font-size: 15px;margin-bottom: 30px;line-height: 24px;letter-spacing: -0.03em;}
.comTxtList li:last-child{margin-bottom:0;}
.comTxtList li i{display:inline-block;width:19px;height:19px;border-radius:50%;background:#9b785c;color:#fff;text-align:center;line-height:19px;margin-right:10px;}

.whyListInner{ width: 95%; display: flex; flex-wrap: wrap; margin:0 auto;}
.whyListInner .whyList{flex-basis: 22%;display: flex;flex-direction: column;margin:0 1.5%;background: #fff; border-radius: 15px; webkit-box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.3);box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.3);}
.whyListInner .whyList p{width: 100%;height:140px;border-radius: 15px 15px 0 0;font-size: 26px;color: #fff;font-weight: 400;padding-top: 60px;}
.whyListInner .whyList dl{margin:35px 0}
.whyListInner .whyList dt{ font-size: 20px;  line-height: 28px; margin-bottom: 20px; font-weight: 400;}
.whyListInner .whyList dd{font-size: 16px; line-height: 26px;}
.whyListInner .whyList:nth-child(1) p{background: url('../images/sub/about06.jpg') no-repeat 50%; background-size: cover;}
.whyListInner .whyList:nth-child(2) p{background: url('../images/sub/about04.jpg') no-repeat; background-size: cover;}
.whyListInner .whyList:nth-child(3) p{background: url('../images/sub/about05.jpg') no-repeat; background-size: cover;}
.whyListInner .whyList:nth-child(4) p{background: url('../images/sub/about03.jpg') no-repeat; background-size: cover;}

.comBtm{font-size: 32px;color: #1f3639;text-align: center;letter-spacing: -0.05em;margin: 70px auto 40px;display: table;}
.comBtm p{font-size: 42px;color: #406a6b;font-weight: 500;margin-top: 20px;position: relative;z-index: 999;}
.comBtm p::after{content:"";width: 100%;height: 20px;background: #d9e1e1;position: absolute;bottom: 0;left: 0;z-index: -1;}

/* 솔루션-와우넷이란 */
.WowIntro{width:100%;height:620px;padding:20px 40px;box-sizing:border-box;background:url('../images/sub/wow_intro.png') no-repeat 40px top;}
.WowIntro dl{margin:0 0 20px 555px;width:370px;height:80px;clear:both;}
.WowIntro dt{float:left;width:120px;font-size:18px;color:#fff;line-height:80px;text-align:center;margin-right:20px;}
.WowIntro dd{float:right;width:230px;font-size:15px;color:#474747;line-height:24px;padding-top:18px;}
.WowIntro dd span{font-size:13px;color:#767676;line-height:20px;}

/* 와우넷소개-와우넷솔루션 */
.SolutionK{width:100%;display: flex;flex-wrap: wrap;}
.SolutionK dl{float:left;flex-basis: 50%;height: 180px;background:#fff;padding:30px;}
.SolutionK dl dt{float: left; width: 100px; height: 100px;background: ;border-radius: 50px; margin-right: 20px;}
.SolutionK dl dt p{}
.SolutionK dl dd{font-size:14px;color:#666;line-height:22px;}
.SolutionK dl dd p{font-size:18px;color:#000;margin-bottom:10px;font-weight: 400;}
.SolutionK dl:nth-child(1) dt{background:#f7f7f7 url('../images/sub/kindicon01.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(2) dt{background:#f7f7f7 url('../images/sub/kindicon02.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(3) dt{background:#f7f7f7 url('../images/sub/kindicon03.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(4) dt{background:#f7f7f7 url('../images/sub/kindicon04.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(5) dt{background:#f7f7f7 url('../images/sub/kindicon05.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(6) dt{background:#f7f7f7 url('../images/sub/kindicon06.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(7) dt{background:#f7f7f7 url('../images/sub/kindicon07.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(8) dt{background:#f7f7f7 url('../images/sub/kindicon08.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(9) dt{background:#f7f7f7 url('../images/sub/kindicon09.png') no-repeat 50% 50%;}
.SolutionK dl:nth-child(10) dt{background:#f7f7f7 url('../images/sub/kindicon10.png') no-repeat 50% 50%;}

/* 와우넷 특징 */
.solutionDetail dl{margin-bottom: 50px;}
.solutionDetail dl dt{width: 30%;float:left;height: 250px;box-sizing:border-box;background:url('../images/sub/system01.png') no-repeat 50% 50%;margin-right: 3%; position: relative;}
.solutionDetail dl:nth-child(2) dt{background:url('../images/sub/system03.png') no-repeat 50% 50%;}
.solutionDetail dl:nth-child(3) dt{background:url('../images/sub/system02.png') no-repeat 50% 50%;}
.solutionDetail dl:nth-child(4) dt{background:url('../images/sub/system04.png') no-repeat 50% 50%;}
.solutionDetail dl dt p{ position: absolute; bottom: 3%; width: 94%; left: 3%;background: rgba(255,255,255,.8); padding: 20px 0; text-align: center; font-size: 20px; color: #000;}
.solutionDetail dl dd{width: 67%;float:right;font-size: 16px;box-sizing: border-box;position: relative;line-height: 26px;padding-left: 15px;margin-bottom: 15px;}
.solutionDetail dd:before{content:"";display:block;width: 4px;height: 4px;border-radius:50%;background: #666;position:absolute;top: 10px;left:0;}
.comLine{width: 100%;height: 1px;background: #d0d0d0;margin: 50px auto;}

/* 와우넷소개-와우넷기능구성 */
.WowFunctional{background:#f9f9f9; padding:50px;}
.WowFunctional dl{width:100%;margin-bottom: 60px;}
.WowFunctional dt{display: inline-block;color: #9baeb1;background: #1e3639;padding: 15px 30px;font-size:20px;border-radius: 30px;margin-bottom: 20px;}
.WowFunctional dt p{display:inline-block;margin:0 auto;text-align:center;}
.WowFunctional dd{position: relative;font-size:16px;color:#8e8e8e;line-height:24px;padding-left:45px;margin-bottom:15px;}
.WowFunctional dd:before{content:"";display:block;width: 4px;height: 4px;border-radius:50%;background: #666;position:absolute;top: 10px;left:35px;}
.WowFunctional dl:last-child{margin-bottom:0;}

.sol ul.tabbernav{border: 1px solid #ddd;display: flex;flex-wrap: wrap;}
.sol ul.tabbernav:after, .sol .tabbertab:after{content: "";width: 0;height: 15px;background: #899598;border-radius: 20px;position: absolute;bottom: 5px;left: -5px;z-index: -1;transition: width .3s;}
.sol ul.tabbernav li{position: relative;flex-basis: 33%;display: flex;flex-direction: column;margin: 0;padding: 20px 0;text-align: center;border-left: 1px solid #ddd;}
.sol ul.tabbernav li:first-child{border:0}
.sol ul.tabbernav li a{font-size:20px;color:#000;}
.sol ul.tabbernav li a::after {content: "";width: 0;height: 15px;background: #899598;border-radius: 20px;position: absolute;bottom: 5px;left: -5px;z-index: -1;transition: width .3s;}
.sol ul.tabbernav li.tabberactive a{font-weight:500;}
.sol ul.tabbernav li.tabberactive a::after {width: calc(100% + 10px);height: 15px;background: #899598;border-radius: 20px;position: absolute;bottom: 5px;left: -5px;z-index: -1;}
.sol ul.tabbernav li.tabberactive a:hover::after{width: calc(100% + 10px); transition: width .3s; }

.webImg{}
.webImg img{width:100%; margin: 30px 0 20px;}
.webImg p{text-align: center; font-size: 16px; color: #000; margin-bottom:40px;}

 /*right_nav*/
#right_nav{position: fixed;width: 100%;height: 100%;background:#fff;z-index:900;overflow: visible;right: -100%;top: 0;}

.nav-icon:after,
.nav-icon:before,
.nav-icon div {
  background-color: #1D1D1B;
  content: '';
  display: block;
  height: 2px;
  margin: 4px 0;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.nav-icon:before {margin-top:0;}
.nav-icon:after {margin-bottom:0;}
.nav-icon.active-close:before {
  transform: translateY(7px) rotate(135deg);
  -moz-transform: translateY(7px) rotate(135deg);
  -webkit-transform: translateY(7px) rotate(135deg);
}
.nav-icon.active-close:after {
  transform: translateY(-5px) rotate(-135deg);
  -moz-transform: translateY(-5px) rotate(-135deg);
  -webkit-transform: translateY(-5px) rotate(-135deg);
}
.nav-icon.active-close div {
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.nav-icon {
	display:inline-block;
	width: 24px;
	cursor:pointer;
	position:absolute;
	top: 35px;
	right: 20px;
	z-index:100;
	transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.nav .navbar {
	position:fixed;
	width: 100%;
	height:100%;
	right: -100%;
	padding:25px 20px 100px;
       overflow-y: scroll;
	background: #FBFBFB;
	z-index:99;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	margin:0;
}
.nav .navbar.active-close { right:0; margin-top: 1px; }
   .nav-icon { width: 18px; }
   .nav-icon div { width: 12px; position: relative; right: -6px;}
    
.nav .nav-icon.active-close:before {
  transform: translateY(7px) rotate(135deg);
  -moz-transform: translateY(7px) rotate(135deg);
  -webkit-transform: translateY(7px) rotate(135deg);
}
.nav .nav-icon.active-close:after {
  transform: translateY(-5px) rotate(-135deg);
  -moz-transform: translateY(-5px) rotate(-135deg);
  -webkit-transform: translateY(-5px) rotate(-135deg);
}
.nav .nav-icon.active-close div {
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.muM{width: 90%; margin: 60px auto;}
.muM li{border-bottom: 1px solid #ededed;padding: 10px;}
.muM li a{ font-size: 1.5em;line-height: 3;}