/* main contents */

#container {
    max-width: 1240px;
    margin: 0 auto;
    margin-top: 170px;
    padding: 0 18px;
    height: inherit;
}
    
#sub_wrap #left_menu, #sub_wrap #sub_contents{
    float: left;
}
    
#sub_wrap #left_menu{
    width: 18.73333%;
    margin-right: 3.141667%;
}

#sub_wrap #left_menu #over_menu{
    margin: 0px;
    padding: 0px;
}
    
#sub_wrap #sub_contents {
    width: 78.125%;
}

/* left menu */

#sub_wrap #left_menu ul{padding-top:1px;padding-bottom:10px;}
#sub_wrap #left_menu li{width:auto;}
#sub_wrap #left_menu li a.dp1{display:block; padding:15px 15px; text-align:left;font-weight:normal;border:1px solid #d7d7d7;color:#636363;font-size:16px; margin-top:1px; }
#sub_wrap #left_menu li.on a.dp1{color:#fff;background-color:#4e81b8;border:1px solid #a1a1a1;font-weight:bold;}
#sub_wrap #left_menu li a.dp1:hover{color:#fff;background-color:#4e81b8;border:1px solid #a1a1a1;font-weight:bold;}
#sub_wrap #left_menu li ul {padding-bottom:10px; }
#sub_wrap #left_menu li ul li a {display:block; text-align:left; padding:5px;}


/* left menu - title */

#sub_wrap #left_menu {float:left; width:200px;padding-bottom:50px; }
#sub_wrap #left_menu h2 {width:200px; height:100px; background:#000;line-height:100px;text-align:center; color:#fff;font-size:22px;font-weight:bold;}


/* content css */


#sub_wrap #sub_contents {float:right; width:940px;} /*오른쪽컨텐츠 전체와꾸*/
#sub_wrap #sub_contents .lnb h3 {padding-top:40px; text-align:left; font-size:30px; font-weight:bold; color:#000;}/* title */
#sub_wrap #sub_contents .location {position: relative; left: 670px; top: 40px; padding-left:15px; padding-left:15px;}
#sub_wrap #sub_contents .location li {display:inline; font-size:15px; color:#666;}
#sub_wrap #sub_contents .location b {color:#666;}
#sub_wrap #sub_contents .con_detail {text-align:left; padding-top:50px; padding-bottom:60px; line-height:18px; min-height: 40vh;} /* content */


/* company profile --- greetings */


#sub0101_con {color:#222; margin-bottom:60px; font-size: 16px;}
#sub0101_con .sub0101_tit {text-align:left; background:url(../images/sub0101_tit_bg.jpg) no-repeat center center;
				            width: 100%; height: auto; border-bottom:3px solid #4875a6;}
#sub0101_con .sub0101_tit h3{font-size:2.750em; text-align:left; line-height:56px; color:#4875a6; font-weight:bold; margin-top: 20px; margin-bottom:40px;}
#sub0101_con .sub0101_tit p{font-size:1.250em; line-height:28px; font-weight:700;}
#sub0101_con .sub0101_detail p {font-size: 1.188em; line-height:33px; margin-top:60px;}
#sub0101_con .sub0101_detail h3{text-align:right; font-size:1.250em; line-height:35px; font-weight: 700;}


/* vision */


#sub0102_con { margin-bottom: 60px;}
#sub0102_con:after {content: ""; display: block; clear: both;}
#sub0102_con .sub0102_tit {text-align: center; color: #222;}
#sub0102_con .sub0102_tit h3 {font-size: 2.625em; text-align: center; line-height: 56px; color: #1065b1; font-weight: bold; }
#sub0102_con .sub0102_tit p {font-size: 1.188em; line-height: 33px; padding: 46px 0; border-bottom: 1px solid #e1e1e1; color: #222; }
#sub0102_con .sub0102_detail h3 {text-align: center; font-size: 1.125em; line-height: 35px; font-weight: bold; color: #222; margin-top: 35px;}
#sub0102_con .sub0102_detail h3 span {font-size: 1.625em; }
#sub0102_con .sub0102_detail .sub0102_vision {max-width: 890px; margin-top: 50px; margin-left: 65px; list-style: none; padding: 0;}
#sub0102_con .sub0102_detail .sub0102_vision li {float: left; margin: 0 40px; text-align: center;}
#sub0102_con .sub0102_detail .sub0102_vision li span { font-size: 1.250em; font-weight: bold; line-height: 33px; color: #1065b1; }
#sub0102_con .sub0102_detail .sub0102_vision p {font-size: 1.188em; line-height: 43px; }


