@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');


.sub-back{
    position:fixed;
    width:100%;
    height:100vh;
    top:0;
    right:0;
    background:rgba(0,0,0,0.5);
    display:none;
}

header {
    position:fixed;
    top:0;
    right:0
    ;z-index:999;
}

.menu::before {
    content:"2025 min ji";
    display:block;
    transform: translateX(-110px)
    ;width:400%;
    color:rgb(155, 155, 155);
    font-size:14px;
    line-height:20px;
}
.menu {
    position:fixed;
    top:30px;
    right:30px;
    width:30px;
    height:50px;
    position: relative;
    cursor: pointer;
    z-index:999;
}
.menu span {
    display:block;
    background:#333;
    height:2px;
    width:100%;
    position: absolute;
    top:0;
    transition:0.5s;
}
.menu.on span {
    background:#333;
}
.menu span:nth-child(2){
    top:10px;
    transition:0.5s;
}
.menu span:nth-child(3) {
    top:20px
}
.menu span:nth-child(4) {
    top:30px
}

.menu.on span:nth-child(1) {
    transform: translateX(-1px) rotate(60deg);
    width:80%;
    top:4px;
}
.menu.on span:nth-child(2) {
    top:10px;
    transform:rotate(90deg) translateY(10px);
    width:100%;
}
.menu.on span:nth-child(3) {
    transform: translateX(10px) rotate(-60deg);
    width:80%;
    top:4px;
}
.menu.on span:nth-child(4) {
    top:10px;
    transform:rotate(90deg) translateY(-13px);
    width:100%;
}

.sub {
    position: fixed;
    top:0;
    right:-10%;
    width:10%;
    height:100vh;
    background:#fff;
    color:#333;
    transition:0.5s;
    z-index:2;
    border-left:1px solid #333;
}
.sub.on {
    right:0;
}

.sub ul {
    padding-top:200px;
    text-align: center;
}
.sub ul li {
    font-size:16px;
    padding-bottom:30px
    ;position: relative;
}
.sub ul li::after {
    content:"";
    display:block;
    width:100px;
    bottom:30%;
    left:25%;
    position: absolute;
    height:10px;
    background:#fff200;
    opacity:0;
}

.sub ul li:hover:after {
    opacity:1;
    transition:0.5s;
}

.sub ul li:nth-child(2):after {
    background:#000;
} 
.sub ul li:nth-child(3):after {
    background:#435798;
} 
.sub ul li:nth-child(4):after {
    background:#0067d4;
} 
.sub ul li:nth-child(5):after {
    background:#585858;;
} 
.sub ul li:nth-child(6):after {
    background:#6B8E23;
} 





.sub .contact {
    transform: translateY(100px);
    width:90%;
    margin:0 auto;
    border:1px solid #ddd;
    padding:50px 10px;
    display: none;
}

.sub .contact dl {
    padding:10px 0;
}
.sub .contact dt {
    font-weight:700;
    font-size:18px;
    padding-bottom:10px;
}
.sub .contact dt i {
    padding-right:5px;
}
.sub .contact dd {
    font-size:14px;
}

.sub .contact.on {
    display:block;
}



.section.s01:before {
    content:"M";
    display:block;
    width:100px;
    height:100px;
    font-size:550px;
    font-weight:900;
    color:#0e6b5d;
    position:absolute;
    top:15%;
    left:40%;
    z-index:-1;
    transition:1s;
    text-shadow:20px 20px 0px #ce9178;
}
.section.s01:hover:before {
    animation: hello 2s infinite;
}


@keyframes hello {
    0% {content:"M";top:15%;left:750px;}
    50% {content:"m";top:10%;left:740px;}
    100% {content:"M";top:15%;left:750px;}
}

.section {
    background-image:url(../img/pt01.png)
}

.section:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1300px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
} 


.s01:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1000px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}
.s02:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1100px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}
.s03:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1200px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}
.s04:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1400px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}
.s05:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1100px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}
.s06:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1300px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}
.s07:after {
    content:"N";
    display:block;
    width:100px;
    height:100px;
    font-size:1400px;
    font-weight:900;
    color:rgba(0,0,0,0.1);
    position:fixed;
    top:-5%;
    left:-300px;
    transform:rotate(-10deg);
    z-index:-1;
    transition:1s;
}

.s01.on:after {
    transform: rotate(-15deg);
    color:#ff4241;
}
.s02.on:after {
    transform: rotate(-15deg);
    color:#fff200;
}
.s03.on:after {
    transform: rotate(-15deg);
    color:#435798;
}
.s04.on:after {
    transform: rotate(-15deg);
    color:#fd0000;
}
.s05.on:after {
    transform: rotate(-15deg);
    color:#0067d4;;
}
.s06.on:after {
    transform: rotate(-15deg);
    color:#585858;
}
.s07.on:after {
    transform: rotate(-15deg);
    color:#6B8E23;
}






