.sub_top {height: 870px;}
.sub_top .banner_bg {background: url(/img/sub_top4.png) no-repeat center 30%; background-size: cover;}
.sub_top .top_title {bottom: auto; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(-0.03deg);}

#sec1, #sec3 {padding: 100px 0;}
#sec3 {padding-bottom: 250px;}
#team .team_title {text-align: center; font-size: 2.5em; margin-bottom: 50px;}
#team ul.fff {display: flex; flex-wrap: wrap; align-items: center; width: 103%; margin-left: -1.5%;}
#team ul.fff li {width: 47%; margin: 0 1.5%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 330px; border-radius: 15px; text-align: center; transform: rotate(-0.03deg); position: relative; overflow: hidden;}
#team ul.fff li::before {content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.7s;}
#team ul.fff li:hover::before {transform: scale(1.1);}
#team ul.fff li:nth-child(1), #team ul.fff li:nth-child(2) {margin-bottom: 3%;}
#team #sec1 ul.fff li:nth-child(1)::before {background: url(/img/team1.png) no-repeat center center; background-size:cover;}
#team #sec1 ul.fff li:nth-child(2)::before {background: url(/img/team2.png) no-repeat center center; background-size:cover;}
#team #sec1 ul.fff li:nth-child(3)::before {background: url(/img/team3.png) no-repeat center center; background-size:cover;}
#team #sec1 ul.fff li:nth-child(4)::before {background: url(/img/team4.png) no-repeat center center; background-size:cover;}
#team #sec3 ul.fff li:nth-child(1)::before {background: url(/img/team5.png) no-repeat center center; background-size:cover;}
#team #sec3 ul.fff li:nth-child(2)::before {background: url(/img/team6.png) no-repeat center center; background-size:cover;}
#team #sec3 ul.fff li:nth-child(3)::before {background: url(/img/team7.png) no-repeat center center; background-size:cover;}
#team #sec3 ul.fff li:nth-child(4)::before {background: url(/img/team8.png) no-repeat center center; background-size:cover;}
#team ul.fff li .title {font-weight: bold; font-size: 2.1875em; position: relative;}
#team .culture_wrap ul.fff li .title {font-size: 1.5em;}
#team ul.fff li .light {font-size: 1.125em; margin-top: 25px; line-height: 180%; position: relative; padding: 0 20px;}

#team #sec2 {background: url(/img/team_md.png) no-repeat center center; background-size: cover; height: 500px; display: flex; justify-content: center; align-items: center;}
#team #sec2 h3 {color: #fff; font-size: 3.125em; text-align: center;}

#team #sec3 {background: url(/img/team_bg.png) no-repeat center bottom; background-size: contain;}
#team #sec3 .crew_wrap {padding: 110px 0 150px 0;}
#team #sec3 .crew_box {display: flex; padding: 0 45px;}
#team #sec3 .crew_box .lt .crew_img {position: relative; height: 0; padding-bottom: 125%; overflow: hidden;}
#team #sec3 .crew_box .lt .crew_img:hover img {transform: translate(-50%, -50%) scale(1.05);}
#team #sec3 .crew_box .lt .crew_img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: all 0.7s;}
#team #sec3 .crew_box .rt .crew_img {position: relative; height: 0; padding-bottom: 130%; overflow: hidden;}
#team #sec3 .crew_box .rt .crew_img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: all 0.7s;}
#team #sec3 .crew_box .lt {width: 41%; padding-right: 3%;}
#team #sec3 .crew_box .lt .ceo_txt .flex {margin: 15px 0; align-items: baseline;}
#team #sec3 .crew_box .lt .ceo_txt .flex span {font-size: 1.875rem;}
#team #sec3 .crew_box .lt .ceo_txt .flex span.light {font-size: 1.25rem; color: #aaa; margin-left: 10px;}
#team #sec3 .crew_box .lt .ceo_txt .desc {font-size: 1.0625em; line-height: 170%; transform: rotate(-0.03deg);}
#team #sec3 .crew_box .rt {width: 59%;}
#team #sec3 .crew_box .rt.mo {display: none;}
#team #sec3 .crew_box .rt ul {display: flex; flex-wrap: wrap;}
#team #sec3 .crew_box .rt ul li {
  width: 28.3333%;
  margin: 0 1%;
  margin-bottom: 6.75%;
  position: relative;
}
#team #sec3 .crew_box .rt ul li .textBox {
  opacity: 0;
  position: absolute;
  top: 0;
  right: -90%;
  transform: translateX(18%);
  background: #223a1b;
  color: #fff;
  z-index: -1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15%;
  transition: 0.4s;
  width: 0;
}
#team #sec3 .crew_box .rt ul li .textBox.mo {display: none !important;}
#team #sec3 .crew_box .rt ul li .textBox::after {content: ""; display: block; left: 0; top: 50%; transform: rotate(45deg) translate(-50%); width: 20px; height: 20px; background: #223a1b; position: absolute;}
#team #sec3 .crew_box .rt ul li.left .textBox::after {left: auto; right: -15px;}
#team #sec3 .crew_box .rt ul li.top .textBox::after {left: 50%; top: auto; bottom: -15px;}
#team #sec3 .crew_box .rt ul li.left .textBox {left: -100%; transform: translateX(-18%);}
#team #sec3 .crew_box .rt ul li.top .textBox {left: 0; top: -118%; transform: translateX(0);}
#team #sec3 .crew_box .rt ul li .textBox .cover {opacity: 0; transition: all 0.3s;}
#team #sec3 .crew_box .rt ul li .textBox .cover .name {font-size: 1.5em;}
#team #sec3 .crew_box .rt ul li .textBox .cover .responsibility {font-size: 1.0625em; margin: 6% 0 15% 0; opacity: 0.5;}
#team #sec3 .crew_box .rt ul li .textBox .cover .explain {font-size: 0.9375em;}

