@charset "UTF-8";

#issue {
  display: none;
}

body.start #header {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: -webkit-transform 0.4s 0.5s;
  transition: -webkit-transform 0.4s 0.5s;
  transition: transform 0.4s 0.5s;
  transition: transform 0.4s 0.5s, -webkit-transform 0.4s 0.5s;
}
body.start #visual {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 0.6s 0s;
  transition: all 0.6s 0s;
}
body.start #visual .slogan_box .slogan1 {
  -webkit-transform: translateX(0rem);
          transform: translateX(0rem);
  opacity: 1;
  -webkit-transition: all 0.7s 0.8s;
  transition: all 0.7s 0.8s;
}
body.start #visual .slogan_box .slogan2 {
  -webkit-transform: translateX(0rem);
          transform: translateX(0rem);
  opacity: 1;
  -webkit-transition: all 0.7s 1s;
  transition: all 0.7s 1s;
}
body.start #visual .slogan_box .slogan3 {
  -webkit-transform: translateX(0rem);
          transform: translateX(0rem);
  opacity: 1;
  -webkit-transition: all 0.7s 1.2s;
  transition: all 0.7s 1.2s;
}
body.start #visual .slogan_box .desc {
  -webkit-transform: translateX(0rem);
          transform: translateX(0rem);
  opacity: 1;
  -webkit-transition: all 0.7s 1.4s;
  transition: all 0.7s 1.4s;
}
body.start #visual .img_box .visual_ob2 {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 1;
  height: inherit;
  -webkit-transition: all 1.2s ease-in-out 0.1s;
  transition: all 1.2s ease-in-out 0.1s;
}
body.start #visual .use_info {
  opacity: 1;
  -webkit-transition: opacity 1s 1.4s;
  transition: opacity 1s 1.4s;
}
body.start #section1 {
  opacity: 1;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  -webkit-transition: all 0.6s 1.2s;
  transition: all 0.6s 1.2s;
}


#header {
  position: absolute;
  height: 9.8rem;
  -webkit-transform: translate(0, -8.5rem);
          transform: translate(0, -8.5rem);
  color: rgb(100, 57, 57);
}
#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#header .search .control.open {
  display: block;
  color: #fff;
  bottom: 3.2rem;
  font-size: 2.5rem;
}
#header .submenu {
  color: #333;
}
#header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
#header.fixed #gnb1 > ul > li > a {
  color: #333;
}
#header.fixed #logo a::before {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#header.fixed #logo img {
  opacity: 1;
}
#header.fixed #hnb li {
  color: #333;
}
#header.fixed #gnb2.active .control::after, #header.fixed #gnb2.active .control::before {
  background: none;
}
#header.fixed #gnb2 .control {
  border-color: #3b3b3b;
}
#header.fixed #gnb2 .control::after, #header.fixed #gnb2 .control::before {
  background-color: #3b3b3b;
}
#header.fixed .search .control.open {
  color: #3b3b3b;
}
#header.active {
  color: #333;
}
#header.active::before {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#header.active #hnb li {
  color: #333;
}
#header.active #logo a::before {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#header.active #logo img {
  opacity: 1;
}
#header.active #gnb1 > ul > li > a {
  color: #333;
}
#header.active .search .control.open {
  color: #3b3b3b;
}
#header.active .submenu {
  color: #333;
}

#logo {
  position: relative;
  margin-top: 2.3rem;
}
#logo a::before {
  content: "";
  position: absolute;
  top: .6rem;
  width: 100%;
  height: 100%;
  background: url("../img/layout/logo_on.png") no-repeat 0 0;
  background-size: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#logo img {
  opacity: 0;
}

#hnb {
  top: 4rem;
}
#hnb li {
  color: #fff;
}

#gnb1 > ul {
  display: block;
  margin-top: 4rem;
}
#gnb1 > ul > li {
  display: inline-block;
}
#gnb1 > ul > li > a {
  font-size: 1.8rem;
  color: #fff;
}

.translated-ltr #gnb1 > ul > li > a {
  font-size: 1.4rem;
  color: #fff;
}


