@charset "utf-8";

/******************************** design ***********************************/
.contents { position: relative; width: 100%; height: 100%; }

/* main {
  background: url(../images/ani/626_2_직육면체.png) no-repeat top left / contain;
} */

/* 로딩 */
.loading {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* background: url(../../../include/images/loading.png) no-repeat center/80px; */
    display: none;
}
.loading::before {
    content: '';
    width: 100%; height: 100px;
    position: absolute;
    top: -100px; left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.loading.on {
	display: block;
}
.loading > canvas {
    width: 80px;
    height: 80px;
    position: absolute;
    top: calc(50% - 50px); left: 50%;
    transform: translate(-50%, -50%);
}

/* 인트로 */
.intro_bg {
    width: 1036px; height: 520px;
    background: url(../images/ani/bg.png) no-repeat top left/contain;
    position: absolute;
    top: 5px; left: 119px;
    /* top: 50%; left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* outline: 1px solid red; */
    animation: fadeIn 2s linear 1;
}
.intro_text {
    width: 100%;
    position: absolute;
    top: 50%; left: 0;
    transform: translate(0, -50%);
    font-family: "GmarketB";
    color: #00468f;
}


.nextBtn {
    display: block;
    opacity: 0;
    animation: fadeIn 1s linear 3s 1 both;
}
.nextBtn::after {
    content: '시작하기';
}

.deco1 {
    width: 247px; height: 172px;
    background: url(../images/ani/Rectangle_01.png) no-repeat top left/contain;
    position: absolute;
    top: 117px; left: 23px;
    opacity: 0;
    animation: fadeIn 1s linear 2s 1 both;
}
.deco2 {
    width: 155px; height: 84px;
    background: url(../images/ani/Rectangle_02.png) no-repeat top left/contain;
    position: absolute;
    bottom: 104px; right: 173px;
    opacity: 0;
    animation: fadeIn 1s linear 2s 1 both;
}


@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* 애니 */
.aniBox {
    /* background: url(../media/ani/616_2/rec_00.png) no-repeat center/ contain; */
    width: 100%;
    height: 530px;
}
.aniBox > canvas {
    display: none;
    width: 100%;
    height: 100%;
}
.aniBox > canvas.on {
    display: block;
}

/* .sliderContainer[data-sld-idx='2'] .sliderContent[data-sld-cont='1'] .aniBox{
    background: url(../media/ani/616_2/rec_01_1.png) no-repeat center/ contain;
}
.sliderContainer[data-sld-idx='2'] .sliderContent[data-sld-cont='2'] .aniBox{
    background: url(../media/ani/616_2/rec_01_2.png) no-repeat center/ contain;
}

.sliderContainer[data-sld-idx='3'] .sliderContent[data-sld-cont='1'] .aniBox{
    background: url(../media/ani/616_2/rec_02_1.png) no-repeat center/ contain;
}
.sliderContainer[data-sld-idx='3'] .sliderContent[data-sld-cont='2'] .aniBox{
    background: url(../media/ani/616_2/rec_02_2.png) no-repeat center/ contain;
}
.sliderContainer[data-sld-idx='3'] .sliderContent[data-sld-cont='3'] .aniBox{
    background: url(../media/ani/616_2/rec_02_3.png) no-repeat center/ contain;
}

.sliderContainer[data-sld-idx='4'] .sliderContent[data-sld-cont='1'] .aniBox{
    background: url(../media/ani/616_2/rec_03_1.png) no-repeat center/ contain;
}
.sliderContainer[data-sld-idx='4'] .sliderContent[data-sld-cont='2'] .aniBox{
    background: url(../media/ani/616_2/rec_03_2.png) no-repeat center/ contain;
} */


/* 방법 버튼 */

.contentBtn {
    position: absolute;
    top: 80px;
    left: 0;
    width: 90px;
    height: 60px;
    border-radius: 0 50px 50px 0;
    background: #007e6b;
    box-shadow: 0 1px 3px rgba(29, 66, 144, 0.4);
}
.contentBtn::before{
    content: '방법 1';
    width: 100%;
    /* height: 42px; */
    position: absolute;
    top: 50%;
    left: 0;
    font-family: "GmarketM";
    font-size: 24px;
    color: #fff;
    transform: translateY(-50%);
    padding-right: 6px;
}
.contentBtn:nth-of-type(2)::before {content: '방법 2';}
.contentBtn:nth-of-type(3)::before {content: '방법 3';}

.contentBtn:nth-of-type(2) {top: 148px;}
.contentBtn:nth-of-type(3) {top: 216px;}

/* .contentBtn {opacity: 0.5;} */
.contentBtn.inactive.hide {display: none;}
.contentBtn.inactive {
    opacity: 0.5;
    pointer-events: none;
}
.contentBtn.on{width: 110px;}
.contentBtn.nonSelect{background: #4b867d;}
.contentBtn.nonSelect::before {color: rgba(255, 255, 255, 0.6);}

/* .contentBtn {opacity: 0.5} */
.PC .sliderContent[data-sld-cont='1'] .contentBtn.hover {background: #055c4f;}

.sliderContent[data-sld-cont='1'] .contentBtn {opacity: 1;}

/* 하단 메뉴 */
.bottomBox {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100px;
    background: #edf5ff;
}
.bottomBox > button {display: none;}
.bottomBox.show > button.arrownextBtn,
.bottomBox.isLast > button:not(.arrownextBtn) {display: block;}
.bottomBox .textBox {
    display: none;
    position: relative;
    font-family: 'GmarketM';
    color: #0687cd;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
}
.bottomBox .textBox.on {display: block;}

.bottomBox .backBtn,
.bottomBox .replayBtn {
    filter: saturate(1.4);
}

.bottomBox .backBtn::before,
.bottomBox .replayBtn::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: calc(100% - 1px);
    background: #ecffe8;
    opacity: 0.3;
    border-radius: 15px;
}

.openPopBtn.qr {left: 1160px;}