@charset "UTF-8";

.visual{height: 100vh; background: url("../img/visual.png") no-repeat; background-position: center; background-size: cover; position: relative;}
.visual .width{display: flex; flex-direction: column; align-items: flex-start; height: 100%; justify-content: center;}
.visual .text:after{content: ''; background: url("../img/vtext-bg.png") no-repeat; width: 100%; height: 100%; position: absolute; left: -22%; top: 0; z-index: 1;}
.visual .text{padding-bottom: 28%;}
.visual .text h3{font-size: 2.0rem; color: #262626; margin-bottom: 10px; font-weight: 600; position: relative; z-index: 3;}
.visual .text h2{font-size: 5.5rem; color: #262626;font-weight: 200; line-height: 120%; margin-bottom: 22px; position: relative; z-index: 3;}
.visual .text h2 b{font-weight: bold;}
.visual .text p{font-size: 1.7rem; color: #262626; line-height: 145%; position: relative; z-index: 3;}
.visual .box_wrap{position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 10%; max-width: 1320px; display: flex; align-items: center; gap: 10px 1.5%; width: 92%; z-index: 12;}
.visual .box_wrap a{width: 25%; display: block; overflow: hidden; border: 2px solid rgba(255,255,255,0); transition: 0.3s all;}
.visual .box_wrap a img{width: 100%; transition: 0.3s all;}
.visual .box_wrap a:hover{border: 2px solid #fff;}
.visual .box_wrap a:hover img{transform: scale(1.04);}

.pop_wrap {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, 0.3);width: 100%;  height: 100%;  z-index: 9999;}
.pop_wrap .pop-inner {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 90%;  max-width: 650px;  height: 50vh;  max-height: 600px;  padding: 50px 20px;  background: #fff;  border-radius: 20px;}
.pop-close {  position: absolute;  top: 5px;  right: 5px;  width: 30px;  height: 30px;  cursor: pointer;}
.pop-close i{font-size: 24px;}
#popup1 .pop-inner{height: initial; background: url("../img/pop-bg.png")no-repeat; background-size: cover; padding: 0px; border-radius: 0px; padding: 90px 55px; max-height: initial; background-position: bottom;}

#ft{background: #f4f4f4; padding: 40px 0;}
#ft .footer{display: flex; gap: 25px 5%; align-items: center;}
#ft .footer .foot_info ul{display: flex; align-items: center; gap: 0px 8px;}
#ft .footer .foot_info ul li{color: #565656; font-size: 1.3rem; line-height: 145%;}
#ft .footer .foot_info ul span{color: #565656; font-size: 1.2rem;  line-height: 145%;}

.board_title{margin-bottom: 55px;}
.p1 .stxt, .p2 .stxt, .p3 .stxt, .p4 .stxt, .p5 .stxt, .board_title .stxt{font-weight: 300; color: var(--color); font-size: 4.0rem;}
.p1 .stxt b, .p2 .stxt b, .p3 .stxt b, .p4 .stxt b, .p5 .stxt b, .board_title .stxt b{font-weight: bold;}
.p1 .img{width: 100%; height: 350px; background: url("../img/p1-img1.png")no-repeat; background-position: center; background-size: cover; margin-top: 25px; margin-bottom: 32px;}
.p1 .text_box h3{font-size: 3.0rem; font-family: 'NanumSquareBold';line-height: 140%; margin-bottom: 15px; color: #262626;}
.p1 .text_box p{font-size: 1.8rem; font-family: 'NanumSquare'; color: #262626; line-height: 150%; margin-bottom: 25px;}
.p1 .text_box ul{text-align: right;}
.p1 .text_box ul li{display: flex; align-items: baseline; justify-content: flex-end; margin-top: 8px;}
.p1 .text_box ul li h6{ font-family: 'NanumSquare'; color: #262626;}
.p1 .text_box ul li span{ font-family: 'SimGyeongha'; color: #262626; font-size: 3.2rem; min-width: 68px; text-align: left; margin-left: 10px;}
.p1 .box_area{margin-top: 130px;}
.p1 .box_area .stxt{margin-bottom: 30px;}
.p1 .box_area .box_wrap{display: flex; align-items: center; gap: 10px 1%;}
.p1 .box_area .box_wrap .box{width: 100%; border: 1px solid var(--color); position: relative; }
.p1 .box_area .box_wrap .box:after{content: ''; width: 100%; display: block; padding-bottom: 90%;}
.p1 .box_area .box_wrap .box .text_wrap{position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding-left: 55px; display: flex; justify-content: center; flex-direction: column; align-items: flex-start;}
.p1 .box_area .box_wrap .box h3{color: #262626; font-size: 2.6rem; font-family: 'NanumSquareExtraBold'; margin-top: 15px; margin-bottom: 10px;}
.p1 .box_area .box_wrap .box p{font-size: 1.8rem; color: #262626; font-family: 'NanumSquare'; }
.p1 .box_area .box_wrap .box2{background: var(--color);}
.p1 .box_area .box_wrap .box2 h3{color: #fff;}
.p1 .box_area .box_wrap .box2 p{color: #fff;}

.p2 .ptxt{margin-bottom: 65px;}
.p2 .img img{width: 100%;}
.p2 .box_wrap{display: flex; align-items: center; margin-top: 150px;}
.p2 .box_wrap .img2{width: 50%;}
.p2 .box_wrap .img2 img{width: 100%;}
.p2 .box_wrap .text{width: 50%; padding-left: 4%;}
.p2 .box_wrap .text h3{font-size: 3.0rem; color: #1b336c; font-family: 'NanumSquareExtraBold'; margin-bottom: 25px;}
.p2 .box_wrap .text ul li{margin-top: 10px; font-size: 1.8rem; display: flex; align-items: baseline; gap: 0px 6px; color: #262626;}
.p2 .box_wrap .text ul li span{font-family: 'SimGyeongha'; font-size: 3.2rem;}

.p2 .ptxt, .p3 .ptxt, .p3 .ptxt, .p4 .ptxt, .p5 .ptxt, .board_title .ptxt{font-size: 1.8rem; color: #afafaf;}
.p3 .box_wrap{margin-top: 50px;}
.root_daum_roughmap .cont .section{display: none;}
.p3 .box_wrap{display: flex; gap: 70px 2%; justify-content: space-between;}
.p3 .box_wrap .box{width: 50%;}
.p3 .box_wrap .box .root_daum_roughmap{width: 100% !important;;}
.p3 .box_wrap .box .text_wrap{margin-top: 25px;}
.p3 .box_wrap .box h4{font-size: 3.0rem; font-family: 'NanumSquareExtraBold'; color: #262626; }
.p3 .box_wrap dl{display: flex; border-bottom: 1px dotted #d5d5d5; padding: 20px 0;}
.p3 .box_wrap dl pre{font-size: 1.8rem; color: #262626; font-family: 'NanumSquareExtraBold';}
.p3 .box_wrap dl .pre1 pre{letter-spacing: -0.03em;}
.p3 .box_wrap dl .pre2 pre{letter-spacing: -0.01em;}
.p3 .box_wrap dl .ad{font-family: 'NanumSquare'; font-size: 1.8rem; color: #262626;}
.p3 .box_wrap dl dt{margin-right: 25px;}
.p3 .box_wrap dl .ad h3{font-size: 1.6rem; margin-top: 4px; color: #acacac; display: flex; align-items: center; gap: 0px 6px;}
.p3 .box_wrap dl .ad h3 span{width: 45px; height: 20px; border: 1px solid #acacac; display: flex; align-items: center; justify-content: center;}
.p3 .box_wrap dl dd{font-size: 1.8rem; color: #262626; font-family: 'NanumSquare'; }
.p3 .box_wrap .bus dd{display: flex; flex-wrap: wrap; gap: 10px 2%;}
.p3 .box_wrap .bus dd div{width: 49%; display: flex; gap: 0px 5px; align-items: center;  font-family: 'NanumSquare'; font-weight: 600;}
.p3 .box_wrap .bus dd div span{font-size: 1.3rem; color: #1a336c; border: 2px solid #274261; border-radius: 30px; padding: 0px 6px; min-width: 44px; display: flex; align-items: center; justify-content: center; width: 44px;}
.p3 .box_wrap .bus2{display: flex; gap: 10px 0; flex-direction: column;}
.p3 .box_wrap .bus2 div{display: flex; align-items: center; gap: 0px 5px;  font-family: 'NanumSquare'; font-weight: 600;}
.p3 .box_wrap .bus2 span.c1{font-size: 1.3rem; color: #fff; font-weight: bold; background: #182264; border-radius: 30px; width: 46px; display: flex; align-items: center; justify-content: center; height: 22px;}
.p3 .box_wrap .bus2 span.c2{font-size: 1.3rem; color: #fff; font-weight: bold; background: #00a651; border-radius: 30px; width: 46px; display: flex; align-items: center; justify-content: center; height: 22px;}

.p4 .ptxt{margin-bottom: 55px;}
.p4 .box_wrap1{display: flex; gap: 30px 0; margin-bottom: 150px;}
.p4 .box_wrap1 .img{width: 50%;}
.p4 .box_wrap1 .img img{width: 100%;}
.p4 .box_wrap1 .text_wrap{width: 50%;}
.p4 .box_wrap1 .text_wrap .text{ display: flex;  padding: 40px 0 40px 40px; border-bottom: 1px dotted #d5d5d5; }
.p4 .box_wrap1 .text_wrap .text:last-child{border-bottom: 0px;}
.p4 .box_wrap1 .text_wrap .text h3 span{font-size: 2.5rem; font-family: 'NanumSquareExtraBold'; color: #1a336b; min-width: 45px; display: inline-block;}
.p4 .box_wrap1 .text_wrap .text h3{font-size: 2.3rem; font-family: 'NanumSquareBold'; color: #1a336b; min-width: 240px;}
.p4 .box_wrap1 .text_wrap .text li{font-size: 1.8rem; line-height: 155%; color: #262626; font-family: 'NanumSquare';}
.p4 .box_area .stxt{margin-bottom: 45px;}
.p4 .box_wrap2{display: flex; gap: 100px 1%; flex-wrap: wrap;}
.p4 .box_wrap2 .box{width: 24%;}
.p4 .box_wrap2 .box img{width: 100%;}
.p4 .box_wrap2 .box h3{margin: 30px 0 15px 0; font-size: 2.2rem; font-family: 'NanumSquareBold';}
.p4 .box_wrap2 .box p{font-size: 1.5rem; color: #7e7e7e; line-height: 150%; padding-right: 5px;}
.p4 .box_wrap3{margin-top: 100px;}
.p4 .box_wrap3 .box{width: 32%;}

.p5 .ptxt{margin-bottom: 55px;}
.p5 .box_wrap{display: flex; flex-wrap: wrap; gap: 9px 0.6%;}
.p5 .box{width: 24.5%; background: #f9f9f9; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 0px 9%; padding: 25px 0;}
.p5 .box .text h3{font-family: 'NanumSquare'; font-size: 1.8rem; color: #262626; margin-bottom: 5px;}
.p5 .box .text h4{font-family: 'NanumSquareExtraBold';font-size: 2.0rem; color: #262626;}
.p5 .box2{background: #1b336c;}

#bo_cate ul{justify-content: flex-start;}
#bo_cate li{width: 115px; border-radius: 30px;}
#bo_cate a{border-radius: 30px; border: 1px solid #b1b1b1; color: #b1b1b1;}
#bo_cate #bo_cate_on{background: #1a336b;}

@media all and (max-width: 1400px){
    .visual .text:after{width: 200%; height: 200%; left: -50%; z-index: 0;}
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
    .sub_visual .sub_top_text h3{font-size: 2.6rem;}
    .p1 .stxt, .p2 .stxt, .p3 .stxt, .p4 .stxt, .p5 .stxt, .board_title .stxt{font-size: 3.4rem;}
    .p1 .box_area .box_wrap .box .text_wrap{padding-left: 25px;}
    .p1 .box_area .box_wrap .box .text_wrap img{width: 70px;}
    .p3 .box_wrap .box h4{font-size: 2.4rem;}
    .p4 .box_wrap1 .text_wrap .text h3{min-width: 200px;}
    .p5 .box img{width: 45px;}
    .p5 .box2 img{width: 80%;}
}
@media all and (max-width: 900px){
    #ft .footer{flex-direction: column; align-items: flex-start;}
    .p3 .box_wrap{flex-direction: column;}
    .p3 .box_wrap .box{width: 100%;}
    .p4 .box_wrap1{flex-direction: column;}
    .p4 .box_wrap1 .img{width: 100%;}
    .p4 .box_wrap1 .text_wrap{width: 100%;}
}
@media all and (max-width: 850px){
    .visual{height: initial; padding: 120px 0 80px 0; background: url("../img/mvisual.png") no-repeat; background-size: cover; background-position: 60% 0;}
    .visual .box_wrap{flex-wrap: wrap; position: initial;}
    .visual .box_wrap a{width: 49%;}
    .visual .text{padding-bottom: 100px;}
    .visual .text:after{height: 70%; background-size: contain;}
    .visual .text h3{color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.6)}
    .visual .text h2{color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.2)}
    .visual .text p{color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.7)}
    #ft .footer .foot_logo img{width: 130px;}
    .p1 .img{height: 250px;}
    .p1 .box_area .box_wrap .box h3{font-size: 2.2rem;}
    .p1 .box_area .box_wrap .box2 p{font-size: 1.5rem;}
    .p2 .box_wrap{flex-direction: column; gap: 30px 0;}
    .p2 .box_wrap .img2{width: 100%;}
    .p2 .box_wrap .text{width: 100%;}
    .p4 .box_wrap2 .box h3{margin: 20px 0px 10px 0; font-size: 1.9rem;}
    .p4 .box_wrap2 .box{width: 32.5%;}
    .p5 .box{width: 32.5%;}
}
@media all and (max-width: 768px){
    .visual .text h2{font-size: 4.2rem;}
    .sub_visual .sub_top_text p br{display: none;}
    .p1 .stxt, .p2 .stxt, .p3 .stxt, .p4 .stxt, .p5 .stxt, .board_title .stxt{font-size: 2.6rem;}
    .sub_visual .sub_top_text p{font-size: 1.5rem;}
    .p2 .ptxt, .p3 .ptxt, .p3 .ptxt, .p4 .ptxt, .p5 .ptxt, .board_title .ptxt{font-size: 1.5rem;}
    .p1 .text_box h3{font-size: 2.4rem;}
    .p1 .text_box p{font-size: 1.6rem;}
    .p1 .text_box ul li span{font-size: 2.7rem;}
    .p1 .box_area .box_wrap{flex-wrap: wrap; gap: 15px 1%;}
    .p1 .box_area .box_wrap .box{width: 100%;}
    .p1 .box_area .box_wrap .box:after{display: none;}
    .p1 .box_area .box_wrap .box .text_wrap{position: initial; padding: 25px;}
    .p2 .box_wrap .text h3{font-size: 2.4rem;}
    .p2 .box_wrap .text ul li{font-size: 1.5rem;}
    .p2 .box_wrap .text ul li span{font-size: 2.8rem;}
    .p3 .box_wrap dl pre{font-size: 1.6rem;}
    .p4 .box_wrap1 .text_wrap .text{padding: 20px 5px 20px 20px;}
    #popup1 .pop-inner{padding: 30px 20px;}
    #formmail-write .form_txt h2{font-size: 2.4rem;}
    #formmail-write .form_txt p{font-size: 1.4rem;}
    #formmail-write .form_txt p br{display: none;}
    #formmail-write .form_txt{margin-bottom: 20px;}
    #formmail-write input[type=text]{height: 45px;}
    #formmail-write .applybtn{font-size: 2.0rem; height: 45px;}
}
@media all and (max-width: 650px){
    #ft .footer .foot_info ul{flex-direction: column; align-items: flex-start;}
    #ft .footer .foot_info ul span{display: none;}
    .p3 .box_wrap .bus dd div{width: 100%;}
    .p3 .box_wrap dl dt{margin-right: 15px;}
    .p3 .box_wrap dl .ad{font-size: 1.6rem;}
    .p3 .box_wrap dl .ad h3{font-size: 1.4rem;}
    .p4 .box_wrap1 .text_wrap .text{flex-direction: column; gap: 10px 0;}
    .p4 .box_wrap1 .text_wrap .text h3 span{font-size: 2.2rem;}
    .p4 .box_wrap1 .text_wrap .text h3{font-size: 2.0rem;}
    .p4 .box_wrap1 .text_wrap .text li{font-size: 1.7rem;}
    .p4 .box_wrap1 .text_wrap .text ul{padding-left: 40px;}
    .p4 .box_wrap2 .box{width: 49%;}
    .p4 .box_wrap2 .box h3{font-size: 1.7rem;}
    .p4 .box_wrap2{gap: 70px 1%;}
    .p4 .box_wrap3{margin-top: 70px;}
    .p4 .box_wrap1{margin-bottom: 100px;}
    .p5 .box{width: 49%;}
    .p5 .box img{width: 35px;}
    .p5 .box2 img{width: 80%;}
    .p5 .box .text h3{font-size: 1.6rem;}
    .p5 .box .text h4{font-size: 1.8rem;}
    #bo_cate li{width: 24%;}
    #bo_cate a{font-size: 1.5rem;}
}