@charset "utf-8";

@font-face {
    font-family: 'Century Gothic Pro';
    src: url('../font/CenturyGothicPro-BoldItalic.woff2') format('woff2'),
    url('../font/CenturyGothicPro-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'Century Gothic Pro';
    src: url('../font/CenturyGothicPro-Italic.woff2') format('woff2'),
    url('../font/CenturyGothicPro-Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

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

@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;}


#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;}
body.loading #ProcessingLayer{display: flex;}

.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;}

body.msgopen {height: 100vh;overflow: hidden;}
body.msgopen .msg-window {display: flex;}


.complete-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.complete-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}
.complete-window .msg-box{background-color: #fff;z-index: 1;min-width: 73.7rem;padding: 9rem 0;position: relative;border-radius: 1rem;}
.complete-window .msg-box .msg-box-close{width: 2.6rem;    position: absolute;top: 2rem;right: 2rem;}
.complete-window .msg-box h2{font-size: 4rem;text-align: center;font-weight: 500;}
.complete-window .msg-box p{font-size: 3.1rem;text-align: center;font-weight: 300;margin-top: 1rem;}
.complete-window .msg-box .android {font-size: 2.7rem;color: #A4A4A4;text-align: center;width: 100%;margin-top: 7rem;text-decoration: underline;text-underline-offset: 0.5rem;}
.complete-window .msg-box .img-box.ios{width: 47rem;margin: 1.4rem auto 7rem;}
.complete-window .msg-box .img-box.android{width: 61.9rem;margin: 1.4rem auto 7rem;}
.complete-window .msg-box .img-box > img{width: 100%;display: block;}
.complete-window .button-box{column-gap: 1.5rem;padding-bottom: 0;}
.complete-window .button-box .button.black{width: 30.8rem;height: 10rem;font-size: 3.1rem;}

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

body.completeOpen {height: 100vh;overflow: hidden;}
body.completeOpen .complete-window {display: flex;}
body.kakaoChannelopen .kakaoChannel-window {display: flex;}


.android-info-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.android-info-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}

.android-info-window .msg-box{background-color: #fff;z-index: 1;width: calc(100% - 11rem);height: calc(100% - 11rem);position: relative;border-radius: 1rem;padding:5.5rem 3.6rem;}
.android-info-window .msg-box h2{font-size: 4rem;text-align: center;font-weight: 500;display: block;border-bottom: 1px solid #BEBEBE;padding-bottom: 2.5rem;height: 8.4rem;vertical-align: top;}
.android-info-window .img-wrapper{width:100%;height:calc(100% - 8.4rem);overflow: scroll;}
.android-info-window .msg-box .msg-box-close{width: 2.6rem;position: absolute;top: 2rem;right: 2rem;}
.android-info-window .msg-box .img-box{width: 100%;}
.android-info-window .msg-box .img-box > img{width: 100%;display: block;}

body.androidInfoOpen {height: 100vh;overflow: hidden;}
body.androidInfoOpen .android-info-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;}