@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:url(../images/indexbg.jpg) center top; background-size:100%; }
.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 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:23.125%; left:37.5%; top:0; margin-top:3%; z-index:2; }

.page_pc .itemUl{ position:absolute; left:9.375%; top:150%; width:81.25%; padding:1.15vw 0; transform: translateY(-50%); opacity:0; overflow: hidden; transition:all 0.5s ease-in-out; }
.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::before{ content:''; position:absolute; left:-1.15vw; top:-1.15vw; right:-1.15vw; bottom:-1.15vw; opacity:0; transition:all 0.3s ease-in-out; background:url(../images/master_01bg.png); background-size:100%; }
.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.active>li{ transform: translateY(0); opacity:1; }
.page_pc .itemUl.active2>li{ transform: translateY(-50%); opacity:0; }

.page_pc .iconDown{ position: fixed; left:50%; top:100%; transform:translate(-50%,-120%); width:3%; padding-top:3%; position: relative; background:#2b3035; border-radius:50%; border:solid 0.1vw #4d85c1; 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:1vw; height:1vw; border:solid 0.1vw #4d85c1; border-left:0; border-top:0; position:absolute; left:50%; top:50%; transform: translate(-50%,-75%) rotate(45deg); }

.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; }

@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;  }
}