.header .logo {background:url(../images/common/logo_w.svg) no-repeat left center;background-size:150px auto;}
.header .nav {background:rgba(0,0,0,0);border-bottom:1px solid rgba(255,255,255,0.1)}
.header .nav .nav_list .nav_item .nav_item_link {color:#ffffff;}
.header .nav .nav_list .nav_item .nav_item_link::after {background:#ffffff;}
.header .nav .nav_list .nav_item:hover .nav_item_link {color:#ffffff;}
.header .fnc_menu ul li.fnc_user {background:url(../images/common/ico_user_w.svg) no-repeat center center;}

.header.on {background:#fff;}
.header.on .logo {background:url(../images/common/logo.svg) no-repeat left center;background-size:150px auto;}
.header.on .nav {background:rgba(0,0,0,0);border-bottom:1px solid rgba(0,0,0,0.1)}
.header.on .nav .nav_list .nav_item .nav_item_link {color:#222;}
.header.on .nav .nav_list .nav_item .nav_item_link::after {background:#4C5AD8;}
.header.on .nav .nav_list .nav_item:hover .nav_item_link {color:#4C5AD8;}
.header.on .fnc_menu ul li.fnc_user {background:url(../images/common/ico_user.svg) no-repeat center center;}

.header.nav_sticky {background:#fff;}
.header.nav_sticky .logo {background:url(../images/common/logo.svg) no-repeat left center;background-size:100px auto;   }
.header.nav_sticky .nav {background:rgba(0,0,0,0);border-bottom:1px solid rgba(0,0,0,0.1)}
.header.nav_sticky .nav .nav_list .nav_item .nav_item_link {color:#222;}
.header.nav_sticky .nav .nav_list .nav_item .nav_item_link::after {background:#4C5AD8;}
.header.nav_sticky .nav .nav_list .nav_item:hover .nav_item_link {color:#4C5AD8;}
.header.nav_sticky .fnc_menu ul li.fnc_user {background:url(../images/common/ico_user.svg) no-repeat center center;}

.main_container {position:relative;height:800px;background:#0b1229;overflow:hidden;margin-top:-120px;}
.photo {position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;
    -webkit-animation:bgAnimation 40s  infinite;
    -moz-animation:bgAnimation 40s  infinite;
    -o-animation:bgAnimation 40s  infinite;
    -ms-animation:bgAnimation 40s  infinite;    
    animation:bgAnimation 40s  infinite;
}
@-webkit-keyframes bgAnimation {
    25% {opacity:1;transform:scale(1);}
    40% {opacity:0;}
    80% {transform:scale(2) rotate(20deg);}
}
@-moz-keyframes bgAnimation {
    25% {opacity:1;transform:scale(1);}
    40% {opacity:0;}
    80% {transform:scale(2) rotate(20deg);}
}
@-o-keyframes bgAnimation {
    25% {opacity:1;transform:scale(1);}
    40% {opacity:0;}
    80% {transform:scale(2) rotate(20deg);}
}
@-ms-keyframes bgAnimation {
    25% {opacity:1;transform:scale(1);}
    40% {opacity:0;}
    80% {transform:scale(2) rotate(20deg);}
}
@keyframes bgAnimation {
    25% {opacity:1;transform:scale(1);}
    40% {opacity:0;}
    80% {transform:scale(2) rotate(20deg);}
}
.photo:nth-child(1) {background:url(../images/common/main01.png) no-repeat center top;
    -webkit-animation-delay:0s;
    -moz-animation-delay:0s;
    -o-animation-delay:0s;
    -ms-animation-delay:0s;
    animation-delay:0s;
}
.photo:nth-child(2) {background:url(../images/common/main02.png) no-repeat center top;
    -webkit-animation-delay:10s;
    -moz-animation-delay:10s;
    -o-animation-delay:10s;
    -ms-animation-delay:10s;
    animation-delay:10s;
}
.photo:nth-child(3) {background:url(../images/common/main03.png) no-repeat center top;
    -webkit-animation-delay:20s;
    -moz-animation-delay:20s;
    -o-animation-delay:20s;
    -ms-animation-delay:20s;
    animation-delay:20s;
}
.photo:nth-child(4) {background:url(../images/common/main04.png) no-repeat center top;
    -webkit-animation-delay:30s;
    -moz-animation-delay:30s;
    -o-animation-delay:30s;
    -ms-animation-delay:30s;
    animation-delay:30s;
}

.main_txt_any {position:absolute;display:flex;top:0;left:0;right:0;bottom:0;z-index:2;}
.main_txt_any .copy {position:absolute;width:100%;top:310px;left:0px;display:flex;font-size:44px;padding:0;color:#ffffff;justify-content:center;z-index:2;
    background: -webkit-linear-gradient( 60deg,#acfbff, #c2b7ff,#fff8b1, #f7a499);
    background-size:400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textAnime 15s infinite;
  }
  @keyframes textAnime{
      0%{background-position:0% 50%;opacity:.6;}
      50%{background-position:100% 50%;opacity:1;}
      100%{background-position:0% 50%;opacity:.6;}
  }

.text_ani, .text_ani:after {position:absolute;width:100%;height:100%;top:0;left:0px;z-index:2;}
.text_ani li{position:absolute;top:50%;left:0px;width:100%;text-align:center;opacity:0;margin-top:-80px;
    -webkit-animation:textAnimation 40s linear infinite 0s;
    -moz-animation:textAnimation 40s linear infinite 0s;
    -o-animation:textAnimation 40s linear infinite 0s;
    -ms-animation:textAnimation 40s linear infinite 0s;
    animation:textAnimation 40s linear infinite 0s;
}
.text_ani li:nth-child(1) {margin-top:-10px;}
.text_ani li:nth-child(2) {margin-top:-10px;}
.text_ani li:nth-child(3) {margin-top:-10px;}
.text_ani li:nth-child(4) {margin-top:-10px;}
.text_ani li p {font-size:52px;padding:0;color:#ffffff;font-weight:400;}
.text_ani li p + p {padding-top:4px;}
.text_ani li:nth-child(2){
    -webkit-animation-delay:10s;
    -moz-animation-delay:10s;
    -o-animation-delay:10s;
    -ms-animation-delay:10s;
    animation-delay:10s;
}
.text_ani li:nth-child(3){
    -webkit-animation-delay:20s;
    -moz-animation-delay:20s;
    -o-animation-delay:20s;
    -ms-animation-delay:20s;
    animation-delay:20s;
}
.text_ani li:nth-child(4) {
    -webkit-animation-delay:30s;
    -moz-animation-delay:30s;
    -o-animation-delay:30s;
    -ms-animation-delay:30s;
    animation-delay:30s;
}

/* Animation for the text */
@-webkit-keyframes textAnimation {
    0% {opacity:0;transform:translateY(60px);}
    10% {opacity:1;transform:translateY(0px);}
    20% {opacity:1;transform:scale(1);}
    30% {opacity:0}
    36% {opacity:0;transform:scale(1.2);}
    100% {opacity:0}
}
@-moz-keyframes textAnimation {
    0% {opacity:0;transform:translateY(60px);}
    10% {opacity:1;transform:translateY(0px);}
    20% {opacity:1;transform:scale(1);}
    30% {opacity:0}
    36% {opacity:0;transform:scale(1.2);}
    100% {opacity:0}
}
@-o-keyframes textAnimation {
    0% {opacity:0;transform:translateY(60px);}
    10% {opacity:1;transform:translateY(0px);}
    20% {opacity:1;transform:scale(1);}
    30% {opacity:0}
    36% {opacity:0;transform:scale(1.2);}
    100% {opacity:0}
}
@-ms-keyframes textAnimation {
    0% {opacity:0;transform:translateY(60px);}
    10% {opacity:1;transform:translateY(0px);}
    20% {opacity:1;transform:scale(1);}
    30% {opacity:0}
    36% {opacity:0;transform:scale(1.2);}
    100% {opacity:0}
}
@keyframes textAnimation {
    0% {opacity:0;transform:translateY(60px);}
    10% {opacity:1;transform:translateY(0px);}
    20% {opacity:1;transform:scale(1);}
    30% {opacity:0}
    36% {opacity:0;transform:scale(1.2);}
    100% {opacity:0}
}

.main_con {display:flex;width:1360px;margin:40px auto}
.main_con .main_notice {display:flex;flex:1;flex-direction:column;padding-right:40px;}
.main_con .main_notice .com_head {display:flex;}
.main_con .main_notice .com_head h4 {display:flex;flex:1;font-size:34px;font-weight:500;}
.main_con .main_notice .com_head a.more {display:flex;flex:none;align-items:center;height:40px;background:url(../images/common/ico_more.svg) no-repeat left center;padding-left:30px;font-size:14px;font-weight:400;}
.main_con .main_notice ul {display:flex;flex:none;width:100%;flex-direction:column;margin-top:20px;}
.main_con .main_notice ul li {display:flex;flex:1;height:100%;justify-content:flex-start;align-items:flex-start;}
.main_con .main_notice ul li:hover {cursor:pointer;}
.main_con .main_notice ul li:hover span {color:#4C5AD8}
.main_con .main_notice ul li + li {margin-top:10px;}
.main_con .main_notice ul li span {display:flex;flex:1;font-size:16px;font-weight:400;color:#313131;}
.main_con .main_notice ul li span + span {flex:none;margin-top:0px;color:#525252}
.main_con .main_service {display:flex;flex:none;width:640px;height:168px;}
.main_con .main_service ul {display:flex;flex:none;width:100%;}
.main_con .main_service ul li {display:flex;flex:1;flex-direction:column;height:100%;justify-content:flex-start;align-items:flex-start;border:1px solid rgba(0,0,0,0.1);border-radius:10px;padding:30px;transition:all .2s;}
.main_con .main_service ul li p {display:flex;font-size:26px;font-weight:400;color:#313131;}
.main_con .main_service ul li p + p {margin-top:0px;}
.main_con .main_service ul li:nth-child(1) {background:url(../images/common/icon_service01.png) no-repeat right 40px bottom 40px}
.main_con .main_service ul li:nth-child(2) {background:url(../images/common/icon_service02.png) no-repeat right 40px bottom 40px}
.main_con .main_service ul li:hover {border:1px solid #4C5AD8;cursor:pointer;}
.main_con .main_service ul li + li {margin-left:40px;}
.main_con .main_banner {display:flex;width:100%;}
.main_con .main_banner ul {display:flex;flex:none;width:100%;height:180px;}
.main_con .main_banner ul li {display:flex;flex:1;height:100%;justify-content:center;align-items:center;border:1px solid rgba(0,0,0,0.1);border-radius:10px;transition:all .2s;}
.main_con .main_banner ul li:hover {border:1px solid #4C5AD8;cursor:pointer;}
.main_con .main_banner ul li + li {margin-left:40px;}
