@charset "utf-8";

#mVisual {position:relative; width:100%; height:100vh; overflow:hidden; }
.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100%; outline:none; }

#mVisual .mv_slider { background-color: #ffdc00; background-repeat: no-repeat; background-size: cover; background-position: center center; }
#mVisual.mVisual .mv_slider {background-color: #c81313;}

#mVisual .mv_slider.mv1 { background-image:url('/images/main/.jpg'); }
#mVisual .mv_slider.mv2 { background-image:url('/images/main/m_visual2BG.jpg'); background-position: center bottom;
                                        background-size: 100% auto;}
#mVisual .mv_slider.mv3 { background-image:url('/images/main/m_visual3BG.jpg'); }
#mVisual .mv_slider.mv4 { background-image:url('/images/main/m_visual4BG.jpg'); background-position: center bottom;
background-size: 100% auto; }
#mVisual .mv_slider.mv5 { background-image:url('/images/main/m_visual6BG.jpg'); background-position: center bottom;
background-size: 100% auto; }
#mVisual .mv_slider.mv6 { background-image:url('/images/main/m_visual7BG.jpg'); background-position: center bottom;
background-size: 100% auto; }
#mVisual .mv_slider.mv7 { background-image:url('/images/main/m_visual8BG.jpg'); background-position: center bottom;
background-size: 100% auto; }
#mVisual .mv_slider.mv8 { background-image:url('/images/main/m_visual9BG.jpg'); background-position: center bottom; background-size: 100% auto; }
#mVisual .mv_slider.mv9 { background-image:url('/images/main/m_visual10BG_220704.jpg'); background-position: center bottom; background-size: 100% auto; }
#mVisual .mv_slider.mv10 { background-image:url('/images/main/m_visual11BG_220704.jpg'); background-position: center bottom; background-size: 100% auto; }
#mVisual .mv_slider.mv11 { background-image:url('/images/main/m_visual12BG_220704.jpg'); background-position: center bottom; background-size: 100% auto; }

#mVisual .mv_slider .mv-in { position: relative; width: 100%; height: 100%; margin: 0 auto; max-width: 1600px; }
#mVisual .mv_slider .mv-txt { position: relative; display:table; width:90%; height:100%; margin:0 auto; z-index:100; color:#000; padding-top: 7%; }
#mVisual .mv_slider .mv-txt > div { display:table-cell; vertical-align:middle; box-sizing:border-box; position: relative;  }
#mVisual .mv_slider .mv-txt h3 { font-size: 4.375em; font-family: 'yg-jalnan'; line-height: 1.0em; }
#mVisual .mv_slider .mv-txt .t1 { font-size: 3.125em; margin: 0.8em 0 0.3em; }
#mVisual .mv_slider .mv-txt .t2 { font-size: 1.25em; font-family: 'NEXON Lv2 Gothic'; opacity: 0.8; font-weight: 500; line-height: 1.7;}

#mVisual .mv_slider .mv-img { position: absolute; right: 0; top:25%; width: 50%; }
#mVisual .mv_slider .mv-img img { max-width: 100%; z-index:1; }

#mVisual .mv_slider .mv-txt img { max-width: 50%; display: inline-block; }

#mVisual .mv_slider.mv3 .mv-in,
#mVisual .mv_slider.mv4 .mv-in { max-width: 100% }


@media all and (max-width:1280px) {
  #mVisual .mv_slider .mv-txt { padding-top:0; }
  #mVisual .mv_slider .mv-txt h3 { font-size: 3.8em; }
  #mVisual .mv_slider .mv-txt .t1 { font-size: 2.8em; }

  #mVisual .mv_slider.mv2,
  #mVisual .mv_slider.mv4{ background-size: cover; background-position: center; }
 #mVisual .mv_slider.mv5{ background-size: cover; background-position: 70%; }
 #mVisual .mv_slider.mv6{ background-size: cover; background-position: 70%; position: relative;}
    #mVisual .mv_slider.mv6::after{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.4); display: block;}
  #mVisual .mv_slider.mv6 .mv-txt > div { text-align: center; }
    
    #mVisual .mv_slider.mv7{ background-size: cover; background-position: 70%; position: relative;}
  #mVisual .mv_slider.mv7 .mv-txt > div { text-align: center; }
    
    #mVisual .mv_slider.mv8{ background-size: cover; background-position: 50%; position: relative;}
    #mVisual .mv_slider.mv9{ background-size: cover; background-position: 50%; position: relative;}
    #mVisual .mv_slider.mv10{ background-size: cover; background-position: 48%; position: relative;}
    #mVisual .mv_slider.mv11{ background-size: cover; background-position: 50%; position: relative;}
}

