@charset "utf-8";
html,body{ margin:0; padding:0; height:100%; }
.page_pc{ width:100%; position:relative; height:100%; overflow:hidden; margin:0 auto;  background-size:100%; background-color: #000;
    /* background:url(../images/bgf.jpg) center top; */
}
.page_pc *{ margin:0; padding:0; list-style:none; border:0; font-family:'\5FAE\8F6F\96C5\9ED1\0','SL-Simplified',"Microsoft YaHei"; text-align:left; font-weight: normal; }
.page_pc img{ display:block; max-width:100%; }
.page_pc .pr{position: relative;}
.page_pc video{ display:block; width:100%; object-fit:cover; }
.page_pc svg{ display:block; width:100%; }

.header_parts { width:100%; height:68px; position:fixed; z-index:99; top:0; left:0; overflow:hidden; }
.sony_header { width:1920px; position:absolute; top:-68px; left:50%; transition:all 0.4s ease; margin-left:-960px; min-width:1200px; }
.header_parts:hover .sony_header{ top:0; transition:all 0.4s ease; }
.header_parts.active .sony_header{ top:0; transition:all 0.4s ease; }

.page_pc .icon01{ position:absolute; width:35.208%; left:58.229%; top:7.083%; z-index:2; }
.page_pc .btn_p {position: absolute;top: 85%;right: 20%; width: 18.0821%;display: flex;justify-content: center;padding: 0.5% 0;}
.page_pc .btn_p a {
    text-decoration: none; color: #fff;text-align: center;white-space: nowrap;font-size: 0.9375vw;border-bottom: 1px solid #fff;
}
.page_pc .itemUl{ position:absolute; left:50%; top:150%; z-index: 2; width:90%; padding:1.15vw 0; transform: translate(-50%,-50%); opacity:0; overflow: hidden; transition:all 0.5s ease-in-out; }
.page_pc .itemUl .openBox {display: flex;     
    /* justify-content: space-between; */
    align-items: center;}
.page_pc .itemUl .openBox .pic {width: 57.126%;position: relative;}

