@charset "utf-8";@import url('https://fonts.googleapis.com/icon?family=Material+Icons');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
/*-------------------------------------------------------   MAIN1    -------------------------------------------------------*/


/*-----------  header  -----------*/

#logo {float: left; margin-top: 32px;}
#gnb {float: right; padding-top: 60px; right: 90px; position: absolute;}
#header {width: 100%; height: 130px; border-top: 4px solid #f19100; border-bottom: 1px solid rgba(255, 255, 255, 0.4); position: fixed; z-index: 999; transition: all 0.3s;}
#header.scroll_on {background: #fff; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #ddd; transition: all 0.3s;}
#header #header_inner {width:1200px; height: 126px; padding:0; margin: 0 auto; position: relative;}
#L_SITE_LOGO a {display: inline-block; height: 62px; background: url('/images/mtl01-19-0009/common/logo.png') no-repeat center center; width: 253px;}
#L_SITE_LOGO a.scroll_on {background: url('/images/mtl01-19-0009/common/logo_color.png') no-repeat center center;}

#topmenu {float: right; margin-top: 15px; z-index: 999; position: absolute; right: 0;}
#topmenu > ul:after {content: ""; display: block; clear: both;}
#topmenu a.scroll_on {}

.hidden {font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden}
.navigation {float: right;}
.navigation > li {position: relative; float: left; width: 200px; text-align: center; z-index: 999}
.navigation .main-menu {display: block; padding-bottom: 20px; width: 100%; font-weight: 400; font-size: 18px; line-height:120%; color: #fff;}
.navigation .main-menu span {color:#fff; display:block;}
.navigation .main-menu:hover {color: #f19100;}
.navigation .main-menu:hover span {color:#666;}
.navigation > li:hover .main-menu {color: #f19100;}
.navigation > li:hover .main-menu:after {content: ''; display: block; width: 200px; height: 4px; background: #f19100; position: absolute; bottom: 0px; left: 50%; margin-left: -100px;}
#header.scroll_on .navigation .main-menu {color: #666;}
#header.scroll_on .navigation .main-menu span {color: #666;}
.navigation .sub-menu {z-index: 888; display: none; position: absolute; top: 63px; left: 58%; /*50%;*/ margin-left: -100px; padding: 20px 0 20px 48px; width: 100%; height: 183px; text-align: left;}
.navigation .sub-menu a {line-height: 35px; font-size: 16px; color: #666}
.navigation .sub-menu a:hover {color: #f19100;}
.nav-bg {z-index: 1; display: none; position: absolute; top: 126px; width: 100%; height: 180px; background: #fff; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1)}

a:link {color: #666; text-decoration: none;}
a:visited {color: #666; text-decoration: none;}
a:hover {color: #666; text-decoration: none;}
a:active {color: #666; text-decoration: none;}

.login-bar {padding: 0; text-align: center; float: right; z-index: 2; position: relative;}
.scroll_on .login-bar li {border: 1px solid #555;}
.scroll_on .login-bar li a {color: #555;}
.login-bar li {display: inline-block; position: relative; margin-left: 10px; height: 23px; border: 1px solid #fff; border-radius: 11px; margin-bottom: 10px;}
.login-bar li a {font-size: 12px; line-height: 22px; padding: 0 14px; color: #fff; font-weight: 500;}
.login-bar .material-icons {display: block; position: absolute; right: 6px; top: 2px; font-size: 18px; color: #fff;}
.login-bar li:last-child {padding-right: 12px; background-color: #000; border: 1px solid #000;}
.login-bar li:last-child a {display: block; width: 55px; color: #fff;}
.login-bar li ul {position: absolute; left: -11px; top: 31px;}
.login-bar li ul li {padding-right: 12px;}
.login-bar li ul li a {display: block; margin-bottom: 38px; width: 55px;}
.login-bar .lang_list {display: none; position: absolute; background-color: #000; width: 71px; left: -3px; border-radius: 10px; padding: 5px 0; top: -1px;}
.login-bar .lang_list dd a {color: #fff; font-weight: 400; position: relative; line-height: 26px;}
.login-bar .lang_list dd a i {color: #fff !important; right: -8px !important; top: 5px !important;}


/*-----------  footer  -----------*/

#footer {width: 100%;}
#footer {width: 100%;}
#footer #foot_top {background: #c7c7c7;}
.foot_navi {width: 1200px; margin: 0 auto; padding: 15px 0px;}
.foot_navi:after {content: ''; display: block; clear: both;}
.foot_navi li {float: left; padding-right: 15px;}
.foot_navi li a {font-size: 15px; color: #fff; font-weight: 300;}
.foot_navi li:after {content: ''; display: inline-block; width: 3px; height: 3px; background: #f19100; border-radius: 50%; vertical-align: super; margin-left: 15px;}
.foot_navi li:last-child:after {display: none;}
#foot_area {width: 1200px; margin: 0 auto; padding: 35px 0px 45px 0px;}
#foot_area:after {content: ''; display: block; clear: both;}
.foot_logo {float: left; padding-right:50px;}
.foot_info {float: left;}
.address {color: #555; font-size: 14px; line-height: 28px; font-weight:400;}
.address .bold_black {font-weight:500; font-size: 14px; color:#222;}

#footer_top {position:fixed; right:40px; bottom:40px; width:56px; height:56px; background:#f19100; border-radius:12px; box-shadow: 3px  3px  10px rgba(0,0,0,0.1); z-index:100;}
#footer_top a {display:block; width:56px; height:56px; text-align:center; color:#fff;  padding:10px 0 0; font-size:11px; line-height:1;}
#footer_top a i {font-size:20px; display:block; margin:0 0 5px;}

/*-----------  main_visual -----------*/

.main-visual {position: relative; overflow: hidden;}
.main-visual-caption {position: absolute; top: 0; width: 100%; padding-top: 330px; text-align: center; z-index: 99;}
.main-visual-caption h1 {font-size: 55px; color: #fff; font-weight: bold;}
.main-visual-caption > p {font-size: 36px; color: #fff; font-weight: 400; margin-top: 28px;}
.caption_list {margin-top: 100px; display: inline-block;  text-align:center;}
.caption_list:after {content: ''; display: block; clear: both;}
.caption_list li {display:inline-block; width: 220px;}
.caption_list li a p {font-size: 18px; color: #fff; font-weight: 400; margin-top: px; text-align:center;}

#main_slide.owl-carousel {display: block; height: 865px;}
#main_slide.owl-carousel .owl-item .item {height: 865px;}
#main_slide.owl-carousel .owl-item .main-img01 {background: url('/images/mtl01-19-0009/main/main_visual1.jpg') no-repeat center center/cover;}
#main_slide.owl-carousel .owl-item .main-img02 {background: url('/images/mtl01-19-0009/main/main_visual2.jpg') no-repeat center center/cover;}
#main_slide.owl-carousel .owl-dots {width: 160px; left: 50%; margin-left: -80px; position: absolute; bottom: 30px; text-align:center;}
#main_slide.owl-carousel .owl-dots .owl-dot {width: 45px; height: 5px; margin: 0px 4px; border-radius: 0px; background: #fff; border: none; cursor: pointer;}
#main_slide.owl-carousel .owl-dots .owl-dot.active {background: #f19100;}
#main_slide.owl-carousel .owl-nav .owl-prev {display: inline-block; width: 80px; height: 21px; background: url('/images/mtl01-19-0009/main/main_arrow01.png') no-repeat center center; text-indent: -9999px; position: absolute; top: 55%; left: 50px; z-index: 9999; border: none; cursor: pointer;}
#main_slide.owl-carousel .owl-nav .owl-next {display: inline-block; width: 80px; height: 21px; background: url('/images/mtl01-19-0009/main/main_arrow02.png') no-repeat center center; text-indent: -9999px; position: absolute; top: 55%; right: 50px; z-index: 9999; border: none; cursor: pointer;}


/*-----------  main_section01 -----------*/

.content { width: 1200px; margin: 0 auto; padding-bottom: 100px;}
#contents {width: 100%; margin: 0 auto; position: relative;}
#section01 p {font-size: 16px; color: #888; line-height: 24px; font-weight: 300;}
#section01 {background: #f5f5f5; padding: 60px 0px 80px 0px;}
#section01 .section01_inner {width: 1200px; margin: 0 auto;}
#contents .section_top {margin-bottom: 50px; text-align: center;}
#contents .section_top .section_title {font-size: 42px; line-height:120%; color: #f19100; font-weight: 500; margin-bottom: 20px;}
#contents .section_top .section_title:before {content: ''; display: block; width: 2px; height: 65px; background: #f19100; margin: 0 auto; margin-bottom: 20px;}
#section01 .about_list:after {content: ''; display: block; clear: both;}
#section01 .about_list li {float: left; width: 380px; margin-right: 30px; position: relative;}
#section01 .about_list li img {transition: all 0.3s;}
#section01 .about_list li:last-child {margin-right: 0px;}
#section01 .about_list li .about_txt {padding:0 0 25px;}
#section01 .about_list li .about_txt h3 {font-size: 24px; color: #222; font-weight: 500; margin:20px 0 5px; transition: all 0.3s; background-position:80% center;}
#section01 .about_list li .about_txt p {}
#section01 .about_list li .list_img {overflow: hidden;}
#section01 .about_list li:hover .about_txt h3 {background: url('/images/mtl01-19-0009/main/about_arrow.png') no-repeat; background-position:right center;}
/*
#section01 .about_list li:before {content: ''; display: inline-block; width: 2px; height: 0%; background: #f19100; position: absolute; top: 0; transition: all 0.3s;}
#section01 .about_list li:after {content: ''; display: inline-block; width: 0%; height: 2px; background: #f19100; position: absolute; top: 0; left: 0; transition: all 0.3s;}
#section01 .about_list li > a:before {content: ''; display: inline-block; width: 2px; height: 0%; background: #f19100; position: absolute; top: 0; right: 0; transition: all 0.3s;}
#section01 .about_list li > a:after {content: ''; display: inline-block; width: 0%; height: 2px; background: #f19100; position: absolute; bottom: 0; right: 0; transition: all 0.3s;}

#section01 .about_list li:hover a img {transform: scale(1.1);}
#section01 .about_list li:hover:before {content: ''; display: inline-block; width: 2px; height: calc(100% + 4px); background: #f19100; position: absolute; top: -2px; left: -2px; transition: all 0.3s;}
#section01 .about_list li:hover:after {content: ''; display: inline-block; width: calc(100% + 2px); height: 2px; background: #f19100; position: absolute; top: -2px; left: 0px; transition: all 0.3s;}
#section01 .about_list li:hover > a:before {content: ''; display: inline-block; width: 2px; height: calc(100% + 2px); background: #f19100; position: absolute; top: -2px; right: -2px; transition: all 0.3s;}
#section01 .about_list li:hover > a:after {content: ''; display: inline-block; width: calc(100% + 4px); height: 2px; background: #f19100; position: absolute; bottom: -2px; right: -2px; transition: all 0.3s;}
*/

/*-----------  main_section02 -----------*/
#section02 {position:relative; height:672px; background: url('/images/mtl01-19-0009/main/main_bottom.jpg') no-repeat center center; padding:120px 0px 0px 0px; background-size: cover;}
#section02 .section02_inner {width:100%; height:100%; margin: 0 auto; position: relative;}
#section02 .section_top .section_title {color: #fff; font-size:50px;}
#section02 .section_top .section_title strong {display:block; font-size:60px;}
#section02 .section_top .section_title:before {display:none;}
#section02 .section_top .section_stitle {color: #fff;}
#section02 p {font-size: 16px; color: #fff; line-height: 24px; font-weight: 300;}

#section02 h5 {color: #fff; font-size: 30px; font-weight: 300; display: inline-block; line-height: 80px; position: absolute; right: 100px; bottom:60px;}


/*-------------------------------------------------------   SUB    -------------------------------------------------------*/

.contents_sub {width: 1200px !important; margin: 0 auto 50px auto !important;}
#contents .con_title {text-align: center; padding: 60px 0px 60px 0px}
#contents .con_title:after {content: ''; display: block; width: 30px; height: 1px; background: #f19100; margin: 0 auto; margin-top: 20px;}
#contents .con_title h3 {font-size: 38px; color: #333; letter-spacing:0;}
.sub_visual {width: 100%; height: 380px; display: table;	background-size:cover !important;}
.sub_visual h1 {display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 48px; padding-top: 130px;}
.sub_visual h1 span {font-size: 16px; color: #fff; font-weight: 300; display: inline-block; margin-top: 15px; letter-spacing: 1;}
.con_stitle {position:relative; text-align: left; font-size: 25px; color: #333; margin-bottom: 40px; padding:15px 0 0; font-weight:500;}
.con_stitle:before {content: ''; position:absolute; top:0; display: block; width: 35px; height: 2px; background: #f19100;}

.sub_visual {background: url('/images/mtl01-19-0009/sub/sub_visual.jpg') no-repeat center center;}