@media all and (max-width:976px) {
  #mVisual .mv_slider.mv1 .mv-txt { height:50%; }
  #mVisual .mv_slider.mv1 .mv-txt > div { vertical-align: bottom; }
  #mVisual .mv_slider.mv1 .mv-img { top: inherit; top: 52%; width: 70%; }
}

@media all and (max-width:568px) {
  #mVisual .mv_slider .mv-txt h3 { font-size: 3.4em; }
  #mVisual .mv_slider .mv-txt .t1 { font-size: 2.4em; }
  #mVisual .mv_slider .mv-txt .t2 { font-size: 1.2em; line-height: 1.4; }

  #mVisual .mv_slider .mv-txt img { max-width: 85%; }

  #mVisual .mv_slider.mv4 { background-position: 30% center; }
}

@media all and (max-width:480px) {
  #mVisual .mv_slider .mv-txt h3 { font-size: 3em; }
  #mVisual .mv_slider .mv-txt .t2 br { display: none; }
  #mVisual .mv_slider .mv-img { width: 80%; }
}

@media all and (max-width:380px) {
  #mVisual .mv_slider .mv-txt { font-size: 0.85em; }
}

/*메인컨텐츠 공통*/
.more { color:#c81313; font-family: 'Jost'; display: block; }


#mIntro { position: relative; width: 100%; height: 100vh; display: table; overflow: hidden; }
#mIntro > div { position: relative; display: table-cell; width: 50%; height: 100%; vertical-align: middle;}

#mIntro #mMenu { position: relative; text-align: center; vertical-align: bottom; }
#mIntro #mMenu h3 { position: absolute; left: 5%; top: 5%; color:#c81313; padding-bottom: 100px;
                                  writing-mode : vertical-rl; -webkit-writing-mode: tb-lr; -ms-writing-mode: tb-lr; }
#mIntro #mMenu h3::after { content: ''; width: 1px; height: 70px; background: #c81313;
                                          position: absolute; bottom: 0; left: 50%; margin-left: -0.5px; }
#mIntro #mMenu .menuSlide { position: relative; width: 50vw; height: 100%; }
#mIntro #mMenu .menuSlide img { display: inline-block; margin-top: -7%; max-width: 70%; }
#mIntro #mMenu .menuSlide .item { padding: 10vw 0 0; }
#mIntro #mMenu .menuSlide .item h4 { color:#000; font-size: 3.43em; font-weight: 500; }
#mIntro #mMenu .menuSlide .item .t1 { font-size: 1.125em; color:#787878; margin-bottom: 1em; }
#mIntro #mMenu .menuSlide .item .t2 { font-size: 9.375em; color:#f6f6f6; font-weight: 900; font-family: 'Jost';
                                                          letter-spacing: -0.04em; line-height: 1.0em; }

#mIntro #mComm { background: #f8f8f8; padding: 5%; color:#000; }
#mIntro #mComm > div { position: relative; width: 100%; height: 365px; padding: 8% 9%; box-sizing: border-box; }
#mIntro #mComm > div h3 { font-size: 1.5em; margin-bottom: 0.7em;  }
#mIntro #mComm #mOpen { background: #fff; border: 3px solid #000; margin-bottom: 20px; }
#mIntro #mComm #mOpen .openSlide .item { overflow: hidden; margin:0; display: block;}
#mIntro #mComm #mOpen .openSlide .img,
#mIntro #mComm #mOpen .openSlide dl { display: inline-block; vertical-align: middle; }
#mIntro #mComm #mOpen .openSlide .img { max-width: 45%; border-radius: 100%; overflow: hidden; }
#mIntro #mComm #mOpen .openSlide .img img { max-width: 100%; }
#mIntro #mComm #mOpen .openSlide dl { max-width: 52%; padding: 0 5%; font-family: 'NEXON Lv2 Gothic'; box-sizing: border-box; }
#mIntro #mComm #mOpen .openSlide dl dt { font-size: 1.375em; font-weight: 600; }
#mIntro #mComm #mOpen .openSlide dl dd { font-size: 1.125em; color:#787878; }
#mIntro #mComm #mOpen .openSlide dl dd.btn { margin-top: 1.5em; font-size: 1.0em; }


