@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: 37px;}
#gnb {float: right; padding-top: 60px; right: 0px; position: absolute;}
#header {width: 100%; height: 130px; border-top: 4px solid #f40000; border-bottom: 1px solid rgba(255, 255, 255, 0.4); position: fixed; z-index: 999; transition: all 0.3s;	 background: #fff;	 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);}
#header #header_inner {width: 1200px; height: 126px; margin: 0 auto; position: relative;}
#L_SITE_LOGO a {display: inline-block; height: 46px; background: url('/data/file/logo_1.png') no-repeat center center; width: 228px;}
#L_SITE_LOGO a.scroll_on {background: url('/data/file/logo_1.png') no-repeat center center;}
#topmenu {float: right; margin-top: 15px; z-index: 99999; position: absolute; right: 0;}
#topmenu > ul:after {content: ""; display: block; clear: both;}
#topmenu a.scroll_on {}
#navi {position: relative;}
.hidden {font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden}
.navigation {}
.navigation > li {position: relative; float: left; width: 160px; text-align: center; z-index: 999}
.navigation .main-menu {display: block; padding-bottom: 46px; width: 100%; font-weight: 400; font-size: 18px; color: #666;}
.navigation .main-menu:hover {color: #f40000;}
.navigation > li:hover .main-menu {color: #f40000;}
.navigation > li:hover .main-menu:after {content: ''; display: block; width: 160px; height: 4px; background: #f40000; position: absolute; bottom: 0px; left: 50%; margin-left: -80px;}
.navigation .main-menu.scroll_on {color: #666;}
.navigation .sub-menu {z-index: 888; display: none; position: absolute; top: 63px; left: 50%; margin-left: -80px; padding: 40px 0; width: 100%; height: 183px; text-align: center;}
.navigation .sub-menu a {line-height: 35px; font-size: 16px; color: #666}
.navigation .sub-menu a:hover {color: #f40000;}
.nav-bg {z-index: 1; display: none; position: absolute; top: 126px; width: 100%; height: 180px; background: rgba(255, 255, 255, 0.9); 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;	}

.login-bar li {display: inline-block; vertical-align:middle; position: relative; margin-left: 10px; height: 23px; border: 1px solid #555; border-radius: 11px; margin-bottom: 10px;}
.login-bar li a {font-size: 12px; line-height: 22px; padding: 0 14px; color: #555; font-weight: 500;}
.login-bar .material-icons {display: block; position: absolute; right: 6px; top: 2px; font-size: 18px; color: #fff;}
.login-bar li.lang_show {padding-right: 12px; background-color: #000; border: 1px solid #000;}
.login-bar li.lang_show 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; z-index:10000;}
.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;}
.login-bar .download {padding-right: 12px; background-color: #f40000; border: 1px solid #f40000;}
.login-bar .download a {display: block; width: 75px; color: #fff;}
.login-bar .download i {display: block; position: absolute; right: 8px; top: 4px; font-size: 13px; color: #fff;}

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

#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: 16px;
    color: #fff;
    font-weight: 300;
}

.foot_navi li:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background: #f40000;
    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;
}

.foot_info {
    float: right;
}

.address {
    color: #888;
    font-size: 16px;
    line-height: 28px;
    font-weight: 300;
}

.address .bold_black {
    font-weight: 400;
    font-size: 16px;
}


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

.main-visual {
    position: relative;
    overflow: hidden;
}

.main-visual-caption {
    display:none;
    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 > h1 span {
    font-size: 55px;
    font-weight: bold;
    color: #f40000;
}

.main-visual-caption > p {
    font-size: 25px;
    color: #fff;
    font-weight: 300;
    margin-top: 28px;
}

.caption_list {
    display:none;
    margin-top: 100px;
    display: inline-block;
}

.caption_list:after {
    content: '';
    display: block;
    clear: both;
}

.caption_list li {
    float: left;
    width: 75px;
    margin-right: 195px;
}

.caption_list li:last-child {
    margin-right: 0px;
}

.caption_list li a p {
    font-size: 18px;
    color: #fff;
    font-weight: 300;
    margin-top: 15px;
}

#main_slide.owl-carousel {
    display: block;
    height: 865px;
}

@media only screen and (max-width: 1200px) {
	#main_slide.owl-carousel {height: 705px;}
}

#main_slide.owl-carousel .owl-item .item {
    height: 100%;
}

#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-item .main-img03 {
    background: url('/images/mtl01-19-0009/main/main_visual3.jpg') no-repeat center center/cover;
}

#main_slide.owl-carousel .owl-dots {
    width: 160px;
    left: 50%;
    margin-left: -80px;
    position: absolute;
    bottom: 30px;
}

#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: #f40000;
}

#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;
}




.content {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 100px;
}

#contents {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#contents p {
    font-size: 16px;
    color: #888;
    line-height: 24px;
    font-weight: 300;
}

#contents .section_top {
    margin-bottom: 50px;
    text-align: center;
}

#contents .section_top .section_title {
    font-size: 42px;
    color: #f40000;
    font-weight: 500;
    margin-bottom: 20px;
}

#contents .section_top .section_title:before {
    content: '';
    display: block;
    width: 2px;
    height: 65px;
    background: #f40000;
    margin: 0 auto;
    margin-bottom: 20px;
}

#contents .section_top .section_stitle {
    font-size: 18px;
    color: #888;
    font-weight: 400;
}


