@charset "utf-8";

.main-visual {position: relative; width: 100%; height: 565px; margin-top: 115px;}
.main-visual .origin .item {position: relative; width: 100%; height: 565px;}
.main-visual .origin .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1;}
.main-visual .item.slick-active .img-box {transform: scale(1.06); transition: all 4.5s;}
.main-visual .thumb {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1450px; width: 100%; height: 100%; padding: 0 15px; z-index: 2;}
.main-visual .thumb .text-box {margin-top: 168px;}
.main-visual .thumb .text-box h2 {font-size: 48px; font-weight: 700; line-height: 1.35em; color: #fff; text-align: center; padding-bottom: 20px; opacity: 0;}
.main-visual .thumb .text-box h2 span {color: #8fc320;}
.main-visual .slick-arrow {position: absolute; top: 50%; margin-top: -72px; width: 41px; height: 78px; background-repeat: no-repeat; background: none; border: 0; font-size: 0;}
.main-visual .slick-prev {left: -80px; background-image: url('../img/main/main_visua_prev_btn.png'); background-position: left center; }
.main-visual .slick-next {right: -80px; background-image: url('../img/main/main_visua_next_btn.png'); background-position: right center; }
.main-visual .slick-dots {position: absolute; bottom: 94px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center;}
.main-visual .slick-dots li {padding: 0 5px;}
.main-visual .slick-dots button {width: 40px; height: 8px; border: 1px solid #fff; background: none; font-size: 0; transition: all 0.5s;}
.main-visual .slick-dots .slick-active button {border: 1px solid #8fc320; background: #8fc320;}
.main-visual .item.slick-active .text-box h2 {animation: text-up 1.5s both 0.5s;}
@keyframes text-up {0% {transform: translateY(40px); opacity: 0;} 100% {transform: translateY(0px); opacity: 1;}}

/* section01 */
.sec01 {padding: 75px 0 65px;}
.sec01 .wrap {display: flex; margin: 0 -30px;}
.sec01 .wrap > div {width: 50%; padding: 0 30px;}
.sec01 .sec-title {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 1px solid #000;}
.sec01 .sec-title h3 {position: relative; font-size: 30px; font-weight: 700; line-height: 1.3em; color: #000; padding-left: 20px;}
.sec01 .sec-title h3:before {position: absolute; top: 50%; margin-top: -13px; left: 0; content: ''; width: 5px; height: 26px; background: #8fc320;}
.sec01 .sec-title a {position: relative; display: block; font-size: 16px; font-weight: 700; line-height: 1.3em; color: #000; padding-right: 20px; transition: all 0.5s;}
.sec01 .sec-title a:hover {color: #8fc320;}
.sec01 .sec-title a:after {position: absolute; top: 50%; margin-top: -6px; right: 0; content: ''; width: 12px; height: 10px; background: url('../img/main/sec01_more_btn.png') no-repeat center center;}
.sec01 .list-wrap li {position: relative; height: 60px; border-bottom: 1px solid #ddd; padding-left: 14px;}
.sec01 .list-wrap li:before {position: absolute; top: 27px; left: 0; content: ''; width: 5px; height: 5px; background: #999; border-radius: 50%;}
.sec01 .list-wrap li a {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.sec01 .list-wrap li .title {font-size: 18px; line-height: 1.8em; color: #333; height:calc(1.8em * 1 * 1); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition: all 0.5s;}
.sec01 .list-wrap li a:hover .title {color: #60a506;}
.sec01 .list-wrap li .title .new {display: inline-block; width: 50px; line-height: 28px; border: 1px solid #3b900c; border-radius: 15px; font-size: 16px; font-weight: 700; color: #3b900c; text-align: center; margin-right: 10px;}
.sec01 .list-wrap li .date {max-width: 70px; width: 100%; font-size: 18px; line-height: 1.8em; color: #666; text-align: right;}

/* section02 */
.sec02 {background: #f7f7f7; padding: 90px 0;}
.sec02 .wrap {display: flex; margin: 0 -25px;}
.sec02 .wrap > div {padding: 0 25px;}
.sec02 .introduce-wrap {display: flex; flex-wrap: wrap; max-width: 750px; width: 100%; margin: -5px;}
.sec02 .introduce-wrap > div {width: 50%; padding: 5px;}
.sec02 .item a {position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; background-color: #fff; padding: 35px 35px 35px 40px; transition: all 0.5s; overflow: hidden;}
.sec02 .item a:hover {box-shadow: 0px 20px 35px 0px rgba(137, 136, 135, 0.35);}
.sec02 .item a:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.6s; z-index: 1; overflow: hidden;}
.sec02 .item:nth-child(1) a:before {background-image: url('../img/main/sec02_greeting_bg.jpg');}
.sec02 .item:nth-child(2) a:before {background-image: url('../img/main/sec02_history_bg.jpg');}
.sec02 .item:nth-child(3) a:before {background-image: url('../img/main/sec02_member_bg.jpg');}
.sec02 .item:nth-child(4) a:before {background-image: url('../img/main/sec02_committee_bg.jpg');}
.sec02 .item a:hover:before {opacity: 1; transform: scale(1.3);}
.sec02 .item .text {position: relative; width: 1%; flex: 1 1 auto; z-index: 2;}
.sec02 .item .text h3 {font-size: 28px; font-weight: 600; line-height: 1.4em; color: #000; margin-bottom: 6px; transition: all 0.3s;}
.sec02 .item .text p {position: relative; display: inline-block; font-size: 15px; line-height: 1.4em; color: #666; padding-right: 22px; transition: all 0.3s;}
.sec02 .item .text p:after {position: absolute; top: 50%; margin-top: -5px; right: 0; content: ''; width: 8px; height: 11px; background-repeat: no-repeat; background-position: center center; transition: all 0.3s;}
.sec02 .item:nth-child(1) .text p:after {background-image: url('../img/main/sec02_greeting_btn.png');}
.sec02 .item:nth-child(2) .text p:after {background-image: url('../img/main/sec02_history_btn.png');}
.sec02 .item:nth-child(3) .text p:after {background-image: url('../img/main/sec02_member_btn.png');}
.sec02 .item:nth-child(4) .text p:after {background-image: url('../img/main/sec02_committee_btn.png');}
.sec02 .item a:hover .text h3 {color: #fff;}
.sec02 .item a:hover .text p {color: #fff;}
.sec02 .item a:hover .text p:after {background-image: url('../img/main/sec02_btn_active.png');}
.sec02 .item .icon {position: relative; max-width: 101px; width: 100%; height: 101px; background-repeat: no-repeat; background-position: center center; z-index: 2; transition: all 0.3s;}
.sec02 .item:nth-child(1) .icon {background-image: url('../img/main/sec02_greeting_icon.png');}
.sec02 .item:nth-child(2) .icon {background-image: url('../img/main/sec02_history_icon.png');}
.sec02 .item:nth-child(3) .icon {background-image: url('../img/main/sec02_member_icon.png');}
.sec02 .item:nth-child(4) .icon {background-image: url('../img/main/sec02_committee_icon.png');}
.sec02 .item:nth-child(1) a:hover .icon {background-image: url('../img/main/sec02_greeting_icon_active.png');}
.sec02 .item:nth-child(2) a:hover .icon {background-image: url('../img/main/sec02_history_icon_active.png');}
.sec02 .item:nth-child(3) a:hover .icon {background-image: url('../img/main/sec02_member_icon_active.png');}
.sec02 .item:nth-child(4) a:hover .icon {background-image: url('../img/main/sec02_committee_icon_active.png');}
.sec02 .gallery {width: 1%; flex: 1 1 auto;}
.sec02 .gallery a {display: flex;}
.sec02 .gallery .img-box {max-width: 466px; width: 100%; overflow: hidden;}
.sec02 .gallery .img-box .pic {position:relative; height:0; padding-bottom:75%; overflow:hidden; transition:all 0.6s;}
.sec02 .gallery .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition: all 0.5s;}
.sec02 .gallery a:hover .img-box .pic {transform: scale(1.05);}
.sec02 .gallery .text-box {width: 1%; flex: 1 1 auto; background: #fff; padding: 55px 25px; transition: all 0.6s;}
.sec02 .gallery .text-box .title {margin-bottom: 28px;}
.sec02 .gallery .text-box .title p {font-size: 18px; font-weight: 600; line-height: 1.77em; color: #000; height:calc(1.77em * 1 * 6); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; transition: all 0.3s;}
.sec02 .gallery .text-box .date {font-size: 16px; line-height: 1.5em; color: #666; text-align: right; transition: all 0.3s;}
.sec02 .gallery a:hover .text-box {background: #8fc320;}
.sec02 .gallery a:hover .text-box .title p {color: #fff;}
.sec02 .gallery a:hover .text-box .date {color: #fff;}

/* section03 */
.sec03 {padding: 27px 0;}
.sec03 .items {padding: 0 50px;}
.sec03 .item a {display: flex; justify-content: center; align-items: center;}
.sec03 .slick-arrow {position: absolute; top: 50%; margin-top: -16px; width: 19px; height: 32px; background-repeat: no-repeat; background-position: center center; background: none; border: 0; font-size: 0;} 
.sec03 .slick-prev {left: -50px; background-image: url('../img/main/partner_prev_btn.png');}
.sec03 .slick-next {right: -50px; background-image: url('../img/main/partner_next_btn.png');}