/**
* OLYM Cascading Style Sheets
* File Name : contents.css
* Description : 컨텐츠 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2020.10.21
* Update : 2020.10.21
* Copyright(c) 2020 OLYM Communications. All Rights Reserved.
*/

/* 0101_회사소개 */
.comp_box .p_desc1 { font-size:1.5em; font-weight:600; text-align:center; color:#000; padding-bottom:50px;}
.comp_box .p_desc1 span { color:#38b549;}
.comp_box .p_desc2 { font-weight:300; text-align:center; color:#636363; line-height:1.8em;}
.comp_box .img_box > ul > li { width:30%; float:left; text-align:center;}
.comp_box .p_desc3 { font-size:1.3em; font-weight:300; color:#979797; padding-top:20px;}
.comp_box .p_desc3 span { font-weight:600;}
.comp_box .p_desc3 .bg1 { color:#2d79cf;}
.comp_box .p_desc3 .bg2 { color:#0d8780;}
.comp_box .p_desc3 .bg3 { color:#4a3a9b;}
.comp_box .img_box { padding:80px 0;}
.comp_box .img_box > ul > li:nth-child(2) { padding:0 5%;}
.comp_box .box_ceo {margin-top:50px; background:url("/project/design/contents/img_ceo1.jpg") no-repeat right top; padding:10px 470px 40px 80px; }
.comp_box .box_ceo .p_desc4 { font-size:1.3em; color:#000; font-weight:500; padding-bottom:40px;}
.comp_box .box_ceo .p_desc5 { color:#7b7b7b; line-height:1.8em; font-weight:300;}
.comp_box .box_ceo .p_desc6 { color:#7b7b7b; line-height:1.8em; font-weight:300; padding-top:40px;}
.comp_box .box_ceo .p_desc6 span { font-size:1.3em; color:#000; font-weight:500; }
.comp_box .box_ceo .p_desc6 i { margin-left:20px;}

@media all and (max-width:1000px) {
.comp_box .p_desc2 br { display:none;}
.comp_box .img_box { padding:50px 0;}
.comp_box .box_ceo {margin-top:30px; background-size:300px; padding:10px 340px 20px 0; }
.comp_box .box_ceo .p_desc5 { line-height:1.6em;}
}

@media all and (max-width:500px) {
.comp_box .p_desc1 { padding:0 30px 30px 30px;}
.comp_box .img_box > ul { width:60%; margin:0 auto;}
.comp_box .img_box > ul > li { width:100%; }
.comp_box .img_box > ul > li:nth-child(2) { padding:40px 0;}
.comp_box .box_ceo { background:none; padding:0; }
.comp_box .box_ceo .p_desc4 { padding-bottom:20px;}
.comp_box .box_ceo .p_desc6 { text-align:right;}
.comp_box .box_ceo .p_desc6 i { display:block; margin:20px 0 0 0;}
}

/* 0102_사업분야 */
.busi_box > ul > li { float:left; width:48%; margin-bottom:50px;}
.busi_box > ul > li:nth-child(odd) {margin-right:4%;}
.busi_box .box_in .img { overflow:hidden;}
.busi_box .box_in .img img { width:100%; transition: all 1s ease;}
.busi_box .box_in .box_w {position:relative; background:#fff; padding:50px; box-sizing:border-box; width:88%; margin-top:-70px; transition: all .5s ease;}
.busi_box .box_in .box_w h4 { font-size:1.5em; font-weight:600; color:#000; margin-bottom:10px;}
.busi_box .box_in .box_w p {font-weight:300; color:#636363; line-height:1.8em;}
.busi_box > ul > li:nth-child(odd) .box_w { float:right;}
.busi_box .box_in:hover .img img { transform: scale(1.1, 1.1);}
.busi_box .box_in:hover .box_w { background:#223b82; transform: translate(0, -10px);}
.busi_box .box_in:hover .box_w h4 { color:#fff; }
.busi_box .box_in:hover .box_w p { color:rgba(255,255,255,0.7);}

@media all and (max-width:1000px) {
.busi_box > ul > li { margin-bottom:30px;}
.busi_box .box_in .box_w {padding:30px;}
}

@media all and (max-width:500px) {
.busi_box > ul > li { width:100%;}
.busi_box > ul > li:nth-child(odd) {margin-right:0;}
}

/* 0103_협력사소개 */
.rela_box .box_img { text-align:center; background:#e7f0f3; margin:30px 0 70px 0; padding:0 10px;}
.rela_box .box_img2 { text-align:center;  margin:30px 0;}

/* 0201_제품소개 */
.prod_box .p_desc1 { font-size:1.5em; font-weight:600; text-align:center; color:#000;}
.prod_box .p_desc2 { font-weight:300; text-align:center; color:#636363; line-height:1.8em;}
.prod_box .box_img { text-align:center; background:#e7f0f3; margin:70px 0; padding:0 10px;}
.prod_box .tab_type1 > ul { margin:0 auto 100px auto;}
.prod_box .box_in { display:table; padding-bottom:150px;}
.prod_box .box_in .desc { display:table-cell; width:50%; text-align:center; box-sizing:border-box; padding:20px 50px; vertical-align:top;}
.prod_box .box_in .img { display:table-cell; width:50%; text-align:center;}
.prod_box .box_in .img.mo { display:none;}
#tab_box2 .box_in { padding-bottom:100px;}
#tab_box2 .table_type1 { margin-bottom:100px;}

@media all and (max-width:1000px) {
.prod_box .tab_type1 > ul { margin:0 auto 50px auto;}
.prod_box .box_in { padding-bottom:70px;}
.prod_box .box_in .desc { padding:20px; }
#tab_box2 .box_in { padding-bottom:70px;}
#tab_box2 .table_type1 { margin-bottom:70px;}
}

@media all and (max-width:500px) {
.prod_box .box_in { display:block; }
.prod_box .box_in .desc { display:block; float:left; width:100%;}
.prod_box .box_in .img { display:block; float:right;width:100%;}
.prod_box .box_in .img.pc { display:none;}
.prod_box .box_in .img.mo { display:block;}
}

/* 03_유가동향 */
.prod_search { background:#eee; text-align:center; padding:30px 10px; margin-bottom:40px;}
.prod_search * { vertical-align:top;}
.prod_search .title {display:inline-block; line-height:66px; font-size:1.125em; color:#000; font-weight:600; margin-right:40px;}
.prod_search .input_box {display:inline-block; }
.prod_search .input_box input { border:none; width:300px; background:#fff; height:66px; padding:10px; box-sizing:border-box; color:#666;}
.prod_search .input_box .btn_cal_prod {display:inline-block;  background:#000 url("/project/design/contents/icon_cal.png") no-repeat center; width:66px; height:66px; text-indent:-9999px; }
.prod_search .btn_search_prod {display:inline-block; padding:0 40px; line-height:66px; color:#fff; font-size:1.125em; font-weight:600; background: rgb(99,143,210); background: linear-gradient(90deg, rgba(99,143,210,1) 0%, rgba(12,46,142,1) 100%); margin-left:10px; border:0;cursor:pointer;}
.prod_list .prod_top { padding:20px 10px;}
.prod_list .prod_top .left { float:left;}
.prod_list .prod_top .right { float:right;}

@media all and (max-width:1280px) {
.prod_search .title {display:none;}
.prod_search .input_box input { width:180px; height:56px; }
.prod_search .input_box .btn_cal_prod {background-size:25px;width:56px; height:56px; }
.prod_search .btn_search_prod { padding:0 20px; line-height:56px; margin-left:5px;}
}

@media all and (max-width:500px) {
.prod_search { padding:20px;}
.prod_search .input_box input { width:80%; margin-bottom:10px;}
.prod_search .input_box .btn_cal_prod {width:20%;  }
.prod_search .btn_search_prod { display:block; text-align:center; width:100%; box-sizing:border-box; margin-left:0;}
}

/* 0304_국제유가 현황 및 전망 */
.report_box { background:#e8f4f9; display:table; table-layout:fixed; margin-bottom:40px;}
.report_box .left { display:table-cell; vertical-align:middle;}
.report_box .right { display:table-cell; vertical-align:middle; padding:30px;}
.report_box .right .p_desc1 { color:#000; font-weight:600; font-size:1.2em;}
.report_box .right .p_desc2 { font-weight:300; font-size:0.95em; margin:20px 0; line-height:1.6em;}
.report_box .right .p_desc3 { color:#3155a4; font-size:0.8em;}

@media all and (max-width:1280px) {
.report_box .right { padding:20px;}
.report_box .right .p_desc2 { margin:10px 0;}
}

@media all and (max-width:500px) {
.report_box .left { display:none;}
}

/* 0504_삼화에너지 의뢰 */
.en_box .p_desc2 { color:#000; font-size:40px; font-weight:900; margin-bottom:60px;}
.en_box .p_desc2 span { font-size:20px; font-weight:500;}
.en_box .step_in > ul > li { float:left; width:23.5%; padding-right:2%; }
.en_box .step_in > ul > li:last-child { padding-right:0; }
.en_box .step_in > ul > li .box_in { height:500px; box-sizing:border-box; border:1px solid #ddd; background:#f7f7f7;}
.en_box .step_in > ul > li .box_in .top_box { background:#fff;  padding:40px; box-sizing:border-box; height:220px; position:relative;}
.en_box .step_in > ul > li .box_in h4 { font-size:26px; font-weight:600; color:#000;}
.en_box .step_in > ul > li .box_in i {  position:absolute; right:40px; bottom:40px;}
.en_box .step_in > ul > li .box_in .desc_box {padding:30px 10px 30px 30px;}
.en_box .step_in > ul > li .box_in .desc_box ul > li { font-size:0.875em; font-weight:300; position:relative; padding-left:10px;}
.en_box .step_in > ul > li .box_in .desc_box ul > li:before { content:"- "; position:absolute; top:0; left:0; display:inline-block;}

@media all and (max-width:1280px) {
.en_box .step_in > ul > li .box_in h4 { font-size:20px; }
.en_box .step_in > ul > li { width:49%;  padding-bottom:20px;}
.en_box .step_in > ul > li:nth-child(2) { padding-right:0;}
}
@media all and (max-width:500px) {
.en_box .step_in > ul > li .box_in h4 { font-size:20px; }
.en_box .step_in > ul > li { width:100%; padding-right:0;}
.en_box .step_in > ul > li:nth-child(2) { padding-right:0;}
.en_box .step_in > ul > li .box_in { height:auto;}
.en_box .step_in > ul > li .box_in .top_box { padding:20px; height:100px;}
.en_box .step_in > ul > li .box_in i { right:20px; bottom:20px;}
.en_box .step_in > ul > li .box_in i img { height:60px;}
.en_box .step_in > ul > li .box_in .desc_box {padding:20px;}
}

/* 0802_주문조회 */
.step_ord { padding:80px 0 50px 0;}
.step_ord > ul > li { float:left; width:23.5%; padding-right:2%;}
.step_ord > ul > li:last-child { padding-right:0;}
.step_ord > ul > li .box_in { padding:30px 35% 30px 30px; position:relative; min-height:100px;}
.step_ord > ul > li .box_in .num { display:inline-block; width:54px; line-height:54px; background:#3155a4; border-radius:100%; color:#fff; font-size:24px; font-weight:600; text-align:center; position:absolute; top:-27px; left:50%; margin-left:-27px;}
.step_ord > ul > li .box_in h4 { font-size:24px; color:#000; font-weight:600; padding-bottom:10px;}
.step_ord > ul > li .box_in p { font-size:0.8em;}
.step_ord > ul > li .box_in.bg1 { background:#f5f5f5 url("/project/design/contents/img_step_ord1.png") no-repeat 90% center;}
.step_ord > ul > li .box_in.bg2 { background:#f5f5f5 url("/project/design/contents/img_step_ord2.png") no-repeat 90% center;}
.step_ord > ul > li .box_in.bg3 { background:#f5f5f5 url("/project/design/contents/img_step_ord3.png") no-repeat 90% center;}
.step_ord > ul > li .box_in.bg4 { background:#f5f5f5 url("/project/design/contents/img_step_ord4.png") no-repeat 90% center;}

.step_ord.partner > ul > li { width:32%;}

@media all and (max-width:1280px) {
.step_ord > ul > li .box_in { padding:20px 30% 20px 20px;}
.step_ord > ul > li .box_in .num { width:40px; line-height:40px; font-size:18px; top:-20px; margin-left:-20px;}
.step_ord > ul > li .box_in h4 { font-size:18px; padding-bottom:5px;}
.step_ord > ul > li .box_in.bg1 { background-size:50px;}
.step_ord > ul > li .box_in.bg2 { background-size:50px;}
.step_ord > ul > li .box_in.bg3 { background-size:50px;}
.step_ord > ul > li .box_in.bg4 { background-size:50px;}
}
@media all and (max-width:800px) {
.step_ord { padding:40px 0 0 0;}
.step_ord > ul > li { width:49%; padding-bottom:20px;}
.step_ord > ul > li:nth-child(2) { padding-right:0;}
.step_ord > ul > li .box_in { min-height:60px;}
.step_ord > ul > li .box_in .num { width:30px; line-height:30px; font-size:16px; top:-15px; margin-left:-15px;}
.step_ord > ul > li .box_in h4 { font-size:16px;}
.step_ord.partner > ul > li { width:100%;  padding-right:0;}
}


/* 0703_전국저장소 */
.tab_storage{margin-top: 40px; ; }
.tab_storage .tabs{display: none; }
.tab_storage .tabs.on{display: block; }

.map_wrapper{ height: 450px; margin-bottom: 40px; ;}
.map{height: 100%; }

/* 04_유가정보 */
.graph_wrapper{ width: 100%; height: 400px; margin-bottom: 20px; position: relative; }
/* .graph_wrapper #chart{ height: 400px !important; } */
.watermarking{position: relative; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none; }
.watermark_wrapper{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; user-select: none; overflow: hidden; }
.watermark_wrapper .watermark{position: absolute; width: 2000%; height: 2000%; opacity: 0.1;
  top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);
}