@charset "utf-8";

@font-face {
    font-family: 'NEXON Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight:400;
    font-style:normal;
}
@font-face {
    font-family: 'NEXON Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight:600;
    font-style:normal;
}
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');



[lang|='ko'], [lang|='ko']>* {font-family:"NEXON Gothic", sans-serif;font-size:18px;font-weight:400;letter-spacing:-.05em}



* {margin:0; padding:0; box-sizing: border-box;}
*:after,
*:before {box-sizing:border-box;}

a {text-decoration: none; color:inherit;}
ul, li, ol {list-style: none;}
select {background:url(/resource/img/maskstore/ico_arrow_down.png) no-repeat center right 10px; border:1px solid #ddd; height:40px; padding: 0 35px 0 10px; -webkit-appearance:none; -ms-appearance:none; -moz-appearance: none; font-size: inherit;}
select::-ms-expand {display:none;}
input {border:0; background:none; font-size: inherit;}
button {font-size: inherit; border:0; background:none; height:40px; padding: 0 10px; background:#6a7a90; color:#fff; cursor:pointer; vertical-align:middle;}
html {font-size:10px;}
body {font-size: 1.5em; font-family: "NanumSquareRoundEB", sans-serif; line-height:1;}



#intro {background:url(/_res/portal/img/intro/bg_intro.png) no-repeat right top / cover;/* height:100vh; */height:auto; position:relative; text-align: center;}
#intro .wrap {max-width:1200px; height: 100%; overflow:hidden; margin:0 auto;}
#intro .wrap > a > p {margin-bottom:40px;}
#intro .wrap > a > p > img {max-width:100%;}
#intro .wrap .logo {padding:85px 0 95px 0; display:block;}
#intro .wrap .title {margin-bottom:70px; font-size:1.2em; line-height:1.4; word-break: keep-all;}
#intro .wrap .intro_list {height:703px;}
#intro .wrap .intro_list.type2 {padding:0 16.65%;} /* 2개 일 때 */
#intro .wrap .intro_list:after {content:""; display:block; clear:both;}
#intro .wrap .intro_list > li {float:left;width:33.3%;height:100%;max-height:480px;padding-right:30px;}
#intro .wrap .intro_list.type2 > li {float:left;width:50%;height:100%;max-height:515px;padding-right:30px;}
#intro .wrap .intro_list > li:last-child {padding-right:0;}
#intro .wrap .intro_list > li > div {display:block; height:100%; border-radius:30px; background: #fff;}

#intro .wrap .intro_list .txt {width:100%; height:100%; background:#fff;}
#intro .wrap .intro_list .txt.bg1{border-radius:30px; background:url(/portal/img/intro/bg_01.png) no-repeat 100% 100%;}
/* #intro .wrap .intro_list .txt.bg2{border-radius:30px; background:url(/portal/img/intro/bg_02.png) no-repeat 100% 100%;} */
#intro .wrap .intro_list .txt.bg2{border-radius:30px;background:linear-gradient(#c3edff, #027be0);}
#intro .wrap .intro_list.type2 .txt.bg2{
    border-radius: 30px;
    background: linear-gradient(#c3edff, #027be0);
}
#intro .wrap .intro_list .txt.bg3{border-radius:30px;background: linear-gradient(#ff8e62, #e90a74);}
#intro .wrap .intro_list .txt.bg4{border-radius:30px;background:linear-gradient(#3e74be, #2b4871);}
#intro .wrap .intro_list .txt > div {vertical-align: top;}
#intro .wrap .intro_list .txt .titleimg1{margin-top:-121px;}
#intro .wrap .intro_list .txt .titleimg2{margin-top:94px;}
#intro .wrap .intro_list .txt .titleimg3{margin-top:-48px;}
#intro .wrap .intro_list .txt .titleimg4{margin-top:-120px;}
#intro .wrap .intro_list .txt .tt1{color:#fff; font-size:32px; font-weight:600; margin-top:10px;}
#intro .wrap .intro_list .txt .tt1 .small{display:block; font-size:16px; font-weight:normal; margin-bottom:16px;}
#intro .wrap .intro_list .txt .tt1 .small2{display:block; font-size:20px; width:230px; font-weight:500; margin:13px auto 0 auto; padding-top:10px;border-top:1px solid #fff;}

#intro .wrap .intro_list .txt.bg2 .tt1{margin-top:20px; margin-bottom:8px;}
#intro .wrap .intro_list .txt.bg3 .tt1{margin-top:30px; margin-bottom:18px;}
/* #intro .wrap .intro_list .txt.bg3 .tt1{margin-top:39px; margin-bottom:8px;} */
#intro .wrap .intro_list .txt.bg4 .tt1{margin-top:18px; margin-bottom:8px;}
#intro .wrap .intro_list .txt a{float:none;}
#intro .wrap .intro_list .txt .more {display:inline-block; color:#fff; margin-top:20px; padding:17px 65px; border: solid 1px #fff; border-radius:50px; line-height:1; white-space:nowrap;}
#intro .wrap .intro_list .txt .more:hover{background:#fff; color:#000; transition:0.5s;}
#intro .wrap .intro_list .txt .more.ss {margin-top:5px; padding:17px 58px;}
#intro .wrap .intro_list .txt .more.sss{margin-top:5px; padding:17px 25px;}
#intro .wrap .intro_list .txt .more.type2{margin-top:5px;padding:12px 65px;}
#intro .wrap .intro_list .txt .more.type2.pd2{padding:12px 56px;}
#intro .wrap .intro_list .txt .more.type2.pd3{padding:12px 46px;}
#intro .wrap .intro_list > li li {display:table; width:100%; border-bottom:1px solid #ddd; padding:7px 0;}
#intro .wrap .intro_list > li li:last-child {border-bottom:0;}
#intro .wrap .intro_list > li li span {display:table-cell; width:50%; vertical-align: middle;}
#intro .wrap .intro_list > li li span:nth-child(1) {color:#666; text-align:left;}
#intro .wrap .intro_list > li li span:nth-child(2) {text-align:right;}

#intro .wrap .intro_list > li ul.check{list-style:none;margin:0;padding:.5em .8em;text-align:left;}
#intro .wrap .intro_list > li ul.check li{margin:.475em 0;padding:0 0 0 1.8em;font-size:0.813em;color:#fff;line-height:1.4;letter-spacing:0;border-bottom:0;background:url(/_res/portal/img/intro/checkbg.png) no-repeat .125em -0.1em;}

#intro .wrap .copy {color:#666; padding:20px; border-top:1px solid #aaa; font-size: 0.9em;}

@media all and (max-width:1187px){
	#intro .wrap .tt {display:none;}
}

@media all and (max-width:1179px){
	#intro .wrap .intro_list .txt em {font-size: 1.4em;}
	#intro .wrap .intro_list .txt .tt {font-size:0.9em;}
}
@media all and (max-width:1024px){
	body {font-size:1.4em;}
	#intro {/*background:url(/portal/img/intro/bg_intro.jpg) no-repeat center;*/height:140vh;}
	#intro:before {height:30%;}
	#intro .wrap > a > p {margin:30px 0;}
	#intro .wrap .logo { text-align: center;}
	#intro .wrap .logo img{}
	#intro .wrap .title {display:none;}
	/*#intro .wrap .intro_list {max-width:500px; height:600px; padding: 0 10px; margin:0 auto;}*/
	#intro .wrap .intro_list.type2{padding:4.1625%}
	#intro .wrap .intro_list > li { height:100%; padding: 0 10px 10px;/* max-height:385px; */max-height:480px;}
	#intro .wrap .intro_list.type2 > li { padding-right:10px;}
	#intro .wrap .intro_list > li:last-child{padding-right:10px;}
	#intro .wrap .intro_list .img img {top:45%; left:55%;}
	#intro .wrap .intro_list > li:last-child {margin-bottom:0;}
	#intro .wrap .intro_list > li > div {height:100%;}
	#intro .wrap .intro_list > li > div:after {content:""; display:block; clear:both;}
	#intro .wrap .intro_list .txt {height:100%;background-size: 90px;background-position-x: 20px;}
	
	#intro .wrap .intro_list .txt .titleimg1{max-width:80%;margin-top:-6em;}
	#intro .wrap .intro_list .txt .titleimg2{max-width:70%;margin-top:94px;}
	#intro .wrap .intro_list .txt .titleimg3{max-width:80%;}
		
	#intro .wrap .intro_list .txt .tt1 .small{font-size:16px; margin-bottom:8px;}
	#intro .wrap .intro_list .txt .tt1 .small2{font-size:19px;margin:8px auto 0 auto; padding-top:8px;}
	#intro .wrap .intro_list .txt .tt1{font-size:27px;}	
	#intro .wrap .intro_list .txt.bg2 .tt1{margin-top:20px; margin-bottom:8px;}
	#intro .wrap .intro_list .txt.bg3 .tt1{margin-top:25px; margin-bottom:8px;}

	#intro .wrap .intro_list .txt a {text-align:center;}
	#intro .wrap .intro_list .txt .more {margin-top: 15px;}
	
	#intro .wrap .intro_list > li ul.check li{margin:.375em 0;font-size:0.75em;}

}
@media all and (min-width:768px){
	
	.visible {display:block;}
	.hidden_768 {display:none;}
	.hidden_486 {display:none;}
	

}

@media all and (max-width:767px){
	#intro{height:auto;}
/*	#intro{height:123vh;} */
	#intro .wrap .intro_list.type2{padding:0}
	#intro .wrap .intro_list > li {width:50%;/* max-height:420px; */max-height:460px; margin-top:3.5em;}
	#intro .wrap .intro_list.type2 > li {width:50%; max-height:420px; margin-top:3.5em;}
	#intro .wrap .logo{padding:50px 0 60px 0;}
	#intro .wrap .intro_list .txt a{display:block;}
	#intro .wrap .intro_list .txt.bg3 .tt1{margin-top:35px; margin-bottom:18px;}
	.visible {display:none;}
	.hidden_768 {display:block;}
	.hidden_486 {display:none;}
}


@media all and (max-width:500px){
#intro{height:auto;}
#intro .wrap .intro_list > li {width:100%; max-height:460px;}
#intro .wrap .intro_list.type2 > li {width:100%; max-height:440px;}
#intro .wrap .intro_list .txt.bg1{background:url(/portal/img/intro/bg_01.png) no-repeat center bottom; background-size:100%;}
/* #intro .wrap .intro_list .txt.bg2{background:url(/portal/img/intro/bg_02.png) no-repeat center bottom; background-size:100%;} */
#intro .wrap .intro_list .txt.bg2{border-radius:30px;background:linear-gradient(#c3edff, #027be0);}
#intro .wrap .intro_list .txt .titleimg1{max-width:60%;margin-top:-7em;}
#intro .wrap .intro_list .txt .titleimg2{max-width:70%;margin-top:68px;}
#intro .wrap .intro_list .txt .titleimg3{max-width:70%;}
}

@media all and (max-width:486px){
#intro {/*background: #0073c0 url(/portal/img/intro/bg_intro.jpg) no-repeat center bottom;*/}
.visible {display:none;}
.hidden_768 {display:none;}
.hidden_486 {display:block;}
#intro .wrap .intro_list > li {/* max-height:400px; */max-height:440px;} 
#intro .wrap .intro_list .txt em { font-size: 1.3em; }
	
}

@media all and (max-width:358px){
	#intro .wrap .intro_list .txt {width:100%; background-image: none;}
	#intro .wrap .intro_list .txt.bg2{background-image: none;}
	#intro .wrap .intro_list .txt.bg3{/*background-image: none;*/}
	#intro .wrap .intro_list .txt.bg4{background-image: none;}
	#intro .wrap .intro_list .txt em { font-size: 1.3em;margin-left: 0; }
	#intro .wrap .intro_list .txt .more {margin-left: 0;}
	#intro .wrap .intro_list .txt .more2 {margin-left: 0;}
	
}