body{
    margin: 0 auto;
    background-color: #010f17;
    font-family: 'Noto Sans KR', sans-serif;
    
}

.wrap{
    overflow: hidden;
    position: relative;
}



/* //////////////////header 끝////////////////// */
.header{
    position: absolute;
    left:0;
    top:950px;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999999;
}

.h_ul{
    text-align: center;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.h_li{
    display: inline-block;
    color: #fff;
    padding: 0 30px ;
    line-height: 80px;
}

.h_li a{
    text-decoration: none;
    color: inherit;
    display: block;
    width:100%;
}

.h_ul_in{
    height: 0;
    position: absolute;
    left:56%;
    top:90px;
    line-height: 40px;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #d4d4d4;
    color: #010f17;
    border-radius: 10px;
    padding:  0 20px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.5s;
}


.h_li:nth-child(4):hover .h_ul_in{
    height:150px;
    padding-top:15px;
}
/* //////////////////header 시작////////////////// */



.sec{overflow: hidden;}
/* //////////////////#sec1 시작////////////////// */
#sec1{
    width:100%;
    height:100vh; /*969px*/
    position: relative;
    padding-bottom: 140px;
}

.container_w{
    width: 100%;
    max-width:1244px;
    margin: 0 auto;
    height:100%;
    /* background-color:rgba(0, 0, 0, 0.5); */
    position: relative;
}


/* s자 시작 */
.s_pull{
    width: 100%;
    max-width:1920px;
    height:568px;
    background: url(../img/sec1/s_bg/s_pull.png) no-repeat center;
    position: absolute;
    left:50%;
    top:330px;
    transform: translateX(-50%);
}

.s_bot{
    width:100%;
    height:383px;
    background: url(../img/sec1/s_bg/s_bot.png) no-repeat center;
    position: absolute;
    left:0;
    bottom: 0;
}
/* s자 끝 */


/* b_phone  */
.b_phone{
    width:356px;
    height: 969;
    position: absolute;
    left:50%;
    top:-1200px;/*190*/
    transform: translateX(-50%);
    animation: b_phone 1s forwards;
    z-index: 2;
}

@keyframes b_phone{
    0% { top:-1200px;}
    100% { top:-190px;}
} 

.b_phone_img{
    position: absolute;
    left:0;
    top:0;
}

.b_phone_in{
    width:303px;
    height:512px;
    position: absolute;
    left:26px;
    top:382px;
    z-index: 9;
    background-color: #f00;
    border-radius: 5px;

    animation: b_phone_bg 5s infinite;
}

