/* ceo인사말 */ a:hover {text-decoration:none} @font-face { font-family: 'SEBANG_Gothic_Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'KCC-eunyoung'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } /*인사말*/ .company{ width:100%; max-width:1550px; margin:0px auto; } .company:after { content:""; display:block; clear:both; } .company{ overflow:hidden} .company .slogan_back { text-align:center;border-top:1px solid #EEE; border-bottom:1px solid #EEE; margin:0em 0 2em 0; padding-top:1em; padding-bottom:1em; } .company .slogan_text{ font-size:2.5em; letter-spacing:-2px; color:#333; line-height:1.4em; } .company .ceo_img{ float:left; width:38%; height:500px;} .company .ceo_img img{width:100%; } .company .ceo_txt{ float:left; width:60%; padding:0 50px;} .company .ceo_txt h2 { display: inline-block; font-size:2em; font-weight:300; line-height:1.8em; color:#000; letter-spacing:-0.05em; } .company .ceo_txt p {font-size:1.5em; margin-top:30px;font-weight:300;} .company .ceo_txt p strong {color:#000 !important; display:block; font-size:1.2em; padding-bottom:10px;} .company .ceo_sign {float:left; font-family: 'KCC-eunyoung'; font-size:3em !important; color:#222; margin-top:40px; } .company .ceo_sign img { margin-left:-15px; vertical-align: middle;} .company .summary { clear:both; float:left; width:100%; margin-top:50px;} .con_arrow {font-size:1.6em; font-weight:700; line-height:30px; color: #000; margin:50px 0 20px 0; border:0px solid red;} .con_arrow:before { content: ""; width:16px; height:16px; display:inline-block; border:5px #59647A solid; box-sizing:border-box; border-radius:14px; background:#fff; margin-right:10px;} .con_arrow:first-child { margin:0 0 20px 0;} .tbl_type1{width:100%; border-collapse:separate; border-spacing:0px; border-top:2px solid #002b5c;} .tbl_type1 th{ color:#333; text-align:center; font-weight:700; padding:10px 15px; border-bottom:1px solid #eee; border-right:1px solid #eee; background-color:#f8f8f8;} .tbl_type1 td{ text-align:left; padding:10px 15px; border-bottom:1px solid #eee;} .fc_pointer {color:#21b8ce; } .content_wrap{width:100%; min-width:320px; max-width:1550px; margin:0 auto;} .page_title{width:100%; margin-bottom:70px;} .page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;} .page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;} .page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; } .company_type2 {width:100%; min-width:320px; max-width:1550px; margin:0 auto; } .company_type2:after{content:""; clear:both; display:block;} .company_type2 .ceo_img {width:100%; } .company_type2 .ceo_img img {width:100%; height:auto; } .company_type2 .ceo_area{ position:relative; left:0; bottom:0; width:94%; padding-top:50px; z-index:1; margin:0 auto;} .company_type2 .ceo_area .ceo_tit { position:relative; float:left; width:20%; font-size:2em; text-align:center; line-height:1.4em; letter-spacing:-0.05em; padding-bottom:100px; } .company_type2 .ceo_area .ceo_tit:after {content:''; position:absolute; width:1px; height:80px; background-color:#aaa; bottom:0; left:50%; } .company_type2 .ceo_area .ceo_txt { position:relative; float:right; width:75%; height:auto;} .company_type2 .ceo_area .ceo_txt h4 {font-size:1.5em; line-height:1.5em; color: #000; } .company_type2 .ceo_area .ceo_txt p { font-size:1.3em; font-weight:300; line-height:1.8em; color: #333; word-break: keep-all;} .company_type2 .ceo_area .ceo_txt span.ceo_sign{ display:block; font-size:1.1em; color:#000; margin-top:50px; font-family: 'Satisfy', 'Noto Sans KR', sans-serif;} .s_tit {width:100%; height:30px; line-height:30px; text-align:left; border-left:5px solid #000; margin:50px auto; margin-bottom:10px; font-size:1.5em; text-indent:10;} .tbla{width:100%; border-collapse: collapse; margin:0 auto; border:1px solid #ddd; border-bottom:0px;} .tbla tr th{width:20%; height:45px; padding:15px 0; text-align:center; border-bottom:1px solid #666; font-size:1em;} .tbla tr td{width:80%; border-bottom:1px solid #ddd; padding-left:15px; height:45px; text-align:left;} @media screen and (max-width: 992px){ .content_wrap{width:96%;} .page_title{margin-bottom:50px;} .page_title h1{font-size:2em;} .page_title h2{font-size:1em;} .s_tit{font-size:1.2em;} .company_type2 .ceo_area .ceo_tit { width:100%; font-size:1.8em; padding-bottom:50px; } .company_type2 .ceo_area .ceo_tit:after {height:40px; } .company_type2 .ceo_area .ceo_txt { width:100%; } .company_type2 .ceo_area .ceo_txt h4 {margin-top:40px; font-size:1.2em;} .company_type2 .ceo_area .ceo_sign {margin-top: 20px; } .tbla tr th{width:30%; font-size:0.9em;} .tbla tr td{width:70%; font-size:0.9em;} } /*연혁*/ .history_top { width:120px; height:120px; padding-top:27px; margin:70px auto; line-height:22px; font-size:1.5em; text-align:center; color:#fff; background:#333; border-radius: 50%; } .timeline {box-sizing: border-box; } .timeline:before {box-sizing: border-box; } .timeline * {box-sizing: border-box; } .timeline *:before {box-sizing: border-box; } .timeline { position: relative; font-size: 1em; width: 100%; height: 100%; margin:50px auto; overflow-y: hidden; overflow-x: hidden;} .timeline .timeline-block {margin-top:-4px;} .timeline .timeline-icon {position:absolute; width: 12px; height: 12px; left: 50%; margin-left: -6px; margin-top:4px; border: 3px solid #4e9cdd; border-radius: 100%; background-color: #fff; text-align: center; } .timeline .timeline-icon.timeline-icon-hide-border { border: 0; } .timeline .timeline-icon.timeline-icon-hide-border i.fa, .timeline .timeline-icon.timeline-icon-hide-border img { margin-left: 0; margin-top: 0;} .timeline .timeline-icon i.fa, .timeline .timeline-icon img { display: inline-block; width: 32px; height: 32px; margin-left: -4px; margin-top: -4px; vertical-align: bottom; line-height: 32px; text-align: center; font-size: 30px; } .timeline .timeline-icon img { border-radius: 100%; } .timeline .timeline-content { position: relative; width: 46%; padding-bottom:50px; line-height: 20px; } .timeline .timeline-content .bar_count { font-size:1.5em; color:#000; margin-bottom:10px;} .timeline .timeline-content ul li img{width:100%; height:100px; margin-top:20px; background:red;} .timeline::before { position: absolute; width: 1px; height: 100%; top:0px; left: 50%; margin-left: -1px; background-color: #eee; content: ""; }/* Half of width */ .timeline.timeline-alternating .timeline-block:nth-of-type(2n+1) .timeline-content{text-align:right} .timeline.timeline-alternating:not(.timeline-left) .timeline-block:nth-of-type(2n) .timeline-content { left: 54%; } .timeline.timeline-alternating:not(.timeline-left) .timeline-block:nth-of-type(2n) .timeline-date { left: auto; right: 115%; margin-left: -400px; } /*비전*/ .vision {position:relative; width:100%;} .vision:after { content:""; display:block; clear:both; } .vision .vision_tit{position:absolute; top:37%; left:50%; transform:translate(-50%,10%); padding:20px 30px; border-radius:0px; font-size:2em; text-align:center; background:#fff; z-index:999; border:0px solid #ddd; box-sizing:border-box; text-transform:uppercase; font-family: 'Do Hyeon', sans-serif; color:#fff; background-color:#000;} .vision .vision_tit font{color:#B8DFE8;} .vision_area { width:100%; max-width:1550px; margin:0 auto; overflow:hidden; position:relative; border:1px solid #ddd; } .vision_area:before, .vision_area:after { content:''; position:absolute; z-index:-1; background-color:#ddd; } .vision_area:before { top:50%; width:100%; height:1px; } .vision_area:after { left:50%; width:1px; height:100%; } .vision_area li { float:left; width:50%; height:auto;} .vision_area li i{font-size:5em; color:#ccc;} .vision_area li .txtWrap .tit { font-size:20px; color:#333; margin-bottom:20px;} .vision_area li .txtWrap .tit span { font-weight:400; padding-right:8px; color:#b82835; } .vision_area li .txtWrap .txt { margin-bottom:5px; padding:0; color:#757575; } .vision_area li.detail01, .vision_area li.detail02 { padding:15px 15px 0 15px; } .vision_area li.detail03, .vision_area li.detail04 { padding:50px 15px 0 15px;} .vision_area li .txtWrap { height:100%; background-repeat:no-repeat; background-position:0 0; } .vision_area li.detail01 .txtWrap, .vision_area li.detail03 .txtWrap { margin:20px 15px; padding:0; } .vision_area li.detail02 .txtWrap, .vision_area li.detail04 .txtWrap { margin:20px 15px; padding:0; text-align:right;} /*오시는길*/ .map_wrap{ width:100%; max-width:1550px; margin:0 auto; margin-bottom:0px;} .map_wrap .map_info {width:100%; margin-top:40px;} .map_wrap .map_info .con_box {margin-bottom:30px;} .map_wrap .map_info .con_box>h2 {font-size:1.5em; color:#000; margin-bottom:10px;} .map_wrap .map_info table {width:100%; border-top:1px solid #000;} .map_wrap .map_info table th {padding:0; margin:0; width:20%; text-align:center; font-size:1em; color:#000; vertical-align:middle; font-weight:normal; /*background:url('/html/image/arr1.gif')no-repeat 95% 40%; */ background:#f5f5f5; border-bottom:1px solid #EEE;} .map_wrap .map_info table td {width:80%; text-align:left; font-size:1em; color:#888; vertical-align:top; padding:10px 0 10px 15px; border-bottom:1px solid #EEE;} .map_wrap .map_info table td > a {color:#666;} .map_wrap .map_info table td > a:hover {color:#000;} /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:992px){ .timeline .timeline-content ul li img{height:auto; } } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .company .ceo_img { width:100%; text-align:center; height:auto; } .company .ceo_img img { width:60%;height:auto;} .company .ceo_txt{ width:100%; padding:0; margin-top:50px;} .vision .vision_tit{position:relative; padding:20px; } .vision_area li.detail03, .vision_area li.detail04{padding-top:0px;} } /* 반응형 작은기기 480사이즈 이하 */ @media screen and (max-width: 480px) { .company .ceo_txt h2{font-size:1.3em; font-weight:700;} .vision .circle_tit{top:40%; } .vision_area li { height:auto;} .vision_area li i{font-size:2.2em;} } /* 반응형 작은기기 360사이즈 이하 */ @media screen and (max-width: 360px) { .company .ceo_img img { width:80%;} } /*사업영역 Type02 */ .cross {width:100%; max-width:1500px; overflow:hidden; margin:0 auto; } .cross:after{ content:""; display:block; clear:both;} .cross ul {padding:0; margin:0; } .cross ul li{float:left; width:100%; overflow:hidden; margin-bottom:60px; } .cross ul li .cross_tit{font-size:2em;font-weight:600;} .cross ul li .cross_txt1{font-size:1.5em; font-weight:300; padding-top:30px; } .cross ul li .cross_txt2{font-size:1.5em; font-weight:300; padding-top:5px; } .cross ul li .cross_img{float:left; width:25%; height:350px; margin-bottom:0px; } .cross ul li .cross_img img{height:350px;} .cross ul li .cross_right{float:right; width:75%; height:350px; padding:50px 50px 0 50px; box-sizing: border-box; } .cross ul li.other_type .cross_img{float:right; width:25%; height:350px; margin-bottom:00px; text-align:right;} .cross ul li.other_type .cross_right{float:left; width:75%; height:350px; padding:50px 40px 0 50px; } .cross ul li.other_type .cross_img img{height:350px; } .btn_go {display:inline-block; background:#222; color:#fff; text-align:center; font-size:1em; margin:20px 0px; padding:10px 30px; border:1px solid #000; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} .btn_go:hover {color:#000; background-color:#fff; } /* 반응형 중간기기 1200px 사이즈 이하*/ @media all and (max-width:1200px){ .cross {width:95%;} .cross ul li .cross_tit{font-size:1.5em; } .cross ul li .cross_txt{font-size:1em; } .cross ul li .cross_img{ width:30%; height:500px; margin-bottom:0px;} .cross ul li .cross_right{ width:70%; height:500px; padding:30px 30px; margin-bottom:50px; } .cross ul li .cross_img img{height:100%;} .cross ul li.other_type .cross_img{ width:30%; height:350px; margin-bottom:0px;} .cross ul li.other_type .cross_right{ width:70%; height:350px; padding:30px 30px; } .cross ul li.other_type .cross_img img{height:100%;} } /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:992px){ } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .business ul li { width:100%; margin-left:0px; margin-bottom:50px;} .cross ul li{ width:100%; height:auto;} .cross ul li .cross_img{float:left; width:100%; height:auto;} .cross ul li .cross_img img{width:100%;} .cross ul li .cross_right{width:100%; height:auto; padding:30px 20px; } .cross ul li .cross_right1{width:100%; height:auto; padding:30px 20px; } .cross ul li.other_type .cross_right1{width:100%; height:auto; padding:30px; 20px; } .cross ul li.other_type .cross_right{width:100%; height:auto; padding:30px; 20px; } .cross ul li.other_type .cross_img{float:right; width:100%; height:auto;} .cross ul li.other_type .cross_img img{width:100%;} } /*사업영역 Type02 */ .ecross {width:100%; max-width:1500px; overflow:hidden; margin:0 auto; } .ecross:after{ content:""; display:block; clear:both;} .ecross ul {padding:0; margin:0; } .ecross ul li{float:left; width:100%; overflow:hidden; margin-bottom:60px; } .ecross ul li .ecross_tit{font-size:2em;font-weight:600;} .ecross ul li .ecross_txt1{font-size:1.3em; font-weight:300; padding-top:30px; } .ecross ul li .ecross_txt2{font-size:1.3em; font-weight:300; padding-top:0px; } .ecross ul li .ecross_img{float:left; width:25%; height:350px; margin-bottom:0px; } .ecross ul li .ecross_img img{height:350px;} .ecross ul li .ecross_right1{float:right; width:75%; height:350px; padding:70px 20px 0 50px; box-sizing: border-box; } .ecross ul li .ecross_right{float:right; width:75%; height:350px; padding:38px 20px 0 50px; box-sizing: border-box; } .ecross ul li.other_type .ecross_img{float:right; width:25%; height:350px; margin-bottom:0px; text-align:right;} .ecross ul li.other_type .ecross_right{float:left; width:75%; height:350px; padding:50px 40px 0 50px; } .ecross ul li.other_type .ecross_img img{height:350px; } .btn_go {display:inline-block; background:#222; color:#fff; text-align:center; font-size:1em; margin:20px 0px; padding:10px 30px; border:1px solid #000; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} .btn_go:hover {color:#000; background-color:#fff; } /* 반응형 중간기기 1200px 사이즈 이하*/ @media all and (max-width:1200px){ .ecross {width:95%;} .ecross ul li .ecross_tit{font-size:1.5em; } .ecross ul li .ecross_txt{font-size:1em; } .ecross ul li .ecross_img{ width:30%; height:500px; margin-bottom:0px;} .ecross ul li .ecross_right1{ width:70%; height:500px; padding:30px 30px; margin-bottom:50px; } .ecross ul li .ecross_right{ width:70%; height:500px; padding:30px 30px; margin-bottom:50px; } .ecross ul li .ecross_img img{height:100%;} .ecross ul li.other_type .ecross_img{ width:30%; height:350px; margin-bottom:0px;} .ecross ul li.other_type .ecross_right{ width:70%; height:350px; padding:30px 30px; } .ecross ul li.other_type .ecross_img img{height:100%;} } /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:992px){ } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .business ul li { width:100%; margin-left:0px; margin-bottom:50px;} .ecross ul li{ width:100%; height:auto;} .ecross ul li .ecross_img{float:left; width:100%; height:auto;} .ecross ul li .ecross_img img{width:100%;} .ecross ul li .ecross_right{width:100%; height:auto; padding:30px 20px; } .ecross ul li .ecross_right1{width:100%; height:auto; padding:30px 20px; } .ecross ul li.other_type .ecross_right1{width:100%; height:auto; padding:30px; 20px; } .ecross ul li.other_type .ecross_right{width:100%; height:auto; padding:30px; 20px; } .ecross ul li.other_type .ecross_img{float:right; width:100%; height:auto;} .ecross ul li.other_type .ecross_img img{width:100%;} } /* 반응형 작은기기 480사이즈 이하 */ @media screen and (max-width: 480px) { .vision ul li { width:100%;} } /* 반응형 작은기기 360사이즈 이하 */ @media screen and (max-width: 360px) { } /*사업영역 Type02 */ .cross2 {width:100%; max-width:1500px; overflow:hidden; margin:0 auto; } .cross2:after{ content:""; display:block; clear:both;} .cross2 ul {padding:0; margin:0; } .cross2 ul li{float:left; width:100%; overflow:hidden; margin-bottom:60px; } .cross2 ul li .cross_tit{font-size:2em;font-weight:600;} .cross2 ul li .cross_txt{font-size:1.5em; font-weight:300; padding-top:20px; } .cross2 ul li .cross_img{float:left; width:50%; height:350px; margin-bottom:0px; } .cross2 ul li .cross_img img{height:350px;} .cross2 ul li .cross_right{float:right; width:50%; height:350px; padding:20px 50px 0 50px; box-sizing: border-box; } .cross2 ul li.other_type .cross_img{float:right; width:50%; height:350px; margin-bottom:00px; text-align:right;} .cross2 ul li.other_type .cross_right{float:left; width:50%; height:350px; padding:20px 40px 0 50px; } .cross2 ul li.other_type .cross_img img{height:350px; } .btn_go {display:inline-block; background:#222; color:#fff; text-align:center; font-size:1em; margin:20px 0px; padding:10px 30px; border:1px solid #000; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} .btn_go:hover {color:#000; background-color:#fff; } /* 반응형 중간기기 1200px 사이즈 이하*/ @media all and (max-width:1200px){ .cross2 {width:95%;} .cross2 ul li .cross_tit{font-size:1.5em; } .cross2 ul li .cross_txt{font-size:1.2em; } .cross2 ul li .cross_img{ width:30%; height:500px; margin-bottom:0px;} .cross2 ul li .cross_right{ width:70%; height:300px; padding:10px 30px; margin-bottom:50px; } .cross2 ul li .cross_img img{height:100%;} .cross2 ul li.other_type .cross_img{ width:30%; height:500px; margin-bottom:0px;} .cross2 ul li.other_type .cross_right{ width:70%; height:300px; padding:10px 30px; } .cross2 ul li.other_type .cross_img img{height:100%;} } /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:992px){ } /*사업영역 Type02 */ .ecross2 {width:100%; max-width:1500px; overflow:hidden; margin:0 auto; } .ecross2:after{ content:""; display:block; clear:both;} .ecross2 ul {padding:0; margin:0; } .ecross2 ul li{float:left; width:100%; overflow:hidden; margin-bottom:60px; } .ecross2 ul li .ecross_tit{font-size:1.8em;font-weight:600;} .ecross2 ul li .ecross_txt{font-size:1.3em; font-weight:300; padding-top:20px; } .ecross2 ul li .cross_img{float:left; width:50%; height:350px; margin-bottom:0px; } .ecross2 ul li .cross_img img{height:350px;} .ecross2 ul li .ecross_right{float:right; width:50%; height:350px; padding:20px 10px 0 20px; box-sizing: border-box; } .ecross2 ul li.other_type .cross_img{float:right; width:50%; height:350px; margin-bottom:00px; text-align:right;} .ecross2 ul li.other_type .ecross_right{float:left; width:50%; height:350px; padding:20px 10px 0 20px; } .ecross2 ul li.other_type .cross_img img{height:350px; } .btn_go {display:inline-block; background:#222; color:#fff; text-align:center; font-size:1em; margin:20px 0px; padding:10px 30px; border:1px solid #000; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} .btn_go:hover {color:#000; background-color:#fff; } /* 반응형 중간기기 1200px 사이즈 이하*/ @media all and (max-width:1200px){ .ecross2 {width:95%;} .ecross2 ul li .ecross_tit{font-size:1.2em; } .ecross2 ul li .ecross_txt{font-size:1em; } .ecross2 ul li .cross_img{ width:30%; height:500px; margin-bottom:0px;} .ecross2 ul li .ecross_right{ width:70%; height:500px; padding:5px 15px; margin-bottom:50px; } .ecross2 ul li .cross_img img{height:100%;} .ecross2 ul li.other_type .cross_img{ width:30%; height:500px; margin-bottom:0px;} .ecross2 ul li.other_type .ecross_right{ width:70%; height:500px; padding:5px 15px; } .ecross2 ul li.other_type .cross_img img{height:100%;} } /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:992px){ } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .business ul li { width:100%; margin-left:0px; margin-bottom:50px;} .cross2 ul li{ width:100%; height:auto;} .cross2 ul li .cross_img{float:left; width:100%; height:auto;} .cross2 ul li .cross_img img{width:100%;} .cross2 ul li .ecross_right{width:100%; height:auto; padding:30px 20px; } .cross2 ul li.other_type .ecross_right{width:100%; height:auto; padding:30px; 20px; } .cross2 ul li.other_type .cross_img{float:right; width:100%; height:auto;} .cross2 ul li.other_type .cross_img img{width:100%;} } @media screen and (max-width: 768px) { .business ul li { width:100%; margin-left:0px; margin-bottom:50px;} .cross2 ul li{ width:100%; height:auto;} .cross2 ul li .cross_img{float:left; width:100%; height:auto;} .cross2 ul li .cross_img img{width:100%;} .cross2 ul li .cross_right{width:100%; height:auto; padding:30px 20px; } .cross2 ul li.other_type .cross_right{width:100%; height:auto; padding:30px; 20px; } .cross2 ul li.other_type .cross_img{float:right; width:100%; height:auto;} .cross2 ul li.other_type .cross_img img{width:100%;} } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .business ul li { width:100%; margin-left:0px; margin-bottom:50px;} .ecross2 ul li{ width:100%; height:auto;} .ecross2 ul li .cross_img{float:left; width:100%; height:auto;} .ecross2 ul li .cross_img img{width:100%;} .ecross2 ul li .ecross_right{width:100%; height:auto; padding:30px 20px; } .ecross2 ul li.other_type .ecross_right{width:100%; height:auto; padding:30px; 20px; } .ecross2 ul li.other_type .cross_img{float:right; width:100%; height:auto;} .ecross2 ul li.other_type .cross_img img{width:100%;} } @media screen and (max-width: 768px) { .business ul li { width:100%; margin-left:0px; margin-bottom:50px;} .ecross2 ul li{ width:100%; height:auto;} .ecross2 ul li .cross_img{float:left; width:100%; height:auto;} .ecross2 ul li .cross_img img{width:100%;} .ecross2 ul li .cross_right{width:100%; height:auto; padding:30px 20px; } .ecross2 ul li.other_type .cross_right{width:100%; height:auto; padding:30px; 20px; } .ecross2 ul li.other_type .cross_img{float:right; width:100%; height:auto;} .ecross2 ul li.other_type .cross_img img{width:100%;} } /* 반응형 작은기기 480사이즈 이하 */ @media screen and (max-width: 480px) { .vision ul li { width:100%;} } /* 반응형 작은기기 360사이즈 이하 */ @media screen and (max-width: 360px) { } .eng { display:block; text-align:center; font-size: 1.6em; font-weight:600; margin:0px 0;} .eng em { color: #1e2f46; font-style: normal;} .stitle { font-size:1.5em; line-height:1.5em; text-align:center; color:#333; margin:10px 0 50px 0; } .stitle:after{display:block; width:100%; border-bottom:1px solid #ddd; height:30px; } /*회사소개 - 비전&미션*/ #info_vision{ width:100%; max-width:1550px; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:50px auto;} #info_vision .vision{ width:100%; height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin:70px auto 50px;} #info_vision .vision img{ display: block; width:40%; height: auto;} #info_vision .vision ul{ display: block; width:55%; height: auto;} #info_vision .vision ul li{ font-size:20px; color: #000; font-weight:300; line-height:34px; margin-bottom:30px;} #info_vision .vision ul li b{ display: block; font-size:24px; line-height:34px; margin-bottom:10px;} #info_vision .keyword{ position: relative; padding:70px 15px 50px; background: #f0f3f7;} #info_vision .keyword:before, #info_vision .keyword:after{ position: absolute; content: ""; top:0px; width:100%; height: 100%; background: #f0f3f7; z-index:-1px !important;} #info_vision .keyword:before{ left:-100%;} #info_vision .keyword:after{ right:-100%;} #info_vision .keyword h5{ display: block; font-size:26px; line-height:34px; text-align: center;} #info_vision .keyword dl{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:70px auto 50px;} #info_vision .keyword dl dd{ width:22%; height: auto;} #info_vision .keyword dl dd img{ width:100%; height: auto; margin-bottom:20px;} #info_vision .keyword dl dd b{ display: block; font-size:22px; line-height:34px; margin-bottom:10px;} #info_vision .keyword dl dd ul{ display: block; width:100%; height: auto;} #info_vision .keyword dl dd ul li{ font-size:20px; color: #000; font-weight:300; line-height:34px; margin-bottom:8px;} #info_vision .keyword dl dd ul li:before{ display:inline-block; content: ""; width:4px; height:4px; margin:0 5px 0 3px; vertical-align: middle; background: #000;} @media screen and (max-width: 768px) { #info_vision{ width:100%; height: auto; font-size:16px; line-height:28px;} #info_vision .vision{ width:100%; height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin:40px auto 50px;} #info_vision .vision img{ display: block; width:100%; height: auto; margin-bottom:15px;} #info_vision .vision ul{ width:100%; height: auto;} #info_vision .vision ul li{ font-size:16px; color: #000; font-weight:300; line-height:24px; margin-bottom:30px;} #info_vision .vision ul li b{ display: block; font-size:20px; line-height:28px; margin-bottom:10px;} #info_vision .keyword{ padding:30px 15px 30px;} #info_vision .keyword h5{ display: block; font-size:24px; line-height:34px; text-align: center;} #info_vision .keyword dl{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:40px auto 40px;} #info_vision .keyword dl dd{ width:48%; height: auto;} #info_vision .keyword dl dd img{ width:100%; height: auto; margin-bottom:20px;} #info_vision .keyword dl dd b{ display: block; font-size:18px; line-height:28px; margin-bottom:10px;} #info_vision .keyword dl dd ul{} #info_vision .keyword dl dd ul li{ font-size:16px; line-height:28px; margin-bottom:10px;} #info_vision .keyword dl dd ul li:before{ display:inline-block; content: ""; width:4px; height:4px; margin:0 5px 0 3px; vertical-align: middle; background: #000;} } /*회사소개 - 글로벌 네트워크*/ #info_global{ width:100%; max-width:1550px; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:50px auto;} #info_global > img{ display: block; width:100%; height: auto; margin:20px auto;} #info_global > div{ width:100%; height: auto; margin:30px auto 80px;} #info_global > div dl{ margin-bottom:20px;} #info_global > div dl dt{ display: flex; flex-wrap: wrap; justify-content:flex-start; margin-bottom:15px;} #info_global > div dl dt img{ display: block; width:3%; height: auto; vertical-align: middle; margin:0 15px 0 0;} #info_global > div dl dt b{ display: block; font-size:20px; line-height:28px; margin-bottom:10px; border-bottom: 1px solid #000;} #info_global > div dl dd{ display: block; font-size:20px; color: #000; font-weight:300; line-height:34px; margin-bottom:10px;} #info_global > div p.photo{ display: flex; flex-wrap: wrap; justify-content:space-between;} #info_global > div p.photo img{ display: block; height: auto;} #info_global > div p.duble img{width:48%;} #info_global > div p.full img{width:100%;} @media screen and (max-width: 768px) { #info_global{ width:100%; height: auto; font-size:16px; line-height:28px;} #info_global > div dl dt{ width:100%; height: auto; margin-bottom:10px;} #info_global > div dl dt img{ display: block; width:8%; height: auto; vertical-align: middle; margin:0 15px 0 0;} #info_global > div dl dt b{ display: block; font-size:18px; line-height:28px; margin-bottom:10px; border-bottom: 1px solid #000;} #info_global > div dl dd{ display: block; font-size:16px; line-height:28px; margin-bottom:5px;} } /*사업영역*/ #business_area{ width:100%; max-width:1550px; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:50px auto;} @media screen and (max-width: 768px) { #business_area{ width:100%; height: auto; font-size:16px; line-height:28px;} } /*사업영역 - 엔지니어링*/ .engineering{ text-align: center;} .engineering h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:150px auto 80px;} .engineering dl{ display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom:15px;} .engineering dl dd{ position: relative; width:30%; height: auto; margin-bottom:50px;} .engineering dl dd img{ display: block; width:100%; height: auto;} .engineering dl dd p{ position: absolute; bottom:0px; right:0px; width:100%; height:40px; font-size:20px; color: #000; font-weight:300; line-height:40px; text-align: center; background:rgba(255,255,255,0.8); z-index:5;} @media screen and (max-width: 768px) { .engineering h3{ display: block; font-size:18px; line-height:28px; text-align: center; margin:50px auto 30px;} .engineering dl dd{ position: relative; width:48%; height: auto; margin-bottom:20px;} .engineering dl dd p{ position: absolute; bottom:0px; right:0px; width:100%; height:30px; font-size:16px; font-weight:300; line-height:30px; } } /*사업영역 - 사업 개발 및 운영*/ .development{} .development > img{ display: block; width:100%; height: auto; margin:30px auto 50px;} .development h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:150px auto 80px;} .development dl.progressbar{ display: flex; flex-wrap: wrap; justify-content: space-between;} .development dl.progressbar dd { position: relative; width: 12%; align-items: center; justify-content: center; font-size:12px; color: #fff; text-align: center; line-height: 1.5; padding: 35px 0; z-index: 1;} .development dl.progressbar dd:nth-child(1){background: #015dc8;} .development dl.progressbar dd:nth-child(2){background: #0e54b5;} .development dl.progressbar dd:nth-child(3){background: #1c4a9f;} .development dl.progressbar dd:nth-child(4){background: #1e3e85;} .development dl.progressbar dd:nth-child(5){background: #19326e;} .development dl.progressbar dd:nth-child(6){background: #0c1e49;} .development dl.progressbar dd:nth-child(7){background: #02102e;} .development dl.progressbar dd:nth-child(1):after{border: 55px solid transparent; border-left:15px solid #015dc8;} .development dl.progressbar dd:nth-child(2):after{border: 55px solid transparent; border-left:15px solid #0e54b5;} .development dl.progressbar dd:nth-child(3):after{border: 55px solid transparent; border-left:15px solid #1c4a9f;} .development dl.progressbar dd:nth-child(4):after{border: 55px solid transparent; border-left:15px solid #1e3e85;} .development dl.progressbar dd:nth-child(5):after{border: 55px solid transparent; border-left:15px solid #19326e;} .development dl.progressbar dd:nth-child(6):after{border: 55px solid transparent; border-left:15px solid #0c1e49;} .development dl.progressbar dd:nth-child(7):after{border: 55px solid transparent; border-left:15px solid #02102e;} .development dl.progressbar.eng dd:nth-child(1):after{border: 65px solid transparent; border-left:15px solid #015dc8;} .development dl.progressbar.eng dd:nth-child(2):after{border: 65px solid transparent; border-left:15px solid #0e54b5;} .development dl.progressbar.eng dd:nth-child(3):after{border: 65px solid transparent; border-left:15px solid #1c4a9f;} .development dl.progressbar.eng dd:nth-child(4):after{border: 65px solid transparent; border-left:15px solid #1e3e85;} .development dl.progressbar.eng dd:nth-child(5):after{border: 65px solid transparent; border-left:15px solid #19326e;} .development dl.progressbar.eng dd:nth-child(6):after{border: 65px solid transparent; border-left:15px solid #0c1e49;} .development dl.progressbar.eng dd:nth-child(7):after{border: 65px solid transparent; border-left:15px solid #02102e;} .development dl.progressbar dd:before{ position: absolute; content: ''; top: 0; bottom: 0; left:0px; z-index: 4; border: 55px solid transparent; border-left:15px solid #fff; margin: auto;} .development dl.progressbar.eng dd:before{ border: 65px solid transparent; border-left:15px solid #fff;;} .development dl.progressbar dd:after{ position: absolute; content: ''; top: 0; bottom: 0; left:100%; z-index: 5; margin: auto;} .development dl.progressbar dd b{ display: block; font-size:16px;} .development dl.service{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:10px auto 50px;} .development dl.service dd{ position: relative; width:48%; height: auto;} .development dl.service dd img{ display: block; width:70%; height: auto;} .development dl.service dd ul{ position: absolute; top:10px; right:0px; width:40%; height:100%; padding:10px; background: rgba(17,37,86,0.9);} .development dl.service dd ul li{ display: block; width:100%; height: auto; font-size:16px; color: #fff; padding:10px 0px;} .development dl.service dd ul li:before{ display: inline-block; content: ""; width:4px; height: 4px; align-items: center; vertical-align: middle; margin:0 5px 0 3px; background: #fff;} .development .tabmenu{ position: relative; width:100%; background: #09116e; margin: 50px auto;} .development .tabmenu .tab_item { display: block; width: calc(100%/3); height: 60px; background: #fff; font-size: 16px; text-align: center; color: #09116e; line-height: 60px; font-weight: bold; float: left; transition: all 0.2s ease;} .development .tabmenu .tab_item:hover { opacity: 0.75;} .development .tabmenu input[name="tab_item"] {display: none;} .development .tab_content { display: none; padding:20px; clear: both; overflow: hidden;} .development .tab_content dl{ display: flex; flex-wrap: wrap; justify-content: space-between;} .development .tab_content dl dd{ display: block; width:30%; height: auto;} .development .tab_content dl dd img{ display: block; width:100%; height: auto;} .development #btnTab01:checked ~ #contTab01, .development #btnTab02:checked ~ #contTab02, .development #btnTab03:checked ~ #contTab03 {display: block;} .development .tabmenu input:checked + .tab_item { color: #fff; background: #09116e;} .development .tab_content dl dd p{ display: block; width:100%; height:40; font-size: 16px; text-align: center; color: #fff; line-height: 40px; background: #0061cd;} .development .tabmenu:before, .development .tabmenu:after{ position: absolute; content: ""; top:0px; width:100%; height: 100%; background: #09116e; border-top:60px solid #fff; z-index:-1px !important;} .development .tabmenu:before{ left:-100%;} .development .tabmenu:after{ right:-100%;} @media screen and (max-width: 768px) { .development{} .development > img{ display: block; width:100%; height: auto; margin:20px auto 40px;} .development h3{ font-size:18px; line-height:28px; margin:80px auto 30px;} .development dl.progressbar{} .development dl.progressbar dd { position: relative; width: 100%; align-items: center; justify-content: center; font-size:12px; color: #fff; text-align: center; line-height: 1.5; padding: 10px 0; margin-bottom:15px; z-index: 1;} .development dl.progressbar dd:before, .development dl.progressbar dd:after{ display: none;} .development dl.progressbar dd b{ display: block; font-size:16px;} .development dl.service{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:10px auto 30px;} .development dl.service dd{ position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width:100%; height: auto; margin-bottom: 15px;} .development dl.service dd img{ display: block; width:40%; height: auto;} .development dl.service dd ul{ position:relative; top:0px; right:0px; width:60%; height:auto; padding:10px; background: rgba(17,37,86,1);} .development dl.service dd ul li{ display: block; width:100%; height: auto; font-size:14px; color: #fff; padding:5px 0px;} .development dl.service dd ul li:before{ display: inline-block; content: ""; width:4px; height: 4px; align-items: center; vertical-align: middle; margin:0 5px 0 3px; background: #fff;} /*영문*/ .development dl.eservice{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:10px auto 30px;} .development dl.eservice dd{ position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width:100%; height: auto; margin-bottom: 15px;} .development dl.eservice dd img{ display: block; width:40%; height: auto;} .development dl.eservice dd ul{ position:relative; top:0px; right:0px; width:60%; height:auto; padding:10px; background: rgba(17,37,86,1);} .development dl.eservice dd ul li{ display: block; width:100%; height: auto; font-size:14px; color: #fff; padding:5px 0px;} .development dl.eservice dd ul li:before{ display: inline-block; content: ""; width:4px; height: 4px; align-items: center; vertical-align: middle; margin:0 5px 0 3px; background: #fff;} /*영문*/ .development .tabmenu{ position: relative; width:100%; background: #09116e; margin:20px auto;} .development .tabmenu .tab_item { display: block; width: calc(100%/3); height: 40px; background: #fff; font-size: 10px; text-align: center; color: #09116e; line-height: 40px; font-weight: bold; float: left; transition: all 0.2s ease;} .development .tab_content { display: none; padding:15px; clear: both; overflow: hidden;} .development .tab_content dl{} .development .tab_content dl dd{ display: block; background: #0061cd; width:31%; height: auto;} .development .tab_content dl dd img{ display: block; width:100%; height: auto;} .development #btnTab01:checked ~ #contTab01, .development #btnTab02:checked ~ #contTab02, .development #btnTab03:checked ~ #contTab03 {display: block;} .development .tabmenu input:checked + .tab_item {} .development .tab_content dl dd p{ display: block; padding:5px; width:100%; height:auto; font-size:12px; text-align: center; color: #fff; line-height:20px; } .development .tabmenu:before, .development .tabmenu:after{ display: none;} } /*사업영역 - 금융*/ .finance{} .finance > img{ display: block; width:100%; height: auto; margin:30px auto 50px;} .finance h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:150px auto 80px;} .finance .tabmenu{ position: relative; width:100%; background: #0d1523; margin: 50px auto;} .finance .tabmenu .tab_item { display: block; position: absolute; width:300px; height:80px; font-size: 16px; text-align:left; color: #000; line-height:80px; font-weight: bold; padding-left:15px; background: #fff; transition: all 0.2s ease; border-bottom: 1px solid #cacaca;} .finance .tabmenu .tab_item:hover { opacity: 0.75;} .finance .tabmenu .tab_item:nth-child(2){top:0px;} .finance .tabmenu .tab_item:nth-child(4){top:80px;} .finance .tabmenu .tab_item:nth-child(6){top:160px;} .finance .tabmenu .tab_item:nth-child(8){top:240px;} .finance .tabmenu input[name="tab_item"] {display: none;} .finance .tabmenu .tab_content { display: none; width:100%; height: auto; margin:0 0 0 300px; background: #0d1523; clear: both; overflow: hidden;} .finance .tabmenu .tab_content > div{display: flex; flex-wrap: wrap; justify-content: space-between;} .finance .tabmenu .tab_content .con01 img{ display: block; width:65%; height: auto;} .finance .tabmenu .tab_content .con01 ul{ display: block; width:35%; height: auto; margin:15px 0 0;} .finance .tabmenu .tab_content .con01 ul li{ display: block; width:100%; height: auto; font-size:16px; color: #fff; padding:20px;} .finance .tabmenu .tab_content .con01 ul li:before{ display: inline-block; content: ""; width:4px; height: 4px; align-items: center; vertical-align: middle; margin:0 5px 0 3px; background: #fff;} .finance .tabmenu #btnTab01:checked ~ #contTab01, .finance .tabmenu #btnTab02:checked ~ #contTab02, .finance .tabmenu #btnTab03:checked ~ #contTab03, .finance .tabmenu #btnTab04:checked ~ #contTab04{display: block;} .finance .tabmenu input:checked + .tab_item { color: #fff; background: #0d1523;} .finance .tabmenu:before, .finance .tabmenu:after{ position: absolute; content: ""; top:0px; width:100%; height: 100%; background: #0d1523; z-index:-1px !important;} .finance .tabmenu:before{ left:-100%;} .finance .tabmenu:after{ right:-100%;} .finance .tabmenu .tab02_item { display: block; position: absolute; width:300px; height:80px; font-size: 16px; text-align:left; color: #000; line-height:80px; font-weight: bold; padding-left:15px; background: #fff; transition: all 0.2s ease; border-bottom: 1px solid #cacaca;} .finance .tabmenu .tab02_item:hover { opacity: 0.75;} .finance .tabmenu .tab02_item:nth-child(2){top:0px;} .finance .tabmenu .tab02_item:nth-child(4){top:80px;} .finance .tabmenu input[name="tab02_item"] {display: none;} .finance .tabmenu .tab_content02 { display: none; width:100%; height: auto; margin:0 0 0 0; padding:0 0 0 300px; background: #0d1523; clear: both; overflow: hidden; box-sizing: border-box;} .finance .tabmenu .tab_content02 > div{ display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; width:100%;} .finance .tabmenu .tab_content02 .con02 img{ display: block; width:55%; height: auto;} .finance .tabmenu .tab_content02 .con02 ul{ display: block; width:45%; height: auto; margin:15px 0 0;} .finance .tabmenu .tab_content02 .con02 ul li{ display: block; width:100%; height: auto; font-size:16px; color: #fff; padding:20px;} .finance .tabmenu #btnTab0201:checked ~ #contTab0201, .finance .tabmenu #btnTab0202:checked ~ #contTab0202{display: block;} .finance .tabmenu input:checked + .tab02_item { color: #fff; background: #0d1523;} @media screen and (max-width: 768px) { .finance{} .finance > img{ display: block; width:100%; height: auto; margin:20px auto 40px;} .finance h3{ font-size:18px; line-height:28px; margin:80px auto 30px;} .finance .tabmenu{ position: relative; width:100%; background: #0d1523; margin: 20px auto;} .finance .tabmenu .tab_item { display: block; position:relative; width: calc(100%/4); height: 40px; background: #fff; font-size: 12px; text-align: center; color: #000; line-height: 40px; font-weight: bold; float: left; padding-left:0px; transition: all 0.2s ease; border-bottom:0px;} .finance .tabmenu .tab_item:hover {} .finance .tabmenu .tab_item:nth-child(2){top:0px;} .finance .tabmenu .tab_item:nth-child(4){top:0px;} .finance .tabmenu .tab_item:nth-child(6){top:0px;} .finance .tabmenu .tab_item:nth-child(8){top:0px;} .finance .tabmenu .tab_content { display: none; width:100%; height: auto; margin:0 0 0 0px; background: #0d1523; clear: both; overflow: hidden;} .finance .tabmenu .tab_content > div{} .finance .tabmenu .tab_content .con01 img{ display: block; width:100%; height: auto;} .finance .tabmenu .tab_content .con01 ul{ display: block; width:100%; height: auto; margin:10px 0 10px;} .finance .tabmenu .tab_content .con01 ul li{ display: block; width:100%; height: auto; font-size:14px; color: #fff; padding:10px;} .finance .tabmenu .tab_content .con01 ul li:before{ display: inline-block; content: ""; width:4px; height: 4px; align-items: center; vertical-align: middle; margin:0 5px 0 3px; background: #fff;} .finance .tabmenu #btnTab01:checked ~ #contTab01, .finance .tabmenu #btnTab02:checked ~ #contTab02, .finance .tabmenu #btnTab03:checked ~ #contTab03, .finance .tabmenu #btnTab04:checked ~ #contTab04{display: block;} .finance .tabmenu input:checked + .tab_item {} .finance .tabmenu:before, .finance .tabmenu:after{ display: none;} .finance .tabmenu .tab02_item { display: block; position:relative; width: calc(100%/2); height: 40px; background: #fff; font-size: 12px; text-align: center; color: #000; line-height: 40px; font-weight: bold; float: left; padding-left:0px; transition: all 0.2s ease; border-bottom:0px;} .finance .tabmenu .tab02_item:hover {} .finance .tabmenu .tab02_item:nth-child(2){top:0px;} .finance .tabmenu .tab02_item:nth-child(4){top:0px;} .finance .tabmenu input[name="tab02_item"] {display: none;} .finance .tabmenu .tab_content02 { display: none; width:100%; height: auto; margin:0 0 0 0; padding:0 0 0 0px; background: #0d1523; clear: both; overflow: hidden;} .finance .tabmenu .tab_content02 > div{display: flex; flex-wrap: wrap; justify-content: space-between;} .finance .tabmenu .tab_content02 .con02 img{ display: block; width:100%; height: auto;} .finance .tabmenu .tab_content02 .con02 ul{ display: block; width:100%; height: auto; margin:0px 0 0;} .finance .tabmenu .tab_content02 .con02 ul li{ display: block; width:100%; height: auto; font-size:14px; color: #fff; padding:20px;} .finance .tabmenu #btnTab0201:checked ~ #contTab0201, .finance .tabmenu #btnTab0202:checked ~ #contTab0202{display: block;} .finance .tabmenu input:checked + .tab02_item { color: #fff; background: #0d1523;} } /*사업영역 - 무역*/ .trade{ text-align: center;} .trade h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:150px auto 80px;} .trade ul{ display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom:15px;} .trade ul li{ position: relative; width:30%; height: auto; margin-bottom:50px; background: #0c1622;} .trade ul li p.img{ display: block; width:100%; height: auto;} .trade ul li p.img img{ display: block; width:100%; height: auto;} .trade ul li p.txt{ display: block; width:100%; height: auto; font-size:18px; color: #fff; font-weight:300; line-height:28px; text-align: left; padding:25px;} .trade ul li p.txt b{ display: block; font-size:24px; color: #c8dfff; line-height:32px; margin-bottom: 5px;} .trade .tradeinfo { position: relative; width:100%; height: auto; padding:30px 0;} .trade .tradeinfo.wide{ background: #f5f5f5;} .trade .tradeinfo.wide:before, .trade .tradeinfo.wide:after{ position: absolute; content: ""; top:0px; width:100%; height: 100%; background: #f5f5f5; z-index:-1px !important;} .trade .tradeinfo.wide:before{ left:-100%;} .trade .tradeinfo.wide:after{ right:-100%;} .trade .tradeinfo h4{ display: block; font-size:22px; line-height:32px; text-align:left; margin:30px auto 80px;} .trade .tradeinfo#oil_con { text-align:left; } .trade .tradeinfo h4#oil { margin-bottom:20px !important; } .trade .tradeinfo#oil_con p { margin-bottom: 30px; } .trade .tradeinfo#oil_con span {text-align:left;display:block; margin-bottom: 30px;overflow:hidden;} .trade .tradeinfo#oil_con span a {display:inline-block;float:left;} .trade .tradeinfo > div{ display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom:30px;} .trade .tradeinfo > div img{ position: relative; width:30%; height: auto;} @media screen and (max-width: 768px) { .trade{} .trade > img{ display: block; width:100%; height: auto; margin:20px auto 40px;} .trade h3{ font-size:18px; line-height:28px; margin:80px auto 30px;} .trade ul{ margin-bottom:15px;} .trade ul li{ width:100%; height: auto; margin-bottom:20px; background: #0c1622;} .trade ul li p.img{ display: block; width:100%; height: auto;} .trade ul li p.img img{ display: block; width:100%; height: auto;} .trade ul li p.txt{ display: block; width:100%; height: auto; font-size:14px; line-height:24px; text-align: left; padding:15px;} .trade ul li p.txt b{ display: block; font-size:16px; color: #c8dfff; line-height:24px; margin-bottom: 5px;} .trade .tradeinfo { position: relative; width:100%; height: auto; padding:10px 10px;} .trade .tradeinfo.wide{ background: #f5f5f5;} .trade .tradeinfo.wide:before, .trade .tradeinfo.wide:after{display: none;} .trade .tradeinfo h4{ display: block; font-size:18px; line-height:32px; text-align:center; margin:10px auto 30px;} .trade .tradeinfo > div{ display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom:10px;} .trade .tradeinfo > div img{ position: relative; width:100%; height: auto; margin-bottom:5px;} .trade .tradeinfo > div img.clearblock{display: none;} } /*사업영역 - 물류&운송*/ .distribution{ text-align: center;} .distribution h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:150px auto 80px;} .distribution > div{ width:100%; height:auto; font-size:20px; color: #000; font-weight:300; line-height:28px; text-align:center; margin:30px auto; padding:15px;} .distribution > div h4{ display: block; font-size:22px; line-height:28px; text-align:left; margin:10px 0 20px;} .distribution > div h4:before{ display: inline-block; width:30px; height:30px; font-size:12px; color: #fff; font-weight: bold; text-align: center; line-height:30px; align-items: center; vertical-align: middle; margin:0 10px 0 0; border-radius:50%; background:#0c1622;} .distribution > div:nth-child(2) h4:before{content: "01";} .distribution > div:nth-child(3) h4:before{content: "02";} .distribution > div:nth-child(4) h4:before{content: "03";} .distribution > div:nth-child(5) h4:before{content: "04";} .distribution > div:nth-child(6) h4:before{content: "05";} .distribution > div > img{ display: block; width:100%; height: auto; margin:15px auto;} .distribution > div ul{ display:block; margin-bottom:15px;} .distribution > div ul li{ display: block; font-size:20px; color: #000; font-weight:300; line-height:28px; text-align: left; padding:5px 0;} .distribution > div ul li span{ display: inline-block; color: #0061cd; font-weight:600; } .distribution > div ul li:before{ display:inline-block; content: ""; width:4px; height:4px; margin:0 5px 0 3px; vertical-align: middle; background: #000;} .distribution > div dl{ display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom:15px;} .distribution > div dd{ position: relative; width:48%; height: auto; font-size:20px; color: #000; font-weight:300; line-height:28px; text-align:center; margin-bottom:20px;} .distribution > div dd img{ display: block; width:100%; height: auto; margin-bottom:10px;} .distribution > div > span{ display: block; font-size:22px; color: #000; font-weight:300; line-height:28px; text-align:center; margin-bottom:10px;} @media screen and (max-width: 768px) { .distribution{} .distribution h3{ font-size:18px; line-height:28px; margin:80px auto 30px;} .distribution > div{ width:100%; height:auto; font-size:16px; color: #000; font-weight:300; line-height:28px; text-align:center; margin:20px auto 40px; padding:0px;} .distribution > div h4{ display: block; font-size:16px; line-height:28px; text-align:center; margin:10px 0 20px;} .distribution > div h4:before{ display: inline-block; width:20px; height:20px; font-size:10px; text-align: center; line-height:20px; margin:0 10px 0 0;} .distribution > div ul{} .distribution > div ul li{ display: block; font-size:14px; color: #000; font-weight:300; line-height:28px; text-align: left; padding:5px 0;} .distribution > div ul li font{ display: inline-block; color: #0061cd; font-weight:600; } .distribution > div > img{ display: block; width:100%; height: auto; margin:20px auto 40px;} .distribution > div dl{ display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom:15px;} .distribution > div dd{ position: relative; width:100%; height: auto; font-size:14px; color: #000; font-weight:300; line-height:28px; text-align:center; margin-bottom:20px;} .distribution > div > span{ display: block; font-size:14px; line-height:24px; margin-bottom:10px;} .distribution ul{ margin-bottom:15px;} } /*프로젝트*/ #project{ width:100%; max-width:1550px; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:50px auto;} #project .projext_intro{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%; height: auto; margin-bottom: 150px;} #project .projext_intro p{display: block; height: auto;} #project .projext_intro .pht{width:30%; } #project .projext_intro .txt{ width:67%; font-size:20px; color: #000; font-weight:300; line-height:32px;} #project .tabmenu{ position: relative; width:100%; height: auto; margin: 50px auto;} #project .tabmenu .tab_item { display: block; height: 60px; background: #fff; font-size: 16px; text-align: center; color: #09116e; line-height: 60px; font-weight: bold; float: left; transition: all 0.2s ease;} #project .tabmenu.two .tab_item{width: calc(100%/2);} #project .tabmenu.three .tab_item{width: calc(100%/3);} #project .tabmenu.four .tab_item{width: calc(100%/4);} #project .tabmenu .tab_item:hover { opacity: 0.75;} #project .tabmenu input[name="tab_item"] {display: none;} #project #btnTab01:checked ~ #contTab01, #project #btnTab02:checked ~ #contTab02, #project #btnTab03:checked ~ #contTab03, #project #btnTab04:checked ~ #contTab04{display: block;} #project .tabmenu input:checked + .tab_item { color: #fff; background: #09116e;} #project .tab_content { display: none; clear: both; overflow: hidden;} #project .tab_content > img{ display: block; width:100%; height: auto; margin-bottom:25px;} #project .tab_content div.txt{ display: block; position: relative; width:100%; height: auto; font-size:18px; color: #000; font-weight:300; line-height:30px; padding:0 0 0 340px;} #project .tab_content div.txt h3{ display: block; position: absolute; top:0px; left:0px; width:340px; height:auto; font-size:26px; color: #000; font-weight: 600; line-height:34px; text-align: center; } /*#project .tab_content div.txt h3:after{ display: block; content: "/";}*/ #project .tab_content div.txt b{ display: block;} #project .tab_content div.txt table{ width:100%; height: auto; border-spacing:0px; border-top:1px solid #aaa; border-left:1px solid #aaa; margin:20px 0;} #project .tab_content div.txt table th, #project .tab_content div.txt table td{ font-size:16px; color: #000; font-weight:300; line-height:28px; text-align: center; padding:15px 5px; border-bottom:1px solid #aaa; border-right:1px solid #aaa;} #project .tab_content div.txt table td ul{ width:60%; margin:0 auto 15px;} #project .tab_content div.txt table td ul li{ display: block; font-size:16px; color: #000; font-weight:300; line-height:28px; text-align: left;} #project .tab_content div.txt table td ul li:before{ display: inline-block; content: ""; width:4px; height: 4px; margin:0 5px 0 0; vertical-align: middle; background: #333;} #project .tab_content div.txt table th{ background: #ececec;} @media screen and (max-width: 768px) { #project{ width:100%; height: auto; font-size:16px; line-height:28px;} #project .projext_intro{ display: flex; flex-wrap: wrap; justify-content: space-between; width:100%; height: auto; margin-bottom: 50px;} #project .projext_intro p{display: block; height: auto;} #project .projext_intro .pht{width:100%; margin-bottom:15px;} #project .projext_intro .txt{ width:100%; font-size:16px; color: #000; font-weight:300; line-height:28px;} #project .tabmenu{ position: relative; width:100%; height: auto; margin: 30px auto;} #project .tabmenu .tab_item { display: block; height:30px; background: #fff; font-size: 10px; text-align: center; color: #09116e; line-height:30px; font-weight: bold; float: left; transition: all 0.2s ease;} #project .tabmenu.four .tab_item{width: calc(100%/2);} #project .tab_content { display: none; padding:0px;} #project .tab_content > img{ display: block; width:100%; height: auto; margin-bottom:15px;} #project .tab_content div.txt{ font-size:14px; line-height:24px; padding:0 0 0 0px;} #project .tab_content div.txt h3{ display: block; position:relative; top:0px; left:0px; width:100%; height:auto; font-size:18px; font-weight: 600; } #project .tab_content div.txt table th, #project .tab_content div.txt table td{ font-size:13px; color: #000; font-weight:300; line-height:24px; text-align: center; padding:10px 5px; border-bottom:1px solid #aaa; border-right:1px solid #aaa;} #project .tab_content div.txt table td ul{ width:90%; margin:0 auto 15px;} #project .tab_content div.txt table td ul li{ display: block; font-size:13px; color: #000; font-weight:300; line-height:24px; text-align: left;} } /*지속가능경영*/ #sustainable{ width:100%; max-width:1550px; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:50px auto;} #sustainable .info.first{margin-top: 100px;} #sustainable .info, #sustainable .bg, #sustainable .certificate{ position:relative; width:100%; height: auto; padding:50px 0;} #sustainable .info h3, #sustainable .bg h3, #sustainable .certificate h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:40px auto 40px;} #sustainable .info > div{ display: block; width:100%; height: auto;} #sustainable .info > div:after{ display: block; content: ""; clear: both;} #sustainable .info > div img{ display: block; width:55%; height: auto;} #sustainable .info > div ul{ display: block; width:42%;} #sustainable .info > div ul li{ font-size:20px; color: #000; font-weight:300; line-height:34px; padding:5px 0;} #sustainable .info.left{background: #f3f3f3;} #sustainable .info.left:before, #sustainable .info.left:after{ position: absolute; content: ""; top:0px; width:100%; height: 100%; background:#f3f3f3; z-index:-1px !important;} #sustainable .info.left:before{ left:-100%;} #sustainable .info.left:after{ right:-100%;} #sustainable .info.left > div img{float: left;} #sustainable .info.left > div ul{float: right;} #sustainable .info.right > div img{float: right;} #sustainable .info.right > div ul{float: left;} #sustainable .info.right > div ul li{text-align: right;} #sustainable .bg{ position: relative; font-size:20px; color: #fff; font-weight:300; line-height:34px; text-align: center; background: #284273;} #sustainable .bg img{ display: block; width:100%; max-width: 1000px; height: auto; margin:50px auto; } #sustainable .bg:before, #sustainable .bg:after{ position: absolute; content: ""; top:0px; width:100%; height: 100%; background:#284273; z-index:-1px !important;} #sustainable .bg:before{ left:-100%;} #sustainable .bg:after{ right:-100%;} #sustainable .bg h3{ color: #fff;} #sustainable .certificate dl{ display: flex; flex-wrap:wrap; justify-content: space-between;} #sustainable .certificate dl dd{ display: block; width:45%; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; text-align: center; margin-bottom:15px;} #sustainable .certificate dl dd img{ display: block; width:100%; height: auto; margin-bottom:15px;} @media screen and (max-width: 768px) { #sustainable{ width:100%; height: auto; font-size:16px; line-height:28px; margin:50px auto;} #sustainable > div:first-child{margin-top: 50px;} #sustainable .info, #sustainable .bg, #sustainable .certificate{ position:relative; width:100%; height: auto; padding:20px 0; margin-bottom:15px;} #sustainable .info h3, #sustainable .bg h3, #sustainable .certificate h3{ display: block; font-size:18px; line-height:28px; margin:0px auto 20px;} #sustainable .info > div{ display: block; width:100%; height: auto; padding:10px;} #sustainable .info > div:after{ display: block; content: ""; clear: both;} #sustainable .info > div img{ display: block; width:100%; height: auto;} #sustainable .info > div ul{ display: block; width:100%;} #sustainable .info > div ul li{ font-size:16px; color: #000; font-weight:300; line-height:28px; text-align: center !important; padding:3px 0;} #sustainable .info.left{background: #f3f3f3;} #sustainable .info.left:before, #sustainable .info.left:after{ display: none;} #sustainable .info.left > div img, #sustainable .info.right > div img{float: none;} #sustainable .info.left > div ul, #sustainable .info.right > div ul{float:none;} #sustainable .info.right > div ul{float: left;} #sustainable .info > div ul li{text-align: right;} #sustainable .bg{ position: relative; font-size:16px; line-height:28px; background: #284273;} #sustainable .bg img{ display: block; width:100%; max-width: 1000px; height: auto; margin:50px auto; } #sustainable .bg:before, #sustainable .bg:after{ display: none;} #sustainable .certificate dl{} #sustainable .certificate dl dd{ display: block; width:49%; height: auto; font-size:12px; line-height:28px; margin-bottom:15px;} #sustainable .certificate dl dd img{ display: block; width:100%; height: auto; margin-bottom:10px;} } /*품질경영*/ #quality{ width:100%; max-width:1550px; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:50px auto;} #quality > b{ display: block; color:#0039b0} #quality .certificate, #quality .info{ display: block; width:100%; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; margin:100px auto;} #quality .certificate h3{ display: block; font-size:26px; line-height:34px; text-align: center; margin:40px auto 40px;} #quality .certificate dl{ display: flex; flex-wrap:wrap; justify-content:center;} #quality .certificate dl dd{ display: block; width:40%; height: auto; font-size:20px; color: #000; font-weight:300; line-height:34px; text-align: center; margin-bottom:15px;} #quality .certificate dl dd img{ display: block; width:100%; height: auto; margin-bottom:15px;} #quality .info{ text-align: center;} #quality .info dl{ display: flex; flex-wrap:wrap; justify-content:space-between; margin:30px auto;} #quality .info dl dd{ display: block; width:24%; height: auto; margin-bottom:15px;} #quality .info dl dd img{ display: block; width:100%; height: auto;} #quality .info dl dd p{ display: block; width:100%; height:60px; font-size:18px; color: #fff; font-weight:300; line-height:60px; text-align: center; background: #010f2c;} @media screen and (max-width: 768px) { #quality{ width:100%; height: auto; font-size:16px; line-height:28px; margin:50px auto;} #quality .certificate, #quality .info{ display: block; width:100%; height: auto; font-size:18px; line-height:28px; margin:50px auto;} #quality .certificate h3{ display: block; font-size:18px; line-height:28px; margin:40px auto 40px;} #quality .certificate dl{ display: flex; flex-wrap:wrap; justify-content:center;} #quality .certificate dl dd{ display: block; width:100%; height: auto; font-size:16px; line-height:28px; margin-bottom:15px;} #quality .certificate dl dd img{ display: block; width:100%; height: auto; margin-bottom:15px;} #quality .info{ text-align: center;} #quality .info dl{ display: flex; flex-wrap:wrap; justify-content:space-between; margin:30px auto;} #quality .info dl dd{ display: block; width:47%; height: auto; margin-bottom:15px;} #quality .info dl dd img{ display: block; width:100%; height: auto;} #quality .info dl dd p{ display: block; width:100%; height:30px; font-size:16px; line-height:30px;} }