@charset "utf-8";
@import url('base.css');

/*index page*/
#index_wrap {position:relative; width:100%; max-width:640px; background:url('../img/index_pic4.jpg')no-repeat; background-size:100% 100%}
#index_wrap img{display:block;}
#index_wrap ul{width:65%; padding-top:10%; padding-bottom:10%; margin:0 auto;}
#index_wrap ul li{margin-bottom:20px}

#M_Wrapper {  position: relative; height: 100%; width: 100%; left: 0; 
          -webkit-transition:  left 0.4s ease-in-out;
          -moz-transition:  left 0.4s ease-in-out;
          -ms-transition:  left 0.4s ease-in-out;
          -o-transition:  left 0.4s ease-in-out;
          transition:  left 0.4s ease-in-out; 
		  border-top:4px solid #154365; 
		  }

/*공통 01 : 상단 헤더----------------------------------------------------------------------*/
#M_header{border-top:4px solid #144366; border-bottom:1px solid #e7e7e7; }
.M_logoWrap {padding:20px 0px;}
.M_logoWrap>a.btn-left {display:inline-block;width:23%;text-align:center;}
.M_logoWrap>a.btn-left>img {}
.M_logoWrap>a.M_logo {display:inline-block;width:50%; text-align:center;}
.M_logoWrap>a.M_logo>img {width:120px;}
.M_logoWrap>a.utilWrap {display:inline-block;width:33px; text-align:left; position:relative; top:0px; left:0px;  }
.M_logoWrap>a img { }