@keyframes b_phone_bg{
    0%{background-color: #a375b0;}
    33%{background-color: #3e94cb;}
    66%{background-color: #31c1af;}
    100%{background-color: #a375b0;}
}

.time,
.time2{
    font-size: 60px;
    font-family: 'NanumSquare', sans-serif !important;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-top: 40px;
}

.dd,
.dd2{
    text-align: center;
    font-size: 15px;
    color: #fff;
    margin-top: 5px;
}

.scroll_top{
    position: absolute;
    left:50%;
    top:57%;
    transform: translate(-50%,-50%);
}

.scroll{
    position: absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);

    animation: scroll 2s infinite;
}
@keyframes scroll{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

.scroll0{
    top:0;
    animation-delay: 0s;
}

.scroll1{
    top:20px;
    animation-delay: 0.3s;
}

.scroll2{
    top:40px;
    animation-delay: 0.6s;
}

/* b_phone  */


/* video_phone 시작 */
.video_phone{
    width:178px;
    height:252px;
    position: absolute;
    bottom: 8.2%;
    left:10px;
}

.video_phone_bg{
    position: absolute;
    left:0;
    top:0;
}

.video_phone_hand{
    position: absolute;
    left:78px;
    top:143px;
    z-index: 99;

    animation:  video_phone_hand 2s infinite;
    transition: all 0.5s;
}

@keyframes video_phone_hand{
    0%{
         transform-origin: bottom;
         transform: rotate(0);
     }
    25%{
        transform-origin: bottom;
        transform: rotate(0);
    }
    50%{
        transform-origin: bottom;
        transform: rotate(-30deg);
    }
    75%{
        transform-origin: bottom;
        transform: rotate(30deg);
    }
    100%{
        transform-origin: bottom;
        transform: rotate(0);
     }
}

.video_phone_icon0{
    position: absolute;
    left:-65px;
    top:10px;
    z-index: 99;
    animation: video_phone_icon0 1.5s forwards infinite;
    transition: all 0.5s;
}
@keyframes video_phone_icon0{
    0%{
         transform: translateX(0);
     }
    15%{
        transform: translateX(-20px);
     }
    50%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(0);
    }
}

.video_phone_icon1{
    position: absolute;
    left:-50px;
    top:-45px;
    z-index: 99;
    animation: video_phone_icon1 1.5s forwards 0.1s infinite;
    transition: all 0.5s;
}

@keyframes video_phone_icon1{
    0%{
         transform: translateX(0);
     }
    15%{
        transform: translate(-20px,-20px);
     }
    50%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(0);
    }
}

.video_phone_icon2{
    position: absolute;
    left:7px;
    top:-65px;
    z-index: 99;
    animation: video_phone_icon12 1.5s forwards 0.2s infinite;
    transition: all 0.5s;
}

@keyframes video_phone_icon12{
    0%{
         transform: translateX(0);
     }
    15%{
        transform: translate(-10px,-20px);
     }
    50%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(0);
    }
}

/* video_phone 끝 */



/* child 시작 */
.child{
    width:69px;
    height:113px;
    position: absolute;
    left:-30px;
    bottom:6.5%;
}

.child1{
    position: absolute;
    right: 0;
    top:22px;
    animation: child1 1.5s forwards 0.2s infinite;
    transition: all 0.5s;
}
@keyframes child1{
    0%{
         transform-origin: bottom;
         transform: rotate(0);
     }
    25%{
        transform-origin: bottom;
        transform: rotate(0);
    }
    50%{
        transform-origin: bottom;
        transform: rotate(-15deg);
    }
    75%{
        transform-origin: bottom;
        transform: rotate(15deg);
    }
    100%{
        transform-origin: bottom;
        transform: rotate(0);
     }
}
/* child 끝 */




/* icon_box 시작 */
.icon_box{
    width: 146px;
    height: 171px;
    position: absolute;
    left:307px;
    top:80px;
}
.icon_box1,
.icon_box2{
    position: absolute;
    right:0px;
    top:0px;
}

.icon_box2{
    z-index: 10;
}

.icon0{
    position: absolute;
    left:6px;
    top:5px;
    transform: rotate(-15deg);
    animation: icon_box0 0.8s forwards infinite;
    animation-delay: 0s;
}
.icon1{
    position: absolute;
    left:35px;
    top:20px;
    transform: rotate(0deg);
    animation: icon_box1 0.8s forwards infinite;
    z-index: 8;
    animation-delay: 0.1s;
}

.icon2{
    position: absolute;
    left:60px;
    top:10px;
    transform: rotate(15deg);
    animation: icon_box23 0.8s forwards infinite;
    z-index: 9;
    animation-delay: 0.2s;
}
.icon3{
    position: absolute;
    left:45px;
    top:-15px;
    transform: rotate(15deg);
    animation: icon_box23 0.8s forwards infinite;
    animation-delay: 0.3s;
}
@keyframes icon_box0{
    0% {transform: rotate(-15deg) translateY(0);}
    50% {transform: rotate(-15deg) translateY(0);}
    80% {transform: rotate(-15deg) translateY(-4px);}
    100% {transform: rotate(-15deg) translateY(0);}
}

@keyframes icon_box1{
    0% {transform: rotate(0deg) translateY(0);}
    50% {transform: rotate(0deg) translateY(0);}
    80% {transform: rotate(0deg) translateY(-4px);}
    100% {transform: rotate(0deg) translateY(0);}
}

@keyframes icon_box23{
    0% {transform: rotate(15deg) translateY(0);}
    50% {transform: rotate(15deg) translateY(0);}
    80% {transform: rotate(15deg) translateY(-4px);}
    100% {transform: rotate(15deg) translateY(0);}
}

/* icon_box 시작 */




/* ladder 시작 */
.ladder_p{
    position: absolute;
    left:220px;
    bottom: 13%;
    transform: rotate(5deg);
}
/* ladder 끝 */




/* boy_phone 시작 */
.boy_phone{
    width:149px;
    height:252px;
    position: absolute;
    right:19%;
    top:50.5%;
    transform: translate(-50%,-50%);
    /* margin-left: 235px;
    margin-top: -65px; */
}

.boy_head{
    position: absolute;
    top:53px;
    left:13px;
    animation: boy_head 1.5s forwards infinite;
}
@keyframes boy_head{
    0%{
         transform: rotate(0deg);
         transform-origin: bottom;
    }
    30%{
         transform: rotate(-20deg);
         transform-origin: bottom;
    }
    60%{
        transform: rotate(0deg);
        transform-origin: bottom;
   }
    100%{
        transform: rotate(0);
        transform-origin: bottom;
    }
}

.boy_body{
    position: absolute;
    left:0;
    bottom:0;
}

.boy_box{
    position: absolute;
    right:0;
    top:0; 
}

.box_m{
    position: absolute;
    right:19px;
    top:18px;
}

.box{
    width: 5px;
    height: 5px;
    background-color: #ea68a2;
    float: left;
    margin-left: 9px;

    animation: box_m 2s forwards infinite;
}
.box1{
    animation-delay: 0s;
}
.box2{
    animation-delay: 0.2s;
}
.box3{
    animation-delay: 0.4s;
}
.box4{
    animation-delay: 0.6s;
}
.box5{
    animation-delay: 0.8s;
}
@keyframes box_m{
    0%{opacity: 0;}
    30%{opacity: 1;}
    75%{opacity: 1;}
    100%{opacity: 0;}
}

/* boy_phone 끝 */



/* bulb 시작 */
.bulb{
    width:179px;
    height:189px;
    position: absolute;
    left:115px;
    top:330px;
}

.bulb_person{
    position: absolute;
    left:0;
    bottom:0;
}

.bulb_p,
.bulb_light{
    position: absolute;
    right:-30px;
    top:-26px; 
}

.bulb_light{
    animation: bulb_light 1.5s forwards infinite;
    transition: all 0.5s;
}
@keyframes bulb_light{
    0%{opacity: 1;}
    50%{opacity: 1;}
    65%{opacity: 0;}
    70%{opacity: 1;}
    75%{opacity: 0;}
    80%{opacity: 1;}
    85%{opacity: 0;}
    100%{opacity: 1;}
}
/* bulb 끝 */



/* wheel 시작 */
.wheel{
    width:173px;
    height:171px;
    position: absolute;
    right:10px;
    top:200px;
}

.b_wheel{
    position: absolute;
    right:0;
    bottom:0;
    animation:  b_wheel 4s infinite linear;
    transition: all 0.5s;
    z-index: 99;
}
@keyframes b_wheel{
    0%{ transform: rotate(0); }
    100%{ transform: rotate(360deg); }
}

.s_wheel{
    position: absolute;
    left:0;
    top:0;
    animation:  s_wheel 4s infinite linear;
    transition: all 0.5s;
}
@keyframes s_wheel{
    0%{ transform: rotate(0); }
    100%{ transform: rotate(-360deg); }
}
/* wheel 끝 */



/* balloon 시작 */
.balloon{
    width:219px;
    height: 254px;

    position: absolute;
    right:-100px;
    top:30px;
}


.balloon0{
    position: absolute;
    left:0;
    top:22px;
    z-index: 10;
    animation-delay: 0s;
    animation: balloon0 3s forwards infinite linear;
}
@keyframes balloon0{
    0%{transform: translateY(0);}
    25%{transform: translateY(-10px);}
    50%{transform: translateY(0);}
    75%{transform: translateY(10px);}
    100%{transform: translateY(0);}
}

@keyframes balloon1{
    0%{transform: translateY(0);}
    25%{transform: translateY(10px);}
    50%{transform: translateY(0);}
    75%{transform: translateY(-10px);}
    100%{transform: translateY(0);}
}

@keyframes balloon2{
    0%{transform: translateY(0);}
    40%{transform: translateY(13px);}
    60%{transform: translateY(0);}
    75%{transform: translateY(-13px);}
    100%{transform: translateY(0);}
}

@keyframes balloon3{
    0%{transform: translateY(0);}
    70%{transform: translateY(18px);}
    80%{transform: translateY(0);}
    90%{transform: translateY(-18px);}
    100%{transform: translateY(0);}
}

@keyframes balloon4{
    0%{transform: translateY(0);}
    25%{transform: translateY(-10px);}
    50%{transform: translateY(0);}
    75%{transform: translateY(10px);}
    100%{transform: translateY(0);}
}

.balloon1{
    position: absolute;
    left:51px;
    top:47px;
    z-index: 9;
    animation-delay: 0.5s;
    animation: balloon1 3s forwards infinite linear;
}

.balloon2{
    position: absolute;
    left:60px;
    top:0;
    animation-delay: 0.6s;
    animation: balloon2 3s forwards infinite linear;
}

.balloon3{
    position: absolute;
    left:85px;
    top:37px;
    z-index: 10;
    animation-delay: 0.7s;
    animation: balloon3 3s forwards infinite linear;
}

.balloon4{
    position: absolute;
    right :0px;
    top:57px;
    z-index: 11;
    animation-delay: 0.8;
    animation: balloon4 2s forwards infinite linear;
}
/* balloon 끝 */


/* talk 시작 */
.talk{
    width:213px;
    height:239px;
    position: absolute;
    right: -130px;
    bottom: -6.5%;
    z-index: 99;
}

.talk_phone{
    position: absolute;
    left:0;
    top:0;
}

.talk_girl{
    position: absolute;
    right:0;
    bottom:0;
}

.talk_contents {
    animation: talk_contents 2s forwards infinite;
    opacity: 0;
}

.talk_contents0{
    position: absolute;
    left:15px;
    top:45px;
    z-index: 99;
    animation-delay: 0;
}

.talk_contents1{
    position: absolute;
    left:42px;
    top:80px;
    z-index: 99;
    animation-delay: 0.2s;
}

.talk_contents2{
    position: absolute;
    left:15px;
    top:115px;
    z-index: 99;
    animation-delay: 0.4s;
}

.talk_contents3{
    position: absolute;
    left:42px;
    top:150px;
    z-index: 99;
    animation-delay: 0.6s;
}


@keyframes talk_contents{
    0%{ opacity: 0;}
    10%{ opacity: 1;}
    60%{ opacity: 1;}
    100%{ opacity: 0;}
}

.talk_heart{
    position: absolute;
    left:43px;
    top:-140px;/*55*/
    animation:talk_heart 0.6s forwards infinite;
    opacity: 0;
}

.talk_heart1{
    animation-delay: 0s;
}

.talk_heart2{
    animation-delay: 0.2s;
}

.talk_heart3{
    animation-delay: 0.4s;
}

.talk_heart4{
    animation-delay: 0.6s;
}
@keyframes talk_heart{
    0% {top:-140px; opacity: 1;}
    100% {top:-55px; opacity: 0;}
    /* 00% {top:-150px; opacity: 1;} */
}

/* talk 끝 */



/* deco 시작 */
.deco0{
    position: absolute;
    left:-30px;
    top:-10px;
}

.deco1{
    position: absolute;
    right:-40px;
    bottom:-30px;
}
/* deco 끝 */



/* deco2 시작 */
.deco2_0{
    position: absolute;
    left:170px;
    top:270px;
}

.deco2_1{
    position: absolute;
    right:120px;
    bottom:440px;
}
/* deco2 끝 */
/* //////////////////#sec1 끝////////////////// */




/* //////////////////#sec2 시작////////////////// */
#sec2{
    width:100%;
    height:900px;
    background-color: #f5ece8;
    position: relative;
}


