@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&family=Noto+Sans+KR:wght@300;400;700&display=swap');

*{margin: 0; padding: 0; box-sizing: border-box;}
ul{list-style: none;}
a{text-decoration: none; color: inherit;}
input, label, button{border: 0; outline: 0; background: transparent;
    color: var(--darktext);}
img, svg{max-width: 100%;}
a, span{display: inline-block;}

.blind{width: 1px; height: 1px; margin: -1px; position: absolute; overflow: hidden;}
.inner{padding: 0 20px;}

.title h2{
    font-size: calc(1.875rem + ((1vw - 3.75px) * 2.4242));
    font-weight: 300;
    text-align: center;}

/* font-family: 'Just Another Hand', cursive; */
:root{--darktext: #111; --lightcolor: #474747; --main: #ffd600; --white: #fff; --back: #f0f0f0;}
body{font-family: 'Noto Sans KR', sans-serif; color: var(--darktext);
    overflow-x: hidden;}

#wrap{margin: 0 auto; min-width: 320px; overflow-x: hidden;}
/* header */

#header{position: fixed; left: 0; top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 100;}
#header .header-top{height: calc(3.75rem + ((1vw - 3.75px) * 15.5844)); /*60px*/
    align-items: center;
    vertical-align: middle;} 
#header .logo{width: 11%; 
    padding-top: calc(1rem + ((1vw - 3.75px) * 3.1169));}
#header .logo a{display: block;}
#header .menu{width: 8%;
    position: absolute; right: 20px; top: 40%; transform: translateY(-20%);
    z-index: 10;}
#header .menu button{width: 100%; height: 100%;}
#header .menu span{display: block; width: 100%; height: 2px;
    background: var(--darktext);
    margin: calc(0.3125rem + ((1vw - 3.75px) * 0.5195)) 0;
    transition: 0.3s;}

#header .nav{width: 80%; height: 100%; background: var(--white);
    position: fixed; left: -100%; top: 0; z-index: 9;
    transition: left 0.5s;}
#header .gnb{margin-top: 100px; padding: 0 15px;}
#header .gnb a{margin: 12px 10px;
    font-weight: 300; font-size: 18px;
    color: var(--lightcolor);}
#header .gnb a.go{color: var(--darktext); font-size: 20px;
    border-bottom: 2px solid var(--main);}
#header .cover{background: rgba(0, 0, 0, 0.8);
    position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    z-index: 8;
    display: none;}

#visual{background: var(--white); 
    font-family: 'Just Another Hand', cursive; text-align: center; letter-spacing: 1px;
    height: calc(31.25rem + ((1vw - 3.75px) * 77.9221));}
#visual .typing-title{display: none;}
#visual .typing{padding: calc(11.875rem + ((1vw - 3.75px) * 28.5714)) 0;}
#visual .typing li:first-child{font-size: calc(3.125rem + ((1vw - 3.75px) * 7.7922));} /*50 > 80*/
#visual .typing li:last-child{font-size: calc(1.625rem + ((1vw - 3.75px) * 1.039));
    padding-top: 30px;}

.typing ul li.on{display: inline-block;
    animation: cursor 0.5s infinite;}
@keyframes cursor {
    0%{border-right: 1px solid var(--main);}
    50%{border-right: 1px solid var(--darktext);}
    100%{border-right: 1px solid var(--main);}
}

#profile{width: 100%;
    background: var(--back) url(../images/bg/mobile-bg1.svg) no-repeat left top/contain;
    padding: calc(3.125rem + ((1vw - 3.75px) * 12.987)) 0;}
#profile .title{padding-bottom: calc(1.875rem + ((1vw - 3.75px) * 7.7922));}
#profile .profile-area{ padding: 0 calc(0.625rem + ((1vw - 3.75px) * 10.3896));}
#profile .profile-img-area{position: relative;}
#profile .profile-img img{display: block;}
#profile .profile-keyword{background: rgba(255, 255, 255, 0.7);
    width: 100%; height: 100%;
    display: block;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#profile .profile-keyword img{ width: 88%;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#profile .profile-keyword:hover{display: block;}