.s01 .box {
    position: relative;
    width:1400px;
    margin:0 auto;
}
.s01 .left{
    float:left;
    width:600px;
    transform: translateX(50px);
}
.s01 .left h3 {
    font-size:50px;
    font-weight:700;
    padding:20px 0;
    padding-top:380px;
}
.s01 .left p {
    font-size:14px;
    font-weight:300;
    line-height:1.5;
}
.s01 .right{
    float:left;
    width:800px;
    height:100vh;
    position: relative;
}
.s01 .right:after {
    content:"J";
    display:block;
    width:100px;
    height:100px;
    font-size:550px;
    font-weight:900;
    color:#3f9cd6;
    position:absolute;
    top:20%;
    right:-30%;
    transform:rotate(90deg);
    z-index:-1;
    transition:1s;
    text-shadow:20px 20px 0 #fff200;
}

.s01 .right:hover:after {
    animation: hi 2s;
}
.mm {
    display:none;
}
.cc {
    display:none;
}

@keyframes hi {
    
    0% {color:#fdd457; 
        text-shadow: 20px 20px 0 #3f9cd6;
    }
    50% {color:#3f9cd6; 
        text-shadow: 20px 20px 0 #fdd457;
    }
    100% {color:#fdd457; 
        text-shadow: 20px 20px 0 #3f9cd6;
    }
}

.s01 .right::before {
    content:"CODING IS FUN";
    display:block;
    width:100px;
    height:100px;
    font-size:70px;
    font-weight:900;
    color:#3f9cd6;
    position:absolute;
    top:60%;
    right:15%;
    transform:rotate(90deg);
    z-index:-1;
    transition:1s;
    text-shadow:20px 20px 0 #fff200;
} 

.s01:hover .right::before {animation:1s fun infinite;transform: rotate(0deg);}

@keyframes fun {
    
    0% {content:"CODING IS FUN";}
    50% {content:"CODING ALWAYS FUN";}
    100% {content:"CODING IS FUN";}

}





