@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/static/complete/WantedSans.min.css");

/*color*/

:root{
	--point-color:#ad5c9c;

	--gray01:#f8f9fa;
	--gray02:#666;

	--white:#fff;
	--black01:#010101;
	--black02:#121212;
	--black03:#232323;

	--pretendard:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

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{
	margin:0;
	padding:0;
	border:0;
	
/* 	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;*/
	font-size: inherit;
    font-family: inherit;
    color: inherit;
	letter-spacing: inherit;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
	display:block;
}
/* 
*{
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-weight:300;
	letter-spacing: -0.02rem;
	color:var(--black01);
} */

.en{
	 font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	 line-height:1;
}


html{
	font-size:16px;
	overflow-x:hidden;
	font-family:var(--pretendard);
	color:var(--black01);
	letter-spacing:-0.5px;
}

@media screen and (max-width:1280px){
	html{font-size:15px !important;}
}

@media screen and (max-width:900px){
	html{font-size:14px !important;}
}

@media screen and (max-width:767px){
	html{font-size:13px !important;}
}

@media screen and (max-width:320px){
	html{font-size:12px !important;}
}

body{
	/* overflow:hidden; */
	position:relative;
}

ol, ul{
	list-style:none;
}

li::marker {
  content: ''; /* 마커 제거 */
}

blockquote, q{
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after{
	content:'';
	content:none;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

img{
	pointer-events: none;
	vertical-align:middle;
}

a{
	text-decoration:none;
	color:inherit;
}



/*pt, pb, mt, mb*/

.pt200{
	padding-top:200px;
}

.pb200{
	padding-bottom:200px;
}

.pt160{
	padding-top:160px;
}

.pb160{
	padding-bottom:160px;
}

.pt120{
	padding-top:120px;
}

.pb120{
	padding-bottom:120px;
}

.mt80{
	margin-top:80px;
}

.mb80{
	margin-bottom:80px;
}

.mt40{
	margin-top:40px;
}

.mb160{
	margin-bottom:160px;
}

@media screen and (max-width:1240px){
	.pt200{
		padding-top:160px;
	}

	.pb200{
		padding-bottom:160px;
	}

	.pt160{
		padding-top:120px;
	}

	.pb160{
		padding-bottom:120px;
	}

	.mb160{
		margin-bottom:120px;
	}

	.pt120{
		padding-top:100px;
	}

	.pb120{
		padding-bottom:100px;
	}

	.mt80{
		margin-top:60px;
	}

	.mb80{
		margin-bottom:60px;
	}
}

@media screen and (max-width:767px){
	.pt200{
		padding-top:100px;
	}

	.pb200{
		padding-bottom:100px;
	}

	.pt160{
		padding-top:80px;
	}

	.pb160{
		padding-bottom:80px;
	}

	.mb160{
		margin-bottom:80px;
	}

	.pt120{
		padding-top:60px;
	}

	.pb120{
		padding-bottom:60px;
	}

	.mt80{
		margin-top:40px;
	}

	.mb80{
		margin-bottom:40px;
	}
}

@media screen and (max-width:640px){
	.pt200{
		padding-top:80px;
	}

	.pb200{
		padding-bottom:80px;
	}

	.pt160{
		padding-top:60px;
	}

	.pb160{
		padding-bottom:60px;
	}

	.mb160{
		margin-bottom:60px;
	}

	.pt120{
		padding-top:40px;
	}

	.pb120{
		padding-bottom:40px;
	}
}

@media screen and (max-width:460px){
	.mt80 {
        margin-top: 20px;
    }
}

/*공통스타일*/
.vHidden{
	overflow:hidden;
	display:inline-block;
	position:absolute;
	z-index:-1;
	border:0;
	width:1px;
	height:1px;
	clip:rect(1px, 1px, 1px, 1px);
	clip-path:inset(50%);
}

.wrapper{
	width:1300px;
	margin:0 auto;
}

.large_wrapper{
	width:calc(100% - 200px);
	margin:0 auto;
}

@media screen and (max-width:1500px){
	.wrapper{
		width:90%;
	}

	.large_wrapper{
		width:90%;
	}
}


.gray_bg{
	background-color:var(--gray01);
}

.titbox .subtit{
	font-size:1rem;
	color:var(--point-color);
	font-weight:700;
	margin-bottom:20px;
}

.titbox .tit{
	font-size:3.125rem;
	line-height:1.2;
	letter-spacing:-1.5px;
	word-break:keep-all;
}

.titbox .tit strong{
	font-weight:700;
	letter-spacing:inherit;
}

@media screen and (max-width:1400px){
	.titbox .tit{
		font-size:2.8125rem;
	}
}

@media screen and (max-width:1024px){
	.titbox .subtit{
		margin-bottom:15px;
	}

	.titbox .tit{
        font-size: 2.333rem;
    }
}

@media screen and (max-width:460px){
	.titbox .tit{
        font-size: 1.846rem;
    }

	.titbox .subtit{
		margin-bottom:10px;
	}
}


.btnbox{
	padding:6px 6px 6px 20px;
	border-radius:24px;
	border:1px solid var(--black01);
	display:flex;
	align-items:center;
	gap:10px;
	width:fit-content;
	cursor:pointer;
	transition:0.3s;
}

.btnbox .btnTit{
	font-size:1rem;
	font-weight:700;
}

.btnbox figure{
	width:30px;
	height:30px;
	border-radius:20px;
	background-color:var(--black01);
	display:flex;
	justify-content:center;
	align-items:center;
	transition:0.3s;
}

.btnbox figure img{
	width:50%;
	height:auto;
}

.btnbox:hover figure{
	background-color:var(--point-color);
}

@media screen and (max-width:1024px){
	.btnbox figure{
		width:25px;
		height:25px;
	}

	.btnbox figure img{
		width:45%;
	}
}

@media screen and (max-width:460px){
	.btnbox{
		padding:6px 6px 6px 10px;
	}

	.btnbox figure{
		width:20px;
		height:20px;
	}
}

.scrollCircle{
	position:absolute;
	right:40px;
	bottom:40px;
	width:200px;
	height:200px;
	border-radius:50%;
	background-color:rgba(255,255,255,.25);
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:1;
}

.scrollCircle:after{
	display:block;
	width:177px;
	height:177px;
	background:url(/img/scrollWord.png) no-repeat;
	background-size:100%;
	background-position:center;
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	animation:rotate 7s linear infinite; 
}

@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotate(0deg)
	}
	100% 
	{
		transform: translate(-50%, -50%) rotate(360deg)
	};
}

@media screen and (max-width:1200px){
	.scrollCircle{
		right:30px;
		bottom:30px;
		width:160px;
		height:160px;
	}

	.scrollCircle:after{
		width:140px;
		height:140px;
	}
}

@media screen and (max-width:1024px){
	.scrollCircle{
		width:130px;
		height:130px;
	}

	.scrollCircle:after{
		width:110px;
		height:110px;
	}

	.scrollCircle figure{
		width:15%;
	}

	.scrollCircle figure img{
		width:100%;
		height:auto;
	}
}

@media screen and (max-width:640px){
	.scrollCircle{
		width:100px;
		height:100px;
	}

	.scrollCircle:after{
		background-image:url(/img/m_scrollWord.png);
		width:80px;
		height:80px;
	}
}

@media screen and (max-width:460px){
	.scrollCircle{
		right:20px;
		bottom:20px;
	}
}