@charset "utf-8";

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

.pagecommon{font-size:17px;line-height:1.6;color:#666;font-family:var(--k-font)}
.pagecommon *{word-break:keep-all}
.pagecommon .pl{white-space:pre-line}
.pagecommon .top_box{text-align:center}
.pagecommon .top_box span{display:block;margin-bottom:19px;font-weight:600;color:var(--primary)}
.pagecommon .top_box p{font-size:35px;font-weight:700;line-height:1.3;color:#111}

/* 회사소개 */
#p33{text-align:center}
#p33 .txt_box{position:relative;width:calc(100% - 100px);margin:42px auto 0;padding:60px 0;border:1px solid #e1e1e1;border-radius:15px;font-weight:500;color:#444;background-color:#fff}
#p33 .img_box{display:flex;align-items:center;justify-content:center;flex-flow:column;width:100%;height:330px;margin-top:54px;background:url('/sh_page/img/p33_img.jpg') no-repeat center / cover}
#p33 .img_box b{display:block;margin-bottom:29px;font-size:25px;font-weight:600;color:#fff}
#p33 .img_box p{color:rgba(255,255,255,.7)}
#p33 .gr_txt{margin:65px 0;font-size:18px}
#p33 .gr_txt span{text-decoration:underline;font-weight:600;color:#333}
#p33 .mid_txt{font-size:30px;line-height:1.35;font-weight:700;color:#111}
#p33 .mid_txt span{color:var(--primary);}

/* 주요 사업 영역 */
#p37 .box_list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:50px}
#p37 .box_list li{display:flex;flex-flow:column;padding:30px;border:1px solid #e1e1e1;transition:all .2s}
#p37 .box_list li span{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:5px;background-color:#f5f5f5;transition:all .2s}
#p37 .box_list li b{display:block;margin:23px 0 11px;font-size:20px;color:#111;transition:all .2s}
#p37 .box_list li p{margin-bottom:34px;transition:all .2s}
#p37 .box_list li a{display:flex;justify-content:center;align-items:center;width:100px;height:45px;margin:auto 0 0 auto;border:1px solid #e1e1e1;font-size:15px;font-weight:500;color:#888;transition:all .2s}
#p37 .cont_box{display:flex;align-items:flex-end;gap:60px;padding:120px 0}
#p37 .cont_box .l_box{width:100%}
#p37 .cont_box .l_box .box_tit{font-size:30px;font-weight:700;color:#111}
#p37 .cont_box .l_box b{display:block;position:relative;margin:49px 0;padding-left:35px;font-size:20px;line-height:1.5;font-weight:600;color:#111}
#p37 .cont_box .l_box b:before{position:absolute;left:0;top:6px;content:'';width:5px;height:50px;background:#111}
#p37 .cont_box .l_box ul li{position:relative;padding-left:18px}
#p37 .cont_box .l_box ul li+li{margin-top:29px}
#p37 .cont_box .l_box ul li:before{position:absolute;left:0;top:11px;content:'';width:3px;height:3px;border-radius:100%;background:var(--primary)}
#p37 .cont_box .graph_box{margin-top:44px;padding:30px;border-radius:15px;background-color:#f5f5f5}
#p37 .cont_box .graph_box dl+dl{margin-top:15px}
#p37 .cont_box .graph_box dt{margin-bottom:5px;font-size:16px;font-weight:600;color:#111}
#p37 .cont_box .graph_box dd{width:100%;height:30px;border-radius:50px;background-color:#fff}
#p37 .cont_box .graph_box dd p{display:block;position:relative;width:0;height:100%;border-radius:50px;background-color:var(--primary);transition:width 1.5s}
#p37 .cont_box .graph_box.aos-animate dd p{width:100%}
#p37 .cont_box .graph_box dl:nth-child(2) dd p{transition-delay:.1s}
#p37 .cont_box .graph_box dd p span{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:15px;white-space:nowrap;font-weight:500;color:#fff}
#p37 .cont_box .r_box{display:flex;flex-flow:column;width:100%}
#p37 .cont_box .r_box p{max-width:calc(100% - 50px)}
#p37 .cont_box .r_box p+p{margin-top:-30px}
#p37 .cont_box .r_box p:nth-child(odd){margin-left:auto}
#p37 .cont_box .r_box p img{max-width:100%;border-radius:15px;box-shadow:3px 5px 20px -2px rgb(0 0 0 / 15%)}
#p37 .busi_cont{overflow:hidden;padding-top:120px;border-top:1px solid #e1e1e1}
#p37 .busi_cont dl{display:flex;align-items:center;gap:60px}
#p37 .busi_cont dl+dl{margin-top:60px}
#p37 .busi_cont dl:nth-child(2n){flex-flow:row-reverse}
#p37 .busi_cont dl dt{width:100%;height:290px;border-radius:15px;background:no-repeat center;background-size:cover}
#p37 .busi_cont dl:nth-child(1) dt{background-image:url('/sh_page/img/p37_img01.jpg')}
#p37 .busi_cont dl:nth-child(2) dt{background-image:url('/sh_page/img/p37_img02.jpg')}
#p37 .busi_cont dl:nth-child(3) dt{background-image:url('/sh_page/img/p37_img03.jpg')}
#p37 .busi_cont dl:nth-child(4) dt{background-image:url('/sh_page/img/p37_img04.jpg')}
#p37 .busi_cont dl dd{position:relative;width:100%;padding:35px 0 0 40px}
#p37 .busi_cont dl dd p{margin-bottom:17px;font-size:25px;font-weight:700;color:#111}
#p37 .busi_cont dl dd p span{position:absolute;left:0;top:0;font-size:60px;line-height:1;color:rgba(000,000,000,.1)}

@media (hover: hover) {
#p37 .box_list li:hover{border:1px solid var(--primary);background-color:var(--primary)}
#p37 .box_list li:hover span{background-color:#fff}
#p37 .box_list li:hover b{color:#fff}
#p37 .box_list li:hover p{color:rgba(255,255,255,.7)}
#p37 .box_list li:hover a{border:1px solid var(--primary);color:#111;background-color:#fff}
#p37 .box_list li a:hover{color:#fff;background-color:#111}
}

@media (max-width:1230px){
#p37 .box_list li p{white-space:normal}
}
@media (max-width:1024px){
.pagecommon .top_box p{font-size:30px}
#p33 .img_box{height:260px;margin-top:50px}
#p33 .gr_txt{font-size:17px}
#p33 .mid_txt{font-size:26px}
#p37 .box_list li{padding:20px}
#p37 .box_list li b{font-size:18px}
#p37 .cont_box{gap:40px;padding:90px 0}
#p37 .cont_box .l_box .box_tit{font-size:25px}
#p37 .cont_box .l_box b{margin:35px 0 40px;font-size:18px}
#p37 .cont_box .l_box b:before{height:calc(100% - 10px)}
#p37 .busi_cont{padding-top:90px}
}
@media (max-width:920px){
#p37 .cont_box{flex-flow:column;gap:50px}
#p37 .cont_box .l_box ul li+li{margin-top:20px}
#p37 .cont_box .r_box{width:680px;margin:0 auto}
#p37 .busi_cont dl{gap:40px}
#p37 .busi_cont dl dd{padding:25px 0 0 30px}
#p37 .busi_cont dl dd p{margin-bottom:10px;font-size:23px}
#p37 .busi_cont dl dd p span{font-size:50px}
}
@media (max-width:768px){
.pagecommon{font-size:16px}
.pagecommon .top_box p{max-width:520px;margin:0 auto;font-size:25px;line-height:1.35;white-space:normal}
#p33 .img_box{height:210px;margin-top:40px}
#p33 .gr_txt{margin:55px 10px 35px;font-size:16px;white-space:normal}
#p33 .mid_txt{font-size:22px}
#p37 .box_list{grid-template-columns:repeat(2,1fr);margin-top:40px}
#p37 .box_list li b{font-size:17px}
#p37 .box_list li p{margin-bottom:25px}
#p37 .box_list li a{width:80px;height:35px;font-size:14px}
#p37 .cont_box{padding:70px 0}
#p37 .cont_box .l_box .box_tit{font-size:23px}
#p37 .cont_box .l_box b{margin:25px 0 30px;font-size:17px}
#p37 .cont_box .graph_box{margin-top:35px;padding:20px}
#p37 .cont_box .graph_box dt{font-size:15px}
#p37 .cont_box .graph_box dd{height:25px}
#p37 .cont_box .graph_box dd p span{font-size:13px}
#p37 .cont_box .r_box{width:80%}
#p37 .cont_box .r_box p{width:calc(100% - 30px)}
#p37 .cont_box .r_box p+p{margin-top:-20px}
#p37 .busi_cont{padding-top:70px}
#p37 .busi_cont dl{flex-flow:column;gap:30px}
#p37 .busi_cont dl:nth-child(2n){flex-flow:column}
#p37 .busi_cont dl dd p{font-size:20px}
}
@media (max-width:480px){
.pagecommon{font-size:15px}
.pagecommon .top_box p{max-width:270px;font-size:20px}
#p33 .img_box{height:135px;margin-top:35px}
#p33 .gr_txt{margin:45px 10px 30px;font-size:15px}
#p33 .mid_txt{font-size:18px}
#p37 .box_list{grid-template-columns:repeat(1,1fr);gap:10px;margin-top:30px}
#p37 .box_list li{padding:15px}
#p37 .box_list li b{margin:15px 0 8px}
#p37 .box_list li p{margin-bottom:10px}
#p37 .box_list li a{margin-top:0}
#p37 .cont_box{padding:50px 0}
#p37 .cont_box .l_box .box_tit{font-size:20px}
#p37 .cont_box .l_box b{margin:20px 0 25px;font-size:16px}
#p37 .cont_box .l_box b:before{top:4px;width:3px}
#p37 .cont_box .graph_box{padding:15px;border-radius:10px}
#p37 .cont_box .r_box{width:100%}
#p37 .cont_box .r_box p img{border-radius:10px}
#p37 .busi_cont{padding-top:50px}
#p37 .busi_cont dl{gap:25px}
#p37 .busi_cont dl+dl{margin-top:45px}
#p37 .busi_cont dl dt{height:230px;border-radius:10px}
#p37 .busi_cont dl dd{padding:20px 0 0 20px}
#p37 .busi_cont dl dd p{margin-bottom:8px;font-size:18px}
#p37 .busi_cont dl dd p span{font-size:40px}
}
@media (max-width:380px){
.pagecommon{font-size:14px}
#p33 .img_box{height:120px}
#p33 .gr_txt{font-size:14px}
#p37 .cont_box .l_box b{font-size:15px}
#p37 .busi_cont dl dt{height:190px}
}