.s02 .box {position: relative;width:1400px;margin:0 auto;}
.s02 .left{float:left;width:500px;transform: translateX(50px);}
.s02 .left h3 {font-size:40px;font-weight:700;padding:20px 0;padding-top:100px;}
.s02 .left p {font-size:14px;font-weight:300;line-height:1.5;}
.s02 .left a {display:block;width:100px;height:100px;background:#fff200;border-radius:50%;line-height:100px;text-align: center;color:#fff;position: absolute;top:50%;right:-35%;opacity:0;transition:0.5s 0.5s;}
.s02 .left a:hover {transition:0.5s;border-radius:30px;}
.s02 .left .sub01 {top:70%;right:-45%;width:50px;height:50px;line-height:50px;background:#ddd;font-size:14px;}
.s02 .left .sub02 {top:89%;right:-35%;width:50px;height:50px;line-height:50px;background:#ddd;font-size:14px;}

.s02.on .left a {opacity:1;}

.s02 .left strong {color:#fff200;font-weight:500;}

.s02 .right{float:right;width:700px;height:380px;position: relative;transform: translateX(100px);}
.s02 .right figure {background:url(../img/pt02.png) no-repeat top center/cover;height:380px;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}


.s02 .right figure:hover {background-position:center;transition:5s;}
.s03 .right figure:hover {background-position:center;transition:5s;}
.s04 .right figure:hover {background-position:center;transition:5s;}
.s05 .right figure:hover {background-position:center;transition:5s;}
.s06 .right figure:hover {background-position:center;transition:5s;}


.s03 .box {position: relative;width:1400px;margin:0 auto;}
.s03 .left{float:left;width:500px;transform: translateX(50px);}
.s03 .left h3 {font-size:40px;font-weight:700;padding:20px 0;padding-top:100px;}
.s03 .left p {font-size:14px;font-weight:300;line-height:1.5;}
.s03 .left a {display:block;width:100px;height:100px;background:#435798;border-radius:50%;line-height:100px;text-align: center;color:#fff;position: absolute;top:55%;right:-35%;opacity:0;transition:0.5s 0.5s;}
.s03 .left .sub01 {top:80%;right:-45%;width:50px;height:50px;line-height:50px;background:#ddd;font-size:14px;}
.s03 .left a:hover {transition:0.5s;border-radius:30px;}

.s03.on .left a {opacity:1;}
.s03 .left strong {color:rgb(68, 124, 207);font-weight:500;}
.s03 .right{float:right;width:700px;height:380px;position: relative;transform: translateX(100px);}
.s03 .right figure {background:url(../img/pt04.png) no-repeat top center/cover;height:380px;box-shadow:5px 5px 20px #ddd;border-radius:20px;}



.s04 .box {position: relative;width:1400px;margin:0 auto;}
.s04 .left{float:left;width:500px;transform: translateX(50px);}
.s04 .left h3 {font-size:40px;font-weight:700;padding:20px 0;padding-top:100px;}
.s04 .left p {font-size:14px;font-weight:300;line-height:1.5;color: #000;}
.s04 .left a {display:block;width:100px;height:100px;background:#fd0000;border-radius:50%;line-height:100px;text-align: center;color:#fff;position: absolute;top:50%;right:-35%;opacity:0;transition:0.5s 0.5s;}
.s04 .left a:hover {transition:0.5s;border-radius:30px;}

.s04 .left strong {color:#530000;font-weight:500;}

.s04.on .left a {opacity:1;}
.s04 .right{float:right;width:700px;height:340px;position: relative;transform: translateX(100px);}
.s04 .right figure {background:url(../img/pt03.png) no-repeat top center/cover;height:340px;box-shadow:5px 5px 20px #ddd;border-radius:20px;}


.s05 .box {position: relative;width:1400px;margin:0 auto;}
.s05 .left{float:left;width:500px;transform: translateX(50px);}
.s05 .left h3 {font-size:40px;font-weight:700;padding:20px 0;padding-top:100px;}
.s05 .left p {font-size:14px;font-weight:300;line-height:1.5;}
.s05 .left a {display:block;width:100px;height:100px;background:#0067d4;;border-radius:50%;line-height:100px;text-align: center;color:#fff;position: absolute;top:50%;right:-35%;opacity:0;transition:0.5s 0.5s;}
.s05 .left a:hover {transition:0.5s;border-radius:30px;}
.s05 .left strong {color:#042446;;font-weight:500;}


.s05.on .left a {opacity:1;}
.s05 .right{float:right;width:700px;height:380px;position: relative;transform: translateX(100px);}
.s05 .right figure {background:url(/img/pt05.png) no-repeat top center/cover;height:380px;box-shadow:5px 5px 20px #ddd;border-radius:20px;}



.s06 .box {position: relative;width:1400px;margin:0 auto;}
.s06 .left{float:left;width:500px;transform: translateX(50px);}
.s06 .left h3 {color: #000; font-size:40px;font-weight:700;padding:20px 0;padding-top:100px;}
.s06 .left p {font-size:14px;font-weight:300;line-height:1.5;}
.s06 .left a {display:block;width:100px;height:100px;background:#585858;border-radius:50%;line-height:100px;text-align: center;color:#333;position: absolute;top:50%;right:-35%;opacity:0;transition:0.5s 0.5s;}
.s06 .left a:hover {transition:0.5s;border-radius:30px;}
.s06 .left strong {color:rgb(0, 0, 0);font-weight:500;}
.s06.on .left a {opacity:1;}
.s06 .right{float:right;width:700px;height:380px;position:relative;transform: translateX(100px)}


.s06 .right figure {background:url(img/pt06.png) no-repeat top center/cover;height:380px;box-shadow:5px 5px 20px #0e0d0d;border-radius:20px;}



.s07 .box {position: relative;width:1400px;margin:0 auto;}
.s07 .left{float:left;width:500px;transform: translateX(50px);}
.s07 .left h3 {color: #000; font-size:40px;font-weight:700;padding:20px 0;padding-top:100px;}
.s07 .left p {font-size:14px;font-weight:300;line-height:1.5;color: #000;}
.s07 .left a {display:block;width:100px;height:100px;background:#6B8E23;border-radius:50%;line-height:100px;text-align: center;color:#333;position: absolute;top:50%;right:-35%;opacity:0;transition:0.5s 0.5s;}
.s07 .left a:hover {transition:0.5s;border-radius:30px;}
.s07 .left strong {color:rgb(0, 0, 0);font-weight:500;}
.s07.on .left a {opacity:1;}
.s07 .right{float:right;width:700px;height:380px;position:relative;transform: translateX(100px)}


.s07.on .left a {opacity:1;}
.s07 .right{float:right;width:700px;height:380px;position: relative;transform: translateX(100px);}
.s07 .right figure {background:url(img/pt07.png) no-repeat top center/cover;height:380px;box-shadow:5px 5px 20px #0e0d0d;border-radius:20px;}


footer {position: fixed;bottom:30px;left:30px;color:#fff;}




@media (max-width:768px) {

    

    .sub-back {position:fixed;width:100%;height:100vh;;top:0;right:-100%;background:rgba(0,0,0,0.5);display:block;z-index:1;}
    .sub-back.on {right:0;}

    header {position:fixed;top:0;right:0;z-index:999;}

    .menu::before {content:"2025 min ji";display:block;transform: translateX(-110px);width:400%;color:rgb(155, 155, 155);font-size:14px;line-height:20px;}
    .menu {position:fixed;top:30px;right:30px;width:30px;height:50px;position: relative;cursor: pointer;z-index:999;}
    .menu span {display:block;background:#333;height:2px;width:100%;position: absolute;top:0;transition:0.5s;}
    .menu.on span {background:#333;}
    .menu span:nth-child(2) {top:10px;transition:0.5s;}
    .menu span:nth-child(3) {top:20px}

    /* .menu.on span:nth-child(1) {transform: translateX(2px) rotate(-41deg);width:80%;top:4px;}
    .menu.on span:nth-child(2) {top:10px;transform:rotate(90deg) translateY(10px);width:100%;}
    .menu.on span:nth-child(3) {transform:translateX(7px) rotate(51deg);width:70%;top:16px;} */
    

    .menu.on span:nth-child(1) {
        transform: translateX(-1px) rotate(60deg);
        width:80%;
        top:4px;
    }
    .menu.on span:nth-child(2) {
        top:10px;
        transform:rotate(90deg) translateY(10px);
        width:100%;
    }
    .menu.on span:nth-child(3) {
        transform: translateX(10px) rotate(-60deg);
        width:80%;
        top:4px;
    }
    .menu.on span:nth-child(4) {
        top:10px;
        transform:rotate(90deg) translateY(-13px);
        width:100%;
    }

    .sub {position: fixed;top:0;right:-60%;width:60%;height:100vh;background:#fff;color:#333;transition:0.5s;z-index:2;border-left:1px solid #333;}
    .sub.on {right:0;}

    .sub ul {padding-top:100px;text-align: center;}
    .sub ul li {font-size:16px;padding-bottom:30px;position: relative;}
    .sub ul li::after {content:"";display:block;width:50%;bottom:30%;left:25%;position: absolute;height:10px;background:#fff200;opacity:0;}

    .sub ul li:hover:after {opacity:1;transition:0.5s;}

    .sub ul li:nth-child(2):after {
        background:#000;
    } 
    .sub ul li:nth-child(3):after {
        background:#435798;
    } 
    .sub ul li:nth-child(4):after {
        background:#0067d4;
    } 
    .sub ul li:nth-child(5):after {
        background:#585858;;
    } 
    .sub ul li:nth-child(6):after {
        background:#6B8E23;
    } 




    .sub ul li:nth-child(6) {transform: translateY(20px);}
    .sub ul li:nth-child(7) {transform: translateY(20px);}



    
    .sub .contact {transform: translateY(20px);width:90%;margin:0 auto;border:1px solid #ddd;padding:30px 10px;display: none;}

    .sub .contact dl {padding:10px 0;}
    .sub .contact dt {font-weight:700;font-size:18px;padding-bottom:10px;}
    .sub .contact dt i {padding-right:5px;}
    .sub .contact dd {font-size:16px;}

    .sub .contact.on {display:block;}


    .section.s01:before {content:"M";display:none;width:100px;height:100px;font-size:600px;font-weight:900;color:#0e6b5d;position:absolute;top:15%;left:850px;z-index:-1;transition:1s;text-shadow:20px 20px 0px #ce9178;} 

    .section.s01:hover:before {animation: hello 2s infinite;}


    @keyframes hello {
        0% {content:"M";top:15%;left:850px;}
        50% {content:"m";top:10%;left:840px;}
        100% {content:"M";top:15%;left:850px;}
    }


    .section  {background-image:url(../img/pt01.png)}

    .section:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 


    .s01:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
    .s02:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
    .s03:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
    .s04:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
    .s05:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
    .s06:after {content:"N";display:block;width:100px;height:100px;font-size:820px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-230px;transform:rotate(-10deg);z-index:-1;transition:1s;} 

    .s01.on:after {
        transform: rotate(-15deg);
        color:#ff4241;
    }
    .s02.on:after {
        transform: rotate(-15deg);
        color:#fff200;
    }
    .s03.on:after {
        transform: rotate(-15deg);
        color:#435798;
    }
    .s04.on:after {
        transform: rotate(-15deg);
        color:#fd0000;
    }
    .s05.on:after {
        transform: rotate(-15deg);
        color:#0067d4;;
    }
    .s06.on:after {
        transform: rotate(-15deg);
        color:#585858;
    }
    .s07.on:after {
        transform: rotate(-15deg);
        color:#6B8E23;
    }



  
    .s01 .box {position: relative;width:90%;margin:0 auto;}
    .s01 .left{float:left;width:100%;transform: translateX(0px)translateY(10px);text-align: right;}
    .s01 .left h3 {font-size:36px;font-weight:700;padding:10px 0;padding-top:0px;}

    .s01 .left p {font-size:13px;font-weight:300;line-height:1.5;width:100%;padding-left:70px;}
    .s01 .left p .bb {display:none;}

    .s01 .right{float:left;width:100%;height:0vh;position: relative;}
    .s01 .right:after {content:"F";display:none;width:100px;height:100px;font-size:400px;font-weight:900;color:#fdd457;position:absolute;top:150px;right:0;transform:rotate(90deg);z-index:-1;transition:1s;text-shadow:20px 20px 0 #fff200;} 

    .s01 .right:hover:after {animation: hi 2s;}
    .mm {display: block;}
    .cc {display:none;}

    @keyframes hi {
        
        0% {color:#fdd457; text-shadow: 20px 20px 0 #3f9cd6;}
        50% {color:#3f9cd6; text-shadow: 20px 20px 0 #fdd457;}
        100% {color:#fdd457; text-shadow: 20px 20px 0 #3f9cd6;}
    }

    .s01 .right::before {content:"CODING IS FUN";display:none;width:100px;height:100px;font-size:60px;font-weight:900;color:#fdd457;position:absolute;top:150px;left:100px;transform:rotate(90deg);z-index:-1;transition:1s;text-shadow:20px 20px 0 #fff200;} 

    .s01:hover .right::before {animation:1s fun infinite;transform: rotate(0deg);}

    @keyframes fun {
        
        0% {content:"CODING IS FUN";}
        50% {content:"CODING ALWAYS FUN";}
        100% {content:"CODING IS FUN";}

    }


    .s02 .box {position: relative;width:90%;margin:0 auto;}
    .s02 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 30px;border-radius:20px;}
    .s02 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
    .s02 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
    .s02 .left a {display:block;width:60px;height:60px;background:#fff200;border-radius:50%;line-height:60px;text-align: center;color:#fff;position: absolute;top:-10%;right:0%;opacity:1;}
    .s02 .left a:hover {transition:0.5s;border-radius:30px;}
    .s02 .left .sub01 {top:-13%;right:32%;width:40px;height:40px;line-height:40px;background:#ddd;font-size:12px;}
    .s02 .left .sub02 {top:-13%;right:20%;width:40px;height:40px;line-height:40px;background:#ddd;font-size:12px;}

    .s02.on .left a {opacity:1;}

    .s02 .right{float:left;width:100%;height:28vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
    .s02 .right figure {background:url(../img/pt02.png) no-repeat top center/cover;height:28vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



    .s02 .right figure:hover {background-position:center;transition:5s;}
    .s03 .right figure:hover {background-position:center;transition:5s;}
    .s04 .right figure:hover {background-position:center;transition:5s;}
    .s05 .right figure:hover {background-position:center;transition:5s;}
    .s06 .right figure:hover {background-position:center;transition:5s;}

    .s03 .box {position: relative;width:90%;margin:0 auto;}
    .s03 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 30px;border-radius:20px;}
    .s03 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
    .s03 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
    .s03 .left a {display:block;width:60px;height:60px;background:#435798;border-radius:50%;line-height:60px;text-align: center;color:#fff;position: absolute;top:-10%;right:0%;opacity:1;}
    .s03 .left a:hover {transition:0.5s;border-radius:30px;}
    .s03 .left .sub01  {top:-15%;right:22%;width:40px;height:40px;line-height:40px;background:#ddd;font-size:12px;}
    .s03.on .left a {opacity:1;}

    .s03 .right{float:left;width:100%;height:28vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
    .s03 .right figure {background:url(../img/pt03.png) no-repeat top center/cover;height:28vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}


    .s04 .box {position: relative;width:90%;margin:0 auto;}
    .s04 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 30px;border-radius:20px;}
    .s04 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
    .s04 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
    .s04 .left a {display:block;width:60px;height:60px;background:#fd0000;border-radius:50%;line-height:60px;text-align: center;color:#fff;position: absolute;top:-10%;right:0%;opacity:1;}
    .s04 .left a:hover {transition:0.5s;border-radius:30px;}

    .s04.on .left a {opacity:1;}

    .s04 .right{float:left;width:100%;height:28vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
    .s04 .right figure {background:url(../img/pt04.png) no-repeat top center/cover;height:25vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



    .s05 .box {position: relative;width:90%;margin:0 auto;}
    .s05 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 30px;border-radius:20px;}
    .s05 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px;}
    .s05 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
    .s05 .left a {display:block;width:60px;height:60px;background:#0067d4;;border-radius:50%;line-height:60px;text-align: center;color:#fff;position: absolute;top:-10%;right:0%;opacity:1;}
    .s05 .left a:hover {transition:0.5s;border-radius:30px;}

    .s05.on .left a {opacity:1;}

    .s05 .right{float:left;width:100%;height:28vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
    .s05 .right figure {background:url(/img/pt05.png) no-repeat top center/cover;height:28vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



    .s06 .box {position: relative;width:90%;margin:0 auto;}
    .s06 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 30px;border-radius:20px;}
    .s06 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
    .s06 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
    .s06 .left a {display:block;width:60px;height:60px;background:#585858;border-radius:50%;line-height:60px;text-align: center;color:#333;position: absolute;top:-10%;right:0%;opacity:1;}
    .s06 .left a:hover {transition:0.5s;border-radius:30px;}

    .s06.on .left a {opacity:1;}

    .s06 .right{float:left;width:100%;height:28vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
    .s06 .right figure {background:url(img/pt06.png) no-repeat top center/cover;height:28vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



    .s07 .box {position: relative;width:90%;margin:0 auto;}
    .s07 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 30px;border-radius:20px;}
    .s07 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
    .s07 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
    .s07 .left a {display:block;width:60px;height:60px;background:#6B8E23;border-radius:50%;line-height:60px;text-align: center;color:#333;position: absolute;top:-10%;right:0%;opacity:1;}
    .s07 .left a:hover {transition:0.5s;border-radius:30px;}

    .s07.on .left a {opacity:1;}

    .s07 .right{float:left;width:100%;height:28vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
    .s07 .right figure {background:url(img/pt07.png) no-repeat top center/cover;height:28vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}

    footer {position: fixed;bottom:20px;left:20px;color:#333;display:none;} 

}


@media (min-width:768px) and (max-width:1024px) {

        .sub-back {position:fixed;width:100%;height:100vh;;top:0;right:-100%;background:rgba(0,0,0,0.5);display:block;z-index:1;}
        .sub-back.on {right:0;}

        header {position:fixed;top:0;right:0;z-index:999;}

        .menu::before {content:"2021 mini";display:block;transform: translateX(-110px);width:400%;color:rgb(155, 155, 155);font-size:14px;line-height:20px;}
        .menu {position:fixed;top:30px;right:30px;width:30px;height:50px;position: relative;cursor: pointer;z-index:999;}
        .menu span {display:block;background:#333;height:2px;width:100%;position: absolute;top:0;transition:0.5s;}
        .menu.on span {background:#333;}
        .menu span:nth-child(2) {top:10px;transition:0.5s;}
        .menu span:nth-child(3) {top:20px}

        /* .menu.on span:nth-child(1) {transform: translateX(2px) rotate(-41deg);width:80%;top:4px;}
        .menu.on span:nth-child(2) {top:10px;transform:rotate(90deg) translateY(10px);width:100%;}
        .menu.on span:nth-child(3) {transform:translateX(7px) rotate(51deg);width:70%;top:16px;} */

        
        .menu.on span:nth-child(1) {
            transform: translateX(-1px) rotate(60deg);
            width:80%;
            top:4px;
        }
        .menu.on span:nth-child(2) {
            top:10px;
            transform:rotate(90deg) translateY(10px);
            width:100%;
        }
        .menu.on span:nth-child(3) {
            transform: translateX(10px) rotate(-60deg);
            width:80%;
            top:4px;
        }
        .menu.on span:nth-child(4) {
            top:10px;
            transform:rotate(90deg) translateY(-13px);
            width:100%;
        }

        .sub {position: fixed;top:0;right:-40%;width:40%;height:100vh;background:#fff;color:#333;transition:0.5s;z-index:2;border-left:1px solid #333;}
        .sub.on {right:0;}

        .sub ul {padding-top:100px;text-align: center;}
        .sub ul li {font-size:16px;padding-bottom:30px;position: relative;}
        .sub ul li::after {content:"";display:block;width:50%;bottom:30%;left:25%;position: absolute;height:10px;background:#fff200;opacity:0;}

        .sub ul li:hover:after {opacity:1;transition:0.5s;}

        .sub ul li:nth-child(2):after {
            background:#000;
        } 
        .sub ul li:nth-child(3):after {
            background:#435798;
        } 
        .sub ul li:nth-child(4):after {
            background:#0067d4;
        } 
        .sub ul li:nth-child(5):after {
            background:#585858;;
        } 
        .sub ul li:nth-child(6):after {
            background:#6B8E23;
        } 






        
        .sub .contact {transform: translateY(20px);width:90%;margin:0 auto;border:1px solid #ddd;padding:30px 10px;display: none;}

        .sub .contact dl {padding:10px 0;}
        .sub .contact dt {font-weight:700;font-size:18px;padding-bottom:10px;}
        .sub .contact dt i {padding-right:5px;}
        .sub .contact dd {font-size:16px;}

        .sub .contact.on {display:block;}


        .section.s01:before {content:"I";display:none;width:100px;height:100px;font-size:600px;font-weight:900;color:#0e6b5d;position:absolute;top:15%;left:850px;z-index:-1;transition:1s;text-shadow:20px 20px 0px #ce9178;} 

        .section.s01:hover:before {animation: hello 2s infinite;}


        @keyframes hello {
            0% {content:"M";top:15%;left:850px;}
            50% {content:"m";top:10%;left:840px;}
            100% {content:"M";top:15%;left:850px;}
        }


        .section  {background-image:url(../img/pt01.png)}

        .section:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 


        .s01:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
        .s02:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
        .s03:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
        .s04:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
        .s05:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 
        .s06:after {content:"N";display:block;width:100px;height:100px;font-size:1000px;font-weight:900;color:rgba(0,0,0,0.1);position:fixed;top:0%;left:-200px;transform:rotate(-10deg);z-index:-1;transition:1s;} 

        .s01.on:after {
            transform: rotate(-15deg);
            color:#ff4241;
        }
        .s02.on:after {
            transform: rotate(-15deg);
            color:#fff200;
        }
        .s03.on:after {
            transform: rotate(-15deg);
            color:#435798;
        }
        .s04.on:after {
            transform: rotate(-15deg);
            color:#fd0000;
        }
        .s05.on:after {
            transform: rotate(-15deg);
            color:#0067d4;;
        }
        .s06.on:after {
            transform: rotate(-15deg);
            color:#585858;
        }
        .s07.on:after {
            transform: rotate(-15deg);
            color:#6B8E23;
        }



    
        .s01 .box {position: relative;width:90%;margin:0 auto;}
        .s01 .left{float:left;width:100%;transform: translateX(0px)translateY(10px);text-align: right;}
        .s01 .left h3 {font-size:36px;font-weight:700;padding:10px 0;padding-top:0px;}

        .s01 .left p {font-size:13px;font-weight:300;line-height:1.5;width:100%;padding-left:70px;}
        .s01 .left p .bb {display:none;}

        .s01 .right{float:left;width:100%;height:0vh;position: relative;}
        .s01 .right:after {content:"F";display:none;width:100px;height:100px;font-size:400px;font-weight:900;color:#fdd457;position:absolute;top:150px;right:0;transform:rotate(90deg);z-index:-1;transition:1s;text-shadow:20px 20px 0 #fff200;} 

        .s01 .right:hover:after {animation: hi 2s;}
        .mm {display:none;}
        .cc {display:block;}

        @keyframes hi {
            
            0% {color:#fdd457; text-shadow: 20px 20px 0 #3f9cd6;}
            50% {color:#3f9cd6; text-shadow: 20px 20px 0 #fdd457;}
            100% {color:#fdd457; text-shadow: 20px 20px 0 #3f9cd6;}
        }

        .s01 .right::before {content:"CODING IS FUN";display:none;width:100px;height:100px;font-size:60px;font-weight:900;color:#fdd457;position:absolute;top:150px;left:100px;transform:rotate(90deg);z-index:-1;transition:1s;text-shadow:20px 20px 0 #fff200;} 

        .s01:hover .right::before {animation:1s fun infinite;transform: rotate(0deg);}

        @keyframes fun {
            
            0% {content:"CODING IS FUN";}
            50% {content:"CODING ALWAYS FUN";}
            100% {content:"CODING IS FUN";}

        }


        .s02 .box {position: relative;width:70%;margin:0 auto;}
        .s02 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 10px;border-radius:20px;}
        .s02 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
        .s02 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
        .s02 .left a {display:block;width:80px;height:80px;background:#fff200;border-radius:50%;line-height:80px;text-align: center;color:#fff;position: absolute;top:-20%;right:0%;opacity:1;}
        .s02 .left a:hover {transition:0.5s;border-radius:30px;}
        .s02 .left .sub01 {top:-15%;right:28%;width:50px;height:50px;line-height:50px;background:#ddd;font-size:12px;}
        .s02 .left .sub02 {top:-15%;right:18%;width:50px;height:50px;line-height:50px;background:#ddd;font-size:12px;}

        .s02.on .left a {opacity:1;}

        .s02 .right{float:left;width:100%;height:40vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
        .s02 .right figure {background:url(../img/pt02.png) no-repeat top center/cover;height:40vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



        .s02 .right figure:hover {background-position:center;transition:5s;}
        .s03 .right figure:hover {background-position:center;transition:5s;}
        .s04 .right figure:hover {background-position:center;transition:5s;}
        .s05 .right figure:hover {background-position:center;transition:5s;}
        .s06 .right figure:hover {background-position:center;transition:5s;}

        .s03 .box {position: relative;width:70%;margin:0 auto;}
        .s03 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 10px;border-radius:20px;}
        .s03 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
        .s03 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
        .s03 .left a {display:block;width:80px;height:80px;background:#435798;border-radius:50%;line-height:80px;text-align: center;color:#fff;position: absolute;top:-20%;right:0%;opacity:1;}
        .s03 .left .sub01 {top:-15%;right:18%;width:50px;height:50px;line-height:50px;background:#ddd;font-size:12px;}
        .s03 .left a:hover {transition:0.5s;border-radius:30px;}

        .s03.on .left a {opacity:1;}

        .s03 .right{float:left;width:100%;height:40vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
        .s03 .right figure {background:url(../img/pt03.png) no-repeat top center/cover;height:40vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}


        .s04 .box {position: relative;width:70%;margin:0 auto;}
        .s04 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 10px;border-radius:20px;}
        .s04 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
        .s04 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
        .s04 .left a {display:block;width:80px;height:80px;background:#fd0000;border-radius:50%;line-height:80px;text-align: center;color:#fff;position: absolute;top:-20%;right:0%;opacity:1;}
        .s04 .left a:hover {transition:0.5s;border-radius:30px;}

        .s04.on .left a {opacity:1;}

        .s04 .right{float:left;width:100%;height:35vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
        .s04 .right figure {background:url(../img/pt04.png) no-repeat top center/cover;height:35vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



        .s05 .box {position: relative;width:70%;margin:0 auto;}
        .s05 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 10px;border-radius:20px;}
        .s05 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px;}
        .s05 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
        .s05 .left a {display:block;width:80px;height:80px;background:#0067d4;;border-radius:50%;line-height:80px;text-align: center;color:#fff;position: absolute;top:-20%;right:0%;opacity:1;}
      
        .s05 .left a:hover {transition:0.5s;border-radius:30px;}

        .s05.on .left a {opacity:1;}

        .s05 .right{float:left;width:100%;height:40vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
        .s05 .right figure {background:url(/img/pt05.png) no-repeat top center/cover;height:40vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



        .s06 .box {position: relative;width:70%;margin:0 auto;}
        .s06 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 10px;border-radius:20px;}
        .s06 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
        .s06 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
        .s06 .left a {display:block;width:80px;height:80px;background:#585858;border-radius:50%;line-height:80px;text-align: center;color:#333;position: absolute;top:-20%;right:0%;opacity:1;}
        .s06 .left a:hover {transition:0.5s;border-radius:30px;}

        .s06.on .left a {opacity:1;}

        .s06 .right{float:left;width:100%;height:40vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
        .s06 .right figure {background:url(img/pt06.png) no-repeat top center/cover;height:40vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}


        .s07 .box {position: relative;width:70%;margin:0 auto;}
        .s07 .left{float:right;width:100%;transform: translateX(0px)translateY(50px);background:#f2f2f2;padding:20px 10px;border-radius:20px;}
        .s07 .left h3 {font-size:24px;font-weight:700;padding:20px 0;padding-top:10px;padding:10px 5px}
        .s07 .left p {font-size:14px;font-weight:300;line-height:1.5;padding:0 5px 10px 5px}
        .s07 .left a {display:block;width:80px;height:80px;background:#6B8E23;border-radius:50%;line-height:80px;text-align: center;color:#333;position: absolute;top:-20%;right:0%;opacity:1;}
        .s07 .left a:hover {transition:0.5s;border-radius:30px;}

        .s07.on .left a {opacity:1;}

        .s07 .right{float:left;width:100%;height:40vh;position: relative;transform: translateX(0px);padding-bottom:100px;}
        .s07.right figure {background:url(img/pt07.png) no-repeat top center/cover;height:40vh;transform: translateY(0vh);box-shadow:5px 5px 20px #ddd;border-radius:20px;}



        footer {position: fixed;bottom:20px;left:20px;color:#333;display:none;} 

}