#mIntro #mComm #mNotice { color:#fff; background: url("/images/main/noticeBG.png") no-repeat center; background-size: cover; }
#mIntro #mComm #mNotice .tit { position: relative; margin-bottom: 1.5em; }
#mIntro #mComm #mNotice .more { position: absolute; right:0; top:0; }
#mIntro #mComm #mNotice .bdList li { overflow: hidden;  margin: 1em 0; font-size: 1.125em; font-family: 'NEXON Lv2 Gothic'; }
#mIntro #mComm #mNotice .bdList li a { color:#fff; line-height: 1.0em; font-weight: 500; }
#mIntro #mComm #mNotice .bdList li a span { float: right; opacity: 0.7; }


@media all and (max-width:1780px) {
  #mIntro #mComm > div { height: auto; }
}

@media all and (max-width:1599px) {
  #mIntro { height: auto; }
  #mIntro #mMenu .menuSlide .item { padding: 6vw 0 4vw; }
  #mIntro #mMenu .menuSlide .item .t2 { font-size: 9vw; }
  #mIntro #mComm #mOpen { margin-bottom: 10px; }
  #mIntro #mComm #mOpen .openSlide dl { padding: 0 0 0 5%; }
  #mIntro #mComm #mOpen .openSlide dl dt { font-size: 1.2em; }
  #mIntro #mComm #mOpen .openSlide dl dd { font-size: 1em; }
  #mIntro #mComm #mOpen .openSlide dl dd.btn { margin-top: 0.5em; }
  #mIntro #mComm #mNotice .bdList li { margin: 0.7em 0; }
}

@media all and (max-width:1280px) {
  #mIntro #mMenu .menuSlide .item h4 { font-size: 3.2em; }
  #mIntro #mComm #mOpen .openSlide .img { max-width: 40%; }
}

@media all and (max-width:1080px) {
  #mIntro > div { display: block; width: 100%; }
  #mIntro #mMenu .menuSlide { width: 100vw; }
  #mIntro #mMenu .menuSlide .item { padding: 8vw 0 5vw; }
  #mIntro #mMenu .menuSlide img { max-width: 50%; }

  #mIntro #mComm { padding:0; }
  #mIntro #mComm > div { width: 50vw; display: table-cell; padding: 4%; }
  #mIntro #mComm #mOpen { border-width: 2px; margin-bottom:0; }
  #mIntro #mComm #mOpen .openSlide .img { max-width: 35%; }
  #mIntro #mComm #mOpen .openSlide dl { max-width: 47%; }
  #mIntro #mComm #mNotice .bdList li { margin: 0.5em 0; font-size: 1em; }
  #mIntro #mComm #mNotice .bdList li a { font-weight: 400; }
}

@media all and (max-width:767px) {
  #mIntro #mMenu .menuSlide .item { padding: 8vw 0 5vw; }
  #mIntro #mMenu .menuSlide img { max-width: 60%; }

  #mIntro #mComm > div { width: 100%; display: block; padding: 6%; }
  #mIntro #mComm #mOpen .openSlide .img { max-width: 20%; }
  #mIntro #mComm #mOpen .openSlide dl { max-width: 75%; }
}

@media all and (max-width:640px) {
  #mIntro #mMenu .menuSlide .item { padding: 3% 0 2%; }
}

@media all and (max-width:480px) {
  #mIntro #mMenu h3 { left: 3%; top: 3%; color:#ef801c; padding-bottom: 65px; font-size: 1em; }
  #mIntro #mMenu h3::after { height: 45px; }

  #mIntro #mMenu .menuSlide .item h4 { font-size: 2.6em; }
  #mIntro #mMenu .menuSlide .item .t1 { font-size: 1.125em; }
  #mIntro #mMenu .menuSlide .item .t2 { font-size: 18vw; }
  #mIntro #mMenu .menuSlide img { max-width: 65%; }
}

