@charset "utf-8"; 
/* CSS Document */

/*─────────────────────

	◌ File Name:style.css
	◌ Description:style settings for all pages
	◌ Last Update:03/13/26

─────────────────────*/

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


#ask { width: 100%; }
#ask #wrap { width: 100%; background: url('../img/bg_main.png') no-repeat top center; background-size: cover; }
#ask header { position: relative; z-index: 999; }
#ask header .pc-wrap { display: flex; justify-content: space-between; align-items: center; padding: 28px 24px; position: relative; }
#ask header .logo { width: 200px; }
#ask header .logo img { width: 100%; }
#ask header .mobile-no { display: flex; align-items: center; gap: 92px; }
#ask header .mobile-no nav { display: flex; gap: 64px; }
#ask header .mobile-no nav div { position: relative; }
#ask header .mobile-no nav div p { font-size: 20px; font-weight: 500; }
#ask header .mobile-no nav div ul { display: none; min-width: 100%; width: max-content; padding-top: 10px; position: absolute; top: 100%; }
#ask header .mobile-no nav div ul li { font-size: 16px; background: #fff; border: 1px solid #eee; border-top: none; }
#ask header .mobile-no nav div ul li:first-child { border-top: 1px solid #eee; }
#ask header .mobile-no nav div ul li:hover { background: #eee; }
#ask header .mobile-no nav div ul li a { display: block; padding: 20px 20px; }
#ask header .mobile-no .sign { color: #fff; font-size: 20px; font-weight: 500; background: #000; border-radius: 50px; overflow: hidden; }
#ask header .mobile-no .sign a { padding: 12px 24px; }
#ask header .toggle-menu { display: none; }
#ask header .mobile { display: none; }

#ask main{ max-width: 1200px; /*padding: 0 24px;*/ margin: 0 auto; }
#ask.main main section .italic { font-style: italic; }
#ask.main main section .agenda_name { color: #565656; font-size: 40px; font-weight: 900; text-align: center; margin-top: 88px; }
#ask.main main section .title { font-size: 60px; font-weight: 700; text-align: center; margin-bottom: 60px; }
#ask main .link { color: #fff; font-size: 24px; font-weight: 600; }
#ask main .link a{ background:#000; border-radius: 50px; padding: 24px 28px; }
#ask main .link span { background: url('../img/arrow_dot_white.png') no-repeat center right; padding-right: 52px; }
#ask main .link.white { color: #000; text-align: center; }
#ask main .link.white a{ background:transparent; border: 1px solid #000; }
#ask main .link.white span { background: url('../img/arrow_dot_black.png') no-repeat center right; }
#ask main .btn_wrap { display: flex; justify-content: center; gap: 16px; padding-top: 12px; }
#ask main .btn_wrap a { display: flex; justify-content: center; align-items: center; width: 160px; height: 52px; font-size: 16px; font-weight: 500; border-radius: 8px; }
#ask main .btn_wrap a.btn_cancel { border: 1px solid #ddd; }
#ask main .btn_wrap a.btn_cancel:hover { background: #fafafa; }
#ask main .btn_wrap a.btn_submit { color: #fff; background: #000; }
#ask main .btn_wrap a.btn_submit:hover { background: #222; }


#ask main #hero-section { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(100vh - 110px); }
#ask main #hero-section > img { width: 100%; max-width: 1000px; margin-bottom: 80px; }
#ask main #hero-section .countdown { display: flex; justify-content: center; }
#ask main #hero-section .countdown .countdown_inner{ display: flex; justify-content: center; gap: 60px; }
#ask main #hero-section .countdown .countdown_inner .count-box { display: flex; flex-direction: column; align-items: center; }
#ask main #hero-section .countdown .countdown_inner .count-num { font-size: 48px; font-weight: 700; }
#ask main #hero-section .countdown .countdown_inner .count-txt { font-size: 16px; font-weight: 400; }
#ask main #hero-section .countdown .countdown_inner .count-dash { font-size: 48px; font-weight: 200; }
#ask main #hero-section .agenda_info { display: flex; justify-content: center; gap: 16px; margin: 40px 0 60px; }
#ask main #hero-section .agenda_info p { font-size: 16px; }
#ask main #hero-section .agenda_info .agenda_date{ background:url('../img/icon_calendar.png') no-repeat center left; padding-left: 22px; padding-right: 16px; position: relative; }
#ask main #hero-section .agenda_info .agenda_date::before { content: ''; width: 1px; height: 60%; background:#c2c2c2; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#ask main #hero-section .agenda_info .agenda_venue{ background:url('../img/icon_location.png') no-repeat center left; padding-left: 18px; }