#profile .introduce-area .intro-text-top{padding: 10px 0 30px;}
#profile .introduce-area .intro-text span{display: block;}
#profile .introduce-area .intro-text p{font-size: calc(1.5rem + ((1vw - 3.75px) * 1.5584));}
#profile .introduce-area .intro-text strong{font-weight: 400;
    font-size: calc(1.125rem + ((1vw - 3.75px) * 0.5195));}
#profile .introduce-area .intro-text-bottom p{font-size: calc(0.875rem + ((1vw - 3.75px) * 0.5195));
    padding-bottom: 50px;}
.skill-area .design-skill, .skill-area .publish-skill{padding-bottom: 30px;}
.skill-area .design-skill p:nth-of-type(1), .skill-area .publish-skill p:nth-of-type(1){
    padding-bottom: 20px;
}
.skill-area .graph{display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;}
.skill-area strong{font-size: 18px; font-weight: 400;
    padding-bottom: 20px;}
.skill-area .graph-title{font-size: 16px; font-weight: 300;
    width: 32%;}
.skill-area .graph-bar{width: 49%;
    position: relative;}
.skill-area .graph-bar .bar-bg{background: #d5d5d5; border-radius: 10px;
    display: block; height: 10px;}
.skill-area .graph-bar .bar{display: block; width: 0%; height: 10px;
    background: var(--main); border-radius: 10px;
    position: absolute; left: 0; top: 0;
    transition: 1s;}
.skill-area .graph-percentage{font-size: 14px;
    width: 10%;}

#web{background: var(--white) url(../images/bg/mobile-bg2.svg) no-repeat left top/contain;
    padding: calc(3.125rem + ((1vw - 3.75px) * 12.987)) 0;
    overflow: hidden;}
#web .inner{padding: 0 calc(0.0625rem + ((1vw - 3.75px) * 17.9221));}
/* web 공통 */
#web .web{padding-bottom: 85px;}
#web .web2 .web-img-full, #web .web3 .web-img-full, #web .web4 .web-img-full{padding-bottom: 30px;}

#web .web-description-full{text-align: center;}
#web .title-area p:nth-of-type(1){
    font-size: calc(1rem + ((1vw - 3.75px) * 0.5195));
    color: var(--lightcolor);
}
#web .title-area .web-title{
    font-size: calc(2rem + ((1vw - 3.75px) * 2.0779));
    padding-bottom: 10px;
    font-weight: 700;
    position: relative;
}
#web .title-area .up{position: relative; z-index: 2;}
#web .title-area .web-desc{
    font-size: calc(0.875rem + ((1vw - 3.75px) * 1.039));
    padding-bottom: 25px;
    color: var(--lightcolor);
    word-break: keep-all;
}
#web .join p:nth-of-type(1), #web .program p:nth-of-type(1){
    font-size: calc(1.125rem + ((1vw - 3.75px) * 0.5195)); font-weight: 700;
    padding-bottom: 10px;
}
#web .join p:nth-of-type(2) strong, #web .program p:nth-of-type(2) strong{
    font-size: calc(0.875rem + ((1vw - 3.75px) * 1.039)); font-weight: 400;
}
#web .join p:nth-of-type(2), #web .program p:nth-of-type(2){padding-bottom: 15px;}
#web .program p:nth-of-type(2){padding-bottom: 30px;}
#web .line-change{display: block;}
/* web 공통 끝 */
/* web1, web2 공통 */
#web .web1 .highlight, #web .web2 .highlight{
    display: inline-block;
    width: calc(17.8125rem + ((1vw - 3.75px) * 16.8831)); height: 10px;
    background: var(--main);
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}
/* web1, web2 공통 끝 */
/* web2, web4 공통 */
#web .web2 .mobile-img-area, #web .web4 .mobile-img-area{
    /* position: relative; height: 100%; */
    display: flex; justify-content: space-around;
    /* margin-bottom: 100px; */}