/*-----------  main_section00 -----------*/
#section00 {padding: 60px 0px 80px 0px;}
#section00 .more { display: block; margin:0 auto; font-size: 16px; font-weight: 400; width: 150px; height: 40px; line-height: 37px; border: 1px solid #f40000; border-radius: 20px; text-align: center;  margin-top: 35px; transition:all 0.3s;}
#section00 .more span { display: inline-block; font-size: 25px; color: #666; padding-left: 20px; position: relative; top: 1px;}

/*-----------  main_section04 -----------*/
#section04 {height:673px; padding: 80px 0px 150px 0px; background: url('/images/mtl01-19-0009/main/creation_bg.jpg') no-repeat center center/cover;}
#section04 .section_top {margin:0 0 80px;}
#section04 .section_top .section_stitle {color:#444;}



/*-----------  main_section01-----------*/
#section01 {padding:100px 0px 120px;}
#section01 .section01_inner {width: 1200px; margin: 0 auto;}
#section01 .about_list:after {content: ''; display: block; clear: both;}
#section01 .about_list li {float: left; width: 380px; margin-right: 30px; border: 1px solid #e7e7e7; background: #fff; 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: 30px 30px 25px 30px;}
#section01 .about_list li .about_txt h3 {font-size: 24px; color: #f40000; font-weight: 500; margin-bottom: 25px; background: url('/images/mtl01-19-0009/main/about_arrow.png') no-repeat right center;}
#section01 .about_list li .about_txt p {min-height: 28px; letter-spacing: -0.2px;}
#section01 .about_list li:before {content: ''; display: inline-block; width: 2px; height: 0%; background: #f40000; position: absolute; top: 0; transition: all 0.3s;}
#section01 .about_list li:after {content: ''; display: inline-block; width: 0%; height: 2px; background: #f40000; 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: #f40000; 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: #f40000; position: absolute; bottom: 0; right: 0; transition: all 0.3s;}
#section01 .about_list li .list_img {overflow: hidden;}
#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: #f40000; 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: #f40000; 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: #f40000; 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: #f40000; position: absolute; bottom: -2px; right: -2px; transition: all 0.3s;}


