@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap');

html, body{
	max-width:750px;
	margin:0 auto;
	overflow-x:hidden;
}
body{
	overflow-y:hidden;
}
*{ 
	font-family: 'NanumSquare', sans-serif; 
	margin: 0;
	padding: 0;                
	line-height: 1.6;
	letter-spacing: 0.5px;
	box-sizing: border-box;
	font-size:10px;
}

button {
	border: none;
	cursor: pointer;
}
a {
	text-decoration: none;
	color: inherit;
}
input {
	border: none;
	box-sizing: border-box;
	-webkit-appearance: none;
  	-moz-appearance: none;
	appearance: none;
	border:1px solid #fff;
	width:100%;
	height:90px;
	line-height: 90px;
	font-size:3rem;
	padding:0 20px;
	background:transparent;
	color:#fff;
}
*:focus{
	outline: 0;
}
*::placeholder{
	font-size: 3rem;
	color:#b0b0b0;
}
[type=checkbox],
[type=radio] {
	appearance: auto;
}
select {
	-webkit-appearance: none;
  	-moz-appearance: none;
	appearance: none;
	width:100%;
	height:90px;
	line-height: 90px;
	border:1px solid #fff;
	background:transparent;
	font-size:3rem;
	padding:0 20px;
	color:#fff;
}
select option{
	font-sizE:3rem;
	color:#000;
}
select::-ms-expand {display:none}
.select-wrap{
	position:relative;
}
.select-wrap::before{
	content:'';
	position:absolute;
	right:20px;
	top:50%;
	transform: translate(0, -50%);
	background:url(https://frogstock.speedgabia.com/smi/landing/2022/smi_2022_frogstock/all/select-arrow.png) no-repeat center center;
	width:20px;
	height:20px;
	background-size:100%;
}
img{
	width:100%;
}

/* section01 */
#section01{
	width : 100%;
}

#section01 img{display:block; width:100%; height:auto;}

/* section02 */
#section02{
	width : 100%;
}
#section02 img{display:block; width:100%; height:auto;}

/* section03 */
#section03{
	width : 100%;
}
#section03 img{display:block; width:100%; height:auto;}

/* section04 */
#section04{
	width : 100%;
}
#section04 img{display:block; width:100%; height:auto;}

/* section05 */
#section05{
	width : 100%;
}
#section05 img{display:block; width:100%; height:auto;}

/* section06 */
#section06{
	width : 100%;
}
#section06 img{display:block; width:100%; height:auto;}

/* section07 */
#section07{
	width : 100%;
	height : 0;
	padding-top: calc(1400/750*100%);
	background :url("https://frogstock.speedgabia.com/smi/landing/2025/smi_2025_makesite/section07_bg.png") center center / cover no-repeat;
	position:relative;
}

.contact-form{
	position:absolute;
	left:0;
	right:0;
	width:90%;
	top:6%;
	z-index: 1;
	margin:0 auto;
}
.form-box{
	margin:10px 0;
	display:table;
	width:100%;
	font-size:0;
    
}
.form-box > div{
	display:inline-block;
	margin-right:2%;
	vertical-align: top;
}

/* section07 - form fields: switch text to dark gray for light background */
#section07 input,
#section07 select{
    color:#777;
    border:1px solid #666;
    background:#fff;
}

#section07 input::placeholder {
    color: #777;
}

/* section07 - select arrow override to dark gray */
#section07 .select-wrap::before{
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center center;
	background-size:100%;
}

/* section07 - remove mobile blue focus/tap highlight */
#section07, #section07 *{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#section07 input:focus,
#section07 select:focus,
#section07 textarea:focus{
	outline: none;
	box-shadow: none;
	border-color:#666;
}
.form-box > div:last-child{
	margin-right:0;
}
.form-tel > div{
	width:32%;
}
.form-birth > div{
	width:32%;
}
.contact-form p{
    font-size:2.6rem;
    color:#777;
	margin-top:25px;
	font-weight:bold;
    
}
.form-price > div{
	width:49%;
}
.form-textarea textarea{
    background:transparent;
    border:1px solid #666;
    padding:20px;
    color:#777;
	width:100%;
	height:280px;
	border-radius: none;
	font-size:3rem;
}

/* section07 - ensure textarea uses white background like inputs */
#section07 .form-textarea textarea{
	background:#fff;
}

#section07 textarea::placeholder {
    color: #777;
}


.form-checkbox{
	margin:25px 0 57px;
}
.form-checkbox p{
    margin-top: 0px;
}