#gnb2 .control {
  border-color: #fff;
  bottom: 3.7rem;
}
#gnb2 .control::after, #gnb2 .control::before {
  background-color: #fff;
}

#header.active #gnb2 .control {
  border-color: #222;
}
#header.active #gnb2 .control::after, #header.active #gnb2 .control::before {
  background-color: #222;
}

#section2,
#section3 .slide,
#section4, #section7,
#section5 .wrap {
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  opacity: 0;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

#section1 .scroll_info {
  opacity: .8;
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  width: 5rem;
  -webkit-transform: translateX(-2.5rem);
          transform: translateX(-2.5rem);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 1.7rem;
}
#section1 .scroll_info i {
  display: block;
  -webkit-animation: opacity_M 2s infinite ease-in;
          animation: opacity_M 2s infinite ease-in;
  font-size: 2.5rem;
}
#section1 .control {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  max-width: 48.9rem;
  height: 8rem;
  padding: 3rem 6rem 0 0;
  background-color: #fff;
  z-index: 1;
  text-align: right;
}
#section1 .control > * {
  display: inline-block;
  vertical-align: top;
}
#section1 .control .btns {
  position: relative;
  width: 2rem;
  height: 2rem;
}
#section1 .control .btns button {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  line-height: 2rem;
  text-align: center;
  overflow: hidden;
  color: #3B3B3B;
}
#section1 .control .btns button.active {
  display: block;
}
#section1 .control .btns button::before {
  font-family: "xeicon";
  display: block;
  font-size: 2rem;
}
#section1 .control .btns button.play::before {
  content: "\ea3e";
}
#section1 .control .btns button.pause::before {
  content: "\ea3b";
}
#section1 .control .nav {
  margin-right: 2.5rem;
}
#section1 .control .nav li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  line-height: 2rem;
}
#section1 .control .nav li::before {
  content: "";
  position: absolute;
  display: none;
  top: 0.7rem;
  right: -10rem;
  width: 7.8rem;
  height: 5px;
  background-color: #E6E6E6;
}
#section1 .control .nav li::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -10rem;
  display: none;
  width: 7.8rem;
  height: 5px;
  background-color: #000000;
  -webkit-transform: translateX(-3.9rem) scaleX(0);
          transform: translateX(-3.9rem) scaleX(0);
}
#section1 .control .nav li button {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
}
#section1 .control .nav li + li {
  margin-left: 1.5rem;
}
#section1 .control .nav li.on {
  margin-right: 11.5rem;
}
#section1 .control .nav li.on::before {
  display: block;
}
#section1 .control .nav li.on::after {
  display: block;
}
#section1 .control .nav.active li.on::after {
  -webkit-transform: translateX(0) scaleX(100%);
          transform: translateX(0) scaleX(100%);
  -webkit-transition: all 10s linear;
  transition: all 10s linear;
}

#visual {
  position: relative;
  font-size: 0;
}
#visual .v_slide img {
  width: 100%;
}
#visual .v_slide.type2 .txt {
  top: 47%;
  z-index: 2;
}
#visual .v_slide.type2 .tit {
  font-size: 5.2rem;
  line-height: 7.3rem;
}
#visual .v_slide.type2 .s_word {
  font-size: 5.1rem;
  line-height: 7.9rem;
}
#visual .v_slide.type3 .txt {
  top: 46%;
}
#visual .v_slide.type3 .tit {
  margin-bottom: 3rem;
}
#visual .v_slide.type3 .info {
  line-height: 4.3rem;
  font-size: 2.5rem;
}
#visual .v_slide.type3 .btn {
  background-color: #000;
  color: #B3B3B3;
  border: 0 none;
  padding: 0 2rem;
}
#visual .v_slide.type3 .btn i {
  margin-left: 0.5rem;
  font-size: 1.7rem;
}
#visual .v_slide.type3 .live_icon {
  display: block;
  width: 10.5rem;
  height: 4.4rem;
  background: url("../img/main/live_icon.svg") no-repeat center 100%;
  margin-bottom: 2rem;
}