/*공통 02 :왼쪽 슬라이딩 메뉴--------------------------------------------------------------*/
.close {position:absolute; display:inline-block; width:25px; height:25px; background:none; border:0; color:#fff; right:20px; top:3px; color:#000; padding:15px 10px; font-size:15px; font-weight:600;}
.login{position:absolute; left:20px; top:20px; color:#666; font-weight:500}
.login a{display:inline-block;}

/*상단*/
.sliding-menu {width:76%; height:100%; position:absolute; z-index:1000; top:0px; background:#fff;}
.sliding-menu>ul {margin-top:50px;border-top:1px solid #154365;}
.sliding-menu>ul>li {background:#fff; }
.sliding-menu>ul>li>a {display:block; height:50px; line-height:50px; color:#242223; padding:0 20px;  font-weight:600; font-size:15px; border-bottom:1px solid #c7c7c7}

/*하단*/
.sliding-menu>ul>li>ul>li{background:#5e8495; padding:15px 20px; border-bottom:1px solid #fff;}
.sliding-menu>ul>li>ul>li:first-child{border-top:5px solid #154365;}
.sliding-menu>ul>li>ul>li>a{color:#fff; padding:10px 50px 10px 20px; font-size:13px;letter-spacing:-0.05em}
.icon-dashboard{background:url('../images/r_bullet.png')no-repeat; background-position:90%; background-size:10px;}*/

/*Mobile Main 아이콘*/
#M_Iconbtn{width:100%; max-width:640px; }
.M_way{float:left; width:50%; /*background:url('../img/main_box1.jpg')no-repeat;*/}
.M_join{float:left; width:50%;background:#144366}
.M_call{float:left; width:50%; /*height:175px;  background:url('../img/main_box3.jpg')no-repeat;*/}


/* Mobile 푸터  --------------------------------------------------------------------------*/
#M_Footer {}
#M_Footer .footer_menu { height:33px; padding:8px 15px 0; border-width:1px 0 1px; border-style:solid; border-color:#ddd; background:#b0b0b0; font-size:11px; 
									position:relative; }
#M_Footer .footer_menu a { display:inline-block; padding:5px 10px; text-align:center; background:#fff; border:1px solid #ddd; color:#333; }
#M_Footer .footer_menu a.right {  position:absolute; right:10px; padding:5px 15px; }
#M_Footer .footer_copyright {width:90%; margin:0 auto; text-align:left; font-size:10px; letter-spacing:-0.05em; line-height:1.4; color:#b7b7b7; text-align:left; padding:28px 0; }



/*#M_Footer .footer_logo{float:left;width:30%;  padding:50px 35px; text-align:center}
#M_Footer .footer_copyright {float:right; width:50%; text-align:left; font-size:10px; letter-spacing:-0.05em; line-height:1.4; color:#b7b7b7; text-align:left; padding:28px 0; }
#M_Footer .footer_copyright p { color:#999; font-size:11px; padding:6px 0 0;}

/*@media screen and (min-width:500px) {
#M_Footer .footer_logo{float:left;width:30%;  padding:50px 35px; text-align:center}
#M_Footer .footer_copyright {float:right; width:50%; text-align:left; font-size:10px; letter-spacing:-0.05em; line-height:1.4; color:#b7b7b7; text-align:left; padding:28px 0; }
#M_Footer .footer_copyright p { color:#999; font-size:11px; padding:6px 0 0;}
}

@media screen and (max-width:400px) {
#M_Footer .footer_logo{width:90%; padding:20px; margin:0 auto; text-align:center}
#M_Footer .footer_logo img{width:40%;}
#M_Footer .footer_copyright {width:100%; text-align:left; font-size:10px; letter-spacing:-0.05em; line-height:1.4; color:#b7b7b7; text-align:center; padding:0px 0; }
#M_Footer .footer_copyright p { color:#999; font-size:11px; padding:6px 0 0;}
}*/

/*==================================================================================*/



/* Mobile Sub 레이아웃  --------------------------------------------------*/
#M_SubWrap { padding:0px; margin:0 auto; width:100%;  max-width:640px;}
#M_SubBody { padding:0 15px 15px; overflow:hidden; }
#M_Subbar { background:#3f4457; padding:10px 15px;  text-align:right; color:#fff; font-size:12px; line-height:12px; height:12px; } 
#M_Subbar span { background:url(../img/arrow.png) no-repeat 3px -29px; padding:0 7px; }


/* Mobile Sub 카테고리 메뉴  --------------------------------------------------*/
#M_submenu { position:relative; max-width:640px; }
#M_submenu ul {display:table; table-layout: fixed; width:100%; border-collapse:collapse; box-sizing:border-box;}
#M_submenu li {display:table-cell; height:auto; text-align:center; border-right:1px solid #ddd; }
#M_submenu a {display:block; font-size:11px; padding:9px 0; background:#e7e7e7; color:#333}
#M_submenu li.on a {color:#fff;background:#154365; }


/* Mobile Sub 타이틀  --------------------------------------------------*/
#M_subtitle { font-size:22px;  margin:20px 15px 20px; font-weight:bold; letter-spacing:-2px; }


/* Mobile Sub 컨텐츠  --------------------------------------------------*/
.subtit { padding:0 0 0 16px; background:url(../img/i_tit.png) no-repeat 0 50%; font-weight:bold; }
.subtxt { font-size:13px; text-align:justify; letter-spacing:-0.05em; line-height:2; color:#666}
.company_ton{font-weight:bold; font-size:14px; color:#ffcc00}
.company_stit{font-size:17px; font-weight:700; padding:20px 0;}
.toptxt_right { text-align:right; font-size:12px; color:#666; height:15px; }

.tableA { border-top:1px solid #333; }
.tableA th { background:#f8f8f8; padding:10px 15px 10px 15px; border-bottom:1px solid #ddd; }
.tableA td { padding:10px 15px 10px 15px; border-bottom:1px solid #ddd; letter-spacing:-0.05em; line-height:1.5; color:#666}
.tableF { border-top:1px solid #333; }
.tableF.input input { border:1px solid #ddd; padding:3px; background:#f7f7f7; vertical-align:middle; }
.tableF th { background:#f7f7f7; padding:10px 5px 10px 10px; border-bottom:1px solid #ddd; text-align:left; color:#333; }
.tableF td { padding:10px 15px 10px 15px; border-bottom:1px solid #ddd; }



/*사업분야*/
#M_gallery {}
#M_gallery img {border: none; }
#M_gallery_nav {float: left;width:100%;}
#M_gallery_nav a{width:23.7%; }
#M_gallery_nav img{width:23.7%; }
#M_gallery_output {float: left;width: 100%;  margin:0 auto;overflow: hidden;}
#M_gallery_output img {display: block;border:1px solid #e4e4e4; width:100%; height:357px;}

.business_txt{width:100%;}
.business_txt h3{width:93%; margin:10px 0; padding:10px 10px;background:#154365; color:#fff; font-weight:500; overflow:hidden;}
.business_txt table{width:100%; background:#e7e7e7;}
.business_txt table th{text-align:left; padding:5px 20px; font-size:13px; font-weight:500; color:#333;}
.business_txt table td{font-size:13px; letter-spacing:-0.05em; padding:10px 20px; line-height:2; text-align:justify}
.business_txt table td.sum_bis{text-align:right; color:#032843; font-weight:600}


/*선박소개*/
.ship_wrap table{width:100%; margin-top:5px;}
.ship_wrap table tr{ background:#f7f7f7;}
.ship_wrap table tr th{font-weight:300;background:#666;padding:10px 0; font-size:14px; letter-spacing:-0.05em; color:#fff; 
text-align:center; border-right:1px solid #ccc; border-bottom:1px solid #757575}
.ship_wrap table tr td{font-weight:400; padding:0 15px; text-align:center; border-bottom:1px solid #e7e7e7}

/*운항노선*/
.way_wrap table{width:100%; margin-top:5px;}
.way_wrap table tr{ background:#f7f7f7;}
.way_wrap table tr th{font-weight:300;background:#154365;padding:10px 15px; font-size:14px; letter-spacing:-0.05em; color:#fff; text-align:center; border-right:1px solid #497ba0; border-bottom:1px solid #497ba0}
.way_wrap table tr td{font-size:13px; border-left:1px solid #ccc; font-weight:400;padding:8px 15px; text-align:center; border-bottom:1px solid #e7e7e7}

.pohang_txt{color:#75af52}
.wooleng_txt{color:#2b82c3}

/*접수방법*/
.car_way{width:80%; height:auto;background:#e7e7e7 url('../receiption/images/carway_bg.jpg')no-repeat top left; margin:0 auto; padding:20px 30px;}
.car_way ul{width:100%; }
.car_way ul li{font-size:14px; letter-spacing:-0.05em; margin-bottom:10px; line-height:1.3; color:#333; text-align:left}
.car_notice{margin-top:70px;}
.car_way ul li span.impor{color:#d82a7c}
.car_way p{margin:10px 0; font-weight:600}
.freight_way{width:80%; height:auto;background:#e7e7e7 url('../receiption/images/freightway_bg.jpg')no-repeat top left; margin:10px auto; padding:20px 30px}
.freight_way ul{width:100%; }
.freight_way ul li{font-size:14px; letter-spacing:-0.05em; margin-bottom:10px; line-height:1.3; color:#333; text-align:justify}
.freight_notice{margin-top:70px;}
.freight_way ul li span.impor{color:#d82a7c}
.freight_way p{margin:10px 0; font-weight:600}



/* Mobile Sub 버튼  --------------------------------------------------*/
/*#btnArea {text-align:center; margin-top:10px; vertical-align:middle;}
.btnA { width:84px; height:32px;  border:none; cursor:pointer; background:#333; color:#fff; font-size:12px; line-height:12px; display:inline-block; vertical-align:middle; }
.btnB { width:84px; height:32px;  border:none; cursor:pointer; background:#8c909b; color:#fff; font-size:12px; line-height:12px; display:inline-block; vertical-align:middle; }
.btnC { width:84px; height:32px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:12px; line-height:30px;  display:inline-block; vertical-align:middle; } /*취소*/
/*.btnS { width:64px; height:32px;  border:none; cursor:pointer; background:#333; color:#fff; font-size:12px; line-height:12px; display:inline-block; vertical-align:middle; } /*검색*/