.form-checkbox input[type="checkbox"]{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0
}

.form-checkbox input[type="checkbox"] + label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    color:#777;
    font-size:2.4rem;
    line-height: 1.8;
}
.form-checkbox input[type="checkbox"] + label span{
	display: inline-block;
	margin-left:30px;
	font-size:2.4rem;
}
.form-checkbox .view-terms{
    background:transparent;
    border:0;
    color:#777;
    font-size:2.4rem;
    margin-left:10px;
    cursor:pointer;
    padding:0;
    text-decoration:underline;
    vertical-align:middle;
}
.form-checkbox input[type="checkbox"] + label:before {
	content: ' ';
	display: inline-block;
	width:24px;
	height:24px;
	background:url(https://frogstock.speedgabia.com/smi/landing/images/smi_210914/check_off.png) no-repeat center center;
	background-size:100%;
	vertical-align: middle;
	margin-right:15px;
}

.form-checkbox input[type="checkbox"]:checked + label:before {
	content: ' ';
	display: inline-block;
	width:24px;
	height:24px;
   background:url(https://frogstock.speedgabia.com/smi/landing/images/smi_210914/check_on.png) no-repeat center center;
	background-size:100%;
}


.form-checkbox input[type="checkbox"] + #all_check:before, .form-checkbox input[type="checkbox"]:checked + #all_check:before  {
	width:34px;
	height:34px;
	
}
.form-checkbox #all_check{
    font-size:27px;
	font-weight:bold;

}

.contact-form button{
	background:transparent;
}
.contact-form button img{
	width:100%;
}





@media (max-width: 750px) {
	input[type="text"], input[type="tel"], select {
		height: 60px;
		line-height: 60px;
		font-size:2.5rem;
	}
	*::placeholder, select option{
		font-size:2.5rem;
	}
	.form-textarea textarea{
		font-size:2.5rem;
		height:200px;
	}
    .form-checkbox #all_check {
        font-size: 2.5rem;
    }    
}
@media (max-width: 650px){
	.contact-form p {
		font-size: 2.2rem;
	}
	.form-checkbox input[type="checkbox"] + label,
	.form-checkbox input[type="checkbox"] + label span {
		font-size: 1.8rem;
	}
	.form-checkbox .view-terms{font-size:1.8rem;}
	.form-checkbox input[type="checkbox"] + label:before,
	.form-checkbox input[type="checkbox"]:checked + label:before {
		width: 28px;
		height: 28px;
	}

}
@media (max-width:550px){
	input[type="text"], input[type="tel"], select {
		height: 50px;
		line-height: 50px;
		font-size:2rem;
	}
	*::placeholder, select option{
		font-size:2rem;
	}
	.form-textarea textarea{
		font-size:2rem;
		height:150px;
	}
	.contact-form p {
		font-size: 1.8rem;
	}
	.form-checkbox input[type="checkbox"] + label,
	.form-checkbox input[type="checkbox"] + label span {
		font-size: 1.6rem;
	}
	.form-checkbox .view-terms{font-size:1.6rem;}
	.form-checkbox input[type="checkbox"] + label:before,
	.form-checkbox input[type="checkbox"]:checked + label:before {
		width: 20px;
		height: 20px;
	}

	header .logo {
		width: 200px;
	}
	header .logo.hana {
		width: 320px;
	}
        footer{
        padding-bottom: 200px;
    }
}
@media (max-width:450px){
	input[type="text"], input[type="tel"], select {
		height: 40px;
		line-height: 40px;
		font-size:1.5rem;
		padding:0 10px;
	}
	*::placeholder, select option{
		font-size:1.5rem;
	}
	.select-wrap::before {
		width: 13px;
		height: 13px;
		right:10px;
	}
	.form-textarea textarea{
		font-size:1.5rem;
		height:100px;
		padding:10px;
	}
	.contact-form p {
		font-size: 1.5rem;
	}
	.form-checkbox input[type="checkbox"] + label,
	.form-checkbox input[type="checkbox"] + label span {
		font-size: 1.4rem;
	}
	.form-checkbox .view-terms{font-size:1.4rem;}
	.form-checkbox input[type="checkbox"] + label:before,
	.form-checkbox input[type="checkbox"]:checked + label:before {
		width: 18px;
		height: 18px;
		margin-right: 5px;
	}
	.form-checkbox input[type="checkbox"] + label span {
		margin-left: 0;
	}
	.form-checkbox {
		margin: 20px 0;
	}

	footer{
		padding:25px 0;
	}


}
@media (max-width:340px){
	input[type="text"], input[type="tel"], select {
		height: 35px;
		line-height: 35px;
		font-size:1.3rem;
	}
	*::placeholder, select option{
		font-size:1.3rem;
	}
	.select-wrap::before {
		width: 13px;
		height: 13px;
	}
	.form-textarea textarea{
		font-size:1.3rem;
		height:80px;
	}
	.contact-form p {
		font-size: 1.3rem;
	}
	.form-checkbox input[type="checkbox"] + label,
	.form-checkbox input[type="checkbox"] + label span {
		font-size: 1.3rem;
	}
	.form-checkbox .view-terms{font-size:1.3rem;}
	.contact-form {
		top: 17%;
	}
	.form-checkbox input[type="checkbox"] + label span{
		margin-left:22px;
	}
	footer ul li {
		font-size: 1.1rem;
	}
	#section06 {
		margin-top: -36px;
	}
	header .logo {
		width: 165px;
	}
	header {
		padding: 5px 0;
	}
	.form-checkbox {
		margin: 10px 0 5px;
	}
}
/* .register_btn{display:none;} */
.register_btn.fixed{display:block; cursor:pointer; position:fixed; bottom:30px; z-index:99;max-width:750px; left:0;right:0;margin:0 auto;text-align: center;} 
.register_btn img{width:90%;}

