@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
@import 'node_modules/animate.css/animate.min.css';

/*공통*/
#section01,#section02,#section03 {scroll-margin-top:70px}
#section03{background:#f7f7f7}
.top_nav{display: flex;align-items:center;justify-content:center;gap:20px;font-size:15px;font-family:'Pretendard'}
.top_nav li{display:none}
.top_nav li a{background:var(--primary);color:#fff}
.pagecommon{font-size:15px;color:#666;letter-spacing:-.3px;line-height:1.6;font-family:'Pretendard'}
.pagecommon .tit{display:inline-block;padding:4px 26px;font-size:17px;font-weight:600;background:var(--primary);border-radius:50px;color:#fff}
.pagecommon .inner{max-width:1200px;margin:0 auto;padding: 60px 0 0;font-size:17px}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}

/*p52*/
.top_main{padding:100px 0}
#section01 .cont_inr ul li{display:flex;justify-content:space-between}
#section01 .cont_inr ul li .txt{width:100%;padding:50px;width: 50%;}
#section01 .cont_inr ul li .txt .top{padding-bottom:30px;font-size:22px;font-weight:600;color:#222}
#section01 .cont_inr ul li .txt .top p{font-size:40px;font-weight:700;color: #47ba69;font-family:'Montserrat';letter-spacing:0}
#section01 .cont_inr ul .rev{flex-direction:row-reverse;margin-left:-4px}
#section02{padding:100px 0}
#section02 .inner{padding:0}
#section02 .list_box ul{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;margin-top:50px}
#section02 .list_box ul li{padding:16px;border:1px solid #e1e1e1;border-radius:20px;text-align:center}
#section02 .list_box ul li img{border-radius:20px;width:100%}
#section02 .list_box ul .bot_txt{padding:0 14px 14px}
#section02 .list_box ul .bot_txt p{padding:20px 0;font-size:26px;font-weight:700;color:#222}
#section03{padding:30px 0}
#section03 .top_img{position:relative}
#section03 .top_txt{position:absolute;width: max-content;bottom:70px;right:56px;font-size:34px;color:#fff;text-align:right}
#section03 .top_txt p{padding-bottom:12px;font-size:15px;font-weight:700;color:#ffffffa3;letter-spacing:0;font-family:'Pretendard'}
#section03 .top_txt h2{font-weight:300;line-height: 1.26;}
#section03 .top_txt h2 b{font-weight:700}
#section03 .history{padding:0 50px}
#section03 .history .his_inr{display:grid;grid-template-columns:repeat(2, 1fr)}
#section03 .history .tit{display:inline-block;padding:4px 26px;margin:50px auto;font-size:17px;font-weight:600;background:var(--primary);border-radius:50px;color:#fff}
#section03 .history dl{display:flex;flex-direction:row;font-size: 16px;} 
#section03 .history dl dt{position:relative;width: 100%;max-width: 160px;font-size:30px;font-weight:700;line-height:30px;color:#111}
#section03 .history dl dt:after{position:absolute;left:120px;top:8px;bottom:-8px;content:'';width:1px;height:100%;background: #E1e1e1;z-index:-1}
#section03 .history dl:last-child dt:after{position:absolute;left:120px;top:8px;bottom:-8px;content:'';width:1px;height:100%;background: #E1e1e1;z-index:-1}
#section03 .history .none dt:after{display:none}
#section03 .history dl dt:before{position:absolute;left:114px;top:8px;content:'';width:14px;height:14px;border:4px solid var(--primary);border-radius:200px;background:#fff;z-index:0}
#section03 .history dl ul{padding-bottom: 50px;line-height:1.8;/* height:180px; */} 
#section03 .top_img{background:url(/sh_page/img/p52_img01.jpg) no-repeat;border-radius:20px}
#section03 .top_img img{border-radius:20px;width: 100%;}

.fix_wrap{height:450px;background:url(/sh_page/img/bg.jpg) fixed no-repeat;background-position:50% 20%;background-size:cover}
.fix_tit{padding-bottom:100px;text-align:center;font-weight:700;font-size:32px;color:#111;line-height:1.5}
.fix_tit span{padding:4px 10px;color:#fff;background:#22b103}   
.bg_img{padding-bottom:70px;text-align:center}
#section04{padding:50px 0}
#section04 .map_tit{padding-bottom:50px;font-size:35px;font-weight:700;color: #111;text-align:center}
#section04 iframe{border:1px solid #e1e1e1}
#section04 table{width:100%;margin-top:30px;border-top:2px solid #222;background:#fff}
#section04 table tr th{width: 20%;padding:20px 0;font-size:16px;color:#333;border-bottom:1px solid #e1e1e1}
#section04 table tr td{padding:20px 0;font-size:16px;border-bottom:1px solid #e1e1e1}
#section01 .cont_inr ul li .img{width:50%}

/*p40*/
#p40 .inner{margin-bottom:100px}
#p40 .cont{text-align:center}
#p40 .top_tit{ padding:50px 0;font-size:50px;font-weight:700;color:#111}
#p40 .top_tit .sm_tit{max-width:max-content;margin:0 auto 40px;padding:5px 20px;font-weight:600;font-size:15px;background:var(--primary);color:#fff; border-radius:50px}
#p40 .top_tit .c_g{color:#9ebc40}
#p40 .top_tit .c_b{color:#bd9b5c}
#p40 .pro_list ul{display:flex;justify-content:center;align-items:center;position:relative;flex-wrap: wrap;}
#p40 .pro_list ul:after{position:absolute;content:'';width:100%;height: 456px;top:150px;background:#9ebc40;z-index:-1}
#p40 .pro_list ul li:nth-child(1) .icon_box,#p40 .pro_list ul li:nth-child(3) .icon_box{border:2px solid #22b103}
#p40 .pro_list ul li:nth-child(2) .icon_box{margin-left:-30px}
#p40 .pro_list ul li:nth-child(3) .icon_box{margin-left:-30px}
#p40 .pro_list ul li:nth-child(2) .icon_box{border:2px solid #bd9b5c}
#p40 .pro_list ul li .icon_box{display:flex;align-items:center;justify-content:center;width:280px;height:280px;border-radius:50%;background:#fff;flex-direction:column}
#p40 .pro_list ul li .bot_tit{position:relative;padding-top:55px;font-size:19px;font-weight:500;color:#222}
#p40 .pro_list ul li .bot_tit:after{position:absolute;content:'';width:6px;height:6px;left:48%;top:26px;background: #222;border-radius:50px}
#p40 .bot_cont{margin:40px 0 0}
#p40 .bot_cont p{display:inline-block;padding:0 20px;font-size:36px;font-weight:700;color:#9ebc40;background:#fff}
#p40 .bot_sub{padding-top:30px;font-size: 18px;line-height:1.6;color:#ffffffb3}
#p40 .bot_sub h3{position:relative;max-width: max-content;margin:0 auto 34px;padding-bottom:8px;font-size: 31px;color: #fff;}
#p40 .bot_sub h3:after{position:absolute;content:'';width:250px;height:70px;left:-15px;background:url(/sh_page/img/line_bg.png) no-repeat;z-index:2}
#p40 .down_box{display:block;width:max-content;padding:12px 26px;margin:150px auto 0;text-align:center;font-size:16px;font-weight:600;background:#333;color:#fff;border-radius:4px;transition:all 0.2s}
#p40 .down_box:hover{background:#9ebc40}
#p40 .ci_wrap{padding:100px 0 0}
#p40 .ci_box{text-align:center}
#p40 .ci_box:nth-child(2){padding-bottom:0}
#p40 .ci_box .top{padding-bottom:50px;font-size: 18px;}
#p40 .ci_box .top p{padding-bottom:20px;font-size:30px;font-weight:700;color:#111}
#p40 .ci_box .bot_list{padding:60px;margin-bottom:100px;border:1px solid #e1e1e1}
#p40 .ci_box .bot_list ul{display: flex;justify-content: space-around;justify-items:center;gap: 15px;align-items: center;flex-wrap: wrap}
#p40 .ci_box .bot_list ul li{text-align:left}
#p40 .ci_box .bot_list ul li .color{width:200px;height:200px}
#p40 .ci_box .bot_list ul li:nth-child(1) .color{background:#47bb69}
#p40 .ci_box .bot_list ul li:nth-child(2) .color{background:#f9a61a}
#p40 .ci_box .bot_list ul li:nth-child(3) .color{background:#58585a}
#p40 .ci_box .bot_list ul li .tit_en{padding:20px 0 10px;font-size: 18px;font-weight:500;color:#222}
#p40 .ci_box .bot_list ul li .sub p{font-size:17px}
#p40 .ci_box .logo_list{padding-bottom:70px}
#p40 .ci_box .logo_list .flex{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px}
#p40 .ci_box .logo_list p{position:relative;padding-left: 14px;padding-bottom:14px;font-size:18px;font-weight:600;color:#333;text-align:left}
#p40 .ci_box .logo_list p:after{position:absolute;content:'';left:0;top:12px;width:3px;height:3px;background: #9ebc40;border-radius:50px}
#p40 .ci_box .logo_list .img_box{display:flex;border:1px solid #e1e1e1;align-items:center;justify-content:center;height:180px}
#p40 .logo_list .fir{padding-bottom:50px}
#p40 .ci_box:last-child .logo_list{padding-bottom:0}

/* 반응형 [s] */
@media (max-width:1024px){
.pagecommon .inner{padding:50px 0 0}
.top_nav{display:flex;align-items:center;justify-content:center;gap:20px;position:sticky;top:0;height:40px;font-size:15px;background:var(--primary);font-family:'Pretendard'}
.top_nav li a{color:#fff}
.top_nav li.on a{font-weight:700}
.top_nav{display:none}
.fix_tit{font-size:27px}
#section01 .cont_inr ul li .txt .top p{font-size:35px}
#section01 .cont_inr ul li .txt{padding:40px}
.cont_inr img{width:100%;max-width:550px}
#section04{padding:50px 20px}
#section03 .history{padding:0 30px}
#section03 .history dl ul{font-size: 14px;}
#section03 .history dl dt{font-size:25px}
#section03 .history dl dt:before{left:100px}
#section03 .history dl dt:after{left:107px}
#section03 .history .left dl{height:auto}
}
@media (max-width:900px){
.pagecommon .inner{max-width:1200px;margin:0 auto;padding: 50px 0 100px;font-size:15px}
#section02 .list_box ul{grid-template-columns:repeat(2, 1fr)}
#section01 .cont_inr ul li{flex-direction:column}
#section01 .cont_inr ul li .txt{width:100%}
#section01 .cont_inr ul li .img{width:100%}
#section01 .cont_inr ul .rev{flex-direction:column}
.cont_inr img{max-width:100%}
.top_main{padding:100px 0 0}
#section03 .top_txt{font-size:28px}
#section03 .history{padding:0 30px}
#section03 .history dl dt{font-size:25px}
#p40 .top_tit{font-size:40px}
#p40 .pro_list ul li .icon_box{padding: 0 20px;width: 200px;height: 200px;}
#p40 .pro_list ul li .icon_box img{width:50px}
#p40 .pro_list ul li .bot_tit{font-size:16px}
#p40 .ci_box .bot_list ul li .color{width:150px;height:150px}
}
@media (max-width:768px){
.pagecommon .inner{padding:50px 0 0}
.fix_tit{font-size:22px}
#section02 .list_box ul .bot_txt {padding:0}
#section02 .list_box ul .bot_txt p{font-size:20px}
#section02 .list_box ul .bot_txtx{padding:0}
#section03 .top_txt{bottom:37px;font-size:22px}
#section03 .history .his_inr{grid-template-columns:repeat(1, 1fr)}
#section04 {padding:0 0 50px}
#section04 .map_tit {padding-bottom:30px;font-size:30px}
#p40 .top_tit{font-size:35px}
#p40 .bot_cont p{font-size:25px}
#p40 .bot_sub{font-size:16px}
#p40 .bot_sub h3{font-size:25px}
#p40 .bot_sub h3:after{background-size:216px}
#p40 .pro_list ul:after{height:400px}
#p40 .ci_wrap{padding:50px 0 0}
#p40 .ci_box .top p{font-size:25px}
#p40 .ci_box .top{font-size:16px}
#p40 .ci_box .bot_list{padding:30px;margin-bottom:50px}
#p40 .ci_box .bot_list ul li .tit_en{font-size:17px}
#p40 .ci_box .bot_list ul li .sub p{font-size:15px}
#p40 .ci_box .logo_list .flex{gap:20px}
#p40 .ci_box .logo_list .flex {grid-template-columns:repeat(1, 1fr)}
#section02{padding:100px 20px}
#p40{padding:15px}
}
@media (max-width:600px){
.pagecommon .inner{padding:50px 0 0}
#section03 .top_txt{bottom:40px;right:40px}
#p40 .pro_list ul li:nth-child(3) .icon_box{margin-top:-30px;margin-left:0}
#p40 .ci_box .bot_list ul li .color{width: 100%;height: 100px;}
}
@media (max-width:599px){
#p40 .pro_list ul:after{height:520px}
}
@media (max-width:480px){
.pagecommon .tit {display:block;width:max-content;margin: 30px auto;font-size:16px}
.pagecommon .inner{padding:0}
.top_main{padding:40px 0}
.fix_tit{padding-bottom:30px;font-size:19px}
.fix_wrap{height:200px;background:url(/sh_page/img/bg.jpg) no-repeat center;background-size:cover}
#section01{padding-bottom:50px;font-size:14px}
#section02{font-size:14px}
#section03{font-size:14px}
#section04{padding: 76px 0 50px;font-size:14px}
#section01 .cont_inr ul li .txt{padding:20px;font-size: 14px;}
#section01 .cont_inr ul li .txt .top p{font-size:25px}
#section01 .cont_inr ul li .txt .top{padding-bottom: 20px;font-size:20px}
#section02{padding:0 15px 25px 15px}
#section02 .list_box ul{grid-template-columns:repeat(1, 1fr)}
#section03 .top_txt{bottom: 50px;left:50%;transform:translateX(-50%);font-size:18px;text-align:center}
#section03{padding:30px 15px;}
#section03 .top_txt h2 br{display:none}
#section03 .top_img img{height:160px}
#section03 .top_txt h2{font-size:18px}
#section03 .history{padding:0}
#section03 .history dl dt{width: 106px;font-size:22px}
#section03 .history .tit{display:block;width:max-content;font-size:16px}
#section03 .history dl{font-size:14px}
#section03 .history dl dt:before{left: 76px;}
#section03 .history dl dt:after{left: 83px;}
.top_main img{max-width:200px}
#section03 .top_txt h2 br{display:block}
#section04 table tr th{width:30%;font-size:15px}
#section04 table tr td{font-size:14px}
#section04 .map_tit {padding:30px 0;font-size:25px}
#section04 iframe{height:400px !important;width:100%}
#section03 .history dllast-child ul{padding-bottom:0}
#p40 .pro_list ul li .icon_box img{width:40px}
#p40 .pro_list ul li .bot_tit{padding-top:40px}
#p40 .top_tit{padding:40px 0;font-size:28px}
#p40 .pro_list ul li .icon_box{width:190px;height:190px}
#p40 .bot_sub h3:after{background-size:200px}
#p40 .bot_sub h3{font-size:24px}
#p40 .bot_sub{font-size:15px}
#p40 .ci_box .bot_list{padding:24px}
#p40 .ci_box .bot_list ul li .tit_en{font-size:16px}
#p40 .ci_box .bot_list ul li .sub p{font-size:14px}
#p40 .ci_box .top {padding-bottom: 30px;font-size:15px}
#p40 .br{display:none}
#p40 .down_box{margin:120px auto 0;font-size:14px}
#p40 .ci_box .top p{font-size:22px}
#p40 .inner {margin-bottom:30px}
#p40 .ci_box .logo_list p{font-size:17px}
#p40 .ci_box .bot_list ul{row-gap:30px}
#section02 .list_box ul .bot_txt{font-size:14px}
#section03 .history dl ul{font-size:14px}
#section03 .history .gap{height: 110px !important;}
#section03 .history .gaps{height: 80px !important;}
}
@media (max-width:380px){
.fix_tit{font-size:17px}
#section04{padding:40px 15px 30px}
#section04 table tr th{width:24%}
#p40 .pro_list ul li .icon_box{width:160px;height:160px}
#p40 .pro_list ul li .bot_tit{font-size:13px}
#p40 .bot_cont p{font-size:20px}
#p40 .bot_sub h3{font-size:20px}
#p40 .bot_sub h3:after{background-size:180px}
#p40 .pro_list ul:after{height:410px}
#p40 .bot_sub{padding: 0 15px;font-size:14px}
#section04 iframe{height:360px !important}
#section03 .history dl ul{font-size:13px}
#section03 .history .gap{height:100px}
}
@media (max-width:340px){
#section03 .history dl{flex-direction:column}
#section03 .history dl ul{padding-bottom:20px;margin-bottom:20px;border-bottom:1px dashed #e1e1e1}
#section03 .history dl dt:before{display:none}
#section03 .history dl dt:after{display:none} 
#section03 .history dl ul{height:auto}  
#section03 .history dl dt{font-size:18px}
#section03 .history dl dt:after{left:76px}
#section03 .history dl dt:before{left:70px}
#section03 .history .gap{height:auto}
}
/* 반응형 [e] */