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

@font-face {
    font-family: 'Recipekorea';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Recipekorea.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.hidden {
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
}


/* Header
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#L_SITE_LOGO{float:left;}
#L_SITE_LOGO a {display: block; margin-top:40px;}
#header {z-index: 666; width: 100%; height: 120px; background-color: #ffffff; border-top:3px solid #f74043;}

#header #header_in {position: relative; margin: 0 auto; width: 100%; max-width: 1200px;height: 65px;}

#nav {display: inline-block ;margin-left: 116px; margin-top:42px; float: right}
.nav-btn {display: none;}
.nav-bg { z-index: 888; display: none; position: absolute; top: 118px; width: 100%; height: 130px; background: #fff; border-bottom: 1px solid #f74043;}

#nav:after {content: ""; display: block; clear: both;}
.navigation:after {content: ""; display: block; clear: both;}
.navigation > li {position: relative; float: left; width: 170px; height: 100%; line-height: 66px; text-align: center;}

.navigation .main-menu {display: block; width: 100%; font-weight: 500; font-size: 18px; color: #401e20;}
.navigation .main-menu:hover{color:#f74043;}
.navigation .sub-menu { display: none; z-index: 998; position: absolute; top: 53px; left: 0; width: 100%; height: 120px; padding: 0;}
.navigation .sub-menu a {display: block; text-align: center; line-height: 20px; letter-spacing: 0; font-size: 15px; font-weight: normal; color: #401e20; margin: 15px 0 0;}
.navigation .sub-menu .intro-menu {display: none;}
.navigation .sub-menu a:hover {text-decoration: underline !important;}

.navigation li:nth-child(1):hover a.main-menu:after,
.navigation li:nth-child(2):hover a.main-menu:after,
.navigation li:nth-child(3):hover a.main-menu:after,
.navigation li:nth-child(4):hover a.main-menu:after,
.navigation li:nth-child(5):hover a.main-menu:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    background: #f74043;
    width: calc( 100% - 78px);
    left: 39px;
    bottom: 11px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.navigation li:nth-child(1) a.main-menu:after,
.navigation li:nth-child(2) a.main-menu:after,
.navigation li:nth-child(3) a.main-menu:after,
.navigation li:nth-child(4) a.main-menu:after,
.navigation li:nth-child(5) a.main-menu:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 0;
    bottom: 11px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}





.util-menu {position: absolute; top: 18px; right: 0; line-height: 0; font-size: 0;}
.util-menu ul {display: inline-block;}
.util-menu li {display: inline-block;float: left; height: 30px; text-align: center;margin-left: 10px;}
.util-menu li:first-child {border-color: #1886a2; margin-left: 0;}
.util-menu a {display: inline-block; line-height: 22px; font-size: 12px; font-weight: 400; color: #888;   }

.sns_facebook,
.sns_insta,
.sns_band {
    width:22px !important; 
    height:22px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;
    text-indent: -9999px;
    margin-right: 7px;
}
.sns_facebook { background-image:url('/images/mtl01-21-0091/common/facebook_icn.png'); margin-left: 20px;}
.sns_insta { background-image:url('/images/mtl01-21-0091/common/instargram_icn.png');}
.sns_band { background-image:url('/images/mtl01-21-0091/common/band_icn.png'); margin-right:0;}

.login-bar {padding: 0; text-align: center; float: right; z-index: 2; position: relative; margin-left:10px;}
.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 12px; 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: #5d4b4c; border: 1px solid #5d4b4c;}
.login-bar li:last-child a {display: block; width: 75px; 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: 90px;}
.login-bar .lang_list {display: none; position: absolute; background-color: #5d4b4c; width: 90px; 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;}
.login-bar li a img{position:relative; top:2px; margin-right:5px; vertical-align:inherit;}



/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer {width: 100%;background-color: #67605d;}

.footer-area {position: relative; display: table; margin: 0 auto; width: 100%; box-sizing: border-box;}
.footer-top{width:100%; background:#4c4642}
.footer-content {position: relative; margin: 0 auto; padding: 24px 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: .8; font-size: 16px; color: #fff;}
.footer-info {position: relative; padding: 35px 0;}
.footer-info div.footer-info-inner {position: relative; margin: 0 auto; max-width: 1200px;}
.footer-info li {opacity: .7; font-size: 14px; padding-top:3px; color: #fff; font-weight:300;}
.footer-info a{color: #fff !important;}
.footer-info li:first-child {padding-top: 0;}
.footer-info li:nth-child(4) {padding-top:10px;}
.footer-info span {color:#fff; opacity: .5; margin: 0 3px;}
.footer-info .site-tel {position: absolute; right: 0; top: 0; font-size: 24px; color: #ebebeb; font-weight: 400;}
.footer-info .footer-logo:after {content: "";display: block; clear: both;}
.go-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);
}
.footer-info-inner a{color: #fff;}



/* Main Visual (메인이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#main-visual-box {width:100%; max-width:1760px; margin:0 auto; position:relative;  box-sizing:border-box}
.main-visual-area{width:70%; height:752px; max-height:752px; position:relative;  }
.main-visual {position: relative; overflow: hidden; }
.main-visual-caption {position: absolute; top: 0; left:10%; right:10%; padding-top: 245px; text-align: center; z-index: 99;}
.main-visual-caption h1 {font-size: 70px; color: #ffb41e; font-family: 'Recipekorea','Noto Sans KR',sans-serif; line-height:1.4; letter-spacing:0.5px;}
.main-visual-caption > h1 span {font-size: 40px; color: #fff; font-family: 'Recipekorea','Noto Sans KR',sans-serif; margin-bottom: 15px; display:block; line-height:1.3}
#main_slide.owl-carousel {display: block; height: 752px;}
#main_slide.owl-carousel .owl-item .item {height: 752px;}
#main_slide.owl-carousel .owl-item .main-img01 {background: url('/images/mtl01-21-0091/main/main_img01.jpg') no-repeat right 70% center/cover;}
#main_slide.owl-carousel .owl-item .main-img02 {background: url('/images/mtl01-21-0091/main/main_img02.jpg') no-repeat right 70% center/cover;}
#main_slide.owl-carousel .owl-dots {display:none;}
#main_slide.owl-carousel .owl-nav .owl-prev {
    display: inline-block;
    width: 69px;
    height: 70px;
    background: url('/images/mtl01-21-0091/main/main_arrow01.png') no-repeat center center;
    text-indent: -9999px;
    position: absolute;
    bottom: 0;
    right: 70px;
    z-index: 9999;
    border: none;
    cursor: pointer;
}
#main_slide.owl-carousel .owl-nav .owl-next {
    display: inline-block;
    width: 70px;
    height: 70px;
    background: url('/images/mtl01-21-0091/main/main_arrow02.png') no-repeat center center;
    text-indent: -9999px;
    position: absolute;
    bottom:0;
    right: 0;
    z-index: 9999;
    border: none;
    cursor: pointer;
}	

.main-banner{width:29.4%; right:0; top:0; position:absolute; height:752px; max-height:752px; }
.main-banner li{display:block; position:relative; margin-bottom:10px; height:244px;}
.main-banner li:nth-child(1){background-color:#bc5994; /*background-image: url('/images/mtl01-21-0091/main/main_banner01.png'); background-repeat: no-repeat; background-position:left 7.7% center; background-size:33%*/}
.main-banner li:nth-child(2){background-color:#add899; /*background-image: url('/images/mtl01-21-0091/main/main_banner02.png'); background-repeat: no-repeat; background-position:left 7.7% center; background-size:33%*/}
.main-banner li:nth-child(3){background-color:#ffde94; /*background-image: url('/images/mtl01-21-0091/main/main_banner03.png'); background-repeat: no-repeat; background-position:left 7.7% center; background-size:33%*/}
.main-banner li .txt-area{position:absolute; top:95px; left:10%; padding-right:5%; }
.main-banner li .txt-area h2{font-size:30px; font-weight:600; color:#fff; margin-bottom:20px; }
.main-banner li .txt-area p{font-size:20px; font-weight:500; color:#fff; letter-spacing:-1px; margin-bottom:35px;}

.main-banner li a {display:block;width:auto;}
.main-banner li a .screen {position:relative;overflow:hidden; padding-bottom:244px;}
.main-banner li a .screen span {display:block;position:absolute;transition:all .2s; z-index:2;}
.main-banner li a .screen .top {top:0;height:12px;width:0;}
.main-banner li a .screen .right {top:0;right:0;width:12px;height:0;}
.main-banner li a .screen .bottom {bottom:0;right:0;height:12px;width:0;}
.main-banner li a .screen .left {bottom:0;left:0;width:12px;height:0;}
.main-banner li a:hover .screen .top {width:100%;}
.main-banner li a:hover .screen .right {height:100%;transition-delay:.1s;}
.main-banner li a:hover .screen .bottom {width:100%;transition-delay:.2s;}
.main-banner li a:hover .screen .left {height:100%;transition-delay:.4s;}
.main-banner li:nth-child(1) a .screen span{background:#a12f73;}
.main-banner li:nth-child(2) a .screen span{background:#5f9f40;}
.main-banner li:nth-child(3) a .screen span{background:#d5a435;}
.main-banner li i{display:inline-block; position:absolute; right:65px; top:180px; width:55px; height:10px; transition:all 0.3s ease;}
.main-banner li a:hover i{right:35px;transition:all 0.3s ease;}



/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#contents {width: 100%; margin: 0 auto; position: relative;}
#section01 {position:relative; min-height:954px; padding-top:130px; background:url('/images/mtl01-21-0091/main/section01_bg.jpg') no-repeat center center/cover;}
#section01 .section01-inner {position:relative; width: 1200px; margin: 0 auto;}
#section01 .main-section01-title{font-size:52px; color:#401e20; font-weight:600; margin-bottom:85px; letter-spacing:-1px;}
#section01 .main-section01-title span{display:block; font-size:26px; color:#333; font-weight:400; margin-top:40px; letter-spacing:0; }
#section01 .section01-inner .cont-ban-list {position:relative;}

.cont-ban-list > div {position:relative; float:left; width:366px; height:448px; margin-left:51px; text-align:center;}
.cont-ban-list > div:nth-child(1){margin-left:0;}
.cont-ban-list > div a {display:block;width:auto;}
.cont-ban-list > div a .screen {position:relative;overflow:hidden; padding-bottom:448px; background:rgba(0,0,0,.2);}
.cont-ban-list > div a .screen span {display:block;position:absolute;transition:all .2s; z-index:2; background:#f74144;}
.cont-ban-list > div a .screen .top {top:0;height:12px;width:0;}
.cont-ban-list > div a .screen .right {top:0;right:0;width:12px;height:0;}
.cont-ban-list > div a .screen .bottom {bottom:0;right:0;height:12px;width:0;}
.cont-ban-list > div a .screen .left {bottom:0;left:0;width:12px;height:0;}
.cont-ban-list > div a:hover .screen .top {width:100%;}
.cont-ban-list > div a:hover .screen .right {height:100%;transition-delay:.1s;}
.cont-ban-list > div a:hover .screen .bottom {width:100%;transition-delay:.2s;}
.cont-ban-list > div a:hover .screen .left {height:100%;transition-delay:.3s;}

.cont-ban-list > div .txt-area{position:absolute; top:95px; width:100%;}
.cont-ban-list > div .txt-area h3{font-size:32px; color:#fff; font-weight:600; margin-top:30px;}
.cont-ban-list > div .txt-area p{font-size:20px; color:#fff; font-weight:400; margin-top:20px;}

.cont-ban-list .cont-ban01{top:70px; background:url('/images/mtl01-21-0091/main/sec01_bg01.jpg') no-repeat center center/cover;}
.cont-ban-list .cont-ban01 a:hover .screen{background:rgba(0,0,0,.6); transition:all .2s;}
.cont-ban-list .cont-ban02{background:url('/images/mtl01-21-0091/main/sec01_bg02.jpg') no-repeat center center/cover;}
.cont-ban-list .cont-ban02 a:hover .screen{background:rgba(0,0,0,.7); transition:all .2s;}
.cont-ban-list .cont-ban03{top:70px; background:url('/images/mtl01-21-0091/main/sec01_bg03.jpg') no-repeat center center/cover;}
.cont-ban-list .cont-ban03 a:hover .screen{background:rgba(0,0,0,.7); transition:all .2s;}


#section02 {position:relative;padding:100px 0;}
#section02 .section02-inner {width: 1200px; margin: 0 auto;}
#section02 .section02-inner .main_news {padding:40px 35px; background:#f5f5f5; float:left; width: 100%; height:240px;}
#section02 .section02-inner .main-franchise {width: 590px; height:240px;  float:right; position:relative; vertical-align:top; top:-240px; }
#section02:after, #section02 .section02-inner .main_news:after, #section02 .section02-inner .main-franchise:after{content:""; display:block; clear:both;}

.franc-box{width:590px; display:table-cell; height:240px; position:relative;}
.franc-box .go-link{position:absolute; top:0; left:0; display:block; width:100%; height:100%; text-indent:-9999em; overflow:hidden;}
.franc-box .img-frame{display:table-cell; width:295px; vertical-align:middle; height:240px; position:relative;
	background-color:#ffd658; 
	background-image: url('/images/mtl01-21-0091/main/sec02_img.png'); 
	background-repeat: no-repeat; 
	background-position:center center;
}
.franc-box .img-frame:after {content:''; display:inline-block; width:21px; height:40px; 
	background:url('/images/mtl01-21-0091/main/franc_arrow.png') no-repeat center center;
	position: absolute; right: -21px; top: 40%;  z-index: 9;}
	
.franc-box .txt-frame{display:table-cell; position:relative; width:295px; vertical-align:middle; text-align:center; height:240px;  background:#f7f7f7;}
.franc-box .txt-frame h3{font-size:28px; color:#333; font-weight:500; margin-bottom:20px;}
.franc-box .txt-frame p{font-size:18px; color:#555; line-height:24px; margin-bottom:25px;}

.franc-box a {display:block;width:auto;}
.franc-box a .screen {position:relative;overflow:hidden; padding-bottom:240px; top:240px;}
.franc-box a .screen span {display:block;position:absolute;transition:all .2s; z-index:2; background:#f74144;}
.franc-box a .screen .top {top:0;height:12px;width:0;}
.franc-box a .screen .right {top:0;right:0;width:12px;height:0;}
.franc-box a .screen .bottom {bottom:0;right:0;height:12px;width:0;}
.franc-box a .screen .left {bottom:0;left:0;width:12px;height:0;}
.franc-box a:hover .screen .top {width:100%;}
.franc-box a:hover .screen .right {height:100%;transition-delay:.1s;}
.franc-box a:hover .screen .bottom {width:100%;transition-delay:.2s;}
.franc-box a:hover .screen .left {height:100%;transition-delay:.4s;}
.franc-box i{display:inline-block; position:absolute; right:120px; top:180px; width:55px; height:10px; transition:all 0.3s ease;}
.franc-box a:hover i{right:85px;transition:all 0.3s ease;}


@supports ( -ms-ime-align:auto ){
	#section02{padding-top:0;}
}


/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#section02{padding-top:0;}
	.franc-box .img-frame::after{position:relative; top:0; right:-295px;}
}