@charset "utf-8";

/* ========================== 레이아웃 =========================== */
@media screen and (min-width:991px){
	.headerM, .hideM{display: none;}	
}

@media all and (max-width:991px){
	.headerH, .muHome, #sidebar, .mainToptxt, .portListInner .portList dd, .hideH{display:none;}
}

@media all and (max-width: 1280px) {
	.gnb li {margin: 0 8px;}
	.mainToptxt{padding:60px 80px;}
	.mainBanner .cycle-slide{height:470px;}
	
}

@media all and (max-width:991px){
	div#wrap header{position: relative;width: 100%;padding: 2% 3%;height: auto;background:#fff;}
	div#wrap footer{position: relative;width: 100%;left: 0;bottom: 0;padding: 8% 3% 3%;}
	header h1{width: calc(100% - 60px);float: left;margin-bottom:0;}
	header h1 a{display: inline-block;float: left;height:40px;background:url('../images/common/logo.png') no-repeat;background-size: contain;}
	.topTel{position: absolute;top: 350px;width: 80%;height: 260px;margin: 0 10%;background:#1e3639;padding: 40px 40px 60px;z-index: 800;}
	#container{width:100%; margin: 0;}
	.mainTab{margin: 160px 30px 0;}
	
}

@media all and (max-width:500px){	
	div#wrap header{position: relative;width: 100%;padding: 3%;min-width: 100%;}
	div#wrap footer{padding: 12% 5% 5%;}
	.mainInner{position: relative;margin: 4% 4% 0;}
	.pdt10{padding-top:10%;}
	.contpd52{padding: 5% 3%;}
	.contpd50{padding: 5%;}
	.contBtm{height:20px;}
	.mainBanner .cycle-slide{height:300px;}
	.topTel{top: 220px;}
	.topTel h2{font-size: 1.7rem;color:#9baeb1;}
	.topTel .telNo{font-size: 2.2rem;color: #fff;margin: 10px 0 25px;}
	.topTel .stxt{font-size: 1.1rem;color: #6f868a;font-weight: 500;margin-bottom: 10px;}
	.topTel .stxtmail{font-size: 1rem;color: #9baeb1;}
		
}


/* ========================== 컨텐츠 =========================== */


@media screen and (max-width: 991px){
	.tabberlive{margin:180px 4% 0;}
	ul.tabbernav{/* margin-top:150px; */}
	ul.tabbernav li{margin-right: 15px;line-height: 28px;letter-spacing: 0;}
	ul.tabbernav li a{font-size: 1.1rem;}
	.pop-modal {width: 80%;height: 90%;overflow: hidden;overflow-y: scroll;}
	.pop-modal::-webkit-scrollbar{display: none}
	.pop-modalM{width: 100%; height: 100%;  z-index: 1001;}
	.pop-content{padding:5% 5% 50px;}
	.pop-content2{padding:5%; border-radius:0 background: #fbfbfb;}
	.map, .mapList{width:100%;}
	.wrap_map{height: 350px !important;}
	.mapList{margin-top: 30px; padding-left:0}
	.closeInner{width: 70px;height: 70px;border-radius: 45px;position: absolute;top: 10px;right: 10px;z-index: 9;}
	.pop-close{width:30px;height:30px;background:url('../images/common/popClose.png') no-repeat 50% 50%;margin-top: 20px;}
	.pop-close_b{width:30px;height:30px; background:url('../images/common/popClose_b.png') no-repeat 50% 50%; margin-top: 20px;}	
	.pop-content .onlineSc {height: auto; overflow: auto; overflow-y: hidden; padding-bottom: 100px;}
	.onlineSc .onlineTop{background:#9c785a;color:#fff;padding: 20px;margin-bottom: 10%;}
	.onlineSc .onlineTop ul, .onlineSc .onlineTop li{/* float: none; */color: #fff;margin-right: 15px;line-height: 42px;}
	.onlineTop ul.ask li{font-size: 2.8em;font-weight: 600;}
	.onlineTop ul.ask li:first-child{font-size: 2em;font-weight: 400;}
	.onlineTop ul.ask_s li{font-size: 1.5em;}
	.onlineTop .help{float: left;display: block;color: #fff;font-size: 1.5em;line-height: 42px;}
	
	.onlineSc .onTitInner, .onlineSc fieldset{padding: 0 8% 50px;}
	.onTitInner{color:#000;}
	.onTitInner .topTit{font-size: 2.5em;font-weight: 600;margin-bottom: 20px;}
	.onTitInner .topTitS{font-size: 18px;}
	
	.pop-content fieldset{}
	.pop-content fieldset p{position:relative;display:inline-block;font-size: 1.8em;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{width:100%;margin-left: 0;}
	.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: 1.3em;}
	.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: 1.3em;line-height: 22px;font-weight: 400;}
	
	.agreeWrap{margin-bottom:50px;position:relative;}
	.agreeWrap label {margin: 35px 0 15px;display: block;height: 18px;font-size: 1.2em;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: 1.1em;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: 3em;color:#1f3639;font-weight: 600;}
	.onlineBtm .btmTxt2{font-size: 1.5em;font-weight: 400;}

	.subTab{width: 90%;margin: 5% auto 0;}
	.subTab .subTabs{margin-bottom: 0;padding: 0;}
	.subTab .subTabs li{display: inline-block;line-height: 2;margin: 0 5% 0 0;}
	.subTab .subTabs li a{font-size: 1.1rem;}
	.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: 1.15rem;}
	.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; }
		
}

@media screen and (max-width: 1280px){
	.action .hideM {display: none !important;}
	.portListInner .portList{width: calc(50% - 0px);margin-bottom: 30px;}
	.portListInner .portList .action a.linkM{display: block;}	
	.action img{height: 300px;}
	.whyListInner .whyList{flex-basis: 50%;margin-bottom: 50px;}
	.whyListInner .whyList:nth-child(2) p, .whyListInner .whyList:nth-child(4) p{margin-top: 0;}
	.whyListInner .whyList p{width:70%;}
	.whyListInner .whyList dt{font-size: 1.2rem;}
	.whyListInner .whyList dd{ font-size: 0.9rem;}

}

@media screen and (max-width: 991px){
	.action .hideM {display: block !important;}
	.whyListInner .whyList p{width:60%;}
	
}

@media screen and (max-width: 780px){
	ul.tabbernav li{margin-right: 15px;line-height: 28px;letter-spacing: 0;}
	ul.tabbernav li a{font-size: 1.05rem;}	
	
}

@media screen and (max-width: 500px){	
	.tabberlive{margin: 200px 4% 0;}
	.sol .tabberlive{margin: 0;}
	ul.tabbernav li a{font-size: 1rem;}
	.action img{height: 250px;}
	.portListInner .portList dt{font-size: 1rem;line-height: 1.5em;word-break: break-all;}
	.comTop{}
	.comTop p{font-size: 1.3rem;}
	.comTop .txtS{font-size: 1rem;}
	.comTop .txtB{font-size: 2.5rem;margin: 5% 0;line-height: 1.2;}
	
	.comTxtInner{margin: 10% 0;}
	.comTxtInner div{flex-basis: 100%;display: flex;flex-direction: column;height: auto;padding: 50px 30px;}
	.comTxtInner div.comTxtImgR{background: url('../images/sub/about01.jpg') no-repeat; height: 200px; background-size: cover;}
	.comTxtInner div.comTxtImgL{background: url('../images/sub/about02.jpg') no-repeat 50%; height: 200px; background-size: cover;}
	
	.comTxtInner .comTxt{font-size: 1rem;line-height: 1.5;padding: 15% 10%;}
	.comTxtInner .comTxt span{font-size: 1.5rem;margin-bottom:10px;text-decoration: underline;}
	.comTxtList li{font-size: 1rem;line-height: 1.5;}
	.comTxtList li:last-child{margin-bottom:0;}
	
	.whyListInner{width: 90%;margin:0 auto;}
	.whyListInner .whyList{flex-basis: 100%;}
	.whyListInner .whyList p{width: auto;font-size: 1.5rem;}
	.whyListInner .whyList dl{margin: 8% 0;}
	.whyListInner .whyList dt{font-size: 1.2rem;line-height: 1.3;margin-bottom: 10px;}
	.whyListInner .whyList dd{font-size: 1rem;line-height: 1.5;}

	.comBtm{font-size: 1.5rem;margin: 0 auto;}
	.comBtm p{font-size: 1.5rem;margin-top: 10px;}
	
	/* 솔루션-와우넷이란 */
	.WowIntro{width:100%;height: auto;padding: 0;background: none;}
	.WowIntro dl{display:table;width:100%;margin-bottom:10px;margin-left: 0;}
	.WowIntro dl dt{display:table-cell;vertical-align:middle;height: 80px;width: 30%;font-size: 1rem;text-align:center;margin-right: 0;line-height: 1.5;float: none;}
	.WowIntro .introTit01{background-color:#a1d838;}
	.WowIntro .introTit02{background-color:#8fd551;}
	.WowIntro .introTit03{background-color:#6dd08a;}
	.WowIntro .introTit04{background-color:#5ccda8;}
	.WowIntro .introTit05{background-color:#4ccac7;}
	.WowIntro .introTit06{background-color:#46bebb;}
	.WowIntro dl dd{display:table-cell;vertical-align:middle;height: 80px;width: 70%;font-size: 0.9rem;line-height: 1.5;padding: 3%;box-sizing:border-box;border:1px solid #eee;float: none;}
	
	/* 와우넷소개-와우넷솔루션 */
	.SolutionK dl{float: none;flex-basis: 47%;height: auto;padding: 0;}
	.SolutionK dl:nth-child(odd){margin: 0 3% 10% 0;}
	.SolutionK dl:nth-child(even){margin: 0 0 10% 3%;}
	.SolutionK dl dt{float: none;margin: 0 auto 10%;}
	.SolutionK dl dd{font-size: 0.9rem;line-height: 1.5;}
	.SolutionK dl dd p{font-size: 1.2rem; text-align: center;}
	
	/* 와우넷 특징 */
	.solutionDetail dl{margin-bottom: 15%;}
	.solutionDetail dl dt{width: 100%;float: none;height: 200px;margin: 0 0 20px 0;}
	.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{font-size: 1.2rem;}
	.solutionDetail dl dd{width: 100%;float: none;font-size: 0.9rem;line-height: 1.5;margin: 10px 0 0 0;}
	
	/* 와우넷소개-와우넷기능구성 */
	.WowFunctional{padding: 7%;}
	.WowFunctional dl{width:100%;margin-bottom: 10%;}
	.WowFunctional dt{padding: 5% 10%;font-size: 1.1rem;margin-bottom: 5%;line-height: 1.3;border-radius: 40px;}
	.WowFunctional dt p{display:inline-block;margin:0 auto;text-align:center;}
	.WowFunctional dd{font-size: 0.9rem;line-height: 1.5;padding-left: 20px;margin-bottom: 5%;}
	.WowFunctional dd:before{top: 7px;left: 10px;}
	.WowFunctional dl:last-child{margin-bottom:0;}
	
	.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{padding: 5% 0;flex-basis: 33.3%;}
	.sol ul.tabbernav li:first-child{border:0}
	.sol ul.tabbernav li a{font-size: 1rem;}
	.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::after {background: #fff;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 img{width:100%;margin: 5% 0;}
	.webImg p{font-size: 0.95rem;margin-bottom: 5%;}
	
}