@charset "UTF-8";

.wrap {width:81.25rem; margin: 0 auto;}
.container {margin: 0 auto;}


/* Area */
section {width: 100%; height: auto; padding: 3rem 0;}
section:after {display: block; content:""; clear: both;}
section .left {float: left;}
section .right {float: right;}


/* thumb */
.thumb {width: 100%; height: 100%; display: block; outline: 0.05rem solid #cccccc; transition: 0.2s ease-in; overflow: hidden;}
.thumb:hover {box-shadow: 0.05rem 0.05rem 0.5rem #aaaaaa;}
.thumb:hover .imgArea img {transform: scale(1.1);}

.imgArea {width: 100%; height: 100%; overflow: hidden;}
.imgArea img {max-width: 100%; transition: 0.2s ease-in;}

.cate1 {width: auto; height: auto; display: inline-block; padding: 0.3rem 0.5rem; border: 0.15rem solid #338808; color: #338808; font-size: 1.05rem; font-weight: bold;}
.cate2 {width: auto; height: auto; display: block; text-align: center; padding: 0 0 0.8rem; border-bottom: 0.15rem solid #bf580b; color: #bf580b; font-size: 1.3rem; font-weight: 800;}
.cate3 {width: auto; height: auto; display: inline-block; text-align: center; padding: 0.4rem 0.7rem; border-radius: 5rem; color: #ffffff; background-color: #078673; font-size: 1.05rem;}
.cate4 {width: auto; height: auto; display: inline-block; text-align: center; padding: 0.4rem 0.7rem; border-radius: 5rem; color: #ffffff; background-color: #1e79bf; font-size: 1.05rem;}

.thumb_T {font-size: 1.15rem; font-weight: bold; margin-top: 1rem; line-height: 1.5rem;}
.thumb_T span {font-size: 1.3rem; font-weight: 800; line-height: 2rem;}

.thumb_more {font-size: 1rem; margin-top: 1.5rem;}

.colorff {color:#ffffff;}

/* mainVisual */
#mainVisual {position:relative;width: 100%; height: 45rem;}
#mainVisual .visualSet > div {width: 100%; height: 45rem;}
#mainVisual .visualTxt_R {position:relative; width: 32rem; height: 30rem; margin-top: 3rem; padding: 5rem; float: right; display: block;}
#mainVisual .visualTxt_L {position:relative; width: 32rem; height: 30rem; margin-top: 3rem; padding: 5rem; float: left; display: block;}
#mainVisual .vt_title {font-family: 'InkLipquid'; font-size: 2.5rem; line-height: 3.5rem; color: #fff; margin-bottom: 3rem;}
/* #mainVisual .vt_title span {font-family: 'InkLipquid'; font-size: 4.5rem; color: #fff;} */
#mainVisual .vt_title span {font-family: 'InkLipquid'; font-size: 4.1rem; line-height:4.5rem; color: #fff;letter-spacing:-1px;}
#mainVisual .vt_title br {color:rgba(0,0,0,0); display:block;}
#mainVisual .vt_titleSub {
	width: 100%; 
	color: #ffffff; 
	font-size:1.05rem; 
	overflow: hidden; 
	text-align: justify;
	text-overflow: ellipsis; 
	display: -webkit-box; 
	-webkit-line-clamp: 6; 
	-webkit-box-orient: vertical; 
	word-wrap:break-word; 
	line-height: 1.4em; 
	margin-bottom: 4rem;

	height:8.6rem;
}
#mainVisual .vt_more {width: 4.5rem; height: 4.5rem; display: inline-block; background: url(../images/mainVisual-more.png) center center no-repeat;}

.btn_pager {position: absolute; bottom: 70px; left: 51.5%; margin-left: -200px; z-index: 98;}
.btn_pager a.page_cont {display: inline-block; width:24px; height:24px; font-size: 0.6rem; font-weight: bold; color: #fff; border: 1px solid #fff; box-sizing: border-box; text-align: center; border-radius: 12px; line-height: 24px;}
.btn_pager a.page_cont.active {background-color: #fff; color: rgba(0,0,0,0.8);}

/* mainSection1 */
#mainSection1 {width: 100%; height: auto;}
#mainSection1 .imgArea {background-color: #eeffee;}
#mainSection1 .txtArea {display: inline-block; padding-left: 2rem; margin-bottom: 2rem; background-color: #ffffff;}
#mainSection1 .txtArea .thumb_more {color: #338808;}

#mainSection1  .left {width: 39%; height: auto; box-sizing: border-box;}
#mainSection1  .left .imgArea {height: auto; box-sizing: border-box;}
#mainSection1  .left .txtArea {height: 9rem; padding-top: 1rem; box-sizing: border-box;}

#mainSection1  .right {width: 59%; box-sizing: border-box;}
#mainSection1  .right .thumb {width: 100%; height: 15.2rem; margin-bottom: 1.5rem; box-sizing: border-box;}
#mainSection1  .right .thumb:last-child {margin-bottom: 0;}
#mainSection1  .right .thumb:after {display: block; content:""; clear: both;}
#mainSection1  .right .imgArea {width: 50%; height: auto; float: left; box-sizing: border-box;}
#mainSection1  .right .txtArea {width: auto; padding-top: 2.7rem; box-sizing: border-box;}


/* mainSection2 */
#mainSection2 {width: 100%; height: auto; background-color: #f5f5f5;}
#mainSection2 .thumb {width: 32%; height: auto; background-color: #fff; float: left; margin-right: 1.8%; box-sizing: border-box;}
#mainSection2 .thumb:last-child {margin-right: 0;}
#mainSection2 .imgArea {width: 100%; height: auto; background-color: #ffeeee; box-sizing: border-box;}
#mainSection2 .txtArea {margin: 1.8rem 3rem; text-align: center; box-sizing: border-box;}


/* mainSection3 */
#mainSection3 {width: 100%; height: auto;}
#mainSection3 .thumb {width: 100%; height: 15rem; background-color: #ffffff; float: left; margin-right: 1.8%; margin-bottom: 2rem; box-sizing: border-box;}
#mainSection3 .thumb:last-child {margin-bottom: 0;}
#mainSection3 .imgArea {width: 50%; height: auto; background-color: #ffffee; float:left; box-sizing: border-box;}
#mainSection3 .txtArea {display: inline-block; padding-left: 1.5rem; padding-top: 2.8rem; margin-bottom: 2rem; background-color: #ffffff; box-sizing: border-box;}
#mainSection3 .left  {width: 49%; height: auto; box-sizing: border-box;}
#mainSection3 .left .txtArea .thumb_more {color: #078673;}
#mainSection3 .right  {width: 49%; height: auto; box-sizing: border-box;}
#mainSection3 .right .txtArea .thumb_more {color: #1e79bf;}

@media only screen and (max-width:81.25rem) {
	.wrap {width:100%;padding:0px 20px;box-sizing:border-box;}
}
@media only screen and (max-width:1300px) {
	#mainVisual .visualTxt_R {width: 100%; box-sizing: border-box; height: 28rem; padding: 3rem; margin-top: 15rem;}
	#mainVisual .visualTxt_L {width: 100%; box-sizing: border-box; height: 28rem; padding: 3rem; margin-top: 15rem;}
	#mainVisual .vt_title {margin-bottom: 2rem;}
	#mainVisual .vt_titleSub {
		display: -webkit-box; 
		-webkit-line-clamp: 3;
		margin-bottom: 3rem;
		
		height:4.2rem;
	}

	
	.btn_pager {left: auto; margin-left: auto; right: 10%;}
}
@media only screen and (max-width:1100px) {
	#mainSection1  .left {width: 100%;}
	#mainSection1  .left .thumb {width: 100%; height: 16.2rem; margin-bottom: 1.5rem;}
	#mainSection1  .left .imgArea {width: 50%; height: auto; float: left;}
	#mainSection1  .left .imgArea > img {width:100%;}
	#mainSection1  .left .txtArea {padding-top: 2.7rem;}
	#mainSection1  .right {width: 100%;}
	#mainSection1  .right .thumb {width: 100%; height: 16.2rem; margin-bottom: 1.5rem;}
	#mainSection1  .right .imgArea {height: auto;}
	#mainSection1  .right .imgArea > img {width:100%;}
	
	#mainSection2 .thumb {width: 49%; margin-right: 1.8%; margin-bottom:1.8%;}
	#mainSection2 .thumb:nth-child(2n) {margin-right:0;}
	#mainSection2 .thumb .imgArea > img {width:100%;}

	#mainSection3 .thumb {height: 16.2rem; margin-bottom: 1.5rem;}
	#mainSection3 .imgArea > img {width:100%;}
	#mainSection3 .left  {width: 100%; margin-bottom: 1.5rem;}
	#mainSection3 .right  {width: 100%; }
}

@media only screen and (max-width:800px) {
	#mainSection1 .txtArea {_padding-left: auto; margin-bottom: auto;}
	#mainSection1  .left .thumb {height: auto; }
	#mainSection1  .left .imgArea {width: 100%;}
	#mainSection1  .left .txtArea {height:auto; padding: 1.5rem;}
	#mainSection1  .right .thumb {height: auto;}
	#mainSection1  .right .imgArea {width:100%;}
	#mainSection1  .right .txtArea {height:auto; padding: 1.5rem;}

	#mainSection2 .thumb {width: 100%; margin-right: 0%; margin-bottom:1.5rem;}
	#mainSection2 .thumb:last-child {margin-bottom:0px;}
	#mainSection2 .thumb .imgArea {}

	#mainSection3 .txtArea {padding:1.5rem; margin-bottom: 0;}
	#mainSection3 .left .thumb {height: auto; }
	#mainSection3 .left .imgArea {width: 100%; height:16.2rem;}
	#mainSection3 .right .thumb {height: auto; }
	#mainSection3 .right .imgArea {width: 100%; height:16.2rem;}
}

@media only screen and (max-width:700px) {
	#mainVisual { height: 30rem;}
	#mainVisual .visualSet > div { height: 30rem;}
	#mainVisual .visualTxt_R {height: 12rem; padding: 1.5rem; margin-top: 16rem;}
	#mainVisual .visualTxt_L {height: 12rem; padding: 1.5rem; margin-top: 16rem;}
	#mainVisual .vt_title {font-size: 1.5rem; line-height: 2.7rem; color: #fff; margin-bottom: 2rem; letter-spacing: -0.5px;}
	#mainVisual .vt_title span {font-size: 2.5rem; color: #fff;}
	#mainVisual .vt_titleSub {display: none;}
	#mainVisual .vt_more {display: none;}

	.thumb_more {display: none;}
	.btn_pager {bottom: 3.5rem; left: 0%; margin-left: 0px;width:100%;box-sizing:border-box;text-align:right;padding-right:45px;}
}