@charset "utf-8";


main{background: url("./img/bg01.png") top center no-repeat;}


.section{padding: 12rem 0 13rem;}

body.main .sec-tit{position: relative; margin-bottom: 6rem; text-align: center;}
body.main .sec-tit:after{position: absolute; left: 50%; bottom: -2.7rem; transform: translateX(-50%); display: block; content: ""; height: 0.3rem; width: 3rem; background: #222;}
body.main .sec-tit .tit{margin-bottom: 2rem; font-size:clamp(3.4rem, 6vw, 4.4rem); font-family: 'NanumMyeongjoExtraBold'; color: #222}
body.main .sec-tit .sub{line-height: 1.5;font-size:clamp(1.8rem, 3vw, 2rem);  font-family: 'NanumMyeongjoBold'; color: #444;}

body.main #visual{position: relative; height:80rem;}
body.main #visual .bg{position: relative; height:75rem; max-width: 192rem; margin: 0 auto}
body.main #visual .bg:before{position: absolute; top: 2rem; background: url("./img/img-product.png") center top no-repeat;  background-size: 22%; content: ""; display: block; width: 100%; height:75rem; z-index: 1;}
body.main #visual .bg:after{position: absolute; bottom: 0rem; background: url("./img/img-bg.png") center bottom no-repeat; background-size: auto 100%; content: ""; display: block; width: 100%; height:18rem;}

body.main #visual .txt-area{margin-top: -67rem; text-align: center; z-index: 1; width: 100%;}
body.main #visual .txt-area p{position: relative; z-index: 1; color: #222; line-height: 1.3;}
body.main #visual .txt-area p span{color: #880f2c;}
body.main #visual .txt-area p.txt-top{font-size:clamp(2.6rem, 7vw, 5.4rem); font-family: 'NanumMyeongjoBold';}
body.main #visual .txt-area p.txt-tit{font-size:clamp(7rem, 18vw, 20rem); font-family: 'NanumMyeongjoExtraBold'; margin: 1rem 0;}
body.main #visual .txt-area p.txt-tit:before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; width: 100%; height: 0.1rem; background:#222;}
body.main #visual .txt-area p.txt-btm{font-size:clamp(2rem, 4vw, 3rem); font-family: 'NanumMyeongjoBold';}

body.main #info{position: relative;}
body.main #info:after{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: block; content: ""; width: 128rem; height: 0.5rem; background:#f5f5f5;}
body.main #info .inner{width: 128rem; padding: 0; margin: 0 auto}
body.main #info .area{text-align: center;}
body.main #info .area > p{margin-bottom: 2rem; font-size:clamp(2rem, 4vw, 2.8rem); font-weight: 600; margin-bottom: 2rem;}
body.main #info .area ul li{width: 30%;}
body.main #info .area ul li .img-area{position: relative; width: 100%; padding-top: 50%; background: #444; border-radius: 0.5rem; }
body.main #info .area ul li .img-area img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 90%;}
body.main #info .area ul li .txt-area p:first-of-type{margin: 2rem 0 1.5rem; font-weight: 600; font-size:clamp(2rem, 3.5vw, 2.2rem);}
body.main #info .area ul li .txt-area p:last-of-type{line-height: 1.5;}
body.main #info .area ul li .txt-area p span{color: #880f2c;}

body.main #table-area{background: #fff;}
body.main #table-area .inner{width: 128rem; padding: 0; margin: 0 auto}
body.main #table-area .sec-tit{text-align: left}
body.main #table-area .sec-tit:after{left: 0; transform: unset;}
body.main #table-area .area{}
body.main #table-area .area table{}
body.main #table-area .area table th,
body.main #table-area .area table td{padding: 1.5rem 0.5rem; text-align: center; border-right: 0.1rem solid #ddd; border-bottom: 0.1rem solid #ddd;  font-family: 'NanumMyeongjoBold'; }
body.main #table-area .area table thead{background: #f5f5f5;}
body.main #table-area .area table thead th:nth-child(4){background: #880f2c; color: #fff; border-right: 0; font-family: 'NanumMyeongjoExtraBold';}
body.main #table-area .area table tbody{}
body.main #table-area .area table tbody td:last-of-type{border-right: 0; background: rgba(136, 15, 44, 0.05); color: #880f2c; font-family: 'NanumMyeongjoExtraBold';}
body.main #table-area .table-left{display: none;}

body.main #patents{background: url("./img/bg02.png") center center no-repeat; background-size: cover}
body.main #patents .area{position: relative;}
body.main #patents .area .img-area{width: 30rem; margin: 0 auto; box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}
body.main #patents .area .txt-box{transform: translateX(-50%); width: max-content; padding: 1rem 2rem; box-sizing: border-box; background: #fff;  box-shadow: 3px 3px 3px rgba(0,0,0,0.2); border-radius: 10rem; font-size: 2rem; font-family: 'NanumMyeongjoBold';}
body.main #patents .area .txt-box.box1{margin-top: -34rem;  margin-left: 43% ;}
body.main #patents .area .txt-box.box2{margin-top: 5rem ; margin-left: 60% ;}
body.main #patents .area .txt-box.box3{margin-top: 5rem ;margin-left: 41% ;}
body.main #patents .area .txt-box.box4{margin-top: 5rem ;margin-left: 57% ;}

body.main #contact{position: relative; background: #fff;}
body.main #contact:before{position: absolute; top: 0; right:0; display: block; content: ""; width: 42%; height: 100%; background: #f5f5f5;}
body.main #contact .inner{position: relative; width: 50rem; margin: 0 auto; padding: 0; z-index: 1;}
body.main #contact .sec-tit{margin-bottom: 2rem;}
body.main #contact .sec-tit:after{display: none}
body.main #contact .area{}
body.main #contact .area > div{position: relative; border: 0.1rem solid #ddd; background: #fff; border-radius: 0.5rem; overflow: hidden; margin-bottom: 1rem; box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}
body.main #contact .area div label{position: absolute; top: 0; left: 0; display: block; width: 6rem; height: 6rem; background: #f5f5f5; text-align: center;}
body.main #contact .area div label i{line-height: 6rem; color: #666; font-size: 2rem;}
body.main #contact .area div input{height: 6rem; line-height: 6rem; padding: 0 6rem 0rem 7rem; box-sizing: border-box; width: 100%; font-size: 1.6rem; font-family: 'NanumMyeongjoBold';}
body.main #contact .area div span.cnt_length{margin-left: -5rem; font-size: 1.2rem;}
body.main #contact .area div.memo{}
body.main #contact .area div.memo label{height: 100%;}
body.main #contact .area div.memo textarea{width: 100%; height: 15rem; padding: 2rem 1rem 2rem 7rem;}
body.main #contact .area ul.agree-area li{margin-bottom: 1rem; font-family: 'NanumMyeongjoBold';}
body.main #contact .area ul.agree-area li:first-child{margin: 0.5rem 0 1.5rem;}
body.main #contact .write-footer{}
body.main #contact .write-footer button.btn{width: 100%; height: 6rem; font-family: 'NanumMyeongjoExtraBold';}
body.main #contact .area div.g-recaptcha{background: transparent; padding: 0; border: 0;}

@media screen and (max-width:1365px){
    /* 노트북 */

    main{background-size: auto 140vh;}
    body.main #visual{height: auto}
    body.main #visual .bg{height: 75vh;}
    body.main #visual .bg:before{height: 75vh;}
    body.main #visual .bg:after{}
    body.main #visual .txt-area{margin-top: -40%;}

    body.main #info{}
    body.main #info:after{width: 100%;}
    body.main #info .inner{width: 100%; padding: 0 4%; box-sizing: border-box;}

    body.main #table-area .inner{width: 100%; padding: 0 4%; box-sizing: border-box;}
}

@media screen and (max-width:1279px){
    /* 노트북 */
    body.main #visual{padding:10rem 0; }
    body.main #visual .bg{height: 60vh;}
    body.main #visual .bg:before{height: 60vh; background-size: 20%;}
    body.main #visual .bg:after{background-size: 40%;}

}

@media screen and (max-width:1203px){
    /* wide tablet (breakpoint : 1023px) */

    body.main #visual .bg{height: 50vh;}
    body.main #visual .bg:before{height: 50vh;}
    body.main #visual .txt-area{margin-top: -30%;}

    body.main #info{padding-top: 5rem;}



}
@media screen and (max-width:1023px){
    body.main #table-area .inner{position: relative;}
    body.main #table-area .area{position: relative; overflow-x: scroll; white-space: nowrap;}
    body.main #table-area .area::-webkit-scrollbar {
        display:block;
        height: 8px; /* 스크롤바 두께 (가로 스크롤이므로 height) */
    }

    body.main #table-area .area::-webkit-scrollbar-track {
        background: #f1f1f1; /* 트랙 배경 */
        border-radius: 4px;
    }

    body.main #table-area .area::-webkit-scrollbar-thumb {
        background: #aaa; /* 스크롤바 손잡이 */
        border-radius: 4px;
    }

    body.main #table-area .area::-webkit-scrollbar-thumb:hover {
        background: #777;
    }
    body.main #table-area .area table{min-width: 94rem;}
    body.main #table-area .area table th:first-of-type{}

}

