@charset "utf-8";

body {word-break:keep-all;}

#popup01 {position:fixed; top:100px; left:3rem; right:3rem; width:auto; z-index:1000; }
#popup01 .swiper-pagination {position:relative; width:100%; margin-top:10px; font-size:0;}
#popup01 .swiper-pagination-bullet {width:12px; height:12px; margin:0 5px; border:1px solid #fff; opacity:1; border-radius:100%; background:transparent; transition:background 0.3s;}
#popup01 .swiper-pagination-bullet-active {background:#fff;}
.popup img {width:100%;}
.popup_bg {position:fixed; top:0; left:0; right:0; bottom:0; z-index:111; background:rgba(0,0,0,0.6);}
.popup .pop_bottom {overflow:hidden; background:#222222;}
.popup .pop_bottom button {position:relative; float:left; width:50%; text-align:center; font-size:2.8rem; color:#fff; line-height:8rem;}
.popup .pop_bottom button+button:before {position:absolute; top:50%; left:0; width:1px; height:4rem; margin-top:-2rem; background:rgba(255,255,255,0.5); content:'';} 
.popup .btn_close_pop_top {position:absolute; top:-30px; right:0; width:20px; height:20px;}



#main_visual {overflow:hidden; position:relative; z-index:1;}
#main_visual img {width:100%;}
#main_visual .swiper-pagination {position:absolute; left:3rem; right:3rem; bottom:6rem; z-index:1000; width:auto; height:4px; background:rgba(255,255,255,0.3);}
#main_visual .swiper-pagination-bullet {width:100%; height:100%; border-radius:0; background:#fff; opacity:0; transition:all 0.4s;}
#main_visual .swiper-pagination-bullet-active {opacity:1;}
#main_visual .swiper-pagination.grid2 .swiper-pagination-bullet {width:50%;}
#main_visual .swiper-pagination.grid3 .swiper-pagination-bullet {width:33.333%;}
#main_visual .swiper-pagination.grid4 .swiper-pagination-bullet {width:25%;}
#main_visual .swiper-pagination.grid5 .swiper-pagination-bullet {width:20%;}
#main_visual .video_box {position:relative; padding-bottom:130.5%; border:1px solid #000;}
#main_visual .video_box video {position:absolute; top:0; left:0; width:100%; height:100%;}



.mtitle01 {padding:0 3rem; margin-bottom:4.7rem; color:#000; text-align:center; line-height:1.3;}
.mtitle01 h2 {overflow:hidden; position:relative; font-size:4.8rem; font-weight:700;}
.mtitle01 h2 span {display:inline-block; position:relative;}
.mtitle01 h2 span::before {position:absolute; top:50%; left:-1010px; width:1000px; height:1px; background:#cccccc; content:'';}
.mtitle01 h2 span::after {position:absolute; top:50%; right:-1010px; width:1000px; height:1px; background:#cccccc; content:'';}
.mtitle01 .stit {position:relative; margin-top:2.2rem; font-size:2.8rem; font-weight:300; color:#666666;}


.mtitle02 {margin-bottom:4.7rem; color:#fff; text-align:center; line-height:1;}
.mtitle02 h2 {overflow:hidden; position:relative; font-size:4.8rem; font-weight:700;}
.mtitle02 .stit {position:relative; margin-top:2rem; padding-top:2.2rem; font-size:2.8rem; font-weight:300; color:#fff;}
.mtitle02 .stit::before {position:absolute; top:0; left:50%; width:4rem; height:1px; margin-left:-2rem; background:#fff; content:'';}


.btn_a {margin-top:4rem; text-align:center;}
.btn_more {display:inline-block; overflow:hidden; position:relative; padding:0 7.8rem 0.2rem 5.5rem; border-radius:3.5rem; font-family: 'Roboto', sans-serif; font-size:3rem; color:#fff; line-height:7rem; letter-spacing:0; background:url('../images/main/ico_arr01.png') no-repeat right 4.6rem center #2a3245; background-size:1.2rem auto;}
.btn_more.type02 {border:1px solid #2ab9c1; color:#2ab9c1; background-color:transparent; background-image:url('../images/main/ico_arr02.png');}
.btn_more.type03 {color:#2a3b45; background-color:#fff; background-image:url('../images/main/ico_arr03.png');}


.swiper-pagination.type01 {position:relative; bottom:0; margin-top:3rem; font-size:0; text-align:center;}
.swiper-pagination.type01 .swiper-pagination-bullet {display:inline-block; position:relative; width:auto; height:auto; margin:0 2px; opacity:1; background:none;}
.swiper-pagination.type01 .swiper-pagination-bullet::before {display:block; width:26px; height:26px; border:1px solid #2ab9c1; border-radius:100%; opacity:0; content:''; transition:all 0.3s;}
.swiper-pagination.type01 .swiper-pagination-bullet::after {position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px; border-radius:100%; background:#cbcbcb; content:''; transition:all 0.3s;}
.swiper-pagination.type01 .swiper-pagination-bullet-active::before {opacity:1;}
.swiper-pagination.type01 .swiper-pagination-bullet-active::after {background:#2ab9c1;}


#real_story {padding:8rem 0;}
#real_story .swiper-slide {overflow:hidden;}
#real_story .list01 {overflow:hidden; margin:-3px; position:relative;}
#real_story .list01 * {box-sizing:border-box;}
#real_story .list01 li {float:left; width:25%; padding:3px;}
#real_story .list01 li.s02 {position:absolute; top:0px; left:25%; right:25%; width:50%;}
#real_story .list01 li.s03,
#real_story .list01 li.s05 {margin-left:50%;}
#real_story .list01 .img_wrap {position:relative; padding-bottom:95.3216%;}
#real_story .list01 .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
#real_story .list01 li.s02 .img_wrap {padding-bottom:95.4802%;}

#real_story .list02 {overflow:hidden; margin:-3px; position:relative;}
#real_story .list02 * {box-sizing:border-box;}
#real_story .list02 li {float:left; width:25%; padding:3px;}
#real_story .list02 li.s06 {position:absolute; bottom:0px; left:25%; right:25%; width:50%;}
#real_story .list02 li.s07,
#real_story .list02 li.s09 {margin-left:50%;}
#real_story .list02 .img_wrap {position:relative; padding-bottom:95.3216%;}
#real_story .list02 .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
#real_story .list02 li.s06 .img_wrap {padding-bottom:95.4802%;}

#real_story .swiper-pagination {position:relative; bottom:0; margin-top:3rem; font-size:0; text-align:center;}
#real_story .swiper-pagination-bullet {display:inline-block; position:relative; width:auto; height:auto; margin:0 2px; opacity:1; background:none;}
#real_story .swiper-pagination-bullet::before {display:block; width:26px; height:26px; border:1px solid #2ab9c1; border-radius:100%; opacity:0; content:''; transition:all 0.3s;}
#real_story .swiper-pagination-bullet::after {position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px; border-radius:100%; background:#dddddd; content:''; transition:all 0.3s;}
#real_story .swiper-pagination-bullet-active::before {opacity:1;}
#real_story .swiper-pagination-bullet-active::after {background:#2ab9c1;}

#m_event {padding:8rem 0; background:#f5f6f6;}
#m_event .mtitle01 h2 span::before,
#m_event .mtitle01 h2 span::after {background:#2ab9c1}
#m_event .swiper-container {margin:-30px -50%; padding:30px 0;}
#m_event .swiper-slide {position:relative; transition:box-shadow 0.4s;}
#m_event .swiper-slide-active {box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);}
#m_event .img_wrap {position:relative; padding-bottom:100%;}
#m_event .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
#m_event .txt {overflow:hidden; position:absolute; bottom:0; left:0; width:100%; height:7rem; padding:0 3rem; box-sizing:border-box; font-size:2.8rem; color:#fff; line-height:7rem; text-align:center; white-space:nowrap; text-overflow:ellipsis; background:rgba(38,52,53,0.85);}
#m_event .swiper-button-prev {left:33.33%; z-index:100; width:15px; height:26px; margin-top:-13px; margin-left:-18px; background:url('../images/main/event_btn_prev.png') no-repeat; background-size:contain;}
#m_event .swiper-button-next {right:33.33%; z-index:100; width:15px; height:26px; margin-top:-13px; margin-right:-18px; background:url('../images/main/event_btn_next.png') no-repeat; background-size:contain;}


#m_tv {padding:8rem 0; background:#2a3b45; background:url('../images/main/tv_bg.jpg') no-repeat center 7.8rem #2a3b45; background-size:100% auto;}
#m_tv .top {height:30rem;}
#m_tv .mvideo_box {margin:0 4.1rem;}
#m_tv #player {position:relative; padding-bottom:56.25%;}
#m_tv #player iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
#youtube_list {margin-top:5rem;}
#youtube_list .swiper-container {padding:0 4rem;}
#youtube_list .swiper-slide {width:19.5rem;}
#youtube_list .img_wrap {position:relative; padding-bottom:56.25%;}
#youtube_list .img_wrap::after {position:absolute; top:0; left:0; right:0; bottom:0; border:3px solid #2ab9c1; opacity:0; transition:opacity 0.3s; content:''}
#youtube_list .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
#youtube_list .swiper-slide.on .img_wrap::after {opacity:1;}
#youtube_list .swiper-slide .tit {color:#fff;}
#youtube_list .swiper-slide.on .tit {color:#2ab9c1;  }
#youtube_list .txt_box p {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.2;}
#youtube_list .tit {margin-top:2rem; padding-left:2px; font-size:2.6rem; color:#fff; font-weight:500; transition:color 0.3s;}
#youtube_list .txt {margin-top:1.2rem; padding-left:2px; font-size:2.4rem; color:#aeb8b9; font-weight:300;}


#m_bna {position:relative; padding:8rem 3rem; background:#ededed;}
#m_bna .more {position:absolute; top:8.7rem; right:3rem; padding-right:3rem; padding-bottom:0.5rem; font-size:3rem; color:#2ab9c1; background:url('../images/main/ico_arr02.png') no-repeat right center; background-size:1.2rem auto;}
#m_bna h2 {font-size:4.8rem; color:#000000; font-weight:700; line-height:1; text-align:left;}
#m_bna .menu {overflow:hidden; position:relative; margin:4rem 0;}
#m_bna .menu::before {position:absolute; top:50%; left:0; width:1px; height:3rem; margin-top:-1.5rem; background:#cccccc; content:'';}
#m_bna .menu li {float:left; position:relative; width:25%; padding:0 1rem;}
#m_bna .menu li::before {position:absolute; top:1.75rem; right:0; width:1px; height:3rem; background:#cccccc; content:'';}
#m_bna .menu a {display:block; display: -ms-flexbox!important; display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:8rem; padding:1rem 0; border-radius:2.5rem; font-size:2.4rem; color:#000000; line-height:1.1; text-align:center; word-break:keep-all;}
#m_bna .menu a span {width:100%;}
#m_bna .menu li.on a {color:#fff; background:#2ab9c1;}
#m_bna .swiper-slide {position:relative;}
#m_bna .bna_img {overflow:hidden;}
#m_bna .img_wrap {float: left; width: 50%; position: relative; padding-bottom: 56.66%;}
#m_bna .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
#m_bna .swiper-slide a {position:absolute; top:0; left:0; right:0; bottom:0;}
#m_bna .login_box > div {position:absolute; top:0; right:50%; bottom:0; width:50%; padding-top:9.5rem; font-size:2.6rem; color:#fff; line-height:3.2rem; font-weight:300; text-align:center; background:rgba(55,65,65,0.8);}
#m_bna .login_box em {font-weight:500;}
#m_bna .login_box p {width:13rem; margin:2rem auto 0; font-family: 'Roboto', sans-serif; font-size:2.4rem; line-height:4rem; letter-spacing:0em; border:1px solid #fff;}
#m_bna .cont {display:none;}
#m_bna .cont.on {display:block;}


#afthetic {position:relative; padding-bottom:134%; background:url('../images/main/afthetic_bg.jpg') no-repeat center; background-size:cover;;}
#afthetic > .mbtn {position:absolute; top:43%; left:10%; right:10%; padding-bottom:26%;}
#afthetic * {box-sizing:border-box;}
#afthetic .mbtn_area {overflow:hidden; position:absolute; left:3rem; right:3rem; bottom:6rem;}
#afthetic .mbtn_area .mbtn {float:left; width:31.8%; padding:3rem 1.5rem; text-align:center;; color:#fff; text-align:center; border:1px solid #fff; line-height:1; background:rgba(255,255,255,0.05);}
#afthetic .mbtn_area .mbtn+.mbtn {margin-left:2.3%;}
#afthetic .mbtn_area em {display:block; font-size:2.8rem; font-weight:500; line-height:1.2;}
#afthetic .mbtn_area span {display:inline-block; margin-top:1.4rem; padding-right:2.4rem; position:relative; font-family: 'Roboto', sans-serif; font-size:2.4rem; font-weight:300; letter-spacing:0em;}
#afthetic .mbtn_area span:after {position:absolute; top:50%; right:0; width:1.5rem; height:1px; background:#fff; content:''; transition:all .4s;} 


#m_review {padding:8rem 0;}
#m_review .inwrap {padding:0 3rem;}
#m_review .mtitle01 h2 span::before,
#m_review .mtitle01 h2 span::after {background:#2ab9c1}

#dragstage_area {position:relative; margin:auto; padding-bottom:70%;}
#dragstage_area .dragstage {position:absolute; top:0; left:0; width:100%; height:100%;}
#dragstage_area .dragstage .img {position:relative; width:100%; height:100%; background:#dddddd;}
#dragstage_area .dragstage img {position: absolute; top:0; left:50%; height: 100%; width: auto !important;  max-width:none; transform:translateX(-50%);}
#dragstage_area .dragstage .stageimage {position:absolute;top:0;left:0;z-index:1;}
#dragstage_area .dragstage .stageimage img {opacity:1;}
#dragstage_area .dragstage .coverimage {overflow:visible !important; position:absolute;top:0;left:0;z-index:3; width:100%; height:100%; max-width:none;}
#dragstage_area .dragstage .coverimage .img {position:absolute; top:0; left:0; width:auto !important; height:100%; clip: rect(0px, 328px, auto, 0px);}
/* .dragstage .coverimage img {position: absolute; height: 100%; width: 100%;  max-width:none; clip: rect(0px, 328px, auto, 0px);} */
#dragstage_area .dragstage .coverimage:hover{cursor:e-resize;}
#dragstage_area .dragstage .active .handle {position:absolute; top:0; right:0; width:10px; bottom:0; z-index:100; transition: opacity .4s; -webkit-transition: opacity .4s;}
#dragstage_area .dragstage .active .handle:before {position:absolute; top:0; right:0; width:3px; height:100%; background:#fff; content:'';}
#dragstage_area .dragstage .active .handle:after {position:absolute; top:50%; left:0px; width:30px; height:30px; margin-top:-15px; margin-left:-6px; background:url('../images/main/icon_mouse.png') no-repeat; background-size:contain; content:''; transition: opacity .4s; -webkit-transition: opacity .4s;}
#dragstage_area .dragstage .active .handle.on {opacity:1;}
#dragstage_area .dragstage .active .handle > span{display:block;font-size:12px; color:#fff; margin-top:90px;text-align:Center}
#dragstage_area .dragstage .active .handle.drag_start:after {opacity:1;}

#m_review_swiper {margin-top:4rem;}
#m_review_swiper .swiper-slide {position:relative; width:14rem; height:14rem;}
#m_review_swiper .img_wrap {overflow: hidden; position: relative; padding-bottom: 100%;}
#m_review_swiper .img_wrap img {position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%);}
#m_review_swiper .img_wrap::before {position:absolute; top:0; left:0; right:0; bottom:0; z-index:4; opacity:0; transition:opacity 0.4s; border:3px solid #2ab9c1; content:'';}
#m_review_swiper .swiper-slide.on .img_wrap::before {opacity:1;}


#m_board {padding:6rem 3rem 6rem; background:#eceded;}
#m_board h2 {margin-bottom:3rem; font-size:3.4rem; color:#000; font-weight:700; line-height:1;}
#m_board ul {padding:2.2rem 4rem; background:#ffffff;}
#m_board li+li {border-top:1px solid #e1e1e1;}
#m_board li {position:relative; font-size:2.6rem; line-height:8rem;}
#m_board li a {display:block; margin-right:15rem; overflow:hidden; color:#000000; white-space:nowrap; text-overflow:ellipsis;}
#m_board .online {margin-top:6rem;}
#m_board .online li a {margin-left:14rem;}
#m_board li .catagory {position:absolute; top:0; left:0; color:#1fb1b9; width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#m_board li .date {position:absolute; top:0; right:0; color:#777777;}
#m_board .cont {position:relative;}
#m_board .more {overflow:hidden; position:absolute; top:0.2rem; right:0; width:1.7rem; height:2.7rem; white-space:nowrap; text-align:left; text-indent:-999px; background:url('../images/main/ico_arr04.png') no-repeat center; background-size:contain;}