#web .web2 .mobile-img-area .web-img, #web .web4 .mobile-img-area .web-img{
    width: calc(5.8125rem + ((1vw - 3.75px) * 14.8052));
}
#web .web2 .mobile-img-area .web-img:nth-child(2), #web .web4 .mobile-img-area .web-img:nth-child(2){
    /* position: absolute; left: 50%; top: 50%; transform: translateX(-50%); */
    margin-top: 90px;
}
#web .web2 .mobile-img-area .web-img:nth-child(3), #web .web4 .mobile-img-area .web-img:nth-child(3){
    /* position: absolute; right: 0; top: 50%; transform: translateY(-25%); */
    margin-top: 45px;
}
/* web2, web4 공통 끝 */
#web .title{padding-bottom: calc(1.875rem + ((1vw - 3.75px) * 7.7922));}
#web .web1 .web-img{width: 128%;
    position: relative; left: 50%; transform: translateX(-50%);}
#web .web3 .web-img{width: 128%;
    position: relative; left: 50%; transform: translateX(-50%);}
#web .web3 .highlight{
    display: inline-block;
    width: calc(10.3125rem + ((1vw - 3.75px) * 9.0909)); height: 10px;
    background: var(--main);
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}
#web .web4 .highlight{
    display: inline-block;
    width: calc(6.25rem + ((1vw - 3.75px) * 6.4935)); height: 10px;
    background: var(--main);
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}
#web .web1 .highlight5{
    display: inline-block;
    width: calc(12.5rem + ((1vw - 3.75px) * 12.987)); height: 10px;
    background: var(--main);
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}

#web .web6{flex-direction: row-reverse;}
#web .web2 .highlight7{
    display: inline-block;
    width: calc(20.9375rem + ((1vw - 3.75px) * 18.1818)); height: 10px;
    background: var(--main);
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
}
#web .web1 .highlight6{
    display: inline-block;
    width: calc(16.875rem + ((1vw - 3.75px) * 15.5844)); height: 10px;
    background: var(--main);
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}

#design{width: 100%;
    background: var(--back) url(../images/bg/mobile-bg3.svg) no-repeat left top/contain;
    padding: calc(3.125rem + ((1vw - 3.75px) * 12.987)) 0;}
#disign .inner{margin: 0 auto;}
#design .line-change{display: block;}
#design .design{padding: calc(3.125rem + ((1vw - 3.75px) * 12.987)) 0;} /* 50 -100 */
#design .design .design-img-full{padding-bottom: 30px;}
#design .design .design-img{width: calc(20rem + ((1vw - 3.75px) * 59.7403));
    margin: 0 auto;}

#design .design-description-full{text-align: center;}
#design .title-area p:nth-of-type(1){
    font-size: calc(1rem + ((1vw - 3.75px) * 0.5195));
    color: var(--lightcolor);
}
#design .title-area .design-title{
    font-size: calc(2rem + ((1vw - 3.75px) * 2.0779));
    padding-bottom: 10px;
    font-weight: 700;
    position: relative;
}
#design .title-area .up{position: relative; z-index: 2;}
#design .title-area .design-desc{
    font-size: calc(0.875rem + ((1vw - 3.75px) * 1.039));
    padding-bottom: 25px;
    color: var(--lightcolor);
    word-break: keep-all;
}
#design .join p:nth-of-type(1), #design .program p:nth-of-type(1){
    font-size: calc(1.125rem + ((1vw - 3.75px) * 0.5195)); font-weight: 700;
    padding-bottom: 10px;
}
#design .join p:nth-of-type(2) strong, #design .program p:nth-of-type(2) strong{
    font-size: calc(0.875rem + ((1vw - 3.75px) * 1.039)); font-weight: 400;
}
#design .join p:nth-of-type(2), #design .program p:nth-of-type(2){padding-bottom: 15px;}
#design .program p:nth-of-type(2){padding-bottom: 30px;}

