#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: 81.25vw;
    margin: 4.166667vw auto 0;
}

#bartok .section-design .design-content .box-content {
    width: 40vw;
    border: 2px solid #ECECEC;
    height: 48.59375vw;
    border-radius: 1.666667vw;
    overflow: hidden;
    box-sizing: border-box;
}

#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 3.125vw 2.083333vw;
}

#bartok .section-design .design-content div:nth-child(1) .left-pic {
    width: 36.77083vw;
    margin: 0 auto;
}

#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.04166vw 2.083333vw;
}

#bartok .section-design .design-content div:nth-child(2) .right-pic {
    width: 36.77083vw;
    margin: 0 auto;
}

#bartok .section-protection .protection-content {
    width: 81.25vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}


#bartok .section-protection .protection-content .pic-content {
    width: 41.25vw;
}
#bartok .section-protection-3 .protection-content .pic-content {
    width: 45.05208vw;
}
#bartok .section-protection .protection-content .copy-content {
    width: 30.36458vw;
    margin: 10.41666vw 0 0 5.98958vw;
}

#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: 9.375vw;
    justify-content: space-between;
}

#bartok .section-typing .typing-content .copy-content {
    margin-top: 4.84375vw;
}

#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;
    margin-right: 3.90625vw;
}

#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: 9.375vw;
    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;
}

#bartok .protection-content .pic-content .icon .icon-img {
    width: 2.708333vw;
}

#bartok .protection-content .pic-content .icon .icon-title {
    margin-left: 1.5625vw;
    width: 17.875vw;
    line-height: 1.25;
    font-size: 3.055556vw;
    color: #393939;
}

#bartok .protection-content .pic-content .icon .icon-title p {
    font-size: 1.14583vw
}

#bartok .protection-content .pic-content .icon .icon-title p:first-child {
    font-weight: 700;
}

#bartok .protection-content .pic-content .icon .icon-title p:last-child {
    color: #888888;
    ;
}

#bartok .protection-content .pic-content .icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#bartok .protection-content .pic-content .icon .icon-top {
    display: flex;
    margin-top: 2.29166vw;
    align-items: center;
    width: 24.145833vw;
    font-size: 1.14583vw;
}

#bartok .protection-content .pic-content .icon .icon-top:nth-child(2),
#bartok .protection-content .pic-content .icon .icon-top:nth-child(4) {
    width: 16.625vw;
}

#bartok .protection-content .pic-content .icon .icon-top:nth-child(2) .icon-title,
#bartok .protection-content .pic-content .icon .icon-top:nth-child(4) .icon-title {
    width: 12.67708vw;
}

@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: 83.33333vw;
        margin: 27.777778vw auto 0;
    }
    #bartok .section-protection .protection-content{
        width: 83.33333vw;
    }
    
    #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 4.58333vw 5.555556vw;
    }

    #bartok .section-design .design-content div:nth-child(1) .left-pic {
        width: 70.27777vw;
        margin: 0 auto;
    }

    #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 0 5.555556vw;
    }

    #bartok .section-design .design-content div:nth-child(2) .right-pic {
        width: 70.27777vw;
        margin: 0 auto;
    }

    #bartok .section-protection .protection-content {
        flex-direction: column-reverse;
    }

    #bartok .section-protection .protection-content .copy-content {
        width: 83.333333vw;
        margin: 0 auto 10.138889vw;
        padding: 0 3.19444vw;
        box-sizing: border-box;
    }

    #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: 100%;
        margin: 0 auto;
    }

    #bartok .section-typing .typing-content .copy-content {
        width: 83.333333vw;
        margin: 0 auto;
        padding: 0 3.19444vw;
        box-sizing: border-box;
    }

    #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: 83.33333vw;
        margin: 0 auto;
    }

    #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%);
    }

    #bartok .protection-content .pic-content .icon .icon-top:nth-child(1) {
        order: 1;
    }

    #bartok .protection-content .pic-content .icon .icon-top:nth-child(2) {
        order: 3;
    }

    #bartok .protection-content .pic-content .icon .icon-top:nth-child(3) {
        order: 2;
    }

    #bartok .protection-content .pic-content .icon .icon-top:nth-child(4) {
        order: 4;
    }

    #bartok .protection-content .pic-content .icon .icon-img {
        width: 8.333333vw;
    }

    #bartok .protection-content .pic-content .icon .icon-title {
        font-size: 3.05555vw;
        margin-left: 3.472222vw;
        width: 45.83333vw;
    }
    #bartok .protection-content .pic-content .icon .icon-title p{
        font-size: 3.05555vw;
    }

    #bartok .protection-content .pic-content .icon .icon-top:nth-child(2) .icon-title,
    #bartok .protection-content .pic-content .icon .icon-top:nth-child(4) .icon-title {
        width: 45.83333vw;
    }

    #bartok .protection-content .pic-content .icon .icon-top:nth-child(2),
    #bartok .protection-content .pic-content .icon .icon-top:nth-child(4) {
        width: 100%;
    }

    #bartok .protection-content .pic-content .icon {
        flex-direction: column;
        width: 83.33333vw;
        margin: 9.722222vw auto 0;
        padding:0 3.19444vw;
        box-sizing: border-box;
    }

    #bartok .protection-content .pic-content .icon .icon-top {
        width: 100%;
    }
    #bartok .last-section .protection-content{
        width:92.63888vw
    }
}