@media screen and (max-width:839px){
    body.main #visual{padding-top: 5vh;}
    body.main #visual .bg{height: 50vh;}
    body.main #visual .bg:before{height: 50vh; background-size: auto 100%;}
    body.main #visual .bg:after{background-size: 70%; bottom: -12rem;}
    body.main #visual .txt-area{margin-top: -40%;}
    body.main #info{padding-top: 5rem;}

    body.main #table-area .area table th,
    body.main #table-area .area table td{font-size: 1.6rem;}

    body.main #info .area ul{flex-wrap: wrap}
    body.main #info .area ul li{width: 100%; margin-top: 3rem;}
    body.main #info .area ul li .img-area img{height: 60%;}
}

@media screen and (max-width: 750px) {
    /* 모바일 전환 */
    body.main #visual .txt-area{margin-top: -59%;}
    body.main #visual .bg:after{display: none;}

    body.main #patents .area .img-area{width: 80%; min-width: 26rem; max-width: 30rem;}

    body.main #patents .area .txt-box{font-size: 1.4rem;}

    body.main #contact .inner{width: 100%;  max-width: 50rem; padding: 0 4%; box-sizing: border-box}
}

@media screen and (max-width: 510px) {  /* 소형폰 */

    body.main #patents .area .txt-box{text-align: center; transform: translateX(0); width: 100%; }
    body.main #patents .area .txt-box.box1{margin-top: -37rem; margin-left: 0;}
    body.main #patents .area .txt-box.box2{margin-left: 0;}
    body.main #patents .area .txt-box.box3{margin-left: 0;}
    body.main #patents .area .txt-box.box4{margin-left: 0;}
}