#design .design .highlight{display: inline-block; height: 10px;
    background: var(--main);}

#design .design1 .highlight{width: calc(11.25rem + ((1vw - 3.75px) * 12.987));
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}
#design .design2 .highlight{width: calc(11.25rem + ((1vw - 3.75px) * 14.2857));
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}
#design .design3 .highlight{width: calc(6.5625rem + ((1vw - 3.75px) * 5.1948));
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}

#java{width: 100%;
    background: var(--white) url(../images/bg/mobile-bg4.svg) no-repeat left top/contain;
    padding: calc(3.125rem + ((1vw - 3.75px) * 12.987)) 0;
    overflow: hidden;}
/* #java .inner{margin: 0 auto;} */
#java .java-img{padding: 0 calc(0.0625rem + ((1vw - 3.75px) * 21.8182));}
#java .title{padding-bottom: calc(3.125rem + ((1vw - 3.75px) * 7.7922));}
#java .java-desc-full{text-align: center; padding-top: 30px;}
#java .java-txt p:nth-of-type(1){
    font-size: calc(1rem + ((1vw - 3.75px) * 0.5195));
    color: var(--lightcolor);}
#java .java-title{position: relative;}
#java .java-title .up{
    font-size: calc(1.75rem + ((1vw - 3.75px) * 3.1169));
    padding-bottom: 10px;
    font-weight: 700;
    position: relative; z-index: 2;}
#java .java1{padding-bottom: calc(3.125rem + ((1vw - 3.75px) * 12.987));}
#java .java .java-title .highlight{
    display: inline-block;
    width: calc(15.9375rem + ((1vw - 3.75px) * 24.6753)); height: 10px;
    background: var(--main);
    position: absolute; left: 50%; bottom: 15px; transform: translate(-50%);}

#java .java-txt p:nth-of-type(2){
    font-size: calc(0.875rem + ((1vw - 3.75px) * 1.039));
    padding-bottom: 25px;
    color: var(--lightcolor);
    word-break: keep-all;}



#graphic{background: var(--back) url(../images/bg/mobile-bg3.svg) no-repeat left top/contain;
    padding: calc(3.125rem + ((1vw - 3.75px) * 12.987)) 0;
    overflow: hidden;}
#graphic .inner{margin: 0 auto;}
#graphic .title{padding-bottom: calc(3.125rem + ((1vw - 3.75px) * 7.7922));}
#graphic .graphic-area{text-align: center;}
#graphic .graphic{padding-bottom: 25px; width: 230px; margin: 0 auto;}
#graphic .graphic img{width: 230px;}
#graphic .graphic .gra-cover{font-size: calc(0.875rem + ((1vw - 3.75px) * 0.4848));} /* 14 > 18 */
#graphic .graphic5{display: none;}

.graphic-pop-area{width: 100%; height: 100%; background: var(--white);
    position: fixed; left: 0; top: 0; z-index: 101;
    text-align: center;
    display: none;
    overflow: auto;}
.graphic-pop-area .pop-up{display: inline-block;
    border: 1px solid var(--lightcolor);
    margin-top: 100px; padding: 0 0 50px 0;
    position: relative;}
.graphic-pop-area .pop-up .pop-title{font-size: 20px; color: var(--darktext);
    padding: 20px 0;}
.graphic-pop-area .pop-up .pop-img img{width: 500px;}
.graphic-pop-area .pop-up .close{width: 100%; height: 30px;
    background: var(--main);
    position: absolute; bottom: 0; left: 0;
    font-size: 14px;}

#contact{padding: 100px 0;
    background: var(--back);}
#contact .inner{margin: 0 auto;}
#contact .title{padding-bottom: 30px;}
#contact .title h2{font-size: 28px;}
#contact .contact-area{text-align: center;}
#contact .contact-area p:first-child{padding-bottom: 10px;}

#footer{padding: 30px 0;
    text-align: center;
    font-size: 12px; color: var(--lightcolor);
    background: var(--back);}
