/* display */
.grid {display: grid;}
.flex {display: flex;}
.flex-reverse {flex-direction: row-reverse;}
.none {display: none;}
.block {display: block;}
.inline-block {display: inline-block;}
.inline-flex {display: inline-flex;}
.hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* position */
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}

/* size */
.width-100, .w_100p {width: 100%;}
.width-50 {width: 50%;}
.width-33 {width: calc(100% / 3);}
.width-25 {width: 25%;}
.width-20 {width: 20%;}
.width-15 {width: 15%;}
.width-10 {width: 10%;}
.width-5 {width: 5%;}

/* align */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.justify-end {justify-content: flex-end;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}

.align-center {align-items: center;}
.align-baseline {align-items: baseline !important;}
.align-start {align-items: start !important;}
.align-end {align-items: end;}

/* overflow */
.o-hidden {overflow: hidden;}

/* image*/
.img-responsive {display: block; max-width: 100%; height: auto; object-fit: cover;}

/* font */
.score1 { font-family: 'S-CoreDream-1Thin'; }
.score2 { font-family: 'S-CoreDream-2ExtraLight'; }
.score3 { font-family: 'S-CoreDream-3Light'; }
.score4 { font-family: 'S-CoreDream-4Regular'; }
.score5 { font-family: 'S-CoreDream-5Medium'; }
.score6 { font-family: 'S-CoreDream-6Bold'; }
.score7 { font-family: 'S-CoreDream-7ExtraBold'; }
.score8 { font-family: 'S-CoreDream-8Heavy'; }
.score9 { font-family: 'S-CoreDream-9Black'; }
.score-800 {font-family: 'S-CoreDream-8Heavy';}
.score-700 {font-family: 'S-CoreDream-7ExtraBold';}
.score-400 {font-family: 'S-CoreDream-4Regular';}