.html5-video-player a{opacity: 0 !important; display: none;}
:not(.ytp-mweb-player) .ytp-watermark:not(.ytp-no-hover):not(.ytp-muted-autoplay-watermark):hover{opacity: 0 !important;}

#visual .mov::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#visual .mov iframe {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 130%;
}
#visual .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 128rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
}
#visual .txt .tit {
  font-size: 3.5rem;
  line-height: 1.6;
}
#visual .txt.type1 .tit {
  font-weight: 600;
}
#visual .txt .s_word {
  line-height: 15rem;
  opacity: 0.6;
  font-size: 4.5rem;
  font-weight: 900;
}

#visual .txt .bul {
  margin-top: 3.5rem;
}
#visual .txt .bul li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 100;
}
#visual .txt .bul li::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #7b7b7b;
  border-radius: 1px;
}
#visual .txt .bul li + li {
  margin-top: 1.5rem;
}
#visual .txt .bul li strong {
  display: inline-block;
  margin-right: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
#visual .txt .btn {
  display: inline-block;
  min-width: 15.6rem;
  padding: 0 2rem;
  margin-top: 5rem;
  line-height: 5.1rem;
  border: 1px solid rgba(255, 255, 255, 0.23);
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  font-size: 1.6rem;
}
#visual .txt .btn i {
  float: right;
  line-height: 5.1rem;
}
#visual .txt .btn:hover, #visual .txt .btn:focus {
  border-color: white;
  color: white;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#visual .txt .form {
  max-width: 45rem;
  margin-top: 6rem;
  line-height: 6rem;
  border: 2px solid #fff;
  border-radius: 5rem;
  padding: 0 3rem;
}
#visual .txt .form .form_select {
  position: relative;
  width: 10rem;
  display: inline-block;
  margin-right: 2rem;
  font-size: 1.7rem;
  vertical-align: middle;
}
#visual .txt .form .form_select::before {
  content: "\ea4d";
  position: absolute;
  right: 0;
  top: 0;
  font-family: "remixicon";
}
#visual .txt .form .form_select select {
  background: none;
  color: #fff;
  font-size: 1.7rem;
  border: 0 none;
}
#visual .txt .form input[type=text] {
  width: calc(100% - 3rem);
  background: none;
  color: #fff;
  border: 0 none;
  height: 6rem;
  line-height: 6rem;
  font-size: 2rem;
}
#visual .txt .form input[type=text]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#visual .txt .form input[type=text]::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#visual .txt .form input[type=text]:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#visual .txt .form input[type=text]::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#visual .txt .form input[type=text]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#visual .txt .form button {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  color: #fff;
  vertical-align: middle;
  overflow: hidden;
}
#visual .txt .form button i {
  display: block;
  line-height: 3rem;
  font-size: 2.1rem;
}

#section2 .control,
#section3 .control {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
#section2 .control > *,
#section3 .control > * {
  display: inline-block;
  vertical-align: top;
}
#section2 .control button,
#section3 .control button {
  width: 4.3rem;
  height: 4.3rem;
  line-height: 4.3rem;
  text-align: center;
  overflow: hidden;
  color: #3B3B3B;
}
#section2 .control button::before,
#section3 .control button::before {
  display: block;
  font-family: "xeicon";
  font-size: 2rem;
}
#section2 .control button.prev::before,
#section3 .control button.prev::before {
  content: "\e93b";
}
#section2 .control button.next::before,
#section3 .control button.next::before {
  content: "\e93e";
}
#section2 .control .paging,
#section3 .control .paging {
  line-height: 4.3rem;
}
#section2 .control .paging .now,
#section3 .control .paging .now {
  font-weight: 600;
}
#section2 .control .more,
#section3 .control .more {
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 100%;
  background-color: #F4F4F4;
  color: #777;
  overflow: hidden;
  text-align: center;
}
#section7 .more i,
#section2 .control .more i,
#section3 .control .more i {
  display: block;
  font-size: 2rem;
  line-height: 4.3rem;
}

