@charset "UTF-8";

/* (주)한신정보기술 권오환 - 2020.04 */
html,body{overflow-x:hidden;font-family: 'NotoKr','Malgun Gothic','맑은 고딕',Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif}

.wrap{position:relative; width:1200px; margin-right:auto; margin-left:auto;}
@media all and (max-width:1200px){
    #wrapper{min-width:1000px;}
    .wrap{width:1000px;}
}
@media all and (max-width:1000px){
    #wrapper{min-width:0;}
    .wrap{width:auto; margin-right:0; margin-left:0; padding-right:3%; padding-left:3%;}
}

/*
body{position:relative; height:100vh; margin:0;}
body:before{display:block; position:absolute; top:0; left:0; width:100%; height:500px; background-color:#E4E9F4; z-index:-1; content:'';}
body:after{display:block; position:absolute; top:-48px; right:120px; width:583px; height:593px; background-image:url("../images/intro_bg.png"); background-size:cover; background-repeat:no-repeat; background-position:center; content:'';}
*/
.logo{position:relative; padding-top:30px; text-align:center;}
.logo:before{display:block; position:absolute; top:0; left:50%; width:calc(100vw + 1px); height:700px; transform:translate(-50%);
    background: #3460c9; /* Old browsers */
    background: -moz-linear-gradient(left, #3460c9 0%, #3266cb 10%, #3066c8 10%, #3266cb 10%, #3068c9 10%, #2f6ac8 14%, #2f69ca 15%, #2f6cc9 16%, #2d6cc9 19%, #2c72ca 23%, #2973c8 27%, #2a76ca 28%, #2977c9 30%, #2778c7 30%, #2977c9 30%, #2977c9 31%, #247fc8 36%, #2482c8 42%, #2187c9 44%, #2087c9 46%, #208ac8 47%, #1d92c8 55%, #1a92c7 56%, #1b95c8 57%, #1a93c8 58%, #179cc9 64%, #13a3c6 73%, #11a8c7 76%, #10a9c8 80%, #0cb3c6 90%, #0ab7c7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #3460c9 0%,#3266cb 10%,#3066c8 10%,#3266cb 10%,#3068c9 10%,#2f6ac8 14%,#2f69ca 15%,#2f6cc9 16%,#2d6cc9 19%,#2c72ca 23%,#2973c8 27%,#2a76ca 28%,#2977c9 30%,#2778c7 30%,#2977c9 30%,#2977c9 31%,#247fc8 36%,#2482c8 42%,#2187c9 44%,#2087c9 46%,#208ac8 47%,#1d92c8 55%,#1a92c7 56%,#1b95c8 57%,#1a93c8 58%,#179cc9 64%,#13a3c6 73%,#11a8c7 76%,#10a9c8 80%,#0cb3c6 90%,#0ab7c7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #3460c9 0%,#3266cb 10%,#3066c8 10%,#3266cb 10%,#3068c9 10%,#2f6ac8 14%,#2f69ca 15%,#2f6cc9 16%,#2d6cc9 19%,#2c72ca 23%,#2973c8 27%,#2a76ca 28%,#2977c9 30%,#2778c7 30%,#2977c9 30%,#2977c9 31%,#247fc8 36%,#2482c8 42%,#2187c9 44%,#2087c9 46%,#208ac8 47%,#1d92c8 55%,#1a92c7 56%,#1b95c8 57%,#1a93c8 58%,#179cc9 64%,#13a3c6 73%,#11a8c7 76%,#10a9c8 80%,#0cb3c6 90%,#0ab7c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3460c9', endColorstr='#0ab7c7',GradientType=1 ); /* IE6-9 */

}
.logo:after{display:block; position:absolute; top:0; right:-250px; width:583px; height:500px; background:url('../images/intro_bg.png') no-repeat 0 0; background-size:cover;}
.logo h1{position:relative; margin:0; z-index:9;}
.logo .logo_text{display:block; position:relative; margin-top:26px; font-size:17px; line-height:19px; z-index:9;}
@media all and (max-width:1000px) {
    .logo:after{height:420px; right:auto; left:50%;}
    .logo:before{height:420px;}
}
@media all and (max-width:800px) {
    .logo:after{display:none;}

}



body .logo_text{display:block; margin-top:26px; font-size:17px; line-height:19px;}
body #footer{margin-top:106px; margin-bottom:100px; text-align:center; font-size:14px; line-height:16px; color:#636363;}

.intro_popup{text-align:center; margin-bottom:15px; margin-top: -36px;}

@media all and (max-width:1000px) {
    body{overflow:hidden;}
    body .logo .logo_image{width:123px;}
    body .logo_text{font-size:13px; line-height:16px;}
}

@media all and (max-width:800px){
    body .logo{padding-top:26px;}
    body .logo .logo_image{width:84px;}
    body br{display:block;}
    body #footer{margin-top:20px; font-size:12px;}
}
#container .intro{margin-top:35px;}
#container .intro .intro_list{margin-left:-35px;}
#container .intro .intro_item{float:left; width:48%; height:360px; padding-left:35px;} 

@media all and (max-width:1200px) {
    #container .intro{padding-left:0; padding-right:0;}
}
@media all and (max-width:1000px) {
    #container .intro .intro_item{padding-left:20px; height:300px;}
    #container .intro .intro_list{margin-left:-20px;}
}
@media all and (max-width:800px) {
    #container .intro{margin-top:19px;}
    #container .intro .intro_item{float:none; margin-bottom:5px; width:100%; height:auto;}
}

#container .intro .intro_link{transition-property:all; transition-duration:0.25s; transition-timing-function:linear;}
#container .intro .intro_link{display:block; position:relative; width:100%; height:100%; text-align:center; box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75); border-radius:20px; background-color:#fff; transition-property:margin-top, background-color, border-color;}
#container .intro .intro_link:before{display:block; position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; background-size:cover; background-repeat:no-repeat; content:'';}
#container .intro .intro_text_box{position:absolute; left:auto; top:219px; width:100%; /* transition-property:top; */}

#container .intro .intro_item.n1 .intro_link:before{top:40px; width:160px; height:153px; background-image:url("../images/list_1.png");}
#container .intro .intro_item.n2 .intro_link:before{top:40px; width:171px; height:127px; background-image:url("../images/list_2.png");}
#container .intro .intro_item.n3 .intro_link:before{top:32px; width:220px; height:155px; background-image:url("../images/list_3.png");}
#container .intro .intro_item.n7 .intro_link:before{top:32px; width:262px; height:127px; background-image:url("../images/list_7.png");}
#container .intro .intro_item.n8 .intro_link:before{top:32px; width:187px; height:158px; background-image:url("../images/list_7.png");}
#container .intro .intro_item.n5 .intro_link:before{top:66px; width:79px; height:113px; background-image:url("../images/minseon_icon.png");}
#container .intro .intro_item.n9 .intro_link:before{top:32px; width:250px; height:150px; background-image:url("../images/list_9.png");}


#container .intro .intro_item.n1 .intro_link:hover{background-color:#47a15f; border-color:#47a15f;}
#container .intro .intro_item.n2 .intro_link:hover{background-color:#143eaa; border-color:#143eaa;}
#container .intro .intro_item.n3 .intro_link:hover{background-color:#5e61c5; border-color:#5e61c5;}
#container .intro .intro_item.n4 .intro_link:hover{background-color:#E66868; border-color:#E66868;}
#container .intro .intro_item.n5 .intro_link:hover{background-color:#47a15f; border-color:#47a15f;}
#container .intro .intro_item.n7 .intro_link:hover{background-color:#ca8f02; border-color:#ca8f02;}
#container .intro .intro_item.n8 .intro_link:hover{background-color:#ffdbdb; border-color:#ffdbdb;}
#container .intro .intro_item.n9 .intro_link:hover{background-color:#122f6b; border-color:#122f6b;}

@media all and (max-width:1000px){
    #container .intro .intro_item.n1 .intro_link:before{top:48px; width:122px; height:117px;}
    #container .intro .intro_item.n2 .intro_link:before{top:38px; width:155px; height:116px;}
    #container .intro .intro_item.n3 .intro_link:before{top:49px; width:177px; height:124px;}
    #container .intro .intro_item.n4 .intro_link:before{top:49px; width:176px; height:124px;}
	#container .intro .intro_item.n7 .intro_link:before{top:49px; width:177px; height:124px;}
    #container .intro .intro_item.n8 .intro_link:before{top:49px; width:176px; height:124px;}
	#container .intro .intro_item.n9 .intro_link:before{top:49px; width:176px; height:124px;}
    /* #container .intro .intro_item.n1 .intro_link:hover:before{top:170px;} */
}
@media all and (max-width:800px){
    #container .intro .intro_link{text-decoration:none;}
    #container .intro .intro_link:hover{margin-top:0;}
    #container .intro .intro_item .intro_link:before{margin-left:0; margin-right:0; background-size:cover;}
    #container .intro .intro_item.n1 .intro_link:before{top:16px; left:30px; width:75px; height:72px;}
    #container .intro .intro_item.n2 .intro_link:before{top:16px; left:27px; width:93px; height:69px;}
    #container .intro .intro_item.n3 .intro_link:before{top:16px; left:23px; width:107px; height:75px;}
	#container .intro .intro_item.n5 .intro_link:before{top:10px; left:40px; width:55px; height:82px;}
    #container .intro .intro_item.n4 .intro_link:before{top:5px; left:25px; width:104px; height:73px;}
    #container .intro .intro_item.n7 .intro_link:before{top:16px; left:27px; width:93px; height:69px;}
    #container .intro .intro_item.n8 .intro_link:before{top:10px; left:23px; width:80px; height:65px;}
	#container .intro .intro_item.n9 .intro_link:before{top:10px; left:23px; width:110px; height:65px;}
    #container .intro .intro_item .intro_link:hover:before{top:16px !important;}
	#container .intro .intro_item.n8 .intro_link:hover:before{top:10px !important;}
    #container .intro .intro_link:hover .intro_text_box{top:auto;}

}


#container .intro .intro_title{display:inline-block; position:relative; margin-bottom:25px;  font-size:22px; line-height:24px; font-weight:600;}
#container .intro .intro_title:after{display:block; position:absolute; top:4px; right:-15px; width:10px; height:10px; content:'';}
#container .intro .minseon_item{position:relative; width:640px; height:130px; margin:0 auto 30px; border-radius:20px; box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75); background-color:#00a99d; text-align:center; transition:.2s background-color ease-in-out;}
#container .intro .minseon_item:hover{background-color:#fff; transition:.2s background-color ease-in-out;}
#container .intro .minseon_item .minseon_anchor{display:block; width:100%; height:100%;}
#container .intro .minseon_item .minseon_text_box{display:inline-block; position:relative; margin-top:40px; padding-left:93px; text-align:left;}
#container .intro .minseon_item.ready .minseon_text_box{margin-top:20px;}
#container .intro .minseon_item .minseon_text_box:before{display:block; position:absolute; left:0; bottom:-20px; width:79px; height:113px; background-image:url('../images/minseon_icon.png'); background-size:cover; background-repeat:no-repeat; content:'';}
#container .intro .minseon_item .minseon_title{display:inline-block; position:relative; margin-bottom:8px; font-size:28px; line-height:30px; color:#fff; font-weight:600;}
#container .intro .minseon_item .minseon_title:after{display:block; position:absolute; top:11px; right:-20px; width:10px; height:10px; background-image:url('../images/link_icon.png'); content:'';}
#container .intro .minseon_item:hover .minseon_title:after{background-image:url("../images/minseon_link.png");}
#container .intro .minseon_item .minseon_text{font-size:16px; line-height:18px; color:#fff;}
#container .intro .minseon_item:hover .minseon_title{color:#00a99d;}
#container .intro .minseon_item:hover .minseon_text{color:#636363;}
#container .intro .minseon_item .minseon_notice{display:none; position:relative; top:10px; left:auto; font-size:16px; font-weight:600; color:#fff;}
#container .intro .minseon_item .minseon_notice br{display:none;}
#container .intro .minseon_item:hover .minseon_notice{color:#000;}
#container .intro .minseon_item.ready .minseon_notice{display:block;}
#container .intro .minseon_item .minseon_notice span{width:20px; line-height:0;}
#container .intro .minseon_item .minseon_notice span img{vertical-align:sub;}

#container .intro .intro_item .intro_title{color:#111;}
#container .intro .intro_item.n1 .intro_title{color:#498610;}
#container .intro .intro_item.n1 .intro_title:after{background-image:url("../images/link_icon1.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n2 .intro_title{color:#0837ae;}
#container .intro .intro_item.n2 .intro_title:after{background-image:url("../images/link_icon2.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n3 .intro_title span{display:inline; color:#5839bb;}
#container .intro .intro_item.n3 .intro_title:after{display:none; background-image:url("../images/link_icon3.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n4 .intro_title span{color:#E66868;}
#container .intro .intro_item.n4 .intro_title:after{display:none; background-image:url("../images/link_icon3.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n5 .intro_title{color:#498610;}
#container .intro .intro_item.n5 .intro_title:after{background-image:url("../images/link_icon1.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n5 .intro_title:hover{color:#fff;}
#container .intro .intro_item.n7 .intro_title{color:#ca8f02;}
#container .intro .intro_item.n7 .intro_title:after{background-image:url("../images/link_icon1.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n8 .intro_title{color:#fc6060;}
#container .intro .intro_item.n8 .intro_title:after{background-image:url("../images/link_icon1.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_item.n9 .intro_title{color:#122f6b;}
#container .intro .intro_item.n9 .intro_title:after{background-image:url("../images/link_icon1.png"); background-size:cover; background-repeat:no-repeat;}
#container .intro .intro_text{display:block; color:#636363; font-size:16px;}
#container .intro .intro_text br{display:block;}
#container .intro .intro_text2 {display:block; font-size:18px;color:#E66868; font-weight: 600;} /*2021-12-22 홈페이지긴급점검문구 추가 */
#container .intro .intro_link:hover .intro_title, #container .intro .intro_link:hover .intro_title span{color:#fff;}
#container .intro .intro_link:hover .intro_text{color:#fff;}
#container .intro .intro_link:hover .intro_text2{color:#fff;}
#container .intro .intro_link:hover .intro_title:after{background-image:url("../images/link_icon.png");}



/* #container .intro .intro_item.n3 .intro_text {width:200px; margin-left:auto; margin-right:auto; padding:10px 30px; border-radius:30px; background-color:#5e61c5; color:#fff; box-sizing:border-box; transition-property:background-color; transition-duration:0.25s; transition-timing-function:linear;} */
/* #container .intro .intro_item.n3 .intro_link:hover .intro_text {background-color:#fff; color:#636363; font-weight:600;} */

@media all and (max-width:1000px){
    #container .intro .intro_text_box{top:195px;}
    #container .intro .intro_item .intro_title{margin-bottom:17px; margin-left:20px; margin-right:20px; font-size:18px; line-height:20px;}
    #container .intro .intro_text{font-size:14px; line-height:16px;}
}
@media all and (max-width:800px){
    #container .intro .intro_text_box{position:relative; top:auto; left:auto; height:100%; padding-top:20px; padding-left:150px; padding-bottom:15px; text-align:left;}
    #container .intro .intro_item .intro_title{margin-left:0; font-size:16px; line-height:18px; margin-bottom:10px;}
	#container .intro .intro_item.n3 .intro_title br {display:none;}
	#container .intro .intro_item.n4 .intro_title br {display:none;}
    #container .intro .intro_text{font-size:13px;}
	#container .intro .intro_item.n3 .intro_text {width:150px; margin-right:0; margin-left:0;}
    #container .intro .minseon_item{width:100%; height:100px; margin:0 0 25px 0; text-align:left;}
    #container .intro .minseon_item.ready{height:auto;}
    #container .intro .minseon_item .minseon_text_box{width:100%; height:100%; margin-top:0 !important; padding-top:20px; padding-left:150px;}
    #container .intro .minseon_item .minseon_title{font-size:16px; line-height:18px;}
    #container .intro .minseon_item .minseon_text_box:before{top:50%; left:45px; width:60px; height:86px; margin-top:-43px;}
    #container .intro .minseon_item .minseon_title:after{top:4px; right:-15px;}
    #container .intro .minseon_item .minseon_text{font-size:13px; line-height:16px;}
    #container .intro .minseon_item .minseon_notice{top:auto; margin-top:10px; margin-bottom:10px; font-size:13px; line-height:30px;}
}
@media all and (max-width:640px){
    #container .intro .minseon_item .minseon_notice br{display:block;}
}
@media all and (max-width:640px){
	#container .intro .intro_item.n3 .intro_title br {display:block;}
}

.br_pm br{display:none;}