#mVod { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #ffdc00; padding: 7% 0; box-sizing: border-box; }
#mVod.mVod{background: #c81313;}
#mVod::before { left:0; bottom:0; background: url("/images/main/vodBG_left.png") no-repeat left bottom; }
#mVod.mVod::before { left:0; bottom:0; background: url("/images/main/vodBG_left2.png") repeat-y left top; }
#mVod::after { right:0; top:0; background: url("/images/main/vodBG_right.png") no-repeat right top; }
#mVod.mVod::after { right:0; top:0; background: url("/images/main/vodBG_right2.png") repeat-y right top; }
#mVod::before,
#mVod::after { content: ''; width: 50%; height: 100%; position: absolute; background-size: 100% auto; }
#mVod .s-inner > div { position: relative; float: left; z-index: 9;}

.twirl_txt { width: 456px; height: 456px; }
.twirl_txt.twirl2 { width: 371px; height: 372px; }
.twirl_txt img { position: absolute; top:0; left:0; width: 100%;  }
.twirl_txt.twirl2 img{left: 60px;}
.twirl_txt img.twirl { -webkit-animation:twirlTxt 15s linear infinite forwards; animation:twirlTxt 15s linear infinite forwards }

@keyframes twirlTxt {
    0% {
        -webkit-transform:rotateZ(0deg);
		    transform:rotateZ(0deg);
    }
    100% {
    	-webkit-transform:rotateZ(-360deg);
    	transform:rotateZ(-360deg);
    }
}

#mVod .vodWrap { padding: 5% 3%; }
#mVod .vodWrap.vodWrap2 { padding: 2% 5%; }
#mVod .vod { position: relative; width: 850px; height: 478px; margin: 0 12%; z-index: 8; }
#mVod .vodCover { position: absolute; left:0; top:0; z-index:10; width: 100%; height: 100%; cursor: pointer; box-sizing: border-box;
                           				background: url("/images/main/vod.png") no-repeat center; background-size: cover; }
#mVod .vodPlay { position: absolute; left:0; top:0; width: 100%; height: 100%; overflow: hidden; }
#mVod .vodWrap .typo { position: relative; font-size: 6em; font-family: 'yg-jalnan'; color:#fff; line-height: 1.1em; margin-top: -1.2em; z-index: 10; letter-spacing: -0.03em; text-align: left; }
#mVod.mVod .vodWrap .typo {font-family: 'GmarketSans', 'NEXON Lv2 Gothic', 'Noto Sans KR', 'Noto Sans Korean', sans-serif; font-weight: 700; font-size: 5em; margin-top: -1em; margin-left: 0.5em;}


@media all and (max-width:1599px) {
  #mVod { height: auto; }
  .twirl_txt { width: 24vw; height: 24vw; margin-left: 3%; }
  .twirl_txt.twirl2 { width: 24vw; height: 24vw; margin-left: 3%; }
  #mVod .vodWrap { padding-bottom:2%; }
  #mVod .vod { width: 53vw; height: 30vw; margin: 0 8%; }
  #mVod .vodWrap .typo { font-size: 6vw; }
  #mVod.mVod .vodWrap .typo { font-size: 4.6vw; }
}
@media all and (max-width:969px){
	#mVod.mVod::before,
	#mVod.mVod::after{display: none;}
	.twirl_txt.twirl2 img{left: 0;}
}

@media all and (max-width:767px) {
  #mVod { text-align: center; padding: 7% 3% 10%; }
  #mVod .s-inner .twirl_txt { position: absolute; left:0; top:0; z-index:100; margin-left:0; width: 28vw; height: 28vw; }
  #mVod .s-inner .vodWrap { float: none; margin: 0 auto; display: inline-block; padding-top: 18%; }
  #mVod .vod { width: 80vw; height: 45vw; margin: 0;  }
  #mVod .vodWrap .typo { font-size: 8vw; margin-left: -0.8em; }
  #mVod.mVod .vodWrap .typo { font-size: 7.2vw; margin-left: -0.8em; }
}