.page_pc .itemUl .openBox .pic .introduceBox {position: absolute; top: 20%;left: 67.93%;width: 25.85%;}
.page_pc .itemUl .openBox .pic .introduceBox h2 {position: absolute; top: -20%; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #fff; font-size: 1.875vw; font-weight: bold; letter-spacing: 0.2rem;}
.page_pc .itemUl .openBox .pic .introduceBox p {position: absolute; top: 41%; left: 15%; color: #fff; font-size: 1.458vw; font-weight: lighter; letter-spacing: 0.2rem;white-space: nowrap;}
.page_pc .itemUl .openBox .pic .vPlayBtn {position: absolute;top: 63%;left: 71.84%;width: 13.927%;cursor: pointer;}
.page_pc .itemUl .openBox .pic .picItem {position: absolute;top: 0;left: 0;opacity: 0;transition: all 0.5s ease-in-out;width: 100%;}
.page_pc .itemUl .openBox .pic .picItem.current {opacity: 1;z-index: 2;}
.page_pc .itemUl ul {display: flex;}
.page_pc .itemUl ul li{flex:1;position: relative; transition: all 0.4s ease-in-out;box-sizing: border-box;border: 0.052vw solid #000;z-index: 3; cursor: pointer;}
.page_pc .itemUl ul li img:nth-child(2){position: absolute;top: 0;left: 0;width: 100%;transition: all 1.5s}
.page_pc .itemUl ul li>p {position: absolute; left: 50%; bottom: 5%;transform: translateX(-50%); color: #fff;font-size: 1.0416vw;transition: all 0.5s;white-space: nowrap;}
.page_pc .itemUl ul li p span {font-weight: bold;}


.page_pc .itemUl li .introduceBox {position: absolute; top: 67%;left: 50%;transform: translateX(-50%); width: 61.3425%; opacity: 0;}
.page_pc .itemUl li .introduceBox.active {position: absolute;top: 76%;
    left: 18.93%;
    width: 67.85%;}
.page_pc .itemUl li .introduceBox.active p {
        letter-spacing: 0.1rem;

    }
.page_pc .itemUl li .introduceBox.introduceBox_soy {left: 3.93%;}
.page_pc .itemUl li .introduceBox h2 {position: absolute; top: -8%; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #fff; font-size: 1.25vw; font-weight: bold; letter-spacing: 0.2rem;}
.page_pc .itemUl li .introduceBox p {position: absolute; top: 41%; left: 22%; color: #fff; font-size: 1.25vw; font-weight: lighter; letter-spacing: 0.2rem;white-space: nowrap;}
.page_pc .itemUl .openBox .picUrl {position: relative; width: 8.1597%;height: 5.9375vw; margin-left: 3%; cursor: pointer;  }
.page_pc .itemUl .openBox .picUrl .vPlayBtn {position: absolute;top: 0;left: 0;opacity: 0;}
.page_pc .itemUl .openBox .picUrl .picItem.current {opacity: 1;z-index: 2;}
.page_pc .itemUl li.active .introduceBox {opacity: 1;}

.page_pc .itemUl img {
    width: 100%;
}
.page_pc .itemUl ul li::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.page_pc .itemUl ul li.active {
    border: 0.1041vw solid #0a83d7;
    transform: translateY(-5%);
}
.page_pc .itemUl ul li.active::before {
    background: transparent;
}
.page_pc .itemUl ul li.active img:nth-child(2),.page_pc .itemUl ul li.active>p {
    opacity: 0;
}



.page_pc .itemUl>li{ width:22.44%; margin:0 1.28%; float: left; position: relative; cursor:pointer; opacity:0; transform: translateY(50%); transition:all 0.5s ease-in-out; }
.page_pc .itemUl>li.expect{ cursor:default; }
.page_pc .itemUl>li:nth-child(2)::before{ background-image:url(../images/master_02bg.png); }
.page_pc .itemUl>li:nth-child(3)::before{ background-image:url(../images/master_03bg.png); }
.page_pc .itemUl>li:nth-child(2){ margin-top:7.1%; transition-delay:0.2s;}
.page_pc .itemUl>li:nth-child(3){ margin-top:7.1%; transition-delay:0.4s;}
.page_pc .itemUl>li:nth-child(4){ transition-delay:0.6s;}
.page_pc .itemUl>li .pic{ position: relative; }
.page_pc .itemUl>li .vBox{ position: absolute; left:0; bottom:0; width:100%; z-index:0; overflow: hidden; }
.page_pc .itemUl>li .vBox::before{ content:''; position: absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
.page_pc .itemUl>li .high{ position: absolute; left:0; top:0; width:100%; opacity:0; transition:all 0.3s ease-in-out; }
.page_pc .itemUl>li .xian{ position: absolute; left:0; top:0; width:100%; opacity:0; transition:all 0.3s ease-in-out; }
.page_pc .itemUl>li.new .vBox::after{ content:''; position: absolute; right:0; top:100%; width:18.857%; padding-top:18.857%; margin-top:-61.14%; background:url(../images/icon_new.png); background-size:100%; }
.page_pc .itemUl>li .vPlayIcon{ position: absolute; left:50%; top:100%; width:4.2vw; margin-top:-30.57%; transform: translate(-50%,-50%); transition:all 0.3s ease-in-out; }
.page_pc .vPlayIcon>.vRing{ width:2.5vw; height:2.5vw; margin:0.5vw auto; position: relative; background:#9f9e9e; border-radius:50%; }
.page_pc .vPlayIcon>.vRing::before,.page_pc .vPlayIcon>.vRing::after{ content:''; box-sizing:border-box; position:absolute; width:2.5vw; height:2.5vw; left:1.25vw; top:1.25vw; transform: translate(-50%,-50%); border:solid 0.05vw transparent; border-radius:50%; }
.page_pc .itemUl>li .vPlayIcon>.vRing>.vPlay{ width:0; height:0; position:absolute; left:50%; top:50%; transform:translate(-20%,-50%); border:solid 0.4vw transparent; border-left:solid 0.6vw #4d85c1; }

.page_pc .itemUl>li .vPlayIcon>.vRing svg{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:2; }
.page_pc .itemUl>li .vPlayIcon>.vRing svg path{ stroke-dasharray:150; stroke-dashoffset:150; fill: none; stroke: #4d85c1; stroke-width:2px; }
.page_pc .itemUl>li .vPlayIcon>.vRing svg circle{ stroke-dasharray:150; stroke-dashoffset:150; fill: none; stroke: #4d85c1; stroke-width:4px; }
.page_pc .itemUl>li .vPlayIcon::after{ content:''; display:block; width:100%; height:0.8vw; background:url(../images/vplaytext.png) no-repeat; background-size:100%; }
.page_pc .itemUl>li .tbox{ position: absolute; left:7.7%; bottom:12.8vw; }
.page_pc .itemUl>li .tbox h2{ font-size:1.78vw; line-height:1.2em; color:#949494; transition:all 0.5s linear; }
.page_pc .itemUl>li .tbox h3{ font-size:1vw; line-height:1.5em; color:#949494; transition:all 0.5s linear; text-indent:-0.5em; }
.page_pc .itemUl>li .tbox p{ font-size:0.9375vw; line-height:1.67em; color:#1b1c1e; width:max-content; background:#949494; border-radius:0.78vw; padding:0 1em; margin-top:0.2em; }

.page_pc .itemUl>li:hover .vBox::before{ display:none; }
.page_pc .itemUl>li:hover::before{ opacity:1; }
.page_pc .itemUl>li.expect:hover::before{ opacity:0; }

.page_pc .itemUl>li:hover .pic{ opacity:1; }
.page_pc .itemUl>li:hover .high{ opacity:1; }
.page_pc .itemUl>li:hover .xian{ opacity:1; }
.page_pc .itemUl>li:hover .vPlayIcon{ position: absolute; left:50%; top:100%; width:23.14%; margin-top:-30.57%; transform: translate(-50%,-50%); opacity:1; }
.page_pc .itemUl>li:hover .vPlayIcon>.vRing::before{ animation:ringscale 2s 1s linear infinite; }
.page_pc .itemUl>li:hover .vPlayIcon>.vRing::after{ animation:ringscale 2s 2s linear infinite; }
.page_pc .itemUl>li:hover .vPlayIcon>.vRing svg path{ animation:path 0.5s linear forwards; }
.page_pc .itemUl>li:hover .vPlayIcon>.vRing svg circle{ animation:circle 1s linear forwards; }
.page_pc .itemUl>li:hover .tbox h2{ color:#fff; }
.page_pc .itemUl>li:hover .tbox h3{ color:#fff; }
.page_pc .itemUl>li:hover .tbox p{ background:#fff; }

.page_pc .itemUl>li:focus .vBox::before{ display:none; }
.page_pc .itemUl>li:focus::before{ opacity:1; }
.page_pc .itemUl>li.expect:focus::before{ opacity:0; }

.page_pc .itemUl>li:focus .pic{ opacity:1; }
.page_pc .itemUl>li:focus .high{ opacity:1; }
.page_pc .itemUl>li:focus .xian{ opacity:1; }
.page_pc .itemUl>li:focus .vPlayIcon{ position: absolute; left:50%; top:100%; width:23.14%; margin-top:-30.57%; transform: translate(-50%,-50%); opacity:1; }
.page_pc .itemUl>li:focus .vPlayIcon>.vRing::before{ animation:ringscale 2s 1s linear infinite; }
.page_pc .itemUl>li:focus .vPlayIcon>.vRing::after{ animation:ringscale 2s 2s linear infinite; }
.page_pc .itemUl>li:focus .vPlayIcon>.vRing svg path{ animation:path 0.5s linear forwards; }
.page_pc .itemUl>li:focus .vPlayIcon>.vRing svg circle{ animation:circle 1s linear forwards; }
.page_pc .itemUl>li:focus .tbox h2{ color:#fff; }
.page_pc .itemUl>li:focus .tbox h3{ color:#fff; }
.page_pc .itemUl>li:focus .tbox p{ background:#fff; }



.page_pc .itemUl.active{ top:50%; opacity:1; }
.page_pc .itemUl.active2{ top:-50%; opacity:0; }
.page_pc .itemUl.active2>li{ transform: translateY(-50%); opacity:0; }

.page_pc .iconDown{ position: fixed; left:50%; top:100%; transform:translate(-50%,-120%); z-index: 1; width:3%; padding-top:3%; position: relative;  border-radius:50%;  box-sizing:border-box; cursor: pointer; }
/* .page_pc .iconDown::before,.page_pc .iconDown::after{ content:''; position:absolute; width:100%; height:100%; left:50%; top:50%; transform: translate(-50%,-50%); border:solid 0.05vw rgba(255,255,255,0); border-radius:50%; animation:ringscale 2s linear infinite; }
.page_pc .iconDown::after{ animation-delay:1s; } */
.page_pc .iconDown .icon{ width:1.56vw; height:1.56vw; border:solid 0.156vw #4d85c1; border-left:0; border-top:0; position:absolute; left:50%; top:50%; transform: translate(-50%,-75%) rotate(45deg); }
.page_pc .iconDown.active {opacity: 0;}
.page_pc .footBg{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background:rgba(0,0,0,0); overflow: hidden; transition:all 0.3s 0.3s ease-in-out; }
.page_pc .foot{ position:absolute; left:0; top:100%; width:100%; transition:all 0.3s ease-in-out; }
.page_pc .foot .btnXq{ position:absolute; left:33%; bottom:16.5%; width:11.46%; transition:all 0.3s ease-in-out; }
.page_pc .footBg.active{ z-index:1; background:rgba(0,0,0,0.7); transition-delay:0s; }
.page_pc .active .foot{ transform: translateY(-100%); transition-delay:0.3s; }

.page_pc .videoBoxbg {width: 100%;height: 100vh;position: absolute;top: 0;}
.page_pc .videoBoxbg video{width: 100%;height: 100vh;position: absolute;top: 0;left: 0;opacity: 0.8;}

@keyframes ringscale{
    0%{ transform:translate(-50%,-50%) scale(1); border-color:rgba(77,133,193,1); }
    99%{ transform:translate(-50%,-50%) scale(1.5); border-color:rgba(77,133,193,0); }
    100%{ transform:translate(-50%,-50%) scale(1); border-color:rgba(77,133,193,0); }
}
@keyframes path{
    to{ stroke-dashoffset:0;  }
}
@keyframes circle{
    to{ stroke-dashoffset:0;  }
}