@charset "utf-8";

.main-visual {position: relative; margin-top: 100px;}
.main-visual .item {position: relative; height: calc(100vh - 100px); overflow: hidden;}
.main-visual .item .img-box {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.1); }
.main-visual .item.slick-active .img-box {transform: scale(1); transition: all 4s;}
.main-visual .item .text-box {max-width: 1450px; width: 100%; height: 100%; padding: 0 15px; margin: 0 auto; align-content: center; margin-top: -50px;}
.main-visual .item .text-box p {font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.4em; color: #fff; margin-bottom: 32px;}
.main-visual .item .text-box h2 {font-family: 'Happiness-Sans'; font-size: 60px; line-height: 1.4em; font-weight: 400; color: #fff; letter-spacing: -0.04em;}
.main-visual .item .text-box h2 b {font-weight: 700;}
.main-visual .item.slick-active .text-box p {animation: text-up 1s both 0.2s;}
.main-visual .item.slick-active .text-box h2 {animation: text-up 1s both 0.4s;}
.main-visual .controler-wrap {position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); max-width: 1450px; width: 100%; padding: 0 15px; display: flex; align-items: center;}
.main-visual .paging {margin-right: 28px;}
.main-visual .paging ul {display: flex; margin: 0 -17px;}
.main-visual .paging ul li {position: relative; padding: 0 17px; transition: all 0.5s;}
.main-visual .paging ul li.slick-active {padding-right: 100px;}
.main-visual .paging ul li:after {opacity: 0; position: absolute; top: 50%; right: 20px; content: ''; width: 0; height: 1px; background: #fff; transition: all 0.5s;}
.main-visual .paging ul li.slick-active:after {opacity: 1; width: 60px;}
.main-visual .paging ul li div {font-size: 14px; font-weight: 600; line-height: 1; color: rgba(255,255,255,0.5); background: transparent; border: 0; transition: all 0.5s; cursor: pointer;}
.main-visual .paging ul li.slick-active div {color: #fff;} 
.main-visual .controler button {display: block; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center center; border: 0; background-color: transparent;}
.main-visual .controler .btn-stop {background-image: url('../img/main/main_visual_btn_stop.png');}
.main-visual .controler .btn-play {display: none; background-image: url('../img/main/main_visual_btn_play.png');}
.main-visual .btn-scroll-down {position: absolute; bottom: 80px; right: 60px; width: 130px; border: 1px solid #fff; background: rgba(0,0,0,0.2); border-radius: 18px; padding: 0 18px; font-family: "Poppins", sans-serif; font-size: 14px; line-height: 34px; color: #fff; transition: all 0.5s;}
.main-visual .btn-scroll-down:hover {background: #fff; font-weight: 500; color: #333;}
.main-visual .btn-scroll-down:after {position: absolute; top: 50%; margin-top: -5px; right: 13px; content: ''; width: 9px; height: 10px; background: url('../img/main/icon_scroll_down.png') center bottom; transition: all 0.5s;}
.main-visual .btn-scroll-down:hover:after {background-position: center bottom -10px;}

@keyframes text-up {
    0% {
        filter: blur(10px);
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.section-title h3 {display: inline-block; font-size: 58px; font-weight: 700; line-height: 1; color: #111;}
.section-title span {display: inline-block; width: 10px; height: 10px; background: #132e19; border-radius: 50%; margin-left: 18px; vertical-align: sub;}
.section-title.red span {background: #a91515;}
.section-title p {font-size: 22px; line-height: 1.4em; color: #111; margin-top: 30px;}

.section01 {padding-top: 147px;}
.section01 .section-title {margin-bottom: 5px;}
.btn-more {position: relative; width: 160px; height: 48px; border-bottom: 1px solid #747474; font-size: 16px; line-height: 48px; color: #333; padding: 0 10px; transition: all 0.5s;}
.btn-more:hover {padding: 0;}
.btn-more:after {position: absolute; top: 50%; margin-top: -6px; right: 10px; content: ''; width: 12px; height: 12px; background: url('../img/main/btn_more_green.png') no-repeat center center; transition: all 0.5s;}
.btn-more-red:after {background-image: url('../img/main/btn_more_red.png');}
.btn-more:hover:after {right: 0; transform: rotate(270deg);}
.section01 .btn-more {position: absolute; top: 80px; right: 15px;}
.section01 .slide-wrap {display: flex; align-items: flex-end;}
.section01 .thumb {max-width: 580px; width: 100%; margin-right: 50px; margin-left: -30px;}
.section01 .thumb .item {padding: 70px 30px;}
.section01 .thumb .item a {border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 10px 30px 0px rgba(116, 116, 116, 0.3); transition: all 0.5s;}
.section01 .thumb .item a:hover {border: 1px solid #132e19;}
.section01 .thumb .img-box {border-radius: 5px 5px 0 0; overflow: hidden;}
.section01 .thumb .pic {position:relative; height:0; padding-bottom:67.31%; overflow:hidden; transition:all 0.6s;}
.section01 .thumb .item a:hover .pic {transform: scale(1.06);}
.section01 .thumb .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:0.3s;}
.section01 .thumb .text-box {padding: 36px 40px;}
.section01 .thumb .text-box p {font-size: 24px; font-weight: 500; line-height: 1.4em; color: #132e19; height:calc(1.4em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.section01 .nav {max-width: 1250px; width: 100%;}
.section01 .nav .items {margin: 0 -20px;}
.section01 .nav .item {padding: 0 20px 70px;}
.section01 .nav .item a {border: 1px solid #ddd; border-radius: 5px; transition: all 0.5s;}
.section01 .nav .item a:hover {border: 1px solid #132e19; box-shadow: 0px 10px 30px 0px rgba(116, 116, 116, 0.3);}
.section01 .nav .img-box {overflow: hidden;}
.section01 .nav .pic {position:relative; height:0; padding-bottom:67.44%; overflow:hidden; transition:all 0.6s;}
.section01 .nav .item a:hover .pic {transform: scale(1.06);}
.section01 .nav .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:0.3s;}
.section01 .nav .text-box {padding: 27px 30px;}
.section01 .nav .text-box p {font-size: 18px; font-weight: 500; line-height: 1.4em; color: #333; height:calc(1.44em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.section01 .controler-wrap {display: flex; align-items: center;}
.section01 .bar {width: 100%; margin-right: 100px;}
.section01 .progress {display: block; width: 100%; height: 6px; overflow: hidden; background-color: #f8f8f8; background-image: linear-gradient(to right, #132e19, #132e19); background-repeat: no-repeat; background-size: 0 100%; border-radius: 3px; transition: background-size .6s ease-in-out;}
.section01 .arrows {position: relative; display: flex;}
.section01 .arrows:after {position: absolute; top: 50%; margin-top: -13px; left: 50%; content: ''; width: 1px; height: 26px; background: #ddd;} 
.section01 .slick-arrow {display: block; width: 34px; height: 27px; background-repeat: no-repeat; font-size: 0; border: 0; background-color: transparent;}
.section01 .slick-prev {background-image: url('../img/main/btn_slide_prev.png'); background-position: left center;}
.section01 .slick-next {background-image: url('../img/main/btn_slide_next.png'); background-position: right center;}

.section02 {position: relative; padding: 168px 0 140px;}
.section02 .wrap {display: flex; justify-content: space-between;}
.section02 .section-title h3 {margin-bottom: 40px;}
.section02 .btn-more {width: 190px; margin-bottom: 24px;}
.section02 .section-cont {max-width: 935px; width: 100%; margin-top: 115px;}
.section02 .section-cont ul {display: flex; flex-wrap: wrap; margin: -17px;}
.section02 .section-cont ul li {width: 50%; padding: 17px;}
.section02 .section-cont ul li a {display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; height: 100%; background: #fff; border-radius: 5px; padding: 55px 40px 40px 50px; box-shadow: 0px 0px 20px 0px rgba(116, 116, 116, 0.1);}
.section02 .section-cont ul li.bg-green a {background: #132e19;}
.section02 .section-cont ul li.bg-red a {background: #a91515;}
.section02 .section-cont ul li h4 {position: relative; font-size: 34px; font-weight: 600; line-height: 1.3em; color: #000; padding-left: 55px;}
.section02 .section-cont ul li.bg-green h4,
.section02 .section-cont ul li.bg-red h4 {color: #fff;}
.section02 .section-cont ul li h4:before {position: absolute; top: 0; left: 0; content: ''; width: 42px; height: 42px; background-repeat: no-repeat; background-position: left center;}
.section02 .section-cont ul li:nth-child(1) h4:before {background-image: url('../img/main/section02_icon01.png');}
.section02 .section-cont ul li:nth-child(2) h4:before {background-image: url('../img/main/section02_icon02.png');}
.section02 .section-cont ul li:nth-child(3) h4:before {background-image: url('../img/main/section02_icon03.png');}
.section02 .section-cont ul li:nth-child(4) h4:before {background-image: url('../img/main/section02_icon04.png');}
.section02 .section-cont ul li .btn-plus {width: 55px; height: 55px; background: #eee url('../img/main/btn_more_gray.png') no-repeat center center; border-radius: 50%; margin: 0 0 0 auto; transition: all 0.5s;} 
.section02 .section-cont ul li.bg-green .btn-plus {background-color: #112716; background-image: url('../img/main/btn_more_white.png');}
.section02 .section-cont ul li.bg-red .btn-plus {background-color: #8e1313; background-image: url('../img/main/btn_more_white.png');}
.section02 .section-cont ul li a:hover .btn-plus {transform: rotate(270deg);}
.section02 .img-box {position: absolute; bottom: 0; left: 0; width: 100%; height: 500px; background: url('../img/main/section02_bg01.jpg') no-repeat center center/cover; z-index: -1; transition: all 0.5s;}

.section03 {padding-top: 150px;}
.section03 .title-wrap {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 70px;}
.section03 .title-wrap .btn-more {display: none;}
.section03 .title-wrap .btn-more.active {display: block;}
.section03 .section-cont {padding: 90px 0 100px; background: #f6f9f8;} 
.section03 .cont-wrap {display: flex;}
.section03 .tab {display: flex; flex-direction: column; justify-content: space-between; max-width: 355px; width: 100%;}
.section03 .tab-menu button {position: relative; display: block; font-size: 26px; font-weight: 700; line-height: 1; color: rgba(17,17,17,0.5); padding-right: 23px; margin-bottom: 19px; border: 0; background-color: transparent; transition: all 0.5s;}  
.section03 .tab-menu button.active {color: #111;}
.section03 .tab-menu button:after {opacity: 0; position: absolute; top: 50%; margin-top: -3px; right: -5px; content: ''; width: 6px; height: 6px; background: #132e19; border-radius: 50%; transition: all 0.3s;}
.section03 .tab-menu button.active:after {opacity: 1; right: 0;}
.section03 .tab-menu button:hover:after {opacity: 1; right: 0;}
.section03 .tab-cont-wrap {position: relative; width: 100%; height: 430px;}
.section03 .tab-cont {position:absolute; width: 1615px; opacity: 0; z-index: -1;}
.section03 .tab-cont.active {z-index: 1; opacity: 1;}
.section03 .tab-cont .items {margin: 0 -10px;}
.section03 .tab-cont .item {padding: 0 10px;}
.section03 .tab-cont .item a {position: relative; background: #fff; padding: 57px 50px; border-radius: 5px; transition: all 0.5s;}
.section03 .tab-cont .item a:hover {background: #132e19; box-shadow: 0px 10px 30px 0px rgba(116, 116, 116, 0.3);}
.section03 .tab-cont .item .date {font-family: "Poppins", sans-serif; font-size: 32px; font-weight: 600; line-height: 1; color: #999; margin-bottom: 93px; transition: all 0.5s;}
.section03 .tab-cont .item a:hover .date {color: #fff;}
.section03 .tab-cont .item .btn-plus {opacity: 0; position: absolute; top: 60px; right: 55px; width: 12px; height: 12px; background: url('../img/main/btn_more_white.png') no-repeat center center; transition: all 0.5s;}
.section03 .tab-cont .item a:hover .btn-plus {opacity: 1; transform: rotate(270deg); transition-delay: 0.3s;}
.section03 .tab-cont .item h4 {font-size: 28px; font-weight: 600; line-height: 1.42em; color: #333; margin-bottom: 28px; height:calc(1.42em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition: all 0.5s;}
.section03 .tab-cont .item a:hover h4 {color: #fff;}
.section03 .tab-cont .item p {font-size: 18px; line-height: 1.55em; color: #666;height:calc(1.55em * 1 * 3); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition: all 0.5s;}
.section03 .tab-cont .item a:hover p {color: #fff;}
.section03 .arrows {display: none; position: relative; width: 68px;}
.section03 .arrows.active {display: flex;}
.section03 .arrows:after {position: absolute; top: 50%; margin-top: -13px; left: 50%; content: ''; width: 1px; height: 26px; background: #ddd;} 
.section03 .slick-arrow {display: block; width: 34px; height: 27px; background-repeat: no-repeat; font-size: 0; border: 0; background-color: transparent;}
.section03 .slick-prev {background-image: url('../img/main/btn_slide_prev.png'); background-position: left center;}
.section03 .slick-next {background-image: url('../img/main/btn_slide_next.png'); background-position: right center;}

.section04 {padding: 150px 0 180px;}
.section04 .title-wrap {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 74px;}
.section04 .section-cont .wrap {position: relative; height: 538px;}
.section04 .items {position: absolute; top: 0; left: 0; width: 1740px; margin: 0 -20px 70px;}
.section04 .item {padding: 0 20px;}
.section04 .img-box {overflow: hidden; border-radius: 5px; border: 1px solid transparent; margin-bottom: 34px; transition: all 0.5s;}
.section04 a:hover .img-box {border: 1px solid #a91515; box-shadow: 0px 10px 30px 0px rgba(116, 116, 116, 0.3);}
.section04 .pic {position:relative; height:0; padding-bottom:66.67%; overflow:hidden; transition:all 0.6s;}
.section04 a:hover .pic {transform: scale(1.06);}
.section04 .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:0.3s;}
.section04 .text-box {padding: 0 8px;}
.section04 .text-box h4 {font-size: 24px; font-weight: 500; line-height: 1.4em; color: #333; height:calc(1.4em * 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; margin-bottom: 21px; transition: all 0.5s;}
.section04 a:hover .text-box h4 {color: #c50909;}
.section04 .text-box .date {position: relative; font-size: 18px; line-height: 1; color: #999; padding-left: 25px;}
.section04 .text-box .date:before {position: absolute; top: 1px; left: 0; content: ''; width: 17px; height: 15px; background: url('../img/main/icon_calendar.png') no-repeat center center;}
.section04 .controler-wrap {display: flex; align-items: center;}
.section04 .bar {width: 100%; margin-right: 100px;}
.section04 .progress {display: block; width: 100%; height: 6px; overflow: hidden; background-color: #f8f8f8; background-image: linear-gradient(to right, #a91515, #a91515); background-repeat: no-repeat; background-size: 0 100%; border-radius: 3px; transition: background-size .6s ease-in-out;}
.section04 .arrows {position: relative; display: flex;}
.section04 .arrows:after {position: absolute; top: 50%; margin-top: -13px; left: 50%; content: ''; width: 1px; height: 26px; background: #ddd;} 
.section04 .slick-arrow {display: block; width: 34px; height: 27px; background-repeat: no-repeat; font-size: 0; border: 0; background-color: transparent;}
.section04 .slick-prev {background-image: url('../img/main/btn_slide_prev.png'); background-position: left center;}
.section04 .slick-next {background-image: url('../img/main/btn_slide_next.png'); background-position: right center;}