.basicReliable .functionBox .icon .icon-network-browser { background: url(../../images/banner/DWT/icon-network-browser.png) no-repeat center center; }
.basicReliable .functionBox .icon .icon-desktop-setting { background: url(../../images/banner/DWT/icon-desktop-setting.png) no-repeat center center; }
.basicReliable .functionBox .icon .icon-code-screen { background: url(../../images/banner/DWT/icon-code-screen.png) no-repeat center center; }
.basicReliable .functionBox .icon .icon-programming-language { background: url('../../images/banner/DWT/Programming-language_result.png') no-repeat center center; }

#dwtSDKMobile .tabs { text-align: center; margin-top: 35px; margin-bottom: 70px; }
    #dwtSDKMobile .tabs li { display: inline-block; color: #fe8e14; font-size: 20px; line-height: 30px; margin: 0 15px; cursor: pointer; }
        #dwtSDKMobile .tabs li.on { color: #606060; position: relative; }
            #dwtSDKMobile .tabs li.on:after { content: ""; display: block; position: absolute; width: 19px; height: 1px; background: #323234; bottom: -2px; left: 50%; transform: translateX(-50%); }

#dwtSDKMobile .npmStyle { position: relative; font-size: 16px; color: #323234; cursor: pointer; width: 260px; }
    #dwtSDKMobile .npmStyle svg { width: 12px; height: 12px; margin-right: 5px; }
    #dwtSDKMobile .npmStyle:hover { background: hsl(120, 100%, 93%); }
    #dwtSDKMobile .npmStyle .copyInfo { display: none; margin: 0 auto; text-align: left; padding-left: 20px; line-height: 33px; font-size: 14px; position: absolute; right: -55px; top: 8px; color: #00C642; }
/*#dwtSDKMobile .npmStyle i.copy { display: none }
#dwtSDKMobile .npmStyle:hover i.copy { display: inline-block }*/

#dwtSDKMobile .content { display: none; }
    #dwtSDKMobile .content.on { display: block; }

    #dwtSDKMobile .content .basicReliable .desc { padding: 0 95px; }

    #dwtSDKMobile .content .basicReliable .functionBox { min-height: 351px; max-width: 100%; padding: 78px 36px 40px 63px; }
        #dwtSDKMobile .content .basicReliable .functionBox .icon { border: 2px solid #323234; left: 65px; }
            #dwtSDKMobile .content .basicReliable .functionBox .icon i { width: 50px; height: 50px; }
                #dwtSDKMobile .content .basicReliable .functionBox .icon i.icon-programming-language { width: 48px; height: 45px; }
        #dwtSDKMobile .content .basicReliable .functionBox .desc { padding: 0; margin-top: 26px; min-height: 60px; }
        #dwtSDKMobile .content .basicReliable .functionBox .browser-list { min-height: initial; font-size: 62px; color: #AAAAAA; margin-top: 26px; height: 1em; }
            #dwtSDKMobile .content .basicReliable .functionBox .browser-list i { margin-right: 10px; }

    #dwtSDKMobile .content .features { margin-top: 140px; }
        #dwtSDKMobile .content .features .featureBox { height: 500px; position: relative; }
        #dwtSDKMobile .content .features .bgGrey { width: 96%; background-color: #F5F5F5; height: 500px; position: absolute; right: 0; top: 0; z-index: 0; }
        #dwtSDKMobile .content .features .featureBox .featureContent { z-index: 1; height: 100%; position: relative; display: flex; justify-content: space-between; align-items: center; }
            #dwtSDKMobile .content .features .featureBox .featureContent .img { max-width: 690px; width: 100%; }
            #dwtSDKMobile .content .features .featureBox .featureContent .text { width: 100%; padding: 0 150px; }
                #dwtSDKMobile .content .features .featureBox .featureContent .text p:first-child { font-size: 30px; font-family: Oswald-Regular; }
                #dwtSDKMobile .content .features .featureBox .featureContent .text p:nth-child(2) { margin-top: 15px; }
                #dwtSDKMobile .content .features .featureBox .featureContent .text p span { color: #306877; font-style: italic; font-family: OpenSans-Semibold }
            #dwtSDKMobile .content .features .featureBox .featureContent .img img { width: 100%; }
        #dwtSDKMobile .content .features .featureBox:not(:first-child) { margin: 100px 0 0 0; }
        #dwtSDKMobile .content .features .featureBox:nth-child(2) .bgGrey { left: 0; }
        #dwtSDKMobile .content .features .featureBox a { font-size: 18px; font-family: Oswald-Regular; margin-top: 20px; display: inline-block; }



    #dwtSDKMobile .content .basicGreenListContainer ul.featureList { max-width: 700px; padding-right: 55px; padding-left: 115px; }
        #dwtSDKMobile .content .basicGreenListContainer ul.featureList:first-child { max-width: 600px; padding-right: 79px; padding-left: 72px; }

    #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList { max-width: inherit; width: 49%; padding-right: 117px; padding-left: 123px; }
        #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList:first-child { padding-left: 146px; padding-right: 50px; }
        #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList p:first-child { font-family: Oswald-Regular; font-size: 22px; }

