@charset "utf-8";

.sub_top{height: 100vh; overflow: hidden; position: relative; min-height: 580px;}
.sub_top .img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.sub_top .img img{height: 100vh; width: 100%; object-fit: cover; min-height: 580px;}
.sub_top .img iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100vw; height:56.25vw; min-width:177.77vh; min-height:100vh; pointer-events:none; }
.sub_top .txt{z-index: 2; display: flex; justify-content: space-between; height: 100%; align-items: end; padding-bottom: 15rem; color: #fff; text-shadow: 1px 1px 10px rgba(0,0,0,0.2);}
.sub_top .txt.bl{text-shadow: none; color: #222;}
.sub_top .txt h4{font-size: 2rem; font-weight: 400; letter-spacing: 0; font-family: "Questrial", sans-serif;}
.sub_top .txt h4 span{color: #fff;}
.sub_top .txt h3{font-size: 5rem; color: #ffffff; margin-top: 3rem;}
.sub_top .txt p{text-align: right; font-size: 2.5rem; font-family: 'Nanum Myeongjo'; line-height: 3.5rem;}
.sub_top .txt .lt p{text-align: left; margin-top: 3rem;}


@media all and (max-width:1280px){
    .sub_top .txt{padding-bottom: 10rem;}
    .sub_top .txt h3{font-size: 5rem;}
    .sub_top .txt p{font-size: 2rem; line-height: 3rem;}
}
@media all and (max-width:976px){
    .sub_top{height: 80vh;}
	.sub_top .img img{height: 80vh;}
    .sub_top .txt{flex-wrap: wrap;align-content: flex-end; gap: 4rem;}
    .sub_top .txt .lt{width: 100%;}
    .sub_top .txt .rt{width: 100%;}
    .sub_top .txt h4{font-size: 1.8rem;}
    .sub_top .txt h3{font-size: 4rem; margin-top: 2rem;}
}
@media all and (max-width:768px){
    .sub_top .txt p{font-size: 1.8rem;}
}
@media all and (max-width:480px){
    .sub_top .txt{padding-bottom: 5rem; gap: 2rem;}
    .sub_top .txt h4{font-size: 1.6rem;}
    .sub_top .txt h3{font-size: 3.5rem;}
    .sub_top .txt p{font-size: 1.6rem; line-height: 2.6rem; text-align: left;}
}


.intro1 .txt{text-align: center; color: #222;}
.intro1 .txt h3{font-size: 3.5rem; line-height: 5rem;}
.intro1 .txt p{font-size: 2.2rem; line-height: 4rem; margin: 8rem 0 10rem;}
.intro1 .name{display: flex; justify-content: end; margin-right: 15%;}
.intro1 .name > div{display: flex; align-items: end; gap: 4rem; position: relative; width: fit-content;}
.intro1 .name > div:after{position: absolute; content: ''; width: 110%; height: 2px; background: #000; left: 50%; transform: translateX(-50%);}
.intro1 .name p{color: #222; font-size: 2rem; padding-bottom: 1rem;}
.intro1 .name img{width: 15rem;}
br.br768{display: none;}

@media all and (max-width:976px){
    .intro1 .txt h3{font-size: 3.5rem;}
    .intro1 .txt p{font-size: 2.2rem; line-height: 3.5rem; margin: 6rem 0 8rem;}
    .intro1 .name{margin-right: 5%;}
    .intro1 .name p{font-size: 2.2rem;}
}
@media all and (max-width:768px){
    br.br768{display: block !important;}
    .intro1 .txt p{font-size: 2rem; }
    .intro1 .name{margin-right: 0;}
    .intro1 .name p{font-size: 2rem;}
    .intro1 .name img{width: 10rem;}
}
@media all and (max-width:480px){
    .intro1 .txt p{font-size: 1.8rem; letter-spacing: -0.07em;margin: 6rem 0;}
    .intro1 .txt h3{font-size: 3rem; line-height: 4.5rem;}
    .intro1 .name >div{gap: 2rem;}
    .intro1 .name p{font-size: 1.8rem;}
    .intro1 .name img{width: 10rem;}
}


.intro1_img{display:grid;grid-template-columns: 2fr 1fr 1fr;gap:20px; margin-top: 20rem;}
.intro1_img img{width:100%;height:100%;object-fit:cover;display:block;}
.left_box{display:flex;flex-direction:column;gap:20px;}
.left_box .img01{height:450px;}
.left_box .img04{height:230px;}
.center_box .img02{height:700px;}
.right_box{display:flex;flex-direction:column;gap:20px;}
.right_box .img03{height:280px;}
.right_box .img05{height:400px;}


@media all and (max-width:1280px){
    .left_box .img01{height:350px;}
    .left_box .img04{height:130px;}
    .center_box .img02{height:500px;}
    .right_box .img03{height:180px;}
    .right_box .img05{height:300px;}
}
@media all and (max-width:976px){
    .intro1_img{grid-template-columns: 1fr 1fr; margin-top:12rem;}
    .center_box{grid-column:1 / 2;}
    .right_box{grid-column:2 / 3;}
    .left_box{grid-column:1 / 3; display:grid; grid-template-columns: 1fr 1fr;}
    .center_box .img02{height: 620px;}
    .left_box .img01,
    .left_box .img04,
    .right_box .img03,
    .right_box .img05{height:300px;}
}
@media all and (max-width:768px){
    .intro1_img{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
    .left_box{ grid-column:1 / 3; display:flex; flex-direction:column; gap:2rem; }
    .center_box{ grid-column:1 / 2; grid-row:2 / 4; }
    .right_box{grid-column:2 / 3;grid-row:2 / 4;display:flex;flex-direction:column;gap:2rem;}
    .left_box .img01{height:40rem;}
    .left_box .img04{height:20rem;}
    .center_box .img02{height:60rem;}
    .right_box .img03{height:20rem;}
    .right_box .img05{height:38rem;}
    .left_box,
    .center_box,
    .right_box{min-width:0;}
    .intro1_img img{ width:100%; height:100%; object-fit:cover; display:block; }
}
@media all and (max-width:480px){
    .intro1_img{margin-top: 10rem; gap: 1rem;}
    .left_box{gap:1rem; }
    .left_box .img01{height:25rem;}
    .left_box .img04{height:10rem;}
    .center_box .img02{height:40rem;}
    .right_box{gap:1rem;}
    .right_box .img03{height:10rem;}
    .right_box .img05{height:29rem;}
}


.intro1_tab{margin: 15rem 0 10rem;}
.intro1_tab ul{display: flex; justify-content: center; gap: 20rem; font-size: 2rem;}
.intro1_tab ul li{color: #777; cursor: pointer;}
.intro1_tab ul li.active{color: var(--color1) !important;}
.tab_content{display:none;}
.tab_content.active{display:block;}

@media all and (max-width:1480px){
    .intro1_tab ul{gap: 15rem;}
}
@media all and (max-width:1280px){
    .intro1_tab{margin: 12rem 0 8rem;}
    .intro1_tab ul{gap: 10rem; font-size: 2.3rem;}
}
@media all and (max-width:976px){
    .intro1_tab ul{gap: 7rem; font-size: 2rem;}
}
@media all and (max-width:768px){
    .intro1_tab{margin: 10rem 0 6rem;}
    .intro1_tab ul{gap: 3rem; font-size: 1.8rem;}
}
@media all and (max-width:480px){
    .intro1_tab ul{gap: 2rem; font-size: 1.7rem;}
    .intro1_tab ul li.active{text-decoration-thickness: 2px;  text-underline-offset: 0.7rem;}
}

.history_wrap{display: flex; gap: 10rem;}
.history_year_tab{width: 25rem;}
.history_year_tab li{cursor:pointer; font-size:2.5rem; font-weight:700;color:#777;margin-bottom:1rem; position: relative; background: #f7f7f7; padding: 1.5rem 2rem;}
/* .history_year_tab li:after{position: absolute; width: 3px; height: 100%; background: var(--color1); content: ''; right: 0;} */
.history_year_tab li.active{color: #fff; background: var(--color1);}
.history_content{display:none;}
.history_content.active{display:block;}
.history_content dl{display: flex; gap: 2rem;}
.history_content dl + dl{margin-top: 3rem;}
.history_content dt{ width: 10rem; font-weight:700; color:var(--color1); font-size: 2rem;}
.history_content dd{font-size: 1.8rem; line-height: 3rem;}

@media all and (max-width:1280px){
    .history_wrap{gap: 7rem;}
    .history_year_tab{width: 20rem;}
    .history_year_tab li{font-size:2.5rem;}
    .history_content dt{font-size: 2.2rem;}
    .history_content dd{font-size: 1.8rem; line-height: 3.5rem;}
}
@media all and (max-width:980px){
    .history_wrap{gap: 3rem;}
    .history_year_tab{width: 17rem;}
    .history_content dt{ width: 7rem;}
}
@media all and (max-width:768px){
    .history_wrap{flex-wrap: wrap;}
    .history_year_tab{width: 100%; display: flex;gap: 2rem; justify-content: center;}
    .history_year_tab li{padding: 1rem 2rem; font-size: 2rem; margin-bottom: 2rem;}
    .history_year_tab li:after{display: none;}
    .history_content dt{ width: 6rem;}
    .history_content dd{font-size: 1.7rem; line-height: 3rem;}
}
@media all and (max-width:480px){
    .history_year_tab li{padding: 0.7rem 1.5rem; font-size: 1.6rem;}
    .history_content dt{font-size: 1.8rem;width: 5rem;}
    .history_content dd{font-size: 1.5rem; line-height: 2.5rem;letter-spacing: -0.06em;}
}


.ci .top{background: url('/images/sub/ci_bg.jpg') center center / cover no-repeat; text-align: center; padding: 15rem 0;}
.ci .top img{width: 80rem;}
.ci .cont_box{margin-top: 15rem; display: flex;}
.ci .cont_box .lt{width: 30rem;}
.ci .cont_box .rt{width: calc(100% - 30rem); color: #222;}
.ci .cont_box .rt p{font-size: 1.8rem; line-height: 3.5rem;}
.ci .cont_box .lt h3{font-size: 2.5rem; color: var(--color5);}
.ci .cont_box .lt h4{font-size: 1.8rem; color: #222;font-weight: normal;margin-top: 0.5rem;}

.img_list{display: flex; gap: 2rem; width: 100%;}
.img_list li{width: calc(100%/2 - 1rem); border: 1px solid #ddd; border-radius: 1rem;padding: 3rem;}
.img_list li p{color: #666;}
.img_list li .img{text-align: center; width: 100%;}
.img_list li img{margin: 2rem auto; max-width: 100%;}

.c_box{display: flex; width: 100%;}
.c_box .box{width: 50%; padding: 2rem 3rem 4rem; color: #fff;}
.c_box .box1{background: #000;}
.c_box .box2{background: #ca002b;}
.c_box .box h3{font-size: 2.5rem;margin-bottom: 1rem;}
.c_box .box p{font-size: 1.8rem; line-height: 2.5rem !important;}
br.mo{display: none;}


@media all and (max-width:1280px){
    .ci .top{padding: 10rem 0;}
    .ci .top img{width: 70rem;}
    .ci .cont_box{margin-top: 10rem;}
    .ci .cont_box .lt{width: 20rem;}
    .ci .cont_box .lt h4{font-size: 1.8rem;}
    .ci .cont_box .rt{width: calc(100% - 20rem);}
    .ci .cont_box .rt p{font-size: 1.8rem; line-height: 3rem;}
}
@media all and (max-width:980px){
    .ci .top img{width: 80%;}
    .ci .cont_box{flex-wrap: wrap;gap: 3rem; margin-top: 7rem;}
    .ci .cont_box .lt{width: 100%;}
    .ci .cont_box .rt{width: 100%;}
}
@media all and (max-width:768px){
    .ci .top{padding: 8rem 0;}
    .ci .top img{width: 90%;}
    .ci .cont_box .rt p{font-size: 1.6rem; line-height: 2.7rem;}
    .img_list{gap: 1rem;}
    .img_list li{width: calc(100%/2 - 0.5rem); padding: 1rem 1.5rem;}
    .img_list li img{margin-top: 1rem;}
    .img_list li p{font-size: 1.6rem !important;}
}
@media all and (max-width:480px){
    .ci .top{padding: 6rem 0;}
    .ci .cont_box{gap: 2rem; margin-top: 5rem;}
    .ci .cont_box .lt h3{font-size: 2.2rem;}
    .ci .cont_box .lt h4{font-size: 1.6rem;}
    .ci .cont_box .rt p br{display: none;}
    br.mo{display: block !important;}
    .img_list{flex-wrap: wrap;}
    .img_list li{width: 100%;}
    .img_list li p{font-size: 1.5rem !important;}
    .c_box{flex-wrap: wrap;}
    .c_box .box{padding: 2rem 2rem 3rem; width: 100%;}
    .c_box .box h3{font-size: 2rem;}
    .c_box .box p{font-size: 1.5rem !important; line-height: 2rem !important;}
}


#certList { display:flex; flex-wrap:wrap; gap:10rem 7rem; max-width: 1280px;}
#certList li {width:calc((100% - 7rem *3)/4);   font-size:1.8rem;}
#certList li .img { border: 1px solid #e7e2db; padding: 20px; background:#FFF }
#certList li img { max-width: 100%;  }
#certList li p { margin-top: 1em; color:#423126; text-align: center; word-break: keep-all;}

@media all and (max-width:1400px){
	#certList { gap:4rem 2rem;}
	#certList li { width:calc((100% - 2rem *3)/4);}
}
@media all and (max-width:1024px){
	#certList li { width:calc((100% - 2rem *2)/3);   }
}
@media all and (max-width:768px){
	#certList { gap:3rem 1rem; }
	#certList li { width:calc((100% - 1rem *1)/2);   font-size: 1.6rem;}
}


.factory .top{width: 100%; margin-bottom: 15rem;}
.factory .top{width:100%;aspect-ratio:16 / 9;overflow:hidden;}
.factory .top iframe{width:100%; height:100%; display:block;pointer-events:none;}
.factory .f_info{display: flex; gap:10rem 2rem; flex-wrap: wrap;}
.factory .f_info li{width: calc(100%/4 - 6rem/4);}
.factory .f_info li .img{width: 100%; border: 1px solid #aaa;}
.factory .f_info li .img img{width: 100%;}
.factory .f_info li p{text-align: center; font-size: 2rem; margin-top: 2rem; color: #222;}
.factory .cont{margin-top: 20rem; text-align: center;}
.factory .cont h3{color: #222; font-size: 4rem; margin-bottom: 7rem;}
.factory .cont .img{display: flex;}
.factory .cont .img img:nth-child(1){width: 40%;}
.factory .cont .img img:nth-child(2){width: 40%;}
.factory .cont .img img:nth-child(3){width: 20%;}

@media all and (max-width:1280px){
    .factory .top{margin-bottom: 12rem;}
    .factory .f_info{gap:7rem 2rem;}
    .factory .f_info li{width: calc(100%/3 - 4rem/3);}
    .factory .cont{margin-top: 15rem;}
}
@media all and (max-width:980px){
    .factory .f_info li p{font-size: 1.8rem; }
    .factory .cont h3{font-size: 3rem; margin-bottom: 5rem;}
}
@media all and (max-width:768px){
    .factory .f_info li{width: calc(100%/2 - 2rem/2);}
    .factory .cont{margin-top: 10rem;}
    .factory .cont .img{flex-wrap: wrap;}
    .factory .cont .img img:nth-child(1){width: 100%;}
    .factory .cont .img img:nth-child(2){width: 100%;}
    .factory .cont .img img:nth-child(3){width: 100%;}
}
@media all and (max-width:480px){
    .factory .top{margin-bottom: 7rem;}
    .factory .f_info{gap:4rem 2rem;}
    .factory .f_info li p{font-size: 1.6rem; margin-top: 1.5rem;}
    .factory .cont h3{font-size: 2.7rem; margin-bottom: 3rem;}
}


.map_wrap .map{width: 100%; height: 70rem;}
.map_wrap .cont{margin-top: 8rem;color: #222;}
.map_wrap .cont dl{border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 3rem; font-size: 2rem; display: flex;}
.map_wrap .cont dl dt{width: 20rem; font-weight: bold;}
.map_wrap .cont dl dd{width: calc(100% - 20rem);}
.map_wrap .link{display: flex; gap: 1rem;margin-top: 7rem;}
.map_wrap .link li{width: calc(100%/3 - 2rem/3); border: 1px solid #ddd; border-radius: 1rem;}
.map_wrap .link li a{padding: 2rem; display: flex; align-items: center; justify-content: center; gap: 3rem; width: 100%; height: 100%;color: #222; font-size: 2rem;}
.map_wrap .link li img{border-radius: 0.7rem; overflow: hidden; border: 1px solid #eee; width: 6rem;}
.map_wrap .link li p{width: calc(100% - 9rem); text-align: center; font-weight: bold;}

@media all and (max-width:1280px){
    .map_wrap .map{height: 60rem;}
    .map_wrap .cont dl{font-size: 1.8rem;}
    .map_wrap .link li a{font-size: 1.6rem;}
}
@media all and (max-width:980px){
    .map_wrap .link li a{gap: 2rem; padding: 1.5rem;}
    .map_wrap .link li img{width: 5rem;}
    .map_wrap .link li p{width: calc(100% - 7rem);}
}
@media all and (max-width:768px){
    .map_wrap .map{height: 50rem;}
    .map_wrap .cont{margin-top: 5rem;}
    .map_wrap .cont dl{padding: 2rem; align-items: center;}
    .map_wrap .cont dl dt{width: 7rem;}
    .map_wrap .cont dl dd{width: calc(100% - 7rem); font-size: 1.6rem;}
    .map_wrap .link{margin-top: 5rem;}
    .map_wrap .link{flex-wrap: wrap;}
    .map_wrap .link li{width: 100%;}
    .map_wrap .link li a{padding: 1rem;}
}
@media all and (max-width:480px){
    .map_wrap .cont dl{flex-wrap: wrap;gap: 1rem;}
    .map_wrap .cont dl dt{width: 100%;}
    .map_wrap .cont dl dd{width: 100%;}
}


#srt_top{display: flex;gap: 15rem; align-items: center;}
#srt_top .lt{width:50%;}
#srt_top .lt img{width: 100%; height: 100%; object-fit: cover;}
#srt_top .rt{width: 50%;}
#srt_top .rt h3{color: #222;font-size: 3rem;margin-bottom: 3rem;}
#srt_top .rt > p{color: #717171; font-size: 2rem; font-weight: 200; line-height: 4rem;}
#srt_top .rt p + p{margin-top: 4rem;}
#srt_top .rt ul{display: flex;gap: 5rem; margin-top: 5rem;}
#srt_top .rt ul li{width: 12rem; height: 12rem; border-radius: 1000px; border: 1px solid #777; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: bold;text-align: center; color: #222;}

@media all and (max-width:1280px){
    #srt_top{gap: 7rem;}
    #srt_top .lt{width: 50%;}
    #srt_top .rt{width: 50%;}
    #srt_top .rt > p{font-size: 2.2rem; line-height: 3.5rem;}
    #srt_top .rt ul{gap: 3rem;}
    #srt_top .rt ul li{width: 10rem; height: 10rem; font-size: 2rem;}
}
@media all and (max-width:768px){
    #srt_top{gap: 5rem; flex-wrap: wrap;}
    #srt_top .lt{width: 100%;}
    #srt_top .rt{width: 100%;}
    #srt_top .rt > p br{display: none;}
    #srt_top .rt ul{justify-content: center;}
}
@media all and (max-width:480px){
    #srt_top .rt h3{font-size: 2.5rem;}
    #srt_top .rt > p{font-size: 1.8rem; line-height: 3rem;}
    #srt_top .rt p + p{margin-top: 2rem;}
    #srt_top .rt ul{margin-top: 3rem;}
}

#srt_nut{margin-top: 20rem;}
#srt_nut .top h3{color: #222; font-size: 3rem;}
#srt_nut .top p{color: #777; font-size: 2rem;margin: 4rem 0 6rem; font-weight: 200; line-height: 4rem; word-break: keep-all;}
#srt_nut .cont{background: #faf9e7;padding: 15rem 7rem;}
#srt_nut .cont ul{display: flex;}
#srt_nut .cont ul li{width: 50%;position: relative;}
#srt_nut .cont ul li:nth-child(1):after{content: '';width: 2px; height: 100%; background: #b5b5ad; top: 0; right: 0; position: absolute;}
#srt_nut .cont ul li img{width: 100%;}
#srt_nut .cont p{text-align: center; margin-top: 5rem;font-size: 2rem; line-height: 3rem; color: #888;}


@media all and (max-width:1280px){
    #srt_nut{margin-top: 15rem;}
    #srt_nut .top p{font-size: 2.2rem; line-height: 3.5rem;}
    #srt_nut .cont{padding: 10rem 5rem;}
}
@media all and (max-width:980px){
    #srt_nut .top p br{display: none;}
    #srt_nut .cont{padding: 10rem 5rem;}
}
@media all and (max-width:768px){
    #srt_nut{margin-top: 10rem;}
    #srt_nut .cont{padding: 7rem 3rem;}
    #srt_nut .cont ul{flex-wrap: wrap;}
    #srt_nut .cont ul li{width: 100%;padding-bottom: 5rem; }
    #srt_nut .cont ul li:nth-child(1):after{content: '';width: 100%; height: 2px; top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%);}
    #srt_nut .cont ul li:last-child{padding-bottom: 0; margin-top: 5rem;}
    #srt_nut .cont p{font-size: 1.8rem; letter-spacing: -0.07em;}
}
@media all and (max-width:480px){
    #srt_nut .top h3{font-size: 2.5rem;}
    #srt_nut .top p{font-size: 1.8rem;margin: 3rem 0 5rem; line-height: 3rem;}
    #srt_nut .cont{padding: 5rem 2rem;}
    #srt_nut .cont ul li{padding-bottom: 3rem;}
    #srt_nut .cont ul li:last-child{margin-top: 3rem;}
    #srt_nut .cont p{font-size: 1.5rem;line-height: 2.5rem;}
}


#srt_map{margin-top: 20rem; padding: 15rem 0; background: url('/images/sub/srt_map_bg.jpg') center center / cover no-repeat;}
#srt_map .inner{display: flex;}
#srt_map .lt{width: 50%;}
#srt_map .lt h3{font-size: 3rem; color: #222; margin-bottom: 4rem;}
#srt_map .lt p{font-size: 2rem; color: #777; font-weight: 200;}
#srt_map .lt .add{display: flex; align-items: center; gap: 2rem;margin-top: 10rem;}
#srt_map .lt .add p{color: #222; font-weight: bold;}
#srt_map .rt{ width: 50%; text-align: center; position: relative; }
#srt_map .rt .map_wrap{ position: relative; display: inline-block; }
#srt_map .rt .map_img{ max-width: 100%; display: block; }
#srt_map .rt .map_dot{ position: absolute; left: 68%; top: 20%; transform: translate(-50%, -50%); z-index: 2; animation: dotBounce 1.4s ease-in-out infinite; }
#srt_map .rt .map_wrap::before{ content: ''; position: absolute; left: 68%; top: 25%; width: 34px; height: 34px; border-radius: 50%; background: rgba(108, 132, 70, 0.7); transform: translate(-50%, -50%); animation: dotPulse 1.4s ease-out infinite; z-index: 1; }

@keyframes dotBounce{
    0%,100%{
        transform: translate(-50%, -50%) translateY(0);
    }
    50%{
        transform: translate(-50%, -50%) translateY(-10px);
    }
}

@keyframes dotPulse{
    0%{
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.8;
    }
    100%{
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

@media all and (max-width:1280px){
    #srt_map{margin-top: 15rem; padding: 10rem 0;}
    #srt_map .lt p{font-size: 2.2rem;}
    #srt_map .lt .add{margin-top: 7rem;}
}
@media all and (max-width:900px){
    #srt_map .inner{flex-wrap: wrap;gap: 7rem;}
    #srt_map .lt{width: 100%;}
    #srt_map .rt{width: 100%;}
}
@media all and (max-width:480px){
    #srt_map .inner{gap: 5rem;}
    #srt_map .lt h3{font-size: 2.5rem; margin-bottom: 3rem;}
    #srt_map .lt p{font-size: 1.8rem;}
    #srt_map .lt .add {gap: 1.5rem; margin-top: 5rem;}
    #srt_map .lt .add img{width: 3rem;}
    #srt_map .rt img{max-width: 80%;}
}

#srt_img{overflow: hidden; margin-top: 15rem;}
#srt_img img{width: 100%;}

@media all and (max-width:1280px){
    #srt_img{margin-top: 10rem;}
}
@media all and (max-width:768px){
    #srt_img{flex-wrap: wrap;}
    #srt_img img{width: 100%;}
}


#pro_slide{ width:100%; overflow:hidden;}
#pro_slide li{width: calc(100%/4 - 3rem);}
#pro_slide img{width: 100%;}

#pro_slide .swiper-wrapper{align-items:center;}
#pro_slide .swiper-slide{ opacity:.35; filter:blur(4px); transition:.4s; border-radius: 1rem; overflow: hidden;}
#pro_slide .swiper-slide-active,
#pro_slide .swiper-slide-prev,
#pro_slide .swiper-slide-next{opacity:1;filter:blur(0);}
#pro_slide .pro_scrollbar{width:60rem;height:3px;background:#ddd;margin:7rem auto 0;position:relative;}
#pro_slide .swiper-scrollbar-drag{ background:#6b813d; height:3px; top:0; }


@media all and (max-width:1280px){
    #pro_slide .pro_scrollbar{width:50rem;}
    #pro_slide .swiper-slide-prev,
    #pro_slide .swiper-slide-next{opacity:0.35;filter:blur(4px);}
    #pro_slide li{width: calc(100%/2.5 - 2rem);}
}
@media all and (max-width:768px){
    #pro_slide li{width: calc(100%/1.4 - 1rem);}
    #pro_slide .pro_scrollbar{width:60%; margin-top: 5rem;}
}


.pro_list{display: flex; flex-wrap: wrap; gap: 10rem 3rem;}
.pro_list li{width: calc(100%/4 - 9rem/4); }
.pro_list li img{width: 100%;border-radius: 1rem; overflow: hidden;}
.pro_list li .txt{margin-top: 3rem;text-align: center;}
.pro_list li .txt p{color: #222; font-size: 2rem;  line-height: 2rem;}
.pro_list li .txt p + p{margin-top: 1.5rem;}
.pro_list li .txt p:nth-child(1){padding: 0 1.5rem; border-right: 1px solid #000; border-left: 1px solid #000; display: inline-block;}


@media all and (max-width:1280px){
    .pro_list li{width: calc(100%/3 - 6rem/3);}
    .pro_list li .txt p{font-size: 2.2rem;}
}
@media all and (max-width:980px){
    .pro_list{gap: 7rem 2rem;}
    .pro_list li{width: calc(100%/2 - 1rem);}
    .pro_list li .txt p{font-size: 2rem; line-height: 1.8rem;}
}
@media all and (max-width:480px){
    .pro_list{gap: 5rem 2rem;}
    .pro_list li .txt p{font-size: 1.8rem; line-height: 1.6rem;}
}

.oem_top{text-align: center;}
.oem_top p{font-weight: 200; font-size: 2.5rem; line-height: 4rem; color: #222;}

.oem_mid{text-align: center; margin: 20rem auto; display: flex; gap: 10rem; max-width: 1280px;}
.oem_mid li{width: calc(100%/3 - 20rem/3); border-radius: 1rem; border: 2px solid var(--color1); padding: 10rem 2rem;}
.oem_mid li h4{color: var(--color1); font-weight: 800; font-size: 5rem; font-family: 'Nanum Myeongjo';}
.oem_mid li h3{color: #222; font-size: 3rem; margin: 2rem 0 7rem;}
.oem_mid li p{color: #777; font-size: 2rem; line-height: 3.5rem; font-weight: 200;}

.oem_list > h3{text-align: center; color: var(--color5); font-size: 3rem; margin-bottom: 7rem;}
.oem_list ul{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 40rem 40rem; gap:0; margin:0; padding:0; }
.oem_list ul li{ position:relative; overflow:hidden; list-style:none; }
.oem_list ul li:nth-child(1){grid-row:1 / 3;}
.oem_list ul li .img{width:100%; height:100%;}
.oem_list ul li .img img{width:100%; height:100%; object-fit:cover; display:block; transition:.5s;}
.oem_list ul li::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1; transition: 0.3s;}
.oem_list ul li:hover:before{background:rgba(0,0,0,0); transition: 0.3s;}
.oem_list ul li h3{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; color:#fff; font-size:3rem; font-weight:500; transition: 0.3s;}
.oem_list ul li:hover h3{opacity: 0; transition: 0.3s;}
br.br980{display: none;}

@media all and (max-width:1480px){
    .oem_mid{gap: 8rem;}
    .oem_mid li{width: calc(100%/3 - 16rem/3);}
    .oem_mid li p{font-size:1.8rem; line-height: 3.7rem;}
}
@media all and (max-width:1280px){
    .oem_top p{font-size: 2.2rem;}
    .oem_mid{gap: 5rem; margin: 15rem 0;}
    .oem_mid li{padding: 7rem 1rem; width: calc(100%/3 - 10rem/3);}
    .oem_mid li h4{font-size: 4rem;}
    .oem_mid li h3{margin-bottom: 5rem;font-size: 2.7rem;}
    .oem_mid li p{font-size: 1.7rem; line-height: 3.5rem;letter-spacing: -0.07em;}
    .oem_list ul{grid-template-rows: 30rem 30rem;}
    .oem_list ul li h3{font-size: 2.5rem;}
}
@media all and (max-width:980px){
    .oem_mid{flex-wrap: wrap;}
    .oem_mid li{width: 100%; padding: 4rem 3rem;}
    .oem_mid li p br{display: none;}
    br.br980{display: block !important;}
}
@media all and (max-width:768px){
    .oem_mid p br.br980{display: none !important;}
    .oem_list ul{ grid-template-columns:1fr; grid-template-rows:none;}
    .oem_list ul li{ grid-column:auto; height:40rem;}
    .oem_list ul li:nth-child(1){grid-row:auto;}
}
@media all and (max-width:480px){
    .oem_top p{font-size: 2rem; line-height: 3.5rem; letter-spacing: -0.07em;}
    .oem_mid{margin: 10rem 0;}
    .oem_mid li h4{font-size: 3.5rem;}
    .oem_mid li h3{font-size: 2.5rem;margin-bottom: 3rem;}
    .oem_mid li p{font-size: 1.8rem; line-height: 3rem;letter-spacing: -0.05em;}
    .oem_list > h3{font-size: 2.7rem; margin-bottom: 5rem;}
    .oem_list ul li{height:30rem;}
    .oem_list ul li h3{font-size: 2.2rem;}
}


.comm{margin-top: 10rem;min-height: 55rem;}

@media all and (max-width:1280px){
    .comm{margin-top: 8rem;}
}
@media all and (max-width:768px){
    .comm{margin-top: 6rem;}
}
@media all and (max-width:480px){
    .comm{margin-top: 4rem;}
}

.pro_paging{ clear: both; text-align: center; margin-top: 10rem; display: block; float: none; }
.pro_paging:after{ display:block; visibility:hidden; clear:both; content:""; }
.pro_paging button{ font-family: 'pretendard'; display:inline-block; vertical-align:middle; background:none; border:0; border-radius:0; transition:all 0.3s ease-out; color:#959595; font-size:16px; height:2.5rem; line-height:3.3rem; padding:0 13px; min-width:3rem; text-decoration:none; position:relative; cursor:pointer; }

.pro_paging button:hover,
.pro_paging button:focus{text-decoration:none;}
.pro_paging .num.active{ color:#222; font-weight:bold; opacity: 1; }
.pro_paging .prev,
.pro_paging .next{ text-indent:-999px; overflow:hidden; padding:0; width:3.5rem; }
.pro_paging .prev:after{ font-family:FontAwesome; width:100%; position:absolute; left:0; top:0; height:100%; content:"\f104"; z-index:1; text-indent:0; text-align:center; font-size:1.8rem; }
.pro_paging .next:after{ font-family:FontAwesome; width:100%; position:absolute; left:0; top:0; height:100%; content:"\f105"; z-index:1; text-indent:0; text-align:center; font-size:1.8rem; }
.pro_paging button.disabled{opacity:.35;cursor:default;pointer-events:none;}

@media all and (max-width:480px){
    .pro_paging{margin-top: 7rem;}
    .pro_paging button{font-size: 1.6rem; line-height: 2.6rem;}
}