/* modal */
.modal{display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(18,22,28,.55); align-items:center; justify-content:center; padding:20px; overscroll-behavior:contain; backdrop-filter: blur(6px);} 
.modal-content{background:#fff; margin:0 auto; padding:24px; width:92%; max-width:720px; border-radius:14px; max-height:80vh; overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 20px 50px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15); border:1px solid rgba(0,0,0,.06); animation: modal-pop .22s ease-out both;} 
.modal-header{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(0,0,0,.06); padding-bottom:12px; margin-bottom:16px;}
.modal-header h2{font-size:2.1rem; color:#24303d; font-weight:700;}
.close-modal{background:transparent; font-size:2.6rem; line-height:1; cursor:pointer; color:#24303d; opacity:.8; padding:6px; border-radius:8px;}
.close-modal:hover{opacity:1; background:rgba(0,0,0,.04);} 
.modal-body h3{font-size:1.6rem; margin-bottom:10px; color:#24303d;}
.modal-body{font-size:1.5rem; line-height:1.8; color:#24303d; letter-spacing: .2px;}
.modal-body p{margin:8px 0 10px;}
.privacy-content p{font-size:1.5rem; color:#24303d; margin:6px 0 8px;}
.privacy-content strong{font-weight:700; font-size:1.7rem; color:#1e2a36;}
.privacy-notice{font-size:1.3rem; color:#5b6672; margin-top:14px; background:#f6f8fa; padding:10px 12px; border-radius:8px;}
.modal-body ul{margin:8px 0 10px 18px; padding:0;}
.modal-body ul li{margin:4px 0; list-style: disc;}
.modal-body a{color:#1a73e8; text-decoration:underline;}

/* floating buttons */
.floating-call, .floating-counsel{
	position:fixed; right:14px; z-index:1500; display:block; width:72px;
}
.floating-call{bottom:96px;}
.floating-counsel{bottom:20px;}
.floating-call img, .floating-counsel img{width:100%; height:auto; display:block;}

/* remove tap highlight and focus outline for floating buttons */
.floating-call, .floating-counsel,
.floating-call a, .floating-counsel a,
.floating-call img, .floating-counsel img{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.floating-call a:focus, .floating-counsel a:focus{
	outline:none;
	box-shadow:none;
}

@media (max-width:550px){
	.floating-call, .floating-counsel{right:10px; width:62px;}
	.floating-call{bottom:86px;}
	.floating-counsel{bottom:16px;}
}
@media (max-width:340px){
	.floating-call, .floating-counsel{right:8px; width:56px;}
	.floating-call{bottom:78px;}
	.floating-counsel{bottom:12px;}
}
/* Scrollbar tweak for modal content (subtle) */
.modal-content::-webkit-scrollbar{width:8px;}
.modal-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18); border-radius:8px;}
.modal-content::-webkit-scrollbar-track{background:transparent;}

/* Animations */
@keyframes modal-pop{
    0%{transform:translateY(8px) scale(.98); opacity:0}
    100%{transform:translateY(0) scale(1); opacity:1}
}
@keyframes modal-fade{
    0%{opacity:0}
    100%{opacity:1}
}

@media (prefers-reduced-motion: reduce){
    .modal-content{animation:none}
}