/*
    svg的属性，定位模式、层级、边框（用于调试参考，完成后统一去除边框）统一写在css，
    宽高和位置分个写在css，每个svg给一个单独标签，id按左右、上下顺序给

    viewBox和preserveAspectRatio只能写在html的svg标签内

    对于z_index，div统一20，svg统一10，但调试时为了让它在上面，暂调30


    线条出现顺序：1~8依次出现

    动画持续时间统一写在path标签下，特殊需要调整的再单独写

    线条长度改为用vw作单位，避免了在调整页面大小时动画速度、线条长度变化带来的问题
*/

/*大类标签*/
#part1>div{
    position: absolute;
    z-index: 20;
    opacity: 0;
}

#part1>svg{
    position: absolute;
    /*border: 5px solid white;*/
    z-index: 10;
}

#part1>svg>path{
    stroke-dasharray: 100vw 100vw;
    stroke-dashoffset: 100vw;
    stroke-width: 4vw;
    stroke: black;
    stroke-linecap: round;
    fill: none;
    vector-effect: non-scaling-stroke;
    /*animation: revealArc 2s linear forwards;*/

}

/*单个div标签*/
#p1_title{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 6vw;
    top: 15vh;
    opacity: 0;
}

#p1_method1{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 40vw;
    top: 15vh;
}

#p1_problem1{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 70vw;
    top: 15vh;
}

#p1_method2{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 30vw;
    top: 60vh;
}

#p1_problem2{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left:67vw;
    top: 60vh;
}

#p1_method3{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 30vw;
    top: 105vh;
}

#p1_problem3{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 60vw;
    top: 105vh;
}

#p1_method4{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 30vw;
    top: 150vh;
}

#p1_advantage{
    height: 30vh;
    width: 20vw;
    border: 2px solid black;
    background-color: whitesmoke;
    left: 67vw;
    top: 150vh;
}

/*单个svg标签*/
#part1>svg>path {
    opacity: 0;
}

#p1s1{
    left:16vw;
    top: 15vh;
    width:34vw;
    height:30vh;
}

#p1s2{
    left:50vw;
    top: 15vh;
    width:34vw;
    height:30vh;
}

#p1s3{
    left:-8vw;
    top: 30vh;
    width:48vw;
    height:90vh;
}

#p1s4{
    left:40vw;
    top: 60vh;
    width:37vw;
    height:30vh;
}

#p1s5{
    left:-8vw;
    top: 60vh;
    width:48vw;
    height:120vh;
}

#p1s6{
    left:40vw;
    top: 105vh;
    width:37vw;
    height:30vh;
}

#p1s7{
    left:-8vw;
    top: 95vh;
    width:48vw;
    height:140vh;
}

#p1s8{
    left:40vw;
    top: 150vh;
    width:37vw;
    height:30vh;
}