/* organization_ci */


#sub0103_con { color: #222 }
#sub0103_con .sub0103_organization {position: relative; padding-top: 56.25%;}
#sub0103_con .sub0103_organization img {position: absolute;  left: 0;  top: 0;  width: 100%;  height: auto;}
#sub0103_con .sub0103_tit { font-size: 24px; font-weight: bold; color: #222; margin-bottom: 30px; }
.contact a { text-decoration: none; color: black;}
#sub0103_con .sub0103_tit:before { display: block; content: ""; width: 30px; height: 3px; 
                                   background-color: #4875a6; margin-bottom: 15px;}
#sub0103_con .contact { margin-top: 160px;}
#sub0103_con .contact table { border-collapse: collapse; width: 100%; height: auto;} 
#sub0103_con .contact th, td { padding: 8px; text-align: left;}
#sub0103_con .contact tr:hover { background-color: #f5f5f5;}
#sub0103_con .contact th { color: black; font-size:18px; }
#sub0103_con .contact td { color:black; font-size:18px; }

#sub0103_con .eplogis_ci {max-width: 940px; margin: 0 auto;}
#sub0103_con .eplogis_ci .ci_list {border: 1px solid #dfdfdf;}
#sub0103_con .eplogis_ci .ci_list div {min-height: 258px; padding: 5px;}
#sub0103_con .eplogis_ci .ci_list #left {float: left; margin-right: 20px;}
#sub0103_con .eplogis_ci .ci_list #right p {font-size: 1.125em; line-height: 35px; padding-top: 20px; margin:0;}

/* history */

#sub0104_con {background:url(../images/sub0104_img01.jpg) no-repeat; background-size:contain; background-position:center center; color:#222;}
#sub0104_con .sub0104_history div h3{color:#1365b0; font-size:34px; font-weight:bold; }
#sub0104_con .sub0104_history div h3:after{display:block; content:""; background-color:#1365b0; width:162px; height:4px; margin:15px 0 20px -70px;}
#sub0104_con .sub0104_history div p{font-size:18px; line-height:33px; background:url(../images/sub0104_txtbg.png) no-repeat left center; }
#sub0104_con .sub0104_history div {margin-top:25px; margin-left:70px;}


/* location */

#sub0105_con {width: 940px; position: relative;}
#sub0105_con:after {display: block; content: ""; clear: both;}
#sub0105_con .sub0105_map {margin-bottom: 20px;}
#sub0105_con .sub0105_txt span {text-align: left; font-size: 18px; line-height: 30px; color: #222; font-weight: bold; margin-top: 20px;}
#sub0105_con .sub0105_txt a {position: absolute; right: 0; bottom: 0;}


/* solution --- fms */

#sub0201_con {width: 100%; position: relative;}
#sub0201_con img {width: 100%; height: auto;}
#sub0201_con .first_paragraph {margin-top: 40px;}
#sub0201_con .first_paragraph:before {display: block;content: ""; width: 30px; height: 3px; background-color: #4875a6; margin-bottom: 15px;}
#sub0201_con .sub0201_paragraph {margin-bottom: 70px;}
#sub0201_con .sub0201_paragraph p {color: #222; font-size: 18px; line-height: 40px;}
#sub0201_con .sub0201_paragraph h3 { color: #222; font-size: 22px; font-weight: bold; margin-bottom: 30px;}
#sub0201_con .sub0201_paragraph h3:before { display: block; content: "";
width: 30px; height: 3px; background-color: #4875a6; margin-bottom: 15px;}


/* mro */

