/* common-class */
/* layout */
.flex {display: flex; align-items: center; justify-content: center;}
.flex-col {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.grid {display: grid; grid-template-rows: auto; place-items: center;}

/* vh */
.viewport-l {height: 100vh; height: 100lvh !important;}
.viewport-s {height: 100vh; height: 100svh !important;}
.viewport-r {height: 100vh; height: 100dvh !important;}

/* show */
.hide {display: none !important;}
.hidden {visibility: hidden !important;}
.op0 {opacity: 0 !important;}

/* shape */
.circle {border-radius: 50%;}

/* button */
.btn {width: 100%; height: 40px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.btn-type-rec {border-radius: 5px;}
.btn-type-round {border-radius: 20vw;}
.disabled {pointer-events: none; touch-action: none; user-select: none; -webkit-user-drag: none;}

/* color */
:root {
    accent-color: var(--main-color);

    --gray-scale: #bbb;
    --gray-scale-light: #eee;
    --gray-scale-dark: #212121;

    --main-color: #E40031;
    --main-color-hover: #e4003152;
    --main-color-down: #C05A70;
    --event-color: #A7213E;
    --event-color-opacity: #a7213e99;
    --main-color-opacity: rgba(255, 86, 67, 0.1);
    --main-color-contrast: #212121;
    --sub-color: #212121;
    --background-color: #fff;
    --background-hover: #f8f8f8;
    --text-basic: #212121;
    --text-gray: var(--gray-scale);
    --gradient1: #A7213E;
    --gradient2: #C05A70;
    --gradient3: #e4003152;

    --color-naver: #2fbd35;
    --color-kakao: #ffe000;
    --font-color-kakao: #391b1b;
    
    --f-bar-size: 0px;
    
    --love-btn: linear-gradient(-45deg, #fff 30%, #ff335f);
}

.bg-main {background-color: var(--main-color);}
.bg-main-hover:hover {background-color: var(--main-color-hover) !important;}
.bg-bg {background-color: var(--background-color);}
.bg-bg:hover {background-color: var(--background-hover);}
.bg-gray {background-color: var(--gray-scale-light);}
.bg-sub {background-color: var(--sub-color);}
.bg-gradient {background: linear-gradient(to right, var(--gradient1), var(--gradient2));}

.op-white {background-color: rgba(255, 255, 255, 0.8);}
.op-black {background-color: rgba(0, 0, 0, 0.8);}

.line-text {text-decoration: underline;}
.line-main {border: 1px solid var(--main-color);}
.line-sub {border: 1px solid var(--main-color);}
.line-white {border: 1px solid #fff;}
.line-black {border: 1px solid #000;}
.line-gradient {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff), linear-gradient(to right, var(--gradient1), var(--gradient2));
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.filter-black {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: all .35s;
    opacity: 0;
    flex-direction: column;
    padding: 2em;
}
.filter-black:hover,
.filter-white:hover {
    transition: all .35s;
    opacity: 1;
}
.filter-white {
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: all .35s;
    opacity: 0;
    flex-direction: column;
    padding: 2em;
}

/* shadow */
.shadow {box-shadow: 0 0 5px var(--text-basic);}
.inner-shadow {box-shadow: inset 0 0 5px var(--text-basic);}
.shadow-gray {box-shadow: 0 0 5px var(--text-gray);}
.glow-w {box-shadow: 0 0 5px #fff;}
.glow-main {box-shadow: 0 0 5px var(--main-color);}
.glow-sub {box-shadow: 0 0 5px var(--sub-color);}

/* text */
/** {color: var(--text-basic);}*/
.e-bold {font-weight: 900;}
.bold {font-weight: 700;}
.semi-bold {font-weight: 500;}
.regular {font-weight: 400;}
.light {font-weight: 100;}
.t-center {text-align: center; line-height: 1.4;}
.t-left {text-align: left; line-height: 1.4;}
.t-right {text-align: right; line-height: 1.4;}
.t-ellipsis {overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
.t-ellipsis-line2 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.t-ellipsis-line3 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.t-ellipsis-line4 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.t-ellipsis-line5 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
.hashtag::before {content: "#"; color: inherit;}
.req-b::before {content: "(필수)"; color: inherit;}
.choi-b::before {content: "(선택)"; color: inherit;}
.req-a::after {content: "(필수)"; color: inherit;}
.choi-a::after {content: "(선택)"; color: inherit;}
.bar-left::before {content: "| ";}

.text-main {color: var(--main-color);}
.text-main-d {color: var(--main-color-down);}
.text-sub {color: var(--sub-color);}
.text-gray {color: var(--text-gray);}
.text-w {color: #fff;}
.text-gradient {
    width: max-content;
    background: linear-gradient(to right, var(--gradient1), var(--gradient2));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
}
.text-gradient-red {
    width: max-content;
    background: var(--love-btn);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    filter: brightness(1.2);
}
.text-gray-gradient {
    width: max-content;
    background: linear-gradient(to right, #fff,70%, var(--gray-scale1));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
}
.text-gray-gradient2 {
    width: max-content;
    background: linear-gradient(to right, #fff,70%, var(--gray-scale2));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
}

/* line decoration */

.line-left {border-left: 1px solid var(--text-basic);}
.line-right {border-right: 1px solid var(--text-basic);}

/* z-index */
.go-front {z-index: 100;}
.go-back {z-index: -1;}

/* hover */
.gage_wrap {position: relative;}
.gage_wrap .gage-text {z-index: 5;}
.gage_wrap .gage_effect {width: 0; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: all .2s ease-in; background-color: var(--sub-color);}
.gage_wrap:hover .gage_effect {width: 100%;}

/* br */
.br640 {display: none;}

@media screen and (max-width: 640px) {
	.br640 {display: inline !important;}
}

/*japanese*/
.text_ja {font-weight: 500; line-height:1.2;}