#mSns { position: relative; padding: 6% 0 4%; color:#000; overflow: hidden;  }
#mSns.mSns {padding: 7% 0 5%; }
#mSns::before { content: ''; width: 800px; height: 100px; position: absolute;left:0; top: 29%; background: #ffdc00; }
#mSns.mSns::before { content: ''; display: none}
#mSns.mSns .s-inner{display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1920px; padding-left: 180px;}
#mSns.mSns .s-inner .txt{width: 500px;}
#mSns.mSns .s-inner .list{width: calc(100% - 600px);}
#mSns.mSns .s-inner .list .insta{width: auto;}
#mSns.mSns .s-inner .swiper{margin-right: 0;}
#mSns.mSns .s-inner .swiper img{width: 100%;}
#mSns h3 { font-size: 2.5em; letter-spacing: -0.04em; margin-bottom: 0.5em; }
#mSns.mSns h3 { font-size: 4em; letter-spacing: -0.04em;}
#mSns.mSns h4 { font-size: 2em; letter-spacing: -0.04em;}
#mSns.mSns p{font-size: 1.5em;}
/*#mSns.mSns .list{display: flex;}*/
#mSns .snsBox { position: relative; font-family: 'Jost', sans-serif; }
#mSns .snsBox::before { content: ''; width: 162px; height: 162px; position: absolute; right:5%; top: -125px;
                                    background: url("/images/main/smile_sticker.png") no-repeat center; z-index:-1; }
#mSns .snsBox a { display: block; color:#000; }
#mSns .snsBox dl { width: 50%; float: left; padding: 4%; border:3px solid #000; box-sizing: border-box;
                            background-color: #fff; background-repeat: no-repeat; background-position: 92% center; }
#mSns .snsBox dl.instagram { background-image: url("/images/main/sns_instagram.png"); }
#mSns .snsBox dl.twitter { border-left-width:0; background-image: url("/images/main/sns_twitter.png"); }
#mSns .snsBox dl dt { font-size: 1.875em; font-weight: 700; margin-bottom: 0.3em; }
#mSns .snsBox dl dd { font-size: 1.375em; font-weight: 500; }

@media all and (max-width:1600px){
	#mSns.mSns .s-inner{padding-left: 4%;}
	#mSns.mSns .s-inner .list{width: calc(100% - 360px)}
}

@media all and (max-width:1280px) {
  #mSns { padding: 6% 0 5%; }
  #mSns::before { width: 60vw; height: 6vw; }
	#mSns .snsBox::before { width: 10vw; height: 10vw; top:-8vw; background-size: 100% auto; }
  #mSns .snsBox dl { background-size: 15% auto; }
}

@media all and (max-width:976px) {
  #mSns::before { width: 70vw; height: 8vw; top: 27%;  }
  #mSns h3 { font-size: 2.2em; }
#mSns.mSns .s-inner{flex-direction: column; padding-left: 2%;}
#mSns.mSns .s-inner .txt{width: 100%;}
#mSns.mSns .s-inner .list{width: 100%; margin-top: 30px;}
#mSns.mSns .s-inner .list .insta{max-width: 240px;}
	#mSns.mSns h3 { font-size: 3.25em; margin-bottom: 10px;}
	#mSns.mSns h4 { font-size: 2em; letter-spacing: -0.04em;}
	#mSns.mSns p{font-size: 1.25em;}
}

@media all and (max-width:767px) {
  #mSns { padding: 8% 2% 6%; }
  #mSns.mSns { padding: 10% 2% 8%; }
  #mSns::before { top: 32%; width: 55vw; }
  #mSns h3 { max-width: 50%; line-height: 1.0em; }
  #mSns .snsBox::before { width: 14vw; height: 14vw; top:-12vw; right: 3%; }
	#mSns.mSns h3 { font-size: 2.9em; margin-bottom: 10px;}
	#mSns.mSns h4 { font-size: 1.75em; letter-spacing: -0.04em;}
	#mSns.mSns .s-inner .list .insta{max-width: 180px;}
}

@media all and (max-width:568px) {
  #mSns { padding: 10% 2% 8%; }
  #mSns.mSns { padding: 12% 2% 10%; }
  #mSns::before { top: 24%; }
  #mSns .snsBox::before { width: 16vw; height: 16vw; top:-14vw; }
  #mSns .snsBox dl { width: 100%; }
  #mSns .snsBox dl.twitter { border-left-width: 3px; border-top-width:0; }
  #mSns .snsBox dl { background-size: 12% auto; }
	#mSns.mSns .s-inner .list .insta{max-width: 150px;}
}

@media all and (max-width:480px) {
  #mSns h3 { font-size: 1.8em; max-width: 60%; }
  #mSns .snsBox dl { border-width: 2px; padding: 5%;  }
  #mSns .snsBox dl.twitter { border-left-width: 2px; }
  #mSns .snsBox dl dt { font-size: 1.5em; margin-bottom: 0.1em; }
  #mSns .snsBox dl dd { font-size: 1.1em;  }
	#mSns.mSns .s-inner .list .insta{max-width: 130px;}
}