@charset "utf-8";

/* 색상 정의 */
:root{
	--color_main: #29cd83;
	--color_pale: #a1efcc;
	--color_dark: #14955b;
	--color_point: #cefd44;
	--color_gray: #f3f4f5;
}


* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-repeat: no-repeat; box-sizing: border-box !important;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }


/* ==================================== */


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body { line-height: 1; font-family: 'Pretendard Variable', 'NotoSans', 맑은고딕, dotum, 돋움, sans-serif; color:#222; overflow-x: hidden;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
button, input, select{all: unset;}
legend {position: absolute;left: -9999px; top: 0;}
:focus-visible{outline: none;}
a{color: inherit; text-decoration: none; -webkit-transition: all .1s; transition: all .1s;}}
a:focus,a:hover {text-decoration: none;}
b{font-weight: 600;}
strong{font-weight: 700;}
small{font-size: 0.8em;}
select{background: #efefef url('../img/select_arrow.svg') no-repeat calc(100% - 0.5rem) center / 1rem; padding: 10px; padding-right: 1.5rem; border: 1px solid #eee; font-size: 1rem; border-radius: 10px;}
img{max-width: 100%;}


/*input 공통속성*/
input[type=checkbox] { -moz-appearance:none; -webkit-appearance:none; -o-appearance:none; outline: none; content: none;	}
input[type=checkbox]:before {font-family: "FontAwesome"; content: "\f00c"; font-size: 15px; color: transparent !important; background: #fbfbfb; display: block; width: 1em; height: 1em; border: 1px solid #ddd; padding:2px; border-radius: 50%; text-align: center;}
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus { outline: none; outline-offset: 0; }
input[type=checkbox]:checked:before{border-color:var(--main-color); color: var(--main-color) !important; }
input[type=checkbox]:hover, button:hover{cursor: pointer;}
label  > input[type=checkbox]{display: inline-block; margin-right: 0.5em;}

input[type=radio]{display: inline-block; width:1em; height:1em; border:1px solid #ddd; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius: 50%; background-color: #fff;}
input[type=radio]:checked{content: ""; font-weight:600; color: #fff; background:#fff url('../img/dot.png') no-repeat center / cover; border:1px solid #666;}
label > input[type=radio]{vertical-align: middle; margin-right: 5px;}

input[type="text"], input[type="number"],  input[type="email"], input[type="password"], input[type="date"]{background-color: #f4f6f8; border-radius: 8px; font-size: 1rem; padding: 12px;}


/* ==================================== */


/* 전체 팝업 영역 */
#hd_pop{position: fixed; inset: 0; z-index: 9999; display: none;}
#hd_pop.active{display: block;}
#hd_pop::before{content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);}


/* 팝업 박스 */
.hd_pops{position: absolute; z-index: 1; background: #fff; border-radius: 20px; overflow: hidden; max-width: 90%; box-shadow: 0 0 30px rgba(0,0,0,0.2); animation: popFade 0.3s ease;}
.hd_pops_con{width: 100% !important; height: auto !important;}
.hd_pops_con img{width: 100%; height: auto !important; display: block;}
@keyframes popFade {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* 하단 버튼 영역 */
.hd_pops_footer{display: flex; justify-content: space-between; align-items: center; padding: 1em; background: var(--color_gray); font-size: 0.9rem;}
.hd_pops_footer button{border: none; background: none; cursor: pointer; font-size: 0.9rem;}
.hd_pops_reject{color: #666;}
.hd_pops_close{color: #111; font-weight: 600;}
.hd_pops_close i{margin-left: 5px;}


/* ==================================== */


/* 버튼 */
a.btn, .btn {display: inline-block; line-height: 2.5em; height: 2.5em; padding:0 10px; text-align:center; font-size:13px; border:1px solid #eee; background-color: var(--gray-bg); color: #666; border-radius: 5px; font-weight: 500;
-webkit-transition:background-color 0.1s ease-out; -moz-transition:background-color 0.1s ease-out; -o-transition:background-color 0.1s ease-out; transition:background-color 0.1s ease-out;}
.btn i{display: inline-block; margin-right: 5px;}
.btn_box{display:flex; align-items: center; justify-content: center; gap: 10px;}
.btn_big{display: block; width: fit-content; padding: 1em; text-align: center; border: 1px solid #eee; max-width: 320px; background-color: var(--gray-bg); color: #666; border-radius: 5px;}
.btn_box .btn_big{flex: 1;}


/* 버튼 컬러 */
.btn.btn_b01, .btn_big.btn_b01{border-color: #333; background-color: #333; color: #fff;}
.btn.btn_b02, .btn_big.btn_b02{border-color: var(--main-color); background-color: var(--main-color); color: #fff;}
.btn.btn_b03, .btn_big.btn_b03{border-color: var(--border-color); background-color: #fff;}
.btn.btn_adm{border-color: var(--point-color); background-color: var(--point-color); color: #fff; z-index: 100;}
#main .btn:hover{color: var(--main-color); background-color: #fff; border-color: var(--main-color);}
#main .btn_big:hover{color: var(--main-color); background-color: #fff; border-color: var(--main-color);}
.btn_big:hover, .btn:hover{cursor: pointer;}

.sound_only{display: inline-block; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; border: 0; overflow: hidden; }


/*header*/
.header_all{position:absolute;left:0;top:0;width:100%;z-index:1;padding:15px 0;background:rgba(255, 255, 255, 0.1);z-index:1000;}
.header_inner{display:flex;justify-content:space-between;align-items:center;}
.logo{line-height:1; max-width: 33.333%;}
.logo > a img{width:auto; max-height: 42px;object-fit:contain;}
.company_num_all{float:right;display:table;padding-top:45px;}
.company_num_all > figure{transform:translateY(10px);}
.company_num_all > figure > a > img{width:50px;margin-right:5px;}
.company_num_all > p{position:relative;display:table-cell;vertical-align:bottom;font-size:40px;}
.company_num_all > p::before{content:"문의전화";position:absolute;left:0;top:-10px;font-size:18px;text-shadow:0px 0px 10px #26a7ae;font-family:'MinSansVF';color:#fff}
.company_num_all > p > a{color:#1a1a74}


/*footer*/
#footer{background-color: #37373a; color: #eee;}
.f_top{display: flex; padding: 60px 0; gap: 5%; align-items: flex-start;}
.ft_txt{flex: 1; font-size: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5em 1em; line-height: 1.4;}
.ft_txt li + li{position: relative; padding-left: 1em;}
.ft_txt li + li::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; height: 0.8em; display: block; clear: both; border-left: 1px solid rgba(255,255,255,0.2);}
.f_copy{line-height: 4; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; color: #999; font-weight: 500;}
.f_btn > a{display: block; padding: 0.8em; background-color: #666; color: #ccc; font-weight: 500; border-radius: 8px; transition-duration: 100ms; font-size: 0.9rem;}
.f_btn > a + a{margin-top: 0.5em;}
.f_btn > a > i{margin-right: 0.6em;}
.f_btn > a:hover{background-color: var(--color_dark); color: #fff;}



@media screen and (max-width: 1280px){
	.ft_txt{font-size: 1rem;}
}
@media screen and (max-width: 1024px){
	.hd_pops{left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 80%; max-width: 640px;}

	.f_top{gap: 20px; flex-direction: column; align-items: center;}
	.ft_txt{justify-content: center;}
	.f_btn{display: flex; gap: 0.5em;}
	.f_btn > a + a{margin-top: 0;}
}

@media screen and (max-width:768px){
	html, body{font-size: 15px;}

	.ft_txt, .f_copy{font-size: 0.9rem;}
}

@media screen and (max-width: 478px){
	html, body{font-size: 14px;}

	.f_top{padding: 40px 0;}
	.ft_txt, .f_copy{font-size: 0.8rem;}
}