@charset "utf-8";

#comingsoon{width:100%;padding-top:100px;text-align:center}

/* pgcm */
.pgcm{letter-spacing:-0.02em}
.pgcm .pl{white-space:pre-line}
.pgcm .tit{font-weight:700;text-align:center;font-family:var(--e-font),var(--k-font)}
.pgcm .tit span{color:var(--primary);font-size:15px;text-transform:uppercase}
.pgcm .tit p{margin-top:16px;color:#111;font-size:34px;line-height:1.3}
.pgcm .tit p b{color:var(--primary);font-weight:700}
.pgcm .tit div{margin-top:22px;color:#666;font-size:18px;font-weight:400;line-height:1.6;font-family:var(--k-font)}
.pgcm .tit div b{color:#222}

/* p33 개요 */
#p33 .cont > div{margin:78px auto 86px;width:450px}
#p33 .cont > div img{display:block;width:100%}

#p33 .cont ul{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
#p33 .cont ul li{padding:54px 0 91px;border-radius:20px;text-align:center}
#p33 .cont ul li:nth-child(2n-1){background-color:#f7f7f7}
#p33 .cont ul li:nth-child(2n){border:1px solid #e1e1e1}
#p33 .cont ul li span{display:inline-block;margin:0 auto;padding:3px 0;width:191px;color:#222;border:1px solid #333;border-radius:14px;font-size:14px;font-weight:700;text-align:center;font-family:var(--e-font)}
#p33 .cont ul li div{margin:61px 0 66px}
#p33 .cont ul li div img{display:block;margin:0 auto}
#p33 .cont ul li p{color:#666;font-size:16px;line-height:1.5}

/* p34 인사말&경영이념 */
#p34{font-family:var(--k-font)}
#p34 .tit{margin-bottom:40px;padding-bottom:28px}
#p34 .tit2{border-bottom:1px solid #e1e1e1}
#p34 .sub_tit{color:#222;font-size:24px;font-weight:700;line-height:1.5}
#p34 .sub_tit span{color:var(--primary)}
#p34 .cont1 ul{display:flex;align-items:center;justify-content:center;gap:20px}
#p34 .cont1 ul li div{margin-top:36px;color:#777;font-size:16px;line-height:26px;letter-spacing:-0.02em}
#p34 .cont1 ul li div span{color:#222;font-weight:700}

#p34 .tit2{margin-top:110px}
#p34 .cont2 .sub_tit{margin-bottom:50px;text-align:center}
#p34 .cont2 .img_box{margin:47px auto 67px;padding:62px 0;width:1018px;border:1px solid #e1e1e1;border-radius:20px}
#p34 .cont2 .img_box img{display:block;margin:0 auto}
#p34 .cont2 ul div{display:flex;gap:40px;margin-bottom:42px}
#p34 .cont2 ul > div:nth-child(2n){flex-direction:row-reverse}
#p34 .cont2 ul li{width:100%;font-family:var(--e-font),var(--k-font)}
#p34 .cont2 ul li:nth-child(2){padding:44px 0 0 21px}
#p34 .cont2 ul li img{display:block;border-radius:20px}
#p34 .cont2 ul li span{display:block;margin-bottom:7px;color:var(--primary);font-size:16px;font-weight:700}
#p34 .cont2 ul li b{display:block;margin-bottom:23px;color:#222;font-size:28px;font-weight:700}
#p34 .cont2 ul li p{position:relative;margin-bottom:2px;padding-left:23px;color:#777;font-size:16px}
#p34 .cont2 ul li p::before{position:absolute;top:50%;left:2px;transform:translateY(-50%);display:block;content:'';width:3px;height:3px;background-color:var(--primary);border-radius:100%}


/* p35 연혁 */
#p35{padding-bottom:50px;position:relative;font-size:16px;letter-spacing:-.3px;line-height:1.8;color:#777}
#p35 .tit{margin-bottom:40px}
#p35 .tit span{padding-bottom:10px;font-family:var(--e-font)}
#p35 .tit b{color:var(--primary)}
#p35 .history{padding:15px 0 0 35px;margin-left:30px;border-left:1px dashed #e1e1e1}
#p35 .history dl{margin:0 0 35px 10px;padding-bottom:30px;border-bottom:1px dashed #e1e1e1}
#p35 .history dl dt{position:relative;padding-bottom:10px;color:#222;font-size:17px;font-weight:700;font-family:var(--e-font)}
#p35 .history dl dt:before{content:"";display:block;position:absolute;left:-55px;top:6px;width:19px;height:19px;border:4px solid #222;border-radius:19px;background-color:#fff}
#p35 .history dl.last{border-bottom:none}
#p35 .history dl dd span{float:left;padding-right:20px;color:#222;font-weight:600;font-family:var(--e-font)}

/* p38 pvc리사이클 */
#p38 .cont{margin-top:77px}
#p38 .cont .cont_tit{color:#111;font-size:30px;font-weight:777;text-align:center}
#p38 .cont .cont_txt{border-radius:20px}
#p38 .cont .cont_txt1{height:344px;background:url('/sh_page/img/p38_img01.jpg') no-repeat center / cover}
#p38 .cont .cont_txt1 span{font-weight:700}
#p38 .cont .cont_txt2{margin-bottom:70px;height:344px;background:url('/sh_page/img/p38_img02.jpg') no-repeat center / cover}
#p38 .cont .cont_tit{margin:55px 0 29px} 
#p38 .cont .cont_txt p{color:#fff;font-size:16px;padding:47px 43px;line-height:1.6;font-weight:500}
#p38 .cont .txt{color:#666;font-size:18px;text-align:center;line-height:1.5}
#p38 .cont .txt b{padding:3px 5px;background-color:var(--primary);color:#fff;font-size:18px;font-weight:600}


/* p39 pvc생산공정 */
#p39 .img_area{margin:62px auto 33px;padding:51px 0;width:1170px;background-color:#f7f7f7;border-radius:20px}
#p39 .img_area img{display:block;margin:0 auto}
#p39 .txt_area ul{padding:0 35px}
#p39 .txt_area ul li.txt{display:flex;gap:31px;padding:36px 0 40px;border-bottom:1px solid #e1e1e1}
#p39 .txt_area ul li.txt:nth-last-child(1){border-bottom:none}
#p39 .txt_area ul li.txt span{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:100%;background-color:var(--primary);color:#fff;font-size:15px;font-weight:700;font-family:var(--e-font)}
#p39 .txt_area ul li.txt b{padding-top:6px;width:228px;color:#222;font-size:18px;font-weight:700}
#p39 .txt_area ul li.txt p{padding-top:3px;color:#666;font-size:16px;line-height:1.8}
#p39 .txt_area ul li.txt p strong{font-weight:600}
#p39 .txt_area ul li.m_img, 
#p39 .txt_area ul li.m_img img{display:none}



/* p42 ESG경영 */
#p42 ul{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
#p42 ul li{padding-top:40px;height:500px;border-radius:20px}
#p42 ul li:nth-child(1){background:url('/sh_page/img/p42_img01.jpg') no-repeat center / cover}
#p42 ul li:nth-child(2){background:url('/sh_page/img/p42_img02.jpg') no-repeat center / cover}
#p42 ul li:nth-child(3){background:url('/sh_page/img/p42_img03.jpg') no-repeat center / cover}
#p42 ul li span{display:block;padding-bottom:5px;color:#fff;font-size:20px;font-weight:700;text-align:center;opacity:.5;font-family:var(--e-font)}
#p42 ul li p{color:#fff;font-size:28px;font-weight:700;text-align:center}

#p42 ol{margin-top:0;padding-left:0}
#p42 ol li{display:flex;gap:62px;padding:63px 0 63px 37px}
#p42 ol li:nth-child(2n){background-color:#f7f7f7}
#p42 ol li span{width:100px;color:var(--primary);font-size:80px;font-weight:700;line-height:0.8;font-family:var(--e-font)}
#p42 ol li div b{display:block;margin-bottom:26px;color:#222;font-size:20px;font-weight:700}
#p42 ol li div p{color:#666;font-size:16px;line-height:26px}

/* p43 환경경영 */
#p43 .cont ol{margin:53px auto 0;padding:0;width:820px;list-style:none}
#p43 .cont ol li{position:relative;padding:31px 0;border:1px solid #e1e1e1;border-radius:20px}
#p43 .cont ol li span{display:block;margin:0 auto 19px;padding:6px 0;width:74px;background-color:#333;color:#fff;font-size:16px;font-weight:700;border-radius:50px;text-align:center}
#p43 .cont ol li p{color:#666;font-size:20px;line-height:30px;text-align:center}
#p43 .cont ol li:nth-child(2) span{background-color:var(--primary)}
#p43 .cont ol li:nth-child(2) p{color:#222;font-weight:600}
#p43 .cont ol li:nth-child(1){margin-bottom:84px}
#p43 .cont ol li:nth-child(2){margin-bottom:41px}
#p43 .cont ol li:nth-child(1):after{position:absolute;content:"";top:120%;left:50%;transform:translateX(-50%) rotate(90deg);border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid var(--primary)}
#p43 .cont div{margin-bottom:94px}
#p43 .cont div img{display:block;margin:0 auto}
#p43 .cont ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#p43 .cont ul li span{display:block;padding:23px 0;background-color:var(--primary);color:#fff;border-radius:20px 20px 0 0 ;font-size:18px;font-weight:700;text-align:center}
#p43 .cont ul li div{padding:31px 26px;height:161px;box-shadow:0 4px 16px rgba(0,0,0,0.06);border-radius:0 0 20px 20px}
#p43 .cont ul li div p{position:relative;margin-bottom:9px;padding-left:16px;color:#666;font-size:16px;line-height:21px}
#p43 .cont ul li div p::before{position:absolute;top:9px;left:0;display:block;content:'';width:3px;height:3px;background-color:var(--primary);border-radius:100%}

/* p44 지속가능제품 */
#p44 .cont{display:flex;align-items:center;gap:36px;margin-top:73px}
#p44 .cont .img_area{border:1px solid #e1e1e1;border-radius:20px}
#p44 .cont .img_area img{display:block;width:100%;border-radius:20px}
#p44 .cont ul li{margin-bottom:3px}
#p44 .cont ul li span{position:relative;display:block;padding:15px 0 16px 20px;color:#222;font-size:20px;font-weight:700;border-bottom:1px solid #e1e1e1}
#p44 .cont ul li span::before{position:absolute;top:50%;left:1px;transform:translateY(-50%);display:block;content:'';background-color:var(--primary);width:3px;height:3px;border-radius:100%}
#p44 .txt{margin-top:21px;color:#666;font-size:16px;line-height:26px}
#p44 .txt strong{padding:3px 5px;background-color:var(--primary);color:#fff}
#p44 .txt b{color:#222;font-weight:700}
#p44 ol{margin-top:49px;padding:0;list-style:none}
#p44 ol li{padding:50px}
#p44 ol li:nth-child(2n-1){background-color:#f7f7f7}
#p44 ol li:nth-child(2n){background-color:#fff}
#p44 ol li .img_box{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
#p44 ol li:nth-child(2n-1) .img_box div{background-color:#fff}
#p44 ol li:nth-child(2n) .img_box div{background-color:#f7f7f7}
#p44 ol li .img_box div{border-radius:20px}
#p44 ol li .img_box div img{border-radius:20px}
#p44 ol li .txt_box div{margin:40px 0 24px;padding-bottom:19px;border-bottom:1px solid #e1e1e1}

/* p49 기업부설연구소 */
#p49{position:relative}
.tab_area{position:sticky;top:0;z-index:10;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:20px 10px;text-align:center;background:rgba(255,255,255,.5)}
.tab_area a{display:inline-block;padding:10px 25px;border-radius:50px;font-size:18px;font-weight:600;color:var(--primary);background:#f2f2f2;transition:all .3s}
.tab_area a:hover{color:#fff;background:var(--primary)}
#p49 #lab{margin-top:50px}
#p49 ol{margin-top:80px;padding:0 50px}
#p49 ol li{display:flex;justify-content:space-between;gap:50px;margin-bottom:38px}
#p49 ol li:nth-child(2n-1){flex-direction:row-reverse;justify-content:start}
#p49 ol li .txt_area{padding:28px 0 0 19px;width:50%;letter-spacing:-0.02em}
#p49 ol li .txt_area span{position:relative;display:block;margin-bottom:32px;padding-left:19px;color:#222;font-size:22px;font-weight:700}
#p49 ol li .txt_area span::before{position:absolute;top:50%;left:0;display:block;content:'';transform:translateY(-50%);width:5px;height:5px;background-color:var(--primary);border-radius:100%}
#p49 ol li .txt_area p{color:#666;font-size:16px;line-height:28px}
#p49 ol li .img_area img{border-radius:20px}
#p49 ol li:nth-child(3) .img_area{width:525px;height:303px;overflow:hidden}
#p49 ol li:nth-child(3) .img_area img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}


/* 반응형 [s] */
@media (max-width:1200px){
#p34 .cont2 ul{margin:0 10px}
#p38 .cont{margin:77px 10px 0 10px}
#p39 .img_area{width:100%}

#p42 ol li{display:block}
#p42 ol li span{display:block;margin-bottom:20px}

#p43 .cont div img{width:100%}

#p44 ol li .img_box div img{display:block;width:100%}

#p49 ol li .img_area img{display:block;width:100%}
#p49 ol li .txt_area p.pl{white-space:normal}

}
@media (max-width:1100px){
#p34 .cont1 ul{display:block}
#p34 .cont1 ul li{margin-top:50px;text-align:center}
#p34 .cont1 ul li img{display:block;margin:0 auto}

#p43 .cont ul li div{height:200px}

#p39 .img_area img{width:97%}
}
@media (max-width:1024px){
#p39 .txt_area ul li.txt{gap:14px}
#p39 .txt_area ul li.txt b{width:auto}

#p44 .cont{display:block}
#p44 .cont .img_area{margin:0 auto;width:50%}
#p44 .cont ul{margin-top:40px;padding:0 30px}

#p44 ol li{padding:50px 25px}

#p49 ol li{display:block}
#p49 ol li .txt_area{width:100%}
#p49 ol li:nth-child(3) .img_area{width:100%;height:100%}
#p49 ol li .txt_area span{font-size:20px}
}
@media (max-width:910px){
#p34 .cont2 ul div{display:block}
#p34 .cont2 ul li{margin:0 auto;padding:0;text-align:center}
#p34 .cont2 ul li img{margin:0 auto}
#p34 .cont2 ul li p{display:inline-block}
#p34 .cont2 ul li p::before{left:14px}
#p34 .cont2 p.pl{white-space:normal}

#p39 .txt_area ul li.txt{display:block;border-bottom:none}
#p39 .txt_area ul li.txt span{display:inline-block;margin-right:14px;padding:5px 8px}
#p39 .txt_area ul li.txt p{margin-top:13px;padding-top:13px;border-top:1px solid #e1e1e1}

#p42 ul{grid-template-columns:repeat(1,1fr)}
#p42 ul li{height:145px}
#p42 ul li p{font-size:26px}
#p42 ol li div p.pl{white-space:normal}
#p42 ol li span{font-size:70px}

#p43 .cont ol{width:auto}
#p43 .cont ul{display:block}
#p43 .cont ul li div{margin-bottom:30px;height:auto}

#p44 .cont .img_area{width:55%}

} 
@media (max-width:768px){
.pgcm .tit p{font-size:30px}
.pgcm .tit div{font-size:16px}
#p33 .tit{margin:0 10px}
#p33 .tit div.pl{white-space:normal}
#p33 .cont > div{margin-bottom:40px}
#p33 .cont > div img{width:100%}
#p33 .cont ul{grid-template-columns:repeat(1,1fr)}
#p33 .cont ul li{padding:40px 0}
#p33 .cont ul li div{margin:31px 0}
#p33 .cont ul li div img{width:80px}
#p34 .cont2 ul li:nth-child(2){padding:32px 0 0 0px}
#p34 .cont2 ul li b{margin-bottom:14px}
#p39 .img_area{margin:33px 0;padding:4% 0}
#p39 .txt_area ul li.txt{padding:0 0 40px}
#p42 ol li span{margin-bottom:14px;font-size:60px}
#p43 .cont ol li p{white-space:normal}
#p44 .cont .img_area{width:60%}
#p44 ol li{padding:50px 10px}
#p44 ol li .img_box{gap:10px}
#p44 ol li .txt_box div{margin:27px 0 20px}
#p44 ol li .txt_box div img{width:100px}
#p49 ol{padding:0 10px}
}
@media (max-width:600px){
#p34 .cont1 ul li img{width:100%}
#p34 .cont2 ul li img{width:100%}
#p38 .cont .cont_txt1{height:auto;background:url(/sh_page/img/p38_img01_m.jpg)no-repeat center / cover;}
#p38 .cont .cont_txt2{height:auto;background:url(/sh_page/img/p38_img02_m.jpg)no-repeat center / cover;}
#p38 .cont .cont_txt p.pl{position:relative;white-space:normal;z-index:10}
#p38 .cont .cont_txt{position:relative}
#p38 .cont .cont_txt::before{position:absolute;top:0;left:0;display:block;content:'';width:100%;height:100%;background-color:#222;opacity:0.2;z-index:1;border-radius:20px}
#p44 .cont .img_area{width:70%}
}
@media (max-width:480px){
.pgcm .tit{margin-top:20px}
.pgcm .tit p{font-size:24px}
.pgcm .tit div.pl{white-space:normal}
#p33 .cont > div{width:100%}
#p33 .cont ul li div{margin:31px 0}
#p33 .cont ul li div img{width:70px}

#p34 .sub_tit{font-size:22px}
#p34 .cont2 ul li:nth-child(2){padding:29px 0 0 0}
#p34 .cont2 ul div{margin-bottom:36px}
#p34 .cont2 ul li b{font-size:20px}

.p35 .history{margin-left:20px}
.p35 .history{padding:15px 15px 0}
.p35 .history dl dt:before{left:-35px}
.p35 .history dl dd span{padding-right:10px}

#p39 .txt_area ul{margin-top:50px;padding:0}
#p39 .img_area{display:none}
#p39 .txt_area ul li.txt{padding:0 5px 40px 5px}
#p39 .txt_area ul li.m_img, 
#p39 .txt_area ul li.m_img img{display:block;width:100%}
#p39 .txt_area ul li.m_img{margin:0 0 30px}
#p39 .txt_area ul li.m_img img{padding:20px;background-color:#f7f7f7;border-radius:10px}

#p42 ul{gap:10px}
#p42 ul li{padding-top:23px;height:110px}
#p42 ul li p{font-size:22px}
#p42 ol li{padding:30px 10px}
#p42 ol li div b{margin-bottom:14px}

#p43 .cont ol li{padding:20px 0}
#p43 .cont ol li span{margin:0 auto 14px}
#p43 .cont ol li p{padding:0 10px;font-size:18px}
#p43 .cont ol li:nth-child(1){margin-bottom:50px}
#p43 .cont ol li:nth-child(1):after{top:110%}
#p43 .cont div{margin-bottom:45px}
#p43 .cont ul li div{padding:19px 17px}
#p43 .cont ul li span{padding:17px 0;font-size:16px}

#p44 .cont .img_area{width:90%}
#p44 .cont ul{padding:0 10px}
#p44 .txt.pl{white-space:normal}
#p44 .txt{padding:0 0 20px}
#p44 .txt strong{padding:0;background-color:#fff;color:var(--primary);font-weight:700}

#p49 ol{margin-top:45px}
#p49 ol li .txt_area span{margin-bottom:16px}
}
/* 반응형 [e] */