@charset "utf-8";

#comingsoon{width:100%;padding-top:100px;text-align:center}
.pgcm {font-size:16px;color:#777;word-break:keep-all;font-family:"notokr-regular"}
.pgcm .pl{white-space:pre-line}
.pgcm p, .pgcm span, .pgcm ul li, .pgcm dl dd, .pgcm div{word-break:keep-all}
/* pgcm */
.pgcm .tit_area{margin-bottom:60px;text-align:center}
.pgcm .tit_area b{display:block;margin-bottom:20px;font-size:14px;font-weight:700;color:#29166f;font-family:"poppins"}
.pgcm .tit_area p{margin-bottom:25px;font-size:30px;color:#222;font-family:"notokr-bold"}
.pgcm .tit_area span{display:block;border-radius:10px;padding:30px;background:#f7f7f7;line-height:1.8}
.business .tit_area{text-align:center}
.business .tit_area p{font-size:35px}
/* p33 */
#p33 .top{display:flex;align-items:flex-start}
#p33 .top .left{width:40%;padding:60px}
#p33 .top .left b{font-size:15px;font-weight:700;color:#29166f;;font-family:"poppins"}
#p33 .top .left p{padding-top:20px;font-size:32px;color:#222;white-space:pre-line;font-family:"notokr-light"}
#p33 .top .left p span{font-family:"notokr-bold"}
#p33 .top .right{width:60%;padding:60px;background:#f7f7f7}
#p33 .top .right > span{display:block;padding-bottom:20px;font-size:18px;font-weight:700;color:#222;font-family:"poppins"}
#p33 .top .right > span b{color:var(--primary)}
#p33 .top .right p{line-height:1.8;white-space:pre-line}
#p33 .top .right p span{text-decoration:underline}
#p33 .tb_wrap{overflow-x:auto;margin-top:40px}
#p33 .tb_wrap table{width:100%;border-collapse:collapse;border-top:2px solid var(--primary);text-align:center}
#p33 .tb_wrap table tr{border-bottom:1px dotted #e1e1e1}
#p33 .tb_wrap table tr th{padding:20px 10px;color:#222;background:#f7f7f7}
#p33 .tb_wrap table tr td{padding:20px 10px}
#p33 > img{width:100%}
/* p36 */
#p36 .tit_area p{font-size:30px;color:#222;font-family:"notokr-light"}
#p36 .tit_area p span{display:inline-block;position:relative;padding:0;background:none;font-family:"notokr-bold"}
#p36 .tit_area p span::before{content:"";display:inline-block;position:absolute;top:20px;width:100%;height:17px;z-index:-1;background:rgba(62, 200, 144, 0.2)}
#p36 ul{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
#p36 ul li{display:flex;align-items:center;justify-content:center;;flex-direction:column;box-shadow:0px 2px 6px rgba(0,0,0,.1)}
#p36 ul li img{width:80%;padding:20px 0}
#p36 ul li p{width:80%;padding:15px 0;border-top:1px solid #e1e1e1;color:#222;text-align:center;font-family:"notokr-medium"}

/* #p38 */
#p38 dl{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
#p38 dl p{position:relative;margin-bottom:10px;padding-left:35px;font-size:20px;color:#222;font-family:"notokr-bold"}
#p38 dl p::before{content:"";display:inline-block;position:absolute;top:12px;left:15px;width:6px;height:6px;border-radius:100%;background:#222}
#p38 dl .img_area{position:relative}
#p38 dl .img_area ul{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;height:100%;width:100%;position:absolute;top:0;left:0;padding:20px;border-radius:10px;background:rgba(0, 0, 0, 0.8);transition:0.3s}
#p38 dl .img_area ul li{display:flex;align-items:center;justify-content:center;gap:15px;width:180px;padding:13px;border-radius:50px;border:1px solid #fff;font-size:15px;color:#fff;font-family:"notokr-medium"}
#p38 dl .img_area ul li b{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:5px;font-size:12px;font-weight:700;color:var(--primary);background:rgba(62, 200, 144, 0.1);font-family:"poppins"}
#p38 dl .img_area img{width:100%;border-radius:10px}


/* #p39 */
.business .point ul{display:flex;align-items:center;justify-content:space-between;gap:20px}
.business .point ul li{display:flex;flex-direction:column;align-items:center;width:100%}
.business .point ul li div b{display:inline-block;margin-bottom:20px;padding:12px 35px;border-radius:50px;font-size:13px;font-weight:700;color:#fff;background:var(--primary);font-family:"poppins"}
.business .point ul li div{height:237px;width:100%;padding:40px;text-align:center;background:#fff;border-radius:0 0 10px 10px;box-shadow:0px 2px 12px rgba(0,0,0,.1)}
.business .point ul li div p{margin:0 0 10px;font-size:18px;color:#222;font-family:"notokr-bold"}
.business .point ul li div span{display:block;line-height:1.8}
.business .point ul li img{width:100%;border-radius:10px 10px 0 0}

/* 포장사업부 - 포트폴리오 */
.portfolio .more_btn{display:flex;align-items:center;justify-content:center;width:160px;height:50px;margin:55px auto 0;border-radius:35px;border:1px solid var(--primary);font-size:16px;color:var(--primary);line-height:50px;text-align:center;line-height:1.6;transition:all .3s}
.portfolio .more_btn:hover{background:var(--primary);color:#fff}
.portfolio ul{display:flex;align-items:center;justify-content:space-between;gap:20px}
.portfolio ul li{width:calc(100% / 4.5)}
.portfolio ul li .img{overflow:hidden;width:100%;height:260px;border-radius:12px}
.portfolio ul li .img img{height:100%;width:100%;object-fit:cover;transition:all .3s}
.portfolio ul li:hover .img img{transform:scale(1.08)}
.portfolio ul li p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:30px 0 8px;font-size:19px;font-weight:600;color:#000}
.portfolio ul li p span{margin-right:15px;font-size:18px;color:var(--primary);font-family:'Poppins'}
.portfolio ul li .txt{width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:#aaa}

.business .cont+.cont{margin-top:80px}
.business .cont .sub_tit{display:flex;align-items:center;gap:20px;padding-bottom:25px;margin-bottom:30px;border-bottom:1px solid #e1e1e1}
.business .cont .sub_tit b{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:5px;font-size:13px;text-align:center;font-weight:700;color:#fff;background:var(--primary);font-family:"poppins"}
.business .cont .sub_tit p{font-size:25px;color:#222;font-family:"notokr-bold"}
.business .step ul{display:flex;align-items:center;justify-content:center;gap:50px}
.business .step ul li{display:flex;align-items:center;flex-direction:column;justify-content:flex-start;gap:25px;position:relative;width:calc(100% / 4);height:296px;padding-top:25px;border-radius:10px;background:#f7f7f7}
.business .step ul li b{padding:8px 18px;border-radius:50px;font-size:15px;font-weight:700;color:#29166f;font-family:"poppins"}
.business .step ul li p{font-size:15px;color:#222;text-align:center;font-family:"notokr-medium"}
.business .step ul li::before{content: url( "/sh_page/img/left_icon.png");position:absolute;right:-34px;top:50%;transform:translateY(-50%)}
.business .step ul li:nth-child(5)::before{display:none}
.business .step > p{margin-top:10px;color:#777;text-align:right;font-family:"notokr-medium"}
.business .step ul li img{border-radius:10px}
.business .cont02 ul li{display:flex;align-items:center;justify-content:space-between}
.business .cont02 ul li > div{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%}
.business .cont02 ul li > div b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:100%;font-size:14px;font-weight:700;color:#fff;background:var(--primary);font-family:"poppins"}
.business .cont02 ul li > div p{padding:15px 0;font-size:18px;color:#222;font-family:"notokr-medium"}
.business .cont02 ul li:nth-child(2n){flex-direction:row-reverse}
.business .cont02 ul li img{border-radius:10px}

.business .type ul{display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:40px}
.business .type ul li{font-size:17px;color:#222;text-align:center;font-family:"notokr-medium"}
.business .type ul li p{padding-top:20px}
.business .type ul li img{width:100%;border-radius:10px}

.business .advantage ul{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}
.business .advantage ul li{display:flex;align-items:center;width:100%;padding:35px 30px;border:1px solid #e1e1e1;border-radius:10px}
.business .advantage ul li:nth-child(2n){background:#f7f7f7;border:none}
.business .advantage ul li div{display:flex;align-items:center;gap:40px;width:33%}
.business .advantage ul li b{padding:13px 45px;border-radius:50px;border:2px solid var(--primary);font-size:13px;font-weight:700;color:#222;font-family:"poppins"}
.business .advantage ul li p{font-size:18px;color:#222;font-family:"notokr-medium"}

/* 반응형 [s] */
@media (max-width:1400px){
    .pgcm{padding:0 10px}
}
@media (max-width:1225px){
    .business .step ul{display:grid;grid-template-columns:repeat(3,1fr)}
    .business .step ul li{width:100%}
    .business .step > p{font-size:16px;text-align:left}
    .business .step ul li img{width:66%;margin:10px 0 20px}
    .business .step ul li{gap:0}
}
@media (max-width:1150px){
    #p33 .top{flex-direction:column;align-items:center;justify-content:center;text-align:center}
    #p33 .top .left{width:100%;padding:0 20px 40px}
    #p33 .top .right{width:100%}
    #p33 .top .left p{font-size:30px}
    #p39 .point ul li div{height:285px}
}
@media (max-width:1080px){
    #p38 dl .img_area ul{position:relative;top:initial;left:initial;height:134px;padding:15px;background:#f7f7f7;border-radius:0 0 10px 10px}
    #p38 dl .img_area ul li{width:100%;padding:2px;border:none;color:#777}
    #p38 dl .img_area img{border-radius:10px 10px 0 0}
    .business .step .sub_tit{flex-direction:column}
    .business .step .sub_tit span{display:block;text-align:center;white-space:normal}
}
@media (max-width:1024px){
    #p36 ul{grid-template-columns:repeat(4,1fr);padding:0 20px 50px}
    .pgcm .tit_area{margin-bottom:40px}
    .pgcm .tit_area span{white-space:normal}
    .business .step ul li img{width:100%;padding:0 20px}
    .portfolio{padding-bottom:50px}
    .portfolio ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .portfolio ul li p{margin-top:20px}
    .portfolio ul li{width:100%}
    #p39 .portfolio{padding-bottom:0}
}
@media (max-width:950px){
    .business .point .sub_tit{flex-direction:column;align-items:center;justify-content:center;text-align:center}
    .business .point .sub_tit span{display:block;text-align:center;white-space:normal}
    .business .point ul{display:grid;grid-template-columns:repeat(2,1fr);padding:0 10px}
    .board .sub_tit{flex-direction:column;align-items:center;justify-content:center}
    .board .sub_tit span{display:block;text-align:center;white-space:normal}
    .portfolio ul{display:flex;flex-wrap:wrap;align-items:flex-start}

}
@media (max-width:768px){
    #p33 .top .left p{font-size:27px;white-space:normal}
    #p33 .top .right p{white-space:normal}
    #p36 ul{grid-template-columns:repeat(3,1fr)}
    #p36 .tit_area p{font-size:25px}
    #p38 dl{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .business .step ul li{height:265px}
    .portfolio .sub_tit{flex-direction:column;align-items:center;justify-content:center}
    .portfolio .sub_tit span{display:block;text-align:center;white-space:normal}
}
@media (max-width:600px){
    .business .type ul{grid-template-columns:repeat(2,1fr);gap:20px}
    .business .type ul li p{padding-top:15px}
    .business .type ul li{font-size:16px}
    .business .step ul{grid-template-columns:repeat(2,1fr)}
    .business .point ul li div p{font-size:16px}
    .business .point ul li div span{font-size:15px}
    .portfolio ul{row-gap:30px}
    .portfolio ul li p span{font-size:16px}
    .portfolio ul li p{margin-bottom:0;font-size:16px}
    #p39 .point ul{grid-template-columns:repeat(1,1fr)}
    #p39 .point ul li div{height:auto}
}
@media (max-width:500px){
    .business .point ul{grid-template-columns:repeat(1,1fr)}
    .business .point ul li div{height:auto;padding:30px 20px}
}
@media (max-width:480px){
    #p33 .top .right{padding:40px}
    #p33 .top .left p{font-size:24px}
    #p33 .tb_wrap table tr th{padding:20px;font-size:14px}
    #p33 .tb_wrap table tr td{font-size:14px}
    #p33 .tb_wrap{margin-top:20px}
    #p36 ul{grid-template-columns:repeat(2,1fr)}
    #p36 ul li p{font-size:15px}
    #p36 .tit_area p{white-space:normal}
    #p36 .tit_area p span::before{display:none}
    .business .tit_area p{font-size:27px}
    .pgcm .tit_area b{margin-bottom:10px}
    .pgcm .tit_area span{padding:20px;font-size:15px}
    .pgcm .tit_area p{margin-bottom:20px}
    .business .cont .sub_tit p{font-size:22px}
    .business .cont+.cont{margin-top:60px}
    .business .step ul{grid-template-columns:repeat(1,1fr);gap:25px}
    .business .step ul li{height:auto;padding:30px}
    .business .step ul li::before{display:none}
    .portfolio ul{grid-template-columns:repeat(1,1fr)}
    .portfolio .more_btn{margin-top:35px}
}
@media (max-width:380px){
    #p33 .top .right{padding:25px}
    #p33 .top .right p{font-size:15px}
    #p33 .top .right > span{font-size:17px}
    #p33 .top .left{padding-inline:0 15px 30px}
    #p33 .top .left p{font-size:22px}
    #p33 .top .left b{font-size:13px}
    #p36 .tit_area p{font-size:22px}
    #p36 ul li p{font-size:13px}
    .pgcm .tit_area b{font-size:13px}
    .business .type ul{grid-template-columns:repeat(1,1fr)}
    #p38 dl{grid-template-columns:repeat(1,1fr)}
    #p38 dl .img_area ul{height:auto}
    #p38 dl p{font-size:18px}
    #p38 dl p::before{width:4px;height:4px}
    .business .step ul li b{font-size:13px}
    .business .step ul li{padding:30px 20px}
    .business .step > p{font-size:15px;text-align:center}
}