.sec2_bg{
    width: calc(100% / 2);
    float: left;
    height: 100%;
}

.sec2_p{
    /* width:296px;
    height:616px; */
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index: 99;
}

.mid_bg_box{
    width:303px;
    height:512px;
    position: absolute;
    left:56px;
    top:373px;
    z-index: 9;
    background-color: #6e8299;
    border-radius: 5px;
}

.hand{
    position: absolute;
    left:50%;
    bottom:0;
    transform: translateX(-50%);
    z-index: 99;
}

.sec2_deco01{
    position: absolute;
    right: 20px;
    top:180px;
    animation: sec2_deco01 2s infinite linear;
}

.sec2_deco02{
    position: absolute;
    left: 20px;
    top:220px;
    animation: sec2_deco02 2s infinite linear;
}

.sec2_deco03{
    position: absolute;
    right: 30px;
    bottom:80px;
}

@keyframes sec2_deco01{
    0%{transform: translateY(-10px);}
    50%{transform: translateY(10px);}
    100%{transform: translateY(-10px);}
}

@keyframes sec2_deco02{
    0%{transform: translateY(10px);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(10px);}
}

.scroll_w{
    position: absolute;
    left:30px;
    bottom:100px;
}

.scroll_ball{
    position: absolute;
    left:37px;
    bottom:105px;
}

