body {
   padding: 0;
   margin: 0;
   font-family: 'Montserrat';
   font-weight: 300;
}
h1,h2,h3,h4,h5,h6,strong{font-weight:500}
p {margin: 0;}

.w400 {font-weight: 400;}
.active {display: block !important;}

.back_dark {
   height: 100%; width: 100%;
   position: absolute;
   top: 0; left: 0;
   background: linear-gradient(to bottom, #000 0%, #000 100%);
   opacity: 0.79;
}
.noise {
   height: 100%; width: 100%;
   position: absolute;
   top: 0; left: 0;
   background-image: url(../img/natural-paper.png);
}

.clear{clear:both}

::-webkit-scrollbar{width: 12px}
::-webkit-scrollbar-thumb{background-color: #5ad0ff;}
::-webkit-scrollbar-track{background-color:#eaeaea}

.section {
   position: relative;
   width: 100%;
   line-height: 1.4;
   padding-top: 0;
   padding-bottom: 0;
   background-size: cover;
   background-position: center;
}
.section_inner {
   position: relative;
   margin: 0 auto;
   max-width: 1170px;
}
.section .title, .section .sub_title {line-height: normal;}
.overhead {color:#A9A9A9; font-size: 17px;}

/* section 1 */

.section1 {
   color: #fff;
   padding-top: 80px;
   padding-bottom: 80px;
}

.section1 .title {
   font-size: 36px;
   font-weight: 600;
   margin-bottom: 24px;
}
.section1 .title span {font-size: 54px;}
.section1 .sub_title {
   font-size: 20px;
   font-weight: 400;
   margin-bottom: 24px;
}
.headliner {max-width: 70%; margin-left: 20px;}

/* section 2 */
.section_descr {
   background-color: #f5f5f5;
   padding-top: 80px;
   padding-bottom: 30px;
}
.section_descr .section_inner {width: 94%;}
.section_descr .title {text-align: center;}
.section_descr .title p {margin-bottom: 10px;}
.section_descr .text {font-size: 18px;}
.section_descr .text p {text-indent: 14px;}
.section_descr .title p:last-child {margin-bottom: 40px;}

/* section 3 */
.section4 {padding-top: 40px;}
.section4 .section_inner{max-width:940px}
.section4 .title{text-align: center; font-size: 42px; margin-bottom: 60px}
.section4 .col_2{padding-bottom:40px}
.section4 .col1{float: right; width:75%}
.section4 .col2{float: left; width:15%}
.section4 .arr1{position: relative; padding-bottom: 20px}
.section4 .arr1 .extra_descr{margin-top:6px;text-align:right;font-weight:500;font-size:20px}
.section4 .arr1 .title{font-size:20px!important;margin-bottom:10px;margin-top:7px}
.section4 .arr1 .line{position:absolute;top:45px;left:20%;height:calc(100% - 50px);width:1px;background:#006699}
.section4 .arr1 .mdico{
   position:absolute;
   width:40px;height:40px;
   text-align:center;
   line-height:40px;
   top:0;left:20%;
   margin-left:-20px;
   background:#006699;
   border-radius:25px;
   color:#fff;
   font-size:20px;
   animation-name:big_icon;
   animation-duration:1s;
   animation-timing-function:linear;
   animation-iteration-count:5;
}
.section4 .arr1:first-child .mdico{animation-delay:4s}
.section4 .arr1:nth-child(2) .mdico{animation-delay:5s}
.section4 .arr1:nth-child(3) .mdico{animation-delay:6s}
.section4 .arr1:nth-child(4) .mdico{animation-delay:7s}
.section4 .arr1:nth-child(5) .mdico{animation-delay:8s}
.section4 .arr1:nth-child(6) .mdico{animation-delay:9s}
.section4 .arr1:nth-child(7) .mdico{animation-delay:10s}
.section4 .arr1:last-child{border:none;margin-bottom:0;padding-bottom:0}
.section4 .arr1:last-child .line{display:none}

/* section 4 */
.section3 {
   padding-top: 40px;
   padding-bottom: 40px;
}
.section3 .title{text-align:center;font-size:42px;margin-bottom:60px}
.section3 .arr1{position:relative; margin-bottom:40px; display:flex; justify-content:space-between; align-items:center;}
.section3 .arr1 .image1 {
   padding: 0;
   height: 360px;
   background-size: cover;
   background-position: center;
}

.section3 .col_2{width: 50%; padding:30px}
.section3 .arr1:nth-child(2n){flex-direction:row-reverse;justify-content:flex-end}
.section3 .col_2 .descr {font-weight: 400; font-size: 24px;}
.section3 .col_2 .txt {font-size: 17px;}

/* section 5 */
.section5 {background-color:#f5f5f5; padding-top: 60px;}
.section5 .title{text-align:center;font-size:28px;margin-bottom:10px; margin-left: auto; margin-right: auto; width: 98%;}
.section5 .arr1{display:flex; justify-content:space-between; flex-wrap:nowrap; flex-direction:row; margin-top:30px; margin-left: auto; margin-right: auto; width: 98%;}
.section5 .col_2{background-color:#fff;padding:25px;width:calc(50% - 20px);position:relative;margin-bottom:20px;box-sizing:border-box;}
.section5 .difference_head {
   font-size: 24px;
   font-weight: 400;
   /* text-indent: 10px; */
   text-align: center;
}
.section5 .difference_desc p {font-size: 17px}

/* section 6 */
.section6 {padding-top: 40px; padding-bottom: 40px;}
.section6 .arr1 {display: flex; flex-direction: row-reverse;}

.section6_image {
   height: 600px; width: 600px;
   background-image: url(../img/anime/0.jpg);
   background-position: center;
   background-size: cover;
}
.section6 .right {
   position: relative;
   padding: 40px 50px;
   margin-top: 40px;
   background-color: #f2f2f2;
   max-width: 500px;
   margin-right: -40px;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.section6 .title {
   font-size: 42px;
   margin-bottom: 28px;
}
.section6 .txt {
   font-size: 17px;
   margin: 10px 0;
}
.section6 .txt span {
   padding: 8px;
   border-radius: 16px;
   cursor: pointer;
}

/* section 7 */
.section7 {padding-top: 80px; padding-bottom: 80px; border-bottom: #fff 2px solid; background-attachment: fixed;}
.section7 .section_inner{background:#fff;padding:40px;}
.section7 .title{text-align:center;font-size:42px;margin-bottom:30px}
.section7 .col_1{width:100%;max-width:640px;position:relative;margin:0 auto 10px}
.section7 .overlay_image_box{padding:10px 0;box-sizing:border-box;transition:top 1s ease-out 3s;width:100%}
.section7 .overlay_image_title {text-align:center; font-size:24px;}
.section7 .overlay_image_subtitle {text-align:center; font-size:17px;}
.section7 .slider_wrapper{position:relative; margin: 0 auto; max-width: 700px;}
.section7 .arr1{margin-top: 50px;}
.section7 .image{width:220px; height:220px; margin:0 auto;}
.section7 .image img{max-width:100%; width:100%; border-radius: 50%; pointer-events: none;}
.section7 .go_left, .go_right{
   position:absolute;
   display:block;
   width:50px; height:50px;
   border-radius:20px;
   top:150px;
   font-size:48px;
   line-height:50px;
   text-align:center;
   opacity:.5;
   cursor:pointer;
   z-index:60
}
.section7 .go_right{right:0}
.section7 .go_left{left:0}
.section7 .go_left:hover,.section7 .go_right:hover{opacity:1}
.section7 .slide {display: none;}

.go_left {
   background-image: url(../img/arr_left.png);
   background-size: cover;
}
.go_right {
   background-image: url(../img/arr_right.png);
   background-size: cover;
}

/* section 8 */
.section8 {
   padding-top: 80px;
   padding-bottom: 80px;
   color: #fff;
   background: url(../img/anime/bg02.jfif) center no-repeat;
}
.section8 .back_dark {opacity:0.73; background:linear-gradient(to bottom,#000000 0%,#000000 100%);}
.section8 .title{text-align:center; font-size:54px; margin-bottom:10px;}
.section8 .sub_title{text-align:center; font-size:30px; margin-bottom:40px;}
.section8 .images{margin-left:-20px; display:flex; justify-content:space-evenly; flex-wrap:wrap;}
.section8 .image_box{
   position:relative;
   width:172px; height:120px;
   margin-left:20px;
   transition:.3s;
   filter:grayscale(100%) invert(1);
}
.section8 .image_box:hover{filter:unset}
.section8 .image_box .img1153{height:100%; width:100%; cursor: pointer;}


.addendum {font-size: 20px;}
.addendum li::marker {
   content: '+ ';
   font-style: italic;
   color: #eaeaea;
}
.addendum li:hover, .addendum li:hover::marker {color: #5ad0ff; cursor: default;}


/* media */
@media (max-width:1200px) {
   .section6 .arr1 {justify-content: space-evenly;}
   .section6 .right {width: 300px;}
}
@media (max-width:960px) {
   .overhead {font-size: 24px;}
   .section1 .headliner {
      max-width: 90%;
      margin: 0 auto;
      padding: 60px 0;
   }

   .section6 .arr1 {
      flex-direction: column-reverse;
      width: 600px;
      margin: 0 auto;
   }
   .section6 .right {width: auto;}
}
@media (max-width:800px) {
   .section1 .title {font-weight: 300;}
   .section3 .arr1, .section3 .arr1:nth-child(2n) {flex-direction: column;}
   .section3 .col_2 {width: 555px;}
   .section4 .arr1 .line, .section4 .arr1 .mdico {left: 15%;}
   .section4 .col2 {width: 10%;}
   .section4 .col1 {width: 80%;}
   .section5 .arr1 {flex-direction: column; width: 90%; margin-top: 0;}
   .section5 .col_2 {width: 100%;}
}

@media (max-width:620px) {
   .section4 .arr1 .line, .section4 .arr1 .mdico, .section4 .col2 {display: none;}
   .section4 .col1 {float: none; width: 94%; margin: 0 auto;}
   .section3 .col_2 {padding: 0; width: 94%;}
   .section5 .arr1, .section6 .arr1 {width: 94%;}
   .section6_image {width: 100%;}
   .section6 .right {padding: 0; margin-right: 0;}
   .section8 {background: #fff; color: black;}
   .section8 .back_dark {display: none;}
   .addendum {padding-left: 20px;}
   .addendum li::marker {color: #0fa54a;}
}
@media (max-width:440px) {
   .section1 .title span {font-size: 36px;}
}