/* font-size */
h1, h2, h3, h4, h5, h6 {line-height:1.2; font-weight:700; margin:0; padding:0; color:#222;}

h1 {font-size:60px;}
h2 {font-size:48px;}
h3 {font-size:36px;}
h4 {font-size:24px;}
h5 {font-size:18px;}

.font-48 {font-size: 48px;}
.font-36 {font-size: 36px;}
.font-30 {font-size: 30px;}
.font-24 {font-size: 24px;}
.font-22 {font-size: 22px;}
.font-20 {font-size: 20px !important;}
.font-18 {font-size: 18px !important;}
.font-16 {font-size: 16px;}
.font-14 {font-size: 14px !important;}
.font-12 {font-size: 12px;}

@media (max-width: 767px) {
	h1 {font-size:60px;}
	h2 {font-size:25px;}
	h3 {font-size:18px;}
	h4 {font-size:18px;}
	h5 {font-size:16px;}

    .font-48 {font-size: 25px;}
    .font-36 {font-size: 22px !important;}
    .font-30 {font-size: 18px !important;}
    .font-24 {font-size: 18px !important;}
	.font-22 {font-size: 18px !important;}
    .font-20 {font-size: 18px !important;}
    .font-18 {font-size: 16px !important;}
    .font-16 {font-size: 14px !important;}
    .font-14 {font-size: 12px !important;}
	.font-12 {font-size: 11px;}
}

/* font-weight */
.weight-900 {font-weight: 900;}
.weight-800 {font-weight: 800;}
.weight-700 {font-weight: 700;}
.weight-600 {font-weight: 600;}
.weight-500 {font-weight: 500;}
.weight-400 {font-weight: 400;}
.weight-300 {font-weight: 300;}
.weight-200 {font-weight: 200;}
.weight-100 {font-weight: 100;}

/* color */
.white { color: #fff !important; text-shadow: 2px 2px 7px black;}
.black { color: #222; }
.gray { color: #777; }
.light-gray { color: #999; }
.white-gray { color: #ccc; }
.light-green { color: #22a777; }
.green { color: #00aa7d !important; }
.blue { color: #1678ff !important; }
.light-red { color: #e25959; }
.red { color: #ff2700; }
.orange { color: #f28e27; }
.purple { color: #6d3fe9; }
.yellow { color: #ffcc00 !important; }

.bg-white { background-color: #fff; }
.bg-black { background-color: #222; }
.bg-dark-gray { background-color: #777; }
.bg-light-gray { background-color: #999; }
.bg-white-gray { background-color: #f5f5f5; }
.bg-light-green { background-color: #22a777; }
.bg-green { background-color: #00aa7d; }
.bg-blue { background-color: #1678ff !important; }
.bg-light-red { background-color: #e25959; }
.bg-red { background-color: #ff2700; }
.bg-orange { background-color: #f28e27; }
.bg-purple { background-color: #6d3fe9; }
.bg-yellow { background-color: #ffcc00 !important; }
.bg-light-yellow { background-color: #fffae4; }

/* margin */
.margin-t-5 {margin-top: 5px;}
.margin-t-10 {margin-top: 10px;}
.margin-t-15 {margin-top: 15px;}
.margin-t-20 {margin-top: 20px;}
.margin-t-30 {margin-top: 30px;}
.margin-t-40 {margin-top: 40px;}
.margin-t-50 {margin-top: 50px;}
.margin-t-70 {margin-top: 70px;}
.margin-t-80 {margin-top: 70px;}
.margin-t-100 {margin-top: 100px;}

.margin-b-5 {margin-bottom: 5px;}
.margin-b-10 {margin-bottom: 10px;}
.margin-b-15 {margin-bottom: 15px;}
.margin-b-20 {margin-bottom: 20px;}
.margin-b-30 {margin-bottom: 30px;}
.margin-b-40 {margin-bottom: 40px;}
.margin-b-50 {margin-bottom: 50px;}
.margin-b-70 {margin-bottom: 70px;}
.margin-b-80 {margin-bottom: 80px;}
.margin-b-100 {margin-bottom: 100px;}

.margin-l-5 {margin-left: 5px;}
.margin-l-10 {margin-left: 10px;}
.margin-l-15 {margin-left: 15px;}
.margin-l-20 {margin-left: 20px;}
.margin-l-30 {margin-left: 30px;}
.margin-l-40 {margin-left: 40px;}
.margin-l-50 {margin-left: 50px;}

.margin-r-5 {margin-right: 5px;}
.margin-r-10 {margin-right: 10px;}
.margin-r-15 {margin-right: 15px;}
.margin-r-20 {margin-right: 20px;}
.margin-r-30 {margin-right: 30px;}
.margin-r-40 {margin-right: 40px;}
.margin-r-50 {margin-right: 50px;}

@media (max-width: 767px) {
	.margin-t-5 {margin-top: 5px;}
	.margin-t-10 {margin-top: 7px;}
	.margin-t-15 {margin-top: 10px;}
	.margin-t-20 {margin-top: 15px;}
	.margin-t-30 {margin-top: 20px;}
	.margin-t-40 {margin-top: 25px;}
	.margin-t-50 {margin-top: 35px;}
	.margin-t-70 {margin-top: 40px;}
	.margin-t-80 {margin-top: 50px;}
	.margin-t-100 {margin-top: 70px;}

	.margin-b-5 {margin-bottom: 5px;}
	.margin-b-10 {margin-bottom: 7px;}
	.margin-b-15 {margin-bottom: 10px;}
	.margin-b-20 {margin-bottom: 15px;}
	.margin-b-30 {margin-bottom: 20px;}
	.margin-b-40 {margin-bottom: 25px;}
	.margin-b-50 {margin-bottom: 35px;}
	.margin-b-70 {margin-bottom: 40px;}
	.margin-b-80 {margin-bottom: 50px;}
	.margin-b-100 {margin-bottom: 70px;}
}

/* padding */
.padding-t-5 {padding-top: 5px;}
.padding-t-10 {padding-top: 10px;}
.padding-t-15 {padding-top: 15px;}
.padding-t-20 {padding-top: 20px;}
.padding-t-30 {padding-top: 30px;}
.padding-t-40 {padding-top: 40px;}
.padding-t-50 {padding-top: 50px;}
.padding-t-70 {padding-top: 70px;}
.padding-t-100 {padding-top: 100px;}

.padding-b-5 {padding-bottom: 5px;}
.padding-b-10 {padding-bottom: 10px;}
.padding-b-15 {padding-bottom: 15px;}
.padding-b-20 {padding-bottom: 20px;}
.padding-b-30 {padding-bottom: 30px;}
.padding-b-40 {padding-bottom: 40px;}
.padding-b-50 {padding-bottom: 50px;}
.padding-b-70 {padding-bottom: 70px;}
.padding-b-100 {padding-bottom: 100px;}

.padding-tb-20 {padding-top: 20px; padding-bottom: 20px;}
.padding-tb-50 {padding-top: 50px; padding-bottom: 50px;}
.padding-tb-100 {padding-top: 100px; padding-bottom: 100px;}

.padding-l-5 {padding-left: 5px;}
.padding-l-10 {padding-left: 10px;}
.padding-l-15 {padding-left: 15px;}
.padding-l-20 {padding-left: 20px;}
.padding-l-30 {padding-left: 30px;}
.padding-l-40 {padding-left: 40px;}
.padding-l-50 {padding-left: 50px;}

.padding-r-5 {padding-right: 5px;}
.padding-r-10 {padding-right: 10px;}
.padding-r-15 {padding-right: 15px;}
.padding-r-20 {padding-right: 20px;}
.padding-r-30 {padding-right: 30px;}
.padding-r-40 {padding-right: 40px;}
.padding-r-50 {padding-right: 50px;}

.padding-lr-20 {padding-left: 20px; padding-right: 20px;}

.padding-20 {padding: 20px;}
.padding-30 {padding: 30px;}

@media (max-width: 767px) {
	.padding-t-5 {padding-top: 5px;}
	.padding-t-10 {padding-top: 7px;}
	.padding-t-15 {padding-top: 10px;}
	.padding-t-20 {padding-top: 15px;}
	.padding-t-30 {padding-top: 20px;}
	.padding-t-40 {padding-top: 25px;}
	.padding-t-50 {padding-top: 35px;}
	.padding-t-70 {padding-top: 40px;}
	.padding-t-80 {padding-top: 45px;}
	.padding-t-100 {padding-top: 50px;}

	.padding-b-5 {padding-bottom: 5px;}
	.padding-b-10 {padding-bottom: 7px;}
	.padding-b-15 {padding-bottom: 10px;}
	.padding-b-20 {padding-bottom: 15px;}
	.padding-b-30 {padding-bottom: 20px;}
	.padding-b-40 {padding-bottom: 25px;}
	.padding-b-50 {padding-bottom: 35px;}
	.padding-b-70 {padding-bottom: 40px;}
	.padding-b-80 {padding-bottom: 45px;}
	.padding-b-100 {padding-bottom: 50px;}

	.padding-lr-20 {padding-left: 15px; padding-right: 15px;}

	.padding-20 {padding: 15px;}
	.padding-30 {padding: 20px;}
}

/* gap */
.gap-5 {gap: 5px;}
.gap-10 {gap: 10px;}
.gap-15 {gap: 15px;}
.gap-20 {gap: 20px;}
.gap-25 {gap: 25px;}
.gap-30 {gap: 30px;}
.gap-50 {gap: 50px;}
.gap-60 {gap: 60px;}
.gap-80 {gap: 80px;}
.gap-100 {gap: 100px;}

@media (max-width: 767px) {
	.gap-20 {gap: 15px;}
	.gap-60 {gap: 40px;}
}

/* 버튼 타입 */
.button-full a {height: 60px; line-height: 60px; display: block; text-align: center; font-size: 24px;}
.button-large a {width: 400px; height: 65px; line-height: 65px; display: inline-block; text-align: center; font-size: 18px;}
.button-medium a {width: 250px; height: 55px; line-height: 55px; display: inline-block; text-align: center; font-size: 18px;}
.button-small a {width: 190px; height: 45px; line-height: 45px; display: inline-block; text-align: center; font-size: 18px;}
.button-xsmall a {display: inline-block; text-align: center; padding: 1px 20px; font-size: 18px;}
.button-mini a {display: inline-block; text-align: center; padding: 1px 10px; font-size: 14px;}
.button-stamp a {width: 225px; height: 60px; line-height: 60px; display: inline-block; text-align: center; font-size: 24px; border-radius: 999px;}

.button-white a {border: 1px solid #ddd; background-color: #fff; color: #222;}
.button-gray a {border: 1px solid #999; background-color: #999; color: #fff;}
.button-light-gray a {border: 1px solid #f5f5f5; background-color: #f5f5f5; color: #222;}
.button-dark-gray a {border: 1px solid #666; background-color: #666; color: #fff;}
.button-black a {border: 1px solid #222; background-color: #222; color: #fff;}
.button-blue a {border: 1px solid #37a8ec; background-color: #37a8ec; color: #fff;}
.button-red a {border: 1px solid #de4141; background-color: #de4141; color: #fff;}
.button-green a {border: 1px solid #15ca73; background-color: #15ca73; color: #fff;}
.button-yellow a {border: 1px solid #ffbb00; background-color: #ffbb00; color: #222;}
.button-disable a {border: 1px solid #ddd; background-color: #ddd; color: #aaa;}

.button_submit {background-color: #333; color: #fff; width: 60px; height: 40px;}

.round-3 {border-radius: 3px;}
.round-5 {border-radius: 5px;}
.round-7 {border-radius: 7px;}
.round-10 {border-radius: 10px;}
.round-15 {border-radius: 15px;}
.round-20 {border-radius: 20px;}

@media (max-width: 767px) {
	.button-small a {
		width: auto;
		padding: 0 20px;
		height: 45px;
		line-height: 45px;
		display: inline-block;
		text-align: center;
		font-size: 18px;
	}
}