#team #sec4 {background: #111; color: #fff; padding-bottom: 100px;}
#team #sec4 .top_img img {margin-top: -150px; width: 100%;}
#team #sec4 .bt_wrap {margin-top: 75px;}
#team #sec4 .bt_wrap li {margin-bottom: 75px;}
#team #sec4 .bt_wrap li .bold {font-size: 1.5em; position: relative; display: inline-block; border-bottom: 1px solid #fff; padding-bottom: 3px; margin-bottom: 20px;}
#team #sec4 .bt_wrap li .light {font-size: 1.0625em; opacity: 0.5;}
#team #sec4 .btn_wrap {display: flex; justify-content: center;}
#team #sec4 .btn_wrap .more_btn {background: #223a1b; color: #fff;}
#team #sec4 .btn_wrap .more_btn::before {background: #fff;}
#team #sec4 .btn_wrap .more_btn:hover {color: #223a1b;}

ul.text-loop {overflow: hidden; height: 120px;position: relative; margin-bottom: 0 !important;}
.text-loop li {width: 100%; height: 120px; position: absolute; top: -100%;}
.text-loop li p {display: block; color: #fff; font-weight: 700; letter-spacing: 0.2px;}
.animation_css {animation: cycle 8s linear infinite;}
/*.text-loop li.loop1 {animation: cycle 8s linear infinite;}
.text-loop li.loop2 {animation: cycle2 8s linear infinite;}
.text-loop li.loop3 {animation: cycle3 8s linear infinite;}
*/
/*.text-loop li.loop4 {animation: cycle4 15s linear infinite;}

.text-loop li.loop5 {animation: cycle5 15s linear infinite;}
.text-loop li.loop6 {animation: cycle6 15s linear infinite;}
.text-loop li.loop7 {animation: cycle7 15s linear infinite;}
*/
/*@keyframes cycle {
  0%  { top: 0; }
  30%  { top: 0; }
  100% { top: 0; opacity: 1; z-index: 0; }
  14.2% { top: 100%; opacity: 0; z-index: 0; }
  21% { top: -100%; opacity: 0; z-index: -1; }
  50% { top: -100%; opacity: 0; z-index: -1; }
  92% { top: -100%; opacity: 0; z-index: 0; }
  96% { top: -100%; opacity: 0; }
  100% { top: 0; opacity: 1; }
}*/

@keyframes cycle {
  /*0% { top: -100%; opacity: 0; z-index: -1; }*/
  0% { top: -100%; opacity: 0; z-index: -1; }
  20%  { top: 0; opacity: 1; z-index: 1; }
  80%  { top: 0; opacity: 1; z-index: 1; }
  100%  { top: 100%; opacity: 0; z-index: -1; }
}
@keyframes cycle2 {
  0%  { top: -100%; opacity: 0; z-index: -1; }
  30%  { top: -100%; opacity: 0; z-index: -1; }
  45%  { top: 0; opacity: 1; z-index: 1; }
  50%  { top: 0; opacity: 1; z-index: 1; }
  60%  { top: 100%; opacity: 0; z-index: -1; }
  100% { top: -100%; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
  0%  { top: -100%; opacity: 0; z-index: -1; }
  55%  { top: -100%; opacity: 0; z-index: -1; }
  60%  { top: 0; opacity: 1; z-index: 1; }
  70%  { top: 0; opacity: 1; z-index: 1; }
  80%  { top: 100%; opacity: 0; z-index: -1; }
  100%  { top: -100%; opacity: 0; z-index: -1; }
}

/* @keyframes cycle4 {
  0% { top: -100%; opacity: 0; }
  37% { top: -100%;  opacity: 0; }
  43% { top: 0; opacity: 1; }
  48% { top: 0; opacity: 1; }
  51% { top: 0; opacity: 1; z-index: 0; }
  57% { top: 100%; opacity: 0; z-index: 0; }
  81% { top: -100%; opacity: 0; z-index: -1; }
  100% { top: -100%; opacity: 0; z-index: -1; }
}

@keyframes cycle5 {
  0% { top: -100%; opacity: 0; }
  51% { top: -100%; opacity: 0; }
  57% { top: 0; opacity: 1; }
  61% { top: 0; opacity: 1; }
  65% { top: 0; opacity: 1; z-index: 0; }
  71.5% { top: 100%; opacity: 0; z-index: 0; }
  100% { top: -100%; opacity: 0; }
}

@keyframes cycle6 {
  0% { top: -100%; opacity: 0; }
  65% { top: -100%; opacity: 0; }
  71.5% { top: 0; opacity: 1; }
  75% { top: 0; opacity: 1; }
  79.6% { top: 0; opacity: 1; z-index: 0; }
  85.6% { top: 100%; opacity: 0; z-index: 0; }
  100% { top: -100%; opacity: 0; }
}

@keyframes cycle7 {
  0% { top: -100%; opacity: 0; }
  79.6% { top: -100%; opacity: 0; }
  85.6% { top: 0; opacity: 1; }
  91% { top: 0; opacity: 1; }
  96% { top: 0; opacity: 1; z-index: 0; }
  100% { top: 100%; opacity: 0; z-index: 0; }
} */


@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 1024px) {
  #team #sec3 .crew_box .lt .ceo_txt .desc {font-size: 0.875em;}
  #team #sec3 .crew_box .lt .ceo_txt .desc br {display: none;}
  #team #sec3 .crew_box .lt .ceo_txt .flex {margin: 5% 0;}
  #team #sec3 .crew_box .rt ul li .textBox .cover .name {font-size: 1.125em;}
  #team #sec3 .crew_box .rt ul li .textBox .cover .responsibility {font-size: 0.875em;}
  #team #sec3 .crew_box .rt ul li .textBox .cover .explain {font-size: 0.75em;}
}

@media screen and (max-width: 768px) {
  .sub_top {height: 400px;}
  .sub_top .banner_bg {background: url(/img/sub_top4.png) no-repeat center 60%; background-size: cover;}
  .sub_top .top_title .bold {font-size: 2.325em; margin-bottom: 0;}
  #sec1, #sec3 {padding: 10% 0;}
  #sec3 {padding-bottom: 20%;}
  #team .team_title {font-size: 2.125em; margin-bottom: 5%;}
  #team ul.fff li .title {font-size: 2em;}
  #team ul.fff li .light {margin-top: 3%; line-height: 170%;}
  #team ul.fff li {width: 100%; height: 270px;}
  #team ul.fff li:nth-child(1), #team ul.fff li:nth-child(2), #team ul.fff li:nth-child(3) {margin-bottom: 3%;}
  #team #sec4 .bt_wrap li .light .br_mo {display: block;}
  #team #sec2 {height: 300px;}
  #team #sec2 h3 {font-size: 2.5em;}
  #team #sec3 .crew_wrap {padding: 10% 0 15% 0;}
  #team #sec3 .crew_box {display: block;}
  #team #sec3 .crew_box .lt {width: 100%; padding-right: 0;}
  #team #sec3 .crew_box .rt {width: 100%;}
  #team #sec3 .crew_box .rt.pc {display: none}
  #team #sec3 .crew_box .rt.mo {display: block;}
  #team #sec3 .crew_box .rt ul li {width: 45%;}
  #team #sec4 .bt_wrap {margin-top: 8%;}
  #team #sec4 .bt_wrap li {margin-bottom: 7%;}
  #team #sec4 .bt_wrap li .bold {font-size: 1.25em; margin-bottom: 10px;}
  #team #sec4 .bt_wrap li .light {font-size: 1em; line-height: 165%;}
  #team #sec4 {padding-bottom: 12%;}
  #team #sec4 .top_img img {margin-top: -15%;}
  #team #sec3 .crew_box .lt {position: relative; margin-bottom: 7%;}
  #team #sec3 .crew_box .lt .ceo_txt {position: absolute; left: 20px; bottom: 20px; width: 90%; mix-blend-mode: hard-light; color: #fff;}
  #team #sec3 .crew_box .lt .ceo_txt .desc br {display: block;}
  #team #sec3 .crew_box .rt {width: 105%; margin-left: -2.5%;}
  #team #sec3 .crew_box .rt ul li .textBox {display: none;}
  #team #sec3 .crew_box .rt ul li .textBox.mo {display: flex !important; justify-content: flex-end; opacity: 1; width: 100%; transform: none; left: auto; right: auto; top: auto; bottom: 0; background: transparent; z-index: 1; color: #fff; padding: 0;}
  #team #sec3 .crew_box .rt ul li .textBox.mo .cover {opacity: 1; transform: rotate(-0.03deg); padding: 12px 15px; background: rgba(34, 58, 27, 0.5);}
  #team #sec3 .crew_box .rt ul li .textBox.mo::after {display: none;}
  #team #sec3 .crew_box .rt ul li .textBox .cover .name {display: inline-block; margin-right: 5px; font-size: 1.325em;}
  #team #sec3 .crew_box .rt ul li .textBox .cover .responsibility {margin: 0 0 3% 0; display: inline-block; font-size: 0.95em;}
  #team #sec3 .crew_box .rt ul li .textBox .cover .explain {font-size: 0.9em;}
  .text-loop li strong {font-size: 2.875em;}
  ul.text-loop {height: 90px;}
  .text-loop li {height: 90px;}
}

@media screen and (max-width: 540px) {
  .sub_top {height: 320px;}
  .sub_top .top_title .bold {font-size: 2.125em;}
  #sec1, #sec3 {padding: 12% 0;}
  #sec3 {padding-bottom: 24%;}
  #team .team_title {font-size: 2em;}
  #team #sec2 {height: 220px;}
  #team #sec2 h3 {font-size: 2.125em;}
  #team #sec3 .crew_wrap {padding: 12% 0 15% 0;}
  #team #sec3 .crew_box {padding: 0 20px;}
  #team #sec4 .btn_wrap {margin-top: 12%;}
  #team ul.fff li {height: 200px; border-radius: 7px;}
  #team .culture_wrap ul.fff li {height: 160px;}
  #team .culture_wrap ul.fff li .title {font-size: 1.325em;}

  #team #sec4 .bt_wrap li .light br {display: none;}
  #team #sec4 .bt_wrap li .light .br_mo {display: none;}
  #team #sec4 .bt_wrap li .light .br_mo.br_540 {display: block;}

/*   .text-loop li p {line-height: 130%;} */
  ul.text-loop {height: 75px;}
  .text-loop li {height: 75px;}
  .text-loop li .br_mo {display: block;}
}

@media screen and (max-width: 414px) {
  #team ul.fff li .light {font-size: 1em;}
  #team #sec2 {height: 200px;}
  #team #sec2 h3 {font-size: 1.875em;}
  #team #sec3 .crew_box .rt ul li .textBox.mo .cover {padding: 10px 12px;}
  .sub_top {height: 250px;}
  .sub_top .top_title {padding: 0;}
  .sub_top .top_title .bold {font-size: 1.7em;}
  ul.text-loop {height: 65px;}
  .text-loop li {height: 65px;}
}