@charset "utf-8";

	@font-face {
		font-family: 'KBO-Dia-Gothic_bold';
		src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
		font-weight: 700;
		font-style: normal;
	}
	.kbo { font-family: 'KBO-Dia-Gothic_bold'; }
	.row { margin:0; }
	.whiteS { white-space:nowrap; }
	.whiteBox { background-color:#fff; padding:50px 15px !important; }

	#nt_body .nt-container { max-width:100%; padding:0 !important; margin:0 !important; }
	#nt_body .nt-container-wide { max-width:100%; padding:0 !important; margin:0 !important; }
	#Content { word-break:keep-all; }
	#Content h2 { font-size:38px; line-height:1.5em; margin-bottom:30px; }
	#Content h3 { font-size:32px; line-height:1.5em; }
	#Content h4 { font-size:22px; line-height:1.5em; }
	.swiper-pagination-bullet { width:30px; height:10px; border-radius:8px; background: var(--swiper-pagination-bullet-inactive-color,#fff) !important; opacity:1; }
	.swiper-pagination-bullet-active { width:30px; height:10px; border-radius:8px; background:#007aff !important; }
	
	
	/* 메인 */
	/* 메인 */
	/* 메인 */
	#Content .con01.row { position:relative; width:100%; height:700px; background: url('/img/welinkor/main_top.png') no-repeat center center;background-size:cover; }
	#Content .con01.row:after { content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.4); position:absolute; top:0; left:0; z-index:2; }
	#Content .con01 .textBox { width:90%; margin:0 auto; z-index:3; position:absolute; bottom:100px; left:10%; color:#fff; }	
	#Content .textBox h2 img { width:50px; display:inline-block; }
	#Content .con04.row { position:relative; width:100%; height:400px; background: url('/img/welinkor/main_bottom.png') no-repeat center center;background-size:cover; }
	#Content .con04.row:after { content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.4); position:absolute; top:0; left:0; z-index:2; }
	#Content .con04 .textBox { width:90%; margin:0 auto; z-index:3; position:absolute; top:50%; left:10%; transform:translateY(-50%); color:#fff; }	
	#Content .con04 .textBox .appBtn { display:inline-block; padding:0; margin-bottom:10px; margin-right:10px; }
	#Content .con04 .textBox .appBtn a img { width:30px; display:inline-block; }
	#Content .con04 .textBox .appBtn a img.icon06 { display:none !important; }
	#Content .con04 .textBox .appBtn a { white-space:nowrap; padding:0; color:#333; border:2px solid #fff; background-color:#fff; padding:8px 15px; border-radius:30px; display:inline-block; }
	#Content .con04 .textBox .appBtn a:hover { color:#fff; background-color:transparent; }
	#Content .con04 .textBox .appBtn a:hover img.icon05 { display:none !important; }
	#Content .con04 .textBox .appBtn a:hover img.icon06 { display:inline-block !important; }
	
	.textBox ul { padding-left:20px; } 
	.textBox li { position:relative; }
	.textBox ul li:before { content:""; display:inline-block; width:20px; height:20px; background: url('/img/welinkor/i_check.png') no-repeat center center;background-size:cover; position:absolute; top:5px; left:-25px;}
	
	@media screen and (min-width:768px){
		#Content .con02 .textBox, #Content .con03 .textBox { width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
	}
	@media screen and (max-width:1200px){		
		#Content h2 { font-size:26px;}
		#Content h3 { font-size:20px;}
		#Content h4 { font-size:18px;}
	}
	@media screen and (max-width: 767px) {
		#Content .con01.row { height:500px; }
		#Content .con01 .textBox { width:100%; left:50%; transform:translateX(-50%); }
		#Content .con04 .textBox { width:100%; left:50%; transform:translate(-50%,-50%); }
		#Content .con02 .textBox, #Content .con03 .textBox { position:relative; top:auto; height:auto; padding:80px 0; width:95%; }
		#Content .con04 .textBox .appBtn { display:block; }
		#Content .con02 h2, #Content .con03 h2 { text-align:center; }
		#Content .whiteBox { padding:0 15px !important; }
	}
	
	


	/* 서비스 */
	/* 서비스 */
	/* 서비스 */
	#Service { word-break:keep-all; }
	#Service h2 { font-size:38px; line-height:1.5em; margin-bottom:30px; }
	#Service h3 { font-size:32px; line-height:1.5em; }
	#Service h4 { font-size:22px; line-height:1.5em; }

	#Service .con01.row { position:relative; width:100%; height:300px; background:linear-gradient(to right, rgb(73 144 219), rgb(135 210 210)); /* background: url('/img/welinkor/ser00.jpg') no-repeat center center; background-size:100% auto;  */}
	#Service .con01.row:after { content:""; display:block; width:100%; height:100%; /* background:rgba(0,0,0,0.2); */ position:absolute; top:0; left:0; z-index:2; }
	#Service .con01 h2 { width:80%; margin:0 auto; z-index:5; text-align:left; position:absolute; top:50%; left:10%; transform:translateY(-50%); color:#fff; }	
	#Service .con01 img { max-width:300px; width:80%; position:absolute; bottom:-8px; right:15%; z-index:3; }

	#Service .con05.row { position:relative; width:100%; height:300px; background:linear-gradient(to left, rgb(255 129 22), rgb(250 251 80));/* background: url('/img/welinkor/ser01.jpg') no-repeat center center; background-size:100% auto; */ }
	#Service .con05.row:after { content:""; display:block; width:100%; height:100%; /* background:rgba(0,0,0,0.2); */ position:absolute; top:0; right:0; z-index:2; }
	#Service .con05 h2 { width:80%; margin:0 auto; z-index:5; text-align:right; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; }	
	#Service .con05 img { max-width:500px; width:80%; position:absolute; bottom:0; left:5%; z-index:3; }
	
	#Service .mockup { width:40%;max-width:300px;min-width:180px;display:inline-block; }

	@media screen and (min-width:768px){
		#Service .con02 .textBox, #Service .con03 .textBox { width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
	}
	@media screen and (max-width: 767px) {		
		#Service h2 { font-size:26px; text-align:center; }
		#Service h3 { font-size:20px;}
		#Service h4 { font-size:18px;}
		#Service .con01.row, #Service .con05.row { height:180px;  }
		#Service .con01 img { bottom:-4px; right:20px;  max-width:180px; }
		#Service .con05 img { bottom:0px; left:20px;  max-width:260px; }
		#Service .whiteBox { padding-top:0px !important; }
	}
	@media screen and (max-width: 480px) {
		#Service .con01.row, #Service .con05.row { height:200px; }
		#Service .mockup { width:35%; min-width:auto; }
	}