@charset "utf-8";

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

/* 공통 */
.pagecommon{position:relative;margin-bottom:70px;font-size:15px;line-height:1.7;color:#888;font-family:'Poppins'}
.pagecommon b{font-weight:600}
.pagecommon .pl{white-space:pre-line}

/* About us */
#p33 .top_area{position:relative;padding:40px 0 45px;margin-bottom:60px;border-radius:14px;background:url(/sh_page/img/p33_bg.jpg) bottom center no-repeat;background-size:cover}
#p33 .top_area .tit{padding-left:10%;margin-bottom:20px;font-size:32px;font-weight:700;color:#fff}
#p33 .top_area .box{display:inline-block;width:560px;padding:50px 5%;margin-left:10%;border-radius:14px;background:#fff;box-shadow:5px 5px 20px rgba(0,0,0,.15)}
#p33 .top_area .box span{display:block;margin-bottom:20px;font-size:15px;font-weight:600;color:rgba(0,0,0,.4);text-transform:uppercase}
#p33 .top_area .box p{font-size:23px;font-weight:400;line-height:1.4;color:#222;white-space:pre-line;word-break:keep-all}
#p33 .top_area .ceo{position:absolute;right:13%;bottom:0}
#p33 .top_area .flex{display:flex;justify-content:space-between;width:560px;margin:25px 0 0 10%}
#p33 .top_area .flex p{color:#fff;white-space:pre-line}
#p33 .cont{display:flex;padding:0 2% 0 5%}
#p33 .cont > div{width:50%;padding-right:25px;white-space:pre-line}
#p33 .cont > div+div{padding:0 0 0 25px}
#p33 .cont .sign{color:#222}
#p33 .cont .sign b{display:block;padding-top:5px;font-size:17px}

/* Value */
#p34{padding:0 5%;text-align:center}
#p34 .tit span{font-size:32px;font-weight:700;color:#222}
#p34 .tit p{margin-top:15px;font-size:18px;font-weight:400}
#p34 ul{display:flex;justify-content:center;margin:40px 0 60px}
#p34 ul li{width:23%}
#p34 ul li .icon{display:flex;justify-content:center;align-items:center;height:200px;margin-bottom:15px;border-radius:14px;border:1px solid #e1e1e1}
#p34 ul li+li{margin-left:35px}
#p34 ul li p{padding:12px 0;font-size:18px;font-weight:600;color:#222;border-top:2px solid #222;border-bottom:2px solid #222}
#p34 .cont{padding:50px;margin-top:40px;border-radius:14px;border:1px solid #e1e1e1;font-size:16px}

/* History */
#p35{padding-top:30px}
#p35 .tit{margin-bottom:30px;font-size:32px;font-weight:700;text-align:center;color:#222}
#p35 .history_wrap{position:relative;padding:50px 0 30px}
#p35 .history_wrap:before{content:"";display:block;position:absolute;top:0;left:50%;width:1px;height:100%;background-color:#e1e1e1} 
#p35 .history{position:relative}
#p35 .history:after{display:block;content:"";visibility:hidden;clear:both}
#p35 .history .mgt{margin-top:0!important}
#p35 .history dl{position:relative;z-index:1;width:50%;padding:0 20px 0 140px}
#p35 .history dl:before{display:block;content:"";position:absolute;left:0;top:13px;z-index:1;width:9px;height:9px;margin-left:-4px;border-radius:50%;background-color:#222}
#p35 .history dl.f_r{float:right;margin-top:150px}
#p35 .history dl.f_l{float:left}
#p35 .history dl.f_l:before{left:auto;right:0;margin:0 -5px 0 0}
#p35 .history dl dt{position:absolute;left:40px;top:0;font-size:23px;font-weight:600;line-height:1.4;letter-spacing:0;color:#222}
#p35 .history dl dd{position:relative;padding-left:65px;word-break:keep-all}
#p35 .history dl dd+dd{margin-top:8px}
#p35 .history dl dd b{position:absolute;left:0;font-weight:600;color:#222}

/* Global presence of business */ 
#p36{margin:0;text-align:center}
#p36 .tit{margin-bottom:50px}
#p36 .tit span{font-size:32px;font-weight:700;color:#222}
#p36 .tit p{margin-top:15px;font-size:18px;font-weight:400}
#p36 img{max-width:1052px;width:100%}
#p36 .cont{background:url(/sh_page/img/p36_bg.jpg) center no-repeat fixed}
#p36 ul{display:flex;justify-content:space-between;flex-wrap:wrap;max-width:1200px;width:100%;margin:50px auto 0;padding:140px 0}
#p36 ul li{display:flex;flex-direction:column;align-items:center;width:20%;padding:20px;color:#fff;font-size:16px}
#p36 ul li+li{border-left:1px solid rgba(255,255,255,.3)}
#p36 ul li p{margin-bottom:25px;padding:5px 25px 3px;border-radius:30px;font-size:19px;font-weight:600;color:#222;background-color:#fff}

/* Business Areas */
#p38 dl{display:flex;margin-bottom:70px}
#p38 dl dt{flex-shrink:0;font-size:32px;font-weight:700;color:#222}
#p38 dl dd{padding:10px 0 0 80px}
#p38 .tab_box{display:flex}
#p38 .tab_box li{overflow:hidden;position:relative;width:20%;height:500px;background:center no-repeat;transition:all .2s}
#p38 .tab_box li a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#p38 .tab_box li a:before{opacity:0;display:block;content:"";position:absolute;left:0;top:0 ;width:100%;height:100%;margin-top:50%;background:rgba(0,0,0,.6);transition:all .2s}
#p38 .tab_box li p{position:relative;z-index:1;font-size:20px;font-weight:600;word-break:keep-all;color:#fff;line-height:1.4;text-align:center}
#p38 .tab_box li.tab01{background-image:url(/sh_page/img/p38_tab01.jpg)}
#p38 .tab_box li.tab02{background-image:url(/sh_page/img/p38_tab02.jpg)}
#p38 .tab_box li.tab03{background-image:url(/sh_page/img/p38_tab03.jpg)}
#p38 .tab_box li.tab04{background-image:url(/sh_page/img/p38_tab04.jpg)}
#p38 .tab_box li.tab05{background-image:url(/sh_page/img/p38_tab05.jpg)}
@media(hover:hover){
#p38 .tab_box li:hover{width:25%}
#p38 .tab_box li:hover a:before{opacity:1;margin:0}
}

/* tab */
#p38_tab{text-align:center}
#p38_tab ul{display:inline-flex;justify-content:center;position:relative;margin-bottom:60px;border-radius:30px;background-color:#f5f5f5}
#p38_tab li a{display:inline-block;padding:0 30px;font-size:17px;font-weight:500;line-height:52px;color:#888;transition:all .2s}
#p38_tab li.on a{border-radius:30px;color:#fff;background-color:#222}
#p38_tab li:not(.on) a:hover{color:#222}

/* Trading */
.p38_cm dl{display:flex;margin-bottom:70px}
.p38_cm dt{flex-shrink:0;font-size:32px;font-weight:700;color:#222}
.p38_cm dd{padding:10px 0 0 80px}
.p38_cm table th{height:70px;padding:0 15px;border-top:2px solid #222;border-bottom:2px solid #222;font-size:18px;font-weight:600;color:#222}
.p38_cm table th.bd_none{border-bottom:none}
.p38_cm table td{height:70px;padding:0 15px;border-bottom:1px solid #e1e1e1;text-align:center;line-height:1.4;color:#222}

/* Trading - ENERGY */
#p38_energy .flex{display:flex;justify-content:space-between;margin-bottom:90px}
#p38_energy .flex table{width:58%}
#p38_energy .flex .img{width:calc(42% - 40px);border-radius:14px;background:url(/sh_page/img/p38_energy_img01.jpg) center no-repeat;background-size:cover}
#p38_energy .stit{margin-bottom:20px;font-size:17px;color:#222}
#p38_energy .stit p{display:inline-block;vertical-align:-4px;margin-right:10px;font-size:32px;font-weight:700;color:#222}
#p38_energy .img_flex{display:flex}
#p38_energy .img_flex > div{width:50% ;height:430px}
#p38_energy .img_flex .img{overflow:hidden;border-radius:14px}
#p38_energy .img_flex .img img{width:100%;height:100%}
#p38_energy .img_flex .right{display:flex;justify-content:space-between;flex-wrap:wrap;margin-left:10px}
#p38_energy .img_flex .right div:first-child{height:50%}
#p38_energy .img_flex .right .w50{width:calc(50% - 5px)}

/* Trading - SECURITY */
#p38_security .flex{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:90px}
#p38_security .flex table{flex-shrink:0;width:58%}
#p38_security .flex .slider{width:calc(42% - 40px)}
#p38_security .flex ul li{overflow:hidden;padding:15px;border-radius:14px;border:1px solid #e1e1e1;text-align:center}
#p38_security .flex ul li img{max-width:100%}
#p38_security .flex ul li p{position:absolute;bottom:0;left:0;right:0;padding:10px 0;color:#fff;text-align:center;background-color:rgba(0,0,0,.75)}
#p38_security .pager_dot{margin-top:15px;text-align:center}
#p38_security .pager_dot span{opacity:.3;width:8px;height:8px;margin:0 4px;border-radius:8px;background:#222;transition:all .2s}
#p38_security .pager_dot .on{opacity:1;width:20px}

/* Trading - STEEL */
#p38_steel .flex{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:90px}
#p38_steel .flex table{flex-shrink:0;width:60%}
#p38_steel .flex .img_wrap{width:calc(40% - 40px)}
#p38_steel .flex .img{height:472px;border-radius:14px;background:url(/sh_page/img/steel_img01.jpg) center no-repeat;background-size:cover}
#p38_steel .flex .img02{height:300px;border-radius:14px;background:url(/sh_page/img/steel_img02.jpg) center no-repeat;background-size:cover}
#p38_steel .flex .img_wrap ul{display:flex;justify-content:center;height:85px;margin-top:20px}
#p38_steel .flex .img_wrap ul li{overflow:hidden;display:flex;align-items:center;width:50%;padding:0 15px;border-radius:14px;border:1px solid #e1e1e1}
#p38_steel .flex .img_wrap ul li+li{margin-left:10px}
#p38_steel .flex .img_wrap ul li img{width:100%}

/* Trading - ENVIRONMENT */
#p38_envi table{width:100%}
#p38_envi table th{width:calc(80% / 3)}
#p38_envi table th:first-child{width:20%}
#p38_envi table img{width:80%}
#p38_envi .process{position:relative;margin-top:90px}
#p38_envi .process p{margin-bottom:10px;font-size:32px;font-weight:700;color:#222}
#p38_envi .process img{max-width:1200px;width:100%}

/* REAL ESTATE */
#p39 dl{display:flex;margin-bottom:70px}
#p39 dt{flex-shrink:0;font-size:32px;font-weight:700;color:#222}
#p39 dd{padding:10px 0 0 80px}
#p39 ul{display:flex}
#p39 ul li{overflow:hidden;border-radius:14px}
#p39 ul li+li{margin-left:10px}
#p39 ul li img{height:300px}

/* contact */
#p41{display:flex;justify-content:flex-end;align-items:flex-end;padding-top:170px;border-radius:14px;background:url(/sh_page/img/p41_bg.jpg) no-repeat;background-size:auto 100%}
#p41 .cont{position:relative;width:55%;padding:70px 80px 100px;border-radius:14px 0 0;background-color:#fff}
#p41 .cont p{margin-bottom:40px;font-size:22px;font-weight:600;color:#222}
#p41 .cont ul li{color:#222;line-height:2.6}
#p41 .cont ul li span{padding:2px 10px;margin-right:6px;border:1px solid #555;border-radius:20px}
#p41 .cont ul li:last-child{display:flex;align-items:flex-start;margin-top:7px;line-height:1.4}
#p41 .cont ul li:last-child span{flex-shrink:0}

@media (max-width:1024px){
#p33, #p34, #p38, #p39{padding:20px}
#p33 .top_area .tit{padding-left:5%}
#p33 .top_area .box{width:55%;margin-left:5%;padding:35px 4%}
#p33 .top_area .box p{white-space:normal}
#p33 .top_area .flex{flex-direction:column;width:50%;margin-left:5%}
#p33 .top_area .ceo{right:10%}
#p35 .history dl{padding-left:110px}
#p35 .history dl dt{left:30px}
#p36 ul{justify-content:center;padding:60px 0}
#p36 ul li{width:30%;margin:10px;padding:25px 15px;border-radius:14px;background-color:rgba(0,0,0,.65)}
#p36 ul li+li{border:none}
#p36 ul li p{margin-bottom:15px;font-size:16px}
#p38 .tab_box li{height:300px}
#p38 .tab_box li p{font-size:17px}
.p38_cm{padding:20px 15px}
 #p41{padding-top:300px;margin:0;border-radius:0;background-position:top center;background-size:100% auto}
 #p41 .cont{width:calc(100% - 30px);margin:0 auto;padding:50px;border-radius:14px 14px 0 0;box-shadow:0 0 15px rgba(0,0,0,.1)}
 #p41 .cont p{margin-bottom:20px}
}
@media (max-width:768px){
#p33 .top_area{margin-bottom:40px}
#p33 .top_area .tit{font-size:28px}	
#p33 .top_area .box p{font-size:20px}
#p33 .top_area .ceo{right:5%;width:170px}
#p33 .top_area .flex{width:calc(100% - 210px)}
#p33 .top_area .flex p{word-break:keep-all}
#p33 .cont{flex-wrap:wrap;padding:0 10px}
#p33 .cont > div{width:100%;padding:0}
#p33 .cont > div+div{padding:20px 0 0}
#p34 .tit span{font-size:28px}
#p34 ul li+li{margin-left:15px}
#p35 .tit{font-size:28px}
#p35 .history dl{width:100%}
#p35 .history_wrap{padding-top:20px}
#p35 .history_wrap:before{left:20px}
#p35 .history dl{padding-left:130px}
#p35 .history dl dt{left:40px}
#p35 .history dl:before{left:16px!important;right:auto!important;margin:0}
#p35 .history dl.f_r{margin-top:40px}
#p36 .tit span{font-size:28px}
#p36 .tit p{padding:0 15px;white-space:normal;word-break:keep-all}
#p36 ul li{width:47%;margin:3px;font-size:14px}
#p36 ul li p{padding:2px 15px}
#p38 dl{display:block;margin-bottom:30px}
#p38 dl dt{margin-bottom:15px;font-size:28px}
#p38 dl dd{padding:0}
#p38 .tab_box{flex-wrap:wrap}
#p38 .tab_box li{width:50%;height:250px;background-size:cover}
#p38 .tab_box li a:before{opacity:1;left:20px;top:60px;width:calc(100% - 40px);height:calc(100% - 120px);margin:0}
#p38_tab ul{margin-bottom:30px}
#p38_tab li a{padding:0 20px;font-size:15px;line-height:42px}
.p38_cm{margin-bottom:40px}
.p38_cm dl{display:block;margin-bottom:30px}
.p38_cm dt{font-size:28px}
.p38_cm dd{padding:0}
.p38_cm table th{padding:0;font-size:15px}
.p38_cm table td{padding:0;font-size:14px}
#p38_energy .flex{flex-wrap:wrap;margin-bottom:40px}
#p38_energy .flex .img{order:-1;width:100%;height:300px;margin-bottom:20px}
#p38_energy .flex table{width:100%}
#p38_energy .stit p{font-size:28px;line-height:1.3;white-space:pre-line}
#p38_energy .img_flex{flex-wrap:wrap}
#p38_energy .img_flex > div{width:100%;height:auto}
#p38_energy .img_flex .right div:first-child{width:100%;margin-bottom:10px}
#p38_energy .img_flex .right{margin:10px 0 0}
#p38_security .flex{flex-wrap:wrap;margin-bottom:60px}
#p38_security .flex table{width:100%}
#p38_security .flex .slider{order:-1;width:100%;margin-bottom:15px}
#p38_steel .flex{flex-wrap:wrap;margin-bottom:60px}
#p38_steel .flex table{width:100%}
#p38_steel .flex .img_wrap{order:-1;width:100%;margin-bottom:20px}
#p38_steel .flex .img{height:300px}
#p38_steel .flex .img_wrap ul li{height:80px;justify-content:center}
#p38_steel .flex .img_wrap ul li img{width:auto;height:90%}
#p38_envi .process{margin-top:40px}
#p38_envi .process p{font-size:28px;line-height:1.4}
#p39 dl{display:block;margin-bottom:30px}
#p39 dl dt{margin-bottom:15px;font-size:28px}
#p39 dl dd{padding:0}
#p39 ul{flex-wrap:wrap;justify-content:space-between}
#p39 ul li{width:calc(50% - 5px)}
#p39 ul li+li{margin:0}
#p39 ul li:nth-child(n+3){margin-top:10px}
#p39 ul li img{width:100%;height:auto}
#p41 .cont{padding:30px}
}
@media (max-width:480px){
.pagecommon{margin-bottom:40px;font-size:14px}	
#p33{padding:15px}
#p33 .top_area .box{width:90%;padding:20px 20px 70px}
#p33 .top_area .box span{margin-bottom:10px;font-size:13px}
#p33 .top_area .box p{font-size:18px}
#p33 .top_area .flex{width:calc(100% - 170px);margin-top:90px}
#p33 .top_area .ceo{width:130px}
#p34 ul{flex-wrap:wrap;justify-content:space-between;margin:20px 0 30px}
#p34 ul li{width:48%}
#p34 ul li+li{margin:0}
#p34 ul li:nth-child(n+3){margin-top:30px}
#p34 ul li .icon{height:160px}
#p34 .cont{padding:20px}
#p35 .history dl dt{position:relative;left:0;margin-bottom:10px}
#p35 .history dl{padding-left:40px}
#p35 .history dl dd{padding-left:50px}
#p38 .tab_box li{height:200px}
#p38_tab li a{padding:0 12px;font-size:14px;line-height:40px}
#p38_envi{padding:20px 8px}
#p41{padding-top:280px}
#p41 .cont{padding:25px 20px}
#p41 .cont p{font-size:18px;text-align:center;word-break:keep-all;line-height:1.4}
}
@media (max-width:460px){
#p38_envi table th{font-size:13px}
#p38_envi table td{font-size:12px;letter-spacing:-1px}
}
@media (max-width:380px){
#p33 .top_area .flex{margin-top:50px}	
#p38_tab ul{flex-wrap:wrap;border-radius:0;background:none}
#p38_tab ul li{width:calc(50% - 4px);margin:2px;background-color:#f5f5f5}
#p38_tab ul li a{width:100%}
#p38_tab li.on a{border-radius:0}
}