#bartok sup {
    font-size: .6em;
    cursor: pointer;
}
#bartok p {
    font-size: 1.25vw;
    line-height: 1.6;
}
#bartok h2 {
    line-height: 1.25;
    font-weight: 700;
}
#bartok h3 {
    font-size: 1.666667vw;
    line-height: 1.25;
    font-weight: 600;
}
#bartok li {
    line-height: 1.6;
}
#bartok img{
    width: 100%;
}
#bartok .spacer{
    margin-top: 10.416667vw;
}
#bartok .headline{
    font-size: 2.5vw;
}

#bartok .section-hero{
    padding-top: 7.1875vw;
}
#bartok .section-hero .hero-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 84.415625vw;
    margin: 0 auto;
    position: relative;
}
#bartok .section-hero .hero-picture{
    width: 40.5vw;
}
#bartok .section-hero .hero-text{
    width: 35.676042vw;
}
#bartok .section-hero .hero-text p{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: max(.833333vw,12px);
}
#bartok .section-design h2{
    text-align: center;
}
#bartok .section-design .design-content{
    display: flex;
    justify-content: space-between;
    width: 83.333333vw;
    margin: 4.166667vw auto 0;
}
#bartok .section-design .design-content .box-content{
    width: 40.833333vw;
    border: 2px solid #ECECEC;
    height: 48.59375vw;
    border-radius: 1.666667vw;
    overflow: hidden;
}
#bartok .section-design .design-content div:nth-child(1) h3{
    margin: 1.5625vw 0 0 2.083333vw;
}
#bartok .section-design .design-content div:nth-child(1) p{
    margin: 1.5625vw 0 2.395833vw 2.083333vw;
}
#bartok .section-design .design-content div:nth-child(1) .left-pic{
    width: 47.5vw;
    margin: 0 auto;
    margin-left: -3.229167vw;
    margin-top: -5.3125vw;
}
#bartok .section-design .design-content div:nth-child(2) h3{
    margin: 1.5625vw 0 0 2.083333vw;
}
#bartok .section-design .design-content div:nth-child(2) p{
    width: 27.058333vw;
    margin: 1.5625vw 0 1.041667vw 2.083333vw;
}
#bartok .section-design .design-content div:nth-child(2) .right-pic{
    width: 47.083333vw;
    margin: 0 auto;
    margin-left: -3.020833vw;
    margin-top: -4.84375vw;
}
#bartok .section-protection .protection-content{
    display: flex;
}
#bartok .section-protection .protection-content .pic-content{
    width: 40.520833vw;
    margin-left: 6.09375vw;
}
#bartok .section-protection .protection-content .copy-content{
    width: 31.302083vw;
    margin: 9.166667vw 0 0 9.479167vw;
}
#bartok .section-protection .protection-content .copy-content h2{
    white-space: nowrap;
}
#bartok .section-protection .protection-content .copy-content p{
    margin-top: 2.083333vw;
}
#bartok .section-typing .typing-content{
    display: flex;
    margin-left: 8.333333vw;
    justify-content: space-between;
}
#bartok .section-typing .typing-content .copy-content{
    margin-top: 1.5625vw;
}
#bartok .section-typing .typing-content .copy-content p{
    width: 31.302083vw;
    margin: 2.083333vw 0 3.125vw;
}
#bartok .section-typing .typing-content .copy-content .icon{
    display: flex;
}
#bartok .section-typing .typing-content .copy-content .icon .left-icon,
#bartok .section-typing .typing-content .copy-content .icon .right-icon{
    display: flex;
    align-items: center;
}
#bartok .section-typing .typing-content .copy-content .icon img{
    width: 3.958333vw;
    margin-right: 1.041667vw;
}
#bartok .section-typing .typing-content .copy-content .icon p{
    font-size: 1.458333vw;
    width: auto;
    margin: 0;
}
#bartok .section-typing .typing-content .copy-content .icon .right-icon{
    margin-left: 2.604167vw;
}
#bartok .section-typing .typing-content .pic-content{
    width: 45.208333vw;
}
#bartok .section-shortcuts .shortcuts-content{
    margin-left: 8.333333vw;
    position: relative;
}
#bartok .section-shortcuts .shortcuts-content .copy-content p{
    width: 38.541667vw;
    margin: 2.083333vw 0 5.833333vw;
}
#bartok .section-shortcuts .shortcuts-content .feature-content{
    display: flex;
}
#bartok .section-shortcuts .shortcuts-content .feature-content .pic-content{
    width: 61.666667vw;
    margin-right: -10.208333vw;
    margin-left: .625vw;
}
#bartok .section-shortcuts .shortcuts-content .feature-content .desc{
    width: 29.6875vw;
    margin-top: -5.052083vw;
}
#bartok .section-shortcuts .shortcuts-content .feature-content .desc p{
    margin-top: 2.083333vw;
}
#bartok .section-shortcuts .shortcuts-content .shortcuts-function {
    position: absolute;
    top: 33.635417vw;
    left: 29.975vw;
}
#bartok .section-shortcuts .shortcuts-content .shortcuts-function .line{
    width: 27.008333vw;
    height: 4.322917vw;
    border: dashed 2px #979797;
    border-top: none;
    border-right: none;
    position: relative;
    z-index: 2;
}
#bartok .section-shortcuts .shortcuts-content .shortcuts-function img{
    width: 9.583333vw;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(55%, 39.4%);
}
#bartok .section-shortcuts .shortcuts-content .combine{
    display: flex;
    margin-top: -1.145833vw;
    width: 48.541666666vw;
    justify-content: space-between;
    margin-left: 1.0416666666vw;
}
#bartok .section-shortcuts .shortcuts-content .combine>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    margin: 0 2.8645833333vw 0 0;
}
#bartok .section-shortcuts .shortcuts-content .combine>div:last-child{
    margin: 0;
}
#bartok .section-shortcuts .shortcuts-content .combine>div:last-child p{
    width: 15.5833333333vw;
}
#bartok .section-shortcuts .shortcuts-content .combine .container{
    width: 9.375vw;
    height: 3.125vw;
    background-color: #000;
    color: #fff;
    border-radius: .520833vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .416667vw;
    font-size: 1.25vw;
    line-height: 1.6;
}
#bartok .section-shortcuts .shortcuts-content .combine p{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12.5vw;
    top: calc(100% + 0.41666666vw);
}
#bartok .section-footnote .section-content {
    width: 79.947917vw;
    padding-top: 10.416667vw;
    padding-bottom: 10.416667vw;
    margin-left: 8.333333vw;
  }

  #bartok .section-footnote li {
    list-style-type: decimal;
    color: #838389;
  }

  #bartok .section-footnote li:target, #bartok .section-footnote li.active {
    color: #000;
  }
  #bartok .section-footnote ol {
    padding-left: 1.25vw;
    font-size: 1.145833vw;
  }

  @media (min-width: 1920px) {
    #bartok .section-footnote ol {
      padding-left: 1.25vw;
      font-size: .625vw;
    }
  }

  @media (max-width: 1920px) and (min-aspect-ratio: 11 / 10) {
    #bartok .section-footnote ol {
      padding-left: 24px;
      font-size: 12px;
    }
  }

  @media (max-aspect-ratio: 11 / 10) {

    #bartok .section-footnote {
      padding-top: 22.222222vw;
    }
    #bartok .section-footnote .section-content {
      width: 83.333333vw;
      padding-top: 5.555556vw;
      padding-bottom: 16.666667vw;
    }
    #bartok .section-footnote ol {
      padding-left: 4.166667vw;
      font-size: 3.333333vw;
    }
  }
  @media (max-aspect-ratio: 11 / 10){
    #bartok p {
        font-size: 3.333333vw;
    }
    #bartok h3 {
        font-size: 4.444444vw;
    }
    #bartok .spacer{
        margin-top: 27.777778vw;
    }
    #bartok .headline{
        font-size: 6.666667vw;
    }
    #bartok .section-hero{
        padding-top: 19.444444vw;
    }
    #bartok .section-hero .hero-content{
        flex-direction: column-reverse;
        padding-bottom: 12.5vw;
        width: 83.333333vw;
    }
    #bartok .section-hero .hero-picture{
        width: 81.333333vw;
    }
    #bartok .section-hero .hero-text{
        width: 78.323611vw;
        margin-bottom: 11.111111vw;
    }
    #bartok .section-hero .hero-text p{
        font-size: 3.333333vw;
        white-space: nowrap;
    }
    #bartok .section-design{
        width: 81.333333vw;
        margin: 27.777778vw auto 0;
    }
    #bartok .section-design h2{
        text-align: left;
    }
    #bartok .section-design .design-content{
        width: 100%;
        flex-direction: column;
        margin: 11.805556vw auto 0;
    }
    #bartok .section-design .design-content .box-content{
        width: 100%;
        height: 105.555556vw;
        border-radius: 5.555556vw;
        border: 1px solid #ECECEC;
    }
    #bartok .section-design .design-content .box-content:nth-child(2){
        height: 107.222222vw;
        margin-top: 11.111111vw;
    }
    #bartok .section-design .design-content div:nth-child(1) h3{
        margin: 5.138889vw 0 0 5.555556vw;
    }
    #bartok .section-design .design-content div:nth-child(1) p{
        margin: 2.916667vw 0 10vw 5.555556vw;
    }
    #bartok .section-design .design-content div:nth-child(1) .left-pic{
        width: 89.611111vw;
        margin-left: -2.361806vw;
        margin-top: -10.3125vw;
    }
    #bartok .section-design .design-content div:nth-child(2) h3 {
        margin: 5.138889vw 0 0 5.555556vw;
    }
    #bartok .section-design .design-content div:nth-child(2) p {
        width: 64.583333vw;
        margin: 2.916667vw 0 4.652778vw 5.555556vw;
    }
    #bartok .section-design .design-content div:nth-child(2) .right-pic{
        width: 90vw;
        margin-top: -8.84375vw;
    }
    #bartok .section-protection .protection-content{
        flex-direction: column-reverse;
    }
    #bartok .section-protection .protection-content .copy-content{
        width: 83.333333vw;
        margin: 0 auto 16.666667vw;
    }
    #bartok .section-protection .protection-content .copy-content h2{
        white-space: normal;
    }
    #bartok .section-protection .protection-content .copy-content p{
        margin-top: 5.555556vw;
    }
    #bartok .section-protection .protection-content .pic-content{
        width: 81.944444vw;
        margin-left: 11.388889vw;
    }
    #bartok .section-typing .typing-content .copy-content{
        width: 83.333333vw;
        margin: 0 auto;
    }
    #bartok .section-typing .typing-content{
    margin-left:0;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    padding-bottom: 30.277778vw;
    }
    #bartok .section-typing .typing-content .copy-content p{
        width: auto;
        margin: 5.555556vw 0 9.722222vw;
    }
    #bartok .section-typing .typing-content .pic-content{
        width: 91.666667vw;
    }
    #bartok .section-typing .typing-content .copy-content .icon{
        flex-direction: column;
        position: absolute;
        bottom: 0;
    }
    #bartok .section-typing .typing-content .copy-content .icon img{
        width: 10.555556vw;
        margin-right: 2.777778vw;
    }
    #bartok .section-typing .typing-content .copy-content .icon .right-icon{
        margin: 4.444444vw 0 0;
    }
    #bartok .section-typing .typing-content .copy-content .icon p{
        font-size: 3.888889vw;
    }
    #bartok .section-shortcuts .shortcuts-content .copy-content{
        width: 83.333333vw;
        margin: 0 auto;
        padding-bottom: 42.641667vw;
    }
    #bartok .section-shortcuts .shortcuts-content .copy-content p{
        width: auto;
        margin: 5.555556vw auto 7.777778vw;
    }
    #bartok .section-shortcuts .shortcuts-content{
        margin-left: 0;
    }
    #bartok .section-shortcuts .shortcuts-content .feature-content{
        flex-direction: column;
        align-items: flex-end;
    }
    #bartok .section-shortcuts .shortcuts-content .feature-content .pic-content{
        width: 88.888889vw;
        margin-right: 0;
        margin-left: 0;
    }
    #bartok .section-shortcuts .shortcuts-content .feature-content .desc{
        width: 56.25vw;
        margin-top: -20.416666666vw;
        margin-right: 35.416667vw;
    }
    #bartok .section-shortcuts .shortcuts-content .feature-content .desc p{
        margin-top: 5.555556vw;
    }
    #bartok .section-shortcuts .shortcuts-content .combine{
        flex-wrap: wrap;
        justify-content: space-between;
        width: 86.333333vw;
        margin: 0 auto;
        position: absolute;
        top: 45.833333vw;
        left: 5vw;
    }
    #bartok .section-shortcuts .shortcuts-content .combine .container{
        width: 19.444444vw;
        height: 7.5vw;
        border-radius: 1.388889vw;
        font-size: 3.055556vw;
    }
    #bartok .section-shortcuts .shortcuts-content .combine>div{
        width: 38.555556vw;
        margin: 0 0 6.25vw 0;
        position: initial;
    }
    #bartok .section-shortcuts .shortcuts-content .combine>div:nth-child(1){
        margin-right: 0;
    }
    #bartok .section-shortcuts .shortcuts-content .combine>div:nth-child(2){
        margin-right: 0;
    }
    #bartok .section-shortcuts .shortcuts-content .combine>div:nth-child(3){
        margin-right: 0;
    }
    #bartok .section-shortcuts .shortcuts-content .combine p{
        font-size: 3.055556vw;
        position: initial;
        transform: none;
        width: auto;
    }
    #bartok .section-shortcuts .shortcuts-content .combine>div:last-child p{
        width: auto;
    }
    #bartok .section-shortcuts .shortcuts-content .shortcuts-function{
        top: 124.935417vw;
        left: auto;
        right: 14.027778vw;
    }
    #bartok .section-shortcuts .shortcuts-content .shortcuts-function .line{
        width: 2px;
    height: 29.977778vw;
    border: none;
    background-color: #979797;
    }
    #bartok .section-shortcuts .shortcuts-content .shortcuts-function img{
        width: 21.388889vw;
        transform: translate(48.7%, 50%);
    }
  }