@charset "utf-8";

/* ==========================================================================
    Reset
   ========================================================================== */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
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;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html{scroll-behavior: smooth;}
body{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; -ms-overflow-style: none;}
body::-webkit-scrollbar {/* display: none; */}
input, textarea, select, button, fieldset, img {border: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: 100%; line-height: normal;}
img {max-width: 100%; vertical-align:middle; -webkit-tap-highlight-color: rgba(0,0,0,0);}
legend, caption {visibility: hidden; overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after,
q::before, q::after {content: none;}
a, a:hover{color: inherit;}
a:link, a:visited, a:hover, a:active {text-decoration: none;}
i::before {margin: 0 !important;}
select {-webkit-border-radius: 0; appearance:menulist-text;}
input[type=text], input[type=password], input[type=submit], select {-webkit-border-radius: 0; -webkit-appearance: none;}
input[type="checkbox"], input[type="radio"]{-webkit-appearance: none;}
input[type=checkbox], input[type=radio] {vertical-align: middle;}
input[type=image] {height: auto;}
input[type=file] {border: 0; background: none;}
textarea {overflow-y: auto;}
input[type="checkbox"], input[type="radio"], label{cursor:pointer}
ol, ul, li {padding: 0; margin: 0; list-style: none;}
label, select, input, button {font-family: inherit;}
input, textarea, select {color: inherit; font-family: inherit;}
table {border-collapse: collapse; border-spacing: 0;}
a, button, input, select{line-height: normal;}
button {background: none; border: 0; padding: 0; margin:0; color: inherit; text-align: left; cursor: pointer; overflow:visible; white-space:nowrap;}
iframe, video {max-width: 100%; display: block;}
.c-scrollbar {display: none !important;}

/* ==========================================================================
    Variable
========================================================================== */
:root {
    --header-height: 60px;
    --basic-color: #111;
    --view-height: calc(var(--vh, 1vh) * 100);
    --fullHeight-minus-header-minus-subpagetit: calc(100vh - 60px - 136px);

    @media (width <= 767px){
        --fullHeight-minus-header-minus-subpagetit: calc(100svh - 60px - 60px);
    }
}


.font-nanum {font-family: 'NanumSquare' !important;}
.font-gotham {font-family: 'gotham' !important;}


@keyframes scale {
    100% {transform: scale(1);}
}

@keyframes fade-in {
    100% {opacity: 1; filter: blur(0);}
}

@keyframes textClip{
	0% {transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
	100% {transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes textBlur{
	0% {filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transform: translateX(100px);}
	100% {filter: blur(0); -webkit-filter: blur(0); opacity: 1; transform: translateX(0);}
}

@keyframes textBlur2{
	0% {opacity: 0; filter: blur(10px);}
	100% {opacity: 1; filter: blur(0);}
}

@keyframes progress {
    from {
        stroke-dashoffset: -38;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeUpScale {
    0% {transform: translateY(30px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes fadeLeft {
    0% {transform: translateX(30px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes zoomIn {
    0% {transform: translate(-50%, -50%) scale(1.2);}
    100% {transform: translate(-50%, -50%) scale(1);}
}

/*  */

@-webkit-keyframes scale {
    100% {transform: scale(1);}
}

@-webkit-keyframes fade-in {
    100% {opacity: 1; filter: blur(0);}
}

@-webkit-keyframes textClip{
	0% {transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
	100% {transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@-webkit-keyframes textBlur{
	0% {filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transform: translateX(100px);}
	100% {filter: blur(0); -webkit-filter: blur(0); opacity: 1; transform: translateX(0);}
}

@-webkit-keyframes progress {
    from {
        stroke-dashoffset: -38;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes fadeUpScale {
    0% {transform: translateY(30px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@-webkit-keyframes fadeLeft {
    0% {transform: translateX(30px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@-webkit-keyframes zoomIn {
    0% {transform: translate(-50%, -50%) scale(1.2);}
    100% {transform: translate(-50%, -50%) scale(1);}
}


/* ==========================================================================
    Common Text
========================================================================== */
html {min-width: 320px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px;}
html:lang(ko){word-break: keep-all;}
body {font-family: 'gotham', 'NanumSquare', 'Montserrat', sans-serif; line-height: 1.4; color: var(--basic-color); text-rendering: optimizeLegibility; background-color: var(--bg-color);}
::selection {background: #222; color: #fff; }

/* ==========================================================================
    Form
========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"] {width: 100%; height: 44px; padding: 0 14px; outline: none; vertical-align: middle; background: #fff; border: 1px solid #dbdbdb; box-sizing: border-box;}
select {width: 100%; height: 44px; padding: 0 20px 0 14px; border: 1px solid #dbdbdb; background: #fff url(../img/common/form_sel_arrow.png) no-repeat calc(100% - 5px) center; vertical-align: middle;}
textarea {width: 100%; padding: 12px 14px; resize: none; border-radius: 0; background-color: #fff; border: 1px solid #dbdbdb;box-sizing: border-box;}
select:focus,
textarea:focus,
input[type=text]:focus,
input[type=password]:focus {outline: none; border: 1px solid #222;; box-shadow: none;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset !important;}
input:focus,
input:focus + label,
select:focus,
textarea:focus {border-color: #222; background-color: #fff;}
input::placeholder,
textarea::placeholder {font-weight: 300; color: #bbb;}

/* ==========================================================================
    BOOTSTRAP & PLUGIN SETTING
========================================================================== */
.btn:focus,
button:focus {box-shadow: none !important; outline: none !important;}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {box-shadow:none;}
.tab-pane{outline: 0;}
.accordion-button:not(.collapsed)::after {transform: rotate(-180deg);}
/*Swiper*/
.swiper {user-select: none;}
.swiper-wrapper {transition-timing-function: ease-out;}
.swiper-slide {transform: translateZ(0); backface-visibility: hidden;}
.swiper-button-next:after,
.swiper-button-prev:after {content:""}
.swiper-button-next,
.swiper-button-prev {width: 35px; height: 70px;}
.swiper-button-next {right: var(--main-gap); background: url('../img/common/mv_arr_next_w.png') no-repeat right center / 25px auto;}
.swiper-button-prev {left: var(--main-gap); background: url('../img/common/mv_arr_prev_w.png') no-repeat left center / 25px auto;}
.swiper-button-prev:hover,
.swiper-button-prev:focus,
.swiper-button-next:hover,
.swiper-button-next:focus,
.swiper-pagination-bullet,
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet:focus {outline:none}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {opacity: .5;}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 24px; display: flex; justify-content: center; gap: 8px;}
/* .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, */
/* .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0; width: 13px; height: 13px; border: 1px solid #fff; background-color: transparent; opacity: .6;} */
/* .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active, */
/* .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: #fff; opacity: 1;} */
/*Aos*/
[data-aos=fade-up] {transform:translate3d(0,50px,0)}
[data-aos=fade-left] {transform:translate3d(50px,0,0)}
[data-aos=fade-right] {transform:translate3d(-50px,0,0)}

/* ==========================================================================
    Utility Class
========================================================================== */
/*Screen Reader Only*/
.sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
/* scr-none : 모바일 메뉴 사용 시, body scroll 금지 */
.scr-none {overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; /* Firefox */}
.scr-none::-webkit-scrollbar {display: none;}
[hidden] {display: none;}
.clearfix::after { content: ''; display: block; clear: both; }
.pre-box {white-space:pre-wrap; word-break:break-all}
.fit-img {width: 100%; height: 100%; object-fit: cover}
.fit-wimg {width: 100%}

/*유튜브 반응형*/
.video-responsive {position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden;}
.video-responsive iframe {position: absolute; left: 0; top: 0; height: 100%; width: 100%;}