@charset "utf-8";

/* common */
html{font-size:62.6%}
body{position:relative;overflow-x:auto;min-width:1500px;font-family:'Play-regular',"Pretendard",-apple-system,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;font-size:1.7rem;color:#111;line-height:1.5;letter-spacing:-.06rem}
fieldset{border:none}
.sr_only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0, 0, 0, 0);clip-path:polygon(0 0, 0 0, 0 0);border:0}
.hidden{display:none}
.scrollLock{position:fixed;overflow-y:hidden;height:100%}
::selection{background:#0099A3;color:#fff}
button,input,select,textarea{font-family:"Pretendard";font-size:1.7rem;box-sizing:border-box}

input[type="text"],input[type="password"],
input[type="tel"],select,textarea{font-family:"Pretendard";padding:0 10px;font-size:1.7rem;border:1px solid #D7DADF;border-radius:4px}
h2{font-size:5.5rem;}
h3{font-size:4.5rem;}
h4{font-size:3.4rem;}
.con_img img{width:100%;display:block}
.bold{font-weight:600}

.dn{display:none}
.dib{display:inline-block}
.db{display:block}
.df{display:flex}

.pr{position:relative}
.pl{position:absolute;left:0;top:0}
.pr{position:absolute;right:0;top:0}

.fl{float:left !important}
.fr{float:right !important}
.clearfix::after{content:"";display:block;clear:both}

.tl{text-align:left !important}
.tc{text-align:center !important}
.tr{text-align:right !important}

.w10{width:10% !important}
.w15{width:15% !important}
.w20{width:20% !important}
.w25{width:25% !important}
.w30{width:30% !important}
.w40{width:40% !important}
.w50{width:50% !important}
.w100{width:100% !important}

.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}

.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb25{margin-bottom:25px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}

.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml25{margin-left:25px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}

.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}
.mr25{margin-right:25px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}
.mr50{margin-right:50px !important}

/* font */
/* Pretendard */
@font-face{
	font-family:'Pretendard';
	font-weight:normal;
	src:url("./font/Pretendard-Regular.woff2") format('woff2'),
	url("./font/Pretendard-Regular.woff") format('woff');
}
@font-face{
	font-family:'Pretendard';
	font-weight:500;
	src:url("./font/Pretendard-Medium.woff2") format('woff2'),
	url("./font/Pretendard-Medium.woff") format('woff');
}
@font-face{
	font-family:'Pretendard';
	font-weight:600;
	src:url("./font/Pretendard-SemiBold.woff2") format('woff2'),
	url("./font/Pretendard-SemiBold.woff") format('woff');
}
@font-face{
	font-family:'Pretendard';
	font-weight:700;
	src:url("./font/Pretendard-Bold.woff2") format('woff2'),
	url("./font/Pretendard-Bold.woff") format('woff');
}
/* play */
@font-face{
	font-family:'Play-regular';
	font-weight:400;
	src:url("./font/Play-Regular.woff") format('woff');
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face{
	font-family:'Play-bold';
	font-weight:700;
	src:url("./font/Play-Bold.woff") format('woff');
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
/* 변수 */
:root{
	/* color */
	--color-primary:#0099A3;
	--color-secondary:#2AD4E5;
	/* size */
	--font-size:1.7rem;
	--border-radius:12px;
}

/* 반응형 */
@media (max-width:1500px){
	body{min-width:374px;width:100%;overflow-x:hidden !important}
	.inner{width:100%;padding:0 20px}
}

@media (max-width:1280px){
	h2{font-size:4.5rem}
	h3{font-size:4rem}
	h4{font-size:2.8rem}
}
@media (max-width:1024px){
	h2{font-size:4rem}
	h3{font-size:3.4rem}
	h4{font-size:2.4rem}
}
@media (max-width:768px){
	h2{font-size:3.4rem}
	h3{font-size:2.8rem}
}
@media (max-width:420px){
	h2{font-size:2.8rem}
	h3{font-size:2.4rem}

}