.top-title{
    background: url(../images/graphene-top.png) no-repeat 50% 50%;
    background-size: 100% 100%;
    height: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.top-title h3{
    font-size: 32px;
    color: #ffffff;
    font-weight: 700;
}
.tab_graphene{
    border-bottom: 1px solid #aeaeae;
    margin: 20px 0 100px;
    overflow-x: auto;
}
.tab_graphene ul{
    max-width: 1250px;
    min-width: 450px;
    margin: 0 auto;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tab_graphene ul li{
    margin: 0 50px;
    height: 100%;
    display: block;
    padding: 0 20px;
    line-height: 40px;
    cursor: pointer;
}
.tab_graphene ul li.active{
    border-bottom: 2px solid var(--color-blue);
    color: var(--color-blue);
}
.graphene_cont{display: none;}
.graphene_cont.active{display: block;}
.title > h4{
    font-size: 20px;
    color: var(--color-blue);
    text-align: center;
    margin-bottom: 10px;
}
.title > p{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-bottom: 45px;
    padding: 0 30px;
    line-height: 1.5;
}
.box1{
    background: url(../images/grapheneProduct-img1-bg.png) no-repeat 0 0;
    background-size: cover;
    text-align: center;
    padding: 140px 0 350px;
    position: relative;
}
.box1 .img{
    width: 45%;
    max-width: 500px;
    margin: 0 auto;
    min-width: 380px;
}
.box2 h5{
    font-size: 30px;
    color: var(--color-green);
    font-weight: 700;
}
.box2 p{
    line-height: 1.8;
    margin-top: 25px;
}
.box3-wrap{
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.box3-wrap::-webkit-scrollbar{display: none;}
.box3{
    position: absolute;
    top: 250px; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 75%;
    max-width: 1250px;
    padding: 0 30px;
    min-width: fit-content;
}
.box3 > div{
    width: 240px;
    height: 240px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    background-color: #ffffff;
    position: absolute;
    padding: 15px;
    display: grid;
    place-content: center;
}
.box3 > div p:first-of-type{
    font-size: 20px;
    color: var(--color-blue);
    margin: 10px 0;
    font-weight: 700;
}
.box3 > div p:last-of-type{
    line-height: 1.6;
}
.box3 > div:nth-of-type(1){
    left: 30px; top: 0;
}
.box3 > div:nth-of-type(2){
    left: 8%; top: 45%;
}
.box3 > div:nth-of-type(3){
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
}
.box3 > div:nth-of-type(4){
    right: 8%; top: 45%;
    left: auto;
}
.box3 > div:nth-of-type(5){
    right: 30px; left: auto;
    top: 0;
}
.box4{
    max-width: 1250px;
    padding: 0 30px;
    margin: 100px auto;
    text-align: center;
}
.box4 .img .pc{display: block;}
.box4 .img .mobile{display: none;}
.box4 h5{
    font-size: 30px;
    color: var(--color-green);
    font-weight: 700;
}
.box4 > p{
    line-height: 1.8;
    margin-top: 25px;
    width: 62%;
    margin: 20px auto 60px;
}
.box5{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    align-items: center;
    margin-top: 100px;
}
.box5 > div{
    width: 33%;
    padding: 50px 10px;
    position: relative;
}
.box5 > div > p{font-size: 14px; line-height: 1.5;}
.box5 > div > p:first-of-type{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}
.box5 span{
    display: inline-block;
    width: 2px; height: 50px;
    background-color: var(--color-blue);
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
}
.box6{
    background-color: #f6f6f6;
    padding-bottom: 80px;
}
.box6 > div{
    max-width: 1100px;
    padding: 80px 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.box6 .img{
    width: 40%;
    margin-right: 40px;
}
.box6 .text p:first-of-type{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.box6 .box7{
    background-color: #ffffff;
    padding: 36px;
    border-radius: 10px;
    display: block;
}
.box7 > p{
    color: var(--color-blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}
.box7 .declaration{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box7 .declaration .item{
    width: 18%;
}
.box7 .declaration .item p{
    text-align: center;
}
/* 의류원단 */
.box8{
    background-color: #f6f6f6;
    padding: 100px 0;
    text-align: center;
}
.box8 > div{
    max-width: 1250px;
    padding: 0 30px;
    margin: 0 auto;
}
.box8 .img{
    width: 60%;
    margin: 0 auto;
}
.box8 h5{
    font-weight: 700;
    font-size: 20px;
    color: #bf10c5;
}
.box8 p{
    line-height: 1.8;
    width: 60%;
    margin: 40px auto 0;
}
.box9{
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
}
.box9 > div{
    background-color: #ffffff;
    border-radius: 10px;
    padding: 50px 0;
    width: 48%;
}
.box9 p{
    margin: 20px 0 0;
    width: 100%;
}
.box9 .item:first-of-type h5{
    color: var(--color-green);
}
.box9 .item:last-of-type h5{
    color: var(--color-blue);
}
.box10{
    text-align: center;
    background: url(../images/grapheneProduct-img16-bg.png) no-repeat 50% 50%;
    background-size: 100%;
}
.box10 > div{
    max-width: 1250px;
    margin: 0 auto;
    padding: 100px 0 80px;
}
.box10 h5 img{
 max-width: 260px;
}
.box10 p{
    margin: 10px 0 80px;
}
.box10 .img{
    max-width: 400px;
    margin: 0 auto;
}
.box15{padding: 0 30px;}
.box15 p:first-of-type{
    font-size: 34px;
    color: var(--color-green);
    font-weight: bold;
    margin: 60px 0 0;
}
.box15 p:last-of-type{
    margin: 20px 0 50px;
    line-height: 1.5;
}
.box16{
    width: calc(100% - 60px);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 30px 30px;
    border: 1px solid var(--border-color);
    border-radius: 130px;
    background-color: #ffffff;
}
.box16 li{
    width: 18%;
    max-width: 180px;
    text-align: center;
    margin: 0 10px;
}
.box16 li img{width: 65%}
.box16 li p{
    font-size: 20px;
    color: var(--color-blue);
    font-weight: bold;
    margin: 10px 0 0;
}
.box16 li span{
    display: block;
    color: #A7A7A7;
    font-size: 16px;
    margin-top: 3px;
}
.box11{
    background-color: #f6f6f6;
    padding: 70px 30px;
    text-align: center;
}
.box11 h5{
    color: var(--color-blue);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 40px;
}
.box12{
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.box12 div{
    width: 30%;
}
.box12 p{
    margin-top: 5px;
}
.box13{
    background: url(../images/grapheneProduct-img14-bg.png) no-repeat 0 0;
    background-size: cover;
    padding: 75px 30px 120px;
}
.box14{
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}
.box14 h5{
    font-size: 42px;
    color: #f9006c;
    font-weight: 700;
}
.box14 h5 span{
    font-size: 42px;
    color: #f9006c;
    font-weight: 300;
}
.box14 > p{
    margin-top: 15px;
}
.box14 > div{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 30px;
}
.mask-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.box14 .img1{
    width: 45%;
}
.box14 .text{
    text-align: left;
    width: 45%;
    line-height: 1.8;
}
.box14 .text a{
    display: inline-block;
    padding: 14px 34px;
    font-size: 18px;
    border-radius: 5px;
    background-color: var(--color-blue);
    color: #ffffff;
    margin-top: 40px;
}
.box14 .img2{
    width: 150px;
    min-width: 120px;
}
.box14 .img2 .pc{display: block;}
.box14 .img2 .mobile{display: none;}

/* cosmetic */
.tab_cosmetic{
    border-bottom: 1px solid #aeaeae;
    margin: 20px 0 100px;
    text-align: center;
    width: 100%;
}
.tab_cosmetic ul{
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
}
.tab_cosmetic ul li{
    margin: 0 35px;
    height: 100%;
    display: block;
    padding: 0 20px;
    line-height: 40px;
    cursor: pointer;
}
.tab_cosmetic ul li.active{
    border-bottom: 2px solid var(--color-blue);
    color: var(--color-blue);
}
.cosmetic_cont{
    display: none;
}
.cosmetic_cont.active{display: block;}
.cosmetic-content{
    padding-bottom: 140px;
}
.cosmetic-content .tab_cont{
    display: none;
}
.cosmetic-content .tab_cont.active{
    display: block;
}
.cosmetic-content .logo{
    text-align: center;
    margin-bottom: 70px;
}
.cosmetic-content .logo img{max-width: 360px;}
.cosmetic-content .img-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 30px;
}
.cosmetic-content .img-wrap img{
    width: 48%;
}
.box17{
    background: url(../images/cosmetic-img5.png) no-repeat 50% 50%;
    background-size: auto;
    padding: 300px 0 60px;
    text-align: center;
}
.box17 p{padding: 0 30px;}
.box17 p:nth-child(1){
    font-size: 36px; color: #B10000;
    font-weight: bold;
    margin-bottom: 10px;
}
.box17 p:nth-child(2){
    color: #ffffff;
     display: inline-block; 
     padding: 2px 10px; 
     background-color: #A46800;
    font-size: 24px;
    font-weight: normal;
    margin: 0 auto 10px;
}
.box17 p:nth-child(3){font-size: 16px; font-weight: normal; line-height: 1.5; margin: 0;}
.box18{
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 200px 0 100px;
}
.box18 .img{
    width: calc(40% -100px);
    margin-right: 100px;
}
.box18 > div:last-of-type{
    width: 60%;
    position: relative;
}
.box18 .img1{
    position: absolute;
    top: -80%;
    right: -8%;
    z-index: -1;
    max-width: 330px;
    width: 80%;
}
.box18 h5{
    font-weight: 700;
    font-size: 20px;
}
.box18 h5 span{
    display: block;
    width: 30px;
    height: 3px;
    margin-top: 5px;
    background-color: var(--color-blue);
}
.box18 .text-box{position: relative;}
.box18 .text-box p{
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    margin-top: 35px;
    line-height: 1.5;
}
.box19{position: relative;}
.actioin_title {background-color: #f6f6f6; padding: 80px 0;}
.actioin_title > div{
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
    padding: 0 30px;
}
.actioin_title h4{
    font-size: 56px;
    font-weight: bold;
    color: #FF6976;
}
.actioin_title h4 span{
    display: block;
    font-size: 24px;
    color: #E59607;
}
.actioin_title p{
    font-size: 16px;
    line-height: 1.5;
    margin-top: 30px;
    max-width: 580px;
}
.actioin_title .img1{
    position: absolute;
    right: 25%; top: 50px;
    max-width: 575px;
    z-index: 1;
}
.ectioin-bg{
    position: absolute;
    right: 0;
    top: 0;
    max-width: 680px;
    width: 45%;
    min-width: 430px;
}

.box20{margin-top: 400px;}
.box20 h4{
    font-size: 28px;
    font-weight: bold;
    color: var(--color-green);
    text-align: center;
    padding: 0 30px;
}
.box20 p{
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin: 30px 0;
    padding: 0 30px;
}
.box20 > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 30px;
}
.box20 > ul li{
    width: 32%;
    margin-bottom: 15px;
}
.box21{
    display: flex; align-items: center;
    justify-content: space-between;
    max-width: 1250px; margin: 0 auto;
    padding: 0 30px;
}
.box21 > img{width: 35%; max-width: 460px;}
.box21 > div{width: 65%;}
.box21 h3{color: var(--color-blue); font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 85px;}
.box22{
    display: flex; align-items: center;
    flex-wrap: wrap;
    width: 100%; padding: 0 50px;
}
.box22 > div{width: 50%; display: flex; align-items: center; line-height: 1.5;}
.box22 > div:nth-of-type(1), .box22 > div:nth-of-type(2){margin-bottom: 80px;}
.box22 > div img{max-width: 95px; width: 35%; margin-right: 35px;}
.box23{background-color: #F6F6F6; margin-top: 60px;}
.box23 > div{display: flex; align-items: flex-start; justify-content: space-around; max-width: 1250px; margin: 0 auto; padding: 60px 0;}
.box23 > div > div{width: 30%;}
.box23 h4{background-color: #ffffff; box-shadow: 0 5px 10px rgba(0,0,0,0.15); color: var(--color-blue); font-size: 20px; font-weight: bold; border-radius: 40px; width: fit-content; padding: 5px 15px; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); margin: 0;}
.box23 .img_wrap{position: relative; text-align: center;}
.box23 img{max-width: 280px;}
.box23 p{line-height: 1.5; margin-top: 35px; text-align: center;}

.box24{padding: 0 30px;}
.box24 h3{color: var(--color-green); font-size: 20px; font-weight: bold; text-align: center; margin-top: 90px;}
.box24 p{margin-top: 20px; text-align: center; list-style: 1.5;}
.box24 > div{display: flex; justify-content: space-between; align-items: flex-start; max-width: 900px; margin: 0 auto; margin-top: 60px;}
.box24 > div > div{width: 16%; text-align: center;}
.box24 > div > div img{max-width: 95px;}
.box24 > div > div p{margin-top: 20px;}
.img3{display: block; width: calc(100% - 60px); max-width: 520px; margin: 50px auto;}
.box25{border: 1px solid var(--border-color); border-radius: 10px; max-width: 1250px; width: calc(100% - 60px); margin: 0 auto; padding: 35px 80px; display: flex; align-items: flex-start; justify-content: space-between;}
.box25 > div{width: 28%; text-align: center;}
.box25 > div img{max-width: 280px;}
.box25 > div h4{font-size: 18px; margin: 30px 0 20px; font-weight: 600;}
.box25 > div p{line-height: 1.5;}


@media screen and (max-width: 1660px) {
    .actioin_title .img1{
        right: 20%; 
        max-width: 500px;
    }
}
@media screen and (max-width: 1230px) {
    .actioin_title .img1{
        right: 18%; 
        max-width: 450px;
    }
    .actioin_title > div{margin: 0; width: 45%;}
    .actioin_title h4{font-size: 50px;}
    .actioin_title h4 span{font-size: 20px;}
    .box20{margin-top: 320px;}
}

@media screen and (max-width: 950px) {
    .box1{padding: 50px 0;}
    .box2{padding: 0 30px;}
    .box3 {position: initial; left: auto; top: auto; transform: translateX(0); padding: 10px 0; display: flex; margin-left: 30px; cursor: pointer;}
    .graphene_cont .box3 > div{position: initial; left: auto; right: auto; top: auto; bottom: auto; transform: translate(0,0); margin-right: 15px; width: 200px; height: 200px;}
    .box3 > div p:first-of-type{font-size: 16px;}
    .box3 > div p:last-of-type{font-size: 14px;}

    .box18{padding: 100px 30px;}
    .box18 .img1{display: none;}

    .actioin_title{padding: 40px 0;}
    .actioin_title .img1{
        right: 15%; 
        max-width: 400px;
    }
    .actioin_title > div{margin: 0; width: 45%;}
    .actioin_title h4{font-size: 46px;}
    .actioin_title h4 span{font-size: 16px;}
    .actioin_title p{font-size: 14px;}
    .box20{margin-top: 300px;}

    .box21 h3{margin-bottom: 40px;}
    .box25{padding: 50px;}

    .box21{flex-direction: column;}
    .box21 > img{max-width: 520px; width: 100%;}
    .box21 h3{margin: 20px 0 40px;}
    .box21 > div{width: 100%;}
   
}


@media screen and (max-width: 805px) {
    .tab_graphene ul li, .tab_cosmetic ul li{margin: 0 30px;}

}
@media screen and (max-width: 768px) {
    h4{margin: 40px auto; font-size: 26px; min-width: 150px;}
    .top-title{height: 260px;}

    .title > h4{font-size: 16px;}
    .title > p{font-size: 26px;}
    .title > p br{display: none;}

    .cosmetic-content .logo img{max-width: 300px;}

    .box6 .box7{padding: 30px;}
    .tab_graphene, .tab_cosmetic {margin: 20px 0 60px;}
    .box7 .declaration{justify-content: center; flex-wrap: wrap;}
    .box7 .declaration .item{width: calc(33.333% - 6.666px); margin-right: 10px; margin-bottom: 20px;}
    .box7 .declaration .item:nth-of-type(3){margin-right: 0;}
    .box4{margin: 35px auto;}
    .box4 h5, .box2 h5{font-size: 20px;}
    .box4 > p{width: 80%;}
    .box4 .img .pc{display: none;}
    .box4 .img .mobile{display: block; width: 85%; margin: 0 auto;}

    .box8 p{width: 100%;}
    .box8 .img{width: 85%;}
    .box9{flex-direction: column;}
    .box8 h5{font-size: 16px;}
    .box9 > div{width: 100%; padding: 20px; margin-bottom: 20px;}
    .box8{padding: 60px 0;}

    .mask-wrap{flex-direction: column; width: 100%; justify-content: center;}
    .box14 > div{flex-direction: column;}
    .box14 .text a{padding: 10px 25px; font-size: 16px;}
    .box14 .img1{width: 75%;}
    .box14 .text{width: 100%; margin-top: 30px; text-align: center;}

    .box14 .img2{width: 100%; margin-top: 25px;}
    .box14 .img2 .pc{display: none;}
    .box14 .img2 .mobile{display: block;}
    
    .box10 .img{max-width: 320px;}
    .box16 li p{font-size: 16px;}
    .box16 li p span{font-size: 12px;}
    .box15 p:first-of-type{font-size: 28px;}

    .box17 p:nth-child(1){font-size: 30px;}
    .box17 p:nth-child(3){font-size: 14px;}
    .box18{flex-direction: column;}
    .box18 .img{margin-right: 0; width: 65%;}
    .box18 > div:last-of-type{width: 100%; text-align: center; margin-top: 20px;}
    .box18 h5 span{margin: 5px auto 0;}
    .box18 .text-box p{text-align: center; font-size: 14px;}
    .box18 .text-box br{display: none;}

    .actioin_title{
        display: flex; 
        flex-direction: column-reverse; 
        flex-wrap: wrap;
        margin-top: 150px;
        padding: 300px 0 50px;

    }
    .actioin_title > div{
        width: 100%;
        text-align: center;
    }
    .actioin_title p{max-width: 100%; font-size: 14px;}
    .actioin_title .img1{    
        width: 70%;
        max-width: 70%;
        transform: translate(50% , -35%);
        right: 50%;
        margin: 0 auto;
    }
    .actioin_title h4{font-size: 36px;}
    .box20{margin-top: 35px;}
    .box20 h4{font-size: 24px;}
    .box20 p{font-size: 14px;}
    .box20 p br{display: none;}
    .ectioin-bg{min-width: 65%;}

    .box22{padding: 0;}
    .box22 > div p{font-size: 14px; width: 70%; padding-right: 5px;}
    .box22 > div:nth-of-type(1), .box22 > div:nth-of-type(2){margin-bottom: 40px;}
    .box22 > div p br{display: none;}
    .box22 > div img{margin-right: 15px; width: 30%;}
    .box23 h4{font-size: 18px;}
    .box25 > div h4{font-size: 16px;}
    .box23 p, .box25 > div p{font-size: 14px;}

    .box25{padding: 20px; flex-direction: column;}
    .box25 > div{display: flex; align-items: center; width: 100%; margin-bottom: 20px;}
    .box25 > div:last-of-type{margin-bottom: 0;}
    .box25 > div img{width: 30%;}
    .box25 > div > div{width: 70%; padding-left: 15px; text-align: left;}
    .box25 > div h4{margin: 0 0 15px;}
}
@media screen and (max-width: 645px) {
    .tab_graphene ul li, .tab_cosmetic ul li{margin: 0 5px; padding: 0 10px;}
    .box6 > div{flex-direction: column;}
    .box6 .img{width: 50%; margin-right: 0; margin-bottom: 20px;}
    .box5{flex-direction: column; margin-top: 60px;}
    .box5 > div{padding: 20px 10px; width: 100%;}
    .box5 > div > p:first-of-type{font-size: 16px;}
    .box5 span{bottom: 0; top: auto; left: 50%; transform: translate(-50% , 0); width: 50px; height: 2px;}

    .box10 h5 img{max-width: 160px;}
    .box10 .img {max-width: 230px;}
    .box15 p:first-of-type{font-size: 24px;}
    .box16{flex-wrap: wrap; padding: 20px 10px; border-radius: 75px;}
    .box16 li{margin: 0 5px 10px; min-width: 115px;}
    .box16 li p{font-size: 14px;}

    .actioin_title{padding: 260px 0 50px;}
    .box20 h4{font-size: 20px;}
}
@media screen and (max-width: 560px) {
    h4{font-size: 20px; margin: 20px auto;}
    .cosmetic-content .img-wrap{flex-direction: column; padding: 0 30px;}
    .cosmetic-content .img-wrap img{width: 100%; margin-bottom: 25px;}

    .cosmetic-content .logo{margin-bottom: 35px;}
    .cosmetic-content .logo img{max-width: 200px;}
    .box20 > ul li {width: 49%;}

    .box23 h4{font-size: 16px;}
    .box23 > div{padding: 30px 0;}
    .box24 h3{margin-top:50px}
}
@media screen and (max-width: 500px) {
    .top-title{height: 200px;}
    .top-title h3{font-size: 28px;}
    .title > p{font-size: 20px;}
    .box7 > p{font-size: 18px;}
    .box1 .img{min-width: 80%; width: 80%;}

    .box14 .img1{width: 75%;}
    .box14 .text{width: 100%; margin-top: 30px;}

    .box4 > p{width: 100%;}
    .box4 .img .mobile{width: 100%;}

    .box16 li{margin: 0 5px 10px; min-width: 80px;}

    .actioin_title{padding: 180px 0 35px; margin-top: 80px;}
    .actioin_title .img1{transform: translate(50%,-50%);}

    .box22 > div{width: 100%; margin-bottom: 40px;}
    .box22 > div:last-of-type{margin-bottom: 0;}
    .box23 > div{flex-direction: column; padding: 30px;}

    .box23 > div > div{display: flex; align-items: center; margin-bottom: 40px; width: 100%;}
    .box23 > div > div:last-of-type{margin-bottom: 0;}
    .box23 .img_wrap{width: 40%;}
    .box23 p{margin-top: 0; width: 60%; text-align: left; padding-left: 15px;}
    .box22 > div img{width: 25%;}

    .box24 > div > div{width: 20%;}

    .box21 h3, .box24 h3{font-size: 18px;}

}