@font-face {font-family: "kbiz";src: url("./font/KBIZ한마음명조 M.ttf");}
@font-face {font-family: "nanum";src: url("./font/NanumSquare_acR.ttf");}
@font-face {font-family: "nanumThin";src: url("./font/NanumSquareL.ttf");}
@font-face {font-family: "nanumThick";src: url("./font/NanumSquare_acEB.ttf");}
@font-face {font-family: "gmarketBold";src: url("./font/GmarketSansTTFBold.ttf");}
@font-face {font-family: "gmarketLight";src: url("./font/GmarketSansTTFLight.ttf");}
@font-face {font-family: "gmarketMedium";src: url("./font/GmarketSansTTFMedium.ttf");}
img {width: 100%}



/* 헤더 */
header {position: fixed;top: 1rem;right:.5rem;z-index: 100;width: 100%;padding-left: 2rem;display: flex;align-items: center;justify-content: space-between;}
header span {display: flex;align-items: center;}
header .gologin {width: 5rem;height: 6rem;cursor: pointer;background: url(../img/btn_home.png) no-repeat center/contain;}
header .ham {width: 5rem;height: 6rem;cursor: pointer;background: url(../img/menu_black.png) no-repeat center/contain;    
}
header .ham.white {background: url(../img/menu_wh.png) no-repeat center/contain;}
header .back {width: 4rem;height: 6.5rem;cursor: pointer;background: url(../img/back.png) no-repeat center/contain;  
}
header.on .prev {display: none;}
header.on h1 {display: none;}
nav .inner {position:fixed;right:-100%;top:0;width:65%;height:100%;z-index: 1000;max-width: 500px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;overflow-y: scroll;background-color: #9a1f24;transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1);}
nav .outer {background-color:rgba(0, 0, 0, .5);min-height: 100vh;position:fixed;width:100%;left:0;top:0;z-index: 999;display: none;}
nav.on .inner {display: flex;right: 0;}
nav.on .outer {display: block;}
nav .inner .nav_header {display: flex;padding: 1.5rem 1.2rem 0 1.5rem;width: 100%;align-items: center;justify-content: right;}
nav .inner .nav_header .close {width:3rem;height:3rem;cursor: pointer;background:url('../img/close.png') no-repeat center/contain;}
nav .inner .content {width: 100%;}
nav .inner .content li a {color: #fff;display: block;font-size: 1.4rem;font-family: kbiz;text-align: right;line-height: 1.4;width: 100%;border-bottom: 1px solid rgba(255, 255, 255, .3);padding: 2rem 1rem;}
nav .inner .content li a.checked {background-color: #524a4a;}
nav .inner .bg_1 {width: 100%;display: block;margin: 0 auto;margin-top: 3rem;}
nav .inner .bg_2 {width: 50%;display: block;margin: 0 auto;}



/* index */
.indexBackgroundImage {background: url(../img/index.png);background-size: cover;position: relative;min-height: 100vh;}



/* 홈영역 */
.homeinnerWrapper{padding: 0rem 1.5rem 1.5rem 1.5rem;}
.backgroundcolorwrapper {margin: 0;padding: 0;}
.homeHeader {display: flex;align-items: center;justify-content: center;}
.homeHeaderimg {width: 30%;}
.homeHeaderimg img {width: 100%;}
.homeBG {background: url(../img/main_bg.png) repeat center / cover;display: flex;align-items: center;justify-content: center;flex-direction: column;min-height: 100vh;width: 100%;}
#app {width: 60%;overflow: hidden;border-radius: 1rem;margin-bottom: 1rem;background: #fff url(../img/img_loginbox.png) center 100% / cover;box-shadow: 10px 10px 8px rgba(135, 109, 78, 0.305);}
.out {display: block;text-align: right;margin-bottom: 2.4rem;width: 75%;font-family: kbiz;font-size: 1.2rem;}

.bearImg {width: 60%;height: 45vh;object-fit: contain;}
.tabs {display: flex;justify-content: space-between;}
.tab {flex: 1;padding: 10px;text-align: center;background: none;border: none;cursor: pointer;transition: background-color 0.3s ease;color: #333;background-color: #c3b8a8;}
.tab:active,.tab:focus {outline: none;}
.tab.active {background: url(../img/img_loginbox.png) no-repeat center 0 / cover;} 
form {padding: 20px;}
form:last-child {border-bottom: none;}h2 {margin-bottom: 20px;color: #333;text-align: center;}input {width: 50%;padding: 10px;border-radius: 1rem;font-size: 1.4rem;cursor: pointer;transition: background-color 0.2s ease;font-family: kbiz;}
.tabs button {font-size: 1.6rem;color: #fff;font-family: kbiz;font-weight: bold;}
input {border: none;outline: none;background: none;width: 100%;}
#registerForm div #checkUsername {width: 60%;}
#registerForm div, #loginForm div {display: flex;align-items: center;border-bottom: 0.2rem #ffffff8f solid;font-size: 1.4rem;color: #fff;font-family: kbiz;justify-content: space-between;text-align: center;line-height: 1.4;}
#checkDuplicate {padding: 0.7rem 1rem;background-color: #ffffff93;border-radius: 0.7rem;font-size: 1.2rem;display: block;font-family: kbiz;color: #787777;outline: none;}
.submitBtn {padding: 1rem;display: block;width: 100%;background-color: #ffffff93;border-radius: 0.7rem;margin: 0 auto;margin-top: 2rem;font-size: 1.6rem;font-family: kbiz;color: #787777;font-weight: 600;}
.goMyTree {background: url(../img/btn.png);width: 60%;padding: 1.5rem;display: none;margin: 0 auto;border-radius: 1rem;background-size: cover;font-size: 1.6rem;font-family: kbiz;color: #545252;box-shadow: 5px 5px 7px rgba(135, 109, 78, 0.5);font-weight: 600;}
.goMyTree.active {display: block;}
.pwck {display: block;width:fit-content;font-size: 1.4rem;font-family: kbiz;line-height: 1.2;color: #fff;text-align: start;white-space: nowrap;}

form.homeform {display: none;}
form.homeform.active {display: block;}



/* myChristmasTree */
.backgroundImage {background-image: url(../img/bgbg.png);background-size: cover;position: relative;min-height: 100vh;}
.innerWrapper {padding: 3rem;}
h1 {font-size: 2rem;line-height: 1.3;font-family: kbiz;margin-bottom: 1rem;}
.nic {font-size: 2rem;line-height: 1.3;font-family: kbiz;margin-bottom: 1rem;font-weight: 600;}
.innerWrapper h3 {margin-bottom: 3rem;}
h3 {font-size: 1.7rem;line-height: 1.3;font-family: kbiz;}
h4 {font-size: 1.4rem;font-family: kbiz;overflow: hidden;text-overflow: ellipsis;width: 80%; }
.specialText {font-weight: 600;letter-spacing: -1px;}
.redFont {font-size: 1.7rem;line-height: 1.3;font-family: kbiz;color: #9c1d00;font-weight: 600;}
.christmasTree {position: relative;width: 32rem;margin: 0 auto;}
.christmasTree h4 {font-weight: 600;height: 1.5rem;}
.gift {position: absolute;width: 7rem;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;white-space: nowrap;text-align: center;}
.gift:nth-child(2){top: 0rem;left: 50%;transform: translateX(-50%);}
.gift:nth-child(3) {top: 9rem;left: 9rem;}
.gift:nth-child(4) {top: 9rem;right: 9rem;}
.gift:nth-child(5) {top: 18rem;left: 6rem;}
.gift:nth-child(6) {top: 18rem;left: 50%;transform: translateX(-50%);}
.gift:nth-child(7) {top: 18rem;right: 6rem;}
.gift:nth-child(8) {top: 27rem;left: 3rem;}
.gift:nth-child(9) {top: 27rem;left: 9rem;}
.gift:nth-child(10) {top: 27rem;right: 9rem;}
.gift:nth-child(11) {top: 27rem;right: 3rem;}
.gift:nth-child(12) {top: 36rem;left: -1rem;}
.gift:nth-child(13) {top: 36rem;left: 6rem;}
.gift:nth-child(14) {top: 36rem;left: 50%;transform: translateX(-50%);}
.gift:nth-child(15) {top: 36rem;right: 6rem;}
.gift:nth-child(16) {top: 36rem;right: -1rem;}
.paperBtn {background: url(../img/btn.png);width: 100%;padding: 1.5rem;display: block;margin: 0 auto;border-radius: 1rem;background-size: cover;font-size: 1.6rem;font-family: kbiz;color: #545252;margin-bottom: 1.5rem;box-shadow: 5px 5px 7px rgba(135, 109, 78, 0.5);text-align: center;font-weight: 600;}
.prevPageLink {position: absolute;top: 50%;left: 0rem;width: 2rem;}
.nextPageLink {position: absolute;top: 50%;right: 0rem;width: 2rem;}



/* choose */
.chooseBG {background: url(../img/sub_bg_2-1.png);background-size: cover;position: relative;width: 100%;min-height: 100vh;}
.chooseInner {padding: 3rem 1.5rem;position: relative;}
.chooseInner h1 {text-align: center;margin-bottom: 0;}
.chooseBox {display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 1rem;}
.chooseBox li {width: 29%;margin-bottom: 2.5rem;background: url(../img/img_iconbox.png);border-radius: 0.7rem;background-size: cover;}
.chooseBox .selected{border: 0.5rem solid #af432b;border-radius: 0.9rem;}
.chooseBox li img {width: 100%;box-shadow: 5px 5px 7px rgba(135, 109, 78, 0.2);border-radius: 0.7rem;}
.chooseTopImg {width: 14rem;display: block;margin: 0 auto;padding-top: 2rem;}



/* writeCard */
.cardBG {background: url(../img/card_2.png);background-size: cover;position: relative;min-height: 100vh;}
.cardTopImg {padding-top: 10rem;width: 100%;}
.writeCardInner {padding: 3rem 1.5rem;}
.from {font-size: 1.8rem;display: flex;align-items: center;border-bottom: 0.1rem solid #e2e3e3;margin-bottom: 3rem;padding-bottom: 0.5rem;margin-top: 3rem;}
.from input {border: none;outline: none;border-radius: 0;padding: 0;margin: 0;}
.from h3 {width: 20%;font-weight: 600;width: 25%;}
.writeCardInner .letter {width: 100%;min-height: 40vh;border-radius: 1rem;border: 0.1rem solid #e2e3e3;outline: none;background-color: #fff;overflow-wrap: break-word;display: flex;justify-content: start;align-items: start;padding: 2rem;font-size: 1.6rem;font-family: kbiz;margin-bottom: 3rem;line-height: 1.3;}
.cardTitle {display: flex;align-items: center;}
.cardTitle img {width: 8rem;margin-left: 1rem;display: block;border-radius: 0.7rem;}
.cardTitle h1 {margin: 0;}



/* christmasCard */
.letterGiftImg {display: block;margin: 0 auto;width: 8rem;margin-bottom: 3rem;margin-top: 1rem;}
.letterBox {padding: 2rem;border-radius: 1rem;background-color: #fff;min-height: 50vh;border: 0.1rem solid #e2e3e3;margin: 0 2rem;}
.letterBox pre {font-family: kbiz;font-size: 1.6rem;line-height: 1.4; word-break: break-all;}
.letterFrom {display: flex;margin: 2rem;justify-content: end;}
.letterFrom h1 {font-weight: 600;padding-bottom: 0rem;margin-bottom: 0.5rem;}



/* 모달 */
.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;z-index: 999;}
.modal-content {display: flex;align-items: center;justify-content: center;position: relative;width: 100%;height: 50vh;}
.openme {position: absolute;top: 0;width: 40%;z-index: 2;left: 50%;transform: translateX(-50%);}
.letterImg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 70%;z-index: 1;}
.giftImg {position: absolute;top: 55%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 20%;z-index: 1;}
.closeModalBtn {position: fixed;top: 0.5rem;right: 1.5rem;color: #fff;font-size: 4rem;}




/* withdrawal영역 */
.withdrawalBox {background: url(../img/img_loginbox.png);background-size: cover;width: 60%;border-radius: 1rem;}
.withdrawalBox div {font-size: 1.6rem;font-family: kbiz;line-height: 1.3;color: #fff;}
.withdrawalBox div input {border-bottom: 0.1rem solid #ffffff90;border-radius: 0;padding: 0.2rem;}
.withdrawalBox div {margin-bottom: 2rem;}
.withdrawalBox button {padding: 0.5rem 1rem;background-color: #ffffff63;font-size: 1.2rem;font-family: kbiz;display: block;border-radius: 0.5rem;}
.withdrawalBox .withdrawalBtn {margin-bottom: 0;display: flex;justify-content: right;}
.withdrawalBox .textout { font-size: 1.3rem;margin-bottom: 1rem;}




/* 캘린더 */
.calendar {background: url(../img/calendar_bg.png) no-repeat center / cover;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.calendar h2 {font-family: kbiz;font-size: 1.8rem;color: #4e4d4e;line-height: 1.2;margin-bottom:1rem;font-weight: bold;}
.calendar .warn {font-family: kbiz;font-size: 1.4rem;color: #e0331f;line-height: 1.2;font-style: italic;margin-bottom: 2rem;font-weight: bold;}
.calendar .presentBox {width: 60%;max-width: 450px;margin-bottom: 1rem;}
.calendar .december {width: 55%;max-width: 400px;margin-bottom: 3rem;}
.calendar form {display: grid;width: 80%;padding: 0;max-width: 500px;}
.calendar form .sevenDays {display: grid;margin-bottom: 1rem;grid-template-columns: repeat(7, 1fr);}
.calendar form .sevenDates {display: grid;grid-template-columns: repeat(7, 1fr);}
.calendar form .sevenDates label {position: relative;padding: .5rem 0;width: 100%;}
input[type="radio"] {display: none;}
input[type="radio"] + label {cursor: pointer;width: fit-content;border-radius: .5rem;}
input[type="radio"] + label:before {content: "";position: absolute;height: 3rem;width: 3rem;top: 50%;left: 50%;background: url(../img/select.png) no-repeat center / contain;transform: translate(-50%, -50%);display: none;}
input[type="radio"]:checked + label:before {display: block;}
.calendar form .sevenDays img {height: 1.5rem;object-fit: contain;}
.calendar form .sevenDates img.dates {height: 2rem;object-fit: contain;}
.calendar form .sevenDates .sun {filter: hue-rotate(157deg) brightness(1.2) invert(1) brightness(1) contrast(2.5);}
#calendar_submit {
    
    background: url(../img/btn.png) no-repeat center / cover;
    width: 100%;
    padding: 1.5rem;
    display: block;
    margin: 0 auto;
    border-radius: 1rem;
    background-size: cover;
    font-size: 1.6rem;
    font-family: kbiz;
    color: #545252;
    margin-bottom: 1.5rem;
    box-shadow: 5px 5px 7px rgba(135, 109, 78, 0.5);
    text-align: center;
    font-weight: 600;

    margin-top: 3rem;
}




/* mean : 크리스마스 유래 */
.mean_wrap {
    min-height: 100vh;
    width: 100%;
    padding: 5%;
    background: url('../img/mean_bg.png') no-repeat center 0 / cover;
}
.mean_wrap .mean_bear {
    z-index: -1;
    max-width: 450px;
    display: block;
    margin: 0 auto;
    margin-bottom: 3rem;
    position: relative;
}
.mean_wrap h2 {
    font-size: 1.9rem;
    line-height: 1.4;
    font-weight: 500;
    font-family: kbiz;
    text-align: left;
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.mean_wrap h2 em {
    font-size: inherit;
    font-weight: bold;
    line-height: inherit;
    color: #931016;
    font-family: inherit;
}
.mean_wrap h2 .santaBear {
    width: 90%;
}
.mean_wrap h3 {
    font-weight: bold;
    color: #941117;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    line-height: 1.4;
    font-family: kbiz;
}
.mean_wrap p {
    color: #333;
    font-size: 1.6rem;
    margin-bottom: 4rem;
    font-family: kbiz;
    line-height: 1.4;
}


/* capture_wrap : 소원 이미지 저장 */
#captureArea {
    background-color: inherit;
    padding-bottom: 1rem;
}
.capture_wrap {
    background-color: #c1a081;
    min-height: 100vh;
    width: 100%;
    padding-bottom: 5%;
}
.capture_wrap h2 {
    font-size: 1.6rem;
    color: #fff;
    line-height: 1.4;
    text-align: left;
    font-family: kbiz;
    margin-bottom: 0;
    padding: 5rem 10% 15% 7%;
}
.capture_wrap h2 b {
    font-size: 1.2rem;
    font-weight: inherit;
    color: rgba(255, 255, 255, .8);
    font-family: inherit;
}
.capture_wrap img {
    max-width: 1000px;
    display: block;
    margin: 0 auto;
}
.capture_wrap .box {
    background-color: inherit;
    border: 1px solid #fff;
    border-radius: 1rem;
    margin: 1.5rem 5% 4rem;
    padding: 1.5rem;
}
.capture_wrap .box label {
    font-size: 1.8rem;
    color: #fff;
    font-family: kbiz;
    font-style: italic;
    padding-bottom: .5rem;
    display: block;
}
.capture_wrap .box input {
    color: #fff;
    line-height: 1.4;
    padding: 2rem 0 1rem;
    margin-bottom: 1rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    font-size: 1.6rem;
}
.capture_wrap .box pre {
    min-height: 10rem;
    line-height: 1.4;
    background: inherit;
    border: none;
    outline: none;
    width: 100%;
    font-size: 1.6rem;
    color: #fff;
    font-family: kbiz;
    height:auto;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}
.capture_wrap .box pre div {
    line-height: inherit;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.capture_wrap .box pre.no_content {
    color: rgba(255, 255, 255, .3);
}
.capture_wrap .box p {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
}
.capture_wrap .box p .textCount, .capture_wrap .box p #used, .capture_wrap .box p #left {
    font-size: inherit;
    color: inherit;
}
.capture_wrap .box p .textCount.warn {
    color: rgb(255, 29, 40);
}
.capture_wrap .box textarea::placeholder,
.capture_wrap .box input::placeholder {
    color: rgba(255, 255, 255, .4);
    font-size: 1.6rem;
    line-height: 1.4;
}
.capture_wrap button {
    background: url(../img/btn.png);
    padding: 1.5rem;
    display: block;
    margin: 0 auto;
    border-radius: 1rem;
    background-size: cover;
    font-size: 1.6rem;
    font-family: kbiz;
    color: #545252;
    margin-bottom: 1.5rem;
    box-shadow: 5px 5px 7px rgba(135, 109, 78, 0.5);
    text-align: center;
    font-weight: 600;
    margin:2rem 5%;
    width: calc(100% - 10%);
}
.capture_wrap .color_wrap {
    max-width:90%;
    height: 2rem;
    margin: 0 auto;
    gap: 2%;
    display: flex;justify-content: space-between;align-items: center;
}
.capture_wrap .color_wrap .color {
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    filter: brightness(1.1);
    border-radius: .5rem;
}

/* 배경색 효과 */
.capture_wrap .color_wrap .color:nth-of-type(1){background-color: #11a1f4;}
.capture_wrap .color_wrap .color:nth-of-type(2){background-color: #d6aeae;}
.capture_wrap .color_wrap .color:nth-of-type(3){background-color: #662121;}
.capture_wrap .color_wrap .color:nth-of-type(4){background-color: #fc7575;}
.capture_wrap .color_wrap .color:nth-of-type(5){background-color: #78caa4;}
.capture_wrap .color_wrap .color:nth-of-type(6){background-color: #c1a081;}
.capture_wrap.color1 {background-color: #11a1f4;}
.capture_wrap.color2 {background-color: #d6aeae;}
.capture_wrap.color3 {background-color: #662121;}
.capture_wrap.color4 {background-color: #fc7575;}
.capture_wrap.color5 {background-color: #78caa4;}
.capture_wrap.color6 {background-color: #c1a081;}


/* 로그인 모달 */
.login_modal { z-index: 9999; display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0000004a; }
.login_modal.on { display: block;}
.login_modal #message { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 80%; padding: 2rem 0 2.5rem; border-radius: 1.5rem; background: #922023;}
.login_modal #message > img:nth-child(1) { width:100%; max-width: 33rem;}
.login_modal #message > img { width: 85%;}
.login_modal #message a { position: absolute;bottom: 2.5rem; left: 50%; transform: translateX(-50%);}
.login_modal #message a img { width: 10rem;}

/* 반응형 */
@media only screen and (max-width: 350px) {
    .calendar form {
        width:100%;
        padding: 0 1rem;
    }
}
@media only screen and (max-width: 535px) {
    .bearImg {width: 100%;height: 40vh;}
    #app {width: 80%;}
    .goMyTree {width: 80%;}
    
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        width: 80%;
        margin: 0 auto;
    }
    .chooseInner{
        width: 80%;
        margin: 0 auto;
    }
    .out {
        display: block;
        text-align: right;
        width: 55%;
        font-family: kbiz;
        font-size: 1.2rem;
    }
}
@media only screen and (min-width: 1025px) {
    body {
        width: 50%;
        margin: 0 auto;
        background-size: auto;
    }
    .chooseInner{
        width: 50%;
        margin: 0 auto;
    }
    .gobackBtn1 {
        width: 5rem;
        position: absolute;
        top: 1.5rem;
        left: 25%;
    }
    .out {
        display: block;
        text-align: right;
        width: 55%;
        font-family: kbiz;
        font-size: 1.2rem;
    }
}