@charset "utf-8";
/**
 * @File Name : intro.css
 * @Description : 인트로페이지
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2025.09.30. | 김민진 | 최초 등록
 * 2026.01.14. | 정은주 | 디자인 교체
 * </pre>
 * @author 유지보수팀 정은주
 * @since 2023.11.20
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/*  */

body{background: linear-gradient( #d5f5ff, #afecff)}
html, body, #body_content, #wrap {height:100%;}
#wrap {position:relative;background-color: #afecff;background-image: url(https://www.hygn.go.kr/_res/portal/img/intro/bg2026_01_1.jpg);background-repeat:no-repeat;background-position: 50% 0;font-family:"S-CoreDream", sans-serif;}
/* #wrap {position:relative;background-color: #dcd3ca;background-image:url(https://www.hygn.go.kr/_res/portal/img/intro/intro_bg2_2.jpg);background-repeat:no-repeat;background-position: 50% 0;font-family:"S-CoreDream", sans-serif;} */
.container {max-width: 1250px;margin:auto;padding-top: 107px;text-align:center;position:relative;}
h1#logo {height: 220px;margin: 70px 0 45px;}
h1#logo img {width:auto;height:100%;}

.title{
      display:block;
      font-family:"TTWanjudaedunsanche", sans-serif;
      width:100%;
      color: #171817;
      font-weight:500;
      font-size: 63px;
      margin-bottom: 40px;
      letter-spacing: -.0125em;
      text-shadow: -1px -1px 0 #ffffff, -1px -1px 0 #ffffff, -1px 3px 0 #ffffff, -1px 3px 0 #ffffff;
      }
.title .t1{color: #1743a1;font-size: 75px;}
.title .t2{color: #147d4c;font-size: 72px;}
.title .t3{color: #f04141;font-size: 68px;}
.title .t4{font-size: 45px;}
.text {position:absolute;top: 30%;right: 4%;text-align: left;font-size: 20px;font-family: 'S-CoreDream',  '돋움',Dotum,  Helvetica,'Helvetica Neue',  Arial,sans-serif;font-weight: 600;display: block;color: #161616;}
.text ul li{display:block;padding: 5px 0 0 25px;font-size: 1.2em;background: url(../../img/lib2/ic20form1check1on1.png) no-repeat 0 .5em;letter-spacing: -.0525em;}
.text ul li .line{background: linear-gradient(to top, #ffffffcf 60%, transparent 40%);}

.intro{display:block;width:700px;height:100%;}
.intro:after{display:none;}
.intro .item {float:left;width: calc(50% - 30px);height: 270px;margin-left:40px;background-repeat:no-repeat;background-size:cover;background-position:50% 0;border-radius:20px;overflow:hidden;box-shadow:10px 10px 20px rgba(0,0,0,.2);box-sizing:border-box;}
.intro .item a {position:relative;display:block;width:100%;height:100%;color:#fff;text-indent:-9999px;z-index:99;}
.intro .item.orgo a:before {position:absolute;top: 50px;left: calc(50% - 120px);content:"";display:block;width: 237px;height: 120px;background:url(https://www.hygn.go.kr/_res/portal/img/intro/item_logo.png) no-repeat;margin:auto;transition:all .35s ease;}
.intro .item.orgo a:hover:before, .intro .item a:focus:before {top:58px;}
.intro .item:first-child {margin-left:0;}
.intro .item.main {background: linear-gradient(0deg, rgb(0 150 159) 0%, rgb(46 89 159) 100%);}
.intro .item.orgo {background-image:url(https://www.hygn.go.kr/_res/portal/img/intro/intro_img02.png);}
.intro .item.minseon {background: linear-gradient(0deg, rgb(236 136 66) 0%, rgb(233 78 91) 100%);}
.intro .item.minseon a:before {display:none;}
.intro .item.nurigo {background: linear-gradient(0deg, rgb(90 185 100) 0%, rgb(0 151 130) 100%);}
/* 익스플로러 10.0 이상을 위한 코드 - 20251128 추가 */
.intro .item.main {background: linear-gradient(to bottom,  #2e599f 0%,#00969f 100%);}
.intro .item.minseon {background: linear-gradient(to bottom,  #e94e5b 0%,#ec8842 100%);}
.intro .item.nurigo {background: linear-gradient(to bottom,  #009782 0%,#5ab964 100%);}

.intro .item .h1 {font-family:"TTWanjudaedunsanche", sans-serif;font-weight:500;font-size: 34px;line-height:1;margin-bottom:20px;color:#fff;}
.intro .item .h1 img {transition:all .35s ease;}
.intro .item .h1 img:hover{top:56px;}
.intro .item.main .h1:before{content:'';display:block;width: 200px;height: 56px;margin:0 auto 15px;background: url(https://www.hygn.go.kr/_res/portal/img/intro/item_logo2.png) no-repeat 0 0 / contain;}
.intro .item .lst li a {display:block;text-indent:0;line-height:45px;letter-spacing:-.075em;font-weight:600;color: #323232;background:#fff;border-radius:25px;transition:all .35s ease;}
.intro .item .lst li a:hover, .intro .item .lst li a:focus {text-decoration:underline;text-underline-position:under;border-top-right-radius:0;}
.intro .item.main{padding: 40px 30px 30px;}
.intro .item.orgo{padding: 0;}
.intro .item.minseon{padding: 50px 30px 30px;margin-left:0;margin-top:40px;}
.intro .item.nurigo{padding: 78px 30px 30px;margin-top:40px;}
.intro .item.minseon li:first-child{margin-bottom:8px;}

@media screen and (max-width: 1259px){
 #wrap {background-size:cover;}
.container {padding-top: 45px;}
.intro:after{position:absolute;top: 50px;right:2px;content:"";display:block;width: 100%;height: 500px;background: url(https://www.hygn.go.kr/_res/portal/img/intro/bg2026_03b.png)) no-repeat 0 0 / contain;}
.intro .item .h1{font-size:32px}
h1#logo {height: 160px;margin: 60px 0 50px;}
.intro .item {margin-left:20px;width: calc(45% - 15px);}	
.intro .item.orgo a:before {width: 178px;height: 90px;background-size: contain;left: calc(50% - 89px);}	
}


@media screen and (max-width:1045px){
 #wrap {position:relative;background-color: #afecff;background-image: url(https://www.hygn.go.kr/_res/portal/img/intro/bg2026_03.jpg);background-repeat:no-repeat;background-position: 50% 0;font-family:"S-CoreDream", sans-serif;}
 .title .b {display:block;}
 .text {position:absolute;top: 26%;right: 30%;text-align: left;font-size: 20px;font-family: 'S-CoreDream',  '돋움',Dotum,  Helvetica,'Helvetica Neue',  Arial,sans-serif;font-weight: 600;display: block;color: #161616;}
.intro {margin-top:10%}
}

@media screen and (max-width:999px){
h1#logo {margin: 50px 0 40px;height: 150px;}
#wrap {padding-left:10px;padding-right:10px}
.intro .item.main .h1:before{width: 160px;height: 45px;}
 .intro{display:block;width: 100%;height:100%;margin-top: 10%;}
 .title .b {display:block;}
 .text {right:30%}
 .text ul li{margin-left:0;} 
}


@media screen and (max-width:895px){
 #wrap {position:relative;background: linear-gradient(to left, #98398d, #454599);background-image:none;background-repeat:no-repeat;background-position: 50% 0;font-family:"S-CoreDream", sans-serif;}
.container {padding-top: 30px;}
 h1#logo {height: 120px;margin: 100px 0 30px;}
.title{width:100%;color: #1c1c1c;font-size: 34px;}
.title .t1{/* display:block; */font-size: 42px;margin-bottom:-8px;}
.title .t2{margin-bottom:-8px;}
.title .t3{font-size: 36px;}
.title .t4{font-size:23px; margin-bottom:-8px;}
.text {top: 14%;right: 11%;text-align: left;font-size: 22px;font-family: 'S-CoreDream', '돋움', Dotum, Helvetica, 'Helvetica Neue', Arial, sans-serif;font-weight: 600;display: block;color: 161616;}
.text ul li{float:left;display:block;padding: 5px 0 0 25px;font-size: .9em;background: url(../../img/lib2/ic20form1check1on1.png) no-repeat 0 .5em;margin-left: 20px;letter-spacing: -.02em;}

 
.intro{display:block;width: 100%;height:100%;margin-top: 15%;}
.intro:after{position:absolute;top: 1100px;right:2px;content:"";display:block;width: 100%;height: 226px;background: url(https://www.hygn.go.kr/_res/portal/img/intro/bg2026_01_1b.png) no-repeat 0 0 / contain;}
.intro .item {float:none;width:100%;height:auto;margin-left:0;margin-bottom:15px;padding:25px;box-sizing:border-box;display: block;}
.intro .item.orgo a:before {position:relative;top:auto;left:auto;}
/*.intro .item.orgo  {background: linear-gradient(0deg, #FF9800 0%, #e45d32 100%);}*/
.intro .item .h1 { font-size:28px;margin-bottom:10px;}
.intro .item .h1 .br{display:none;}
.intro .item.main{padding: 20px}
.intro .item.orgo{padding: 30px 10px;}
.intro .item.minseon, .intro .item.nurigo{padding: 30px 20px;}
.intro .item.orgo a:before {width: 178px;height: 90px;background-size: contain;transition:all .55s ease; top: 5px;}
.intro .item.orgo a:hover:before, .intro .item a:focus:before {top:10px;}
}
@media screen and (max-width:599px){
h1#logo {height: 100px;}
.intro{display:block;width: 100%;height:100%;margin-top: 18%;}
.text{font-size:17px;}
}

@media screen and (max-width:399px){
.intro .item .h1 .br{display:block;}
 .title{margin-bottom:0;}
.intro{display:block;width: 100%;height:100%;margin-top: 19%;}
.text {top: 14%;right: 0%;font-size: 13px;}
.text ul li{margin-left:0;} 
.intro:after{position:absolute;top: 1150px;right:2px;content:"";display:block;width: 100%;height: 100px;background: url(https://www.hygn.go.kr/_res/portal/img/intro/bg2026_03b.png) no-repeat 0 0 / contain;}

}

@media screen and (max-width:330px){
.title{font-size:20px;}
.title .t1{font-size:23px;}
 .title .t3{font-size:23px;} 
.intro{display:block;width: 100%;height:100%;margin-top: 30%;}
.text {top: 9%;right: 0%;font-size: 13px;}
.intro:after{position:absolute;top: 1000px;right:2px;content:"";display:block;width: 100%;height: 100px;background: url(https://www.hygn.go.kr/_res/portal/img/intro/bg2026_01_1b.png) no-repeat 0 0 / contain;}

}


/*레이어팝업 -20260114*/
.layer_pop{display:block;position:absolute;left:20px;top:0;width:auto;z-index:9999;visibility:hidden;} /* visibility:hidden 처음은 안보이고 정해진 날짜에 보임, 오늘 안보이기 */
.layer_pop.type2{} /* 1열1행 */
.layer_pop.type2.lf2{left:470px;} /* 1열2행 */
.layer_pop.type2.row2{top:430px;} /* 2열1행 */
.layer_pop.type2.row2_lf2{left:470px;top:430px;} /* 2열2행 */
.layer_pop.r0{left:auto;right:0;}
.layer_pop.r0t2{left:auto;top:100px;right:0;}
.layer_pop .cont{display:block;}
.layer_pop .cont img{border:0;}
.layer_pop .close{position:relative;color:#fff;font-size:14px;padding:5px 20px;background:#000;}
.layer_pop .close .txt{color:#fff;}
.layer_pop .close .btn{position:absolute;right:18px;height:20px;line-height:20px;padding:0 10px;font-size:14px;color:#000;border:0;background:#ddd;}

@media screen and (max-width:640px) {
	.layer_pop{left:4%;width:92%;}
	.layer_pop.type2,
	.layer_pop.type2.lf2,
	.layer_pop.type2.row2,
	.layer_pop.type2.row2_lf2,
	.layer_pop.r0{left:4%;right:auto;width:auto;} 
	.layer_pop.r0t2{left:4%;top:0;right:auto;width:auto;}
	.layer_pop .cont img{width:100%;}
	.layer_pop.type2 .cont img{width:auto;}
}
@media screen and (max-width:480px) {
	.layer_pop,
	.layer_pop.type2,
	.layer_pop.type2.lf2,
	.layer_pop.type2.row2,
	.layer_pop.type2.row2_lf2,
	.layer_pop.r0,
	.layer_pop.r0t2{left:2%;top:0;width:96%;}
	.layer_pop.type2 .cont img{width:100%;}
}