@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}


#skipNavi {height:0;}
#skipNavi .skipLink {position:absolute;top:-9999px;left:-9999px;}
#skipNavi .skipLink:focus, #skipNavi .skipLink:active {top:0;left:0;background:#174BA1;color:#fff;}

/* 글자 속성 */
a{color:#fff;text-decoration:none;}
a:visited,a:visited *{color:#fff;text-decoration:none;}
a.visited,a.visited:visited{color:#fff;text-decoration:none;}
a:hover,a:hover *,a.visited:hover{color:#fff;text-decoration:none;}


html, body {width:100%;height:100%;  background:#edf2f9 url(../intro/bg.jpg) no-repeat center bottom 80px;}
body {font-family: 'Pretendard-Regular';}
#wrap{max-width: 1200; margin:0 auto;}

#in_container{ padding-bottom:100px; box-sizing:border-box;  }
.logo{display: flex;  justify-content: space-between;  align-items: center; padding:60px 80px 0 80px;}

.in_con{width: 1000px; margin:50px auto 0 auto;   }
.top_wrap{display: flex; justify-content: center; align-items: baseline; font-size: 28px;  color: #000; line-height: 35px;}
.top_wrap .top_text2{font-size: 36px; margin-left:10px;}
.top_wrap .top_text2 span{position: relative;}
.top_wrap .top_text2 span:after{content: ''; height: 10px;  width: 10px; border-radius: 50%;  background: #e0126e;  position: absolute;  left: 50%;  top: -16px; transform: translate(-50%, 0%);}

.middle_wrap{font-size:76px; line-height: 95px; margin:20px 0;  display: flex; justify-content: center;     }
.middle_wrap div{position: relative;}
.middle_wrap div:after{content: '';  border-radius: 30px;  height: 21px;  background: #d1e2ec;  position: absolute;  width: 105%;  z-index: 0;  transform: translate(-50%, 0);  left: 50%; bottom: 9px;}
.middle_wrap div span{z-index: 1; position: relative;}

.bottom_wrap{display: flex; margin: 30px auto 80px auto;     text-align: center;  align-items: center; justify-content: center;}
.bottom_wrap br{display:none;}
.box_wrap{display: flex; justify-content: center; }
.box_wrap .box{background:#edf2f9 url(../intro/box_01.png) no-repeat center bottom; border-radius:50px; padding:53px 60px 30px 60px;     box-sizing: border-box; min-width: 436px; margin: 0 30px; text-align: center;     box-shadow: 5px 10px 30px rgb(0 0 0 / 30%);} 
.box_wrap .box:last-child{background:#edf2f9 url(../intro/box_02.png) no-repeat center bottom; }
.box_wrap .box .inner{font-size: 27px;  margin-bottom: 20px; display: flex;  align-items: center;  justify-content: center;  height: 32px; font-weight: 700;}
.box_wrap .box .btxt{font-size:18px;     line-height: 24px;     min-height: 100px;     display: flex;
    align-items: center;
    justify-content: center;word-break:keep-all;}
.box_wrap .box .title{    font-size: 20px;
    line-height: 25px;
    padding: 15px 0 15px 0;
    border-radius: 30px;
    background: #fff; margin-top: 30px;
    color: #0759a9; font-weight: 700;}
.box_wrap .box:last-child .title{color:#008b25;}
.box_wrap .box a, .box_wrap .box a:hover{color:#fff; display: block;}




.bottom_text{color:rgba(1, 64, 153, 50%); font-family: 'GmarketSansBold'; font-size: 18px; text-align: center; margin-top:60px; }

footer{background:#16324d; color:#fff;  font-family: 'Pretendard-Light'; font-size:17px; padding:30px 0;  font-weight: 200; min-height:110px; box-sizing: border-box; width: 100%;}
footer br{display:none;}
footer .add{display: flex; justify-content: center; margin-bottom:7px}
footer .add p{margin:0 10px;}
.copyright{text-align: center;}

.c_blue{color:#014099; font-family: 'GmarketSansBold';}
.c_green{color:#1c8681; font-family: 'GmarketSansBold';}
.c_pink{color:#e0126e; font-family: 'GmarketSansBold';}




@media screen and (max-width: 1024px){

	.in_con{width:100%; padding:0 20px; box-sizing: border-box;}
	.logo{justify-content: center;}
	.logo img:first-child{display:none;}
	
	
	.bottom_wrap img{width:100%; }

	.box_wrap{flex-wrap: wrap;} 
	.box_wrap .box{min-width:100%; background-size: cover; margin: 15px 0px;}
	.box_wrap .box:last-child{background-size: cover;}


	
}

@media screen and (max-width: 500px){
	.logo img,
	.box_wrap .box .inner img{width:200px;}
	.bottom_wrap{margin: 30px auto;}

	footer .add{flex-wrap: wrap;}
}



/* @media screen and (max-width: 999px){

	#in_container{height:auto; padding-bottom:30px;}
	.logo{padding:20px }
	.in_con{width: 100%; padding:0 20px; box-sizing:border-box;}
}

@media screen and (max-width: 768px){

.box_wrap{flex-wrap: wrap;}
.box_wrap .box{width: 80%;     margin: 0 0 20px 0; }
.top_wrap, .top_wrap .top_text2{font-size:20px;}	
.top_wrap .top_text2 span:after{height:5px; width: 5px; top:-10px;}
.middle_wrap{font-size:50px; line-height: 55px;}
.middle_wrap div:after{bottom:2px;}
.bottom_text1, .bottom_text2{font-size:20px;}
.bottom_wrap{    box-sizing: border-box; width: 100%;}
.logo img{width: 100px;}
footer{ font-size: 14px;}
footer .add{    flex-wrap: wrap;}
footer br, .bottom_wrap br{display:block;}

}


@media screen and (max-width: 540px){
    .in_con{margin: 18px auto 0 auto;}
	.top_wrap, .top_wrap .top_text2{font-size:14px;}
	.middle_wrap{margin:10px 0;}
	.bottom_wrap{margin: 16px auto;}
	.bottom_text1, .bottom_text2 {
		font-size: 14px;
		word-break: keep-all;
		text-align: center;
		line-height: 1.4;
	}
    .box_wrap .box .inner{height: 100px;}
    .box_wrap .box .inner img{width: 54%;}
    .box_wrap .box .title{font-size: 15px; padding: 10px 0 7px 0;}
    .middle_wrap{font-size: 44px;}
    .bottom_text{font-size: 14px;}
}
@media screen and (max-width: 360px){
    .top_wrap, .top_wrap .top_text2{display: block; text-align: center;}
} */