@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */

* {box-sizing: border-box;}
.clearfix::after {content: ""; display: block; clear: both}
a {color: inherit; text-decoration: none;}
.inner { width: 1200px; margin: 0 auto;}
.hidden {width: 0; height: 0; overflow: hidden;
  font-size: 0; line-height: 0; text-indent: -9999px;
  position: absolute; left: -9999px;
}
body {font: 17px/1.2 'Noto Sans KR', dotum, AppleGothic, sans-serif; color: #777;}

/*   *********
HEADER-S
*********   */
#header {width: 100%; height: 100px; min-width: 1200px; padding: 23.5px 0; border-bottom: 1px solid #e6e6e6;
  background-color: #fff;
}
#header .logo {float: left;
  width: 226px; height: 53px;
}
#header .logo a {display: block;
  width: 100%;  height: 53px;
  background: url(../img/mmca-logo.png) no-repeat;
  text-indent: -10000px;
}
#header .gnb {float: left;
  margin-left: 30px;
}
.gnb .depth1 {float: left;
  position: relative;
}
.gnb .depth1 > a {display: block;
  padding: 0 15px 24px;
  color: #333; font-size: 18px; font-weight: bold; line-height: 50px;
}
.gnb .color-txt > a {color: #a49580;}
.gnb .depth2 {display: none;
  margin-left: -108px; border-top: 2px solid #a49580;
  background-color: rgba(255, 255, 255, 0.8) ;
  position: absolute; left: 50%; top: 75px;
}
.gnb .depth2::after {content: "";
  width: 0; height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #a49580;
  position: absolute; left: 100px; top: -8px;
}
.gnb .depth2 li {width: 216px;
  text-align: center;
}
.gnb .depth2 li a {display: block;
  padding: 18px 0;
  color: #333; font-size: 16px; font-weight: normal;
}
#header .tnb {float: right;}
.tnb .tnb-icon {margin: -15px 0 0 170px;
  position:relative;
}
.tnb .tnb-icon a {width: 20px; height: 20px;
  background: url(../img/is.png) no-repeat;
  position: absolute; left: 0; top: 0;
}
.tnb .tnb-icon a:nth-child(2) {background-position:-28px 0;
  left: 30px; top: 0;
}
.tnb .tnb-icon a:nth-child(3) {background-position:-56px 0;
  left: 60px; top: 0;
}
.tnb .tnb-icon a:nth-child(4) {background-position:-85px 0;
  left: 90px; top: 0;
}
.tnb .tnb-icon a:nth-child(5) {background-position:-113px 0;
  left: 120px; top: 0;
}
.tnb li {margin: 30px 20px 0 0;
  position: relative;
}
.tnb li::after {content: "";
  width: 2px; height: 13px;
  background-color: #e6e6e6;
  position: absolute; right: -11px; top: 5px;
}
.tnb li a {color: #777; font-size: 14px;}
.tnb-wrap .tnb-login {float: left;}
.tnb-wrap .tnb-login li {float: left;}
.tnb-wrap .tnb-login li:nth-child(3) {display: none;}
.tnb-wrap .tnb-login li:nth-child(4) {display: none;}
.tnb-lang {float: left;}
.tnb-lang li {float: left;}
.tnb-sch {float: left;}
.tnb-sch p {overflow: hidden; cursor: pointer;
  width: 19px; height: 19px; margin-top: 30px;
  text-indent: -9999px;
  background: url(../img/is.png) no-repeat;
  background-position: 0 -28px;
}
.tnb-sch .sch-box {display: none;}
.gnb .depth1:hover .depth2 {display: block;}
.depth2 li:hover a {color: #a49580;}
/*   *********
HEADER-E
*********   */

/*   *********
MAIN-S
*********   */
/* VISUAL-S */
.visual { clear: both;
  width: 1840px; margin: 0 auto;
}
.visual .visual-box {float: left;
  width: 920px; height: 910px;
}
.visual .visual-img1 {background: url(../img/main-img1.png) no-repeat;}
.visual .visual-img2 {background: url(../img/main-img2.png) no-repeat;}
.visual-box a {display: block;
  width: 920px; height: 910px;
  color: #fff; text-align: center;
}
.visual-box strong {display: block;
  padding-top: 100px;
  font-size: 30px;
}
.visual-box p {color: #fff; font-size: 50px; padding-top: 310px;}
.visual-box em {display: none;
  width: 150px; height: 60px; margin: 100px auto;
  font-size: 14px; font-weight: bold; line-height: 60px;
  position: relative;
}
.visual-box em::before {content: "";
  width: 150px; height: 1px;
  background-color: #fff;
  position: absolute; left: 0; bottom: 0;
}
.visual-box em::after {content: "";
  width: 6px; height: 6px; border: 1px solid #fff; border-width: 2px 2px 0 0; 
  position: absolute; right: 40px; top: 27px;
  transform: rotate(405deg);
}
.visual-box:hover a {background-color: rgba(0, 0, 0, 0.8);}
.visual-box a:hover em {display: block;}
.visual-box a:hover em::before {animation: line-slide 0.3s linear;}
@keyframes line-slide{
  from{ 
    width: 0;
  }
  to{
    width: 150px;
  }
}
/* VISUAL-E */

/* TAP-S */
.tap {overflow: hidden;
  min-width: 1200px;padding-top: 50px; 
  position: relative;
}
.tap>div{float: left;
  height: 260px;
}
.exhibit-tit {width: 600px; height: 60px;
  background: #a49580;
  color: #fff; font-size: 16px; text-align: center; line-height: 60px;
}
.exhibit-tit a {display: block;}
.tap-wrap {width: 1200px; padding: 30px 0 11px 33px;
  position: absolute; left: 0; top: 110px;
}
.tap-list>div {float: left;
  padding: 0 42px 13px;
  position: relative;
}
.tap-list>div::after {content: "";
  width: 1px; height: 100px;
  background-color: #e6e6e6;
  position: absolute; right: 0; top: 0;
}
.tap-list>div:last-child::after {display: none;}
.tap-list strong {clear: both; display: block;
  margin-bottom: 25px;
  color: #999; font-size: 14px; text-align: center;
}
.tap-list input {cursor: pointer;
  border: none; outline: 0;
  background-color: #fff; 
  color: #333;  font-weight: bold; text-align: center;
}
.tap-list select {cursor: pointer;
  border: none; outline: 0;
  color: #333; font-size: 30px;
}
.tap-list span {color: #333; font-size: 30px; font-weight: lighter;}
.tap-list em {padding: 0 27px;
  color: #333; font-size: 30px;
}
.tap button {cursor: pointer;
  width: 160px; height: 50px;margin: 14px 0 0 18px; border: 1px solid #79b4b7;
  background-color: transparent;
  color: #79b4b7; font-weight: bold;
  transition: background 0.2s ease-in;
}
.experience-tit {width: 600px; height: 60px;
  background: #efefef;
  color: #333; font-size: 16px; text-align: center; line-height: 60px;
}
.experience-tit a {display: block;}
.tap button:hover {background-color: #79b4b7;
  color: #fff; font-size: 14px; font-weight: bold;
}
/* TAP-E */

/* ONLINE-S */
.online {width: 100%; height: 530px; margin-bottom: 270px;
  background-color: #efefef;
}
.online h3 {padding: 50px;
  color: #333; font-size: 35px; text-align: center;
}
.swiper-wrapper {margin-left: -300px; padding-bottom: 50px;}
.online .swiper-slide h4 {padding: 0 0 15px 40px; margin-top: 465px;
  color: #a49580; font-size: 18px;
  position: relative;
}
.online .swiper-slide h4::before {content: "";
  width: 32px; height: 1px;
  background-color: #a49580;
  position: absolute; left: 0; top: 9px;
}
.online .swiper-slide strong {display: block;
  padding: 0 0 3px 40px;
  color: #333; font-size: 24px;
}
.online .swiper-slide em {display: block;
  padding: 0 0 8px 40px;
  color: #333; font-size: 16px;
}
.online .swiper-slide p {padding: 0 0 15px 40px;
  color: #777; font-size: 16px;
}
.online .swiper-slide img {width: 100%; height: 440px;
  position: absolute; left: 0; top: 0;
}
.online .swiper-slide a {display:inline-block;
  margin-left: 40px;
  color: #79b4b7; font-size: 16px; font-weight: bold;
  position: relative;
}
.online .swiper-slide a::after {content: "";
  width: 6px; height: 6px; border: 1px solid #79b4b7; border-width: 2px 2px 0 0; 
  position: absolute; right: -9px; top: 7px;
  transform: rotate(405deg);
}
.swiper-pagination {text-indent: -9999px;}
/* ONLINE-E */
/* COLLECTION-S */
.collection {padding-bottom: 100px;}
.collection h3 { padding: 50px 0;
  color: #333; font-size: 35px; text-align: center;
}
.collection .slick-slide {position: relative;}
.collection .slider-txt {width: 600px; height: 200px; padding-top: 27px;
  background-color: #fff;
  position: absolute; left: 0; bottom: 0;
}
.collection .slider-txt h4 {padding: 0 0 15px 40px;
  color: #a49580; font-size: 16px;
  position: relative;
}
.collection .slider-txt h4::before {content: "";
  width: 32px; height: 1px;
  background-color: #a49580;
  position: absolute; left: 0; top: 9px;
}
.collection .slider-txt strong {display: block;
  padding: 0 0 3px 40px;
  color: #333; font-size: 24px;
}
.collection .slider-txt em {display: block;
  padding: 0 0 15px 40px;
  color: #555; font-size: 14px;
}
.collection .slider-txt a {color: #79b4b7; font-size: 14px; font-weight: bold;
  margin-left: 40px;
  position: relative;
}
.collection .slider-txt a::after {content: "";
  width: 6px; height: 6px; border: 1px solid #79b4b7; border-width: 2px 2px 0 0; 
  position: absolute; right: -9px; top: 7px;
  transform: rotate(405deg);
}
.slider-nav {padding-top: 20px;
  position: relative;
}
.slick-prev {cursor: pointer;
  width: 66px; height: 66px; border: none;
  background-color: #5d5549;
  text-indent: -9999px;
  position: absolute; left: 467px; top: -200px;
}
.slick-prev::after {content: "";
  width: 6px; height: 6px; border: 1px solid #fff; border-width: 2px 2px 0 0; 
  position: absolute; left: 30px; top: 30px;
  transform: rotate(225deg);
}
.slick-next {cursor: pointer;
  width: 66px; height: 66px; border: none;
  background-color: #5d5549;
  font-size: 0; line-height: 0; text-indent: -9999px;
  position: absolute; left: 534px; top: -200px;
}
.slick-next::after {content: "";
  width: 6px; height: 6px; border: 1px solid #fff; border-width: 2px 2px 0 0; 
  position: absolute; left: 30px; top: 30px;
  transform: rotate(405deg);
}
.slick-dots {width: 0; height: 0;
  line-height: 0 ; text-indent: -9999px;
}
/* COLLECTION-E */
/* EVENT-S */
.event {width: 100%; height: 1210px;
  background: url(../img/event-bg.png) no-repeat 0 482px;
  position: relative;
}
.event .event-wrap {position: relative;}
.event .event-box1 h4 {padding-left: 40px;
  color: #f5da8b; font-size: 48px;
  position: absolute; left: 586px; top: 32px;
}
.event .event-box1 strong {padding-left: 40px; margin-top: 14px;
  color: #666; font-size: 14px;
  position: absolute; left: 586px; top: 140px;
}
.event .event-box1 p {padding-left: 40px; margin-top: 14px;
  color: #666; font-size: 14px;
  position: absolute; left: 586px; top: 160px;
}
.event .event-box1 img {width: 535px; height: 690px;
  position: absolute; left: 40px; top: 0;
}
.event .event-box1 a {display: block;
  width: 150px; height: 46px; padding: 5px 32px; margin: 25px 40px ; border: 1px solid #333; border-radius: 28px;
  color: #666; font-size: 14px; font-weight: bold; text-align: center; line-height: 36px;
  position: absolute; left: 586px; top: 200px;
}
.event .event-box2 h4 {color: #f5da8b; font-size: 48px;
  position: absolute; left: 410px; top: 793px;
}
.event .event-box2 strong {margin-top: 48px;
  color: #fff; font-size: 14px;
  position: absolute; left: 495px; top: 810px;
}
.event .event-box2 p {margin-top: 54px;
  color: #fff; font-size: 14px;
  position: absolute; left: 130px; top: 830px;
}
.event .event-box2 img {width: 535px; height: 690px;
  position: absolute; right: 40px; top: 395px;
}
.event .event-box2 a {display: block;
  width: 150px; height: 46px; padding: 5px 32px; margin-top: 90px; border: 1px solid #fff; border-radius: 28px;
  color: #fff; font-size: 14px; font-weight: bold; text-align: center; line-height: 36px;
  position: absolute; left: 410px; top: 850px;
}
/* EVENT-E */
/* MAP-S */
.map h3 {padding: 50px 0;
  color: #333; font-size: 35px; text-align: center;
}
.map-list {width: 1200px; height: 204px; border: 1px solid #efefef; border-top: none; box-sizing: border-box;}
.map-list article {float: left;
  width: 599px; height: 163px; padding: 35px 60px 0;
  position: relative;
}
.map-list-box h4 {margin-bottom: 6px;
  color: #333; font-size: 20px;
}
.map-list-box p, address {line-height: 1.5; color: #666; font-size: 14px;}
.map-list-box a {display: block; float: left;
  margin: 20px 10px 0 0; padding: 10px; border: 1px solid #efefef;
  color: #666; font-size: 14px;
}
.map-view::after {content: "";
  width: 1px; height: 107px;
  background-color: #efefef;
  position: absolute; right: 0; top: 45px;
}
.map-list-box a:hover {background-color: #79b4b7; 
  color: #fff;
}
/* MAP-E */

/* SNS-S */
.sns {height: 1190px;
  position: relative;
}
.sns>div {float: left;}
.sns h3 {padding: 50px 0;
  color: #333; font-size: 35px; text-align: center;
}
.sns h4 a {display: block;}
.sns .exhibit-pic-tit {width: 600px; height: 60px;
  background-color: #a49580;
  color: #fff; text-align: center; line-height: 60px;
}
.sns .experenece-pic-tit {display: block;
  width: 600px; height: 60px;
  background-color: #efefef;
  color: #333; text-align: center; line-height: 60px;
}
.sns-wrap {position: absolute; left: 0; top: 243px;}
.sns-list strong {display: block;
  width: 238px; height: 50px; border: 1px solid #333;
  color: #333; text-align: center; line-height: 50px;
}
.sns-list strong a {display: block;}
.full strong {border-right: none;}
.facebook strong {border-right: none;
  position: absolute; left: 238px; top: 0;
}
.instagram strong {position: absolute; left: 476px; top: 0;}
.sns-list-box ul li {float: left;
  margin: 0 10px 10px 0;
}
.sns-list-box ul li:nth-child(3), .sns-list-box ul li:nth-child(6) {margin-right: 0;}
.facebook img, .instagram img {display: none;}
.sns-wrap .sns-more {position: absolute; right: 14px; top: -180px;}
.sns-wrap .more {color: #79b4b7; font-size: 14px; font-weight: bold;
  position: relative;
}
.sns-wrap .more::after {content: "";
  width: 6px; height: 6px; border: 1px solid #79b4b7; border-width: 2px 2px 0 0; 
  position: absolute; right: -9px; top: 7px;
  transform: rotate(405deg);
}
/* SNS-E */
/* CONNECT-S */
.connect {width: 100%; height: 270px; min-width: 1200px; margin: 0 auto;
  position: relative;
}
.connect article {padding-top: 75px;}
.connect-box1 {width: 760px; height: 270px;
  background-color: #a49580;
}
.connect-box1 h4 {margin: 0 0 16px 360px;
  color: #fff; font-size: 28px;
}
.connect-box1 strong {margin-left: 360px; padding-left: 50px;
  color: #f5da8b; font-size: 20px;
  position: relative;
}
.connect-box1 strong::after {content: "";
  width: 40px; height: 1px;
  background-color: #f5da8b;
  position: absolute; left: 0; top: 15px;
}
.connect-box2 {width: 1160px; height: 270px;
  background-color: #efefef;
  position: absolute; right: 0; top: 0;
}
.connect-box2 h4 {margin: 0 0 16px 95px;
  color: #333; font-size: 28px;
}
.connect-box2 legend {text-indent: -9999px;}
.connect-box2 input {width: 530px; height: 44px; padding: 10px 20px; margin-left: 95px; border: none; outline: none;
  background-color: #fff; 
}
.connect-box2 button{cursor: pointer;
  padding: 12px 20px; border: none;
  background-color: #a49580;
  color: #fff; font-size: 14px;
}
/* CONNECT-E */
/*   *********
MAIN-E
*********   */

/*   *********
FOOTER-S
*********   */
#footer {width: 100%; padding-bottom: 50px;
  background-color: #5d5549;
}
.foot-list {padding-top: 50px;}
.foot-list ul {width: 800px; margin: -70px 0 0 130px;}
.foot-list ul li {float: left;
  margin-right: 20px;
}
.foot-list ul li a {color: #fff; font-size: 14px;}
.foot-list h2 {width: 100px; height: 100px;
  background: url(../img/footer-logo.png) no-repeat;
  text-indent: -9999px;
}
.foot-layout {clear:both;
  width: 1200px; margin-top: 98px; padding: 28px 130px;
  background-color: #6c6458;
}
.foot-layout strong {color: #b2afaf; font-size: 18px;}
.foot-layout ul li, p {color: #b2afaf; font-size: 14px;}

/*   *********
FOOTER-E
*********   */