@charset "utf-8";
@import url(zReset.css);
@import "/moSt/v2/css/font.css";

/*
 * Dependency : zReset.css, zfonts.css
 *
 * summary:
 * 01) base
 * 02) font
 * 03) flex
 * 04) input
 */

/* **************************************** *
 * base
 * **************************************** */

/* 추후에 전체 개편 후 아래 삭제 후 위에 적용 + zPopup.css도 수정사항 있음 */
:root {--vh: 100%; --color-primary: #0740E4; --color-secondary: #FF673E;}
html {font-size: 6.25%;}
#container,
#footer {font-weight: 400; font-size: 17rem; word-break: break-word; color: var(--textPrimary);} /* 추후 기존 common.css 걷어낸 후 body만 적용 */
#container *,
#footer *{-moz-box-sizing: border-box; box-sizing: border-box;}
#container [lang=en],
#footer [lang=en]{position: relative; top:2rem;}

.gnb__a,
.header__util .btn_allmenu{display: block;}
/* 추후 기존 common.css 걷어낸 후 삭제 end */


/* **************************************** *
 * safari rem bug
 * **************************************** */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        html {-webkit-text-size-adjust:none;  font-size:1px;}
    }
}

/*It works in iOS16 down to iOS 10*/
@supports (-webkit-hyphens:none){
    html { font-size:1px; -webkit-text-size-adjust:none; }
}

/* **************************************** *
 * font
 * **************************************** */
.color-primary {color: #0740E4 !important;}
.color-secondary {color: #FF673E !important;}
.color-scrime{color:#777 !important;}
.ellip {overflow: hidden; display: inline-block; max-width: 100%; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; vertical-align: middle;}
.ellips{overflow:hidden; display:-webkit-box; line-height:1.4em; max-height:2.8em; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis;}
.blind{overflow:hidden; position:absolute; margin:-1rem; width:0rem; height:0rem; clip:rect(0,0,0,0);}
.font-sm{font-size:0.83em;}
.-ellipsis {display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal !important; word-wrap: break-word; word-break: break-word;}


/* **************************************** *
 * flex
 * **************************************** */
[data-css-layout='flex']{display:flex !important; position:relative; justify-content:center;}
[data-css-layout='flexColumn']{display:flex!important; position:relative; flex-direction:column; justify-content:center;}
[data-css-layout='flexRow'] {display:flex!important; position:relative; flex-direction:row; flex-wrap:nowrap;}
[data-css-layout='flexInlineRow'] {display:inline-flex!important; flex-direction:row; flex-wrap:nowrap;}
.column2 > *{width:50%;}
.column3 > *{width:33.3333%;}
.column4 > *{width:25%;}
.column8 > *{width:12.5%;}


/* **************************************** *
 * input
 * **************************************** */
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=number],
input[type=search],
textarea {-webkit-appearance: none; outline: none;}
input[type=submit], input[type=button], button {-webkit-appearance:none; border-radius:0rem;}
input[type=radio] {border-radius: 100%;}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {color: transparent;}


/* **************************************** *
 * scroll bar
 * **************************************** */
*::-webkit-scrollbar { width: 9px; height: 9px; border-radius: 10px; }
*::-webkit-scrollbar-thumb { background-color: #c2c2c2; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background-color: transparent; border-radius: 0; }


/* **************************************** *
 * keyframe
 * **************************************** */
@keyframes flip {0% {transform: rotateX(180deg); opacity: 0;} 30% {transform: rotateX(0); opacity: 1;}  70% {opacity: 1;}  100% {opacity: 0;}}
@keyframes fade {0% {opacity: 0;} 50% {opacity: 1;}  100% {opacity: 0;}}
@-webkit-keyframes flipInX { 0% {-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 0;-webkit-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg)} 40% {-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;-webkit-transform: perspective(400px) rotateX(-20deg);transform: perspective(400px) rotateX(-20deg)} 60% {opacity: 1;-webkit-transform: perspective(400px) rotateX(10deg);transform: perspective(400px) rotateX(10deg)} 80% {-webkit-transform: perspective(400px) rotateX(-5deg);transform: perspective(400px) rotateX(-5deg)} to {-webkit-transform: perspective(400px);transform: perspective(400px)} }
@keyframes flipInX { 0% {-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 0;-webkit-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg)} 40% {-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;-webkit-transform: perspective(400px) rotateX(-20deg);transform: perspective(400px) rotateX(-20deg)} 60% {opacity: 1;-webkit-transform: perspective(400px) rotateX(10deg);transform: perspective(400px) rotateX(10deg)} 80% {-webkit-transform: perspective(400px) rotateX(-5deg);transform: perspective(400px) rotateX(-5deg)} to {-webkit-transform: perspective(400px);transform: perspective(400px)} }
@-webkit-keyframes flipOutX { 0% {-webkit-transform: perspective(400px);transform: perspective(400px)} 30% {opacity: 1;-webkit-transform: perspective(400px) rotateX(-20deg);transform: perspective(400px) rotateX(-20deg)} to {opacity: 0;-webkit-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg)} }
@keyframes flipOutX { 0% {-webkit-transform: perspective(400px);transform: perspective(400px)} 30% {opacity: 1;-webkit-transform: perspective(400px) rotateX(-20deg);transform: perspective(400px) rotateX(-20deg)} to {opacity: 0;-webkit-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg)} }