@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 blog
==============================*/

/* common ----------*/
#contentsWrap .sec_inner { max-width: 93.4rem; margin: auto; padding: 0 4rem; }

/* mvp ----------*/
#mvp.blogDetail { width: 100%; aspect-ratio: 1 / 0.42; max-height: 62rem; }
#mvp .sec_inner { padding-bottom: 24rem; }
@media screen and (max-width:480px) { /* s */
	#mvp .sec_inner { padding-bottom: 4rem; }
}

/* blogList ----------*/
#blogList {}
#blogList .sec_inner { margin-top: -10rem; padding-bottom: 10rem; }
#blogList .blog_list { margin-top: 6rem; position: relative; z-index: 3; }
@media screen and (max-width:480px) { /* s */
	#blogList .sec_inner { margin-top: 0; padding-bottom: 6rem; }
}


/* blogDetail ----------*/
#blogDetail {}
#blogDetail .card_tx_ph { position: relative; z-index: 5; display: flex; gap: 7%; }
#blogDetail .card_tx_ph.-r { flex-direction: row-reverse; }
#blogDetail .card_tx_ph .pw { width: 46%;}
#blogDetail .card_tx_ph .tw { width: 47%; }
#blogDetail .inner { padding-top: 1px; }
#blogDetail .sec_inner { position: relative; z-index: 2; max-width: 99rem; margin-top: -22%; padding-bottom: 10rem; }
#blogDetail .cats {}
#blogDetail .date { margin-bottom: 2rem; font-size: 1.5rem; }
#blogDetail .pw { container-type: inline-size; text-align: center; }
#blogDetail .pw img { border-radius: 5.4cqw; }
#blogDetail .mpw { position: relative; }
#blogDetail .mpw::before { content: ""; position: absolute; bottom: calc(100% + 3rem); left: 25rem; display: block; width: 8.4rem; height: 11rem; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-image: url(../img/common/h2_bg_02.png); background-repeat: no-repeat; background-position: center; background-size: contain; }
#blogDetail h1 { position: relative; margin: 1.78em 0 1em; color: #4D70AE; font-size: 2.8rem; line-height: 1.75; }
#blogDetail h1::before, #blogDetail h1::after { content: ""; display: block; width: 100%; height: 0.6rem; background-image: url(../img/common/blog_line.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
#blogDetail h1::before { margin-bottom: 1rem; }
#blogDetail h1::after { margin-top: 1rem; }
#blogDetail h2 { margin-bottom: 0.6em; padding-bottom: 0.5em; border-bottom: dashed 3px #FEE683; color: #5AC7BF; font-size: 2.2rem; line-height: 1.54; }
#blogDetail h3 { margin-bottom: 0.8em; font-size: 1.8rem; }
#blogDetail h3 span { display: inline-block; padding: 0.2em 0.6em; color: #FFF; background-color: #97B0DB; }
#blogDetail hr { display: block; width: 100%; padding-top: 7%; border: none; }
#blogDetail a { font-weight: bold; }
#blogDetail a.movie_link { position: relative; display: block; }
#blogDetail a.movie_link img { position: relative; z-index: 1; }
#blogDetail a.movie_link::after { content: ""; position: absolute; filter: drop-shadow(8px 8px 20px rgba(0, 0, 0, 0.15)); top: calc(50% - 2.5rem); left: calc(50% - 2.85rem); z-index: 2; display: block; width: 5rem; height: 5.7rem; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='57' viewBox='0 0 50 57' fill='none'%3E%3Cpath d='M47.375 24.17C50.7083 26.0945 50.7083 30.9057 47.375 32.8302L7.625 55.7799C4.29166 57.7044 0.125 55.2988 0.125 51.4498V5.55043C0.125 1.70142 4.29167 -0.704199 7.625 1.2203L47.375 24.17Z' fill='white'/%3E%3C/svg%3E"); }
@media screen and (max-width:896px) { /* m */
	#blogDetail .card_tx_ph { flex-flow: column !important; gap: 4rem; }
	#blogDetail .card_tx_ph .pw, #blogDetail .card_tx_ph .tw { width: 100%; }
}
@media screen and (max-width:480px) { /* s */
	#blogDetail .sec_inner { margin-top: -10%; padding-bottom: 6rem; }
}