header{position: absolute; background-color: #fff; width: 100%; z-index: 9999;}
header .h-bg{width: 100%; height: 180px; position: absolute; top: 100%; left: 0; background-color: #f7f7f7; display: none;}
header .h-in{display: flex; justify-content: space-between; align-items: center;max-width: 1380px; margin: 0 auto; width: 90%;} 
header .h-in h1 a img{width: 90%;}
header .h-in nav{}
header .h-in nav > ul{ display: flex;}
header .h-in nav > ul > li{display: block; position: relative; /*padding: 50px 30px;*/}
header .h-in nav > ul > li:last-child{margin-right: 0;}
/* header .h-in nav > ul > li:nth-child(2) > a{width: 177px; text-align: center;} */
header .h-in nav > ul > li > a{ font-size: 2rem; display: block;}
header .h-in nav > ul > li::after{content: ""; display: block; width: 0; height: 3px; background-color: #0a0454; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
header .h-in nav > ul > li:hover::after{width: 100%; transition: 0.5s;}
header .h-in nav > ul > li > a{padding: 50px 30px;}
header .h-in nav > ul > li .depth{position: absolute; top: 100%; font-size: 1.5rem; color: #444; width: 100%; background-color: #f7f7f7; display: none; z-index: 9999; padding: 30px;}
header .h-in nav > ul > li .depth > a{ margin-bottom: 30px; font-size: 1.8rem; font-weight: 500;}
header .h-in nav > ul > li .depth ul li{margin-bottom: 30px; position: relative;}
header .h-in nav > ul > li .depth ul li::before{content: ""; display: inline-block; width: 5px; height: 5px; position: absolute; top: 0; left: -6px; background-color: #0a0454; border-radius: 50%; opacity: 0; transition: 0.3s;}
header .h-in nav > ul > li .depth ul li:hover::before{opacity: 1;}
header .h-in nav > ul > li .depth ul li:last-child{margin-bottom: 0;}
header .h-in nav > ul > li:nth-child(2) .depth{width: 155px;}
header .h-in .allmenu{width: 30px; height: 18px; position: relative; cursor: pointer;}
header .h-in .allmenu span{position: absolute; top: 0; left: 0; width: 100%; background-color: #000; height: 2px;}
header .h-in .allmenu span:nth-child(2){top: 10px;}
header .h-in .allmenu span:last-child{top: 20px;}

header .pc_allnav{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 999; display: flex; justify-content: center; display: none;}
/* header .pc_allnav.on{display: block; transition: 0.3s;} */
header .pc_allnav button{border: none; outline: none; background-color: #0a0454; width: 80px; height: 80px; background-image: url('/img/closebtn.png'); background-repeat: no-repeat; background-position: center; text-indent: -9999px; display: inline-block; position: absolute; top: 3%; right: 2%; z-index: 1;}
header .pc_allnav .allnav_in{flex: 1;}
header .pc_allnav .allnav_in .dep01{display: flex; height: 100%;}
header .pc_allnav .allnav_in .dep01 > li{border-right: 1px solid #e5e5e5; flex: 1; display: flex; padding: 330px 0; flex-direction: column; position: relative; width: 20%;}
header .pc_allnav .allnav_in .dep01 > li:last-child{border-right: none;}
header .pc_allnav .allnav_in .dep01 > li > a{font-size: 3.2rem; font-weight: 700; margin-bottom: 70px;  padding: 0 50px; position: relative;}
header .pc_allnav .allnav_in .dep01 > li > a::after{content: ""; display: block; width: 0; height: 3px; background-color: #0a0454; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);}
header .pc_allnav .allnav_in .dep01 li:hover > a::after{width: 80%; transition: 0.5s;}
/* header .pc_allnav .allnav_in .dep01 > li .dep02 li{margin-bottom: 33px;} */
header .pc_allnav .allnav_in .dep01 > li .dep02 li a{font-size: 2rem; color: #444;  line-height: 1.3; position: relative; display: block; padding: 20px 50px; transition: 0.5s;}
header .pc_allnav .allnav_in .dep01 > li .dep02 li a::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #0a0454; z-index: -1; transition: 0.5s;}
header .pc_allnav .allnav_in .dep01 > li .dep02 li a:hover{color: #fff;}
header .pc_allnav .allnav_in .dep01 > li .dep02 li a:hover::before{width: 100%;}

header .lang{position: absolute; top: 10px; right: 13.7%; display: flex; align-items: center; font-size: 1.6rem; }
header .lang::before{content: ""; display: inline-block; width: 20px; height: 20px; background: url('/img/lang-icon.png') no-repeat; margin-right: 10px; vertical-align: middle;}
header .lang li:first-child::after{content: ""; display: inline-block; width: 1px; height: 12px; background-color: #000; margin-left: 5px; margin-right: 7px;}

@media screen and (max-width: 1030px){
    header .h-in{width: 95%;}
    header .h-in h1 a img{width: 88%;}
    header .h-in nav > ul > li{margin-right: 0; }
    header .h-in nav > ul > li > a{font-size: 1.6rem; padding: 50px 22px;}

}

@media screen and (max-width: 768px){
    header .h-in{width: 90%; padding: 3% 0;}
    header .h-in h1 a img{width: 46%;}
    header .lang{font-size: 1.4rem; right: 15%; top: 50%; transform: translateY(-50%);}
    header .lang::before{margin-right: 6px;}
    header nav{display: none;}
}

/* 모바일메뉴 */
header .m-allmenu{width: 25px; height: 18px; position: relative; cursor: pointer; }
header .m-allmenu span{position: absolute; top: 0; left: 0; width: 100%; background-color: #000; height: 2px;}
header .m-allmenu span:nth-child(2){top: 8px;}
header .m-allmenu span:last-child{top: 16px;}

header .m-nav{position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; background-color: #f7f7f7; z-index: 9999; transform: translateX(100%); transition: 0.5s;}
header .m-nav.on{transform: translateX(0);}
/* header .m-nav .m-navin {padding: 30px;} */
header .m-nav .m-navin .m-top {padding: 4%; background-color: #fff; display: flex;justify-content: space-between; align-items: center;}
header .m-nav .m-navin .m-top h1{width: 40%;}
header .m-nav .m-navin > ul{padding: 10% 7%;}
header .m-nav .m-navin > ul > li{margin-bottom: 35px; position: relative;}
header .m-nav .m-navin > ul > li > span{font-size: 1.8rem; display: block; cursor: pointer; position: relative; font-weight: 600;}
header .m-nav .m-navin > ul > li > span img{position: absolute; right: 0; width: 3%; top: 3px; transition: 0.3s; transform: rotate(0);}
header .m-nav .m-navin > ul > li > span img.on{transform: rotate(90deg);}
/* header .m-nav .m-navin > ul > li span::after{content: ""; display: inline-block; width: 26px; height: 18px; background: url('/img/ico_menu_on.png') no-repeat; vertical-align: middle; position: absolute; top: 5px; right: 0;     background-size: 50%;} */
header .m-nav .m-navin > ul > li .m-depth{padding: 15px 0; display: none;}
header .m-nav .m-navin > ul > li .m-depth li a{font-size: 1.6rem; padding: 3% 0; display: block;}
header .m-nav .m-navin > ul > li .m-depth li a:hover{color: #0a0454;}
header .m-nav .m-navin .m-top .m-closebtn{position: absolute; top: 0; right: 0; width: 25px; height: 18px; position: relative; cursor: pointer;}
header .m-nav .m-navin .m-top .m-closebtn span{position: absolute; top: 8px; left: 0; width: 100%; background-color: #000; height: 2px; transform: rotate(45deg);}
header .m-nav .m-navin .m-top .m-closebtn span:last-child{transform: rotate(-45deg);}

/* 메인비쥬얼 */
/* .main {background: url('/img/chemport_main.jpg') no-repeat; background-position: center; background-size: cover; height: 900px; position: relative;} */
.main {position: relative; height: 100vh; overflow: hidden;}
.main .videobox{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
.main video{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto;}
.main .maintxt{position: absolute; top: 56%; left: 17%; transform: translateY(-50%); color: #fff;}
.main .maintxt h2{font-size: 7.1rem; line-height: 1.2;}
.main .maintxt p{font-size: 2.5rem; line-height: 1.5; margin: 40px 0 68px;}

.ex-btn{font-size: 2rem; color: #0a0454; background-color: #fff; border-radius: 100px; width: 230px; height: 70px; line-height: 70px; position: relative; text-align: center; display: block; overflow: hidden; transition: 0.5s; box-sizing: border-box;}
.ex-btn::before{content: ""; display: block; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; background-color: #0a0454; border-radius: 100px; transform: scaleX(0); transition: transform 0.5s;  transform-origin: 100% 0;}
.ex-btn:hover::before{transform: scaleX(1); transform-origin: 0 0;}
.ex-btn span{position: relative; display: block; transition: all 0.5s; letter-spacing: 0.1em;}
.ex-btn span::after{content: "Explore more"; position: absolute; left: 0; right: 0; top: 100%; line-height: 70px; color: #fff; transition: 0.3s; box-sizing: border-box;}
.ex-btn:hover span{transform: translateY(-100%); font-weight: 300;}
/* .ex-btn:hover{background-color: #0a0454; color: #fff;} */

@media screen and (max-width: 1330px){
    /* .main .maintxt{left: 5%;}
    .main .maintxt h2{font-size: 5vw;}
    .main .maintxt p{font-size: 3vw; margin: 28px 0 28px;} */
}

@media screen and (max-width: 1150px){
    .main .maintxt h2{font-size: 5vw;}
    .main .maintxt p{font-size: 3vw; }
}

@media screen and (max-width: 768px){
    .main{height: 70vh;}
    .main .maintxt{left: 5%;}
    .main .maintxt p{margin: 25px 0 40px;}
    .ex-btn{font-size: 2.5vw; width: 150px; height: 50px; line-height: 50px;}
    .ex-btn span::after{line-height: 50px;}
}

@media screen and (max-width: 500px){
    .main .maintxt p{margin: 20px 0 27px;}
    .ex-btn{font-size: 2.5vw; width: 100px; height: 35px; line-height: 35px;}
    .ex-btn span::after{line-height: 35px;}
}

/* sec01 */
.sec01{text-align: center;}
.sec01 .sec01bg{height: 50vh; background-color: #eee; margin-top: -27%;} 
.sec01 .wrap{padding: 100px 0; max-width: 1150px;}
.sec01 .wrap .title h2{font-size: 5rem;}
.sec01 .wrap .title p{font-size: 2rem; color: #666; margin: 20px 0 25px; line-height: 1.6;} 

.ex-btn02{background-color: #fff; color: #0a0454; border: 1px solid #0a0454; margin: 0 auto; box-sizing: border-box;}
.ex-btn02:hover{background-color: #0a0454; color: #fff;}

.sec01 .wrap .what_list{display: flex; margin-top: 70px;}
.sec01 .wrap .what_list li{flex: 1; margin-right: 1%; position: relative; cursor: pointer; box-shadow: 1px 1px 30px -3px #ccc}
.sec01 .wrap .what_list li a{display: block;}
.sec01 .wrap .what_list li::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('/img/product_01_over.jpg') no-repeat; opacity: 0; z-index: 1; transition: 0.3s;}
.sec01 .wrap .what_list li:nth-child(2):before{background-image: url('/img/product_02_over.png');}
.sec01 .wrap .what_list li:last-child:before{background-image: url('/img/product_03_over.jpg');}
.sec01 .wrap .what_list li:hover::before{opacity: 1; transform: scale(1.1);}
.sec01 .wrap .what_list li:hover .whattxt{color: #fff; z-index: 2;}
.sec01 .wrap .what_list li:hover .whattxt::after{display: none;}
.sec01 .wrap .what_list li:hover .whattxt span{color: #fff;}
.sec01 .wrap .what_list li:hover::after{background-color: #fff; z-index: 2;}
.sec01 .wrap .what_list li:hover .overtxt{display: block; z-index: 2;}
.sec01 .wrap .what_list li .imgbox{background: url('/img/whatimg01.png') no-repeat; background-size: cover;}
.sec01 .wrap .what_list li:nth-child(2) .imgbox{background-image: url('/img/whatimg02.png');}
.sec01 .wrap .what_list li:last-child .imgbox{background-image: url('/img/whatimg03.png');}
.sec01 .wrap .what_list li:last-child .whattxt::after{display: none;}
.sec01 .wrap .what_list li .imgbox::after{content: ""; display: block; padding-bottom: calc(600/420 * 100%);}
.sec01 .wrap .what_list li:last-child{margin-right: 0;}
.sec01 .wrap .what_list li .whattxt{text-align: left; position: absolute; top: 25%; left: 0; width: 100%; padding: 0 12%;}
.sec01 .wrap .what_list li::after{content: ""; display: block; width: 74%; left: 13%; height: 3px; background-color: #000; position: absolute; bottom: 40%;}
.sec01 .wrap .what_list li .whattxt::after{content: ""; display: block; width: 18px; height: 18px; background: url('/img/whatarrow.png') no-repeat; background-position: center; padding: 10px; border-radius: 50%; background-color: #000;}
.sec01 .wrap .what_list li .whattxt span{font-size: 1.8rem; color: #333;}
.sec01 .wrap .what_list li .whattxt h3{font-size: 3.6rem; margin: 30px 0 80px; }
.sec01 .wrap .what_list li:nth-child(2) .whattxt h3{margin: 60px 0 123px;}
.sec01 .wrap .what_list li:last-child .whattxt h3{margin-top: 60px;}
.sec01 .wrap .what_list li .overtxt{font-size: 2rem; color: #fff; display: none; font-weight: 200; text-align: left;}
.sec01 .wrap .what_list li .overtxt p{line-height: 1.6;}

@media screen and (max-width: 1250px){
    .sec01 .sec01bg{height: 45vh; margin-top: -36%;}
    .sec01 .wrap .what_list li .whattxt h3{font-size: 2rem;}
}

@media screen and (max-width: 900px){
    .sec01 .sec01bg{height: 33vh;}
    .sec01 .wrap .what_list li::after{bottom: 33%;}
}

@media screen and (max-width: 768px){
    .sec01 .sec01bg{height: 46vh; margin-top: -69%;}
    .sec01 .wrap{padding: 25% 0 15%;}
    .sec01 .wrap .title h2{font-size: 6vw;}
    .sec01 .wrap .title p{margin: 20px 0 30px; font-size: 3vw;}

    .sec01 .wrap .what_list{margin-top: 60px; display: block;}
    .sec01 .wrap .what_list li{margin-right: 0; text-align: center;}
    .sec01 .wrap .what_list li::before, .sec01 .wrap .what_list li::after{display: none;}
    .sec01 .wrap .what_list li .imgbox{background-image: url('/img/whatimg01_mob.png');}
    .sec01 .wrap .what_list li:nth-child(2) .imgbox{background-image: url('/img/whatimg02_mob.png');}
    .sec01 .wrap .what_list li:last-child .imgbox{background-image: url('/img/whatimg03_mob.png');}
    .sec01 .wrap .what_list li .imgbox::after{padding-bottom: calc(420/800 * 100%);}
    .sec01 .wrap .what_list li .whattxt{text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0;}
    .sec01 .wrap .what_list li .whattxt::after{display: none;}
    .sec01 .wrap .what_list li .whattxt span{font-size: 1.5rem;}
    .sec01 .wrap .what_list li .whattxt h3{margin: 10px 0; font-size: 1.6rem;}
    .sec01 .wrap .what_list li .whattxt .overtxt::before{content: ""; display: block; width: 50%; height: 3px; background-color: #000; margin: 0 auto; margin-bottom: 10px;}
    .sec01 .wrap .what_list li:nth-child(2) .whattxt h3{margin: 10px 0;}
    .sec01 .wrap .what_list li:last-child .whattxt h3{margin: 10px 0;}
    .sec01 .wrap .what_list li .overtxt{display: block; text-align: center; color: #000; position: relative;}
    .sec01 .wrap .what_list li .overtxt p{font-size: 1.3rem;}
    .sec01 .wrap .what_list li .overtxt p::before{content: ""; display: inline-block; width: 16px; height: 17px; background: url('/img/mo_arrow.png') no-repeat; vertical-align: middle; margin-right: 10px;}

    .sec01 .wrap .what_list li:hover::before{display: none;}
    .sec01 .wrap .what_list li:hover .whattxt{color: #000;}
    .sec01 .wrap .what_list li:hover .whattxt::after{}
    .sec01 .wrap .what_list li:hover .whattxt span{color: #000;}
    .sec01 .wrap .what_list li:hover .overtxt{color: #000;}
}

@media screen and (max-width: 500px){
    .sec01 .sec01bg{height: 46vh; margin-top: -79%;}
    .sec01 .wrap .what_list{margin-top: 40px;}
}

/* sec02 */
/* .sec02 {background: url('/img/sec02-bg.jpg') no-repeat; background-size: cover; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center;} */
.sec02{position: relative;}
.sec02 video{width: 100%; height: 100%; object-fit: cover;}
.sec02 .txt{color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 0 20px;}
.sec02 .txt h2{font-size: 5rem; font-weight: 500;}
.sec02 .txt p{font-size: 2rem; margin: 40px 0 70px; line-height: 1.8;}
.sec02 .txt .ex-btn03{margin: 0 auto;}

@media screen and (max-width: 768px){
    .sec02{height: 55vh; background-position: right;}
    .sec02 .txt h2{font-size: 5vw;}
    .sec02 .txt p{font-size: 3vw; margin: 30px 0 50px;}
}
@media screen and (max-width: 500px){
    .sec02 .txt p{margin: 20px 0 30px;}
}

/* sec03 */
.sec03{background-color: #eee;}
.sec03 .wrap{padding: 100px 0;}
.sec03 .wrap .title{display: flex; align-items: center; margin-bottom: 80px;}
.sec03 .wrap .title h2{font-size: 6rem;}
.sec03 .wrap .title p{font-size: 2rem; color: #666; margin-left: 55px; line-height: 1.3;}
.sec03 ul {display: flex; }
.sec03 ul li{width: 33%; margin-right: 0.5%; cursor: pointer; transition: 0.3s; text-align: center; height: 500px;}
.sec03 ul li .imgbox02{background: url('/img/location_01.jpg') no-repeat; background-size: cover; background-position: center; border-radius: 0 30px 0 30px; height: 360px; position: relative;}
.sec03 ul li .imgbox02::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #0a0454; opacity: 0.7; border-radius: 0 30px 0 30px; transition: 0.3s;}
.sec03 ul li .imgbox02::after{content: ""; display: block; width: 87px; height: 105px; background: url('/img/location_icon_01.png') no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s;}
.sec03 ul li:nth-child(2) .imgbox02::after{background-image: url('/img/location_icon_02.png'); transition: 0.3s;}
.sec03 ul li:last-child .imgbox02::after{background-image: url('/img/location_icon_03.png'); transition: 0.3s;}
.sec03 ul li:first-child .imgbox02::before, .sec03 ul li:last-child .imgbox02::before{border-radius: 30px 0 30px 0;}
.sec03 ul li:nth-child(2) .imgbox02{background-image: url('/img/location_02.jpg');}
.sec03 ul li:last-child .imgbox02{background-image: url('/img/location_03.jpg');}
.sec03 ul li.on{width: 100%; text-align: left;}
.sec03 ul li.on .imgbox02::before, .sec03 ul li.on .imgbox02::after{display: none;}
.sec03 ul li:last-child{margin-right: 0;}
.sec03 ul li:first-child .imgbox02, .sec03 ul li:last-child .imgbox02{border-radius: 30px 0 30px 0;}
.sec03 ul li strong{font-size: 2rem; margin-top: 23px; display: block; position: relative;}
.sec03 ul li .txtover{opacity: 0; transition: 0.3s; text-align: left; }
.sec03 ul li.on .txtover{opacity: 1;}
.sec03 ul li .txtover > p{font-size: 1.6rem; color: #666; line-height: 1.3; margin: 12px 0;}
.sec03 ul li .txtover .number p{font-size: 1.6rem; color: #888; line-height: 1.5;}
.sec03 ul li .txtover .number p span{color: #444;}

.sec03 ul li strong::before{content: ""; display: block; width: 100%; height: 40px; background: linear-gradient(0deg, rgba(218,218,218,0) 0%, rgba(203,200,200,0.5) 100%, rgba(159,159,159,1) 100%); border-radius: 0 30px 0 0; position: absolute; top: 0; z-index: -1; transform: translateY(-23px);}
.sec03 ul li:nth-child(2) strong::before{border-radius: 30px 0 0 0;}

@media screen and (max-width: 768px){
    .sec03 .wrap{padding: 15% 0;}
    .sec03 .wrap .title{display: block; margin-bottom: 40px;}
    .sec03 .wrap .title h2{font-size: 6vw; margin-bottom: 10px;}
    .sec03 .wrap .title p{margin-left: 0; font-size: 3vw;}

    .sec03 ul{display: block;}
    .sec03 ul li{width: 100%; text-align: left; height: auto; margin-bottom: 40px;}
    .sec03 ul li:last-child{margin-bottom: 0;}
    .sec03 ul li strong{font-size: 1.8rem;}
    .sec03 ul li strong::before {transform: translateY(-26px);}
    .sec03 ul li .imgbox02::after, .sec03 ul li .imgbox02::before{display: none;}
    .sec03 ul li .txtover{opacity: 1;}
    .sec03 ul li .txtover > p{font-size: 1.4rem;}
    .sec03 ul li .txtover .number p{font-size: 1.4rem;}
    .sec03 ul li .mob{border-radius: 30px 0 30px 0;}
    .sec03 ul li:nth-child(2) .mob{border-radius: 0 30px 0 30px;}
}


/* footer */
footer{background-color: #0e0e0e; color: #888; font-family: 'Noto Sans KR', sans-serif;} 
footer .wrap{padding: 3% 0;}
footer a{color: #888;}
footer .wrap .f-top{display: flex; justify-content: space-between; border-bottom: 1px solid #888; padding-bottom: 16px; margin-bottom: 35px;}
footer .wrap .f-top .f-list{display: flex;}
footer .wrap .f-top .f-list li{margin-right: 43px;}
footer .wrap .f-top .f-list li:last-child{margin-right: 0;}
footer .wrap .f-top .f-list li a{font-size: 1.7rem;}

footer .wrap .f-bot{font-size: 1.5rem; display: flex; justify-content: space-between;}
footer .wrap .f-bot .bot-list ul{display: flex; flex-wrap: wrap; margin-bottom: 10px;}
footer .wrap .f-bot .bot-list ul:last-child{margin-bottom: 0;}
footer .wrap .f-bot .bot-list ul li::after{content: ""; display: inline-block; width: 1px; height: 10px; background-color: #888; margin: 0 10px;}
footer .wrap .f-bot .bot-list ul li:last-child::after{display: none;}
footer .wrap .f-bot > p{font-weight: 400;}

@media screen and (max-width: 768px){
    footer .wrap{padding: 6% 0;}
    footer .wrap .f-top{display: block;}
    footer .wrap .f-top .f-list{margin-top: 20px;}
    footer .wrap .f-top .f-list li{margin-right: 20px;}
    footer .wrap .f-top .f-list li a{font-size: 1.4rem;}
    footer .wrap .f-bot{display: block; font-size: 1.3rem;}
    footer .wrap .f-bot .bot-list{margin-bottom: 20px;}
    footer .wrap .f-bot .bot-list ul:first-child{display: block; margin-bottom: 20px;}
    footer .wrap .f-bot .bot-list ul:first-child li{margin-bottom: 10px; line-height: 1.3;}
    footer .wrap .f-bot .bot-list ul:first-child li:last-child{margin-bottom: 0;}
    footer .wrap .f-bot .bot-list ul:first-child li::after{display: none;}
    footer .wrap .f-bot .bot-list ul li::after{margin: 0 7px;}
    footer .wrap .f-bot .bot-list ul:last-child li{margin-bottom: 8px;}
}


/* 익스 */
@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    .sec02{justify-content: flex-start;}
}


/* 서브페이지 */
.sub{position: relative; height: 410px;}
.sub .subbg{background: url('/img/product_sub_bg.jpg') no-repeat; background-position: center; width: 100%; height: 500px; position: absolute; top: 0; left: 0;}
.sub dl{color: #fff; position: absolute; top: 240px; left: 0;}
.sub dl dt{font-size: 60px; font-weight: 600; margin-bottom: 15px;}
.sub dl dd{font-family: 'Noto Sans KR', sans-serif; font-size: 22px; font-weight: 300;}
.sub .subtab{position: absolute; top: 100%; width: 100%; border-bottom: 1px solid #ccc;}
.sub .subtab ul{display: flex; text-align: center; align-items: center;}
.sub .subtab ul li{flex: 1; position: relative;}
.sub .subtab ul li.active {background-color: #0a0454; }
.sub .subtab ul li.active a {color: #fff;}
.sub .subtab ul li a{padding: 20px; display: block; font-size: 1.6rem; color: #666;}
/* .sub .subtab ul li:nth-child(2)::before{content: ""; display: inline-block; width: 1px; height: 23px; background-color: #ccc; position: absolute; left: 0;top: 50%;transform: translateY(-50%);} */
.sub .subtab ul li::after{content: ""; display: inline-block; width: 1px; height: 23px; background-color: #ccc; position: absolute; right: 0;top: 50%;transform: translateY(-50%);}
.sub .subtab ul li:last-child::after{display: none;}

.sub_contents{padding: 180px 0;}

@media screen and (max-width: 768px){
    .sub .subbg{height: 250px;}
    .sub dl{top: 140px;}
    .sub dl dt{font-size: 3rem;}
    .sub dl dd{font-size: 1.6rem; line-height: 1.3;}
    .sub .subtab{top: 61%;}
    .sub .subtab ul li a{font-size: 12px;}
}

/* product - api 페이지 */
.api_{background: url('/img/api_bg.png') no-repeat; background-size: cover;}
.sub_contents .api strong{font-size: 42px; line-height: 1.4;}
.sub_contents .api > ul{margin-top: 60px; display: flex; background-color: #f7f7f7; padding: 105px 30px; }
.sub_contents .api > ul > li{flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.sub_contents .api > ul > li:first-child{border-right: 1px solid #e0e0e0; align-self: baseline;}
.sub_contents .api > ul > li:nth-child(2){margin-left: 35px; align-self: baseline;}
.sub_contents .api > ul > li .icon{background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid #8d8d8d; width: 250px; height: 250px;}
.sub_contents .api > ul > li span{display: block; font-size: 30px; color: #888; margin-top: 20px; text-align: center;}
.sub_contents .api > ul > li .list{margin-top: 30px;}
.sub_contents .api > ul > li .list li{font-size: 20px; color: #666; line-height: 1.5; text-indent: -0.5em;}
.sub_contents .api > ul li .list li::before{content: ""; display: inline-block; width: 3px; height: 3px; background-color: #009380; border-radius: 50%; vertical-align: middle; margin-right: 10px; }

@media screen and (max-width: 768px){
    .sub_contents.api_{padding: 0 0 20%;}
    .sub_contents .api strong{font-size: 25px;}
    .sub_contents .api > ul{padding: 70px 20px;}
    .sub_contents .api > ul > li span{font-size: 20px;}
    .sub_contents .api > ul{display: block; margin-top: 30px;}
    .sub_contents .api > ul > li:first-child{border-right: none; border-bottom: 1px solid #e0e0e0; margin-bottom: 50px; padding-bottom: 50px;}
    .sub_contents .api > ul > li:nth-child(2){margin-left: 0;}
    .sub_contents .api > ul > li .list li{font-size: 16px;}
    .sub_contents .api > ul > li .icon{width: 200px; height: 200px;}
}


/* about */
.sub_contents.about_{padding-bottom: 0;}
.sub .subbg.about{background-image: url('/img/sub_visual_01.jpg');}

.about_ .aboutin .flex .wrap{display: flex; padding: 100px 0; }
.about_ .aboutin .flex .wrap.reverse{flex-direction: row-reverse; justify-content: s;}
.about_ .aboutin .flex:first-child .rig{margin-left: 20px; width: 50%;}
.about_ .aboutin .flex:nth-child(2){background-color: #eee;}
/* .about_ .aboutin .flex .wrap .rig img{width: 60%;} */
.about_ .aboutin .flex .wrap .rig strong{display: block; font-size: 2.6rem; margin: 40px 0 33px;}
.about_ .aboutin .flex .wrap .rig  p{font-size: 2rem; color: #666; line-height: 1.5; font-weight: 300; text-align: justify;}
.about_ .aboutin .flex .wrap.reverse .rig{margin-right: 70px; width: 50%;}

@media screen and (max-width: 768px){
    .sub_contents.about_{padding: 0;}
    .about_ .aboutin .flex .wrap{display: block; padding-top: 0; padding-bottom: 15%;}  
    .about_ .aboutin .flex:first-child .rig{margin-left: 0; width: auto;}
    .about_ .aboutin .flex .wrap.reverse .rig{margin-right: 0; width: auto;}
    .about_ .aboutin .flex .wrap .rig strong{margin: 35px 0 20px; font-size: 2rem;}
    .about_ .aboutin .flex .wrap .rig p{font-size: 1.6rem;}
    .about_ .aboutin .flex .wrap .rig p br{display: none;}
}

/* omeaga-3 */
.sub_contents .api.omega > ul{margin-bottom: 40px;}
.sub_contents .api.omega > ul > li:last-child{border-left: 1px solid #e0e0e0;}
.sub_contents .api.omega > ul > li:nth-child(2){margin-left: 0;}
.sub_contents .api.omega > ul > li .list li{font-size: 16px;}
.sub_contents .api.omega > ul > li:first-child .list li:last-child,
.sub_contents .api.omega > ul > li:last-child .list li:last-child
{text-align: left; margin-top: 16px; color: #e60d0d; font-size: 14px; font-weight: 500; width: 100%;}
.sub_contents .api.omega > ul > li:first-child .list li:last-child::before,
.sub_contents .api.omega > ul > li:last-child .list li:last-child::before{display: none;}

.sub_contents .omega .bot{display: flex; align-items: center; justify-content: center;}
.sub_contents .omega .bot .mega-logo{margin-right: 20px;}
.sub_contents .omega .bot .text p{font-size: 18px; color: #444; line-height: 1.5;}


@media screen and (max-width: 768px){
    .sub_contents .api.omega > ul > li .list li{font-size: 15px;}
    .sub_contents .api.omega > ul > li:last-child{border-left: none;}
    .sub_contents .api.omega > ul > li:nth-child(2){border-bottom: 1px solid #e0e0e0; margin-bottom: 50px; padding-bottom: 50px;}

    .sub_contents .omega .bot{display: block;}
    .sub_contents .omega .bot .text p{font-size: 15px; }
    .sub_contents .omega .bot p br{display: none;}
}

/* history */
.history_ .wrap .flex {display: flex;}
.history_ .wrap .flex .date{width: 30%;}
.history_ .wrap .flex .date::before{content: ""; display: block; width: 322px; height: 55px; background: url('/img/history_txt.png') no-repeat; margin-bottom: -24px;}
.history_ .wrap .flex .date p{margin-left: 24%;}
.history_ .wrap .flex .date_list{width: 70%; margin-left: 50px;}
.history_ .wrap .flex .date{font-size: 60px; color: #0a0454; font-weight: 700;}

.history_ .wrap .flex .date_list > li{display: flex; padding: 70px 0; border-bottom: 1px solid #ccc;}
.history_ .wrap .flex .date_list > li:first-child{border-top: 1px solid #ccc;}
.history_ .wrap .flex .date_list > li:last-child{border-bottom: none;}
.history_ .wrap .flex .date_list li span{font-size: 30px; font-weight: 500; width: 13%;}
.history_ .wrap .flex .date_list li ul li{font-size: 18px; color: #666; margin-bottom: 25px;}
.history_ .wrap .flex .date_list li ul li:last-child{margin-bottom: 0;}

@media screen and (max-width: 1050px){
    .history_ .wrap .flex .date::before{background-size: 85%;}
    .history_ .wrap .flex .date_list{margin-left: 100px;}
    .history_ .wrap .flex .date_list li span{width: auto; margin-right: 15px;}
}

@media screen and (max-width: 768px){
    .sub_contents.history_{padding: 0 0 20%;}
    .history_ .wrap .flex{display: block;}
    .history_ .wrap .flex .date{margin-bottom: 25px; display: flex; position: relative; font-size: 45px;}
    .history_ .wrap .flex .date::before{position: absolute; top: -21px; background-size: 80%;}
    .history_ .wrap .flex .date p{margin-left: 0;}
    .history_ .wrap .flex .date_list{margin-left: 0; width: 100%;}
    .history_ .wrap .flex .date_list > li{margin-bottom: 0; padding: 50px 0;}
    .history_ .wrap .flex .date_list > li:first-child{padding-top: 50px;}
    .history_ .wrap .flex:first-child .date_list > li:last-child{margin-bottom: 35px;}
    .history_ .wrap .flex:last-child .date_list > li:last-child{padding-bottom: 0;}
    .history_ .wrap .flex .date_list li span{width: auto; margin-right: 20px; font-size: 25px;}
    .history_ .wrap .flex .date_list li ul li{line-height: 1.3; font-size: 14px; margin-bottom: 15px;}
}


/* tech */
.sub .subbg.tech_sub{background-image: url('/img/sub_visual_03.jpg');}
.sub_contents.tech_{padding: 250px 0 150px;}
.tech{position: relative;}
.tech .flex{display: flex;}
.tech .flex .top{width: 70%; background-color: #eee; padding: 8% 21% 10% 15%; margin-bottom: 12%;}
.tech .flex span{font-size: 120px; color: #d6d6d6; font-weight: 700;}
.tech .flex .tit{margin-left: 50px; margin-top: -40px;}
.tech .flex .tit strong{font-size: 26px;}
.tech .flex .tit p{font-size: 18px; color: #666; margin-top: 20px; line-height: 1.5;}
.tech .flex .tit p em{color: #444; font-weight: 600;}
.tech .flex .imgbox{background: url('/img/tech_img01.png') no-repeat; background-position: center; background-size: cover; position: absolute; width: 50%; height: auto; right: 0; top: -6%;} 
.tech .flex .imgbox::after{content: ""; display: block; padding-bottom: calc(551/939 * 100%);}

.tech .flex.reverse{flex-direction: row-reverse;}
.tech .flex .bot{width: 70%; background-color: #eee; padding: 6% 8% 12% 23%;}
.tech .flex .imgbox02{background: url('/img/tech_img02__.png') no-repeat; background-position: center; background-size: cover; position: absolute; width: 50%; height: auto; left: 0; bottom: 7%;}
.tech .imgbox02::after{content: ""; display: block; padding-bottom: calc(551/939 * 100%);}

@media screen and (max-width: 768px){
    .sub_contents.tech_{padding: 20% 0 25%;}
    .tech .flex span{font-size: 90px;}
    .tech .flex .top, .tech .flex .bot{width: 100%; padding: 15% 8%;}
    .tech .flex .top{margin-bottom: 44%;}
    .tech .flex .bot{text-align: right;}
    .tech .flex .imgbox, .tech .flex .imgbox02{width: 70%;}
    .tech .flex .imgbox{top: -13%;}
    .tech .flex .imgbox02{bottom: 30%;}
    .tech .flex .tit{margin-left: 0; margin-top: -25px;}
    .tech .flex .tit strong{font-size: 18px;}
    .tech .flex .tit p{font-size: 15px;}
    .tech .flex .tit p .br{display: none;}
}

/* 문의 */
.sub .subbg.contact{background-image: url('/img/sub_visual_04.jpg');}

.contact_{padding: 110px 0;}
.contact_ .tit{margin-bottom: 47px;}
.contact_ .tit strong{font-size: 4.2rem; display: block; margin-bottom: 25px;}
.contact_ .tit p{font-family: 'Noto Sans KR', sans-serif; font-size: 1.8rem; color: #666; font-weight: 400; line-height: 1.3; margin-bottom: 5px;}
.contact_ .tit ul li{font-size: 1.8rem; line-height: 1.5; color: #666;}
.contact_ .tit ul li a{color: #666;}
.contact_ .tit ul li span{font-weight: 600;}
.contact_ .map_tab{display: flex;}
.contact_ .map_tab li{font-size: 1.8rem; background-color: #eee; color: #666; cursor: pointer; width: 285px; height: 55px; line-height: 55px; text-align: center; transition: 0.3s;}
.contact_ .map_tab li.on{background-color: #0a0454; color: #fff;}
.contact_ .map_infor > div{display: none;}
.contact_ .map_infor > div.on{display: block;}
.contact_ .map_infor > div ul{display: flex;}
.contact_ .map_infor .map_list{margin-top: 45px;}
.contact_ .map_infor .map_list2{margin-top: 16px;}
.contact_ .map_infor .map_list li:first-child{margin-right: 40px;}
.contact_ .map_infor .map_list li span{font-size: 2.4rem; font-weight: 600; margin-right: 12px; display: inline-block; margin-bottom: 10px; vertical-align: top;}
.contact_ .map_infor .map_list li p{font-size: 1.8rem; color: #666; display: inline-block; line-height: 1.5;}
.contact_ .map_infor #tab3 .map_list li{font-size: 2.4rem;}

@media screen and (max-width: 768px){
    .contact_{padding: 0 0 18%; margin-top: -15%;}
    .contact_ .tit strong{font-size: 2.5rem;}
    .contact_ .tit p{font-size: 1.5rem;}
    .contact_ .tit ul li{font-size: 1.5rem;}
    .tab_contents iframe{height: 400px;}

    .contact_ .map_tab li{font-size: 1.3rem; width: auto; height: auto; line-height: inherit; padding: 10px;}
    .contact_ .map_infor .map_list{margin-top: 20px; display: block;}
    /* .contact_ .map_infor .map_list2{margin-top: 0;} */
    .contact_ .map_infor .map_list .first{margin-bottom: 10px;}
    .contact_ .map_infor .map_list li span{font-size: 1.3rem; }
    .contact_ .map_infor .map_list li p{font-size: 1.2rem; line-height: 1.5;} 

    .contact_ .map_infor #tab3 .map_list li{font-size: 1.6rem;}
}


/* certificate */
.certi ul {display: flex; flex-wrap: wrap;}
.certi ul li{width: calc(99.9%/4 - 90px/4); margin-right: 30px; cursor: pointer;}
.certi ul li:nth-child(4n){margin-right: 0;}
.certi ul li:nth-child(-n+16){margin-bottom: 85px;}
.certi ul li .imgbox{background-repeat: no-repeat; background-size: cover; background-position: center; border: 5px solid #eee; transition: 0.3s;}
.certi ul li:hover .imgbox{border: 5px solid #009380;}
.certi ul li .imgbox::after{content: ""; display: block; padding-bottom: calc(380/300 * 100%);}
.certi ul li strong{display: block; text-align: center; font-size: 1.8rem; font-family: 'Noto Sans KR', sans-serif; line-height: 1.5; margin-top: 20px;}

.modal-wrap, .modal-wrap02, .modal-wrap03{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: none; z-index: 9999;}
.modal-wrap .modal-bg{background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%;}
.modal-wrap .closebtn{width: 30px; height: 30px; cursor: pointer; position: absolute; right: 0; top: -30px; background-color: #000;}
.modal-wrap .closebtn span{position: absolute; width: 18px; height: 2px; top: 48%; left: 20%; background-color: #fff; transform: rotate(45deg);}
.modal-wrap .closebtn span:nth-child(2){transform: rotate(-45deg);}
.modal-wrap .modal-in{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal-wrap .modal-in img{width: 100%; height: 100%;}

.modal-wrap02 .modal-in02 .imgwrap{max-height: 842px; overflow-y: auto;}
.modal-wrap02 .modal-bg{background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%;}
.modal-wrap02 .closebtn{width: 30px; height: 30px; cursor: pointer; position: absolute; right: 0; top: -30px; background-color: #000;}
.modal-wrap02 .closebtn span{position: absolute; width: 18px; height: 2px; top: 48%; left: 20%; background-color: #fff; transform: rotate(45deg);}
.modal-wrap02 .closebtn span:nth-child(2){transform: rotate(-45deg);}
.modal-wrap02 .modal-in02{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 33%;}
.modal-wrap02 .modal-in02 img{width: 100%; height: 100%;}

.modal-wrap03 .modal-in02 .imgwrap{max-height: 842px; overflow-y: auto;}
.modal-wrap03 .modal-bg{background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%;}
.modal-wrap03 .closebtn{width: 30px; height: 30px; cursor: pointer; position: absolute; right: 0; top: -30px; background-color: #000;}
.modal-wrap03 .closebtn span{position: absolute; width: 18px; height: 2px; top: 48%; left: 20%; background-color: #fff; transform: rotate(45deg);}
.modal-wrap03 .closebtn span:nth-child(2){transform: rotate(-45deg);}
.modal-wrap03 .modal-in02{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 33%;}
.modal-wrap03 .modal-in02 img{width: 100%; height: 100%;}



@media screen and (max-width: 768px){
    .sub_contents.certi{padding: 0 0 15%;}
    .certi ul li{width: calc(99.9%/3 - 60px/3);}
    .certi ul li:nth-child(4n){margin-right: 30px;}
    .certi ul li:nth-child(3n){margin-right: 0;}
    .certi ul li:nth-child(-n+16){margin-bottom: 50px;}
    .certi ul li strong{font-size: 1.4rem;}

    .modal-wrap .modal-in{width: 60%;}

    .modal-wrap02 .modal-in02{width: 77%;}
    .modal-wrap02 .modal-in02 .imgwrap{max-height: 667px;}
    .modal-wrap03 .modal-in02{width: 77%;}
    .modal-wrap03 .modal-in02 .imgwrap{max-height: 667px;}

}

@media screen and (max-width: 500px){
    .certi ul li{width: calc(99.9%/2 - 30px/2);}
    .certi ul li:nth-child(4n){margin-right: 30px;}
    .certi ul li:nth-child(3n){margin-right: 30px;}
    .certi ul li:nth-child(2n){margin-right: 0;}
    .certi ul li:nth-child(-n+15){margin-bottom: 40px;}
    .certi ul li strong{font-size: 1.2rem;}
    
    .modal-wrap .modal-in{width: 80%;}

    .modal-wrap02 .modal-in02 .imgwrap{max-height: 450px;}
    .modal-wrap03 .modal-in02 .imgwrap{max-height: 450px;}
}

/* quality */
.sub_contents.quality_{padding-bottom: 0;}
.quality_ .top{text-align: center;}
.quality_ .top strong{font-size: 20vw; color: #f0f0f0; text-transform: uppercase; font-family: Poppins, sans-serif; display: block; text-align: center;}
.quality_ .top .wrap{margin-top: -12%;}
.quality_ .top .wrap .txt01{font-size: 4rem; line-height: 1.3;}
.quality_ .top .wrap .txt01 em{font-weight: 600;}
.quality_ .top .wrap .txt02{font-size: 1.8rem; margin-top: 30px; color: #666; line-height: 1.3;}
.quality_ .top .wrap .obj{margin-top: 100px;}
.quality_ .top .wrap .obj span{font-size: 2.6rem; font-weight: 600;}
.quality_ .top .wrap .obj figure{margin-top: 45px;}

.quality_ .bot{margin-top: 95px; background-color: #f6f6f6; padding: 5%;}
.quality_ .bot .wrap ul{display: flex; flex-wrap: wrap;}
.quality_ .bot .wrap ul li{width: calc(99.9%/3 - 50px/3); margin-right: 25px; border: 3px solid #dedede;  text-align: center; padding: 30px; position: relative; z-index: 1;}
.quality_ .bot .wrap ul li:first-child{text-align: left; border: none; font-size: 5rem; font-family: Poppins, sans-serif; color: #0a0454; padding: 0; display: flex; align-items: center;}
.quality_ .bot .wrap ul li:first-child p em{font-weight: 600;}
.quality_ .bot .wrap ul li:nth-child(3n){margin-right: 0;}
.quality_ .bot .wrap ul li:nth-child(-n+6){margin-bottom: 30px;}
.quality_ .bot .wrap ul li .num{position: absolute; top: -15px; left: -5px; color: #eee; font-size: 130px; font-family: Poppins, sans-serif; margin-top: 0; font-weight: 800; z-index: -1;}
.quality_ .bot .wrap ul li .imgbox{background-position: center; background-repeat: no-repeat; background-size: contain;}
.quality_ .bot .wrap ul li .imgbox::after{content: ""; display: block; padding-bottom: 50%; }
.quality_ .bot .wrap ul li span{display: block; text-align: center; margin-top: 10px; color: #666; font-size: 2rem;}

@media screen and (max-width: 1000px){
    .quality_ .bot .wrap ul li:first-child{font-size: 4rem;}
}

@media screen and (max-width: 768px){
    .sub_contents.quality_{padding: 0;}
    .quality_ .top strong{font-size: 22vw;}
    .quality_ .top .wrap .txt01{font-size: 2rem;}
    .quality_ .top .wrap .txt01 br{display: none;}
    .quality_ .top .wrap .txt02{font-size: 1.3rem; margin-top: 20px;}
    .quality_ .top .wrap .obj{margin-top: 60px;}
    .quality_ .top .wrap .obj span{font-size: 1.6rem;}
    .quality_ .top .wrap .obj figure{margin-top: 30px;}

    .quality_ .bot{padding: 15% 5%; margin-top: 70px;}
    .quality_ .bot .wrap ul li{padding: 16px;}
    .quality_ .bot .wrap ul li .imgbox::after{padding-bottom: 100%;}
    .quality_ .bot .wrap ul li:first-child{font-size: 2.5rem;}
    .quality_ .bot .wrap ul li .num{font-size: 17vw; top: -8px;}
    .quality_ .bot .wrap ul li span{font-size: 1.4rem;}
}

@media screen and (max-width: 500px){
    .quality_ .bot .wrap ul li{width: calc(99.9%/2 - 25px/2);}
    .quality_ .bot .wrap ul li:nth-child(3n){margin-right: 25px;}
    .quality_ .bot .wrap ul li:nth-child(2n){margin-right: 0;}  
}


/* top 버튼 */
.topbtn{position: fixed; bottom: 4%; right: 3%; cursor: pointer; display: none; z-index: 1;}
.topbtn span{font-size: 1.6rem; background: #0a0454; border-radius: 50%; color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; display: block;}


.b_view .txtbox p{word-break: break-all; line-height: 1.5;}
.b_view .ex-btn{margin: 0 auto; margin-top: 56px; background-color: #0a0454; color: #fff;}
.b_view .ex-btn:hover{background-color: #fff; border: 1px solid #0a0454;}
.b_view .ex-btn span::after{content: "LIST";}

/* 공지사항 서브비쥬얼 */
.sub .subbg.news{background-image: url('/img/sub_visual_05.jpg');}