.scroll_ball_ani{
    animation: scroll_ball 2s forwards linear;
}

.scroll_gd{
    position: absolute;
    right:30px;
    bottom:160px;
}

@keyframes scroll_ball{
    0%{transform: translateX(0) translateY(0);}
    5%{transform: translateX(-10px) translateY(-30px);}
    10%{transform: translateX(-15px) translateY(-60px);}
    15%{transform: translateX(-10px) translateY(-90px);}
    20%{transform: translateX(0px) translateY(-120px);}
    25%{transform: translateX(50px) translateY(-140px);}
    30%{transform: translateX(100px) translateY(-160px);}
    35%{transform: translateX(170px) translateY(-120px);}
    50%{transform: translateX(170px) translateY(0);}
    60%{transform: translateX(150px) translateY(-15px);}
    70%{transform: translateX(130px) translateY(10px) rotate(1080deg);}
    80%{transform: translateX(110px) translateY(-15px) ;}
    90%{transform: translateX(70px) translateY(0) rotate(0); }
}

/* .hi{
    position: absolute;
    left:50px;
    top:-30px;
    opacity: 0;
    transition: all 0.5s;
}

.nice{
    position: absolute;
    left:90px;
    top:130px;
    opacity: 0;
    transition: all 0.5s;
}

.dog0{
    position: absolute;
    right:0px;
    bottom:40px;
    z-index: 5;
}

.dog1{
    position: absolute;
    left:155px;
    bottom:188px;

    animation: dog1 1.5s forwards infinite linear;
}
@keyframes dog1 {
    0%{transform: rotate(0); }
    50%{transform: rotate(0); }
    80%{transform: rotate(10deg); }
    100%{transform: rotate(0); }
} */

