html,body{ margin:0; padding:0; }
.page_pc{ overflow:hidden; min-width:1200px; max-width:1920px; margin:0 auto; position:relative; font-size:18px; }
.page_pc *{ margin:0; padding:0; border:0; list-style:none;  font-family:"Microsoft YaHei",Arial,sans-serif; font-weight:normal; }
.page_pc img{ display:block; max-width:100%; }
.page_pc video{ display:block; width:100%; }
.page_pc .sup{ font-size:0.6em; line-height:0; vertical-align:super; } 
.page_pc :focus:not(:focus-visible){ outline:none; }
.page_pc .vbox01 .vidBtn{ cursor:pointer; }
.page_pc p{ font-size:18px; line-height:1.833em; color:#fff; text-indent:2em; letter-spacing:0.04em; text-align: justify; text-justify:inter-ideograph; }

.page_pc .kv{ position:relative; width:1920px; left:50%; margin-left:-960px; }
.page_pc .sec01{ background:#000; padding:7.5% 0 5%; }
.page_pc .vbox01{ width:975px; max-width:60.9375%; margin:0 auto; transform: skew(-8deg,-4deg); background:#39c2a2; }
.page_pc .vbox01 .vidBtn{ transform: skew(8deg,4deg); }
.page_pc .brief{ position:relative; width:1600px; max-width:100%; margin:5.78% auto 0; }
.page_pc .brief .tbox{ position:absolute; width:43.75%; left:18%; top:0; margin-top:5%; }
.page_pc .brief .tbox p{ line-height:2em; color:#c8c8c8; }
.page_pc .msg{ position:absolute; left:60%; top:0; margin-top:24%; font-size:26px; line-height:1.85em; color:#000; }
.page_pc .msg strong{ font-size:1.85em; line-height:1em; display:inline-block; margin-right:0.5em; font-weight:bold; }
.page_pc .works{ text-align:right; font-size:21px; margin:0.5em 12.5% 0; }
.page_pc .works>span:first-child{ font-size:16px; color:#4d4d4d; }

.page_pc .quesBg{ background:#29282a; padding:5% 0; }
.page_pc .quesBox{ width:1200px; max-width:75%; margin:0 auto; counter-reset:list; }
.page_pc .quesBox .ques{ overflow: hidden; position:relative; margin-top:7.5%; }
.page_pc .quesBox .ques:first-child{ margin-top:0; }
.page_pc .quesBox .ques>dd{ position:absolute; left:0; top:25%; width:100%; box-sizing:border-box; padding:0.7em 0 0.7em 20%; color:#39c2a2; font-weight:bold; font-size:33.21px; line-height:1.4em; }
.page_pc .quesBox .ques>dd.line2{ top:25%; padding:0 10% 0 20%; }
.page_pc .quesBox .ques>dd::before{ content:'Q'counter(list); counter-increment:list; position:absolute; left:5.25%; top:30%; width:20%; font-size:80px; line-height:1em; color:#000; font-family:'SL-Simplified',Arial, Helvetica, sans-serif; }

.page_pc .quesBox .ans{ box-sizing:border-box; position:relative; }
.page_pc .quesBox .ans>dd{ position:absolute; left:0; top:0; width:100%; padding:3.3% 0 0 0; box-sizing:border-box; overflow: hidden; }
.page_pc .quesBox .ans>dd::before{ content:''; float:left; width:10.5%; padding-top:10.5%; margin:0 4.5%; border:solid 1px #848585; border-radius:50%; background:url(../images/dujie/portrait.png) #171518; background-size:100%; }
.page_pc .quesBox .ans>dd>p{ float:left; width:40%; text-indent:0; margin-top:1em; }


.page_pc .quesBox .ans01>dd>p{ width:41%; }
.page_pc .quesBox .block>dd{ position:relative; background:#151e1d; padding:3.3% 0; }
.page_pc .quesBox .block>dd>p{ width:76%; }
.page_pc .quesBox .ans03>dd{ top:auto; bottom:3%; }
.page_pc .quesBox .ans03>dd>p{ width:76%; margin-top:1.67em; }
.page_pc .quesBox .ans>dd>p.mt167{ margin-top:1.67em; }


.page_pc .sec03{ padding:7.5% 0 5%; background:url(../images/dujie/footer_bg.png) right bottom no-repeat #000; background-size:40.3125%; }
.page_pc .resBox{ width:975px; max-width:60.9375%; margin:0 auto; transform: skew(12deg,2deg); background:#39c2a2; }
.page_pc .resBox>p{ padding:2em; transform: skew(-12deg,-2deg); background:#111817; color:#c8c8c8; font-size:22px; line-height:2em; }
.page_pc .resBox>p>strong{ color:#39c2a2; font-weight:bold; }
.page_pc .sec03 h2{ width:18.8em; margin-top:6.5%; position: relative; left:50%; transform: translateX(-50%); color:#39c2a2; font-size:40px; line-height:2em; font-weight:300; letter-spacing:0.17em; text-indent:0.17em; border-top:solid 1px #39c2a2; border-bottom:solid 1px #39c2a2; }
.page_pc .sec03 h2::before{ content:''; position:absolute; left:0; top:-4px; bottom:-4px; width:7px; box-sizing:border-box; border-top:solid 7px #39c2a2; border-bottom:solid 7px #39c2a2; }
.page_pc .sec03 h2::after{ content:''; position:absolute; right:0; top:-4px; bottom:-4px; width:7px; box-sizing:border-box; border-top:solid 7px #39c2a2; border-bottom:solid 7px #39c2a2; }

.page_pc .parseBox{ width:1080px; max-width:67.5%; margin:3.5% auto 0; overflow: hidden; }
.page_pc .parseBox>ul{ float: left; width:46.67%; }
.page_pc .parseBox>ul>li{ font-size:18px; line-height:1.5em; margin-top:1em; color:#c8c8c8; position:relative; padding-left:1em; letter-spacing:0.04em; }
.page_pc .parseBox>ul>li::before{ content:''; position:absolute; left:0; width:0.6em; height:2px; background:#39c2a2; top:0.7em; }
.page_pc .parseBox>ul>li>strong{ font-weight:bold; color:#39c2a2; }
.page_pc .parseBox>ul>li h4{ font-weight:bold; color:#fff; }
.page_pc .parseBox>ul>li h4 strong{ font-weight:bold; font-size:1.333em; color:#39c2a2; }

.page_pc .vPlayIcon{
    position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:7%; padding-top:7%; border-radius:50%; border-color:rgba(255,255,255,0.8);
}
.page_pc .vPlayIcon::before,.page_pc .vPlayIcon::after{ content:''; position:absolute; left:50%; top:50%; width:90%; height:90%; border-radius:50%; transform:translate(-50%,-50%); border:solid 1px rgba(255,255,255,0); animation:ringscale 2s 1s linear infinite; }
.page_pc .vPlayIcon::after{ animation-delay:2s; }
.page_pc .vPlayIcon svg{ position:absolute; left:50%; top:50%; width:35%; transform: translate(-40%,-50%); }
.page_pc .vPlayIcon svg path{ animation:path 3s linear infinite; stroke-dasharray:125; stroke-dashoffset:-125; fill: none; stroke: #fff; stroke-width:2px; }
.page_pc .vPlayIcon svg circle{ animation:circle 1s linear forwards; }
.page_pc .vPlayIcon .vPlay{
    position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:90%; height:90%; border-radius:50%; background:rgba(57,194,162,0.5); text-indent:-99em;
}

@keyframes ringscale{
    0%{ transform:translate(-50%,-50%) scale(1); border-color:rgba(255,255,255,0.8); }
    99%{ transform:translate(-50%,-50%) scale(1.4); border-color:rgba(255,255,255,0); }
    100%{ transform:translate(-50%,-50%) scale(1); border-color:rgba(255,255,255,0); }
}
@keyframes path{
    0%{ stroke-dashoffset:-125; stroke-width:2px; opacity:1; }
    30%{ stroke-dashoffset:0; stroke-width:2px; }
    70%{ stroke-dashoffset:0; stroke-width:2px; opacity:1; }
    85%{ stroke-dashoffset:0; stroke-width:4px; opacity:1; }
    100%{ stroke-dashoffset:0; stroke-width:4px; opacity:0; }
}


@media screen and (max-width:1600px){
    .page_pc{ font-size:1.125vw; }
    .page_pc .kv{ width:120%; left:-10%; margin-left:0; }

    .page_pc p{ font-size:1.125vw; }
    .page_pc .msg{ font-size:1.625vw; }
    .page_pc .works{ font-size:1.3125vw; }
    .page_pc .works>span:first-child{ font-size:1vw; }

    .page_pc .quesBox .ques>dd{ font-size:2.075vw; }
    .page_pc .quesBox .ques>dd::before{ font-size:5vw; }
    .page_pc .resBox>p{ font-size:1.375vw; }
    
.page_pc .sec03 h2{ font-size:2.5vw; }
.page_pc .parseBox>ul>li{ font-size:1.125vw; }
}
@media screen and (max-width:1200px){
    .page_pc{ font-size:13.5px; }
    .page_pc .kv{ width:1440px; }

    .page_pc p{ font-size:13.5px; }
    .page_pc .msg{ font-size:19.5px; }
    .page_pc .works{ font-size:15.75px; }
    .page_pc .works>span:first-child{ font-size:12px; }

    .page_pc .quesBox .ques>dd{ font-size:25px; }
    .page_pc .quesBox .ques>dd::before{ font-size:60px; }
    .page_pc .resBox>p{ font-size:16.5px; }
    .page_pc .sec03 h2{ font-size:30px; }
    .page_pc .parseBox>ul>li{ font-size:13.5px; }
}