@charset "utf-8";

/* Font */

@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');

/* Guide 
----------------------------------------------------------------------------------------------------------------------------------------------------------
    ▶사이즈
    pc : 1200px
    tablet : 980px ~
    mobile : 767px ~ 320px
    ▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.
*/


/* Reset 
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
* {font-family: 'Montserrat', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', AppleGothic, Arial, Helvetica, sans-serif;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin: 0;padding: 0;}
body,th,td,input,select,textarea,button {font-size: 16px;color: #333;font-weight: 300;}
dl,ul,ol,menu,li {list-style: none;}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.2;
    letter-spacing: -0.2px;
}
:focus {outline: 0 !important;}
iframe {border: none;width: 100%;}
a {color: inherit;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;transition: all .2s ease-out;}
a:hover,a:focus,a:active,a:link {text-decoration: none;color: inherit;}
img {max-width: 100%;}
textarea {max-width: 100%;resize: none;}
body {overflow-x: hidden;}

@media only screen and (min-width: 320px) {
    body {overflow-x: hidden;}
}
.hidden {font-size: 0;line-height: 0;text-indent: -9999em;overflow: hidden;}

/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.parallax {background-position: 0 0;background-repeat: no-repeat;background-size: 100% auto;width: 100%;background-size: cover;background-attachment: fixed;}

/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.animationload {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #fff;z-index: 999999;}
.loader {width: 200px;height: 200px;font-size: 24px;text-align: center;position: absolute;left: 50%;top: 50%;background-image: url(/images/basic_resp/img/preloader.gif);background-repeat: no-repeat;background-position: center;margin: -100px 0 0 -100px;}

/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.back-to-top {width: 40px;height: 40px;position: fixed;bottom: 20px;right: 20px;display: none;text-align: center;z-index: 10000;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background: #137bc2;}
.back-to-top i {color: #fff;font-size: 15px;display: block;line-height: 33px;}
.top-top {position: absolute;display: flex;align-items: center;justify-content: center;right: 0;top: 0;height: 100%;min-width: 90px;border-right: 1px solid rgba(255, 255, 255, .1);border-left: 1px solid rgba(255, 255, 255, .1);}

@media only screen and (max-width: 1200px) {
    .top-top {right: 20px;}
}
@media only screen and (max-width: 768px) {
    .top-top {right: 10px;min-width: 40px;}
    .top-top img {max-width: 20px;}
}

/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrapper {position: relative;width: 100%;min-width: 340px;height: 100%;overflow-x: hidden;}
.login-box {position: absolute;right: 0;display: flex;margin-right: 40px;height: 100%;}
.login-menu {display: flex;align-items: center;}
.login-menu li {position: relative;margin-right: 2.5em;}
.login-menu li:before {opacity: 0;content: '';position: absolute;top: 2px;right: -20px;width: 1px;height: 14px;background: #000;}
.login-menu li:first-child {margin-left: 0;}
.login-menu li a {color: #000;font-weight: 400;font-size: 1em;}
.login-bar {text-align: center;z-index: 2;display: inline-flex;align-items: center;min-width: 78px;}
.login-bar li {display: inline-flex;position: relative;height: 23px;border: none;border-radius: 11px;min-width: 100%;}
.login-bar li a {display: inline-flex;align-items: center;padding: 0 .5em;font-size: 12px;color: #000;font-weight: 400;width: 100%;}

.login-bar li a img {margin-right: 6px;border: 1px solid rgba(0, 0, 0, .15);border-radius: 50%;}
.login-bar .material-icons {display: block;position: absolute;right: 2px;top: 2px;font-size: 18px;color: #000;}
.sub_page .lang_show a i {color: #333;}
.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;left: 0;top: 0;min-width: 100%;border-radius: 10px;background-color: rgba(0, 0, 0, .15);}
.login-bar .lang_list dd {display: inline-flex;width: 100%;height: 23px;}
.login-bar .lang_list dd a {color: #fff;font-weight: 400;position: relative;}
.login-bar .lang_list dd a i {color: #333 !important;}
.sub_page .login-menu li a {color: #333;}
.sub_page .login-menu li:before {background: #333;}
.sub_page .login-bar li:first-child a {color: #333 !important;}

@media only screen and (max-width: 1600px) {
.login-box {margin-right: 20px;}
}

@media only screen and (max-width: 1200px) {
    .login-box {position: relative;display: inherit;margin-right: 0;height: inherit;}
    .login-menu {display: inherit;}
    .login-menu li {margin-right: 0;width: 100%;}
    .login-menu li a {display: block;padding: 0 30px;width: 100%;line-height: 45px;font-weight: 400;font-size: 18px;color: #000;transition: none;}
    .login-bar .lang_list {background: none;}
}

@media only screen and (max-width: 980px) {}


/* Header
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#header {z-index: 999; width: 100%; padding: 0px 100px; position: absolute; transition: all 0.5s; background: rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
#header h1 {position: absolute; display: flex; height: 100%; align-items: center;}

.SNS_warp{background-color: #333; padding: 0 100px;}
.SNS_warp ul{display: flex; justify-content: flex-end; gap: 5px; height: 50px; align-items: center;}
.SNS_warp ul li{height: 30px; font-size: 13px; color: #fff;}
.SNS_warp ul li a{display: block; height: 30px;}
.SNS_warp ul li:nth-child(4){display: flex; align-items: center; gap: 10px; border: 1px solid #1dc96b; border-radius: 9px 0 0 9px; padding-right: 10px;}
.SNS_warp ul li a > img{height: 100%;}
.SNS_warp ul li > img{height: 100%;}

.nav-btn {z-index: 999; display: block; position: absolute; top: 33px; right: 0px; width: 30px; height: 13px; cursor: pointer;}
.nav-btn span {position: absolute; left: 50%; display: block; margin-left: -15px; width: 30px; height: 3px; background: #000; transition: .2s all linear;}
.nav-btn span:nth-child(1) {top: 0;}
.nav-btn span:nth-child(2) {top: 10px;}
.nav-close span {background: #757575;}

/*.nav-btn.nav-close {position: fixed;}*/
.nav-btn.nav-close span:nth-child(1) {top: 50%;transform: rotate(45deg);}
.nav-btn.nav-close span:nth-child(2) {top: 50%;transform: rotate(-45deg);}

