@charset "utf-8";

/* ======================================================
   .msec-cont
=========================================================*/
.msec-cont{position:relative; padding:0 45px;}
.msec-cont .visual{position:relative;}
.msec-cont .visual:after{position:Absolute ;left:-45px; top:0; width:calc(100% + 90px); height:calc(100% - 48px); background:#fff100;display:block; content:"";z-index:-1;}
.msec-cont .visual .ov{text-align:center; position:relative}
.msec-cont .visual .ov .ctrl{position:relative;margin:0 auto;width:44px;height:44px; display:block;visibility: hidden;}
.msec-cont .visual .ov .ctrl:after{position:absolute ;left:0; top:50%; width:100%; margin-top:-1px;border-bottom:1px solid #1b1b1b; display:block; content:"";-webkit-transition: transform 0.3s ease-in-out;-moz-transition: transform 0.3s ease-in-out;-o-transition: transform 0.3s ease-in-out;transition: transform 0.3s ease-in-out;}
.msec-cont .visual .ov .ctrl:before{position:absolute ;left:50%; top:0; width:0; height:100%; margin-left:-1px;border-left:1px solid #1b1b1b; display:block; content:"";-webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;-moz-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;-o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;}
.msec-cont .visual .ov .ctrl.active:before{opacity:0;transform: scale(1,1) rotate(90deg)skew(0,0) translate(0,0); -webkit-transform: scale(1,1) rotate(90deg)skew(0,0) translate(0,0); -moz-transform: scale(1,1) rotate(90deg)skew(0,0) translate(0,0); }

.msec-cont .visual .gap40{height:40px;}
.msec-cont .visual .txt{padding-top:55px; }
.msec-cont .visual .txt h3{font-size:60px; font-weight:300; color:#1b1b1b; letter-spacing:-0.03em; line-height:1.2em; }
.msec-cont .visual .txt h3 span{font-weight:700;}
.msec-cont .visual .txt p{margin-top:20px;font-size:30px; font-weight:300; color:#1b1b1b; letter-spacing:-0.03em; line-height:1.3em; }
.msec-cont .visual .img{margin-top:50px;width:calc(100% + 45px);}
.msec-cont .visual .img img{width:100%;min-height:240px;object-fit:cover;}
	@media only screen and (max-width:1480px){
		.msec-cont .visual{}
		.msec-cont .visual .ov{}
		.msec-cont .visual .txt{padding-top:40px;}
		.msec-cont .visual .txt h3{font-size:52px;}
		.msec-cont .visual .txt p{margin-top:15px;font-size:26px;}
		.msec-cont .visual .ov .ctrl{width:40px; height:40px; visibility: hidden;}
		.msec-cont .visual .ov .ctrl:after{}

	}
	@media only screen and (max-width:1280px){
		.msec-cont .visual .txt h3{font-size:46px;}
		.msec-cont .visual .txt p{margin-top:15px;font-size:24px;}
	}
	@media only screen and (max-width:1220px){
		.msec-cont{padding:0 20px;}
	}
	@media only screen and (max-width:1120px){
		.msec-cont .visual .txt h3{font-size:40px;}
		.msec-cont .visual .txt p{margin-top:15px;font-size:22px;}
	}
	@media only screen and (max-width:999px){
		.msec-cont .visual{}
		.msec-cont .visual .txt{padding-top:30px;}
		.msec-cont .visual .txt h3{font-size:34px;}
		/* .msec-cont .visual .txt p{margin-top:12px;font-size:20px;}
		.msec-cont .visual .ov .ctrl{width:30px; height:30px; }
		.msec-cont .visual .img{margin-top:30px;}
		.msec-cont .visual .gap40{height:30px;} */
	}
	@media only screen and (max-width:680px){
		.msec-cont .visual .txt h3{font-size:28px;}
		.msec-cont .visual .txt h3 span{display:block;}
		/* .msec-cont .visual .txt p{font-size:18px;}
		.msec-cont .visual .img{margin-top:20px;}
		.msec-cont .visual .gap40{height:20px;} */
		/* .msec-cont .visual .ov .ctrl{width:24px; height:24px; } */
	}
	@media only screen and (max-width:480px){
		.msec-cont .visual .ov{}
		/* .msec-cont .visual .txt p{font-size:16px;} */

		/* .msec-cont .visual .ov .ctrl{width:18px; height:18px; } */
		/* .msec-cont .visual .img{margin-top:15px;} */
		/* .msec-cont .visual .gap40{height:15px;} */
	}




/* .msec-cont .list{margin-top:60px;} */

.msec-cont .list .masonry{ padding:0; margin:0 -12px; font-size:0;}
.msec-cont .list .masonry:after{display:block; content:"";clear:both;}
.msec-cont .list .masonry .grid-sizer{ width:20%;}
.msec-cont .list .masonry .item{float:left; width:calc(20% - 24px);margin:0 12px ; overflow:hidden;background:#e1e1e1;padding:0; outline:none; position:relative; }
.msec-cont .list .masonry .item:nth-child(n+6){margin-top:24px;}
.msec-cont .list .masonry .item a{display:block;}
.msec-cont .list .masonry .item .cate{position:ABsolute; left:0; top:0; z-index:3;background:rgba(0,0,0,0.7);height:30px ;line-height:32px; padding:0 12px; font-size:12px ;font-weight:500; color:#fff;}
.msec-cont .list .masonry .item .cate.bg-red{background-color:rgba(255,0,0,0.7)}
.msec-cont .list .masonry .item .img{text-align:center; width:100%;display:flex;align-items: center; justify-content: center; height:438px;}
.msec-cont .list .masonry .item .img img{width:100%;max-height:100%;object-fit: contain;-webkit-transition: transform 0.5s ease-out;-moz-transition: transform 0.5s ease-out;-o-transition: transform 0.5s ease;transition: transform 0.5s ease-out;}

.msec-cont .list .masonry .item:hover .over{opacity:1}
.msec-cont .list .masonry .item .over{position:absolute; left:0; bottom:0; width:100%; height:60px; background:rgba(0,0,0,0.5); opacity:0;-webkit-transition: opacity 0.5s ease-in-out;-moz-transition: opacity 0.5s ease-in-out;-o-transition: opacity 0.5s ease-in-out;transition: opacity 0.5s ease-in-out;}
.msec-cont .list .masonry .item .over .like{position:absolute;left:0; top:0; height:60px; background:url(../_Img/main/like-off.png) no-repeat 15px center; padding-left:62px; font-size:14px; font-weight:500 ;line-height:62px ;color:#fff;}
.msec-cont .list .masonry .item .over .like.active{ background-image:url(../_Img/main/like-on.png)}
.msec-cont .list .masonry .item .over .down{position:absolute;right:0; top:0; width:60px;height:60px; background:url(../_Img/main/img-down.png) no-repeat center center; background-size:100% auto;}
.msec-cont .list .masonry .item .over .down:hover{background-color:#1b1b1b}

.msec-cont .list .masonry .item:hover .img img{-webkit-transform:scale(1.05); -moz-transform:scale(1.05);  -o-transform:scale(1.05);  transform:scale(1.05);}
	@media only screen and (max-width:1920px){
		.msec-cont .list .masonry{margin:0 -10px;}
		.msec-cont .list .masonry .grid-sizer{ width:25%;}
		.msec-cont .list .masonry .item{width:calc(25% - 20px);margin:0 10px ;}
		.msec-cont .list .masonry .item .img{ height:400px;}
		.msec-cont .list .masonry .item:nth-child(n+5){margin-top:20px;}
	}
	@media only screen and (max-width:1680px){

	}
	@media only screen and (max-width:1480px){
		/* .msec-cont .list{margin-top:40px;} */
		.msec-cont .list .masonry{margin:0 -10px;}
		.msec-cont .list .masonry .grid-sizer{ width:33%;}
		.msec-cont .list .masonry .item{width:calc(33% - 20px);margin:0 10px ;}
		.msec-cont .list .masonry .item .img{ height:360px;}
		.msec-cont .list .masonry .item:nth-child(n+4){margin-top:20px;}

		.msec-cont .list .masonry .item .cate{font-size:11px; padding:0 10px; height:26px; line-height:28px;}

		.msec-cont .list .masonry .item .over{height:50px;}
		.msec-cont .list .masonry .item .over .like{ background-size:30px; height:50px; line-height:52px; font-size:12px; padding-left:54px}
		.msec-cont .list .masonry .item .over .down{ width:50px;height:50px;}
	}
	@media only screen and (max-width:1280px){

	}
	@media only screen and (max-width:999px){
		.msec-cont .list .masonry{margin:0 -5px;}
		.msec-cont .list .masonry .grid-sizer{ width:50%;}
		.msec-cont .list .masonry .item{width:calc(50% - 10px);margin:0 5px ;}
		.msec-cont .list .masonry .item .img{ height:310px;}
		.msec-cont .list .masonry .item:nth-child(n+3){margin-top:10px;}

		.msec-cont .list .masonry .item .cate{font-size:10px; padding:0 8px; height:22px; line-height:24px;}

		.msec-cont .list .masonry .item .over{height:40px;}
		.msec-cont .list .masonry .item .over .like{ background-position:10px center;background-size:20px; height:40px; line-height:42px;font-size:11px; padding-left:42px}
		.msec-cont .list .masonry .item .over .down{ width:40px;height:40px;}
	}
	@media only screen and (max-width:680px){
		/* .msec-cont .list{margin-top:25px;} */
		.msec-cont .list .masonry{margin:0 -5px;}
		.msec-cont .list .masonry .grid-sizer{ width:100%;}
		.msec-cont .list .masonry .item{width:calc(100% - 10px);margin:0 5px ;}
		.msec-cont .list .masonry .item .img{ min-height:310px;height: 100%;}
		.msec-cont .list .masonry .item:nth-child(n+2){margin-top:10px;}
		/* .msec-cont .list .masonry .item .img{ height:260px;} */
		.msec-cont .list .masonry .item .over{height:30px;}
		.msec-cont .list .masonry .item .over .like{ background-size:16px; height:30px;line-height:32px; font-size:10px; padding-left:34px}
		.msec-cont .list .masonry .item .over .down{ width:30px;height:30px;}
	}
	@media only screen and (max-width:480px){
		.msec-cont .list .masonry .item{}
		.msec-cont .list .masonry .item .img{ min-height:210px;height: 100%;}
	}






/* ======================================================
   .msec-dona
=========================================================*/
.msec-dona{text-align:center;background:#fff100;padding:54px 20px; margin-top:50px;}
.msec-dona .ov{display:inline-block;vertical-align:top; padding-left:465px; padding-right:280px; position:relative ;text-align:left;}
.msec-dona .ov h3{position:Absolute;height:72px; line-height:74px; font-size:54px; font-weight:700; color:#1b1b1b; letter-spacing:-0.03em; left:20px; top:0;}
.msec-dona .ov p{font-size:22px; height:72px; display:flex;align-items: center; justify-content: center; font-weight:300; color:#1b1b1b; letter-spacing:-0.03em; line-height:1.4em;}
.msec-dona .ov a{position:absolute;right:20px; top:0; line-height:76px; height:74px; border-radius:72px; background:#1b1b1b; height:72px; text-align:center; width:240px; color:#fff; font-size:24px; font-weight:500; letter-spacing:-0.03em;}
	@media only screen and (max-width:1480px){
		.msec-dona {padding:45px 0}
		.msec-dona .ov{padding-left:430px; padding-right:260px;}
		.msec-dona .ov h3{font-size:48px;}
		.msec-dona .ov p{font-size:20px}
		.msec-dona .ov a{font-size:22px; height:65px; line-height:67px; width:220px;}
	}
	@media only screen and (max-width:1280px){
		.msec-dona .ov{padding-left:380px;padding-right:240px;}
		.msec-dona .ov h3{font-size:42px;}
		.msec-dona .ov p{font-size:18px}
		.msec-dona .ov a{font-size:20px; height:60px; line-height:62px; width:200px;}
	}
	@media only screen and (max-width:999px){
		.msec-dona{padding:35px 20px}
		.msec-dona .ov{padding:0;text-align:center; display:block;}
		.msec-dona .ov h3{font-size:36px; position:Relative; left:auto; top:auto;line-height:1.2em; height:auto ;margin-bottom:10px}
		.msec-dona .ov p{height:auto;font-size:16px}
		.msec-dona .ov a{position:relative; right:auto; top:auto ; width:200px; left:auto;display:inline-block;vertical-align:top; margin-top:20px;font-size:18px; height:55px; line-height:57px;}
	}
	@media only screen and (max-width:680px){
		.msec-dona{padding:30px 20px}
		.msec-dona .ov h3{font-size:31px;}
		.msec-dona .ov p{font-size:14px}
		.msec-dona .ov a{font-size:16px; height:50px; line-height:52px; width:180px; }
	}
	@media only screen and (max-width:480px){
		.msec-dona .ov h3{font-size:26px;}
		.msec-dona .ov p{font-size:13px}
		.msec-dona .ov a{font-size:15px; height:45px; line-height:47px; width:160px; }
	}

    .sub #container-wrap #contents {
        padding-top: 0px;
    }

    .sub #footer-wrap {
        margin-top: 0px;
    }