#container.full{width: 100vw; margin-left: -50vw; left: 50%; position: relative; max-width: none; padding: 0 ;}
.w1200{max-width: 126rem; width: 100%; margin: 0 auto; padding: 0 3rem;}
.color{color: #098eae !important;}

/* vgsi 1-1 */
#vgsi{padding: 11rem 0 15rem; background: url('/images/sub/vgsi_bg.jpg') no-repeat center; background-size: cover;}
#vgsi .w1200 > h4{font-size: 18px; line-height: 1; font-weight: bold; color: #fff; text-align: center; margin-bottom: 9rem;} 
#vgsi .w1200 > p{font-size: 4.5rem; line-height: 1; font-weight: bold; color: #fff; text-align: center; margin-bottom: 5rem;} 
.vgsi_contents{display: flex; flex-wrap: wrap; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15)}
.vgsi_contents .imgArea{width: 73rem; font-size: 0; line-height: 0;}
.vgsi_contents .textArea{width: calc(100% - 73rem); background: #ffffff; padding: 4rem 5rem; height: 560px; overflow-y: auto;}
.vgsi_contents .textArea ul li{display: flex; padding: 1rem 0;}
.vgsi_contents .textArea ul li + li{border-top: 1px solid #e6e6e6;}
.vgsi_contents .textArea ul li .title{width: 8rem; font-size: 1.7rem; font-weight: bold; color: #098eae; line-height: 2.8rem;}
.vgsi_contents .textArea ul li .contents{width: calc(100% - 8rem); font-size: 1.7rem; font-weight: 550; color: #666666; line-height: 2.8rem;}

/* management 1-2  경영이념*/
.subTitle{font-size: 3rem; line-height: 1.25; color: #222222; font-weight: 500; text-align: center; margin-bottom: 3rem;}
.subTitle b{font-weight: bold; }
.subTitle_sub{font-size: 2rem; line-height: 1.5; color: #222222; font-weight: 500; text-align: center;}

.sub_miniTitle{font-size: 1.8rem; line-height: 1; color: #222222; text-align: center; margin-bottom: 1.5rem; font-weight: bold;}
.sub_miniTitle_sub{position: relative; padding-top: 8rem; font-size: 4.5rem; line-height: 1; color: #222222; text-align: center; font-weight: bold;}
.sub_miniTitle_sub::before{position: absolute; width: 1px; left: calc(50% - 0.5px); top: 0; height: 6.5rem; background: #cccccc; content: '';}
.sub_miniTitle_text{margin-bottom: 5.5rem; font-size: 2rem; line-height: 1.4; color: #222222; text-align: center; font-weight: 550; }
.sub_miniTitle_sub + .sub_miniTitle_text{margin-top: 1.5rem;}

#management .w1200{overflow: hidden;}
#management ul{margin: 10rem 0 0;}
#management ul li{display: flex; gap: 8rem; flex-wrap: wrap; align-items: flex-start;}
#management ul li + li{margin-top: 12rem;}
#management ul li:nth-of-type(even){flex-direction: row-reverse; text-align: right;}
#management ul li:nth-of-type(even) .imgArea::after{left: -100vw;}
#management ul li .imgArea{position: relative; width: 560px; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15)}
#management ul li .imgArea::after{position: absolute; top: 83px; width: 100vw; height: 1px; background: #e6e6e6; content: '';}
#management ul li .imgArea .ab{position: absolute; top: 40px; }
#management ul li .imgArea .ab p{font-size: 50px; line-height: 1; font-weight: 900; color: #fff;}
#management ul li .textArea{width: calc(100% - 560px - 8rem); padding-top: 13.5rem;}
#management ul li .textArea h4{font-size: 3rem; line-height: 1; font-weight: bold; color: #222222; margin-bottom: 2rem;}
#management ul li .textArea p{font-size: 1.8rem; line-height: 2.8rem;font-weight: 500; color: #222222;}
#management ul li:nth-of-type(1) .imgArea .ab{right: -93px;}
#management ul li:nth-of-type(2) .imgArea .ab{left: -102px;}
#management ul li:nth-of-type(3) .imgArea .ab{right: -80px; }
#management ul li:nth-of-type(3) .imgArea .ab p{color: #dddddd;}
/* #management ul li:nth-of-type(4) .imgArea .ab{left: -102px;} */
#management ul li:nth-of-type(4) .imgArea .ab{left: -270px;}

/* ceo 1-3 ceo 인사말 */
#ceo{width: 100vw; margin-left: -50vw; left: 50%; position: relative; background: url('/images/sub/ceo_bg.jpg') no-repeat left top; margin-top: -35px;} 
#ceo .ceo_contents{display: flex; align-items: center; flex-direction: column; text-align: center; margin-bottom: 15rem;}
.ceoImg{margin-bottom: 3rem; border-radius: 50%; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15); width: 28rem;}
.ceo_text{display: flex; gap: 2rem 0;}
.ceo_text{font-size: 1.8rem; line-height: 2.8rem; color: #666666; font-weight: 500;}
.ceo_text + .ceo_text{margin-top: 1.5rem;}

.ceo_named{display: flex; gap: 2rem 0; margin-top: 7rem; align-items: center;}
.ceo_named .title{font-size: 2rem; font-weight: 550; color: #222222; padding-right: 2rem; border-right: 1px solid #e5e5e5; margin-right: 2rem;}
.ceo_named .people p{font-size: 1.8rem; color: #acacac; line-height: 1;}
.ceo_named .people b{font-size: 2.4rem; color: #222222; padding-right: 1rem;}

#ceo_focus{width: 100vw; position: relative; margin-left: -50vw; left: 50%; padding: 15rem 0; background: url('/images/sub/ceo_footer_bg.jpg') no-repeat center; background-size: cover;}
#ceo_focus .w1200{display: flex; flex-wrap: wrap;}
#ceo_focus .w1200 > div{padding: 10rem 7rem; width: 50%;}
.ceo_focus_title{background: #098eae; color: #fff; text-align: right;}
.ceo_focus_title h4{font-size: 2.5rem; line-height: 1; font-weight: bold; margin-bottom: 1rem; color: #fff;}
.ceo_focus_title h4 span{position: relative; padding-bottom: 1.5rem; display: inline-block;}
.ceo_focus_title h4 span::after{width: 90%; height: 2px; right: 0; bottom: 0; background: #fff; content: ''; position: absolute;}
.ceo_focus_title p{font-size: 4rem; line-height: 1.25; color: #fff; font-weight: 900;}
.ceo_focus_contents{background: #fff;}
.ceo_focus_contents h4{font-size: 2.5rem; line-height: 1; font-weight: bold; margin-bottom: 1rem; color: #333333;}
.ceo_focus_contents p{font-size: 1.8rem; line-height: 2.8rem; font-weight: 500; color: #333333;}

/* location 1-4 오시는 길 */
.tab{display: flex; gap: 1rem; justify-content: center; margin-bottom: 4rem;}
.tab li{width: 20rem; height: 6rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1; text-align: center; color: #999999; background: #f6f6f6; font-weight: 500; border-radius: 5px; cursor: pointer;}
.tab li.active{background: #0082a1; color: #fff;}

.tab_con{display: none;}
.tab_con.active{display: block;}
.tab_con.active > iframe{margin-bottom: 6rem; width: 100%; height: 56rem;}

.location_etc{display: flex; gap: 5rem 9rem; flex-wrap: wrap;}
.location_etc > .title{font-size: 2.5rem; line-height: 1; font-weight: bold; color: #222222;}
.location_etc .etc > div{display: flex; align-items: center; gap: 2.5rem;}
.location_etc .etc > div + div{margin-top: 2rem;}
.location_etc .etc > div .title{display: flex; align-items: center; gap: 1rem; width: 10rem;}
.location_etc .etc > div .title p{font-size: 1.8rem; line-height: 1; color: #222222; font-weight: 500;}
.location_etc .etc > div .contents{width: calc(100% - 10rem - 2.5rem);}
.location_etc .etc > div .contents p{font-size: 1.8rem; line-height: 1; color: #666666; font-weight: 500;}

.overseas .location_etc{align-items: center;}
.overseas .location_etc .etc{display: flex; flex-wrap: wrap; gap: 0 2rem; justify-content: space-between;}
.overseas .location_etc .etc > div{width: calc((100% - 2rem)/2); padding: 2rem 0;}
.overseas .location_etc .etc > div + div{margin-top: 0;}
.overseas .location_etc .etc > div:nth-child(1){width: 100%; border-bottom: 1px solid #e6e6e6;}

/* plasterboard 2-1 석고보드란 */
/* #plasterboard{padding: 14rem 0 18rem; width: 100vw; margin-left: -50vw; left: 50%; position: relative; background: url('/images/sub/plasterboard.jpg') top; background-size: cover;}
#plasterboard .w1200 > h4{margin-bottom: 3.5rem; font-size: 4.5rem; line-height: 1; color: #fff; font-weight: bold; text-align: center;}
#plasterboard .w1200 > p{margin-bottom: 4.5rem; font-size: 2rem; line-height: 1.4; color: #fff; text-align: center; font-weight: 550;}
.plasterboard_contents{display: flex; align-items: flex-end; width: 100%; min-height: 87.5rem; background: url('/images/sub/plasterboard_bg.jpg') top center; background-size: cover; position: relative;}
.plasterboard_contents::after{font-size: 1.8rem; line-height: 1; color: #a3acb3; font-weight: 500; position: absolute; bottom: -3rem; right: 0; content: '참고 : 위키트리';}
.plasterboard_contents .textArea{padding: 5rem 3rem; background: rgba(14,145,177,0.9); text-align: center; width: 100%;}
.plasterboard_contents .textArea p{font-size: 2rem; line-height: 3.4rem; font-weight: 500; color: #fff;}
.plasterboard_contents .textArea p + p{margin-top: 4rem;} */

.plasterboard{padding: 8rem 2rem 9rem; background: url('/images/sub/plasterboard_newBG.jpg') no-repeat center; background-size: cover; margin-bottom: 15rem;}
.plasterboard > h4{font-size: 4.5rem; line-height: 1; color: #098eae; text-align: center; font-weight: bold; margin-bottom: 2rem;}
.plasterboard > p{font-size: 2rem; line-height: 2.8rem; color: #222222; text-align: center; font-weight: 550; margin-bottom: 5rem;}
.plasterboard ul{display: flex; max-width: 90rem; width: 100%; flex-wrap: wrap; margin: 0 auto; }
.plasterboard ul li{width: calc((100%)/3); padding: 6rem 3rem 8rem; margin: 0 auto;}
.plasterboard ul li .imgArea{width: 8.2rem; height: 7.2rem; display: flex; align-items: center; justify-content: center; margin : 0 auto 2.5rem;}
.plasterboard ul li .textArea{font-size: 1.8rem; line-height: 2.6rem; color: #222222; text-align: center; font-weight: 550;}
.plasterboard ul li:nth-of-type(1){background: #098eae;}
.plasterboard ul li:nth-of-type(1) .textArea{color: #fff;}
.plasterboard ul li:nth-of-type(2){background: #f2fcff;}
.plasterboard ul li:nth-of-type(3){background: #ffffff;}

.applicationArea{padding: 15rem 0; background: #f6f6f6; width: 100vw; margin-left: -50vw; left: 50%; position: relative;}
.applicationArea .w1200 > ul{display: flex; gap: 3rem; flex-wrap: wrap; }
.applicationArea .w1200 > ul > li{background: #fff; width: calc((100% - 6rem)/3);}
.applicationArea .w1200 > ul > li .textArea{position: relative; padding: 7.5rem 3rem 5.5rem;}
.applicationArea .w1200 > ul > li .textArea::before{width: 7rem; height: 7rem; position: absolute; top: -3.5rem; left: 50%; margin-left: -3.5rem; font-size: 2rem; line-height: 1; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; background-size: cover;}
.applicationArea .w1200 > ul > li:nth-of-type(1) .textArea::before{content: '01'; background-image: url('/images/sub/plasterboard_app1BG.jpg');}
.applicationArea .w1200 > ul > li:nth-of-type(2) .textArea::before{content: '02'; background-image: url('/images/sub/plasterboard_app2BG.jpg');}
.applicationArea .w1200 > ul > li:nth-of-type(3) .textArea::before{content: '03'; background-image: url('/images/sub/plasterboard_app3BG.jpg');}
.applicationArea .w1200 > ul > li h4{margin: 0 0 2rem; font-size: 3rem; line-height: 1; color: #333333; font-weight: bold; text-align: center;}
.applicationArea .w1200 > ul > li ul > li{position: relative; font-size: 1.8rem; line-height: 2.6rem; color: #666666;}
.applicationArea .w1200 > ul > li ul > li + li{margin-top: 0.5rem;}
.applicationArea .w1200 > ul > li ul > li::before{position: absolute; content: '-'; left: -1rem; top: 0;}

.Material{ padding: 15rem 0; background: #fff;}
.Material ul{display: flex; max-width: 90rem; width: 100%; margin: 0 auto; gap: 6rem; margin-top: 5rem;}
.Material ul li{width: calc((100% - 12rem)/3); max-width: 26rem;}
.Material ul li .imgArea{position: relative; width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;}
.Material ul li .imgArea img{position: absolute; top: 0; left: 0; }
.Material ul li .imgArea p{font-size: 3rem; line-height: 1.25; font-weight: bold; color: #fff; position: relative; z-index: 1;}
.Material ul li .textArea{margin-top: 2rem; font-size: 1.8rem; line-height: 2.6rem; color: #666666; text-align: center; }

.characteristic{text-align: center; padding: 15rem 0; width: 100vw; margin-left: -50vw; left: 50%; position: relative; background: #eaf0f2;}
.characteristic img{display: inline-block; margin-top: 8rem;}
/* natural 천연석고 2-1 */

.natural_top_text{display: flex; overflow: hidden; width: 100%; gap: 1rem;}
.natural_top_text .natural_top_text_title{width: 30rem;}
/* .natural_top_text .natural_top_text_title > p{padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255, 0.5); font-size: 1.8rem; line-height: 1; color: #fff; text-align: center; display: block;} */
/* .natural_top_text .natural_top_text_title > h4{padding-top: 2rem; font-size: 2.8rem; line-height: 1; color: #fff; text-align: center; font-weight: bold;} */
/* .natural_top_text .natural_top_text_title > h4 span{font-size: 1.4rem;} */

.natural_top_text ul{padding: 0 5rem; background: #f6f6f6; width: calc(100% - 30rem - 1rem); border-radius: 15px; max-height: 16rem; overflow: hidden; display: flex; justify-content: center; flex-direction: column; }
.natural_top_text ul li{position: relative; padding-left: 1rem; font-size: 1.8rem; line-height: 3rem; color: #666666;}
.natural_top_text ul li::before{position: absolute; content: ''; width: 3px; height: 3px; left: 0; top: 1.5rem; margin-top: -1.5px; background: #098eae;}
.natural_top .imgArea{display: flex; gap: 5rem; flex-wrap: wrap; margin: 5.5rem 0 15rem;}
.natural_top .imgArea .imgSide{width: 15.1rem; display: flex; justify-content: space-between; flex-direction: column; gap: 2rem;}
.natural_top .imgArea .imgCenter{width: calc(100% - 30.2rem - 10rem); border-radius: 10px; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15);}
.natural_top .imgArea .imgCenter img{max-width: none; width: 100%; object-fit: cover; max-height: none; height: 100%; border-radius: 10px;}

#natural_type{width: 100vw; left: 50%; margin-left: -50vw; position: relative; background: #f6f6f6; padding: 14rem 0 15.5rem;}
.natural_type_table table{width: 100%; border-collapse: collapse; border-top: 3px solid #222222; }
.natural_type_table table{width: 100%; border-collapse: collapse; border-top: 3px solid #222222; margin-top: 5.5rem;}
.natural_type_table table tr{position: relative;}
.natural_type_table table td{padding: 2.4rem 2rem; text-align: center; position: relative;}
.natural_type_table table td + td{border-left: 1px solid #dddddd;}
.natural_type_table table thead td{background: #666666; color: #fff; font-size: 1.8rem; line-height: 1; font-weight: bold;}
.natural_type_table table thead td.point{background: #00abc2; font-size: 2.5rem; }
.natural_type_table table tbody tr{border-bottom: 1px solid #dddddd;}
.natural_type_table table tbody tr td{background: #fff; font-size: 1.8rem; line-height: 1; color: #666666; }
.natural_type_table table tbody tr td p{ font-size: 1.8rem; line-height: 1; color: #666666;}
.natural_type_table table tbody tr td .imgArea + p{margin-top: 1rem;}
.natural_type_table table tbody tr td:nth-of-type(1){font-weight: 550; color: #333;}

.natural_type_table table span.color{font-weight: bold;}
.natural_type_table table td.point::after{width: 10px; height: calc(100% + 1px); top: 0; right: -10px; content: ''; background: #00abc2; position: absolute; z-index: 2;}
.natural_type_table table td.point::before{width: 10px; height: calc(100% + 1px); top: 0; left: -10px; content: ''; background: #00abc2; position: absolute; z-index: 2;}
.natural_type_table table tr.point_bottom::after{position: absolute; bottom: -10px; width: calc(25% + 19.5px); height: 10px; left: 25%; content: ''; background: #00abc2; margin-left: -9.75px;}
.natural_type_table table tr.point_top::after{position: absolute;top: -8px;width: calc(25% + 19.5px);height: 10px;left: 25%;content: '';background: #00abc2;margin-left: -9.75px;}

#natural_product{padding: 17rem 0 16rem;}
#natural_product ul{display: flex; gap: 6rem; flex-wrap: wrap; margin-top: 6rem; }
#natural_product ul li{width: calc((100% - 12rem)/3); border-radius: 5px; overflow: hidden; background: #f6f6f6;}
#natural_product ul li .textArea{padding: 3rem 1rem; text-align: center;}
#natural_product ul li .textArea p{ font-size: 1.8rem; line-height: 1; color: #222222; font-weight: bold;}

/* certificate 2-3 제품 인증서 */
#certificate{padding: 9rem 0 16rem; background: url('/images/sub/certificate_bg.jpg'); background-size: cover;}
#certificate .w1200 > img{margin: 0 auto 3rem; width: max-content; display: block;}
#certificate .w1200 > h4{margin-bottom: 2rem; font-size: 4.5rem; line-height: 1; font-weight: bold; text-align: center; color: #fff;}
#certificate .w1200 > p{margin-bottom: 6rem; font-size: 2rem; line-height: 1.4; font-weight: 550; color: #fff; text-align: center;}
#certificate .w1200 ul{display: flex; gap: 4rem; flex-wrap: wrap; justify-content: center;}
#certificate .w1200 ul li{width: calc((100% - 8rem)/3); max-width: 300px; cursor: pointer;}
#certificate .w1200 ul li p{padding-top: 2rem; text-align: center; font-size: 1.8rem; line-height: 2.4rem; font-weight: 550; text-align: center; color: #fff;}

/* lineup 2-4 line up*/
.lineup_nav{display: flex; gap: 1rem; justify-content: center; margin-bottom: 4rem; padding: 0 3rem;}
.lineup_nav li{padding: 2rem; border-radius: 5px; border: 1px solid #e6e6e6; background: #f6f6f6; font-size: 1.8rem; line-height: 1; color: #999999; font-weight: 550; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center;}
.lineup_nav li a{font-size: 1.8rem; line-height: 1; color: #999999; font-weight: 550;}
.lineup_nav li:is(.active, :hover){background: #0082a1; color: #fff;}
.lineup_nav li:is(.active, :hover) a{color: #fff;}

.lineup_slideWrap{padding: 14.5rem 0 15rem; width: 100vw; margin-left: -50vw; left: 50%; position: relative; background: url('/images/sub/lineup_bg.jpg'); background-size: cover;}
.lineup_slideWrap .top_text > h4{margin-bottom: 1rem; font-size: 4.5rem; line-height: 1; font-weight: bold; text-align: center; color: #fff; }
.lineup_slideWrap .top_text > p{margin-bottom: 5.5rem; font-size: 2rem; line-height: 1.4; color: #fff; text-align: center; font-weight: 550;}

.lineup_slideWrap .swiper-slide{}
.lineup_slideWrap .swiper-slide .flexArea{display: flex; }
.lineup_slideWrap .swiper-slide .flexArea > div{width: 50%;}
.lineup_slideWrap .swiper-slide .imgArea{display: flex; align-items: center; justify-content: center; background: #f0f1f0;}
.lineup_slideWrap .swiper-slide .textArea{position: relative; padding: 6.5rem 8rem; background: #fff;}
.lineup_slideWrap .swiper-slide .textArea .ab{position: absolute; width: 11rem; top: 0; left: -5.5rem;}
.lineup_slideWrap .swiper-slide .textArea > h4{font-size: 3.5rem; line-height: 1; color: #222222; font-weight: bold; margin-bottom: 3.5rem;}
.lineup_slideWrap .swiper-slide .textArea > h4 span{font-size: 1.8rem; line-height: 1; color: #999999; font-weight: 550; display: inline-block; padding-left: 2rem;}
.lineup_slideWrap .swiper-slide .textArea ul li{display: flex; gap: 2rem; justify-content: space-between; padding: 2rem 0; }
.lineup_slideWrap .swiper-slide .textArea ul li + li{border-top: 1px solid #eeeeee;}
.lineup_slideWrap .swiper-slide .textArea ul li .title{font-size: 1.8rem; color: #222222; font-weight: 550; width: 7rem; line-height: 2.4rem; white-space: nowrap;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents{font-size: 1.8rem; line-height: 1; font-weight: 500; color: #666666; line-height: 2.4rem; /* width: calc(100% - 7rem - 2rem); */ text-align: right;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .after{padding-right: 5rem; display: inline-block; position: relative;  white-space: nowrap;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .after + .after{margin-left: 1rem;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .flatboard::after{width: 4rem; height: 2rem; top: 0; right: 0; position: absolute; content: ''; background-color: #818284;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .tepaboard::after{width: 4rem; height: 2rem; top: 0; right: 0; position: absolute; content: ''; background-color: #818284;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .tepaboard::before{height: 0;top: 0;right: -0.1rem;position: absolute;content: '';border-bottom: 1rem solid transparent;border-right: 2.5rem solid #fff;z-index: 1;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .bebelboard::after{width: 4rem; height: 2rem; top: 0; right: 0; position: absolute; content: ''; background-color: #818284;}
.lineup_slideWrap .swiper-slide .textArea ul li .contents .bebelboard::before{height: 0;top: 0;right: -0.1rem;position: absolute;content: '';border-bottom: 1rem solid transparent;border-right: 1rem solid #fff;z-index: 1;}

#lineup_case {padding: 15rem 0 16rem;}
#lineup_case .swiper{margin-top: 6rem; overflow: initial; padding-bottom: 9rem; margin-bottom: 15rem;}
/* #lineup_case .swiper-wrapper{justify-content: center;} */
#lineup_case .swiper-slide{width: 38.5rem; margin-right: 2rem; box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.1);  position: relative; cursor: pointer;}
#lineup_case .swiper-slide .imgArea{width: 100%;  display: flex; align-items: center; justify-content: center; aspect-ratio: 7/8;}
#lineup_case .swiper-slide .imgArea img{object-fit: cover; max-width: none; max-height: none; width: 100%; height: 100%;}
#lineup_case .swiper-slide .textArea{padding: 3rem 4rem 2rem; background: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; height: auto; bottom: 0; left: 0;}
#lineup_case .swiper-slide .textArea h4{font-size: 2.2rem; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 1rem;}
#lineup_case .swiper-slide .textArea p{font-size: 1.8rem; line-height: 1; color: #999999;}

#lineup_case .swiper-horizontal>.swiper-scrollbar, 
#lineup_case .swiper-scrollbar.swiper-scrollbar-horizontal{left: 0; bottom: 0; width: 100%; height: 10px;}
#lineup_case .swiper-scrollbar-drag{background: var(--color1);}

.lineup_table{width: 100%; overflow-x: auto; border-top: 3px solid #222222; margin-top: 6rem;}
.lineup_table > h4{padding: 1.5rem; text-align: center; font-size: 2rem; line-height: 1; color: #222222; font-weight: bold;}
.lineup_table table{width: 100%; border-collapse: collapse; border-top: 1px solid #222222;}
.lineup_table table td{text-align: center; padding: 1rem; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;}
.lineup_table table td:last-child{border-right: none;}
.lineup_table table thead td{background: #f6f6f6; font-size: 1.7rem; line-height: 1; color: #222222; font-weight: 550;}
.lineup_table table tbody td{font-size: 1.7rem; line-height: 1; color: #666666;}
.lineup_table table tbody td:nth-of-type(1){text-align: left;}
.lineup_table table tbody td:nth-of-type(2){white-space: nowrap;}








/* overseas 3-1 해외지사 */
.overseas_top{display: flex; background: #f6f6f6; flex-wrap: wrap; padding: 5rem; border-radius: 10px; overflow: hidden;}
.overseas_top > div{width: calc((100%)/2); padding: 0 5rem;}
.overseas_top > div:nth-of-type(1){border-right: 1px solid #ccc;}
.overseas_top > div .imgArea{width: 12rem; height: 12rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 3rem;}
.overseas_top > div .textArea{font-size: 2.2rem; line-height: 3rem; color: #222222; text-align: center; font-weight: 550;}

.overseas_step{margin: 6rem auto; display: flex; gap: 4rem; flex-wrap: wrap;}
.overseas_step li{width: calc((100% - 12rem)/4); }
.overseas_step li .textArea{font-size: 1.8rem; line-height: 2.6rem; color: #222222; text-align: center; margin-top: 2.5rem; font-weight: 550;}

.overseas_view{margin-bottom: 6rem; display: flex; flex-wrap: wrap; gap: 1rem;}
.overseas_view li{width: calc((100% - 1rem)/2);}
.overseas_view li:nth-of-type(1){width: 100%;}

.map{border-radius: 10px; overflow: hidden; margin-bottom: 3rem;}
.map > h4{padding: 1.5rem; background: #098eae; font-size: 3rem; line-height: 1; color: #fff; text-align: center; font-weight: 550;}
.map iframe{width: 100%; height: 55rem;}

.map_etc{display: flex; gap: 1.5rem 10rem; flex-wrap: wrap;}
.map_etc > div{display: flex; gap: 2rem; align-items: center; min-width: 40%;}
.map_etc > div.w100{width: 100%;}
.map_etc .title{width: 10rem;display: flex; align-items: center; gap: 1rem;}
.map_etc .title p{ font-size: 1.8rem; line-height: 2.5rem; color: #222222; font-weight: 550; }
.map_etc .contents{width: calc(100% - 10rem - 2rem);}
.map_etc .contents p{ font-size: 1.8rem; line-height: 2.5rem; color: #666666; }

/* partners 4-1 유통업체 */
#partners{padding: 15rem 0; width: 100vw; margin-left: -50vw; left: 50%; position: relative; background: url('/images/sub/partners_bg.jpg'); background-size: cover;}
#partners .w1200 > h4{margin-bottom: 1rem; font-size: 4.5rem; line-height: 1; font-weight: bold; text-align: center; color: #222222; }
#partners .w1200 > p{margin-bottom: 5.5rem; font-size: 2rem; line-height: 1.4; color: #666666; text-align: center; font-weight: 550;}

#partners .w1200 > ul{display: flex; flex-wrap: wrap; gap: 4rem; counter-reset: item 0;}
/* #partners .w1200 > ul > li{width: calc((100% - 8rem)/3); border-radius: 10px; padding: 11rem 5rem 6rem; background: #098eae; position: relative; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15); transition: all ease 0.3s;} */
/* #partners .w1200 > ul > li{width: calc((100% - 8rem)/3); border-radius: 10px; padding: 6rem 5rem 6rem; background: #098eae; position: relative; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15); transition: all ease 0.3s; cursor: pointer;} */
#partners .w1200 > ul > li{width: calc((100% - 8rem)/3); border-radius: 10px; padding: 2rem 2rem 6rem; background: #098eae; position: relative; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15); transition: all ease 0.3s; cursor: pointer;}
/* #partners .w1200 > ul > li::before{width: auto; height: auto; border-bottom: 3px solid #fff; font-size: 1.8rem; line-height: 1; position: absolute; top: 4rem; left: 5rem; counter-increment: item; content: '0' counter(item); color: #fff; padding-bottom: 2px; font-weight: bold;} */
#partners .w1200 > ul > li .logoArea{background: #fff; aspect-ratio: 3/1; border-radius: 10px; display: flex; align-items: center; justify-content: center;}
#partners .w1200 > ul > li .company{font-size: 3rem; line-height: 1; color: #ffffff; font-weight: bold; padding: 3rem 0; margin: 0 2rem; border-bottom: 1px solid rgba(255,255,255, 0.15); white-space: nowrap;}
#partners .w1200 > ul > li .info{padding: 4rem 2rem 0;}
#partners .w1200 > ul > li .info .imgArea{width: 2rem;}
#partners .w1200 > ul > li .info .textArea{width: calc(100% - 1rem - 2rem);}
#partners .w1200 > ul > li .info li{display: flex; align-items: center; gap: 1rem;}
#partners .w1200 > ul > li .info li + li{margin-top: 1.5rem;}
#partners .w1200 > ul > li .info li .textArea{font-size: 1.8rem; line-height: 2.3rem; color: #fff; font-weight: 550;}
/* #partners .w1200 > ul > li .info li a.textArea:hover{text-decoration: underline;} */

.partners_location{content: url('/images/sub/partners_location.png'); }
.partners_call{content: url('/images/sub/partners_call.png'); }
.partners_link{content: url('/images/sub/partners_link.png'); }

#partners .w1200 > ul > li:hover{background: #fff;}
#partners .w1200 > ul > li:hover::before{color: #098eae !important; border-bottom-color: #098eae;}
#partners .w1200 > ul > li:hover *{color: #222222 !important;}
#partners .w1200 > ul > li:hover .company{border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
#partners .w1200 > ul > li:hover .partners_location{content: url('/images/sub/partners_location_on.png');}
#partners .w1200 > ul > li:hover .partners_call{content: url('/images/sub/partners_call_on.png');}
#partners .w1200 > ul > li:hover .partners_link{content: url('/images/sub/partners_link_on.png');}

/* project 3-2  */

#S_project ul{display: flex; gap: 4rem; flex-wrap: wrap; margin-top: 5.5rem; padding: 0 5rem;}
#S_project ul li{width: calc((100% - 8rem)/3); background: #f6f6f6; max-width: 338px; border: 1px solid #ddd;}
#S_project ul li .textArea{ padding: 3rem 1rem 5rem;}
#S_project ul li .textArea h4{font-size: 1.8rem; line-height: 1; color: #222222; font-weight: bold; text-align: center; margin-bottom: 1rem;}
#S_project ul li .textArea p{font-size: 1.8rem; line-height: 2.4rem; color: #666666; text-align: center; position: relative; padding: 0 2rem; width: max-content; margin: 0 auto;}
#S_project ul li .textArea p::before{position: absolute; content: ''; width: 1.2rem; height: 1.9rem; background: url('/images/sub/address.png'); background-size: cover; top: 1.2rem; left: 0; margin-top: -0.95rem; }












/* video 5-2  */
ul.video{display: flex; gap: 4rem; flex-wrap: wrap;}
ul.video li{width: calc((100% - 8rem)/3); border: 1px solid #dddddd;}
ul.video li .imgArea{width: 100%; aspect-ratio: 5/3; background: #fff; display: flex; align-items: center; justify-content: center;}
ul.video li .imgArea img{max-width: none;object-fit: cover;width: 100%;}
ul.video li .textArea{background: #f6f6f6; padding: 3rem 1rem; text-align: center;}
ul.video li .textArea h4{font-size: 1.8rem; line-height: 2rem; height: 4rem; color: #222222; font-weight: 550; margin-bottom: 1rem; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
ul.video li .textArea p{font-size: 1.7rem; line-height: 2rem; color: #999999;}











@media only screen and (max-width : 1600px){

}
@media only screen and (max-width : 1520px){

}
@media only screen and (max-width : 1440px){

}
@media only screen and (max-width : 1360px){

}
@media only screen and (max-width : 1260px){
    .vgsi_contents .textArea{padding: 2rem 1rem 2rem 3rem;}

    .natural_top .imgArea{gap: 3rem;}
    .natural_top .imgArea .imgCenter{width: calc(100% - 30.2rem - 6rem);}

    #S_project ul{padding: 0;}

    .overseas_top{padding: 5rem 2rem;}
    .overseas_top > div{padding: 0 1rem;}

    #partners .w1200 > ul{gap: 3rem;}
    #partners .w1200 > ul > li{width: calc((100% - 6rem)/3); padding: 2rem 2rem 6rem;}
    #partners .w1200 > ul > li::before{left: 3rem;}
    #partners .w1200 > ul > li .info li{align-items: flex-start;}

    ul.video{gap: 3rem;}
    ul.video li{width: calc((100% - 6rem)/3);}





}
@media only screen and (max-width : 1180px){
    .vgsi_contents .imgArea{width: 100%;}
    .vgsi_contents .imgArea img{max-width: none; width: 100%;}
    .vgsi_contents .textArea{width: 100%; height: auto; overflow: initial; padding: 4rem 5rem;}
    .vgsi_contents .textArea ul li{padding: 2rem 0;}

}
@media only screen and (max-width : 1024px){
    #management ul li .imgArea{width: max-content;}
    #management ul li .textArea{width: 100%; padding: 0;}
    #management ul li:nth-of-type(even){flex-direction: initial; text-align: left;}
    #management ul li:nth-of-type(even) .imgArea{margin-left: auto;}

    .natural_top .imgArea .imgSide{width: 100%; display: flex; justify-content: space-between; flex-direction: row; gap: 3rem;}
    .natural_top .imgArea .imgCenter{width: 100%; border-radius: 10px; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.15);}
    .natural_top .imgArea .imgCenter img{max-width: 100%; object-fit: initial; max-height: 100%; height: 100%; border-radius: 10px;}

    .natural_type_table{overflow-x: auto; padding: 3rem 0;}
    .natural_type_table table{min-width: 102.4rem;}

    .overseas_step{gap: 3rem;}
    .overseas_step li{width: calc((100% - 9rem)/4); }

    .lineup_slideWrap .swiper-slide .flexArea{flex-wrap: wrap;}
    .lineup_slideWrap .swiper-slide .flexArea > div{width: 100%;}
    .lineup_slideWrap .swiper-slide .textArea .ab{position: absolute;width: 11rem;top: -5rem;left: calc(50% - 5.5rem);}

    #partners .w1200 > ul > li{padding: 2rem 2rem 0;}
    #partners .w1200 > ul > li .company{margin: 0; padding: 3rem 2rem;}
    #partners .w1200 > ul > li .info{padding: 4rem 0;}

    #S_project ul{display: flex; gap: 3rem;}
    #S_project ul li{width: calc((100% - 6rem)/3);}
}
@media only screen and (max-width : 860px){
    #management ul li:nth-of-type(4) .imgArea .ab{left: -175px;}
}
@media only screen and (max-width : 768px){
    #management ul li .imgArea .ab{opacity: 0.85;}
    #management ul li .imgArea::after{display: none;}
    #management ul li:nth-of-type(1) .imgArea .ab{right: 10px;}
    #management ul li:nth-of-type(2) .imgArea .ab{left: 10px;}
    #management ul li:nth-of-type(3) .imgArea .ab{right: 10px; }
    #management ul li:nth-of-type(3) .imgArea .ab p{color: #fff;}
    #management ul li:nth-of-type(4) .imgArea .ab{left: 10px;}

    #natural_product ul{gap: 3rem;}
    #natural_product ul li{width: calc((100% - 6rem)/3);}

    #partners .w1200 > ul > li{width: calc((100% - 3rem)/2);}

    .map_etc > div{width: 100%;}

}
@media only screen and (max-width : 640px){
    .vgsi_contents .textArea{width: 100%; height: auto; overflow: initial; padding: 2rem 3rem;}
    
    #ceo_focus .w1200 > div{padding: 5rem 7rem; width: 100%;}
    .ceo_focus_title{text-align: left;}

    .location_etc{gap: 3rem 9rem;}
    .location_etc .etc{width: 100%;}
    .location_etc .etc > div{align-items: flex-start;}
    .location_etc .etc > div .title{width: 10rem;}
    .location_etc .etc > div .contents{width: calc(100% - 2.5% - 10rem);}
    .location_etc .etc > div .contents p{line-height: 18px;}

    /* .lineup_nav{display: none;} */
    .lineup_nav{flex-wrap: wrap; padding: 0;}
    .lineup_nav li{width: calc((100% - 1rem)/2); text-align: center;}
    .lineup_slideWrap .swiper-slide .textArea{padding: 6.5rem 3rem;}
    #lineup_case .swiper-wrapper{justify-content: initial;}

    .lineup_table table{min-width: 84rem;}

    .natural_top_text{flex-wrap: wrap;}
    .natural_top_text .natural_top_text_title{width: 100%;}
    .natural_top_text .natural_top_text_title img{max-width: none; width: 100%; object-fit: cover;}
    .natural_top_text ul{width: 100%; max-height: none; padding: 4rem 3rem;}

    .overseas_top{padding: 0 3rem;}
    .overseas_top > div{width: 100%; padding: 3rem 0;}
    .overseas_top > div:nth-of-type(1){border-right: none; border-bottom: 1px solid #ccc;}
    
    .overseas_step{gap: 3rem;}
    .overseas_step li{width: calc((100% - 3rem)/2); }

    .map_etc > div{align-items: flex-start;}
    .map_etc .contents p{line-height: 18px;}



    #S_project ul li{width: calc((100% - 3rem)/2);}

    ul.video{gap: 3rem;}
    ul.video li{width: calc((100% - 3rem)/2);}

    .plasterboard ul li{padding: 6rem 1rem 8rem;}
    .applicationArea .w1200 > ul > li .textArea{position: relative; padding: 7.5rem 2rem 5.5rem;}
    .Material ul{gap: 6rem 3rem; margin : 5rem auto 0 ; justify-content: center;}
    .Material ul li{width: calc((100% - 6rem)/3); max-width: 26rem;}

}
@media only screen and (max-width : 480px){
    #management ul li .imgArea .ab p{font-size: 5rem;}
    #ceo_focus .w1200 > div{padding: 5rem 3rem; width: 100%;}

    #natural_product ul{justify-content: center;}
    #natural_product ul li{width: 100%; max-width: 36rem;}
    #natural_product ul li .textArea{padding: 3rem 1rem;}
    /* #natural_product ul li .textArea p{font-size: 18px;} */

    #certificate .w1200 ul li{width: calc((100% - 4rem)/2); max-width: 30rem;}

    .plasterboard ul li{width: 100%; padding: 6rem 3rem;}
    .applicationArea .w1200 > ul > li{width: 100%;}
    .applicationArea .w1200 > ul > li .textArea{padding: 7.5rem 3rem 5.5rem;}
    .applicationArea .w1200 > ul > li .imgArea img{max-width: none; width: 100%; object-fit: cover;}
    .Material ul{flex-wrap: wrap;}
    .Material ul li{width: calc((100% - 3rem)/2);}
}
@media only screen and (max-width : 400px){
    #certificate .w1200 ul li{width: 100%; max-width: 30rem;}

    #partners .w1200 > ul > li{width: 100%;}

}
@media only screen and (max-width : 360px){
    ul.video li{width: 100%;}
}