@media only screen and (min-width: 1200px) {
    #header:after {display: block; content: ""; clear: both;}
    #header.scroll_on {transition: all 0.5s;}
    #header.sub_page:after {content: ''; display: block; width: 100%; height: 1px; background: #eaeaea; position: absolute; left: 0;}
    #header > div {position: relative; margin: 0 auto; width: 100%; height: 80px; text-align: center;}
    #L_SITE_LOGO {float: left;}
    #header h1 a {display: flex; align-content: center;}
    #header h1 a > img {vertical-align: baseline;}
    .nav-bg {z-index: -1; display: none; position: absolute; top: 0px; left: -500%; width: 1000%; height: 300px; background: #fff; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*border-top:1px solid #eaeaea; */}
    #nav {position: relative; right: 0 !important; float: left; display: flex; vertical-align: top; z-index: 999; width: calc(100% - 284px); transform: translateX(254px);}
    #nav .navigation {display: inline-flex;  gap: 10px;}
    .navigation:after {content: ""; display: block; clear: both;}
    .navigation > li {position: relative; float: left; width: 160px; text-align: center;}
    .navigation > li:nth-child(4), .navigation > li:nth-child(5){width:200px;}
    .navigation .main-menu {display: block; width: 100%; font-weight: 400; font-size: 1.25em; color: #333; line-height: 80px;}
    .navigation .sub-menu {display: none; z-index: 999; position: absolute; top: 81px; left: 0; padding: 20px 0; width: 160px; height: 219px;}
    .navigation .sub-menu:after {opacity: 0; z-index: -1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .5s;}
    .navigation .sub-menu a {display: block; text-align: center; line-height: 35px; font-size: 16px; color: #666;}
    .navigation .sub-menu .intro-menu {display: none;}
    .navigation .sub04{width: 200px;}
    .navigation > li a span {position: relative;}
    .navigation > li a span:after {opacity: 0; content: ''; position: absolute; bottom: -29px; left: 50%; width: 0; height: 2px; background: #f18d2f; transition: all .4s;}

    .navigation .sub-menu a:hover {color: #fff;}
    .navigation > li:hover .main-menu {color: #f18d2f;}
    .navigation > li:hover .sub-menu:after {opacity: 1; background: #f1f1f1;}
    .navigation > li:hover .sub-menu a {color: #333;}
    .navigation > li:hover .sub-menu a:hover {background: #f18d2f; color: #fff;}
    .navigation > li:hover a span:after {opacity: 1; display: block; left: 0; width: 100%; transition: all .4s;}
    .sub_page .navigation .main-menu {color: #333;}

    /* 서브상단메뉴 */
    #L_SITE_LOGO.sub_page a {display: inline-block; background: url('/images/mtl01r-21-0040/common/logo_on.png') no-repeat center center/contain; width: 201px; height: 50px;}
    #L_SITE_LOGO.sub_page a > img {display: none;}
    .navigation.sub_page .main-menu {color: #333;}
    .nav-btn.sub_page > span {background: #fff;}
    .nav-btn.sub_page.nav-close span {background: #f18d2f;}
}

@media only screen and (max-width: 1600px) {
    #header {padding: 0px 30px;}
    #L_SITE_LOGO.sub_page a {width: 230px;}
    #header h1 a > img {width: 180px;}
    .navigation > li {width: 140px;}
    .navigation .sub-menu {width: 140px;}
    .navigation .sub04 {width: 200px;}
    #nav {width: calc(100% - 230px);transform: translateX(200px);}
    .login-menu li {margin-right: 1em;}
    .login-menu li:before {right: -9px;}
    .login-menu li a {font-size: .875em;}    
    .SNS_warp{padding:0 30px;}
}

@media only screen and (max-width: 1500px) {
    .navigation > li {width: 110px;}
    .navigation .main-menu{font-size: 1.1em;}
    .navigation .sub-menu {width: 110px;}
    .navigation .sub04 {width: 170px;}
    .navigation > li:nth-child(4), .navigation > li:nth-child(5){width: 170px;}
}

@media only screen and (max-width: 1200px) {
    #header {z-index: 666; width: 100%; height: 65px; padding: 0px;}
    #header > div {padding: 0;}
    #header h1 {float: left; top:5px; left: 20px; height: 65px;}
    #header h1 a {display: block;}
    #header h1 img {width: auto;vertical-align: baseline}
    .login-bar {float: none;padding: 10px 0 0 30px;}
    .login-bar li {border: 1px solid #fff;}
    .login-bar li:first-child {border: 1px solid #fff;}
    .login-bar li a {padding: 0 30px 0 0;color: #333;}
    .login-bar .material-icons {color: #333;}
    .login-bar .lang_list dd a {color: #333;background: #fff;}
    .nav-btn {right: 20px;top: 27px;}
    .nav-bg {z-index: 777;display: none;top: 0;position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);}
    
    .SNS_warp{padding:0 20px;}

    #nav {z-index: 888;position: fixed;right: -100%;display: block;padding: 65px 0 20px;width: 70%;height: 100%;background: #fff;transform: none;}
    .navigation > li {width: 100%;}
    .navigation .sub-menu {width: 100%;}
    .navigation .main-menu {display: block;padding: 0 30px;width: 100%;line-height: 45px;font-weight: 400;font-size: 18px;color: #000;transition: none;}
    .navigation > li a:hover {color: #f18d2f;}
    .navigation li.active .main-menu {background: #f18d2f;color: #fff;}
    .navigation .sub-menu {display: none;padding: 10px 0;background: #f1f1f1;}
    .navigation .sub-menu a {display: block;padding: 0 30px;line-height: 38px;font-size: 16px;color: #555;}
    .navigation .sub-menu a:before {content: "";display: inline-block;margin: 0 5px 0 0;width: 4px;height: 1px;vertical-align: middle;background: #888;}
    .navigation .sub-menu a:hover {color: #f18d2f;}
    .navigation .sub-menu a:hover:before {background: #f18d2f;}
}

@media only screen and (max-width: 768px) {
    #header h1 a > img {width: 140px;}
    .SNS_warp ul{justify-content: center;}
    .navigation > li:nth-child(4), .navigation > li:nth-child(5){width: 100% !important;}
}

/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.btn {text-transform: uppercase;border-radius: 0;line-height: 24px;}
.btn:focus,.btn:active {outline: none;color: #fff;}
.btn-custom {border-radius: 3px;padding: 0.8em 1.8em;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;transition: all .2s ease-out;text-transform: uppercase;background-color: #509591;border-color: #509591;color: #fff;}
.btn-custom:hover,.btn-custom:focus {background-color: #447774;border-color: #447774;color: #fff;}
.btn-custom-outline {border-radius: 3px;padding: 0.8em 1.8em;color: #fff;-webkit-transition: all .2s ease-out;transition: all .2s ease-out;text-transform: uppercase;background-color: transparent;border-color: #fff;}
.btn-custom-outline:hover,.btn-custom-outline:focus {color: #fff;background-color: rgba(255, 255, 255, .5);}
.btn-bar a {margin-right: 10px;}
.form-control {box-shadow: none;-webkit-box-shadow: none;border-radius: 3px;height: 38px;}
.form-control:focus {outline: none;box-shadow: none;-webkit-box-shadow: none;border-color: #333;}


/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer {width: 100%; background-color: #222;}
.footer-area {position: relative; display: table; margin: 0 auto; width: 100%; box-sizing: border-box;}
.footer-content {position: relative; margin: 0 auto; padding: 30px 0; max-width: 1200px; width: 100%;}
.footer-menu li {position: relative; display: inline-block; margin-left: 15px;}
.footer-menu li:first-child {margin-left: 0;}
.footer-menu li a {opacity: .25; font-size: 16px; color: #fff;}
.footer-menu li:nth-child(2) a {opacity: 1; color: #f18d2f; font-weight: 500;}
.footer-info {position: relative; padding: 45px 0;}
.footer-info {line-height: 20px;}
.footer-info:before {content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, .1);}
.footer-info div._in {position: relative; margin: 0 auto; max-width: 1200px;}
.footer-info li {opacity: .25; font-size: 15px; padding-top: 10px; color: #fff;}
.footer-info li:first-child {padding-top: 0;}
.footer-info li:nth-child(4) {padding-top: 30px;}
.footer-info span {color: #666; margin: 0 3px;}
.footer-info .footer-logo {position: absolute; right: 0; top: 10px; width:100px; font-size: 24px; color: #ddd; font-weight: 400;}
.footer-info .footer-logo:after {content: ""; display: block; clear: both;}

@media only screen and (max-width:1200px) {
    .footer-area {width: 100%;}
    .footer-content {padding: 30px 20px;}
    .footer-info {padding: 45px 20px;}
    .footer-info .footer-logo {font-size: 20px;}
}

@media only screen and (max-width:767px) {
    .footer-info .footer-logo {position: relative;top: 0;text-align: center;margin-bottom: 15px;}
    .footer-content {padding: 10px 20px;}
    .footer-menu li a {font-size: 10px;}

}

@media only screen and (max-width:500px) {
    .footer-menu li {margin-left: 5px;}
    .footer-info li {font-size: 11px;display: initial;}
    .footer-info span {margin: 0;}
    .footer-info .footer-logo {font-size: 18px;}
}

/* Main Visual (메인이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-visual {position: relative; overflow: hidden; min-height: 931px; max-height: 931px; height: 100vh;}
.main-visual:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; background: url('/images/mtl01r-21-0087/main/bg_visual_bottom.png') repeat-x center bottom; background-size: 100% 100%;}
.carousel-caption {position: absolute; width: 1200px; top: 35%; left: 50%; margin-left: -600px; z-index: 99; text-shadow: 0 0 6px rgb(0 0 0 / 40%);}
.carousel-caption .slogan {color: #fff;}
.carousel-caption .slogan > strong {display: block; font-size: 1.8em; letter-spacing: -1px; font-weight: normal; margin-bottom: 20px;}
.carousel-caption .slogan > strong span {display: inline-block; margin-bottom: 1.375rem; font-weight: 400; line-height: 1;}
.carousel-caption .slogan p {font-weight: 400; font-size: 3.5em; line-height: 1.2; letter-spacing: -4px; white-space: pre-line;}
.carousel-caption .slogan p strong {}
.carousel-caption .slogan > span {display: inline-block; margin-top: 1.375rem; font-weight: 500; font-size: 1.375em;}
.carousel-caption .slogan .main-title {font-size: 82px; font-weight: 600;}

#main_slide.owl-carousel {height: 100%; display: block;}
#main_slide.owl-carousel .owl-item .item {min-height: 931px;}
#main_slide.owl-carousel .owl-item .main-img01 {background: url('/images/mtl01r-21-0087/main/main_img01.jpg') no-repeat 40% center/cover;}
#main_slide.owl-carousel .owl-item .main-img02 {background: url('/images/mtl01r-21-0087/main/main_img02.jpg') no-repeat 40% center/cover;}
#main_slide.owl-carousel .owl-dots {position: relative; text-align: right; justify-content: right; bottom: 240px; margin: 0 auto; max-width: 1200px;}
#main_slide.owl-carousel .owl-dots .owl-dot {background: none; border: none; display: inline-block;}
#main_slide.owl-carousel .owl-dots .owl-dot span {display: inline-block; width: 10px; height: 10px; border-radius: 30px; background: #fff; margin: 0px 5px;}
#main_slide.owl-carousel .owl-dots .owl-dot.active span {display: inline-block; width: 100px; height: 10px; border-radius: 30px; background: #f18d2f;}
.extract-board .extract-article .extract-content .extract-title:hover {text-decoration: underline;}

@media only screen and (max-width: 1200px) {
    .carousel-caption {width: 100%;left: 0%;margin-left: 0px;padding: 0px 40px;}
}

@media only screen and (max-width: 980px) {
    .main-visual {min-height: 520px;max-height: 520px;height: inherit;}
    .main-visual:after {height: 100px;}
    #main_slide.owl-carousel {height: 520px;}
    #main_slide.owl-carousel .owl-item .item {min-height: 520px;}
    #main_slide.owl-carousel .owl-dots {bottom: 120px;right: 50px;}
    .carousel-caption {top: 35%;}
    .carousel-caption .slogan {padding-top: 0;}
    .carousel-caption .slogan > strong {font-size: 2em;}
    .carousel-caption .slogan p {font-size: 3em;margin-left: 0;}
    .carousel-caption .slogan > span {font-size: 1.2em;}
    .carousel-caption .slogan .main-title {font-size: 46px;}
    .carousel-caption .slogan:before {display: none;}
}

@media only screen and (max-width: 768px) {
    .carousel-caption .slogan > strong {font-size: 1.5em;}
    .carousel-caption .slogan p {font-size: 2em;}
    .carousel-caption .slogan .main-title {font-size: 36px;}
    .carousel-caption .slogan > span {font-size: 1em;line-height: 1.6;}
}

@media only screen and (max-width:500px) {
    #main_slide.owl-carousel .owl-dots {position: relative;right: 0;display: block;margin: 0 auto;text-align: center;transform: translateY(-50px);}
    #main_slide.owl-carousel {height: 400px;}
    #main_slide.owl-carousel .owl-item .item {height: 400px;}
    #main_slide.owl-carousel .owl-item .main-img01,
    #main_slide.owl-carousel .owl-item .main-img02 {background-position: 70% center;}
    #main_slide.owl-carousel .owl-dots .owl-dot.active span {width: 50px;}
    .carousel-caption {padding: 0px;}
    .carousel-caption .slogan {text-align: center;}
    .carousel-caption .slogan p {text-align: center;}
    .carousel-caption .slogan > span {padding: 0 3rem;}
}



/* Main Board (메인 게시판)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 980px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 500px) {}





/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#mainContainer {z-index: 555;}
.main_section_title {color: #333;font-weight: 500;font-size: 65px;text-align: center;margin-bottom: 50px;letter-spacing: -0.02em;word-break: keep-all;}
.main_section_title p {font-size: 22px;color: #333;font-weight: 300;line-height: 1.3;word-break: keep-all;margin-top: 15px;}
.main_section_title strong {position: relative;font-weight: 600;font-size: 65px;line-height: 1;}
.main_section_title strong:before {content: '';position: absolute;top: 0;left: 0;width: 10px;height: 10px;background: #f18d2f;border-radius: 100%;transform: translate(-10px, 2px);}
.main_section_title span {opacity: .8;display: block;margin-top: 30px;font-size: 20px;line-height: 1.6;}
.btn-area {margin-top: 70px;text-align: center;}
.btn-area a {display: block;margin: 0 auto;width: 215px;height: 52px;color: #0065aa;text-align: center;line-height: 52px;font-size: 18px;border: 1px solid #0065aa;background: #fff;}
.btn-area a:hover {color: #fff;background: #f18d2f;border: 1px solid #0478d1;}

@media only screen and (max-width: 1200px) {
    .main_section_title {font-size: 34px;}
    .main_section_title p {font-size: 18px;}
}

@media only screen and (max-width: 500px) {
    .main_section_title {font-size: 26px;margin-bottom: 30px;}
    .main_section_title p {font-size: 15px;margin-top: 5px;}
    .main_section_title strong {font-size: 45px;}
    .main_section_title span {margin-top: 20px;font-size: 18px;}
    .btn-area {margin-top: 20px;}
    .btn-area a {width: 160px;height: 40px;line-height: 40px;font-size: 14px;}
}

/* main_section01
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main_section01 {position: relative;width: 100%;padding: 100px 0px;}
.main_section01 .title-box {display: flex;margin: 90px auto 0;max-width: 1200px;width: 100%;height: 180px;color: #fff;}
.main_section01 .main_section_title {position: absolute;display: table;margin: 0;text-align: left;color: #fff;font-weight: 400;}
.section01_inner {position: relative;display: table;margin: 0 auto;padding: 0 5%;width: 100%;}
.section01_inner:before {z-index: -1;content: '';position: absolute;left: 0;width: 58%;max-height: 450px;height: 100%;background: #b39579;}
.section01_inner:after {z-index: -1;content: '';position: absolute;top: 90px;right: 0;width: 42%;max-height: 450px;height: 100%;background: #f7f4f1;}
.section01_inner div._back-more {position: absolute;left: 0;right: 0;top: 0;margin: 0 auto;width: 100%;height: 100%;}
.section01_inner div._back-more a {position: absolute;left: 58%;top: 0;width: 90px;transform: translateX(-90px);}
.section01_inner div._back-more a strong {position: relative;display: flex;align-items: center;justify-content: center;width: 90px;height: 90px;background: #8f7761;transition: all .3s;}
.section01_inner div._back-more a strong:before {content: '';display: inline-flex;width: 2px;height: 32px;background: #fff;transform: translateX(16px);}
.section01_inner div._back-more a strong:after {content: '';display: inline-flex;width: 32px;height: 2px;background: #fff;}
.section01_inner div._back-more a span {display: flex;align-items: center;justify-content: center;width: 90px;height: 90px;writing-mode: tb;height: 180px;color: #fff;font-weight: 500;font-size: 1.25em;background: #a1866d;transition: all .3s;}
.section01_inner div._back-more a:hover strong {background: #f18d2f;}
.section01_inner div._back-more a:hover span {background: #e2b106;}
.section01_inner div.extract-wrap {z-index: 1;position: relative;display: flex;width: 100%;align-items: center;height: 100%;}
.section01_inner .extract-webzine .extract-article {display: inline-flex;margin: 0 5% 0 0;padding: 0;width: 33.3%;height: 513px;border: none !important;}
.section01_inner .extract-webzine .extract-article a {display: table;width: 100%;height: 100%;}
.section01_inner .extract-webzine .extract-article:nth-child(1) {transform: translateY(90px);}
.section01_inner .extract-webzine .extract-article:nth-child(3) {margin-right: 0;transform: translateY(-90px);}
.section01_inner .extract-webzine .extract-article .extract-thumb {bottom: 0;width: 100%;height: 100%;border: none;}
.section01_inner .img-box {width: 50%;text-align: center;float: left}
.section01_inner .txt-box {width: 50%;padding-left: 60px;float: right;}
.main_section01:after,
.section01_inner:after,
.section01_inner .img-box:after,
.section01_inner .txt-box:after {content: "";display: block;clear: both}
.section01_inner .txt-box p {font-size: 20px;color: #333;line-height: 1.3;margin-bottom: 45px;}
.section01_inner .txt-box p strong {font-size: 30px;color: #137bc2;font-weight: 500;display: block;margin-bottom: 10px}
.section01_inner .txt-box p:last-child {margin-bottom: 0;}
.section01_inner .extract-webzine .extract-article .extract-thumb img {margin: 0 auto;transition: all .3s;}
.section01_inner .extract-webzine .extract-article a:hover img {box-shadow: 0px 10px 40px rgb(25 25 33 / 15%);transform: scale(1.02);}
.slide-warp {position: relative;overflow: hidden;}
#creation_slide.owl-carousel {display: block;}
#creation_slide.owl-carousel .owl-dots {position: relative;padding-top: 20px;right: 0px;width: 100%;text-align: center;}
#creation_slide.owl-carousel .owl-dots .owl-dot {background: none;border: none;display: inline-block}
#creation_slide.owl-carousel .owl-dots .owl-dot span {display: inline-block;width: 16px;height: 16px;border-radius: 30px;background: #7bbfe5;margin: 0px 5px;}
#creation_slide.owl-carousel .owl-dots .owl-dot.active span {display: inline-block;width: 16px;height: 16px;border-radius: 30px;background: #147bc9;}
#creation_slide.owl-carousel .owl-nav {visibility: hidden;}
.mobile {display: none;}

@media only screen and (max-width: 1200px) {
    .main_section01 {width: 100%;padding: 60px 20px;}
    .section01_inner {width: 100%;}
    .section01_inner .txt-box {padding-left: 20px;}
    .section01_inner .txt-box p {font-size: 18px;margin-bottom: 30px;}
    .section01_inner .txt-box p strong {font-size: 24px;}
    .main_section01 .main_section_title {margin-bottom: 30px;}
    #creation_slide.owl-carousel .owl-item .item img {width: 78%;}
    .section01_inner .extract-webzine .extract-article:nth-child(1),
    .section01_inner .extract-webzine .extract-article:nth-child(3) {transform: none;}
}

@media only screen and (max-width: 980px) {
    .main_section01 {padding: 60px 0;}
    .section01_inner:before {width: 980px;}
    .section01_inner:after {display: none;}
    .main_section01 .title-box {justify-content: center;}
    .main_section01 .main_section_title {text-align: center;}
    .section01_inner div._back-more {left: inherit;width: 200px;height: 70px;}
    .section01_inner div._back-more a {left: initial;right: 0;width: 270px;transform: none;}
    .section01_inner div._back-more a strong {float: right;width: 70px;height: 70px;}
    .section01_inner div._back-more a strong:before {width: 2px;height: 20px;transform: translateX(11px);}
    .section01_inner div._back-more a strong:after {width: 20px;height: 2px;}
    .section01_inner div._back-more a span {position: absolute;top: 0;right: 70px;width: 130px;height: 70px;writing-mode: inherit;}
    .section01_inner div.extract-wrap {flex-direction: column;}
    .extract-webzine .extract-article .extract-thumb img {width: 100%;}
    .section01_inner .extract-webzine .extract-article {margin: 50px 0 0;max-width: 768px;width: 100%;max-height: 768px;}
    .section01_inner .extract-webzine .extract-article:nth-child(1) {margin-top: 0;}
}

@media only screen and (max-width: 768px) {
    .section01_inner .img-box {width: 100%;float: none}
    .section01_inner .txt-box {width: 100%;padding-left: 0;float: none;padding-top: 30px;}
    .section01_inner .txt-box p {text-align: center;}
    .section01_inner .extract-webzine .extract-article {max-width: 500px;max-height: 500px;}
    .mobile {display: block;}
    .pc-screen {display: none;}
}

@media only screen and (max-width: 500px) {
    .section01_inner .txt-box p {font-size: 16px;margin-bottom: 25px;}
    .section01_inner .txt-box p strong {font-size: 20px;}
    .main_section01 .title-box {height: 130px;}
    .section01_inner div._back-more {width: 180px;height: 50px;}
    .section01_inner div._back-more a {width: 60px;}
    .section01_inner div._back-more a strong {width: 50px;height: 50px;}
    .section01_inner div._back-more a span {right: 50px;width: 130px;height: 50px;font-size: .875em;}
    .section01_inner .extract-webzine .extract-article {margin-top: 20px;max-width: 380px;max-height: 380px;}
    #creation_slide.owl-carousel .owl-item .item img {width: 65%;}
    #creation_slide.owl-carousel .owl-dots {padding-top: 10px;}
}

@media only screen and (max-width: 480px) {
    .section01_inner .extract-webzine .extract-article {max-width: 320px;max-height: 320px;}
}


/* main_section02
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main_section02 {padding: 100px 0px;width: 100%;position: relative;background: url(/images/mtl01r-21-0087/main/bg_section02.jpg) no-repeat center top/cover;}
.main_section02:before {content: "";position: absolute;display: block;width: 100%;top: 50%;bottom: 0;left: 0;background: #e8f2f9;z-index: -1}
.main_section02_inner {width: 95%;margin: 0 auto;position: relative;}
.main_section02_inner .list-up {display: flex;}
.main_section02_inner .list-up a {position: relative;display: inline-flex;align-items: center;justify-content: center;width: 33.3%;}
.main_section02_inner .list-up a div._in {max-width: 513px;}
.main_section02_inner .list-up a div._over {opacity: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;left: 0;right: 0;width: 100%;height: 100%;color: #fff;font-weight: 400;font-size: 2.1em;}
.main_section02_inner .list-up a div._over p{font-size: 1.5em;}
.main_section02_inner .list-up a div._over span{text-align: center;font-size: 20px;line-height: 30px;margin: 20px 90px 0;font-weight: normal;}
.main_section02_inner .list-up a div._in:before {opacity: 0;content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(/images/mtl01r-21-0087/main/bg_section02_objt.png) no-repeat center center;transition: all .4s;}
.main_section02_inner .list-up a:hover div._in:before {opacity: 1;}
.main_section02_inner .list-up a:hover div._over {opacity: 1;transition: .4s;}

@media only screen and (max-width: 1200px) {
    .main_section02 {padding: 60px 20px;}
    .main_section02_inner {width: 100%;}
    .main_section02_inner .list-up{gap:20px;}
    .main_section02_inner .list-up a div._in:before{opacity: 1;}
    .main_section02_inner .list-up a div._over{padding: 0; opacity: 1;}
    .main_section02_inner .list-up a div._over p {font-size: 1em;}
    .main_section02_inner .list-up a div._over span{font-size: 15px; margin: 20px 15px 0;}
}

@media only screen and (max-width: 980px) {
    .main_section02_inner .list-up a div._over {opacity: 1; font-size: 1.5em; padding: 0 12rem;}
    .main_section02_inner .list-up a div._over span{font-size: 18px; margin: 20px 10px 0;}
    .main_section02_inner .list-up a div._in:before{opacity: 1;}
    .main_section02_inner .list-up {flex-direction: column;}
    .main_section02_inner .list-up a {margin-top: 20px;width: 100%;}
}

@media only screen and (max-width: 768px) {
    .main_section02_inner .list-up a div._over {font-size: 1em;}
    .main_section02_inner .list-up a div._over p{font-size: 3em;}
}

@media only screen and (max-width: 500px) {
    .main_section02_inner .list-up a:nth-child(1) {margin-top: 0;}
    .main_section02_inner .list-up a div._over {font-size: .875em; padding: 0 2rem;}
}

@media only screen and (max-width: 500px) {
    .main_section02 {padding: 50px 20px;}
}


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

.main_section03 {padding: 120px 0px; width: 100%; position: relative; background: url(/images/mtl01r-21-0087/main/bg_section03.jpg) no-repeat center top;}
.main_section03:before {content: ""; position: absolute; display: block; width: 100%; top: 50%; bottom: 0; left: 0; background: #fff; z-index: -1}
.main_section03_inner {width: 95%; margin: 0 auto; position: relative;}
.main_section03_inner .main_section_title {color: #fff;}
.main_section03_inner .list-up {display: block; margin: 181px auto 0; max-width: 1200px;}
.main_section03_inner .list-up div._in {display: flex; width: 100%;}
.main_section03_inner .list-up div._in div._pic {display: inline-flex; width: 50%; overflow: hidden;}
.main_section03_inner .list-up div._in img {transition: all 1s;}
.main_section03_inner .list-up div._in:hover ._pic img {transform: scale(1.1);}
.main_section03_inner .list-up div._in div._txt {padding: 60px 4.5rem; display: inline-flex; flex-direction: column; width: 50%; background: #fff; border: 1px solid #eee;}
.main_section03_inner .list-up div._txt h3 {font-weight: 500; font-size: 2rem;}
.main_section03_inner .list-up div._txt > span {position: relative; margin-top: 80px; font-weight: 300; font-size: 1.375em; line-height: 2.2; white-space: pre-line;}
.main_section03_inner .list-up div._txt a {position: relative; display: flex; margin-top: 120px; align-items: center; padding-left: 25px; height: 50px;}
.main_section03_inner .list-up div._txt a:before {content: ''; position: absolute; display: block; left: 0; width: 50px; height: 50px; border-radius: 50%; background: #f18d2f; transition: all .4s;}
.main_section03_inner .list-up div._txt a:hover:before {transform: scale(1.2);}
.main_section03_inner .list-up div._txt a span {position: relative; font-size: 15px; font-weight: 600;}
.main_section03_inner .list-up div._txt a span:before {content: ''; display: block; position: absolute; right: -18px; top: 8px; width: 10px; height: 2px; background: #333;}
.main_section03_inner .list-up div._txt a span:after {content: ''; display: block; position: absolute; right: -14px; top: 4px; width: 2px; height: 10px; background: #333;}
.main_section03_inner .list-up div._in div._up {transform: translateY(-130px);}

@media only screen and (max-width: 1200px) {
    .main_section03_inner {width: 100%;}
    .main_section03_inner .list-up {margin: 194px auto 0; max-width: 100%;}
    .main_section03_inner .list-up div._in div._pic {justify-content: center; overflow: hidden;}
    .main_section03_inner .list-up div._in div._pic img {max-width: initial; max-height: none; height: auto;}
    .main_section03_inner .list-up div._in div._up {transform: translateY(-100px);}
    .main_section03_inner .list-up div._in div._txt {padding: 60px 2.5rem;}
    .main_section03_inner .list-up div._txt > span {margin-top: 80px; font-size: 1.2em; line-height: 1.7;}
    .main_section03_inner .list-up div._txt a {margin-top: 100px;}
}

@media only screen and (max-width: 768px) {
    .main_section03_inner .list-up {margin: 30px auto 0;}
    .main_section03_inner .list-up div._in {flex-direction: column;}
    .main_section03_inner .list-up div._in div._pic {position: relative; width: 100%; height: 70vh;}
    .main_section03_inner .list-up div._in div._pic img {position: absolute; width: 100%; margin-top:-50px;}
    .main_section03_inner .list-up div._in div._txt {padding: 40px 1.5rem 60px; width: 100%;}
    .main_section03_inner .list-up div._txt > span {margin-top: 30px; font-size: 1em;}
    .main_section03_inner .list-up div._txt a {margin-top: 30px;}
    .main_section03_inner .list-up div._in div._up {transform: none;}
    .main_section03_inner .list-up div._in:nth-child(2) div._txt {order: 2;}
    .main_section03_inner .list-up div._in:nth-child(2) div._pic {order: 1;}
    .main_section03_inner .list-up div._txt h3{font-size: 25px;}

}

@media only screen and (max-width: 500px) {
.main_section03 {padding: 50px 20px;}
    .main_section03_inner .list-up div._in div._pic{height: 30vh;}
    .main_section03_inner .list-up div._in div._pic img{ }
}


/* main_section04
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main_section04 {padding: 120px 0px; background: #f3f3f0;}
.main_section04_inner {display: flex; width: 1200px; margin: 0 auto;}
.main_section04_inner div._title {display: inline-flex; flex-direction: column; max-width: 30%;}
.main_section04_inner .section04_inner {display: flex; margin: 0 auto 0 80px; width: 100%;}
.section04_inner .slide-wrap {width: 100%;}
.section04_inner .slide-wrap .owl-item {width: 33.3%;}
.section04_inner .owl-stage-outer {width: 1920px !important;}
.section04_inner .owl-stage-outer {height: 300px !important;}
.section04_inner .slide-wrap .slide-list {position: relative; height: 300px !important;}
.section04_inner .owl-controls {position: absolute; left: 0; bottom: 0; width: 140px; height: 70px;}
.section04_inner .slide-wrap .slide-list .owl-controls .owl-dots {display: none !important;}
.section04_inner .slide-wrap .slide-list .owl-controls .owl-prev {cursor: pointer; position: absolute; top: 0; left: 0; width: 70px; height: 70px; opacity: 1; color: #fff; background: rgba(0, 0, 0, .7);}
.section04_inner .slide-wrap .slide-list .owl-controls .owl-next {cursor: pointer; position: absolute; top: 0; right: 0; width: 70px; height: 70px; opacity: 1; color: #fff; border-left: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .7);}
.section04_inner .slide-wrap .slide-list .owl-controls i {font-size: 0; width: 6px; height: 8px;}
.section04_inner .slide-wrap .slide-list .owl-controls .owl-prev i {background: url(/images/mtl01r-21-0087/main/ico_slide_arrow_prev.png) no-repeat;}
.section04_inner .slide-wrap .slide-list .owl-controls .owl-next i {background: url(/images/mtl01r-21-0087/main/ico_slide_arrow_next.png) no-repeat;}
.section04_inner .slide-wrap .slide-list .owl-controls .owl-nav > div {display: flex; align-items: center; justify-content: center;}
.section04_inner .img-frame {border: none !important; background: transparent !important;}
/*.section04_inner .slide-wrap .slide-list .owl-carousel-item .img-frame img {width: 100%; height: auto;}*/
.main_section04_inner .main_section_title {margin-bottom: 30px;}
.main_section04_inner .btn-area {margin-top: 0;}
.main_section04_inner .btn-area a {display: flex; margin: 0 auto; width: 250px; height: 60px; color: #333; text-align: center; font-weight: 500; font-size: 16px; align-items: center; justify-content: center; border-radius: 0; border: 2px solid #f18d2f; background: transparent; transition: all .4s;}
.main_section04_inner .btn-area a:hover {background: #f18d2f;}
.main_section04_inner .wrap_controllers {display: none;}

@media only screen and (max-width: 1200px) {
    .main_section04 {padding: 60px 0 120px;}
    .main_section04_inner {width: 100%;padding: 0px 20px;}
}

@media only screen and (max-width: 980px) {
    .main_section04_inner {flex-direction: column;}
    .main_section04_inner div._title {margin: 0 auto 40px;max-width: 100%;}
    .main_section04_inner .section04_inner {margin-left: 0;}
    .section04_inner .owl-controls {position: relative;display: flex;margin: 40px 0;justify-content: center;width: 100%;height: initial;}
    .section04_inner .slide-wrap .slide-list .owl-controls .owl-nav {display: none;}
    .section04_inner .slide-wrap .slide-list .owl-controls .owl-dots {position: relative;bottom: 0;display: inline-flex !important;}
    .section04_inner .owl-dot.active {width: 80px !important;background: #f18d2f !important;}
    .section04_inner .owl-dot {margin: 0 !important;height: 4px !important;width: 50px !important;border-radius: 0 !important;background: #ddd !important;}
}

@media only screen and (max-width: 500px) {
    .main_section04 {padding: 50px 0 120px;}
    .main_section04_inner .btn-area {margin-top: 0;}
}

/* main_section05
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main_section05 {padding: 100px 0 0; background: url('/images/mtl01r-21-0040/main/set05_bg.jpg') no-repeat center center/cover}
.main_section05_inner {width: 100%; margin: 0 auto;}
.main_section05 .reservation{width: 100%; background: url(/images/mtl01r-21-0087/main/bg_section05.jpg) no-repeat center top; padding: 100px 0;}
.main_section05 .reservation .main_section_title strong{color: #fff;}
.main_section05 .reservation .vation_bt{display: flex; justify-content: center;}
.main_section05 .reservation .vation_bt a{color: #fff; padding: 20px 30px; border:1px solid #fff; font-size: 20px;}
.main_section05 .reservation .vation_bt a:hover{background: rgb(0 0 0 / 40%);}

@media only screen and (max-width: 1400px) {
    .main_section05_inner div._info {margin-left: 40px;}
}
@media only screen and (max-width: 1200px) {
    .main_section05_inner {width: 100%;padding: 0;}
    .main_section05_inner div._info {width: 45%;}
    .main_section05_inner div._info ul li {font-size: 1.2em;}
    .main_section05_inner div._info ul li span {line-height: 1.6;}
}
@media only screen and (max-width: 768px) {
    .main_section05_inner div._in {flex-direction: column;}
    .main_section05_inner div._in div._map {width: 100%;}
    .main_section05_inner div._info {margin-left: 0;padding: 0 20px;width: 100%;}
    .main_section05_inner div._info ul li {margin-top: 30px;font-size: 1em;}
    .main_section05_inner div._info ul li:first-child {margin-top: 30px;}
}
@media only screen and (max-width: 480px) {
}