#container.puzzle-container{ padding-bottom:0; overflow:hidden; }

.puzzle-container .img-area{ margin:0 auto; text-align:center; }
.puzzle-container img{ max-width:100%; }
.puzzle-container .color-type1{ color:#4CD742; }
.puzzle-container .color-type2{ color:#FF6030; }
.puzzle-container .content-layout{ max-width:1120px; }

.puzzle-container .btn-landing, .puzzle-container .btn-landing:hover{ width:380px; max-width:calc( 100% - 20px ); height:88px; line-height:86px; background-color:#000 !important; border-color:#000 !important; border-radius:44px; font-size:28px; font-weight:900; }
.puzzle-container .btn-type{ height:88px; margin:32px auto 26px; display:flex; position:relative; background-color:#000; font-size:48px; font-weight:900; color:#fff; justify-content:center; align-items:center; }
.puzzle-container .btn-type:after{ content:''; width:200px; height:142px; margin-top:-5px; position:absolute; top:50%; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%; }
.puzzle-container .btn-type1{ margin-right:200px; }
.puzzle-container .btn-type1:after{ right:0; background-image:url(/images/landing/page/2022/05/puzzle/ico_type1.svg); transform:translate(100%, -50%); }
.puzzle-container .btn-type2{ margin-left:200px; }
.puzzle-container .btn-type2:after{ left:0; background-image:url(/images/landing/page/2022/05/puzzle/ico_type2.svg); transform:translate(-100%, -50%); }

.puzzle-container .tit-type{ height:88px; margin:32px auto 100px; display:flex; position:relative; background-color:#000; font-size:48px; font-weight:900; color:#fff; justify-content:center; align-items:center; }
.puzzle-container .tit-type:after{ content:''; width:400px; height:142px; margin-top:-5px; position:absolute; top:50%; background:url(/images/landing/page/2022/05/puzzle/ico_type3.svg) 50% 50% no-repeat; background-size:100% 100%; }
.puzzle-container .tit-type1{ margin-right:400px; }
.puzzle-container .tit-type1:after{ right:0; transform:translate(100%, -50%); }
.puzzle-container .tit-type2{ margin-left:400px; }
.puzzle-container .tit-type2:after{ left:0; transform:translate(-100%, -50%); }

.puzzle-container .txt-landing{ line-height:150%; font-size:24px; font-weight:700; color:#FFF; word-break:keep-all; text-align:center; }

/* header */
.landing-header{ padding-bottom:384px; background:#2D2CB5 url(/images/landing/page/2022/05/puzzle/header_bg.png) 50% 100% no-repeat; }
.landing-header .txt-landing{ margin:28px auto; }

/* start */
.landing-start{ padding:170px 0 208px; background:linear-gradient(180deg, #2D2CB5 25%, #5655FF 53.65%, #2D2CB5 72.92%); }
.landing-start .flex-area{ margin:0; align-items:center; }
.landing-start .flex-area > li{ margin:0; flex:1; }
.landing-start .flex-area > li .img-area{ margin-top:60px; }

/* form */
.landing-form{ padding:60px 0 70px; display:none; background:linear-gradient(180deg, #2D2CB5 25%, #5655FF 53.65%, #2D2CB5 72.92%); }
.landing-form .table-puzzle{ width:552px; flex:none; }
.landing-form .table-puzzle table{ width:100%; }
.landing-form .table-puzzle table tr td{ width:92px; height:92px; position:relative; background-color:#fff; border:2px solid transparent; border-radius:10px; font-size:32px; font-weight:900; text-align:center; vertical-align:middle; overflow:hidden; }
.landing-form .table-puzzle table tr td.input-puzzle input[type="text"]{ width:100%; height:100%; padding:0 30px; font-size:32px; font-weight:900; }
.landing-form .table-puzzle table tr td .num{ position:absolute; top:3px; left:5px; font-size:16px; font-weight:700; }
.landing-form .table-puzzle table tr .none{ background-color:transparent; border-color:transparent; }
.landing-form .list-quiz{ margin-left:60px; }
.landing-form .list-quiz dt{ margin:50px auto 12px; font-size:36px; font-weight:900; }
.landing-form .list-quiz dt:first-child{ margin-top:0; }
.landing-form .list-quiz dd{ margin-bottom:28px; padding-left:20px; position:relative; font-size:20px; color:#fff; }
.landing-form .list-quiz dd .num{ position:absolute; top:-2px; left:4px; font-size:16px; font-weight:700; }
.landing-form .btn-area{ margin-top:80px; text-align:center; }
.landing-form .btn-area .txt-link{ margin-top:10px; display:inline-block; font-size:14px; color:#fff; text-decoration:none; }

/* result */
.landing-result{ padding:60px 0 70px; display:none; background:linear-gradient(180deg, #2D2CB5 25%, #5655FF 53.65%, #2D2CB5 72.92%); }
/* .landing-result .tit-type{ margin-bottom:40px; display:none; } */
.landing-result .txt-landing1{ margin-top:13px; font-size:36px; opacity:0; }
.landing-result .result-layout{ width:1040px; max-width:100%; margin:50px auto 0; position:relative; }
.landing-result .result-layout:before, .landing-result .result-layout:after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%; opacity:0; }
.landing-result .result-layout:before{ background-image:url(/images/landing/page/2022/05/puzzle/winner_type1.png); }
.landing-result .result-layout:after{ background-image:url(/images/landing/page/2022/05/puzzle/winner_type2.png); }
.landing-result .result-layout .ani{ position:absolute; left:50%; bottom:8px; opacity:0; }
.landing-result .result-layout .ani1{ margin-left:-530px; }
.landing-result .result-layout .ani2{ margin-left:365px; }
.landing-result .result-layout.winner-type1 .ani1{ margin-left:-303px; }
.landing-result .result-layout.winner-type2 .ani2{ margin-left:165px; }
.landing-result .result-layout.winner-type3 .ani1{ margin-left:-416px; }
.landing-result .result-layout.winner-type3 .ani2{ margin-left:265px; }
.landing-result .btn-area{ margin-top:40px; text-align:center; }
.landing-result .btn-area .txt-landing{ margin-bottom:10px; font-size:20px; }

.landing-result.ani-action .txt-landing1{ animation:tit 1s 1.5s ease-in forwards; }
.landing-result.ani-action .winner-type1:before{ animation:winner 1s .2s ease-in-out forwards; }
.landing-result.ani-action .winner-type1:after{ animation:loser 1s .2s ease-in-out forwards; }
.landing-result.ani-action .winner-type1 .ani1{ animation:ani1 .5s 1s ease-out forwards; }
.landing-result.ani-action .winner-type1 .ani2{ animation:ani1 .5s 1s ease-in forwards; }

.landing-result.ani-action .winner-type2:before{ animation:loser 1s .2s ease-in-out forwards; }
.landing-result.ani-action .winner-type2:after{ animation:winner 1s .2s ease-in-out forwards; }
.landing-result.ani-action .winner-type2 .ani1{ animation:ani2 .5s 1s ease-in forwards; }
.landing-result.ani-action .winner-type2 .ani2{ animation:ani2 .5s 1s ease-out forwards; }

.landing-result.ani-action .winner-type3:before{ animation:loser 1s .2s ease-in-out forwards; }
.landing-result.ani-action .winner-type3:after{ animation:winner2 1s .2s ease-in-out forwards; }
.landing-result.ani-action .winner-type3 .ani1{ animation:ani1 .5s 1s ease-in forwards; }
.landing-result.ani-action .winner-type3 .ani2{ animation:ani2 .5s 1s ease-out forwards; }

@keyframes winner{
    0%, 20%, 40%, 60%, 80%, 100%{ opacity:1; }
    10%, 30%, 50%, 70%, 90%{ opacity:0; }
}
@keyframes winner2{
    0%, 20%, 40%, 60%, 80%, 99%{ opacity:1; }
    10%, 30%, 50%, 70%, 90%{ opacity:0; }
}
@keyframes loser{
    0%, 20%, 40%, 60%, 80%, 100%{ opacity:0; }
    10%, 30%, 50%, 70%, 90%{ opacity:1; }
}
@keyframes ani1{
    0%{ transform:translateX(-100%); opacity:0; }
    100%{ transform:translateX(0); opacity:1; }
}
@keyframes ani2{
    0%{ transform:translateX(100%); opacity:0; }
    100%{ transform:translateX(0); opacity:1; }
}
@keyframes tit{
    0%{ transform:scaleX(1); opacity:1; }
    10%, 20%{ transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg); opacity:1; }
    30%, 50%, 70%, 90%{ transform:scale3d(1.2, 1.2, 1.2) rotate(3deg); opacity:1; }
    40%, 60%, 80%{ transform:scale3d(1.2, 1.2, 1.2) rotate(-3deg); opacity:1; }
    100%{ transform:scaleX(1); opacity:1; }
}


/* fixed */
.landing-fixed{ background-color:#2D2CB5; z-index:99; }
.landing-fixed > .content-layout{ max-width:1100px !important; margin:0 auto; padding:0; }
.landing-fixed > .content-layout > a{ height:80px; display:flex; background-color:#000; border-radius:10px; box-shadow:0 4px 4px rgba(0, 0, 0, .25); justify-content:center; align-items:center; }
.landing-fixed .txt-landing{ font-size:30px; }

/* .landing-fixed.scroll-to-fixed-fixed{ background-color:transparent; } */


/* modal-join */
.modal-join{  }
.modal-join .ico-globe{ width:50px; height:38px; margin-right:2px; background-image:url(/images/landing/page/2022/05/puzzle/ico_globe.svg); }
.modal-join .btn-landing, .modal-join .btn-landing:hover{ width:100%; height:60px; line-height:58px; background-color:#000 !important; border-color:#000 !important; border-radius:40px; font-size:20px; font-weight:900; }

.modal-join .info-area{ display:flex; }
.modal-join .info-area > div{ flex:1; }
.modal-join .info-area > div:first-child{ margin-right:32px; padding-right:32px; border-right:1px solid #D9D9D9; }
.modal-join .info-area > div .tit{ line-height:135%; font-size:28px; font-weight:700; word-break:keep-all; }
.modal-join .info-area > div .txt{ line-height:135%; margin:16px auto 32px; font-size:28px; word-break:keep-all; }


/** Tablets **/
@media (max-width:1024px) and (orientation:portrait), (max-width:1336px) and (orientation:landscape){
    .puzzle-container .btn-type{ margin:32px -20px 26px;  }
    .puzzle-container .btn-type1{ margin-right:200px; }
    .puzzle-container .btn-type2{ margin-left:200px; }

    .puzzle-container .tit-type{ margin:32px -20px 100px; }
    .puzzle-container .tit-type1{ margin-right:380px; }
    .puzzle-container .tit-type2{ margin-left:380px; }

    /* start */
    .landing-start{ padding:50px 0 70px; }
    .landing-start .btn-type{ margin-bottom:50px; }
    .landing-start .flex-area{ flex-direction:column; }
    .landing-start .flex-area li{ width:100%; }
    .landing-start .flex-area li:first-child{ margin-bottom:50px; }

    /* form */
    .landing-form .flex-area{ margin:0; flex-direction:column; }
    .landing-form .table-puzzle{ margin:0 auto; }
    .landing-form .list-quiz{ margin-top:30px; margin-left:0; }

    /* result */
    .landing-result .result-layout .ani{ width:100px; left:auto; }
    .landing-result .result-layout.winner-type1 .ani1{ margin-left:0; left:60px; }
    .landing-result .result-layout.winner-type1 .ani2{ margin-left:0; right:20px; }
    .landing-result .result-layout.winner-type2 .ani1{ margin-left:0; left:20px; }
    .landing-result .result-layout.winner-type2 .ani2{ margin-left:0; right:60px; }
    .landing-result .result-layout.winner-type3 .ani1{ margin-left:0; left:30px; }
    .landing-result .result-layout.winner-type3 .ani2{ margin-left:0; right:30px; }

    /* fixed */
    .landing-fixed{ left:20px; right:20px; bottom:10px; }

    /* modal-join */
    .modal-join .ico-globe{ width:46px; height:34px; }
    .modal-join .btn-landing, .modal-join .btn-landing:hover{ width:100%; height:48px; line-height:46px; border-radius:24px; font-size:14px; }

    .modal-join .info-area > div .tit{ font-size:20px; }
    .modal-join .info-area > div .txt{ margin:8px auto 16px; font-size:18px; }
}
/** mobiles **/
@media (max-width:540px) and (orientation:portrait), (max-width:959px) and (orientation:landscape){
    .puzzle-container .btn-landing, .puzzle-container .btn-landing:hover{ height:56px; line-height:54px; font-size:16px; }

    .puzzle-container .btn-type{ height:50px; margin:18px -20px 57px; font-size:24px; }
    .puzzle-container .btn-type:after{ width:114px; height:80px; margin-top:-5px; }
    .puzzle-container .btn-type1{ margin-right:114px; }
    .puzzle-container .btn-type2{ margin-left:114px; }

    .puzzle-container .tit-type{ height:50px; margin:18px -20px 57px; font-size:24px; }
    .puzzle-container .tit-type:after{ width:114px; height:80px; margin-top:-5px; }
    .puzzle-container .tit-type1{ margin-right:114px; }
    .puzzle-container .tit-type1:after{ background-image:url(/images/landing/page/2022/05/puzzle/ico_type1.svg); }
    .puzzle-container .tit-type2{ margin-left:114px; }
    .puzzle-container .tit-type2:after{ background-image:url(/images/landing/page/2022/05/puzzle/ico_type2.svg); }

    .puzzle-container .txt-landing{ font-size:16px; }

    /* header */
    .landing-header{ padding-bottom:320px; background-image:url(/images/landing/page/2022/05/puzzle/m_header_bg.png); background-size:100% auto; }

    /* form */
    .landing-form{ padding-top:50px }
    .landing-form .table-puzzle{ width:312px; }
    .landing-form .table-puzzle table tr td{ width:52px; height:52px; font-size:24px; }
    .landing-form .table-puzzle table tr td.input-puzzle input[type="text"]{ padding:0 14px; font-size:24px; }
    .landing-form .table-puzzle table tr td .num{ top:2px; left:4px; font-size:10px; }
    .landing-form .list-quiz dt{ margin:32px auto 8px; font-size:20px; }
    .landing-form .list-quiz dt:first-child{ margin-top:0; }
    .landing-form .list-quiz dd{ margin-bottom:18px; font-size:14px; }
    .landing-form .btn-area{ margin-top:30px; }

    /* result */
    .landing-result .tit-type + .img-area{ width:128px; margin:0 auto; }
    .landing-result .txt-landing1{ font-size:24px; }
    .landing-result .result-layout:before{ background-image:url(/images/landing/page/2022/05/puzzle/m_winner_type1.png); }
    .landing-result .result-layout:after{ background-image:url(/images/landing/page/2022/05/puzzle/m_winner_type2.png); }
    .landing-result .result-layout .ani{ width:62px; left:auto; bottom:0; }
    .landing-result .result-layout.winner-type1 .ani1{ margin-left:0; left:38px; }
    .landing-result .result-layout.winner-type1 .ani2{ margin-left:0; right:10px; }
    .landing-result .result-layout.winner-type2 .ani1{ margin-left:0; left:10px; }
    .landing-result .result-layout.winner-type2 .ani2{ margin-left:0; right:38px; }
    .landing-result .result-layout.winner-type3 .ani1{ margin-left:0; left:24px; }
    .landing-result .result-layout.winner-type3 .ani2{ margin-left:0; right:24px; }
    .landing-result .btn-area .txt-landing{ font-size:14px; }

    /* fixed */
    .landing-fixed > .content-layout > a{ height:52px; }
    .landing-fixed .txt-landing{ font-size:16px; }

    /* modal join */
    .modal-join .info-area{ flex-direction:column; }
    .modal-join .info-area > div:first-child{ margin-right:0; margin-bottom:20px; padding-right:0; padding-bottom:20px; border-right:none; border-bottom:1px solid #D9D9D9; }

}
/** mobiles xs **/
@media (max-width:320px) and (orientation:portrait){
    .puzzle-container .content-layout{ padding:0 16px; }

    /* form */
    .landing-form .table-puzzle{ width:288px; }
    .landing-form .table-puzzle table tr td{ width:48px; height:48px; font-size:20px; }
    .landing-form .table-puzzle table tr td.input-puzzle input[type="text"]{ font-size:20px; }
}