#ask main #abstract-section .txt-wrap { display: flex; flex-direction: column; gap: 12px; font-size: 24px; font-weight: 500; line-height: 40px; margin-bottom: 60px; }

#ask main #faculty-section { background: #fff; padding: 80px 52px; margin-top: 160px; box-shadow: 0 0 30px rgba(131, 131, 131, .3); }
#ask main #faculty-section .faculty-awards { padding-bottom: 160px; margin-bottom: 160px; position: relative; }
#ask main #faculty-section .faculty-awards::before { content: ''; width: 1px; height: 160px; background: #8b8b8b; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); }
#ask main #faculty-section .awards-txt { font-size: 24px; line-height: 40px; }
#ask main #faculty-section .awards-box-wrap { display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 16px; margin-top: 24px; }
#ask main #faculty-section .awards-box-wrap .award { display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 16px; }
#ask main #faculty-section .awards-box-wrap .award:last-child { border-bottom: none; }
#ask main #faculty-section .awards-box-wrap .award .award-title { display: flex; align-items: center; width: 240px; }
#ask main #faculty-section .awards-box-wrap .award .award-title img { width: 40px; margin-right: 12px; }
#ask main #faculty-section .awards-box-wrap .award .award-title p { font-size: 20px; font-weight: 600; }
#ask main #faculty-section .awards-box-wrap .award .award-info { width: calc(100% - 240px); font-size: 24px; }

#ask main #faculty-section .group-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; }
#ask main #faculty-section .group-box .doctor { display: flex; flex-direction: column; align-items: center; width: calc(33.333% - (72px / 3)); }
#ask main #faculty-section .group-box .doctor .doctor-name { font-size: 24px; font-weight: 600; margin-top: 12px; }
#ask main #faculty-section .group-box .doctor .doctor-affiliation { color: #6a6a6a; font-size: 20px; font-weight: 500; }

#ask footer { background: #f5f5f5; margin-top: 180px; }
#ask footer .footer-inner { max-width: 1200px; padding: 40px 0 12px; margin: 0 auto; }
#ask footer .footer-inner .logo { font-weight: 600; margin-bottom: 16px; }
#ask footer .footer-inner .info li { margin-bottom:8px; }
#ask footer .footer-inner .copyright { margin-top: 16px; }

#ask.sub #wrap { background-attachment:fixed; background-size: cover; }
.sub main h2 { font-size: 60px; font-weight: 900; text-align: center; margin: 80px auto 60px; }
.sub main #sub_wrap { max-width: 1200px; background: #fff; padding: 56px 64px; box-shadow: 0 0 30px rgba(131, 131, 131, .3); }