.title{
    font-size: 40px;
    color: #222;
    font-weight: 900;
    font-family: 'NanumSquare', sans-serif !important;
    margin-bottom: 25px;
}

.proflie{
    background-color: #f5ece8;
}

.pro{
    width:500px;
    position: absolute;
    right:-500px;
    top:46%;
    transform: translateY(-50%);
    opacity: 0;
}

.pro > .title{
    color: #222;
}

.p_txt{
    width: 100%;
    float: left;
    font-size: 15px;
    margin-top: 15px;
}

.p_txt > div{
    float: left;
}

.p_txt01{
    padding: 5px 15px 7px 15px;
    box-sizing: border-box;
    color: #fff;
    background-color: #222;
    margin-right: 15px;
}

.p_txt02{
    color: #222;
    line-height: 30px;
}

.cloude0{
    position: absolute;
    left:40%;
    top:50px;
    transform: translateX(-50%);
    opacity: 0;
}

.cloude1{
    position: absolute;
    right:28%;
    bottom:160px;
    transform: translateX(-50%);
    opacity: 0;
 
}

.about{
    background-color: #506071;
}

.ab{
    width:500px;
    position: absolute;
    left:-500px;
    top:48%;
    transform: translateY(-50%);
    opacity: 0;
    text-align: right;
}