#footer .inner p:last-child{padding-top: 5px;}

@media screen and (min-width: 545px) {
    #header .logo{max-width: 60px;}
    #header .menu span{margin: 6px 0;}

    #graphic .graphic-area{display: flex; flex-wrap: wrap; justify-content: center;}
    #graphic .graphic{width: 230px;}
}

@media screen and (min-width: 630px) {
    #header .menu{max-width: 50px;}
    #header .logo{padding-top: 28px;}
    /* #design .left-btn{margin-right: 10px;} */
    #graphic .graphic{padding-bottom: 25px; width: 230px; margin: 0 32px;}
}


@media screen and (min-width: 760px) {
    .button{width: 445px;}
    .btn-area .j-btn{width: 445px;}
    .web7 .button{width: 445px;}

    #header .header-top{max-height: 120px;}
    #visual{max-height: 800px;}
    #visual .typing{padding: 300px 0;}
    #visual .typing li:first-child{font-size: 80px} /*50 > 80*/
    #visual .typing li:last-child{font-size: 30px}

    #profile{padding: 100px 0;}
    #profile .profile-area{padding: 0 50px;}
    #profile .introduce-area .intro-text span{display: unset;}
    #profile .introduce-area .intro-text p{font-size: 30px;}
    #profile .introduce-area .intro-text strong{font-size: 20px;}
    #profile .introduce-area .intro-text-bottom p{font-size: 16px;
        padding-bottom: 50px;}

    #web{padding: 100px 0;}
    #web .inner{padding: 0 calc(4.375rem + ((1vw - 7.6px) * -15.6818));}
    #web .web1, #web .web2, #web .web3, #web .web4{padding-bottom: calc(5.3125rem + ((1vw - 7.6px) * 11.3636));}
    #web .web-description-full{padding: 0 50px;}
    #web .web-description-full .attribute-area{text-align: left;
        max-width: 520px; margin: 0 auto; padding: 0 37px;}
    #web .title-area p:nth-of-type(1){
            font-size: 18px;
        }
    #web .title-area .web-desc{font-size: 18px;}
    #web .title-area .web-title{font-size: 40px;}
    #web .title-area .web-desc{font-size: 18px;}
    #web .join p:nth-of-type(1), #web .program p:nth-of-type(1){
        font-size: 20px
    }
    #web .join p:nth-of-type(2) strong, #web .program p:nth-of-type(2) strong{
        font-size: 18px;
    }
    /* #web .btn-area{max-width: 560px; margin: 0 auto;}
    #web .small-btn{width: 215px;}
    #web .left-btn{margin-right: 10px;}
    #web .origin-btn{width: 445px; display: inline-block;} */

    #web .web2 .mobile-img-area, #web .web4 .mobile-img-area{max-width: 550px; margin: 0 auto;}

    #web .web1 .highlight, #web .web2 .highlight{
        width: 350px; height: 10px;
        position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}
    #web .web2 .mobile-img-area .web-img, #web .web4 .mobile-img-area .web-img{
        width: 150px;}
    #web .web1 .web-img{width: 109%;}
    #web .web3 .web-img{max-width: 100%;}
    #web .web3 .highlight{width: 200px;}
    #web .web4 .highlight{width: 125px;}
    #web .web1 .highlight5{width: 250px;}
    #web .web1 .highlight6{width: 330px;}
    #web .web2 .highlight7{width: 405px;}

    #design{padding: 100px 0;}
    #design .design{padding: 100px 0;} /* 50 -100 */
    #design .design .design-img{max-width: 550px;}
    #design .design .attribute-area{text-align: left; width: 445px; margin: 0 auto;}
    /* #design .btn-area{margin: 0 auto;}
    #design .small-btn{width: 425px;} */
    #design .title-area p:nth-of-type(1){
        font-size: 18px;
    }
    #design .title-area .design-title{
        font-size: 40px;
    }
    #design .title-area .design-desc{
        font-size: 18px;
    }
    #design .join p:nth-of-type(1), #design .program p:nth-of-type(1){
        font-size: 20px;
    }
    #design .join p:nth-of-type(2) strong, #design .program p:nth-of-type(2) strong{
        font-size: 18px;
    }
    #design .design1 .highlight{width: 230px}
    #design .design2 .highlight{width: 235px;}
    #design .design3 .highlight{width: 125px}

    #java .java-img{padding: 0 85px;}
    #java .title{padding-bottom: 100px;}
    #java .java-txt p:nth-of-type(1){font-size: 18px;}
    #java .java-title .up{font-size: 40px;}
    #java .java1{padding-bottom: 100px;}
    #java .java .java-title .highlight{width: 340px; bottom: 16px;}
    #java .java-txt p:nth-of-type(2){font-size: 18px;}
    /* #java .j-btn{width: 425px;} */

    #graphic{padding: 100px 0;}
    #graphic .title{padding-bottom: 80px;}
    #graphic .graphic{width: calc(14.375rem + ((1vw - 7.6px) * 11.3636)); margin: 0 auto;}
    #graphic .graphic img{width: calc(14.375rem + ((1vw - 7.6px) * 11.3636));}
    #graphic .graphic5{display: block;
        height: calc(14.375rem + ((1vw - 7.6px) * 11.3636));
        background: var(--main);
        line-height: calc(14.375rem + ((1vw - 7.6px) * 11.3636));;}

}


