@charset "utf-8"; /* Info
 ========================================================================== */
/**
 * 1. Writer: Jinsong Kim. Inseon Choi. (Weaverloft Corp.)
 * 2. Production Date: 2023-10-17
 * 3. Client: SNUH 소아응급
 */
/*========== Import ==========*/
@import url('reset.css');
@import url('layout.css');
@import url('popup.css');
/*========== Font ==========*/
@font-face {  font-family: 'Pretendard Variable';  font-weight: 45 920; font-style: normal; font-display: swap; src: url('../font/PretendardVariable.woff2') format('woff2');} 
@font-face {  font-family: 'Jalnan';  font-weight: 700; font-display: swap; src: url('../font/Jalnan.woff2') format('woff2');} 
/*========== 본문바로가기 ==========*/
.skip-nav a{ display: block; padding: 0px 24px; background-color: #1DD3B9; border-radius:10px; font-size: 1rem; font-variation-settings: 'wght' 500; line-height: 2.5em; color: #fff; text-align: center; position: fixed; left: 10px; top:-10em; z-index: 10001; }
.skip-nav a:focus{top: 10px;}
/*========== Btn ==========*/
.common-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(46px, 11.4504vw, 60px); padding: 0 16px; border-radius: 5px; } 
.common-btn span { font-variation-settings: 'wght' 600; font-size: clamp(14px, 4.1985vw, 22px); } 
.common-btn.gray-line:not(:disabled) { border: 1px solid #ccc; background-color: #fff; } 
.common-btn.red:not(:disabled) { background-color: #E02D4B; color: #fff; } 
.common-btn:disabled, .common-btn.disabled { background-color: #ddd !important; color: #333 !important; cursor: default !important; } 
.square-btn { width: 100%; padding: clamp(16px, 4.9618vw, 26px) 0; border-radius: 10px; text-align: center; } 
.square-btn span { font-variation-settings: 'wght' 700; font-size: clamp(14px, 4.5802vw, 22px); line-height: 1.3; color: #111; } 
.square-btn.green { background-color: #1DD3B9; } 
.square-btn.yellow { background-color: #FFAC05; } 
.square-btn.red { background-color: #E6122F; } 
.square-btn.red span { color: #fff; } 
.round-btn { display: flex; align-items: center; justify-content: center; background-color: #1DD3B9; } 
.round-btn.round-btn01 { height: clamp(46px, 12.5954vw, 66px); border-radius: 33px; } 
.round-btn.round-btn02 { height: clamp(46px, 12.2137vw, 64px); border-radius: 32px; } 
.round-btn span { font-variation-settings: 'wght' 700; color: #111; } 
.round-btn.round-btn01 span { font-size: clamp(14px, 4.1985vw, 22px); } 
.round-btn.round-btn02 span { font-size: clamp(14px, 4.5802vw, 24px); } 
@media screen and (min-width: 1024px){
	.common-btn .square-btn .round-btn { transition: all 0.3s; } 
	.common-btn:not(.disabled):hover .square-btn:hover .round-btn:hover {transition: all 0.3s;} 
	.common-btn:not(.disabled):hover .square-btn:hover .round-btn:hover { opacity: 0.7; transition: all 0.3s;} 
}
/*========== Tab Menu ==========*/
.tab-menu { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-end; } 
.tab-menu li { width: 50%; } 
.tab-menu li.slider { position: absolute; z-index: 2; left: 0; bottom: 0; display: inline-block; height: 2px; background-color: #00857A; transition: left .3s linear; } 
.tab-menu li.tab-link { border-bottom: 2px solid #ccc } 
.tab-menu li.tab-link a { display: block; padding: clamp(8px, 2.2901vw, 12px) 0; font-variation-settings: 'wght' 700; font-size: clamp(14px, 4.5802vw, 24px); line-height: 1.25; text-align: center; color: #666; -webkit-user-drag: none; transition: color 300ms; } 
.tab-menu li.tab-link.current a { color: #00857A; transition: color 300ms; } 
.tab-content-wrap .tab-content { display: none; } 
.tab-content-wrap .tab-content.current { display: block; } 
@media screen and (min-width: 1024px) {
	.tab-menu li.tab-link a:hover { color: #00857A; transition: color 300ms; } 
}
/*========== Input ==========*/
/* text input 공통 */
.search-box-wrap, .input-box-wrap { position: relative; width: 100%; } 
.input-box { position: relative; width: 100%; } 
.input-box input::placeholder { font-size: 1em; color: #666; } 
/* search-input */
.search-box-wrap .input-box input { width: 100%; height: clamp(48px, 12.2137vw, 64px); padding: 0 48px 0 16px; border: 2px solid #14C8AE; border-radius: 6px; font-size: clamp(14px, 4.1985vw, 22px); } 
.search-box-wrap .search-btn { position: absolute; top: 50%; right: 0; width: 48px; height: 48px; background: url('../img/common/icon-search.svg') no-repeat center center / 24px 24px; transform: translateY(-50%); } 
/* basic-input */
.input-box-wrap .input-box input { width: 100%; height: clamp(48px, 11.4504vw, 60px); padding: 0 16px; border: 1px solid #eee; border-radius: 5px; font-size: clamp(14px, 3.8168vw, 20px); color: #333; } 
/* Input - Animation */
.input-box-wrap .input-box input~.border-focus:before, .input-box-wrap .input-box input~.border-focus:after { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 0; height: 1px; background-color: #14C8AE; transition: 0.3s; } 
.input-box-wrap .input-box input~.border-focus:after { top: auto; bottom: 0; left: auto; right: 0; } 
.input-box-wrap .input-box input~.border-focus i:before, .input-box-wrap .input-box input~.border-focus i:after { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 1px; height: 0; background-color: #14C8AE; transition: 0.4s; } 
.input-box-wrap .input-box input~.border-focus i:after { left: auto; right: 0; top: auto; bottom: 0; } 
.input-box-wrap .input-box input:focus~.border-focus:before, .input-box-wrap .input-box input:focus~.border-focus:after,
.input-box-wrap .input-box input~.border-focus.on:before, .input-box-wrap .input-box input~.border-focus.on:after { width: 100%; transition: 0.3s; } 
.input-box-wrap .input-box input:focus~.border-focus i:before, .input-box-wrap .input-box input:focus~.border-focus i:after,
.input-box-wrap .input-box input~.border-focus.on i:before, .input-box-wrap .input-box input~.border-focus.on i:after { height: 100%; transition: 0.4s; } 
@media screen and (min-width: 524px) {
	.input-box input { padding: 0 60px 0 20px; } 
	.search-box-wrap .search-btn { right: 10px; } 
}
/* input Radio */
.radio-box-wrap { display: flex; align-items: center; gap: 1.5em; font-size: clamp(10px, 3.0534vw, 16px);}
.basic-radio-box { flex-shrink: 0; height: 1.5em; font-size: clamp(10px, 3.0534vw, 16px); } 
.basic-radio-box:last-child { margin: 0; } 
.basic-radio-box input[type="radio"] { display: none; } 
.basic-radio-box input[type="radio"] + label { display: flex; align-items: center; position: relative; cursor: pointer; height: 100%; } 
.basic-radio-box input[type="radio"] + label span { padding: 0 0 0 clamp(18px, 6.1069vw, 32px); font-variation-settings: 'wght' 500; font-size: clamp(14px, 3.8168vw, 20px); line-height: 24px; } 
.basic-radio-box input[type="radio"] + label::before { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 1.5em; height: 1.5em; border-radius: 50%; background-color: #ccc; transform: translate(0, -50%); } 
.basic-radio-box input[type="radio"] + label::after { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 1.5em; height: 1.5em; background: url('../img/common/icon-chk-mark.svg') no-repeat center center / 120% 120%; transform: translate(0, -50%); } 
.basic-radio-box input[type="radio"]:checked + label::before { background-color: #14C8AE; } 
.basic-radio-box.disabled input[type="radio"] + label { cursor: default; } 
.basic-radio-box.disabled input[type="radio"]:checked + label::after, .basic-radio-box.disabled input[type="radio"][checked] + label::after { background-color: #bbb; border: 1px solid #bbb; } 
@media screen and (max-width: 360px){
	.radio-box-wrap{ flex-flow: row wrap; gap: 1.25em;}
}
@media screen and (min-width: 524px) {
	.basic-radio-box:hover { opacity: 0.8; } 
}
/* input Radio 2 */
.basic-radio-box02 input[type="radio"] + label span{font-size: clamp(13px, 3.435vw, 18px); color: #666;}
.basic-radio-box02 input[type="radio"] + label::before{width: 1.25em; height: 1.25em; border-radius: 50%; border: 1px solid #ccc; background: #fff;}
.basic-radio-box02 input[type="radio"] + label::after{width: 0.75em; height: 0.75em; border-radius: 50%; background: #ccc; transform: translate(0.25em, -50%);}
.basic-radio-box02 input[type="radio"]:checked + label span{color: #111;}
.basic-radio-box02 input[type="radio"]:checked + label::before { border: 1px solid #14C8AE; background: #fff; } 
.basic-radio-box02 input[type="radio"]:checked + label::after { background: #14C8AE;} 

/* input Checkbox */
.basic-check-box { min-width: clamp(24px, 6.1069vw, 32px); width: fit-content; } 
.basic-check-box input[type="checkbox"] { display: none; } 
.basic-check-box input[type="checkbox"] + label { display: flex; align-items: center; width: fit-content; min-width: clamp(24px, 6.1069vw, 32px); height: clamp(24px, 6.1069vw, 32px); position: relative; cursor: pointer; } 
.basic-check-box input[type="checkbox"] + label::before { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: clamp(24px, 6.1069vw, 32px); height: clamp(24px, 6.1069vw, 32px); border-radius: 50%; background: #ccc url('../img/common/icon-chk-mark.svg') no-repeat center center / 120% 120%; transform: translate(0, -50%); } 
.basic-check-box input[type="checkbox"]:checked + label::before { background-color: #14C8AE; } 
.basic-check-box input[type="checkbox"] + label span { padding: 0 0 0 38px; font-variation-settings: 'wght' 500; font-size: clamp(14px, 3.8168vw, 20px); line-height: 1; } 
.basic-check-box.disabled input[type="checkbox"] + label { cursor: default; } 
.basic-check-box.disabled input[type="checkbox"] + label::before { background-color: #eee; cursor: default; } 
@media screen and (min-width: 524px) {
	.basic-check-box:not(.disabled) input[type="checkbox"] + label:hover { opacity: 0.8; } 
}
/* Select */
.basic-select-box { position: relative; width: 100%; } 
.basic-select-box select { width: 100%; height: clamp(48px, 11.4504vw, 60px); padding: 0 56px 0 20px; border: 1px solid #eee; border-radius: 5px; background: #fff url("../img/common/icon-arrow-down-g.svg") no-repeat right 20px center / 16px 8px; font-size: clamp(14px, 3.8168vw, 20px); color: #666 } 
.basic-select-box select::-webkit-scrollbar { width: 6px; background-color: transparent; } 
.basic-select-box select::-webkit-scrollbar-thumb { background-color: #14C8AE; border-radius: 3px; } 
.basic-select-box select::-webkit-scrollbar-track { background-color: transparent; border-radius: 3px; } 
.basic-select-box select option { font-size: clamp(14px, 3.0534vw, 16px); color: #333;} 
/* Select - Animation */
.basic-select-box select~.border-focus:before, .basic-select-box select~.border-focus:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: #14C8AE; transition: 0.3s; } 
.basic-select-box select~.border-focus:after { top: auto; bottom: 0; left: auto; right: 0; } 
.basic-select-box select~.border-focus i:before, .basic-select-box select~.border-focus i:after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background-color: #14C8AE; transition: 0.4s; } 
.basic-select-box select~.border-focus i:after { left: auto; right: 0; top: auto; bottom: 0; } 
.basic-select-box select:focus~.border-focus:before, .basic-select-box select:focus~.border-focus:after { width: 100%; transition: 0.3s; } 
.basic-select-box select:focus~.border-focus i:before, .basic-select-box select:focus~.border-focus i:after { height: 100%; transition: 0.4s; } 
/*========== Error ==========*/
.input-box.error input { border: 1px solid #E82929; } 
p.error { display: none; margin-top: 0.571em;padding-left: 1.429em;background-image: url("../img/common/icon-info-r.svg");background-repeat: no-repeat;background-size: 1.214em 1.214em;background-position: top left;font-size: clamp(0.750rem, 2.672vw, 0.875rem);color: #E82929;} 
/*========== 아이폰 iOS 모바일 인풋 터치시 화면 확대 방지용 ==========*/
@supports (-webkit-overflow-scrolling: touch) { 
	/* CSS specific to iOS devices */ input, select, textarea, .se2_inputarea { font-size: 16px !important; } 
}