.sub main.signUp section { border: 1px solid #ddd; border-radius: 8px; padding: 32px; margin: 0 0 32px; }
.sub main.signUp section .step { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ddd; padding-bottom: 12px; margin-bottom: 24px; }
.sub main.signUp section .step .num { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; color: #fff; font-size: 14px; font-weight: 500; background: #000; border-radius: 50px; }
.sub main.signUp section .step .title { font-size: 20px; font-weight: 600; }
.sub main.signUp section .field_wrap { display: flex; flex-direction: column; gap: 24px; }
.sub main.signUp section .field { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sub main.signUp section .field label { display: flex; align-items: center; width: 160px; font-size: 14px; font-weight: 500; }
.sub main.signUp section .field label svg { width: 16px; color: #6a6a6a; margin-right: 8px; }
.sub main.signUp section .field label .required { color: #fb2c36; font-size: 12px; margin-left: 4px; margin-bottom: 4px; }
.sub main.signUp section .field input { width: calc(100% - 184px); font-size: 16px; font-weight: 400; border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; }
.sub main.signUp section .field input::placeholder { font-family:'Inter', 'Suit', 'pretendard', sans-serif; color: #a1a1a1; }
.sub main.signUp section .field input.error { background: #fff6f6; border: 2px solid #ff4d4f; }
.sub main.signUp section .notice { color: #8b8b8b; font-size: 12px; font-weight: 500; margin-top: 24px; }
.sub main.signUp section .notice .required { color: #fb2c36; font-size: 12px; margin-left: 4px; margin-bottom: 4px; }
.sub main.signUp section .info-box { color: #737373; line-height: 1.4; background: #f5f5f5; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.sub main.signUp section .radio_wrap { display: flex; flex-direction: column; gap: 12px; }
.sub main.signUp section .radio_wrap label { display: flex; align-items: center; font-weight: 500; border: 1px solid #ddd; border-radius: 8px; padding: 12px; cursor: pointer; }
.sub main.signUp section .radio_wrap label:hover { background: #fafafa; }
.sub main.signUp section .radio_wrap label:has(input:checked) { background: #f5f5f5; border: 1px solid #000; }
.sub main.signUp section .radio_wrap label input { accent-color: #000; width: 16px; height: 16px; margin-right: 12px; }

.sub main.ePoster section { margin-bottom: 24px; }
.sub main.ePoster section .field_wrap { display: flex; flex-direction: column; gap: 24px; }
.sub main.ePoster section .field { display: flex; align-items: center; gap: 24px; }
.sub main.ePoster section .field label { display: flex; align-items: center; width: 160px; font-size: 14px; font-weight: 500; }
.sub main.ePoster section .field label svg { width: 16px; color: #6a6a6a; margin-right: 8px; }
.sub main.ePoster section .field label .required { color: #fb2c36; font-size: 12px; margin-left: 4px; margin-bottom: 4px; }
.sub main.ePoster section .field input { width: calc(100% - 184px); font-size: 16px; font-weight: 400; border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; }
.sub main.ePoster section .field input::placeholder { font-family:'Inter', 'Suit', 'pretendard', sans-serif; color: #a1a1a1; }
.sub main.ePoster section .field input.error { background: #fff6f6; border: 2px solid #ff4d4f; }
.sub main.ePoster section .field .file-wrap { width: calc(100% - 184px); position: relative; }
.sub main.ePoster section .field .file-wrap input { display: none; }
.sub main.ePoster section .field .file-wrap label { display: flex; justify-content: center; align-items: center; width: 100%; color: #a1a1a1; border: 1px dashed #ddd; border-radius: 8px; padding: 12px 16px 13px; cursor: pointer; }
.sub main.ePoster section .field .file-wrap label:hover { background: #f8f8f8; }
.sub main.ePoster section .field .file-wrap label.file-complete { justify-content: flex-start; color: #000; background:#f8f8f8; border:1px solid #ddd; }
.sub main.ePoster section .field .file-wrap.error label { background: #fff6f6; border: 2px solid #ff4d4f; }
.sub main.ePoster section .field .file-wrap label svg { height: 16px; margin-right: 4px; }
.sub main.ePoster section .field .file-wrap .notice { margin-top: 4px; margin-left:4px; }
.sub main.ePoster section .field .file-wrap .file-remove { position: absolute; top: 10px; right: 16px; }
.sub main.ePoster section .field .file-wrap .file-remove svg { width: 16px; }
.sub main.ePoster section .notice { color: #8b8b8b; font-size: 12px; font-weight: 500; margin-top: 24px; }
.sub main.ePoster section .notice .required { color: #fb2c36; font-size: 12px; margin-left: 4px; margin-bottom: 4px; }

.sub main.ourSpeakers section .group-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; }
.sub main.ourSpeakers section .group-box .doctor { display: flex; flex-direction: column; align-items: center; width: calc(33.333% - (72px / 3)); background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('../img/bg_main.png') no-repeat; background-size: 1072px; border: 1px solid #eee; border-radius: 12px; padding: 36px 24px; box-shadow: 0 0 8px rgba(200, 200, 200, .3); }
.sub main.ourSpeakers section .group-box .doctor:nth-of-type(1){ background-position: 0 0; }
.sub main.ourSpeakers section .group-box .doctor:nth-of-type(2){ background-position: 50% 0; }
.sub main.ourSpeakers section .group-box .doctor:nth-of-type(3){ background-position: 100% 0; }
.sub main.ourSpeakers section .group-box .doctor:nth-of-type(4){ background-position: 0 -346px; }
.sub main.ourSpeakers section .group-box .doctor:nth-of-type(5){ background-position: 50% -346px; }
.sub main.ourSpeakers section .group-box .doctor:nth-of-type(6){ background-position: 100% -346px; }
.sub main.ourSpeakers section .group-box .doctor .doctor-name { font-size: 20px; font-weight: 600; margin-top: 20px; }
.sub main.ourSpeakers section .group-box .doctor .doctor-affiliation { color: #a1a1a1; font-size: 16px; font-weight: 500; margin-top: 8px; }

.sian { width: 100%; }
.coming { display: flex; flex-direction: column; align-items: center; padding: 10rem 0; }
.coming .clock { display: flex; justify-content: center; align-items: center; width: 64px; height: 64px; background: #f0f0f0; border-radius: 50px; }
.coming .clock svg { width: 32px; height: 32px; color: #737373; }
.coming p.txt01 { font-size: 36px; font-style: italic; font-weight: 700; margin-top: 24px; }
.coming p.txt02 { color: #a1a1a1; font-size: 16px; margin-top: 16px; }



@media screen and (max-width: 1280px) {
    #ask main { padding: 0 24px; }
    #ask header .mobile-no { gap: 48px; }
    #ask header .mobile-no nav { gap: 32px; }
    #ask footer .footer-inner { padding: 40px 24px 12px; }
}

@media screen and (max-width: 1024px) {
    #ask #wrap { background-size: contain; }
    #ask header { width: 100%; background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); border-bottom: 1px solid #e5e5e5; position: fixed; }
    #ask header .pc-wrap { width: 100%; padding: 16px 24px; }
    #ask header .logo { width: 120px; }
    #ask header .mobile-no { display: none; }
    #ask header .toggle-menu { display: block; }
    #ask header .mobile { width: 100%; padding: 0 24px 24px; }
    #ask header .mobile nav { display: flex; flex-direction: column; gap: 24px; border-top: 1px solid #e5e5e5; padding:  24px 0; }
    #ask header .mobile nav div p { color: #6a6a6a; font-size: 20px; font-weight: 500; }
    #ask header .mobile nav div ul { display: none; padding: 12px 0 0 12px; }
    #ask header .mobile nav div ul li { font-size: 16px; border-bottom: 1px solid #ddd; padding-bottom: 8px; margin-bottom: 12px; }
    #ask header .mobile .sign { color: #fff; font-weight: 500; text-align: center; background: #000; border-radius: 50px; overflow: hidden; }
    #ask header .mobile .sign a { display: block; padding: 12px 0; }
    #ask main { padding: 58px 24px 0; }
    #ask main #hero-section > img { width: 80%; }
    #ask main #hero-section .countdown .countdown_inner { gap: 52px; }
    #ask main .link { font-size: 20px; }
    #ask main .link a { padding: 20px 24px; }
    #ask.main main section .agenda_name { font-size: 32px; margin-top: 0; }
    #ask.main main section .title { font-size: 48px; margin-bottom: 48px; }
    #ask main #abstract-section .txt-wrap { font-size: 20px; line-height: 32px; margin-bottom: 48px; }
    #ask main #faculty-section { padding: 80px 36px; margin-top: 120px; }
    #ask main #faculty-section .awards-txt { font-size: 20px; line-height: 32px; }
    #ask main #faculty-section .awards-box-wrap .award .award-info { font-size: 20px; }
    #ask main #faculty-section .group-box .doctor .doctor-name { font-size: 20px; }
    #ask main #faculty-section .group-box .doctor .doctor-affiliation { font-size: 16px; }
    .sub main h2 { font-size: 52px; padding: 80px 0 60px; margin: 0; }
    .sub main #sub_wrap { padding: 56px 52px; }
    .sub main.ourSpeakers section .group-box { gap: 20px; }
    .sub main.ourSpeakers section .group-box .doctor { width: calc(33.333% - (40px / 3)); }
    #ask footer { margin-top: 120px; }
}

@media screen and (max-width: 768px) {
    #ask main { padding: 0 12px; }
    #ask main #hero-section > img { margin-bottom: 40px; }
    #ask main #hero-section .countdown .countdown_inner { gap: 24px; }
    #ask main #hero-section .countdown .countdown_inner .count-num { font-size: 36px; }
    #ask main #hero-section .countdown .countdown_inner .count-txt { font-size: 12px; }
    #ask main #hero-section .agenda_info { flex-direction: column; align-items: center; gap: 8px; margin: 32px 0 40px; }
    #ask main #hero-section .agenda_info .agenda_date { padding-right: 0; }
    #ask main #hero-section .agenda_info .agenda_date::before { display: none; }
    #ask main .link { font-size: 16px; }
    #ask main .link a { padding: 16px 24px; }
    #ask main .link span { background-size: 8px; }
    #ask footer .footer-inner { padding: 40px 12px 12px; }
    #ask.main main section .agenda_name { font-size: 24px; }
    #ask.main main section .title { font-size: 36px; margin-bottom: 24px; }
    #ask main #abstract-section .txt-wrap { font-size: 16px; line-height: 24px; margin-bottom: 36px; }
    #ask main .link.white span { background-size: 8px; }
    #ask main #faculty-section { padding: 60px 24px; }
    #ask main #faculty-section .awards-txt { font-size: 16px; line-height: 24px; }
    #ask main #faculty-section .faculty-awards { padding-bottom: 120px; margin-bottom: 120px; }
    #ask main #faculty-section .faculty-awards::before { height: 120px; bottom: -60px; }
    #ask main #faculty-section .awards-box-wrap .award { flex-direction: column; }
    #ask main #faculty-section .awards-box-wrap .award .award-title { width: 100%; }
    #ask main #faculty-section .awards-box-wrap .award .award-info { width: 100%; font-size: 16px; padding-left: 52px; margin-top: 4px; }
    #ask main #faculty-section .group-box .doctor { width: calc(50% - (36px / 2)); }
    .sub main h2 { font-size: 48px; padding: 120px 0 40px; }
    .sub main #sub_wrap { padding: 56px 32px; }
    .sub main.signUp section { padding: 32px 24px; }
    .sub main.signUp section .field { gap: 16px; }
    .sub main.signUp section .field input { width: calc(100% - 176px); font-size: 14px; }
    #ask main .btn_wrap a { font-size: 14px; }
    .sub main.ourSpeakers section .group-box .doctor { width: calc(50% - (20px / 2)); }
    .sub main.ourSpeakers section .group-box .doctor:nth-of-type(1){ background-position: 0 0; }
    .sub main.ourSpeakers section .group-box .doctor:nth-of-type(2){ background-position: 100% 0; }
    .sub main.ourSpeakers section .group-box .doctor:nth-of-type(3){ background-position: 0 -327px; }
    .sub main.ourSpeakers section .group-box .doctor:nth-of-type(4){ background-position: 100% -327px; }
    .sub main.ourSpeakers section .group-box .doctor:nth-of-type(5){ background-position: 0 -654px; }
    .sub main.ourSpeakers section .group-box .doctor:nth-of-type(6){ background-position: 100% -654px; }
    .sub main.ourSpeakers section .group-box .doctor .doctor-name { font-size: 16px; margin-top: 12px; }
    .sub main.ourSpeakers section .group-box .doctor .doctor-affiliation { font-size: 14px; margin-top: 8px; }
    .sub main.ePoster section .field { gap: 16px; }
    .sub main.ePoster section .field input { width: calc(100% - 140px); font-size: 14px; }
    .sub main.ePoster section .field .file-wrap { width: calc(100% - 140px); font-size: 14px; }
    #ask footer { margin-top: 80px; }
}

@media screen and (max-width: 640px) {
    #ask main #faculty-section .group-box { gap: 24px; }
    #ask main #faculty-section .group-box .doctor { width: calc(50% - (24px / 2)); }
    #ask main #faculty-section .group-box .doctor img { max-width: 120px; }
    #ask main #faculty-section .group-box .doctor .doctor-name { font-size: 16px; }
    #ask main #faculty-section .group-box .doctor .doctor-affiliation { font-size: 12px; }
    .sub main h2 { font-size: 36px; }
    .sub main.signUp section .field_wrap { gap: 16px; }
    .sub main.signUp section .field { flex-direction: column; align-items: flex-start; gap: 4px }
    .sub main.signUp section .field label { width: 100%; }
    .sub main.signUp section .field input { width: 100%; }
    .sub main.ourSpeakers section .group-box .doctor img { max-width: 120px; }
    .sub main.ePoster section .field_wrap { gap: 16px; }
    .sub main.ePoster section .field { flex-direction: column; align-items: flex-start; gap: 4px }
    .sub main.ePoster section .field label { width: 100%; }
    .sub main.ePoster section .field input { width: 100%; }
    .sub main.ePoster section .field .file-wrap { width: 100%; }
}