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

/* _0101 인사말 */
.welcome .hello { position: relative; display: flex; align-items: center; width: 100%; height: 400px; padding: 0 100px; box-sizing: border-box; z-index: 10;}
.welcome .hello::before { content: ''; position: absolute; top: 60px; right: 0; background: url(/project/design/com/welcome_img.png) no-repeat center / contain; width: 85vw; height:  100%; z-index: 0;}
.welcome .hello::after { content: ''; position: absolute; width: 1920px; height: 400px; background-color: #F1F6FF; top: 0; left:0 ; z-index: -1;}
.welcome .hello p { font-size: 44px; font-weight: 400; color: #000;}
.welcome .hello p span { color: #1D317D; font-weight: 700;}
.welcome .hello p span br {display: none;}
.welcome .desc { padding: 60px 100px; font-size: 20px; font-weight: 400;}
.welcome .desc p:nth-child(1) { margin-bottom: 50px;}
.welcome .desc .ceo { margin-top: 125px;}
.welcome .desc .ceo span { font-size: 40px; font-weight: 700; color: #000; padding-left: 10px;}

@media all and (max-width: 1440px) {
    .welcome .hello, .welcome .hello::after, .welcome .hello::before { height: 300px;}
    .welcome .hello { justify-content: center; padding: 0 0 0 50px;}
    .welcome .hello p { font-size: 35px; }
    .welcome .desc { font-size: 18px;}
    .welcome .desc .ceo span { font-size: 35px;}
}

@media all and (max-width: 1260px) {
    .welcome .hello, .welcome .hello::after, .welcome .hello::before { height: 250px; }
    .welcome .hello p { font-size: 25px; }
    .welcome .desc { padding: 40px 60px;}
    .welcome .desc .ceo { margin-top: 100px;}
    .welcome .desc .ceo span { font-size: 30px;}
}

@media all and (max-width: 900px) {
    .welcome .hello, .welcome .hello::after, .welcome .hello::before { height: 180px;}
    .welcome .hello { padding: 0 0 0 20px;}
    .welcome .hello::before { top: 0px;}
    .welcome .hello p { font-size: 20px;}
    .welcome .desc { font-size: 15px; }
    .welcome .desc .ceo { margin-top: 70px; }
    .welcome .desc .ceo span { font-size: 25px;}
}

@media all and (max-width: 680px) {
    .welcome .hello p { font-size: 18px; }
    .welcome .desc { padding: 40px; }
}

@media all and (max-width:550px) {
    .welcome .hello p span br { display: block; }
}

@media all and (max-width: 440px) {
    .welcome .hello, .welcome .hello::after, .welcome .hello::before { height:  150px; }
    .welcome .hello p { font-size: 15px; }
    .welcome .desc { font-size: 12px; padding: 30px;}
    .welcome .desc p:nth-child(1){ margin-bottom: 30px;}
    .welcome .desc p:nth-child(2) br { display: none; }
    .welcome .desc .ceo span { font-size: 20px;}
}


/* _0102 주요업무/조직도 */
.con6 h3.stle { display: none; }
.business .bus_area { width: 100%; position: relative; z-index: 10; padding: 70px 0; }
.business .bus_area img { width: 100%; }
.business .bus_area .pc { display: block;}
.business .bus_area .mobile { display: none;}
.business .bus_area::before { content: ''; position: absolute; width: 1920px; height: 100%; background-color: #FBFBFB; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); }

@media all and (max-width: 680px) {
    .business .bus_area { padding: 35px 0;}
    .business .bus_area .pc { display: none;}
    .business .bus_area .mobile { display: block;}
}

/*  _0103찾아오시는 길 */
.root_daum_roughmap .wrap_controllers,
.wrap_btn_zoom { display: none !important; }
.map .map_area { height:  560px; position: relative;}
.map .map_area .root_daum_roughmap .wrap_map { height: 560px !important;}
.map .map_area .map_border { display: none;}
.map .map_area .map_address { position: absolute; bottom: 0; right: 0; padding: 36px 40px; box-sizing: border-box; z-index: 10; background-color: rgba(255, 255, 255, 0.9); display: flex; gap: 10px; flex-direction: column; justify-content: center;}
.map .map_area .map_address p { font-size: 27px; font-weight: 700; color: #333; }
.map .map_area .map_address ul { display: flex; flex-wrap: wrap; gap: 20px;}
.map .map_area .map_address ul li { display: flex; align-items: center; gap: 10px; /* font-family: 'Pretendard'; */ font-size: 17px; font-weight: 500;}
.map .map_area .map_address ul li span { display: flex; align-items: center; justify-content: center; min-width: 35px; min-height:  35px; border-radius: 100%; background-color: #001345;}
.map .map_area .map_address ul li span i { color : #fff; font-size: 17px;}

.map_area .cont { display: none !important; }
.map_area .root_daum_roughmap { width: 100% !important; }


.map .address_area { display: flex; position: relative; background-color: #FBFBFB; border-radius: 5px; padding: 35px 40px; margin-top: 55px; gap: 100px;}
.map .address_area::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 90%; background-color: #E8E8E8;}
.map .address_area > div { flex: 1; font-family: 'Pretendard'; font-size: 15px; font-weight: 500; color: #686868;}
.map .address_area > div > p { font-size: 30px; font-weight: 600; color: #333333; display: flex; align-items: center; gap: 15px;}
.map .address_area > div p span { display: flex; align-items: center; justify-content: center; width: 56px; height:  56px; border-radius: 100%;}
.map .address_area div:nth-child(1) > p span { border: 1px solid #1E327D; background-color: #F1F6FF;}
.map .address_area > div:nth-child(2) > p span { border: 1px solid #FF783E; background-color: #FFEFE8;}
.map .address_area > div p span i {font-size: 28px;}
.map .address_area > div:nth-child(1) > p span i { color: #395DB2; }
.map .address_area > div:nth-child(2) > p span i {color: #FF783E; }
.map .address_area > div > div { padding-top: 28px;}
.map .address_area .use_bus .come1 div { padding-bottom: 40px;}
.map .address_area .use_bus .come1 div:last-child { padding-bottom: 0;}
.map .address_area .use_bus .come1 div span { display: inline-block; padding: 10px 20px; color: #fff; border-radius: 5px; font-size: 17px; font-weight: 500; margin-bottom: 20px;}
.map .address_area .use_bus .come1 > div:nth-child(1) span { background-color: #FF783E; }
.map .address_area .use_bus .come1 div:nth-child(2) span { background-color: #395DB2; }
.map .address_area .use_car .come2 div { margin-bottom: 20px; }
.map .address_area .use_car .come2 div span { display: inline-block; padding: 10px 20px; font-size: 17px; font-weight: 700; color: #404040; background-color: #EBEBEB; border-radius: 8px;}
.map .address_area .use_car .come2 div p { padding: 20px;}

@media all and (max-width: 1440px) {
    .map .map_area { height: 400px;}
    .map .map_area .root_daum_roughmap .wrap_map { height: 400px !important;}
    .map .map_area .map_address { padding: 25px 30px; }
    .map .map_area .map_address p { font-size: 25px;}
    .map .map_area .map_address ul { gap: 10px;}
    .map .map_area .map_address ul li { font-size: 15px; }
    .map .address_area > div > p { font-size: 25px; gap: 10px;}
}

@media all and (max-width: 1260px) {
    .map .address_area > div p span { width: 50px; height: 50px; }
    .map .map_area .map_address p { font-size: 20px; }
    .map .address_area { margin-top: 80px; }
    .map .address_area > div { font-size: 15px; }
    .map .address_area > div > p { font-size: 20px; }
    .map .address_area .use_bus .come1 div span { padding: 5px 15px; font-size: 15px;}
    .map .address_area .use_car .come2 div span { font-size: 15px;}
}

@media all and (max-width: 900px) {
    .map .map_area { height: auto; border: 1px solid #E2E2E2;}
    .map .address_area { margin-top: 40px; gap: 60px;}
    .map .address_area > div p span { width: 40px; height: 40px;}
    .map .address_area > div p span i { font-size: 22px;}
    .map .map_area .map_address { position: relative;}
    .map .map_area .map_address ul { flex-direction: column;}
    .map .map_area .map_address p { font-size: 18px; }
    .map .address_area > div { font-size: 15px; }
    .map .address_area > div > p { font-size: 18px; }
    .map .address_area .use_bus .come1 div span { padding: 5px 15px; font-size: 15px;}
    .map .address_area .use_car .come2 div span { font-size: 15px; }
}

@media all and (max-width: 680px) {
    .map .map_area .root_daum_roughmap .wrap_map { height: 250px !important;}
    .map .map_area .map_address p { font-size: 15px; }
    .map .map_area .map_address ul li { align-items: baseline; gap: 5px;}
    .map .map_area .map_address ul li span { min-width: 25px; min-height: 25px;}
    .map .map_area .map_address ul li span i { font-size: 13px; }
    .map .address_area { display: block; padding: 30px 20px; gap: 100px;}
    .map .address_area::before { display: none; }
    .map .address_area .use_car { margin-top: 100px; }
}

@media all and (max-width: 440px) {
    .map .map_area .map_address { padding: 20px 25px; }
    .map .map_area .map_address ul li { font-size: 13px; }
    .map .address_area > div > p { font-size: 15px; }
    .map .address_area > div p span { width: 30px; height: 30px;}
    .map .address_area > div p span i { font-size: 18px; }
    .map .address_area > div { font-size: 13px;}
}


/* _0201 사업소개 */

.int_business .area_01 { display: flex; align-items: center; position: relative; z-index: 10; margin-bottom: 65px; padding: 105px 0; gap: 128px }
.int_business .area_01::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: url(/project/design/com/int_business1.png) no-repeat center / contain; width: 100vw; height:  100%; z-index: -1;}
.int_business .area_01 .area_img01 { display: flex; flex-direction: column;}
.int_business .area_01 .area_img01 img { width: 100%;}
.int_business .area_01 .area_text01 p { font-size: 33px; font-weight: 800; color: #000;}
.int_business .area_01 .area_text01 p span { color: #395DB2; font-weight: 800; }
.int_business .area_01 .area_text01 p.desc { font-size: 20px; font-weight: 300; color: #686868; padding-top: 30px;}
.int_business .area_02 { text-align: center; }
.int_business .area_02 .mobile { display: none; }

@media all and (max-width: 1600px) {
    .int_business .area_02 img { width: 100%;}
}

@media all and (max-width: 1440px) {
    .int_business .area_01 .area_text01 p { font-size: 28px; }
    .int_business .area_01 .area_text01 p.desc { font-size: 18px; padding-top: 20px;}
    .int_business .area_01 .area_text01 p.desc br { display: none;}
}

@media all and (max-width: 1260px) {
    .int_business .area_01 { gap: 80px; }
    .int_business .area_01::before { width: 120vw;}
    .int_business .area_01 .area_text01 p { font-size: 22px; }
    .int_business .area_01 .area_text01 p.desc { font-size: 15px; padding-top: 20px;}
    .int_business .area_01 .area_text01 p.desc br { display: none;}
}

@media all and (max-width: 900px) {
    .int_business .area_01::before { width: 140vw; }
    .int_business .area_01 .area_text01 p { font-size: 18px; }
    .int_business .area_01 .area_text01 p.desc { font-size: 15px; padding-top: 10px; }
}

@media all and (max-width: 680px) {
    .int_business .area_01 { padding: 50px 0; gap: 50px; display: block;}
    .int_business .area_01 .area_img01 img { width: 50%; }
    .int_business .area_01::before { background: url(/project/design/com/int_business1.png) no-repeat left / cover; width: 100vw;}
    .int_business .area_text01 { padding-top: 30px; }
    .int_business .area_02 .pc { display: none; }
    .int_business .area_02 .mobile { display: block;}
}

@media all and (max-width: 440px) {
    .int_business .area_01::before { background:#FBFBFB url(/project/design/com/int_business1.png) no-repeat left top / 800px; width: 100vw;}
    .int_business .area_01 .area_text01 p { font-size: 15px;}
    .int_business .area_01 .area_text01 p.desc { font-size: 13px;}
}