/* contents */
#contents { /*padding-top:170px*/ max-width:1920px; margin:0 auto } /* 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 { display:flex; align-items:center; gap:10px; padding:10px 15px 10px 0; position:relative; transition:all .3s ease-out }
.common_mc .common_btn_more:before { content:''; top:10px; left:0; position:absolute; width:1px; height:calc(100% - 20px); background:rgba(0,0,0,.1) }
.common_mc .common_btn_more:after { content:''; top:10px; right:0; position:absolute; width:1px; height:calc(100% - 20px); background:rgba(0,0,0,.1) }
.common_mc .common_btn_more .icon { position:relative; width:20px; height:20px; transform:translateX(10px); transition:all .3s ease-out }
.common_mc .common_btn_more .icon:before { content:''; top:calc(50% - 1px); left:0%; position:absolute; width:100%; transform:scaleX(.5); height:2px; background:#999; transition:all .6s ease-in-out }
.common_mc .common_btn_more .icon:after { content:''; top:0; left:calc(50% - 1px); position:absolute; width:2px; height:100%; transform:scaleY(.5);background:#999; transition:all .6s ease-in-out }
.common_mc .common_btn_more p { font-family:'nsn_2'; font-size:13px; line-height:1; color:rgba(0,0,0,.5); transition:all .5s ease-out }
.common_mc .common_btn_more:hover { padding:10px 15px 10px 15px }
.common_mc .common_btn_more:hover .icon { transform:translateX(0) rotate(-90deg) }
.common_mc .common_btn_more:hover p { color:rgba(0,0,0,1) }
.common_mc .common_btn_more:hover .icon:before { transform:scaleX(1); background:#ff0072 }
.common_mc .common_btn_more:hover .icon:after { transform:scaleY(1); background:#ff0072 }
@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_next { right:-100px }
.common_mc .btn_pn .arrow_wrap { top:50%; left:50%; transform:translate(-50%,-50%); position:absolute; width:60px; height:60px; border-radius:50%; border:1px solid rgba(0,0,0,.1); transition:all .3s ease-out }
.common_mc .btn_pn .arrow { border:solid #aaa; border-width:0 1px 1px 0; display:inline-block; vertical-align:middle; padding:10px; transition:all .3s ease-out }
.common_mc .btn_prev .arrow_wrap .arrow { top:50%; left:50%; transform:translate(-50%,-50%) rotate(135deg); position:absolute; margin-left:5px }
.common_mc .btn_next .arrow_wrap .arrow { top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); position:absolute; margin-left:-5px }

.common_mc .btn_pn:hover .arrow_wrap { border-color:rgba(0,0,0,.3) }
.common_mc .btn_pn:hover .arrow { border-color:var(--color-key) }
*/

/* ******************************************************* 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 }
}