@media screen and (min-width: 1045px) {
    #graphic .graphic{margin: 0 30px;}
}

@media screen and (min-width: 1200px) {
    .btn-area .button{margin: 10px 0;
        text-align: center;}
    .btn-area .small-btn{width: 215px;}
    .btn-area .full-btn{width: 445px;}
    .btn-area .left-btn{margin-right: 10px;}
    .button{ display: inline-block;}
    

    .title h2{font-size: 50px;} 
    /* #header{position: fixed; left: 0; top: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.5);} */
    #header .header-top{display: flex; justify-content: space-between; align-items: center;}
    #header .logo{padding-top: 0px;}
    #header .menu{display: none;}
    #header .nav{width: 45%; height: auto; background: transparent;
        position: static;
        display: block;}
    #header .gnb{margin-top: 0; padding: 0;
        display: flex;}
    #header .gnb li{flex: 1; text-align: center;}
    
    #profile .inner{max-width: 1200px; margin: 0 auto;}
    #profile .title{padding-bottom: 100px;}
    #profile .profile-area{display: flex; justify-content: space-between;}
    #profile .profile-img-area{position: static; width: 95%;
        padding-right: 20px;}
    #profile .profile-keyword{background: transparent;
        position: static; transform: translate(0, 0);}
    #profile .profile-keyword img{ width: 88%;
        position: static; transform: translate(0, 0);}
    #profile .introduce-area{width: 100%; position: relative;
        padding-left: 20px;}
    #profile .introduce-area .intro-text-bottom p{word-break: keep-all;}
    /* #profile .skill-area{ height: 100%;} */
    .skill-area .design-skill{width: 50%;
        position: absolute; bottom: -25px; left: 15px;}
    .skill-area .publish-skill{width: 50%;
        position: absolute; bottom: -25px; right: -40px;}

    #web .inner{padding: 0 20px; max-width: 1200px; margin: 0 auto;}
    #web .web1, #web .web2, #web .web3, #web .web4{padding-bottom: 135px;}
    #web .web-description-full{text-align: left;}
    #web .web1 .web-description-full{padding: 0 48px;}
    #web .web2 .web-description-full, #web .web4 .web-description-full{width: 560px;}
    #web .web-description-full .attribute-area{padding: 0;}
    #web .web{display: flex;}
    #web .web2, #web .web4{flex-direction: row-reverse; justify-content: center;}
    #web .web1 .highlight, #web .web2 .highlight{position: absolute; bottom: 16px; left: 39%; transform: translateX(-50%);}
    #web .web2 .mobile-img-area .web-img, #web .web4 .mobile-img-area .web-img{margin: 0 15px;}
    #web .web7{flex-direction: unset;}

    #web .title{padding-bottom: 95px;}
    #web .web1 .web-img img{transform: scale(1.2);}
    #web .web3 .web-img img{transform: scale(1.2);}
    #web .web1 .web-img-full{max-width: 620px;}
    #web .web3 .web-img-full{width: 98%;}
    #web .web3 .highlight{position: absolute; bottom: 16px; left: 20%; transform: translateX(-50%);}
    #web .web4 .highlight{position: absolute; bottom: 16px; left: 11%; transform: translateX(-50%);}
    #web .web1 .highlight5{position: absolute; bottom: 16px; left: 27%; transform: translateX(-50%);}
    #web .web1 .highlight6{position: absolute; bottom: 16px; left: 37%; transform: translateX(-50%);}
    #web .web2 .highlight7{position: absolute; bottom: 16px; left: 41%; transform: translateX(-50%);}
    #web .web-img-full{position: relative; overflow: hidden;}

    #design .inner{max-width: 1200px; margin: 0 auto;}
    #design .design{display: flex;}
    #design .design2{display: flex; flex-flow: row-reverse;
        margin: 0 auto;}
    #design .line-change{display: inline-block;}
    #design .design-description-full{text-align: left; padding-left: 50px;}
    #design .design2 .design-description-full{text-align: left; padding-right: 50px; padding-left: 0;}
    #design .design .attribute-area{width: auto;}
    #design .design1 .highlight{position: absolute; bottom: 16px; left: 20%; transform: translateX(-50%);}
    #design .design2 .highlight{position: absolute; bottom: 16px; left: 21%; transform: translateX(-50%);}
    #design .design3 .highlight{ position: absolute; bottom: 16px; left: 11%; transform: translateX(-50%);}
    
    #java .inner{width: 1200px; margin: 0 auto;}
    #java .java{display: flex; justify-content: space-between;}
    #java .java2{flex-direction: row-reverse;}
    #java .java-img{padding: 0; width: 55%;}
    #java .java-desc-full{text-align: left;}
    #java .java .java-title .highlight{left: 38%; bottom: 15px; transform: translate(-50%);}

    #graphic .inner{max-width: 1200px; margin: 0 auto;}
    #graphic .graphic{width: 280px; margin: 0 auto; padding-bottom: 10px;
        position: relative;}
    #graphic .graphic img{width: 280px;}
    /* #graphic .graphic .graphic-img{} */
    #graphic .graphic5{display: none;}
    #graphic .graphic .gra-cover{font-size: 18px;
        width: 280px; height: 280px;
        background: rgba(71, 71, 71, 0.7);
        color: var(--white); line-height: 280px;
        position: absolute; left: 0; top: 0;
        opacity: 0; transition: opacity 0.3s;}
    #graphic .graphic:hover .gra-cover, #graphic .graphic:focus .gra-cover{opacity: 1;}
}

/* active */
#header .menu.active span{background: var(--white);}
#header .menu.active span:nth-of-type(1){transform: rotate(45deg);
    margin-top: 12px;}
#header .menu.active span:nth-of-type(2){transform: translateX(20px);
    opacity: 0;}
#header .menu.active span:nth-of-type(3){transform: rotate(-45deg);
    margin-top: -14px;}
#header .menu.active+.nav{left: 0;}
#header .menu.active~.cover{display: block;}

#web button:hover, #design button:hover, #web button:focus, #design button:focus{background: rgba(255, 214, 0, 0.3); border: 1px solid rgba(255, 214, 0, 0.3)}
#web button.active, #design button.active{background: var(--main); border: 1px solid var(--main);}
/* active */

/* button */
.button{height: 40px; line-height: 40px;
    border: 1px solid var(--lightcolor);
    margin: 10px auto;
    width: 80%;}
.button a{width: 100%; height: 100%;}
.button:hover, .button.active, .button:focus{background: var(--main); border: 1px solid var(--main);}