@charset "utf-8";

/* acti */
.wrap-magazine2 {position: relative; display: flex; flex-direction: column; background: #8C7468 url('../images/bg-magazine-obj.png') no-repeat bottom left;}
.wrap-magazine2 .wrap-magazine-category{max-width:37rem; width:100%; margin:0 auto; position: absolute; top: 20rem; z-index: 2;}
.wrap-magazine2 .wrap-magazine-list{position: relative; width: 20rem;}
.wrap-magazine2 .wrap-magazine-cate-button{width: 100%; background-color:#594246; display: flex; align-items: center; height: 6rem; padding: 1rem 1.5rem; font-size: 2rem; color: white; font-family: pm; position: relative;}
.wrap-magazine2 .wrap-magazine-cate-button::after{content:""; display: block; position: absolute; right: 1rem; top: 50%; margin-top: -.6rem; width: 1.4rem; height: 1.2rem; background: url(../images/ic-cate-arrow.png) no-repeat center center; transform: rotate(180deg); transition: all .35s;}
.wrap-magazine2 .wrap-magazine-cate-button.active::after{transform: rotate(0deg);}
.wrap-magazine2 .wrap-magazine-list ul{position: absolute; left: 0; top: 100%; width: 100%; background-color: white; z-index: 11; overflow: auto; height: 0; max-height: 0;}
.wrap-magazine2 .wrap-magazine-list ul.active{height: auto; max-height: 20rem}
.wrap-magazine2 .wrap-magazine-list li button{font-size: 1.6rem; color: #111111; padding: 1rem; display: block; width: 100%; text-align: left; position: relative}
.wrap-magazine2 .wrap-magazine-list li button:hover{color: #E75B74;}

.wrap-magazine2 .frame {max-width:160rem; width:100%; margin:0 auto; padding: 11.5rem 0 10.8rem 0;}
.wrap-magazine2 .frame .magazine-wrap{display: none; }
.wrap-magazine2 .frame .magazine-wrap.active{display: flex;}
.wrap-magazine2 .title {position: relative; display: flex; flex-direction: column; flex-shrink:0; max-width:44rem; width: 100%; margin-bottom: 5.8rem; padding-right: 7rem; }
.wrap-magazine2 .title h2 {font-family: pb; font-size: 5rem; color:#fff; line-height: 1;}
.wrap-magazine2 .title p {margin-top:4.8rem; font-family: pl ;font-size: 3rem; line-height: 4.5rem; color:#fff;}
.wrap-magazine2 .row{position: relative; display: inline-block; width:calc(100% - 44rem);}
.wrap-magazine2 .slider {overflow:hidden; margin:0 auto; position: relative; min-height:52rem; margin:0 -2rem;}
.wrap-magazine2 .slider li {padding:0 2rem;}
.wrap-magazine2 .subject img {width:100%;}
.wrap-magazine2 .text-box p {margin-top: 2rem; font-family: prGov; font-size: 2.2rem; text-align: center; color:#FFECD6;}
.wrap-magazine2 .sj span {background-image: linear-gradient(#FFECD6, #FFECD6); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.wrap-magazine2 a:hover .sj span {background-size:100% 0.1rem;}
.wrap-magazine2 .more {display: block; width: 3rem; height: 3rem; margin-top:13.7rem; background:url('../images/ic-magazine-more.png') no-repeat center; text-indent: -9999rem; transition:all .3s;}
.wrap-magazine2 .more.en {margin-top:9.7rem;}
.wrap-magazine2 .more:hover {transform:rotate(180deg);}
.wrap-magazine2 .prevnext {position: absolute; bottom:0; left:0; font-size: 0;}
.wrap-magazine2 .prevnext button {position: relative; width:2.6rem; height:4.6rem; text-indent: -9999rem; }
.wrap-magazine2 .prev {margin-right: 4.2rem; background:url('../images/ic-magazine-prev.png') no-repeat center;}
.wrap-magazine2 .prev::before {content: ''; position: absolute; right:-4.1rem; top:0; width: 0.2rem; height:100%; background:rgba(255,255,255,0.2);}
.wrap-magazine2 .next {margin-left: 4rem; background:url('../images/ic-magazine-next.png') no-repeat center;}
.wrap-magazine2 .prev:hover {background:url('../images/ic-magazine-prev-on.png') no-repeat center;}
.wrap-magazine2 .next:hover {background:url('../images/ic-magazine-next-on.png') no-repeat center;}
.wrap-magazine2 .nodata {display: flex; align-items: center; justify-content: center; min-height:50rem; font-size: 1.8rem; text-align: center; color:#222;}
/* .wrap-magazine2 .row .prevnext {display: none;} */
.wrap-magazine2 .row .prevnext {width:44rem; left:unset; right:100%; display:flex;}
@media screen and (max-width: 1680px) {
    .wrap-magazine2 {padding:0 4rem;}
	/* .wrap-magazine2 .wrap-magazine-category{left: calc(50% + 4rem);} */
    /* .wrap-magazine2 .title{ padding: 0 4rem;}    */
}
@media screen and (max-width:1500px) {
    /* .wrap-magazine2 .more {margin-top:2rem;} */
    .wrap-magazine2 .title p {font-size: 2.5rem; margin-top: 3.5rem; line-height: 1.5;}
}
@media screen and (max-width: 1200px) {
    /* .wrap-magazine2{min-height: 75rem;} */
	.wrap-magazine2 .frame {padding:0;}
	.wrap-magazine2 .wrap-magazine-category {top:5rem;}
    .wrap-magazine2 {min-height: 75rem; background-size:contain;}
    .wrap-magazine2 .frame .magazine-wrap{flex-direction: column; padding: 13rem 0 4rem;}
    .wrap-magazine2 .title h2{font-size: 4rem;}
    .wrap-magazine2 .title p {display: none;}
    .wrap-magazine2 .row {width:29rem; margin: 0 auto;}
    .wrap-magazine2 .title {padding-right: 0;}
    /* .wrap-magazine2 .title .prevnext {display: none;} */
    .wrap-magazine2 .row .prevnext {position:static; display: block;}
    .wrap-magazine2 .row .prevnext button{margin-top: -7rem;}
    .wrap-magazine2 .row .prevnext button { position: absolute; top: 50%; width:2.6rem; height:4.6rem; margin-top:-7rem; text-indent: -9999rem;}
    .wrap-magazine2 .row .prev {left:-5.5rem;}
    .wrap-magazine2 .row .prev::before {display: none;}
    .wrap-magazine2 .row .next {right:-5.5rem;}


    .wrap-magazine2 .more {position: absolute; right:0; top:0; width: 4rem; height: 4rem; margin-top: 0;}
    /* .wrap-magazine2 .row{width: 29rem; margin: 0 auto;} */
}
@media screen and (max-width:900px) {
    .wrap-magazine2 .title {max-width:100%;}
}
@media screen and (max-width: 768px) {
    .wrap-magazine2{min-height:unset; padding:0 2rem;}
	/* .wrap-magazine2 .wrap-magazine-category{left: calc(50% + 2rem);} */
	.wrap-magazine2 .wrap-magazine-category {left:0; top: 10rem; max-width: 100%;}
	.wrap-magazine2 .wrap-magazine-list{width: 100%;}
    .wrap-magazine2 .frame .magazine-wrap{flex-direction:column; padding: 2.5rem 0 5.5rem;}
    .wrap-magazine2 .title{max-width:unset; width:100%; margin-top:2rem; margin-bottom: 11rem;}
    .wrap-magazine2 .title h2 {font-size: 3rem;}
    .wrap-magazine2 .title p {font-size: 2rem;}
    .wrap-magazine2 .slider {min-height:unset;}
    .wrap-magazine2 .prevnext {right: 0; top: 0; left:unset; bottom:unset;}
    .wrap-magazine2 .prevnext button {width:1.6rem; height:3rem; background-size: cover !important}
    .wrap-magazine2 .prevnext button:hover {background-size: cover !important}
    .wrap-magazine2 .prev {margin-right:2rem;}
    .wrap-magazine2 .prev::before {right:-2rem;}
    .wrap-magazine2 .next {margin-left:2rem;}
    .wrap-magazine2 .text-box p {font-size: 2.2rem;}
}