@charset "utf-8";

@import url(../font/pretendard/pretendard.css);
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap');
@font-face {
    font-family: 'WavvePADO';
    src: url('../font/WavvePADO-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@media all and (max-width : 1280px) {html {font-size : 60%;}}
@media all and (max-width : 976px) {html {font-size : 58%;}}


* { --black: #212121; --blue: #00B9FF; --gradient: linear-gradient(72deg, rgba(4,46,84,1) 0%, rgba(2,79,150,1) 50%, rgba(0,181,235,1) 100%);
	--mint:  rgb(0,255,209); --gradient2: linear-gradient(21deg, rgba(0,255,209,1) 0%, rgba(0,129,223,1) 100%); outline:0; scrollbar-width: thin;  }


/* ===== Scrollbar CSS ===== */
@media all and (min-width:641px) {
	* {
		scrollbar-face-color:#bababa;
		scrollbar-arrow-color:#FFFFFF;
		scrollbar-track-color:#FFFFFF;
		scrollbar-shadow-color:#bababa;
		scrollbar-highlight-color:#bababa;
		scrollbar-3dlight-color:#bababa;
		scrollbar-darkshadow-Color:#bababa;

		scrollbar-width: thin;
		scrollbar-color:#bababa #ffffff;
		
	}

	*::-webkit-scrollbar {width:16px;}
	*::-webkit-scrollbar-track {background:transparent;}
	*::-webkit-scrollbar-thumb {background-color:#bababa; border-radius:10px; border:3px solid #ffffff;}
}

img {max-width:100%;}
em,.em {color:var(--blue);}

input[type="checkbox"] {display:block; position:absolute; top:0; left:0; opacity:0; z-index:-999;}
input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:3rem; vertical-align:middle; line-height:2.4rem;}
input[type="checkbox"] + label:before {content:""; display:block; position:absolute; left:0; top:0.1em; width:2.4rem; height:2.4rem; 
	background:url('../img/common/ico_check.svg') no-repeat center; border: 2px solid #C7CAD5; border-radius: 100%; }
input[type="checkbox"]:focus + label {text-decoration:underline; color:#333; }
input[type="checkbox"]:checked + label:before { background-image:url('../img/common/ico_check_wh.svg'); background-color:var(--blue); border-color:var(--blue); }

#wrap {position: relative; width: 100%; overflow-x: hidden; font-size: 1.6rem; letter-spacing: -0.03em; }
.inner { position:relative; width: 86%; max-width:1600px; margin:0 auto; }


/* -----------------------------------------------
	* layout.css (포털 레이아웃)
-----------------------------------------------  */

#header { position: fixed; top:0; left:0; width: 100%; height: 90px; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; 
	z-index: 999; transition: all 0.5s linear; }
#header ul li { display: inline-block; vertical-align: middle; margin-left: 3em; }
#header ul li a { color:#fff; }
#header h1 .logo_color { display: none; }
#header.scroll { background-color:#fff; height: 75px; box-shadow: 0px 3px 20px rgba(0,0,0,0.1); }
#header.scroll h1 .logo_color { display: block; height: 45px; }
#header.scroll h1 .logo_white { display: none; }
#header.scroll ul li a { color:#000; }

@media all and (max-width:1024px) {
	#header { height: 80px; padding: 0 3%;  }
	#header h1 img { height: 45px; }
	#header ul li { margin-left: 2.4rem; }
	#header.scroll { height: 65px; }
}

@media all and (max-width:568px) {
	#header { height: 50px; }
	#header ul { display: none; }
	#header.scroll { height: 50px; background-color:rgba(255,255,255,0.9); backdrop-filter: blur(10px); }
	#header h1 img, 
	#header.scroll h1 .logo_color { height: 30px; }
}

#footer { background:#050B1E; padding: 3em 0; }
#footer .inner { display: flex; align-items: flex-end; color:#fff; font-size: 1.5rem; }
#footer .inner #f-logo { margin-right: 2em; mix-blend-mode: luminosity; }
#footer .inner .f-info dt { font-weight: 700; }
#footer .inner .f-info dd { font-weight: 300; margin-top: 0.5em; line-height: 1.5em;  }
#footer .inner .f-info dd span { margin-right: 1em; }

@media all and (max-width:1024px) {
	#footer .inner { align-items: flex-start; }
}

@media all and (max-width:767px) {
	#footer .inner { flex-direction: column; }
	#footer .inner #f-logo img { height: 40px; margin-bottom: 2em; }
}

@media all and (max-width:568px) {
	#footer .inner #f-logo img { height: 30px; margin-bottom: 1.2em;  }
}


@keyframes btn-circle {
	0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.5; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}

.btn_fix { position:fixed; right:3rem; bottom:3rem; text-align: center; z-index: 9999;  }

.btn_scroll_top { opacity: 0; margin: 30px auto; width:70px; height:70px; background:#fff; border-radius:100%; overflow:hidden; z-index:99; font-size:1.3rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color:var(--black); cursor: pointer; box-shadow: 3px 3px 20px rgba(0,0,0,0.2); }
.btn_scroll_top::before { content:''; width: 24px; height: 24px; background: url('../img/common/arrow_top.svg') no-repeat center; background-size: 100% auto; margin-bottom: 0.4em; }
.btn_scroll_top:visited { color:var(--black); }

.btn_fix.scroll .btn_scroll_top { opacity: 1;}

.btn_contact { position: relative; width: 100px; height: 100px; }
.btn_contact a { position: relative; width: 100%; height: 100%; border-radius: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color:#fff; font-family: 'WavvePADO'; background: var(--mint); background: var(--gradient2); z-index:2;  }
.btn_contact a:hover,
.btn_contact a:visited{ color:#fff; }
.btn_contact a span { margin-top: 0.3em; }
.btn_contact *:not(.point) { position: relative; z-index:2;  }
.btn_contact a::before { content:'';display: block; position: absolute; left:-18px; top: -18px; width:calc(100% + 36px); height: calc(100% + 36px); background: var(--mint); background: var(--gradient2); border-radius: 100%; opacity: 0.2;
	/* -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: btn-circle 1s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: btn-circle 1s cubic-bezier(1, 2, 0.66, 3) infinite; */ } 

.btn_contact .circle,
.btn_contact .circle::before,
.btn_contact .circle::after,
.btn_contact .circle span { border:1px solid rgba(0, 185, 255, 0.5) ; border-radius: 100%; position: absolute; left: 0; top: 0; opacity: 0; margin: 0; width: 100%; height: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: btn-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: btn-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; z-index: 1;  }

.btn_contact .circle::before,
.btn_contact .circle::after { content:''; }
.btn_contact .circle { -webkit-animation-delay: 1s; animation-delay: 1s; }
.btn_contact .circle::before { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.btn_contact .circle::after { -webkit-animation-delay: 2s; animation-delay: 2s; }
.btn_contact .circle span { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }


@media all and (max-width:767px) {
	.btn_fix { right:2rem; bottom:2rem; }
	.btn_scroll_top { width: 40px; height: 40px; font-size:0; margin: 15px auto; }
	.btn_contact { width: 80px; height: 80px; }
	.btn_contact img { width: 40%; }
	.btn_contact span { font-size: 1.4rem; margin-top: 0.5em; }
	.btn_contact a::before { left:-12px; top: -12px; width:calc(100% + 24px); height: calc(100% + 24px); }
}

@media all and (max-width:480px) {
	.btn_fix { right: 1.2rem; bottom: 1.2rem; }
	.btn_scroll_top { display: none; }
	.btn_contact { width: 48px; height: 48px; }
	.btn_contact img { width: 50%; }
	.btn_contact span { display: none; }
	.btn_contact a::before { left:-8px; top: -8px; width:calc(100% + 16px); height: calc(100% + 16px); }
}