@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
  font-family: 'PrintingBox';
  src: url('../fonts/printingbox_l.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'PrintingBox';
  src: url('../fonts/printingbox_m.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'PrintingBox';
  src: url('../fonts/printingbox_b.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

/*리셋 CSS*/
html,body,p,div,select,ul,dl,ol,dd,li,table,tr,th,td,h1,h2,h3,h4,form,fieldset,legend,table,tr,td,th,caption,address,blockquote {margin:0; padding:0;}
address,em {font-style:normal;}
fieldset, img {border:0 none;}
h1,h2,h3,h4,h5 {font-size:1em;line-height: 1;margin:0;padding:0}
legend, caption, hr{display:none;width:0; height:0; font-size:0;}
input{padding:0;margin:0;border:0px;vertical-align: middle;}
dl, dt, dd, ul, ol, li{ list-style:none;    padding:0;    margin:0;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{ display:block;}
article,section{display:block;margin:0;padding:0;}
img {vertical-align:top;}
table {border-spacing:0px;border:0px;border-collapse:collapse}
address,hr{display:none;}
form {display:inline;}
fieldset {padding:0;margin:0;border:none;}

body{padding:0;margin:0;font-family: 'Pretendard', sans-serif;font-weight :400;font-size:20px;color:#333;line-height: 1;letter-spacing: -0.3px; word-break:keep-all;    -webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none; -ms-text-size-adjust: none;}
input{font-family:'Pretendard', sans-serif; }
slect{font-family: 'Pretendard', sans-serif;font-size:16px;}
option{font-family: 'Pretendard', sans-serif;font-size:16px;}
textarea{font-family: 'Pretendard', sans-serif;font-size:16px;}
a,a:hover, a:visited, a:active, a:link {text-decoration: none; color:#303d49; outline:none;}
html,body{position:relative;width:100%;height:100%;}
input[type=text]::-ms-clear {display:none;}
input[type=radio] {flex-shrink:0;
  -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
  -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거*/ 
  appearance: none; /*기본 브라우저에서 기본 스타일 제거*/}
input[type=password]::-ms-clear {display:none;}
input[type=tel]::-ms-clear {display:none;}
input::placeholder{color:#333333;}
textarea::placeholder{color:#333333; font-size:20px;line-height: 1.5}
input{outline: none;}
textarea{outline: none; resize: none; border:1px solid #b2b2b2; padding:10px 15px;font-size:20px;line-height: 1.5;}
button {outline:none; border:none; cursor:pointer;font-family: 'Pretendard', sans-serif; }
html, body{font-size:20px;background:#fff; width:100%;height:100%;}
p{padding:0;margin:0;}

/*common*/
* {box-sizing:border-box;}
.hide {display: none !important;}
.primary {background-color: #33C8A7; color: #ffffff;}
.bt_area .bt {margin: 0 0 30px;}
.bt.bor_primary {background-color: #fff; border: 1px solid #33c8a7}
.bt.bor_primary > a {color: #333333; background-color: #fff;}
.bt.bor_primary > button {color: #333333;}
.bt.unfollow {background-color: #fff; border: 1px solid #33c8a7}
.bt.unfollow > a {color: #333333; background-color: #fff;}
.bt.unfollow > button {color: #333333;}
.bt.navy {background-color: #173858;}
.bt.navy > a {color: #fff;}
.bt.navy > button {color: #fff;}
.bt.gray {background-color: #E4E4E4; }
.bt.red {background-color: #FF3257;}
.bt.bor_gray {background-color: #fff; border: 1px solid #E4E4E4}
.bt.bor_gray2 {background-color: #fff; border: 1px solid #BDBDBD}
.bt.bor_gray > a {color: #E4E4E4;}
.bt.bor_gray2> a {color: #BDBDBD;}
.bt.bor_gray > button {color: #E4E4E4;}
.bt.bor_gray2 > button {color: #BDBDBD;}
.fc_primary_dark {color: #1FB29E;}
.fc_red {color: #FF3257;}
.bt {border-radius: 8px; width: 100%;}
.bt a{display: block; font-size: 15px; font-weight: 700; line-height: 48px; border-radius: 8px; color: #fff; text-align: center;  }
.bt button{display: block; width: 100%; font-size: 15px; font-weight: 700; line-height: 48px; border-radius: 8px; color: #fff; text-align: center; background-color: inherit; }
.policy {margin: 16px 0 0; font-size: 16px; line-height: 24px; word-break: keep-all;}

.lh13 {line-height: 1.3 !important;}
.sm_txt {margin: 10px 0 0; font-weight: 500; font-size: 13px;}
.sm_txt.m_0 {margin: 0;}
.mg0 {margin: 0 !important;}
.mt10 {margin: 10px 0 0 !important;}
.mt20 {margin: 20px 0 0 !important;}
.mt30 {margin: 30px 0 0 !important;}
.mt50 {margin: 50px 0 0 !important;}
.wrap section.pt0 {padding-top: 0;}


footer {position: relative; padding: 20px 0;}
footer:before {content:''; display: block; position: absolute; top: 0; left: -16px; width: calc(100% + 32px); height: 1px; background-color: #666666;}
footer .footer_inner {display: flex; gap: 52px; justify-content: flex-start; flex-direction: column;}
footer .footer_inner .footer_menu {display: flex; justify-content: space-between; flex-direction: row; align-items: center;}
footer .footer_inner .footer_menu > li {}
footer .footer_inner .footer_menu > li > a {display: inline-block; font-size: 13px; color: #666666;}
footer .footer_inner .footer_txt_box {display: flex; gap: 24px; justify-content: flex-start; flex-direction: column;}
footer .footer_inner .footer_txt_box .footer_top_box {}
footer .footer_inner .footer_txt_box .footer_top_box .tit {font-weight: 700; font-size: 20px; line-height: 1.5;}
footer .footer_inner .footer_txt_box .footer_top_box .txt {font-weight: 700; font-size: 18px; line-height: 1.5;}
footer .footer_inner .footer_txt_box .footer_md_box {display: flex; gap: 10px; justify-content: flex-start; flex-direction: column;}
footer .footer_inner .footer_txt_box .footer_md_box .tit {font-weight: 700; font-size: 14px;}
footer .footer_inner .footer_txt_box .footer_md_box .txt {font-size: 12px; line-height: 1.5;}
footer .footer_inner .footer_txt_box .footer_bt_box {display: flex; gap: 10px; justify-content: flex-start; flex-direction: column;}
footer .footer_inner .footer_txt_box .footer_bt_box .tit {font-weight: 600; font-size: 13px; line-height: 1.3;}
footer .footer_inner .footer_txt_box .footer_bt_box .copyright {font-size: 12px; color: #BDBDBD;}
footer .footer_inner .footer_logo {}
footer .footer_inner .footer_logo > a {display: block; width: 122px; height: 30px; background-image: url('../images/footer_logo.svg'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;}

.pop {display: none; position: relative; width: 600px; padding: 60px 16px 20px 16px; background-color: #fff; border: 1px solid #DADADA; border-radius: 8px;}
.alert_auto_close_pop {padding: 20px;}
.pop .pop_close {display: block; width: 20px; height: 20px; position: absolute; top: 16px; right: 16px; background-image: url('../images/pop_close.svg'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;}
.pop .pop_inner {display: flex; justify-content: flex-start; flex-direction: column; gap: 30px; width:100%; text-align: center; }
.pop .pop_inner .tit {position: absolute; top: 20px; left: 50%; font-size: 16px; font-weight: 700; line-height: 1.2; transform: translateX(-50%);}
.pop .pop_inner .txt {font-size: 14px; font-weight: 600; line-height: 1.2; word-break: keep-all; white-space: pre-line; }
.pop .pop_inner .bt {width: 100%;}
.pop .pop_inner .bt > a{margin: 0 40px;}
.pop .pop_inner .agree_bt {display: flex; justify-content: space-between; align-items: center; flex-direction: row; gap: 8px;}
.pop .pop_inner .agree_bt > a {display: block; font-weight: 700; width: calc(50% - 4px); font-size: 15px; line-height: 48px; text-align: center; border-radius: 8px;}
.pop .pop_inner .agree_bt > a.agree {color: #ffffff;}

.login_pop {padding: 40px 16px 20px;}
.login_pop .pop_inner {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px;}
.login_pop .pop_inner .icon_box {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px;}
.login_pop .pop_inner .icon_box .icon {width: 80px; height: 80px;}
.login_pop .pop_inner .icon_box .icon img {display: block; width: 100%; height: 100%;}
.login_pop .pop_inner .icon_box .txt {font-weight: 700; font-size: 16px;}

/*탈퇴 버튼*/
.member_quit {display: block; font-weight: 500; font-size: 15px; text-decoration: underline !important;}

.join_box {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 8px;}
.join_box .join_tit {font-weight: 700; font-size: 16px; }
@media screen and (max-width: 768px) {
    .hide {display: none !important;}
    .primary {background-color: #33C8A7; color: #ffffff;}
    .bt_area .bt {margin: 0 0 8.3333vw;}
    .bt.bor_primary {background-color: #fff; border: 0.2778vw solid #33c8a7}
    .bt.bor_primary > a {color: #333333;}
    .bt.bor_primary > button {color: #333333;}
    .bt.unfollow {background-color: #fff; border: 0.2778vw solid #33c8a7}
    .bt.unfollow > a {color: #333333;}
    .bt.unfollow > button {color: #333333;}
    .bt.navy {background-color: #173858;}
    .bt.navy > a {color: #fff;}
    .bt.navy > button {color: #fff;}
    .bt.gray {background-color: #E4E4E4; }
    .bt.red {background-color: #FF3257;}
    .bt.bor_gray {background-color: #fff; border: 0.2778vw solid #E4E4E4}
    .bt.bor_gray2 {background-color: #fff; border: 0.2778vw solid #BDBDBD}
    .bt.bor_gray > a {color: #E4E4E4;}
    .bt.bor_gray2 > a {font-weight: 500; color: #BDBDBD;}
    .bt.bor_gray > button {color: #E4E4E4;}
    .bt.bor_gray2 > button {color: #BDBDBD;}
    .fc_primary_dark {color: #1FB29E;}
    .fc_red {color: #FF3257;}
    .bt {border-radius: 2.2222vw; width: 100%;}
    .bt a{display: block; font-size: 4.1667vw; font-weight: 700; line-height: 13.3333vw; border-radius: 2.2222vw; color: #fff; text-align: center;  }
    .bt button {display: block; width: 100%; font-size: 4.1667vw; font-weight: 700; line-height: 13.3333vw; border-radius: 2.2222vw; color: #fff; text-align: center; background-color: inherit;}
    .policy {margin: 4.4444vw 0 0; font-size: 4.4444vw; line-height: 6.6667vw; word-break: keep-all;}
    
    .lh13 {line-height: 1.3 !important;}
    .sm_txt {margin: 2.7778vw 0 0; font-weight: 500; font-size: 3.6111vw;}
    .sm_txt.m_0 {margin: 0;}
    .mg0 {margin: 0 !important;}
    .mt10 {margin: 2.7778vw 0 0 !important;}
    .mt20 {margin: 5.5556vw 0 0 !important;}
    .mt30 {margin: 8.3333vw 0 0 !important;}
    .mt50 {margin: 13.8889vw 0 0 !important;}
    .wrap section.pt0 {padding-top: 0;}

    footer {position: relative; padding: 5.5556vw 0;}
    footer:before {content:''; display: block; position: absolute; top: 0; left: -4.4444vw; width: calc(100% + 8.8888vw); height: 0.2778vw; background-color: #666666;}
    footer .footer_inner {display: flex; gap: 14.4444vw; justify-content: flex-start; flex-direction: column;}
    footer .footer_inner .footer_menu {display: flex; justify-content: space-between; flex-direction: row; align-items: center;}
    footer .footer_inner .footer_menu > li {}
    footer .footer_inner .footer_menu > li > a {display: inline-block; font-size: 3.6111vw; color: #666666;}
    footer .footer_inner .footer_txt_box {display: flex; gap: 6.6667vw; justify-content: flex-start; flex-direction: column;}
    footer .footer_inner .footer_txt_box .footer_top_box {}
    footer .footer_inner .footer_txt_box .footer_top_box .tit {font-weight: 700; font-size: 5.5556vw; line-height: 1.5;}
    footer .footer_inner .footer_txt_box .footer_top_box .txt {font-weight: 700; font-size: 5.0000vw; line-height: 1.5;}
    footer .footer_inner .footer_txt_box .footer_md_box {display: flex; gap: 2.7778vw; justify-content: flex-start; flex-direction: column;}
    footer .footer_inner .footer_txt_box .footer_md_box .tit {font-weight: 700; font-size: 3.8889vw;}
    footer .footer_inner .footer_txt_box .footer_md_box .txt {font-size: 3.3333vw; line-height: 1.5;}
    footer .footer_inner .footer_txt_box .footer_bt_box {display: flex; gap: 2.7778vw; justify-content: flex-start; flex-direction: column;}
    footer .footer_inner .footer_txt_box .footer_bt_box .tit {font-weight: 600; font-size: 3.6111vw; line-height: 1.3;}
    footer .footer_inner .footer_txt_box .footer_bt_box .copyright {font-size: 3.3333vw; color: #BDBDBD;}
    footer .footer_inner .footer_logo {}
    footer .footer_inner .footer_logo > a {display: block; width: 33.8889vw; height: 8.3333vw; background-image: url('../images/footer_logo.svg'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;}
    
    /*팝업*/
    .pop {display: none; position: relative; width: 83.3333vw; padding: 16.6667vw 4.4444vw 5.5556vw 4.4444vw; background-color: #fff; border: 0.2778vw solid #DADADA; border-radius: 2.2222vw;}
    .alert_auto_close_pop {padding: 5.5556vw;}
    .pop .pop_close {display: block; width: 5.5556vw; height: 5.5556vw; position: absolute; top: 4.4444vw; right: 4.4444vw; background-image: url('../images/pop_close.svg'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;}
    .pop .pop_inner{display: flex; justify-content: flex-start; flex-direction: column; gap: 8.3333vw; width:100%; text-align: center; }
    .pop .pop_inner .tit {position: absolute; top: 5.5556vw; left: 50%; font-size: 4.4444vw; font-weight: 700; line-height: 1.2; transform: translateX(-50%);}
    .pop .pop_inner .txt{font-size: 3.8889vw; font-weight: 600; line-height: 1.2; word-break: keep-all; white-space: pre-line; }
    .pop .pop_inner .bt {width: 100%;}
    .pop .pop_inner .bt > a{margin: 0 11.1111vw;}
    .pop .pop_inner .agree_bt {display: flex; justify-content: space-between; align-items: center; flex-direction: row; gap: 2.2222vw;}
    .pop .pop_inner .agree_bt > a {display: block; font-weight: 700; width: calc(50% - 1.1111vw); font-size: 4.1667vw; line-height: 13.3333vw; text-align: center; border-radius: 2.2222vw;}
    .pop .pop_inner .agree_bt > a.agree {color: #ffffff;}

    
    .login_pop {padding: 11.1111vw 4.4444vw 5.5556vw;}
    .login_pop .pop_inner {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 11.1111vw;}
    .login_pop .pop_inner .icon_box {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3.3333vw;}
    .login_pop .pop_inner .icon_box .icon {width: 22.2222vw; height: 22.2222vw;}
    .login_pop .pop_inner .icon_box .icon img {display: block; width: 100%; height: 100%;}
    .login_pop .pop_inner .icon_box .txt {font-weight: 700; font-size: 4.4444vw; }
    /*탈퇴 버튼*/
    .member_quit {display: block; font-weight: 500; font-size: 4.1667vw; text-decoration: underline !important;}
    
    .join_box {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2.2222vw;}
    .join_box .join_tit {font-weight: 700; font-size: 4.4444vw; }
}

    
    
    
    
    