#section2 {
  position: relative;
  padding-top: 9rem;
  width: 1280px;
  max-width: calc(100% - 4rem);
  margin: 0 auto;
}
#section2::before {
  content: "";
  position: absolute;
  top: 29rem;
  left: -500%;
  background-color: #F3F6F9;
  width: 1000%;
  height: 34.2rem;
}
#section2 .tit_box {
  display: inline-block;
  width: 33rem;
  padding-right: 10rem;
  vertical-align: top;
}
#section2 h3.title {
  font-size: 3.6rem;
  font-weight: 900;
  color: #222;
  margin-top: 3.2rem;
}

.tab_wrap {
  position: relative;
  font-size: 0;
  overflow: hidden;
  height: 54.7rem;
}
.tab_wrap .tit_box {
  display: inline-block;
  width: 33rem;
  padding-right: 10rem;
  vertical-align: top;
}
.tab_wrap .s_tit {
  color: #777777;
  line-height: 2.3rem;
  margin-top: 1.4rem;
  font-size: 1.6rem;
}
.tab_wrap > ul {
  position: relative;
  display: inline-block;
  width: calc(100% - 33rem);
  height: 47.4rem;
  font-size: 1.6rem;
}
.tab_wrap > ul li {
  height: 47.4rem;
}
.tab_wrap > ul li .tab_cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40rem;
  visibility: hidden;
  opacity: 0;
}
.tab_wrap > ul li.active .tab_cont {
  visibility: visible;
  opacity: 1;
}
.tab_wrap > ul li.active .tab_btn {
  font-weight: 600;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
  background-color: #46A022;
}
.tab_wrap > ul li.active .tab_btn::after, .tab_wrap > ul li.active .tab_btn::before {
  opacity: 1;
}
.tab_wrap > ul li.active .tab_btn::before {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.tab_wrap > ul li:nth-child(0) .tab_btn {
  top: 18.6rem;
}
.tab_wrap > ul li:nth-child(1) .tab_btn {
  top: 23.5rem;
}
.tab_wrap > ul li:nth-child(2) .tab_btn {
  top: 28.4rem;
}
.tab_wrap > ul li:nth-child(3) .tab_btn {
  top: 33.3rem;
}
.tab_wrap > ul li:nth-child(4) .tab_btn {
  top: 38.2rem;
}
.tab_wrap > ul li:nth-child(5) .tab_btn {
  top: 43.1rem;
}
.tab_wrap .tab_btn {
  position: absolute;
  left: -34.8rem;
  top: 18.6rem;
  min-width: 16.4rem;
  text-align: left;
  font-size: 2rem;
  color: #252525;
  font-weight: 300;
  padding: 0 3.5rem 0 1.8rem;
  line-height: 4.5rem;
  border-radius: 5rem;
}
.tab_wrap .tab_btn::before {
  content: "\e907";
  font-family: "xeicon";
  position: absolute;
  right: 0.5rem;
  opacity: 0;
  font-weight: 100;
  -webkit-transform: translateX(-0.3rem);
          transform: translateX(-0.3rem);
  color: #fff;
}
.tab_wrap .tab_btn:hover, .tab_wrap .tab_btn:focus {
  font-weight: 600;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
  background-color: #46A022;
}
.tab_wrap .tab_btn:hover::after, .tab_wrap .tab_btn:hover::before, .tab_wrap .tab_btn:focus::after, .tab_wrap .tab_btn:focus::before {
  opacity: 1;
}
.tab_wrap .tab_btn:hover::before, .tab_wrap .tab_btn:focus::before {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.recent {
  overflow: visible;
}
.recent .slide {
  padding-top: 7rem;
}
.recent .r_slide .thumb {
  display: block;
  width: 21.2rem;
  height: 28.7rem;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}
.recent .r_slide .thumb img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.recent .r_slide strong {
  display: block;
  height: 9.8rem;
  text-align: center;
  margin: 2.3rem 0 1.1rem;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.recent .r_slide strong .label {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.recent .r_slide a:hover .thumb, .recent .r_slide a:focus .thumb {
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.recent .r_slide a:hover .thumb img, .recent .r_slide a:focus .thumb img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.recent .r_slide a:hover strong, .recent .r_slide a:focus strong {
  text-decoration: underline;
}
.recent .slick-slide {
  width: 21.2rem;
  margin-right: 2.7rem;
}

#section3 {
  position: relative;
  width: 1280px;
  max-width: calc(100% - 4rem);
  margin: 0 auto;
  padding-bottom: 7rem;
}
#section3 .tit_box {
  display: inline-block;
  width: 33rem;
  padding-right: 10rem;
  vertical-align: top;
}
#section3 h3.title {
  font-size: 3.6rem;
  font-weight: 900;
  color: #222;
  margin-top: 3.2rem;
}
#section3 .interactive {
  position: relative;
  font-size: 0;
  padding-top: 8rem;
  padding-bottom: 7rem;
}
#section3 .interactive::before {
  content: "";
  position: absolute;
  left: -23rem;
  top: 2rem;
  width: 35.7rem;
  height: 40.8rem;
  background: url("../img/main/interactive_bg.png") no-repeat 100%;
}
#section3 .interactive .tit_box {
  padding-right: 9rem;
}
#section3 .interactive .tit_box h3.title {
  font-weight: 400;
  font-size: 3.3rem;
  margin-top: 1.5rem;
}
#section3 .interactive .tit_box h3.title b {
  display: block;
  font-weight: 900;
}
#section3 .interactive .tit_box .s_tit {
  color: #777777;
  line-height: 2.6rem;
  margin-top: 1.4rem;
  font-size: 1.6rem;
}
#section3 .interactive .control {
  top: auto;
  bottom: 0;
}
#section3 .interactive .bar {
  position: absolute;
  bottom: 2rem;
  left: 0;
  height: 4px;
  width: calc(100% - 19rem);
  max-width: 108rem;
}
#section3 .interactive .bar .b_total {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #F0F0F0;
}
#section3 .interactive .bar .b_num {
  position: absolute;
  height: 100%;
  z-index: 1;
  -webkit-transition: width 0.4s;
  transition: width 0.4s;
  background: transparent linear-gradient(91deg, #C3CD2A 0%, #45A022 100%) 0% 0% no-repeat padding-box;
}
#section3 .interactive .inter_slide {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 33rem);
  font-size: 1.6rem;
}
#section3 .interactive .i_slide {
  margin-right: 2rem;
}
#section3 .interactive .i_slide a {
  position: relative;
  display: block;
  width: 30.2rem;
  height: 21.5rem;
  padding: 1.6rem 2.8rem;
  border: 1px solid #ddd;
  overflow: hidden;
}
#section3 .interactive .i_slide a::after {
  content: "바로가기 \e90b";
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  font-family: "xeicon";
  font-size: 1.5rem;
  opacity: 0;
  color: #fff;
}
#section3 .interactive .i_slide a > img {
  display: block;
  width: 8.2rem;
  height: 8.2rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a .label {
  position: absolute;
  right: 1.6rem;
  top: 2rem;
  line-height: 3rem;
  padding: 0 1rem;
  color: #fff;
  border-radius: 3rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a .label.type1 {
  background-color: #46A022;
}
#section3 .interactive .i_slide a .label.type2 {
  background-color: #2E2E2E;
}
#section3 .interactive .i_slide a .s_tit {
  display: block;
  margin-top: 0.9rem;
  font-size: 1.5rem;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a .tit {
  display: block;
  margin-top: 1rem;
  font-size: 1.8rem;
  line-height: 2.5rem;
  color: #333;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a .txt {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a:hover, #section3 .interactive .i_slide a:focus {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a:hover > img, #section3 .interactive .i_slide a:hover .label, #section3 .interactive .i_slide a:focus > img, #section3 .interactive .i_slide a:focus .label {
  opacity: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a:hover::after, #section3 .interactive .i_slide a:focus::after {
  opacity: 0.7;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a:hover .s_tit, #section3 .interactive .i_slide a:hover .tit, #section3 .interactive .i_slide a:focus .s_tit, #section3 .interactive .i_slide a:focus .tit {
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a:hover .txt, #section3 .interactive .i_slide a:focus .txt {
  -webkit-transform: translateY(-6rem);
          transform: translateY(-6rem);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a:hover .more, #section3 .interactive .i_slide a:focus .more {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section3 .interactive .i_slide a .more {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  z-index: -1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#section4 {
  position: relative;
  padding: 8rem 0;
}
#section4::before {
  /*content: "";*/
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27.2rem;
  height: 28.9rem;
  background: url("../img/main/bg01.png") no-repeat;
  z-index: -1;
}
#section4::after {
  /*content: "";*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 37.3rem;
  background: transparent -webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(#F1F5ED)) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(0deg, #FFFFFF 0%, #F1F5ED 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
}
#section4 h3 {
  color: #000;
  font-size: 3rem;
  font-weight: 900;
}
#section4 .more {
  position: absolute;
  right: 0;
  top: 0;
  width: 4.3rem;
  height: 4.3rem;
    background-color: #F4F4F4;
  text-align: center;
  overflow: hidden;
  border-radius: 100%;
}
#section4 .more i {
  display: block;
  line-height: 4.3rem;
  -webkit-transform: scale(1) translate(0);
          transform: scale(1) translate(0);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
#section4 .more:hover i {
  -webkit-transform: scale(1.2) translate(-1%, -1%);
          transform: scale(1.2) translate(-1%, -1%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
#section4 > * {
  max-width: 1280px;
  margin: 0 auto;
}
#section4 .box1 {
  position: relative;
  width: 1280px;
  max-width: calc(100% - 4rem);
}
#section4 .box1 h3 {
  margin-bottom: 3rem;
}
#section4 .box1 ul {
  width: calc(100% + 4rem);
  margin: 0 -2rem;
  font-size: 0;
}
#section4 .box1 ul li {
  display: inline-block;
  width: 33.3333333333%;
  padding: 0 2rem;
  font-size: 1.6rem;
}
#section4 .box1 ul li a {
  display: block;
  border: 1px solid #cdcdcd;
}
#section4 .box1 ul li a:hover .txt strong, #section4 .box1 ul li a:focus .txt strong {
  text-decoration: underline;
}
#section4 .box1 ul li a:hover i img, #section4 .box1 ul li a:focus i img {
  -webkit-transform: scale(1.05) translate(-48%, -48%);
          transform: scale(1.05) translate(-48%, -48%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
#section4 .box1 ul li i {
  position: relative;
  display: block;
  width: 100%;
  max-width: 40rem;
  height: 28.3rem;
  overflow: hidden;
  background: #ededed;
}
#section4 .box1 ul li i img {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: scale(1) translate(-50%, -50%);
          transform: scale(1) translate(-50%, -50%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  width: 100%;
}
#section4 .box1 ul li .txt {
  background-color: #fff;
  padding: 3rem;
  height: 12rem;
}
#section4 .box1 ul li .txt span {
  display: block;
  font-size: 1.5rem;
  color: #777;
  margin-bottom: 1rem;
}
#section4 .box1 ul li .txt strong {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  height: 6rem;
  font-size: 2rem;
  line-height: 3rem;
}


#section7 {
  position: relative;
  padding: 5rem 0;
  border-bottom: 20px solid #f3f6f9;
}

#section7 .box2 {
  font-size: 0;
  width: 1280px;
  max-width: calc(100% - 4rem);
  margin:0 auto;
}
#section7 .box2 > * {
  position: relative;
  font-size: 1.6rem;
  vertical-align: top;
}
#section7 .box2 .notice_tab {
  padding-top: 6rem;
  max-width: 1280px;
}
#section7 .box2 .notice_tab::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 6rem;
}
#section7 .box2 .notice_tab .tab_cont {
  display: none;
}
#section7 .box2 .notice_tab .active .tab_cont {
  display: block;
}
#section7 .box2 .notice_tab .active .tab_btn {
  font-weight: 900;
  color: #000;
}
#section7 .box2 .notice_tab > ul > li .tab_btn {
  top: 0.5rem;
}
#section7 .box2 .notice_tab > ul > li:first-child .tab_btn {
  left: 0rem;
}
#section7 .box2 .notice_tab > ul > li:nth-child(2) .tab_btn {
  left: 13rem;
}
#section7 .box2 .notice_tab > ul > li:nth-child(3) .tab_btn {
  left: 25.8rem;
}
#section7 .box2 .notice_tab > ul > li + li .tab_btn::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: -1.3rem;
  width: 2px;
  height: 12px;
  background-color: #D5D5D5;
}
#section7 .box2 .incruit {
  width: calc(100% - 52rem);
  padding-left: 8rem;
}
#section7 .box2 h3 {
  border-bottom: 2px solid #000;
  padding-bottom: 1.5rem;
}
#section7 .box2 .more {
  background-color: #F4F4F4;
  position: absolute;
    right: 0;
    top: 0;
    width: 4.3rem;
    height: 4.3rem;
    text-align: center;
    overflow: hidden;
    border-radius: 100%;
}
#section7 .box2 .tab_btn {
  position: absolute;
  color: #777;
  font-size: 3rem;
  font-weight: 600;
}
#section7 .box2 .notice_list {
  padding-top: 0.5rem;
}
#section7 .box2 .notice_list li {
  margin-top: 2rem;
  line-height: 2.4rem;
}
#section7 .box2 .notice_list li .tit {
  font-size: 2rem;
  max-width: calc(100% - 9.5rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333;
  float: left;
}
#section7 .box2 .notice_list li .tit .label {
  padding: 0 0.9rem;
  margin-right: 1.2rem;
  color: #fff;
  background-color: #000;
  border-radius: 2px;
  font-size: 1.5rem;
  font-weight: 100;
}
#section7 .box2 .notice_list li .tit .label.label01 {
  background-color: #46A022;
}
#section7 .box2 .notice_list li .tit .label.label02 {
  background-color: #4D4D4D;
}
#section7 .box2 .notice_list li .tit .label.label03 {
  background-color: #323A7B;
}
#section7 .box2 .notice_list li .date {
  float: right;
  font-size: 1.8rem;
  color: #777;
}
#section7 .box2 .notice_list li::after {
  content: "";
  display: block;
  clear: both;
}
#section7 .box2 .notice_list a:hover .tit, #section7 .box2 .notice_list a:focus .tit {
  text-decoration: underline;
}
#section7 .box2 .notice_list a:hover .tit .label, #section7 .box2 .notice_list a:focus .tit .label {
  text-decoration: none;
}

#section5 {
  background-color: #f3f6f9;
  padding: 6rem 0;
}
#section5 .wrap {
  width: 1280px;
  max-width: calc(100% - 4rem);
  margin: 0 auto;
}
#section5 .wrap > div {
  float: left;
  width: calc((99.9% - 8.4rem) / 3);
  min-height: 25.4rem;
}
#section5 .wrap > div + div {
  margin-left: 4.2rem;
}
#section5 .wrap::after {
  content: "";
  display: block;
  clear: both;
}
#section5 .pop {
  position: relative;
}
#section5 .pop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  opacity: 0.3;
  height: 3rem;
}
#section5 .pop .slick-list a{position: relative;}
#section5 .pop .slick-list a:focus:before{border:2px dashed #fff}
#section5 .pop .slick-list a:before{content: ''; width: calc(100% - 2px); min-height: 25.4rem; height: 100%; position: absolute; z-index: 1;}
#section5 .pop .slick-dots {
  position: absolute;
  top: 0.6rem;
  right: 3rem;
  padding: 0;
  font-size: 0;
  z-index: 1;
}
#section5 .pop .slick-dots li {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  font-size: 1.5rem;
}
#section5 .pop .slick-dots li button{display: block; width: 2rem; height: 2rem; padding: .1rem; border-radius: .2rem;border: 1px solid transparent; overflow: hidden;}
#section5 .pop .slick-dots li button::before {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  content: "";
  display: block;
  margin: 0.4rem;
  width: 0.8rem;
  opacity: 0.7;
  height: 0.8rem;
  background-color: #fff;
  
}
#section5 .pop .slick-dots li button:focus{outline: none; border:1px dashed #fff}
#section5 .pop .slick-dots li.slick-active button:before {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.2rem;
  border: 0.3rem solid #fff;
  opacity: 1;
  background: none;
  border-radius: 100%;
}
#section5 .pop .control {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  z-index: 1;
}
#section5 .pop .control button {
  position: absolute;
  display: none;
  width: 2rem;
  height: 2rem;
  font-size: 1.8rem;
}
#section5 .pop .control button.on {
  display: block;
  color: #fff;
  line-height: 2rem;
}
#section5 .link {
  position: relative;
  padding: 3.8rem 4rem 8rem 4rem;
  background-color: #fff;
  background-image: url("../img/main/qck_img.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}

#section5 .link2 {
  background-image: url("../img/main/qck_img2.png");
}

#section5 .link3 {
  background-image: url("../img/main/qck_img3.png");
}

#section5 .link strong {
  font-size: 2.4rem;
  font-weight: 600;
  color: #333;
}
#section5 .link strong i {
  color: #00a4ca;
}
#section5 .link p {
  margin-top: 1rem;
  color: #555;
  line-height: 2.4rem;
}
#section5 .link a {
  position: absolute;
  left: 4rem;
  bottom: 3.5rem;
  width: 15.5rem;
  padding: 0 1.5rem;
  line-height: 4.2rem;
  background: transparent linear-gradient(110deg, #00a4ca 0%, #00a4ca 100%) 0% 0% no-repeat padding-box;
  color: #fff;
}
#section5 .link a i {
  float: right;
  line-height: 4.2rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section5 .link a:hover i, #section5 .link a:focus i {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translateX(0.3rem);
          transform: translateX(0.3rem);
}
#section5 .qck a {
  display: block;
  padding: 1.6rem 4rem;
  line-height: 4.5rem;
  min-height: 7.6rem;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 600;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section5 .qck a img {
  float: right;
  width: 4.3rem;
}
#section5 .qck a + a {
  margin-top: 1.1rem;
}
#section5 .qck a:hover, #section5 .qck a:focus {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#section5 .qck a:nth-child(1) {
  background-color: #40ADDD;
}
#section5 .qck a:nth-child(1):hover, #section5 .qck a:nth-child(1):focus {
  background-color: #2f97c4;
}
#section5 .qck a:nth-child(2) {
  background-color: #24B59F;
}
#section5 .qck a:nth-child(2):hover, #section5 .qck a:nth-child(2):focus {
  background-color: #189784;
}
#section5 .qck a:nth-child(3) {
  background-color: #3962B4;
}
#section5 .qck a:nth-child(3):hover, #section5 .qck a:nth-child(3):focus {
  background-color: #284f9e;
}

@-webkit-keyframes opacity_M {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes opacity_M {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
#section6 {
  background-color: #FFF;
  padding: 4rem 0 2rem;
}
#section6 .wrap {
  width: 1280px;
  max-width: calc(100% - 4rem);
  margin: 0 auto;
  opacity: 0;
}
#section6 .family_banner {
  width: calc(100% + 1.5rem);
}
#section6 .family_banner .slick-slide {
  margin-right: 1.5rem;
  margin-bottom: 2rem;
  font-size: 0;
}
#section6 .family_banner .item a {
  border: 1px solid #E1E1E1;
  padding: 2.3rem 1rem;
  text-align: center;
  display: inline-block;
  width: 100%;
}
#section6 .family_banner .item a:hover, #section6 .family_banner .item a:focus {
  border: 1px solid #222;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#section6 .family_banner img {
  margin: 0 auto;
}