@charset "utf-8";


.sub_container{ clear:both; }

/* common */

.sub_about h2, .sub_howto h2, .sub_story h2, .sub_team h2{ font-size:60px; font-weight:600;
               text-align:center; color:#fff; padding-top:200px;
               text-shadow: 2px 2px 6px #565656; }
.sub_about_arrow, .sub_howto_arrow, .sub_story_arrow, .sub_team_arrow{ width:20px; padding-top:580px; margin:0 auto; }
.sub_about_arrow span, .sub_howto_arrow span, .sub_story_arrow span, .sub_team_arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.sub_about_arrow span:nth-child(2), .sub_howto_arrow span:nth-child(2), .sub_story_arrow span:nth-child(2), .sub_team_arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.sub_about_arrow span:nth-child(3), .sub_howto_arrow span:nth-child(3), .sub_story_arrow span:nth-child(3), .sub_team_arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}




/* about */


/* about_common */
.sub_about, .sub_about2, .sub_about3, .sub_about4, .sub_about5{ width:100%; height:1130px; }
.sub_about2_wrap, .sub_about3_wrap, .sub_about4_wrap, .sub_about5_wrap{ width:1200px; height:1130px; margin:0 auto;}
.sub_about h3, .sub_about2 h3, .sub_about3 h3, .sub_about4 h3, .sub_about5 h3{ font-size:50px; font-weight:600; color:#fff; margin-bottom:30px; }
.sub_about p, .sub_about2 p, .sub_about3 p, .sub_about4 p, .sub_about5 p{ font-size:30px; font-weight:500; color:#fff; margin-bottom:30px; }



.sub_about{ background:url(../images/about1.png) no-repeat center; }


.sub_about2{ background:url(../images/about2.png) no-repeat center; }
.sub_about2_wrap h3{ padding-top:150px; }

.sub_about3{ background:url(../images/about3.png) no-repeat center; }
.sub_about3_wrap h3{ padding-top:430px; }

.sub_about4{ background:url(../images/about4.png) no-repeat center; }
.sub_about4_wrap h3{ padding-top:550px; }

.sub_about5{ height:1300px; background:url(../images/about5.png) no-repeat center top; background-color:#000; }
.sub_about5_wrap h3{ padding-top:570px; float:right; }
.sub_about5_wrap p{ clear:both; float:right; text-align:right; }




/* how to */



/* how to_common */

.sub_howto, .sub_howto2{ width:100%; height:1130px; }
.sub_howto2 h3{ color:#fff; font-weight:600; font-size:40px; padding:300px 0 0 400px; }
.sub_howto2 li p{ color:#fff; font-weight:500; font-size:20px; padding:30px 0 0 400px; }



.sub_howto{ background:url(../images/howto1.png) no-repeat center; }


.sub_howto2{ width:100%; overflow:hidden; }
.sub_howto2 ul{ width:400%; }
.sub_howto2 li{ width:25%; height:1130px; float:left; }

.g1{ background:url(../images/howto2.png) no-repeat center; }
.g2{ background:url(../images/howto3.png) no-repeat center; }
.g3{ background:url(../images/howto4.png) no-repeat center; }
.g4{ background:url(../images/howto5.png) no-repeat center; }


.slide_arrow{ position:absolute; top:1550px; width:100%; }
.slide_arrow button:nth-child(1){ float:left; }
.slide_arrow button:nth-child(2){ float:right; }
.slide_arrow button:hover{ opacity:0.5; }


.slide_btn{ width:143px; height:25px; position:absolute; position: absolute; left:50%; margin: 700px 0 0 -75px; }





/* story */



/* story_common */


.sub_story, .sub_story2{ width:100%; height:1107px; }

.sub_story{ background:url(../images/story1.png) no-repeat center; }

.sub_story2{ width:100%; }


.s1 h3, .s2 h3, .s3 h3, .s4 h3{ color:#fff; font-weight:600; font-size:40px; text-align:center; padding-top:700px; }

.s1 p, .s2 p, .s3 p, .s4 p{ color:#fff; font-weight:500; font-size:20px; text-align:center; padding-top:20px; }



.s1, .s2, .s3, .s4{ width:100%; height:1107px; position:absolute; }


.s1{ z-index:4; background:url(../images/story2.jpg) no-repeat center; }
.s2{ z-index:3; background:url(../images/story3.jpg) no-repeat center; }
.s3{ z-index:2; background:url(../images/story4.jpg) no-repeat center; }
.s4{ z-index:1; background:url(../images/story5.jpg) no-repeat center; }


.sub_story2_button{ position:absolute; top:2030px; left:50%; width:60%; z-index:5; margin-left:-480px; }
.sub_story2_button li{ float:left; cursor:pointer; }
.sub_story2_button button{ color:#7a7f84; font-size:20px; font-weight:500; }


.sub_story2_button li p{ margin:0 auto 10px auto; text-align:center; }


.sub_story2_button li:nth-child(2){ margin:0 17%; }
.sub_story2_button li:nth-child(4){ margin-left:17%; }


.sub_story2_button li button:nth-child(1){ color:#fff; }





/* team */




/* team_common */


.sub_team, .sub_team2{ width:100%; }


.sub_team{ height:1130px; background:url(../images/team1.png) no-repeat center; }
.sub_team2{ height:1107px; background:url(../images/team2.png) no-repeat center; }
.sub_team2 ul{ width:1200px; margin:0 auto; padding-top:180px; }
.sub_team2 li{ float:left; width:25%; text-align:center; }

.sub_team2 li:nth-child(5), .sub_team2 li:nth-child(6), .sub_team2 li:nth-child(7){ margin-top:5%; }
.sub_team2 li:nth-child(5){ margin-left:12%; }


/* 22.02.03 */
.sub_team2 li button{ width:100%; color:#fff; font-size:16px; }
.sub_team2 li button:nth-child(2){ font-size:30px; font-weight:600; margin:20px 0; }


/* 22.02.03 추가 */

.team_popup1, .team_popup2, .team_popup3, .team_popup4,
.team_popup5, .team_popup6, .team_popup7{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:2; }

.team_popup1_wrap, .team_popup2_wrap, .team_popup3_wrap, .team_popup4_wrap,
.team_popup5_wrap, .team_popup6_wrap, .team_popup7_wrap{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:50%; background:rgba(255,255,255,0.9); color:#2d2d2d; }


.team_popup1_wrap button, .team_popup2_wrap button, .team_popup3_wrap button, .team_popup4_wrap button,
.team_popup5_wrap button, .team_popup6_wrap button, .team_popup7_wrap button{ float:right; font-size:16px; font-weight:600; color:#2d2d2d; padding:10px; }

.team_popup1_wrap ul, .team_popup2_wrap ul, .team_popup3_wrap ul, .team_popup4_wrap ul,
.team_popup5_wrap ul, .team_popup6_wrap ul, .team_popup7_wrap ul{ padding:50px 0 50px 50px; }

.team_popup1_wrap li:nth-child(1), .team_popup2_wrap li:nth-child(1), .team_popup3_wrap li:nth-child(1), .team_popup4_wrap li:nth-child(1),
.team_popup5_wrap li:nth-child(1), .team_popup6_wrap li:nth-child(1), .team_popup7_wrap li:nth-child(1),
.team_popup1_wrap li:nth-child(2), .team_popup2_wrap li:nth-child(2), .team_popup3_wrap li:nth-child(2), .team_popup4_wrap li:nth-child(2),
.team_popup5_wrap li:nth-child(2), .team_popup6_wrap li:nth-child(2), .team_popup7_wrap li:nth-child(2){ float:left; font-weight:600; font-size:25px; padding-bottom:20px; }


.team_popup1_wrap li:nth-child(2)::before, .team_popup2_wrap li:nth-child(2)::before, .team_popup3_wrap li:nth-child(2)::before, .team_popup4_wrap li:nth-child(2)::before,
.team_popup5_wrap li:nth-child(2)::before, .team_popup6_wrap li:nth-child(2)::before, .team_popup7_wrap li:nth-child(2)::before{ content:"|"; float:left; color:#2d2d2d; margin:0 15px; }


.team_popup1_wrap li:nth-child(3), .team_popup2_wrap li:nth-child(3), .team_popup3_wrap li:nth-child(3), .team_popup4_wrap li:nth-child(3),
.team_popup5_wrap li:nth-child(3), .team_popup6_wrap li:nth-child(3), .team_popup7_wrap li:nth-child(3){ clear:both; line-height:30px; }