.dbrVideo .whitePlayBtn.orange { width: 50%; padding-bottom: 50%; background: #fe8e146b; }
    .dbrVideo .whitePlayBtn.orange::after { border-top: 30px solid transparent; border-left: 50px solid white; border-bottom: 30px solid transparent; }
.dbrVideo .whitePlayBtn { top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #fe8e14; background: #fe8e1440; }
    .dbrVideo .whitePlayBtn::after { border-left-color: #fe8e14; }

.dbrVideo .videoContainer { height: auto; }
.dbrVideo .strengthLine { height: 570px; padding-top: 30px; margin-top: 140px; }
    .dbrVideo .strengthLine:first-child .disc { margin-top: 166px; padding-right: 100px; }
    .dbrVideo .strengthLine:last-child .disc { margin-top: 115px; padding-right: 45px; }
    .dbrVideo .strengthLine.bgLeft { background-size: 95%; }
    .dbrVideo .strengthLine .strengthImg { position: relative; width: 736px; height: 408px; margin-top: 48px; margin-left: 0px; }
    .dbrVideo .strengthLine .disc { width: 655px; margin-left: 120px; }

i.icon-tablet { display: inline-block; background: url('../../images/banner/DWT/icon-tablet.png') no-repeat center center; background-size: cover; width: 48px; height: 64px; }
i.icon-phone { display: inline-block; background: url('../../images/banner/DWT/icon-phone.png') no-repeat center center; background-size: cover; width: 33px; height: 56px; }
i.icon-macos { display: inline-block; background: url('../../images/banner/DWT/icon-mac.png') no-repeat center center; background-size: contain; width: 61px; height: 57px; }
i.icon-nvidia { display: inline-block; background: url('../../images/banner/DWT/icon-nvidia.png') no-repeat center center; background-size: cover; width: 160px; height: 31px; vertical-align: top; margin-top: 16px; }
i.icon-linux-desktop { display: inline-block; background: url('../../images/banner/DWT/icon-linux-desktop.png') no-repeat center center; background-size: cover; width: 66px; height: 52px; }
i.icon-debian { display: inline-block; background: url('../../images/banner/DWT/icon-debian.png') no-repeat center center; background-size: cover; width: 49px; height: 60px; vertical-align: bottom; }


#dwtSDKMobile .basicPageFooter { margin-top: 140px; }

/* 2022/11/17 */
#dwtSDKMobile .bannerText { width: 40%; margin-top: 100px; }
    #dwtSDKMobile .bannerText h1 { color: white; font-family: Oswald-Light; font-size: 40px; margin-bottom: 30px; }
    #dwtSDKMobile .bannerText .btns { display: flex; justify-content: space-between; margin-top: 35px; flex-wrap: wrap; }
    #dwtSDKMobile .bannerText .orange-btn { width: 260px; height: 54px; line-height: 54px; font-size: 18px; margin: 0 0; text-align: center; padding: 0; }
    #dwtSDKMobile .bannerText .npmStyle { background: white; width: 308px; height: 54px; line-height: 54px; text-align: center; }
        #dwtSDKMobile .bannerText .npmStyle::before { content: ""; display: inline-block; width: 13px; height: 13px; border-width: 2px; border-style: solid; border-color: black black transparent transparent; transform: rotate(45deg) skew(-15deg, -15deg); position: relative; left: -20px; vertical-align: middle; }
.playBtn { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 150px; height: 150px; border-radius: 50%; border: 2px solid #fe8e14; background: #fe8e1440; cursor: pointer; }
    .playBtn::after { content: ""; display: inline-block; width: 0; height: 0; border-top: 30px solid transparent; border-left: 50px solid #fe8e14; border-bottom: 30px solid transparent; position: absolute; left: 50%; top: 50%; transform: translate(-30%,-50%); }
    .playBtn:hover { background: #fe8e1470; }

#dwtSDKMobile .icon-svg { fill: #cccccb; stroke-width: 0px; }
#dwtSDKMobile .platformLinks { height: 100%; display: block; position: relative; padding-left: 70px; }
    #dwtSDKMobile .platformLinks::before { content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 40px; background-color: #ccc; }
    #dwtSDKMobile .platformLinks svg { vertical-align: top; }
    #dwtSDKMobile .platformLinks .icon-android { width: 66px; height: 59px; }
    #dwtSDKMobile .platformLinks > a { width: 48px; height: 55px; display: inline-block }
        #dwtSDKMobile .platformLinks > a:not(:last-child) { margin-right: 10px; }
        #dwtSDKMobile .platformLinks > a > svg { width: 100%; height: 100%; }
        #dwtSDKMobile .platformLinks > a:hover .icon-svg { fill: #fe8e14; }

#dwtSDKMobile .workflow { background-color: #F5F5F5; height: 680px; }
    #dwtSDKMobile .workflow ul { counter-reset: index; width: fit-content; margin: 30px auto; }
        #dwtSDKMobile .workflow ul li:not(:last-child) { margin-bottom: 15px; }
        #dwtSDKMobile .workflow ul li p { display: inline; margin: 0; }
        #dwtSDKMobile .workflow ul li::before { line-height: 30px; text-align: center; margin-right: 13px; display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: #6AC4BB; content: counter(index); counter-increment: index; color: white; font-size: 18px; }
    #dwtSDKMobile .workflow .workflow-illust { background: url(../../images/DWT/workflow-desktop.svg) center no-repeat; background-size: contain; height: 240px; width: 100%; }

#dwtSDKMobile .no-login-footer .row > div:first-child img { max-width: 50%; }

#dwtSDKMobile .d-btn-wrap { margin-top: 45px; --height: 54px; }
    #dwtSDKMobile .d-btn-wrap .watch-video-btn { display: flex; align-items: center; padding: 0 20px; gap: 0 19px; }
        #dwtSDKMobile .d-btn-wrap .watch-video-btn .play-icon { display: block; position: relative; border-radius: 50%; width: 33px; height: 33px; border: 2px solid #FE8E14; background-color: #FE8E144D; }
            #dwtSDKMobile .d-btn-wrap .watch-video-btn .play-icon::before { content: ""; display: block; position: absolute; border-width: 6px 0 6px 9px; border-style: solid; border-color: transparent transparent transparent #fe8e14; top: 50%; left: 50%; transform: translate(-2px, -50%); }

#dwtSDKMobile .macos-table { width: 100%; }
    #dwtSDKMobile .macos-table.mobile { display: none; }
    #dwtSDKMobile .macos-table thead { height: 60px; background-color: #323234; color: white; font-size: 20px; font-family: OpenSans-Semibold; }
        #dwtSDKMobile .macos-table thead th { border: none; padding-left: 40px; }
    #dwtSDKMobile .macos-table.desktop thead th:first-child { width: 350px; }
    #dwtSDKMobile .macos-table.desktop thead th:nth-child(2) { width: 450px; }
    #dwtSDKMobile .macos-table tbody tr.type { font-family: OpenSans-Semibold; background-color: #F5F5F5; height: 48px; }
        #dwtSDKMobile .macos-table tbody tr.type td { font-size: 18px; }
    #dwtSDKMobile .macos-table tbody tr { height: 52.5px; }
        #dwtSDKMobile .macos-table tbody tr td { padding-left: 40px; font-size: 16px; border-color: #AAAAAA; border-bottom-color: #DDDDDD; }
    #dwtSDKMobile .macos-table.desktop tbody tr td:nth-child(2) { border-right: none; }
    #dwtSDKMobile .macos-table.desktop tbody tr td:last-child { border-left: none; }

@media (min-width: 1680px) {
    #dwtSDKMobile .workflow h2 { font-size: 36px; }
}

@media (max-width: 1679px) {
    #dwtSDKMobile .macos-table thead { font-size: 18px; }
        #dwtSDKMobile .macos-table thead th { padding: 0 20px; }
    #dwtSDKMobile .macos-table.desktop thead th:first-child { width: auto; }
    #dwtSDKMobile .macos-table.desktop thead th:nth-child(2) { width: auto; }
    #dwtSDKMobile .macos-table tbody tr { height: 60px; }
        #dwtSDKMobile .macos-table tbody tr td { padding: 10px 20px; }

    #dwtSDKMobile .platformLinks { padding-left: 25px; }
        #dwtSDKMobile .platformLinks .icon-android { width: 40px; }
        #dwtSDKMobile .platformLinks > a { width: 30px; }

    .dbrVideo .strengthLine { height: 420px; padding-top: 25px; }
        .dbrVideo .strengthLine.bgLeft { background-size: 95%; }
        .dbrVideo .strengthLine .strengthImg { width: 510px; height: 283px; margin-top: 40px; margin-left: 0px; }
        .dbrVideo .strengthLine .disc { width: 510px; margin-left: 53px; }
        .dbrVideo .strengthLine:first-child .disc { margin-top: 110px; padding-right: 0; }
        .dbrVideo .strengthLine:last-child .disc { margin-top: 60px; padding-right: 0; }

    #dwtSDKMobile .content .basicGreenListContainer ul.featureList { font-size: 16px; }
    #dwtSDKMobile .content .basicGreenListContainer ul.featureList { max-width: 700px; padding-right: 40px; padding-left: 115px; }
        #dwtSDKMobile .content .basicGreenListContainer ul.featureList:first-child { max-width: 504px; padding-right: 0; padding-left: 94px; }

    #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList { max-width: inherit; width: 49%; padding-right: 60px; padding-left: 100px; }
        #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList:first-child { padding-left: 110px; padding-right: 20px; }

    #dwtSDKMobile .content .basicReliable .desc { padding: 0 50px; }
    #dwtSDKMobile .content .basicReliable .functionBox { padding: 69px 40px 40px 45px; }
        #dwtSDKMobile .content .basicReliable .functionBox .icon { left: 45px; }
        #dwtSDKMobile .content .basicReliable .functionBox .desc { min-height: 84px; }
        #dwtSDKMobile .content .basicReliable .functionBox .browser-list { font-size: 50px; }

    #dwtSDKMobile .content .features .featureBox .featureContent .text { padding: 0 100px; }
    #dwtSDKMobile .content .basicReliable .functionBox { min-height: 349px; }

        #dwtSDKMobile .content .basicReliable .functionBox .browser-list i { font-size: 45px; }
    i.icon-nvidia { width: 100px; height: 19px; }
    i.icon-debian { width: 41px; height: 50px; }
    i.icon-linux-desktop { width: 56px; height: 44px; }
    i.icon-macos { width: 54px; height: 50px; }
    i.icon-tablet { width: 40px; height: 54px; }
    i.icon-phone { width: 27px; height: 46px; }

    #dwtSDKMobile .basicPageFooter { margin-top: 120px; }

    #dwtSDKMobile .bannerText { margin-top: 50px; width: 46%; }
        #dwtSDKMobile .bannerText .btns { justify-content: flex-start; }
        #dwtSDKMobile .bannerText h1 { font-size: 36px; }
        #dwtSDKMobile .bannerText .orange-btn { padding: 0 30px; width: auto; margin-right: 40px; }
        #dwtSDKMobile .bannerText .npmStyle { padding: 0 20px; width: auto; }
            #dwtSDKMobile .bannerText .npmStyle::before { position: static; margin-right: 10px; }
}

@media (max-width: 1199px) {
    .dbrVideo .strengthLine { height: 420px; padding-top: 0px; margin-top: 100px; }
        .dbrVideo .strengthLine.bgLeft { background-size: 95%; }
        .dbrVideo .strengthLine .strengthImg { width: 420px; height: 234px; margin-top: 84px; margin-left: 0px; }
        .dbrVideo .strengthLine .disc { width: 480px; margin-left: 20px; }
        .dbrVideo .strengthLine:first-child .disc { margin-top: 124px; }
        .dbrVideo .strengthLine:last-child .disc { margin-top: 76px; }

    #dwtSDKMobile .content .basicReliable .reliableDisc { padding: 0 50px; }
    #dwtSDKMobile .content .basicReliable .desc { padding: 0; }
    #dwtSDKMobile .content .basicReliable .functionList { margin-top: 120px; }
    #dwtSDKMobile .content .basicReliable .functionBox { padding: 69px 20px 40px 20px; min-height: 311px; }
        #dwtSDKMobile .content .basicReliable .functionBox .icon { left: 29px; }
        #dwtSDKMobile .content .basicReliable .functionBox .desc { min-height: 56px; font-size: 14px; }
        #dwtSDKMobile .content .basicReliable .functionBox .browser-list { font-size: 50px; }

    .basicGreenListContainer ul.featureList { width: 49%; }
    #dwtSDKMobile .content .basicGreenListContainer ul.featureList { padding-right: 0px; padding-left: 50px; }
        #dwtSDKMobile .content .basicGreenListContainer ul.featureList:first-child { padding-right: 0; padding-left: 50px; }
    #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList { max-width: inherit; width: 49%; padding-right: 20px; padding-left: 60px; }
        #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList:first-child { padding-left: 60px; padding-right: 0px; }
        #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList p:first-child { font-size: 20px; }

    #dwtSDKMobile .bannerText { width: 55%; }
        #dwtSDKMobile .bannerText .orange-btn, #dwtSDKMobile .bannerText .npmStyle { font-size: 16px; }
}

@media (max-width: 991px) {

    #dwtSDKMobile .macos-table.desktop { display: none }
    #dwtSDKMobile .macos-table.mobile { display: table; }
        #dwtSDKMobile .macos-table.mobile thead { font-size: 16px; }
        #dwtSDKMobile .macos-table.mobile tbody tr td { font-size: 14px; }
        #dwtSDKMobile .macos-table.mobile tbody tr:not(.type) td:first-child { background-color: #F5F5F5; }
        #dwtSDKMobile .macos-table.mobile tbody tr.type td { font-size: 16px; }


    #dwtSDKMobile .workflow { height: auto; padding-bottom: 20px; }
        #dwtSDKMobile .workflow .workflow-illust { background: url(../../images/DWT/workflow-mobile.svg) center no-repeat; background-size: contain; height: 500px; width: 100%; }

    .dbrVideo .strengthLine { height: auto; padding-top: 60px; }
        .dbrVideo .strengthLine.bgLeft { background: #f5f5f5; }
        .dbrVideo .strengthLine .strengthImg { width: 80%; height: auto; margin-top: 0; margin-left: auto; margin-bottom: 40px; margin-right: auto; display: block; }
        .dbrVideo .strengthLine .disc { width: 80%; margin-left: auto; margin-right: auto; display: block; padding-bottom: 40px; }
        .dbrVideo .strengthLine:first-child .disc { margin-top: 0px; }
        .dbrVideo .strengthLine:last-child .disc { margin-top: 0px; }

    #dwtSDKMobile .content .basicReliable .functionBox { min-height: unset; }

    #dwtSDKMobile .content .basicGreenListContainer ul.featureList { font-size: 14px; }
    #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList p:first-child { font-size: 18px; }

    #dwtSDKMobile .content .basicReliable .functionBox .desc { min-height: 50px; }

    #dwtSDKMobile .content .basicReliable .functionList > div:last-child { margin-top: 100px; }

    #dwtSDKMobile .content .features .featureBox { padding: 50px 0 20px 0; height: auto; }
        #dwtSDKMobile .content .features .featureBox .featureContent { flex-direction: column; }
    #dwtSDKMobile .content .features .bgGrey { width: 100%; height: 100%; }
    #dwtSDKMobile .content .features .featureBox .featureContent .img { width: 80%; }
    #dwtSDKMobile .content .features .featureBox .featureContent .text { margin: 30px; padding: 0 70px; }
    #dwtSDKMobile .content .features .featureBox:nth-child(2) .featureContent { flex-direction: column-reverse; }
    #dwtSDKMobile .content .features .featureBox .featureContent .text p:first-child { font-size: 24px; }

    #dwtSDKMobile .bannerText { width: 100%; }
        #dwtSDKMobile .bannerText h1 { font-size: 32px; }
}

@media (max-width: 767px) {
    #dwtSDKMobile .platformLinks { padding: 0; }
        #dwtSDKMobile .platformLinks::before { display: none; }

    #dwtSDKMobile .content .basicReliable .reliableDisc { padding: 0 20px; }
    #dwtSDKMobile .content .basicReliable .functionList { margin-top: 100px; }
        #dwtSDKMobile .content .basicReliable .functionList > div { margin-top: 100px; padding: 0; }
            #dwtSDKMobile .content .basicReliable .functionList > div:first-child { margin-top: 0; }

    #dwtSDKMobile .content .basicGreenListContainer { padding-top: 64px; padding-bottom: 80px; }
        #dwtSDKMobile .content .basicGreenListContainer ul.featureList, #dwtSDKMobile .content.Mobile .basicGreenListContainer ul.featureList { width: 100%; }

    .dbrVideo .strengthLine .strengthImg { width: 90%; }
    .dbrVideo .strengthLine .disc { width: 90%; }

    #dwtSDKMobile .content .features { margin-top: 80px; }
        #dwtSDKMobile .content .features .featureBox .featureContent .text { padding: 0 10%; }
            #dwtSDKMobile .content .features .featureBox .featureContent .text p:first-child { font-size: 18px; }

    #dwtSDKMobile .basicPageFooter { margin-top: 100px; }

    #dwtSDKMobile .bannerText { margin-top: 0; }
        #dwtSDKMobile .bannerText .orange-btn { margin-bottom: 20px; }
        #dwtSDKMobile .bannerText .orange-btn, #dwtSDKMobile .bannerText .npmStyle { font-size: 14px; height: 40px; line-height: 40px; }
}