/*-----------  main_section02 -----------*/
#section02 {background: url('/images/mtl01-19-0009/main/news_bg.jpg') no-repeat center center;  padding:250px 0px 45px 0px; background-size: cover;}
#section02 .section02_inner {width: 1200px; margin: 0 auto; position: relative;}
#contents #section02 .section_top .section_title {color: #fff;}
#contents #section02 .section_top .section_title:before {background: #fff;}
#contents #section02 .section_top .section_stitle {color: #fff;}
#section02 .creation_box {display: inline-block; width: 490px; height: 470px; background: #f40000; overflow: hidden; position: relative; top: 95px;}
#section02 .creation_box:before {content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; top: 117px; left: 50px; z-index: 99;}
#section02 .box {width: 490px; overflow: hidden;}
#section02 .box .item {width: 490px; height: 470px; display: inline-block; padding: 50px 50px 100px 50px; color: #fff;	opacity:1;}
#section02 .box .item h4 {font-size: 50px; font-weight:700;}
#section02 .box .item h3 {font-size: 50px; margin: 85px 0px 28px 0px;}
#contents #section02 p {color: #fff;}
#section02 .box .item a {display: inline-block; width: 220px; height: 50px; line-height: 50px; color: #fff; font-size: 18px; font-weight: 300; border: 1px solid #fff; text-align: center; border-radius: 25px; float: right; margin-top: 50px; transition: all 0.3s;}
#section02 .box .item a:hover {background: #fff; color: #f40000; transition: all 0.3s;}
#section02 .box .item a span {color:#fff; display:inline-block; vertical-align:middle; margin:0 0 6px 20px; font-size:30px;}
#section02 h1 {color: #fff; font-size: 50px; font-weight: 300; letter-spacing: 5; display: inline-block; line-height: 80px; position: absolute; right: 0; bottom: 0;}
#section02 h1 span {color: #f40000; font-size: 50px; font-weight: 300;}
#section02 .box .owl-nav {display:none; position: absolute; top: 57px; right: 50px;}
#section02 .box .owl-nav button {width: 40px; height: 40px; border: none; cursor: pointer;}
#section02 .box .owl-nav button span {display: none;}
#section02 .box .owl-nav .owl-prev {background: url('/images/mtl01-19-0009/main/creation_arrow01.png') no-repeat right center;}
#section02 .box .owl-nav .owl-next {background: url('/images/mtl01-19-0009/main/creation_arrow02.png') no-repeat right center;}


/*-----------  main_section03 -----------*/

#section03 {padding: 110px 0px 80px 0px;}
#section03 .section03_inner {width: 1200px;margin: 0 auto;}
#section03 .section_top {display: inline-block;text-align: left;}
#section03 .section_top .section_title {display: inline-block; line-height: 47px;}
.section_ul a { color:#666; text-decoration:none }
.section_ul ul {float:right; display:inline-block; vertical-align:top;}
.section_ul ul .section_stitle {color:#888;}
.section_ul ul:after {content:''; display:block; clear:both; }
.section_ul li {position: relative; float:left; overflow:hidden;}
.section_ul li + li {margin-left:20px;}
.section_ul .more {display: inline-block; font-size: 16px; font-weight: 400; width: 150px; height: 40px; line-height: 37px; border: 1px solid #f40000; border-radius: 20px; text-align: center;  margin-top: 35px; transition:all 0.3s;}
.section_ul .more span { display: inline-block; font-size: 25px; color: #666; padding-left: 20px; position: relative; top: 1px; transition:all 0.3s;}



/*-------------------------------------------------------   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: #f40000; margin: 0 auto; margin-top: 20px;}
#contents .con_title h3 {font-size: 38px; color: #333;}
.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;}

.width_inner.align_left {text-align: left;}
.sub_visual.sub1 {background: url('/images/mtl01-19-0009/sub/sub1_visual.jpg') no-repeat center center;}
.sub_visual.sub2 { background: url('/images/mtl01-19-0009/sub/sub2_visual.jpg') no-repeat center center;}
.sub_visual.sub3 {background: url('/images/mtl01-19-0009/sub/sub3_visual.jpg') no-repeat center center;}
.sub_visual.sub4 {background: url('/images/mtl01-19-0009/sub/sub4_visual.jpg') no-repeat center center;}
.sub_visual.sub5 {background: url('/images/mtl01-19-0009/sub/sub5_visual.jpg') no-repeat center center;}



/*-------------------------------------------------------   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: #f40000; margin: 0 auto; margin-top: 20px;}
#contents .con_title h3 {font-size: 38px; color: #333;}
.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;}

.width_inner.align_left {text-align: left;}
.sub_visual.sub1 {background: url('/images/mtl01-19-0009/sub/sub1_visual.jpg') no-repeat center center;}
.sub_visual.sub2 { background: url('/images/mtl01-19-0009/sub/sub2_visual.jpg') no-repeat center center;}
.sub_visual.sub3 {background: url('/images/mtl01-19-0009/sub/sub3_visual.jpg') no-repeat center center;}
.sub_visual.sub4 {background: url('/images/mtl01-19-0009/sub/sub4_visual.jpg') no-repeat center center;}
.sub_visual.sub5 {background: url('/images/mtl01-19-0009/sub/sub5_visual.jpg') no-repeat center center;}