/* font */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}


@font-face {
    font-family: "HappinessR";
    src: url("./font/Happiness-Sans-Regular.woff") format("woff");
    font-weight: normal;
}
@font-face {
    font-family: "HappinessB";
    src: url("./font/Happiness-Sans-Bold.woff") format("woff");
    font-weight: normal;
}
@font-face {
    font-family: "HappinessT";
    src: url("./font/Happiness-Sans-Title.woff") format("woff");
    font-weight: normal;
}

@font-face {
    font-family: 'Cafe24Ohsquare';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.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: 'JSDongkang-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/JSDongkang-RegularA1.woff') format('woff'); font-weight: normal; font-style: normal; }


@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean');
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);


.HappinessR *, input, textarea{font-family: 'HappinessR' ,serif;}

.wrap{width: 1280px; margin: 0 auto;}
.hidden{display: none !important;}
.flex_wrap{display: flex; justify-content: space-between; align-items: center;}
.mo_only{display: none !important;}
/* .swiper-pagination-bullet{width: 12px; height: 12px;} */

/* header */
.top_banner{height: 4.0625rem;}
header{position: absolute; width: 100%; top: 4.0625rem; z-index: 11; transition: .3s;}

header.on{background: #fff;}
header .wrap{height: 6.25rem; display: flex; justify-content: space-between; align-items: center;}
header .wrap .header_left{display: flex; align-items: center;}
header .wrap .header_left a{margin-right: 1.875rem;}
header.on .wrap .header_left a img{filter: brightness(0);}

/*
header .wrap .header_right .ham .close{display: none;}
header.on .wrap .header_right .ham .open{display: none;}
header.on .wrap .header_right .ham .close{display: block;}*/


.gnb{ display:block; position: absolute; width: 100%; z-index: 1; transform: translateY(-556.7px); opacity: 0;  background: #fff; border-bottom: 1px solid #e5e5e5; box-sizing: border-box; transition: .3s;}
.gnb.on{ display:block; opacity: 1; z-index: 1; transform: translateY(-1px);}
.gnb > ul{display: flex; text-align: center; justify-content: center; padding: 2.5rem 0 8.75rem;}
.gnb > ul > li{border-left: 1px solid #e5e5e5; padding: 0 5rem 3.125rem;}
.gnb > ul > li:first-child{border-left: none; padding-left: 0;}
.gnb > ul > li:last-child{padding-right: 0;}
.gnb > ul > li > ul > li:first-child{font-size: 2.125rem; font-family: 'HappinessB',serif; margin-bottom: 2.8125rem;}
.gnb > ul > li > ul > li:last-child{margin-bottom: 0;}
.gnb > ul > li > ul > li{margin-bottom: 1.375rem;}
.gnb > ul > li > ul > li a {font-size: 1.5rem; color: #606060; transition: .3s;}
.gnb > ul > li > ul > li:hover a{color: #ff5c60;}

/* footer */
footer{background: #000; color: #fff;}
footer .wrap{height: 16.875rem; display: flex; justify-content: space-between; align-items: center;padding: 0 10%;}
footer a{color: #fff;}
footer .wrap .footer_left > img{width: 7.875rem;}
footer .wrap .footer_left ul.footer_info{display: flex; margin-top: 1.75rem;}
footer .wrap .footer_left ul.footer_info li:nth-child(2n){padding: 0 0.625rem; opacity: .5;}
footer .wrap .footer_left .copyright{margin-top: 0.9375rem; color: #a9aaab;}
footer .wrap .footer_right ul.footer_link{display: flex; align-items: center; justify-content: right;}
footer .wrap .footer_right ul.footer_link li{margin-left: 1.25rem;}
footer .wrap .footer_right ul.footer_link li:nth-child(1) {margin-left: 0;}
footer .wrap .footer_right ul.footer_link li:nth-child(1) a{display: none; height: 2.5rem; line-height: 2.5rem; padding: 0 2.5rem; background: #fbaa50; border-radius: 2.5rem; font-family: 'HappinessB',serif; cursor: pointer;}
footer .wrap .footer_right ul.footer_link li a img{width: 3.625rem;}
footer .wrap .footer_right .select_wrap{display: flex; justify-content: center;}
footer .wrap .footer_right .select_wrap .view_issue:nth-child(1){margin-right: 0.625rem;}
footer .wrap .footer_right .select_wrap .view_issue {margin-top: 29px; position: relative;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top{width: 12rem; height: 2.75rem; padding: 0 1.25rem; border:1px solid #fff; border-radius: 0.2125rem; background: #000; color: #fff; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top span .up{display: block;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top span img{width: 1.25rem;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top span .down{display: none;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top.on span .up{display: none;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top.on span .down{display: block;}

footer .wrap .footer_right .select_wrap .view_issue .view_issue_top2{width: 12rem; height: 2.75rem; padding: 0 1.25rem; border:1px solid #fff;  border-radius: 0.2125rem; background: #1e2329; color: #fff; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top2 span .up{display: block;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top2 span img{width: 1.25rem;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top2 span .down{display: none;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top2.on span .up{display: none;}
footer .wrap .footer_right .select_wrap .view_issue .view_issue_top2.on span .down{display: block;}

footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom{width: 12rem; max-height: 7.75rem; overflow-y: scroll; background: #fff; border-radius: 0.3125rem; position: absolute; top: -7.75rem; visibility: hidden; opacity: 0; transition: .3s;}
footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom li a{width: 100%; color: #000; padding: 0.625rem 1.25rem; display: inline-block; border-bottom: 0.0625rem solid #e4e4e4; box-sizing: border-box;}
footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom li:last-child a{border-bottom: none;}
footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom.on{visibility:visible; opacity: 1;}


footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom2{width: 12rem; max-height: 7.75rem; overflow-y: scroll; background: #fff; border-radius: 0.3125rem; position: absolute; top: -7.75rem; visibility: hidden; opacity: 0; transition: .3s;}
footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom2 li a{width: 100%; color: #000; padding: 0.625rem 1.25rem; display: inline-block; border-bottom: 0.0625rem solid #e4e4e4; box-sizing: border-box;}
footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom2 li:last-child a{border-bottom: none;}
footer .wrap .footer_right .select_wrap .view_issue ul.view_issue_bottom2.on{visibility:visible; opacity: 1;}

/* etc */
.etc{position: fixed; z-index: 21; right: 20px; bottom: 280px;}
.etc .service a{display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; border-radius: 75px; background: #0013cf; cursor: pointer;}
.etc .service a .service_txt{color: #fff; text-align: center;}
.etc .service a .service_txt p{font-size: 20px; font-weight: 400; font-family: 'HappinessB',serif; }
.etc .top_btn{ cursor:pointer; width: 65px; margin-top: 10px; height: 65px; border-radius: 65px; background: #000; display: flex; justify-content: center; align-items: center; text-align: center;}
.etc .top_btn p{font-size: 18px; font-weight: 400; font-family: 'HappinessB',serif; color: #fff; margin-top: 10px;}

/* modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 100; justify-content: center; align-items: center; } 
 .modal_open { cursor:pointer; } 
 .modal_overlay { background-color: rgba(0, 0, 0, 0.7); width:100%; height: 100%; position: absolute; z-index: 24; } 
 .modal_content { background-color: white; text-align: left; position: relative; z-index: 25; border-radius: 1.125rem; box-shadow: 0.125rem 0.125rem 1.25rem 0.25rem rgb(0 0 0 / 20%); } 
 .modal_content .modalContWrap { font-size: 0.9375rem;} 
 .modal .modal_close{position: absolute; z-index: 50; right: 1.0625rem; top: 1.0625rem; cursor: pointer;}
 .modal .modal_close img{width: 1.8125rem;}
 .modal_content .modalContWrap{font-size: 1.125rem; color: #000;}
 .modal_content .modalContWrapTab { text-align: left; } 
 .modal_content .modal_scroll { height: 31.25rem; overflow-y: scroll; }
 .modal_md { width: 46.25rem; max-height: 40.625rem; box-sizing: border-box;} 
 .modal_content .modalContWrap .modal_head{height: 3.75rem; line-height: 3.75rem; text-align: center; background: #009680; font-size: 1.875rem; font-family: 'HappinessB',serif; border-radius: 1.0625rem 1.0625rem 0 0; color: #fff;} 
 .modal_content .modalContWrap .modal_con{padding: 3.125rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap{display: flex; align-items: center; padding: 0.8125rem 0; border-bottom: 1px solid #e5e5e5;}
 .modal_content .modalContWrap .modal_con form .input_wrap h5{font-size: 1.25rem; color: #606060; width: 7.5rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap input{height: 2.125rem; border: 1px solid #c3c3c3; padding: 0 0.625rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap input.input1{width: 8.75rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap input.input2{width: 11.25rem;} 
 .modal_content .modalContWrap .modal_con form .input_wrap span{color: #a5a5a5; font-size: 1.125rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap span.slash{padding: 0 0.6875rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap span.memo{margin-left: 1.125rem;}
 .modal_content .modalContWrap .modal_con form .input_wrap_first{padding-top: 0;}
 .modal_content .modalContWrap .modal_con form .input_wrap textarea{resize: none; width: 80%; height: 7.1875rem; border: 1px solid #c3c3c3; padding: 0.625rem; box-sizing: border-box;}
 .modal_content .modalContWrap .modal_con form .button{text-align: center;}
 .modal_content .modalContWrap .modal_con form .button button{text-align: center; background: #000; color: #fff; width: 8.75rem; height: 2.75rem; border-radius: 0.25rem; font-size: 1.25rem; margin-top: 1.875rem; font-family: 'Noto Sans KR', sans-serif;}
 .modal_content .modalContWrap .subscribe .subs_wrap{display: flex; justify-content: center; align-items: center;}
 .modal_content .modalContWrap .subscribe .subs_wrap input{height: 2.125rem; border: 1px solid #c3c3c3; padding: 0 0.625rem; width: 18.75rem;}
 .modal_content .modalContWrap .subscribe .subs_wrap h5{font-size: 1.25rem; color: #606060; margin-right: 0.625rem;}
 .modal_content .modalContWrap .subscribe .subs_wrap button{text-align: center; background: #fbaa50; color: #fff; width: 6.875rem; height: 2.125rem; border-radius: 0.25rem; margin-left: 0.625rem; font-size: 1.25rem; font-family: 'Noto Sans KR', sans-serif;}
 .modal_content .modalContWrap .subscribe ul.subs_txt{padding: 3.125rem 0; border-bottom: 1px solid #e5e5e5;}
 .modal_content .modalContWrap .subscribe ul.subs_txt li{font-size: 1.125rem; line-height: 2rem; color: #a5a5a5; letter-spacing: -0.2px;}
 .modal_content .modalContWrap .subscribe ul.subs_txt li span{color: #000;}
 .modal_content .modalContWrap .subs_cancel{margin-top: 3.125rem; margin-bottom: 1.25rem; text-align: center;  font-size: 1.25rem; color: #606060; line-height: 2rem;}





@media screen and (max-width: 1300px){
    .wrap{width: 100%; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box;}
}

@media screen and (max-width: 992px){
    .mo_only{display: block !important;}
    .pc_only{display: none !important;}
    footer .wrap{display: block; height: auto; padding: 3.75rem 0;}
    footer .wrap .footer_right ul.footer_link{justify-content: center;}
    footer .wrap .footer_right .view_issue .view_issue_top{margin: 0 auto;}
    footer .wrap .footer_left{text-align: center; margin-top: 3.125rem;}
    footer .wrap .footer_left ul.footer_info{justify-content: center;}
    footer .wrap .footer_right .view_issue ul.view_issue_bottom{left: 50%; transform: translateX(-50%);}
    .gnb > ul > li{padding: 0 2rem 3.125rem;}
}

@media screen and (max-width: 780px){
    .modal_content .modalContWrap .modal_con form .input_wrap h5{width: 6.5rem;}
    .modal_content .modalContWrap .modal_con form .input_wrap span{font-size: 0.925rem;}
    .modal_content .modalContWrap .modal_con{padding: 1.825rem}
    .modal_content .modalContWrap .modal_con form .input_wrap input.input2{width: 10rem;}
    .modal_content .modalContWrap .modal_con form .input_wrap textarea{width: 70%;}
    .modal_md{width: 95%;}
}


@media screen and (max-width: 780px) and (min-width: 520px){
    .modal_content .modalContWrap .subscribe .subs_wrap input{
        width: 13.75rem;
    }
}

@media screen and (max-width: 690px){
    .gnb{border-bottom: none;}
    .gnb > ul{display: block; padding: 0;}
    .gnb > ul > li{padding: 0 1.25rem !important;}
    .gnb > ul > li > ul{border-bottom: 1px solid #e5e5e5; padding: 5.9375rem 0;}
    .gnb > ul > li > ul > li:first-child{margin-bottom: 4.375rem; font-size: 3.375rem;}
    .gnb > ul > li > ul > li a{font-size: 2.375rem;}
    header.on + .main_content{display: none;}
    header.on + .page_content{display: none;}
}

@media screen and (max-width: 650px){
    header .wrap .header_left a img{width: 10.5rem;}
    header .wrap .header_left > img{width: 14.875rem;}
    header .wrap .header_right .ham img{width: 1.5rem;}
	
}


@media screen and (max-width: 520px){
    html{font-size: 11px;}    
    header .wrap .header_left a img{width: 10.5rem;}
    header .wrap .header_left > img{width: 14.875rem;}
    header .wrap .header_right .ham img{width: 2.25rem;}
    header .wrap .header_left a{margin-right: 0.775rem;}
    footer .wrap .footer_left .copyright{font-size: 0.9rem;}
}