@charset "utf-8";
@import url('reset.css');
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Work+Sans:300,400,500,600,700,900|Roboto:300,400,500&display=swap');*/
html, body {overflow-x: hidden; min-width: 320px;}

/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
#wrap{width:100%;/*max-width:1920px;*/margin:0 auto; }
.brmobile2{display:block}
.mobile{display:none}
#container{width:100%;overflow:hidden}

.width100{width:100%}
/*color*/
.bk{color:#222 !important;}
.or{color:#F5821F !important}

/* header */
.logo_w{position:fixed;top:5%;left:4%;z-index:999}
@media screen and (max-width:767px){
    .logo_w a{width: 40%; box-sizing: border-box;}
     .logo_w img{width: 100%;}
}

.vol{position:fixed;top:55%;left:3%;/*writing-mode: vertical-lr;*/transform-origin:left top 0px; transform: translateY(-100%) rotate(-90deg) translateY(100%);font-family: 'Roboto', sans-serif;color:#fff;font-size:12px;font-weight:300;letter-spacing:0.1em;z-index:999}
.vol span{font-family: 'Noto Sans KR', sans-serif;font-weight:300;font-size:12px;letter-spacing:0.1em;}
/* menu */
.btn_side {position:fixed; top:5%; right:4%; z-index:9999;color:#8a5c47;background:#fff;font-family: 'Work Sans', sans-serif;padding:18px 32px 18px 10px;letter-spacing:0.2em;font-size:18px;font-weight:300;line-height:100%}
#side {display:none; z-index:9999; width:350px; right:-350px; height:100%; position:fixed; background:#fff}
#mask {position:absolute; z-index:999; background:rgba(0,0,0,0.8) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden}
.close {display:none; position:absolute; top:50px; left:30px; width:35px; height:33px; background-image:url('../../../images/btn_close.png'); background-position:0 0;background-size:35px 33px;text-indent:-9999px; opacity:1}
.gnb {margin-top:40%; padding-left:20%;height:100%; }
.gnb > li {font-size:20px; font-weight:normal; margin-bottom:10%;font-weight:500;}
.gnb > li > a {color:#404040}
.gnb > li > a:hover {color:#964b9e/*monthly*/}



/* menu */
#side {display:none; z-index:9999; width:350px; right:-350px; height:100%; position:fixed; background:#fff}
#mask {position:absolute; z-index:999; background:rgba(0,0,0,0.8) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden}
.close {display:none; position:absolute; top:50px; left:30px; width:35px; height:33px; background-image:url('../../../images/btn_close.png'); background-position:0 0;background-size:35px 33px;text-indent:-9999px; opacity:1}
.gnb {margin-top:40%; padding-left:20%;height:100%; }
.gnb > li {font-size:20px; font-weight:normal; margin-bottom:10%;font-weight:500;}
.gnb > li > a {color:#404040}
.gnb > li > a:hover {color:#964b9e/*monthly*/}




/*콘텐츠*/

/* ------------------ prolog ------------------- */


.bg_img{width:100%; height: 100vh; object-fit: cover;}


.prolog { }
.prolog > p {width: 100%; text-align: center; position: absolute; top: 25%; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.025em; line-height: 1.6;}
.prolog .list_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);background: rgba(0, 0, 0, 0.40); padding: 58px 48px 40px 48px ; box-sizing: border-box;}
.prolog .list_box .main_tit{ margin: 0 auto 30px auto; max-width: 350px; }
.prolog .list_box .main_tit img{width: 100%;}
.prolog .list_box h4{color:#fff;text-align: center;font-family: "Noto Sans KR";font-size: 60px;font-weight: 300;line-height: 60px; letter-spacing: 3.6px; margin-bottom: 80px;}
.prolog .list_box h4 span{font-weight: 700;}
.prolog .list_box h5 {margin-bottom: 20px; font-family:'TimesNewRoman', 'Times New Roman', 'Times', 'Baskerville', 'Georgia', serif;font-size: 28px;font-style: italic;font-weight: 400;line-height: 28px; letter-spacing: 1.4px;color: #fff; }
.prolog .list_box .list {overflow: hidden;}
.prolog .list_box .list li {position: relative; margin-bottom:20px; width: 635px;}
.prolog .list_box .list li:after {content: ""; display: inline-block; position: absolute; bottom: 3px; width: 100%; height: 1px; margin-left: 5px; background-color: #fff; opacity: 0.5;}
.prolog .list_box .list li a {color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.025em;}
.prolog .list_box .list li span {font-size: 14px;display:inline-block;font-weight: 400;line-height: 14px; letter-spacing: -0.28px; margin-top: 8px; }
.prolog .scroll_down {position: absolute; left: 50%; bottom: 24px; background: transparent; border: 0; outline: 0; transform: translateX(-50%);}
.mshow {display: none;}
@media screen and (max-width:1440px) {
}

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

    .prolog .list_box h5{font-size: 20px;}
    .prolog .list_box{padding: 40px 0px; text-align: center; width: 90%; }
    .prolog .list_box .list li{width: 100%; margin-bottom: 14px;}
    .prolog .list_box .list li:after{display: none;}
    .prolog .list_box .list li a{font-size: 18px;}
    .prolog .list_box .list li span {font-size: 15px; line-height: 20px; word-break: keep-all;}

    .prolog .list_box .main_tit img{width: 90%;}

.prolog .scroll_down {display: none;}
}


@media screen and (max-width:480px){
   .bg_img{height: 768px;}
    .prolog .list_box{ padding: 30px 24px; }
        .prolog .list_box .main_tit{ margin: 0 auto 40px auto;}
    .prolog .list_box h4{margin-bottom: 40px; font-size: 32px; line-height: 42px;}
.prolog .list_box h5{margin-bottom: 10px;}
.prolog .scroll_down {display: none;}
}


.category{position: absolute; top:48px; left: 50%; color: #fff;font-weight: 500;font-size: 20px;font-weight: 500;line-height: 20px; transform: translate(-50%,0); }

.main_con{position:relative;padding:0; margin:0;height:100%;max-height:936px}
.main_con .main_box{background: rgba(0, 0, 0, 0.50); position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); padding: 40px 48px;   width: calc(100% - 360px);} 
.main_con .main_box.none_bg{background: none;}

.main_con h4{font-size: 60px;font-weight: 400;line-height: 80px;letter-spacing: 3.6px; text-align: center; color: #fff;}
.main_con h4 span{font-weight:700}
.more2_btn{width:100%; text-align:center; margin-top: 48px;}
.more2_btn a {
  display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 28px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 16px; font-weight: 400; color: #fff;box-sizing: border-box;}

.more2_btn a:hover{color:#000;background:#fff;}

.more2_btn.bk a{color:#222; border-color: #222;}

@media screen and (max-width:1440px) {
.main_con h4{font-size: 40px; line-height: 60px; letter-spacing:normal;}

}
@media screen and (max-width:1024px) {
.main_con .main_box{padding: 24px 20px;width: 80%;  display: flex; flex-direction: column; /* 세로로 배치 */justify-content: center; align-items: center;  }
.main_con h4{font-size: 35px; line-height: 55px;}

}
@media screen and (max-width:767px){
.main_con h4{font-size: 32px; line-height: 40px; word-break: keep-all;}
.main_con h4 span{ display: block; margin-top: 10px;}
.main_con .main_box{padding: 24px 20px;}
 

.more2_btn a{font-size: 15px;}
.category{font-size: 15px;}
}



/*news*/
.main_con03{position:relative;padding:0; margin:0;height:100%;max-height:807px}
.main_con03 h2{width:100%; text-align:center; position:absolute; top:5%; color:#fff;font-family: 'Noto Sans KR', sans-serif;font-weight:500;font-size:19px;letter-spacing:0.1em;}
.news01{width:30%; text-align:center; position:absolute; top:50%;background:rgba(0, 0, 0, 0.5);left:15%;   display: flex; flex-direction: column; /* 세로로 배치 */justify-content: center; align-items: center; padding: 80px 0; transform: translateY(-50%); }
.news01 h3{color:#fff;font-size:24px;font-weight:300;opacity:1}
.news02{width:30%; text-align:center; position:absolute; top:50%;background:rgba(0, 0, 0, 0.5);right: 15%; display: flex; flex-direction: column; /* 세로로 배치 */justify-content: center; align-items: center; padding: 80px 0; transform: translateY(-50%);}
.news02 h3{color:#fff;font-size:24px;font-weight:300;opacity:1}
.main_con03 .more2_btn{margin-top: 40px;}

@media screen and (max-width:1024px) {
    .news01,.news02{padding: 40px 0;}
}


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

.main_con03 .more2_btn{margin-top:20px;}
	.news01{width:80%;left: 50%;transform: translate(-50%, -50%); top:35%; padding:30px 0;}

	.news02{width:80%;left: 50%;transform: translate(-50%, -50%); top:65%;padding: 30px 0;}
}

/*footer*/
.footer{overflow:hidden;background:#000;padding:2% 0 3% 0}
.address{position:relative;float:left;width:30%;margin-left:5%;color:#969696; font-size:12px;font-weight:300;}
.address span{margin-left:3%}
.address img{vertical-align:bottom;/*margin-right:3%*/}
/*.addressimages{width:100%}*/
.backnumber{float:right;font-size:13px;font-weight:300;color:#fff;margin:1% 1% 0px 0px}
.backnumber img{vertical-align:middle}
.sns_btn{position:relative;float:right;margin:1% 5% 0px 0px;width:7%;}
.sns_btn li{display:block;float:left;width:15%;margin:0px 0px 0px 30%;}


/*top버튼*/
.top_btn{display:block;position:fixed; bottom:17%; right:3%;opacity:0.7}
/*main-image*/
.hidden-e {display:block !important}
.hidden-e2 {display:block !important}
.hidden-m {display:none !important}
.hidden-m2 {display:none !important}
/*br*/
.brmobile{display:none}
.mobile_1024{display:block}
.mobile_1024br{display:none}
.mobile_768{display:block}
.mobile_768br{display:none}
.mobile_570{display:block}
.mobile_570br{display:none}
.mobile_360{display:block}
.mobile_360br{display:none}
.mobile_425{display:block}
.mobile_425br{display:none}



@media screen and (max-width:1680px) {
.news04 h3{padding:30% 8% 53% 8%}

}
@media screen and (max-width:1440px) {
.main_con03 h2{font-size:17px}

}
/*노트북*/
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1280px) {
.news04 h3{padding:30% 8% 55% 8%}
.footer{padding:2% 0 4% 0}
.address{width:40%}
.sns_btn{margin:2% 5% 0 0}
.backnumber{margin:2% 1% 0 0}
}
/*아이패드 미니-가로*/
@media screen and (max-width:1024px) {
.main_con01 h4{font-size:40px}
.main_con02 h4{font-size:40px}
/*4개
.news01 h3{font-size:16px}
.news02 h3{font-size:16px}
.news03 h3{font-size:16px}
.news04 h3{font-size:16px}
*/
.news02 h3{font-size:18px}
.news03 h3{font-size:18px}

.btn_side{padding:16px 28px 16px 10px;font-size:16px}

}
@media screen and (max-width:960px) {
.news01 h3{font-size:15px}
.news02 h3{font-size:15px}
.news03 h3{font-size:15px}
.news04 h3{font-size:15px}
.address{width:50%}

}
/*아이패드 미니-세로, 아이폰 XS-가로*/
@media screen and (max-width:767px) {

.logo_w{position:fixed;top:3%}
.vol{top:90%}
.vol_b{position:absolute;font-size:10px;left:2%}
.vol_b span{font-size:10px}
.hidden-e {display:none !important}
.hidden-m {display:block !important}


.main_con03 h2{font-size:15px}


.more_btn{top:67%}
.more2_btn{top:60%}
.brmobile{display:block}
.top_btn{bottom:10%}
.gnb > li{font-size:17px}
.btn_side{padding:12px 22px 12px 10px;font-size:14px;position:fixed;top:3%}
.address{width:50%}
.sns_btn{margin:3% 5% 0 0}
.backnumber{margin:3% 1% 0 0}


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

.footer{padding:4% 0 5% 0}
.vol{left:2%}


.news03 h3{font-size:18px;padding:5% 4% 20% 4%}
.sns_btn{margin:3% 7% 0px 0px}
.address{font-size:11px}
.vol{top:98%}
.top_btn{bottom:3%}
}
/*아이폰XS*/
@media screen and (max-width:425px) {
.mobile{display:block}
.top_btn img{width:70%}
.top_btn {right:1%}
.more_btn{top:65%}
/*.more_btn02{top:60%}*/
.more2_btn{top:70%}
.vol{left:0%;font-size:11px}
/*
.news01 {width:40%;left:7%}
.news02 {width:40%;left:53%}
.news03 {width:40%;left:7%}
.news04 {width:40%;left:53%}
.news01 h3{font-size:14px}
.news02 h3{font-size:14px}
.news03 h3{font-size:14px}
.news04 h3{font-size:14px}
*/
.news02 h3{font-size:15px;}
.news03 h3{font-size:15px;}
.footer{padding:5% 10% 10% 10%;}
.sns_btn{width:50%;margin:0 auto;float:none}
.sns_btn li{margin:0 5% 0 0}
.address{width:100%;text-align:center;}
.address span{margin:0}
.address img{width:30%;margin:5% 0 3% 0}
.address{font-size:8px}
.mobile_425{display:none}
.mobile_425br{display:block}
.backnumber{margin:0 auto 0;float:none}
.backnumber img{margin-left:3%}
}
@media screen and (max-width:360px) {
.address{font-size:7px}
/*4개
.news01 h3{font-size:13px}
.news02 h3{font-size:13px}
.news03 h3{font-size:13px}
.news04 h3{font-size:13px}
*/
.backnumber{width:80%}


}
.fw_700 {font-weight: 700 !important; }



.wbk{word-break: keep-all;}