/* CSS Document */

.bg_popup_index { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 9999;}
#boxVideo { margin: 0 0 80px;}
#boxVideo h2 { font-size: 20px; font-weight: bold; margin: 0 0 20px; text-align: center;}
#boxVideo .row{ margin-top: 80px;}
#boxVideo .list { display: flex; flex-wrap: wrap;}
#boxVideo .item { width: 31.25%; margin-right: 3.125%; font-size: 13px;}
#boxVideo .item:nth-of-type(3n) { margin-right: 0;}
#boxVideo .item:nth-of-type(n+4) { margin-top: 3.125%;}
#boxVideo .more { margin: 0 0 10px; cursor: default; position: relative;}
#boxVideo .more img { width: 100%;}
#boxVideo .more:before{content: ''; position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); border: 3px solid #fff; border-radius: 50%; box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);}
#boxVideo .more:after{content: '▶'; position: absolute; top: 50%; left: 50%; font-size: 20px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;}
#boxVideo .name { font-size: 18px; line-height: 1.5; text-align: left}
#boxVideo .name span { font-size: 15px; font-weight: normal;}

.content_popup.active { display: block;}
.content_popup { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 95vh; background-color: #fff; z-index: 99999; width: 94%; max-width: 960px; padding: 30px 30px 40px 30px; overflow-y: scroll;}
/* Popup */
.btnPop{cursor: pointer;}
.bg_popup_index { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 9999;}
.content_popup.active { display: block;}
.content_popup { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 95vh; background-color: #fff; z-index: 99999; width: 94%; max-width: 960px; padding: 30px 30px 40px 30px; overflow-y: scroll;}
.popup_video { margin: 0 0 15px;}
.popup_desc { font-size: 13px;}
.popup_desc li { margin-right: 1em; text-align: left;}
.popup_name { font-size: 23px; font-weight: bold;}
.popup_name span { font-size: 15px;}
.popup_sc,
.popup_shop{ font-size: 18px;}
.popup_close { width: 170px; text-align: center; border: 2px solid #00b0cc; border-radius: 18px; color: #00b0cc; font-size: 12px; padding: 5px 0 5px 10px; margin: 25px auto 0; cursor: pointer;}
.popup_close:after { content: ''; width: 9px; height: 9px; display: inline-block; margin: 0 0 0 20px; background: url("../../images/top/pop_close.png") no-repeat top left/100% auto;}
.popup_close:hover { opacity: .8;}
.popup_view{text-align: center;}

@media only screen and (max-width: 767px) {
	#boxVideo .item { width: 100%; margin: 0 0 30px;	}
.popup_video iframe { height: 56.25vw;}
}

@media only screen and (max-width: 480px) {
	#boxVideo .more:before{width: 12vw; height: 12vw;}
	#boxVideo .more:after{font-size: 5vw;}
	.content_popup { padding: 15px;}
}