#sub0202_con {width: 100%; position: relative;}
#sub0202_con img {width: 100%; height: auto;}
#sub0202_con .first_paragraph{margin-top:40px;}
#sub0202_con .first_paragraph:before{display:block; content:""; width:30px; height:3px; background-color:#4875a6; margin-bottom:15px; }
#sub0202_con .sub0202_paragraph{margin-bottom:70px;}
#sub0202_con .sub0202_paragraph p{color:#222; font-size:18px; line-height:40px; }
#sub0202_con .sub0202_paragraph h3{color:#222; font-size:22px; font-weight:bold; margin-bottom:30px; }
#sub0202_con .sub0202_paragraph h3:before{display:block; content:""; width:30px; height:3px; background-color:#4875a6; margin-bottom:15px; }


/* customer */

#sub0203_con .sub0203_btn_Alphabet .button {background-color: white; /* Green */ border: none; color: black; width: 28px; height: 28px; 
                        text-align: inherit; text-decoration: none; display: inline-block; font-size: 16px; 
                        margin: 4px 1px; -webkit-transition-duration: 0.4s; /* Safari */ 
                        transition-duration: 0.4s; cursor: pointer; border: 2px solid #008CBA; padding-left: -1px;}

#sub0203_con .sub0203_btn_Alphabet .button:hover {background: #008CBA; color: white;}
.active {background: #008CBA; color: white;}
.button:active { background: #008CBA; color: white;}
.class {float: left; margin-right: 10px;}

#sub0203_con .sub0203_btn_Alphabet  {padding: 70px 70px 70px 0;}
#sub0203_con #sub0203_textOutput {margin-top: 20px; margin-left: 30px; height: 420px; width: 700px; text-align: left; font-size: 18px;}


/* detail view */

@media (max-width: 1259px) and (min-width: 813px){
    #sub_wrap #left_menu {display: none;}
    
    #container {
        max-width: 100%;
        margin: 0 auto;
        margin-top: 170px;
        padding: 0 24px;
    }  
    
    
    #sub_wrap #left_menu{width: 100%;}
    #sub_wrap #sub_contents {width: 100%;}
    
    #sub_wrap #sub_contents .location {left: 0px; top: 40px; padding-left:15px; padding-left:15px;}
    
    
    #sub0101_con .sub0101_tit h3 {font-size: 2.250em;}
    #sub0101_con .sub0101_tit p {font-size:1.188em;}
    #sub0101_con .sub0101_detail p {font-size: 1.188em;}
    #sub0101_con .sub0101_detail h3 {font-size:1.188em;}
    
    
    #sub0102_con .sub0102_tit h3 { font-size: 2.500em;}
    #sub0102_con .sub0102_tit p {font-size: 1.125em;}
    
    #sub0102_con .sub0102_detail .sub0102_vision {max-width: 780px; margin: 0 auto; margin-top: 50px; margin-right: 40px;}
    #sub0102_con .sub0102_detail .sub0102_vision li {float: left; margin: 0 20px;}
    #sub0102_con .sub0102_detail .sub0102_vision p {font-size: 1.125em;}
    
    #sub0103_con .sub0103_organization {position: relative; padding-top: 56.25%; margin-bottom: 120px;}
    
    #sub0103_con .eplogis_ci .ci_list #right p {padding-top: 0px;}
    
    #sub0104_con .sub0104_history div h3{font-size:30px;}
    #sub0104_con .sub0104_history div p{font-size:17px;}
    
    #sub0105_con {width:100%; position:relative;}
    #sub0105_con #img_map {width:100%; height: auto; }
    
    #sub0105_con .sub0105_txt span {font-size: 17px;}
       
    #sub0201_con .sub0201_paragraph p {line-height: 38px;}
    
    #sub0202_con .sub0202_paragraph p {line-height: 38px;}

    #sub0203_con .sub0203_btn_Alphabet {padding: 50px 50px 50px 0;}
    #sub0203_con #sub0203_textOutput {width:100%; height: 400px; margin: 0px; text-align: left; font-size: 17px;} 
    
}


@media (max-width: 812px) {
    #container {
        max-width: 100%;
        margin: 0 auto;
        margin-top: 20px;
        padding: 0 24px;
    }  
    
    #sub_wrap #sub_contents {width: 100%;}
    
    #sub_wrap #left_menu, #sub_wrap #sub_contents{float: none;}
    #sub_wrap #left_menu{ width: 100%;  margin-bottom: 40px;}
    
    #sub_wrap #left_menu h2 {display: none;}
    
    #sub_wrap #left_menu li{max-width: 650px; margin: 0 auto; margin-top: 40px; }
    #sub_wrap #left_menu li a.dp1{display: inline-block; float: left; width: 128px; font-size: 13px; padding: 15px 8px; text-align: center;}
    
    #sub_wrap #sub_contents .location {display: none;}
    
    #sub0101_con .sub0101_tit h3{font-size: 2.000em;}
    #sub0101_con .sub0101_tit p{font-size:1.125em; }
    #sub0101_con .sub0101_detail p {font-size: 1.125em; margin-top: 40px;}
    #sub0101_con .sub0101_detail h3{font-size:1.125em;}
    
    
    #sub0102_con .sub0102_tit h3 {font-size: 2.250em;}
    #sub0102_con .sub0102_tit p {font-size: 1.125em;}
    #sub0102_con .sub0102_detail h3 span { font-size: 1.438em;}
    #sub0102_con .sub0102_detail .sub0102_vision { margin: 0 auto; margin-top: 50px; }
    #sub0102_con .sub0102_detail .sub0102_vision li { float: none; margin: 0 30px 20px 30px; text-align: center;}
    #sub0102_con .sub0102_detail .sub0102_vision p {font-size: 1.125em;}
    
    
    #sub0103_con .sub0103_organization {position: relative; padding-top: 56.25%; margin-bottom: 30px;}
    #sub0103_con .sub0103_organization img {position: absolute; left: 0; top: 0; width: 100%; height: auto; }
    #sub0103_con .contact table td {font-size: 1.000em; }
    
    #sub0103_con .eplogis_ci .ci_list {max-width: 580px; margin: 0 auto; height: 100%;}
    #sub0103_con .eplogis_ci .ci_list #left {width: 100%; float: none; margin-right: 0px;}
    #sub0103_con .eplogis_ci .ci_list #left img {width: 100%; margin-top: 60px;}
    #sub0103_con .eplogis_ci .ci_list #right {width: 100%;}
    #sub0103_con .eplogis_ci .ci_list #right p {font-size: 1.125em; padding-top: 0px;}
    
    
    
    #sub0104_con .sub0104_history div h3 {font-size: 28px;}
    #sub0104_con .sub0104_history div p {font-size:17px; line-height: 30px; background-position:left top;}
    #sub0104_con .sub0104_history div {margin-top:25px; margin-left:30px;}
    
    #sub0105_con {width:100%; position:relative;}
    #sub0105_con #img_map {width:100%; height: auto;}
    
    #sub0105_con .sub0105_txt {position: relative; width: 100%;}
    #sub0105_con .sub0105_txt span {font-size: 15px; width: 100%; height: auto; }
   
    #sub0105_con .sub0105_txt #btn_map {width: 230px;}
    
    #sub0201_con .sub0201_paragraph p {font-size: 16px;}
    #sub0201_con .sub0201_paragraph h3 {font-size: 20px;}
    
    #sub0202_con .sub0202_paragraph p{font-size:16px;}
    #sub0202_con .sub0202_paragraph h3 {font-size:20px;}

    #sub0203_con .sub0203_btn_Alphabet {
        padding: 50px 50px 50px 0;
    }
    #sub0203_con #sub0203_textOutput {width:100%; height: 370px;  margin: 0px; text-align: left; font-size: 16px; }
  
}

    @media (max-width: 724px) {
        #sub0105_con .sub0105_txt #btn_map {
            width: 210px;
            position: absolute;
            top: 25%;
            right: -115%;
        }
    }

    @media (max-width: 470px) {

        #container {
            padding: 0 18px;
        }

        #sub_wrap #left_menu {
            margin-bottom: 90px;
        }

        #sub0103_con .contact table tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: 0.625em;
        }

        #sub0103_con .contact table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: 0.813em;
            text-align: left;
        }

        #sub0103_con .eplogis_ci .ci_list #right p {
            font-size: 1.000em;
            padding-top: 0px;
        }

        #sub0104_con {
            background-image: none;
        }

        #sub0105_con .sub0105_txt #btn_map {width: 190px;}
    }