@charset "utf-8";

@font-face {
    font-family: 'Century Gothic';
    src: url('../font/CenturyGothic.woff2') format('woff2'),
    url('../font/CenturyGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* **** reset **** */

*{ margin: 0; padding: 0; box-sizing: border-box; }

a{text-decoration: none; color: #000;}
li{list-style: none;}
img{border: 0;}
button {border:0 none; background-color:transparent; cursor:pointer;}
/* input, textarea{box-shadow: none;-webkit-appearance: none; -moz-appearance: none; appearance: none; } */
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
/* input::-ms-clear { display: none;} */
br{font-family: Sans-Serif;}

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;border: 0;font: inherit;vertical-align: baseline;}
button:focus {outline: 0;}
input:focus {outline:none;}

.century{font-family:Century Gothic;font-weight: 600; }
.century.thin{font-weight: 500;}
@keyframes pageLoad{0%{opacity: 1;} 100% {opacity: 0.3;}}
@keyframes pageLoadHide{0%{opacity: 1;}20%{opacity: 1;} 99%{opacity: 0;width:100%}100% {opacity: 0;width:0%}}
body.ready.load #whiteWall {animation: pageLoadHide 0.8s 1;animation-fill-mode:both;}
body.brand.brand_load #brand-loading {animation: pageLoadHide 0.8s 1;animation-fill-mode:both;}


#ProcessingLayer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.75);display: none;justify-content: center;align-content: center;flex-wrap: wrap;z-index: 11;}
#ProcessingLayer .loading-img{background-color: #000;color: #fff;width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;border-radius: 60%;opacity: 1;}
#ProcessingLayer .loading-img img{animation-name: pageLoad;animation-duration: 1.2s;animation-iteration-count: infinite;animation-direction: alternate;}

.msg-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.msg-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}
.msg-window .msg-box{background-color: #fff;z-index: 1;min-width: 59rem;padding: 7.9rem 0;position: relative;border-radius: 1rem;}
.msg-window .msg-box .msg-box-close{width: 2.6rem;    position: absolute;top: 2rem;right: 2rem;}
.msg-window .msg-box p{font-size: 3.2rem;text-align: center;line-height: 1.5em;padding: 3rem;}

.confirm-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.confirm-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}
.confirm-window .msg-box{background-color: #fff;z-index: 1;max-width: 74.4rem;min-width: 59rem;padding: 8.9rem 3rem;position: relative;}
.confirm-window .msg-box .msg-box-close{width: 2.6rem;    position: absolute;top: 2rem;right: 2rem;}
.confirm-window .msg-box .sample-list{margin-top:7.85rem }
.confirm-window .msg-box p{font-size: 3rem;text-align: center;line-height: 1.5em;}
.confirm-window .msg-box li{font-size: 2.6rem;font-weight:500;text-align: center;line-height: 1.5em;display: flex;align-items: center;justify-content: center;}
.confirm-window .msg-box li::before{content:'';background-image: url("../images/system/icon-dat.png");width: 0.7rem;height: 0.7rem;background-size: cover;display: inline-block;margin-right: 0.6rem;}
.confirm-window .msg-box li .shopName{}
.confirm-window .msg-box li .sampleCount{}
.confirm-window .msg-box .button-box{margin-top: 7.85rem;}
.confirm-window .msg-box .button-box button{    background-color: #000;color: #fff;width: 28.8rem;font-family: 'Noto Sans KR';font-weight: 400;font-size: 2.697rem;line-height: 4.059rem;letter-spacing: -0.075em;height: 7.8rem;margin: 0 auto;display: flex;flex-direction: column;align-items: center;justify-content: center;}

#KakoaINfoLayer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.75);display: none;justify-content: center;align-content: center;flex-wrap: wrap;z-index: 10;}
#KakoaINfoLayer .content-box{width: 100%;max-width: 76rem;background-color: #000;padding: 6rem;box-sizing: border-box;position: relative;max-height: -webkit-fit-content;max-height: fit-content;margin: auto;}
#KakoaINfoLayer .content-box img{width: 100%}
#KakoaINfoLayer .content-box .text-box{color:#fff;font-size: 3rem;    line-height: 3.85rem;display: flex;flex-wrap: wrap;    font-weight: 120;}
#KakoaINfoLayer .content-box .text-box ul{margin: 3rem 0 4rem;display: flex;width: 100%;}
#KakoaINfoLayer .content-box .text-box li span.bold{font-weight: 700;}
#KakoaINfoLayer .content-box .text-box li .item-box{width: 100%;height: 100%;text-align: center;line-height: 4rem;letter-spacing: -0.05em;}

#KakoaINfoLayer .content-box .text-box li{position: relative;margin-top: 2rem;display: flex;align-items: flex-start;width: 50%;flex-wrap: wrap;}
#KakoaINfoLayer .content-box .text-box li:before{font-weight: 400;background-color: #d3000f;border-radius: 50%;width: 5.9rem;height: 5.9rem;display: inline-flex;justify-content: center;align-items: center;margin: 0 auto 1rem;}
#KakoaINfoLayer .content-box .text-box li:nth-child(1):before{content: '1';}
#KakoaINfoLayer .content-box .text-box li:nth-child(2):before{content: '2';}
#KakoaINfoLayer .content-box #channel-add-btn {font-weight: 400;background: #fff;padding: 2rem 8rem;border-radius: 25px;margin: 0 auto;}
#KakoaINfoLayer .content-box .close-btn{position: absolute;width: 3rem;right: 0;top: 0;margin: 2rem;}


#kakaoLayer {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);display:none;justify-content: center;align-items: center;    z-index: 2;}
#kakaoLayer img {width: 100%;}
#kakaoLayer .kakao-window{width:64.1rem;background:rgba(0,0,0,255);position: relative;padding: 5rem 0;}
#kakaoLayer .kakao-window .title-box{width: 29.1rem;margin:0 auto;}
#kakaoLayer .closeBtn{display:block;width: 2.1rem;position: absolute;right: 1.2rem;top:1.2rem;}
#kakaoLayer .closeBtn img{cursor:pointer;}
#kakaoLayer .input-box{width: 55.8rem;margin:7rem auto 0;}
#kakaoLayer .input-box textarea{width:100%;padding:1em;}
#kakaoLayer .info-box{width: 40.1rem;margin:0 auto;}

.cancelConfirm-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.cancelConfirm-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}
.cancelConfirm-window .msg-box{background-color: #ffffff;z-index: 1;width: calc(100% - 11.2rem);max-width: 65rem;padding: 7.9rem 6rem;position: relative;min-height: 26.8rem;display: flex;justify-content: center;align-items: center;flex-direction: column;color: #000000;    border-radius: 1rem;}
.cancelConfirm-window .msg-box .msg-box-close{width: 2.6rem;position: absolute;top: 2rem;right: 2rem;}
.cancelConfirm-window .msg-box p{font-size: 3rem;text-align: center;font-weight: 400;line-height: 1.5em;padding: 3rem 0;}
.cancelConfirm-window .msg-box #cancelConfirmCompleteButton{font-size: 3.1rem;font-weight: 400;color: #ffffff;line-height: 1.2em;letter-spacing: -0.075em;cursor: pointer;background-color: #000000;width: 33.2rem;height: 9rem;display: flex;justify-content: center;align-items: center;margin-top: 5rem;}



.changeConfirm-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.changeConfirm-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}
.changeConfirm-window .msg-box{background-color: #ffffff;z-index: 1;width: calc(100% - 11.2rem);max-width: 65rem;padding: 7.9rem 6rem;position: relative;min-height: 26.8rem;display: flex;justify-content: center;align-items: center;flex-direction: column;color: #000000;    border-radius: 1rem;}
.changeConfirm-window .msg-box .msg-box-close{width: 2.6rem;position: absolute;top: 2rem;right: 2rem;}
.changeConfirm-window .msg-box p{font-size: 3rem;text-align: center;font-weight: 400;line-height: 1.5em;padding: 3rem 0;}
.changeConfirm-window .msg-box #changeConfirmCompleteButton{font-size: 3.1rem;font-weight: 400;color: #ffffff;line-height: 1.2em;letter-spacing: -0.075em;cursor: pointer;background-color: #000000;width: 33.2rem;height: 9rem;display: flex;justify-content: center;align-items: center;margin-top: 5rem;}




body.kakaoopen #kakaoLayer {display: flex;}
body.loading #ProcessingLayer {display: flex;background:rgba(0,0,0,0.75);}
body.kakainfoopen #KakoaINfoLayer {display: flex;background:rgba(0,0,0,0.75);}
body.msgopen {height: 100vh;overflow: hidden;}
body.msgopen .msg-window {display: flex;}
body.confirmopen {height: 100vh;overflow: hidden;}
body.confirmopen .confirm-window {display: flex;}
body.cancelConfirmopen .cancelConfirm-window {display: flex;}
body.changeConfirmopen .changeConfirm-window {display: flex;}


#whiteWall{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: white;justify-content: center;display: none;align-items:center;z-index: 11;}
#whiteWall .symbol{background-color: #000;color: #fff;width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;border-radius: 60%;opacity: 1;}
#whiteWall .symbol img{ width: 100px;}
body.ready #whiteWall{display: flex;}

#brand-loading{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: white;justify-content: center;display: none;align-items:center;z-index: 12;}
#brand-loading .brand-logo{color: #fff;width: 45rem;display: flex;justify-content: center;align-items: center;border-radius: 60%;opacity: 1;}
#brand-loading .brand-logo img{ width: 100%;}
body.brand #brand-loading{display: flex;}