.ab > .title{
    color: #fff;
}

.a_txt{
    line-height: 33px;
    color: #fff;
}
.title2{margin-top: 55px;}
/* //////////////////#sec2 끝////////////////// */




/* //////////////////#sec3 시작////////////////// */
#sec3{
    padding: 200px 0;
    box-sizing: border-box;
}

.table{
    width: 1375px;
    height: 653px;
    margin: 0 auto;
    position: relative;
}

.table_bg{
    position: absolute;
    left:0;
    top:0;
}

.percent_left{
    position: absolute;
    left:-75px;
    top:-90px;
    text-align: right;
    color: #fff;
    font-size: 18px;
    opacity: 0.4;
    line-height: 285px;
}

.percent{
    position: absolute;
    left:50%;
    bottom: -85px;
    transform: translateX(-50%);
    font-size: 24px;
}

.percent01{color: #ec845a;}
.percent02{color: #43b9f8;}
.percent03{color: #7ac2eb;}
.percent04{color: #eeaf4b;}
.percent05{color: #a850f4;}
.percent08{color: #ed8e0f;}
.percent06{color: #31a8ff;}
.percent07{color: #ed8e0f;}

.column_logo{
    position: absolute;
    left:0;
    top:0;
    z-index: 100;

    font-size: 40px;
    font-family: 'TmonMonsori';
}

.column_logo01{left:-35px; top:-25px; color:#ec845a;}
.column_logo02{left:-17px; top:-25px; color:#43b9f8;}
.column_logo03{left:-5px; top:-25px; color:#7ac2eb;}
.column_logo04{left:-50px; top:-25px; color:#eeaf4b;}
.column_logo05{left:-25px; top:-25px; color:#a850f4;}
.column_logo08{left:-40px; top:-30px; color:#da9d4e;}
.column_logo06{ top:-20px; color:#31a8ff;}
.column_logo07{ top:-20px; color:#f79500;}

.column01{
    width:40px;
    height:0px;
    position: absolute;
    left:140px;
    bottom:30px;
}

.column01_top{
    width:100%;
    height:30px;
    background-color: #843819;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column01_bot{
    width:100%;
    height:0px;
    background-color: #ec6630;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column02{
    width:40px;
    height:0px;
    position: absolute;
    left:290px;
    bottom:30px;
}

.column02_top{
    width:100%;
    height:30px;
    background-color: #0e5981;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column02_bot{
    width:100%;
    height:0px;
    background-color: #0096e6;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column03{
    width:40px;
    height:0px;
    position: absolute;
    left:440px;
    bottom:30px;
}

.column03_top{
    width:100%;
    height:30px;
    background-color: #084168;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column03_bot{
    width:100%;
    height:0px;
    background-color: #0769ad;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column04{
    width:40px;
    height:0px;
    position: absolute;
    left:590px;
    bottom:30px;
}

.column04_top{
    width:100%;
    height:30px;
    background-color: #9a6e27;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column04_bot{
    width:100%;
    height:0px;
    background-color: #eeaf4b;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column05{
    width:40px;
    height:0px;
    position: absolute;
    left:740px;
    bottom:30px;
}

.column05_top{
    width:100%;
    height:30px;
    background-color: #471573;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column05_bot{
    width:100%;
    height:0px;
    background-color: #9530ec;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column08{
    width:40px;
    height:0px;
    position: absolute;
    left:890px;
    bottom:30px;
}

.column08_top{
    width:100%;
    height:30px;
    background-color: #b66b0a;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column08_bot{
    width:100%;
    height:0px;
    background-color: #ed8e0f;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column06{
    width:40px;
    height:0px;
    position: absolute;
    left:1040px;
    bottom:30px;
}

.column06_top{
    width:100%;
    height:30px;
    background-color: #081e2e;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column06_bot{
    width:100%;
    height:0px;
    background-color: #113b59;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}

.column07{
    width:40px;
    height:0px;
    position: absolute;
    left:1190px;
    bottom:30px;
}

.column07_top{
    width:100%;
    height:30px;
    background-color: #310000;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
}

.column07_bot{
    width:100%;
    height:0px;
    background-color: #5c2a15;
    position: absolute;
    left:0;
    bottom: 0;
    border-radius: 0 0 18px 18px;
}
/* //////////////////#sec3 끝////////////////// */


/* sec4,5,6공통 */
@font-face {
    font-family: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.container_w4{
    width: 100%;
    max-width:1500px;
    margin: 0 auto;
    height:100%;
    position: relative;
}

.ability{
    margin-top: 30px;
    overflow: hidden;
}

.ability_box{
    width:64px;
    height:64px;
    border: 1px solid #fff;
    box-sizing: border-box;
    float: left;
    margin-right: 10px;
    text-align: center;
    line-height: 65px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.5s;
}

.contents,
.contribution{
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    margin-top: 40px;
}

.contribution{
    margin-top: 80px;
}

.contribution_in,
.contents_in{
    font-size: 13px;
    color: #fff;
    line-height: 27px;
    opacity: 1;
    margin-top: 13px;
}

.btn{
    width:200px;
    height:60px ;
    border-radius: 30px;
    float: left;
    text-align: center;
    line-height: 60px;
    font-size: 17px;
    font-weight: 600;
    margin-top: 50px;
    margin-right: 15px;
    cursor: pointer;
}

.btn a{
    text-decoration: none;
    color: inherit;
    display: block;
    width:100%;
    height:100%
}

.num{
    font-size: 70px;
    font-family: 'TmonMonsori';
}

.name{
    font-size: 45px;
    font-family: 'TmonMonsori';
}



/* //////////////////#sec6 시작////////////////// */
#sec6{
    width:100%;
    height:950px;
    background-color: #231916;
}

.sec6_left{
    overflow: hidden;
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}

.sec6_left > .num{
    color: #fff;

}

.sec6_left > .name{
    color: #83736e;
}

.sec6_left .ability_box:hover {
    background-color: #fff;
    color:#231916 ;
}

.sec6_left > .pc{
    background-color: #ffa800;
    color: #fff;
}

.sec6_left > .mo{
    background-color: #e8e8e8;
    color: #39393a;
}

.sec6_left .ability_box:nth-child(6){
    font-size: 14px;
}

.samjin_dev{
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    z-index: 99;
}

.samjin_deco0{
    position: absolute;
    right:-120px;
    bottom:150px;
    z-index: 100;
}

.samjin_deco1{
    position: absolute;
    left:46%;
    top:230px;
    z-index: 100;
    transform: rotate(-65deg);
}

.samjin_deco2{
    position: absolute;
    left:40%;
    top:170px;
    z-index: 100;
    transform: rotate(20deg);
}

.samjin_deco3{
    position: absolute;
    right:-80px;
    top:300px;
    z-index: 100;
    transform: rotate(10deg);
}
/* //////////////////#sec6 끝////////////////// */




/* //////////////////#sec5 시작////////////////// */
#sec5{
    width:100%;
    height:950px;
    background-color: #d4d4d4;
}

.sec5_left{
    overflow: hidden;
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}

.sec5_left .num{
    color: #222;
}

.sec5_left .name{
    color: #f15a21;
}

.sec5_left .ability_box:hover {
    background-color: rgb(102, 102, 102);
    color:#fff ;
}

.sec5_left > .pc{
    background-color: #f15a21;
    color: #fff;
}

.sec5_left > .mo{
    background-color: #e8e8e8;
    color: #39393a;
}

.sec5_left .ability_box:last-child{
    font-size: 14px;
}

.nike_dev{
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);
    z-index: 99;
}

.nike_deco{
    position: absolute;
    left:42%;
    bottom:120px;
    z-index: 100;
}

.nike_deco2{
    position: absolute;
    right:-220px;
    top:63px;
    z-index: 100;
    transform: rotate(30deg);
    opacity: 0.1;
}

.sec5_left .ability_box{
    border: 1px solid rgb(102, 102, 102);
    color: rgb(102, 102, 102);
}

.sec5_left > .contents,
.sec5_left > .contribution{
    color: #222;
}

.sec5_left > .contents_in,
.sec5_left .contribution_in_txt{
    color: rgb(102, 102, 102);
    opacity: 1;
}
/* //////////////////#sec5 끝////////////////// */




/* //////////////////#sec4 시작////////////////// */
#sec4{
    width:100%;
    height:950px;
    background-color: #13536f;
}

.sec4_left{
    overflow: hidden;
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}

.sec4_left > .num{
    color: #fff;
}

.sec4_left > .name{
    color: #95d3ee;
}

.sec4_left .ability_box:hover {
    background-color: #fff;
    color:#13536f ;
}

.sec4_left > .pc{
    background-color: #27a8de;
    color: #fff;
}

.sec4_left > .mo{
    background-color: #e8e8e8;
    color: #39393a;
}

.sec4_left .ability_box:last-child{
    font-size: 14px;
}

.sam_dev{
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    z-index: 99;
}

.sam_deco0{
    position: absolute;
    left:38%;
    top:380px;
    transform: translateX(-50%);
}

.sam_deco1{
    position: absolute;
    left:47%;
    top:90px
}

.sam_deco2{
    position: absolute;
    right:-150px;
    top:60px;
}

.sam_deco3{
    position: absolute;
    left:40%;
    top:550px;
    z-index: 100;
}

.sam_deco4{
    position: absolute;
    right:-90px;
    top:490px;
    z-index: 100;
}
/* //////////////////#sec4 끝////////////////// */




/* //////////////////#sec7 시작////////////////// */
#sec7{
    width:100%;
    height: 900px;
    padding-top: 200px;
    box-sizing: border-box;
    background: url(../img/sec7/con_bg.png) no-repeat center;
}

.contact{
    width:1100px;
    height: 600px;
    margin: 0 auto;
}

.con{
    width:calc(100% / 3);
    float: left;
    text-align: center;

    transform: translateY(120px);
    opacity: 0;
}

.con_ac{
    transform: translateY(0);
    opacity: 1;
    transition: all 0.5s;
}

.con_img{
    width:100%;
    height:230px;
}

.con:nth-child(2) .con_img{
    padding-top: 30px;
    box-sizing: border-box;
}

.con_txt{
    color: #fff;
    font-size: 20px;
    margin-top: 10px;
}

.con_txt2{
    color: #fff;
    font-size: 16px;
    margin-top: 5px;
}

/* //////////////////#sec7 끝////////////////// */