
/* contents */
#contents { padding-top:170px } /* gnb height(pc) */
@media only screen and (max-width:1287px) {
	#contents { /*padding-top:60px*/ } /* gnb height(mobile) */
}

/* popup */
#popup_pc { top:0; left:0; position:absolute; width:100%; background:rgba(255,0,0,.5); line-height:0 }
#popup_mobile { top:0; left:0; position:absolute; width:100%; background:rgba(0,0,255,.5); line-height:0 }

/* more */
.common_mc .common_btn_more { position:relative; border:1px solid #e6ccc0; width:60px; height:60px; background:none; display:flex; justify-content:center; align-items:center }
.common_mc .common_btn_more p { font-family:'Barlow Condensed'; font-weight:200; font-size:13px; color:var(--color-key); letter-spacing:1px; padding-top:2px }
.common_mc .common_btn_more .icon { top:50%; left:50%; margin-top:-13px; margin-left:-13px; position:absolute; width:26px; height:26px; transform:scale(0); transition:all ease-out .3s }
.common_mc .common_btn_more .icon.on { transform:scale(1) }
.common_mc .common_btn_more .icon:before { content:''; top:calc(50% - 1px); left:0; position:absolute; width:100%; height:2px; background:var(--color-key) }
.common_mc .common_btn_more .icon:after { content:''; top:0; left:calc(50% - 1px); position:absolute; width:2px; height:100%; background:var(--color-key) }
@media only screen and (max-width:1023px) {
	.common_mc .common_btn_more { position:absolute; top:0; right:20px; width:48px; height:48px }
	.common_mc .common_btn_more .icon { margin-top:-12px; margin-left:-12px; width:24px; height:24px }
}

/* ******************************************************* swiper ******************************************************* */

.common_mc .swiper { line-height:0 }

/* swiper-pagination */
.common_mc .swiper-pagination { bottom:auto; position:relative; margin-top:60px; width:100% !important }
.common_mc .swiper-pagination-bullet { width:8px; height:8px; border-radius:4px; overflow:hidden; opacity:1; background:rgba(0,0,0,.1); transition:all ease-out .3s; cursor:pointer; margin:0 !important }
.common_mc .swiper-pagination-bullet:nth-child(n+2) { margin-left:8px !important }
.common_mc .swiper-pagination-bullet-active { width:40px; transition:all ease-out .3s; background:rgba(0,0,0,.5) }
@media only screen and (max-width:1023px) {
	.common_mc .swiper-pagination { bottom:auto; position:relative; margin-top:40px }
	.common_mc .swiper-pagination-bullet { width:6px; height:6px; border-radius:3px }
	.common_mc .swiper-pagination-bullet:nth-child(n+2) { margin-left:6px !important }
	.common_mc .swiper-pagination-bullet-active { width:30px }
}
@media only screen and (max-width:767px) {
	.common_mc .swiper-pagination { margin-top:20px }
}

/* prev/next */
.common_mc .btn_pn { top:0; position:absolute; width:100px; height:calc(100% - 0px); cursor:pointer }
.common_mc .btn_prev { left:-100px }
.common_mc .btn_prev .arrow { top:50%; left:50%; transform:translate(-50%,-50%) rotate(135deg); position:absolute; margin-left:10px }
.common_mc .btn_next { right:-100px }
.common_mc .btn_next .arrow { top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); position:absolute; margin-left:-10px }
.common_mc .btn_pn .arrow { border:solid #aaa; border-width:0 1px 1px 0; display:inline-block; vertical-align:middle; padding:20px	}

/* ******************************************************* popup ******************************************************* */

#popup_pc { display:block }
#popup_mobile { display:none }
@media only screen and (max-width:767px) {
	#popup_pc { display:none }
	#popup_mobile { display:block }
}

/* ******************************************************* special ******************************************************* */
#mc_special { display:block }
#mc_special_m { display:none }
@media only screen and (max-width:767px) {
	#mc_special { display:none }
	#mc_special_m { display:block }
}