@media screen and (min-width: 0px) { #integration { padding-top: 70px; } #integration #hero { padding: 60px 20px; text-align: center; color: #FFF; background-repeat: no-repeat; background-size: cover; background-position: center; } #integration #hero .subtitle { font-size: 16px; font-weight: bold; margin-bottom: 10px; } #integration #hero .title { font-size: 36px; font-weight: bold; } #integration.hub { background-color: #FFF; } #integration .integration-lists { padding: 60px 20px; } #integration .integration-lists .content { padding-bottom: 60px; text-align: center; } #integration .integration-lists .title { font-size: 34px; font-weight: bold; margin-bottom: 20px; } #integration .integration-lists .text { line-height: 1.6em; } #integration .integration-lists ul li { margin-bottom: 30px; } #integration .integration-lists ul li:last-child { margin-bottom: 0; } #integration .integration-lists ul li a { display: block; border-radius: 10px; overflow: hidden; background-color: #F8F8F8; font-size: 23px; font-weight: 500; text-align: center; } #integration .integration-lists ul li .img-wrapper { overflow: hidden; } #integration .integration-lists ul li .divimg { height: 200px; background-repeat: no-repeat; background-size: cover; background-position: center; transform: scale(1); transition: all 0.35s; } #integration .integration-lists ul li a:hover .divimg { transform: scale(1.05); } #integration .integration-lists ul li .label { padding: 20px 0; } #integration .integration-tabs { padding: 30px 20px; overflow: hidden; background-color: #EAECED; position: relative; } #integration .integration-tabs .title { margin-bottom: 20px; text-align: center; font-size: 23px; font-weight: 500; } #integration .integration-tabs .slider-toggle { position: absolute; top: 35px; left: 0; right: 0; } #integration .integration-tabs .slider-toggle a { display: flex; opacity: 1; align-items: center; width: 30px; height: 100px; } #integration .integration-tabs .slider-toggle a.btn-prev { position: absolute; left: 10px; } #integration .integration-tabs .slider-toggle a.btn-next { position: absolute; right: 10px; } #integration .integration-tabs .slider-toggle.stopLeft a.btn-prev { opacity: 0.3; } #integration .integration-tabs .slider-toggle.stopRight a.btn-next { opacity: 0.3; } #integration .integration-tabs .slider-toggle .arrows { display: inline-block; margin: 10px 8px; box-sizing: border-box; height: 10px; width: 10px; border-right: 2px solid #3a4c55; border-top: 2px solid #3a4c55; } #integration .integration-tabs .slider-toggle a.btn-prev .arrows { margin: 10px; transform: rotate(-135deg); } #integration .integration-tabs .slider-toggle a.btn-next .arrows { transform: rotate(45deg); } #integration .integration-tabs ul { display: flex; overflow-x: hidden; margin: 0 20px; } #integration .integration-tabs ul li a { display: block; margin-right: 15px; padding: 20px 6px; box-sizing: border-box; width: 120px; background-color: #F6F6F6; border-radius: 10px; font-size: 14px; text-align: center; transition: all 0.35s; } #integration .integration-tabs ul li a:hover { background-color: #FFF; } #integration .integration-tabs ul li:last-child a { margin-right: 0; } #integration .integration-tabs ul li a img { width: 40px; margin: 0 auto 10px; } #integration #s1 { padding: 60px 20px 20px; display: grid; grid-template-columns: 2fr 3fr; align-items: baseline; } #integration #s1 .divicon { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } #integration #s1 .divimg { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } #integration #s1 .content { padding: 20px 0; grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } #integration #s1 .title { font-size: 38px; font-weight: bold; margin-bottom: 20px; } #integration #s1 .text { line-height: 1.6em; } #integration #s1 .download-wrapper { display: flex; margin-top: 20px; } #integration #s1 .download-wrapper .item:nth-child(1) { margin-right: 20px; } #integration #s1 .download-wrapper .btn { padding: 10px 30px; width: auto; } #integration #s2 { padding: 60px 20px; } #integration #s2 .item { border-radius: 10px; overflow: hidden; margin-bottom: 30px; } #integration #s2 .item:last-child { margin-bottom: 0; } #integration #s2 .item h1 { font-size: 23px; margin-bottom: 15px; } #integration #s2 .item .text p { line-height: 1.6em; padding: 5px 0; } #integration #s2 .item .wrapper-right { padding: 50px; text-align: center; background-color: #FFF; } #integration #s2 .item .wrapper-right .btn { margin: 20px auto 0; width: 200px; } #integration #s2 .item .wrapper-left .divimg { height: 300px; display: flex; align-items: center; background-color: #FFF; background-repeat: no-repeat; background-size: cover; background-position: center; } @media (-webkit-max-device-pixel-ratio: 1.99999999) { #integration #hero { background-image: url(../img/integration/IntegrationHero@2x.jpg); background-position: 50% 25%;} .is-webp #integration #hero { background-image: url(../img/integration/IntegrationHero@2x.webp); background-position: 50% 25%;} #integration .integration-lists ul li:nth-child(1) .divimg { background-image: url(../img/integration/IntegrationGoogle@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(1) .divimg { background-image: url(../img/integration/IntegrationGoogle@1x.webp) } */ #integration .integration-lists ul li:nth-child(2) .divimg { background-image: url(../img/integration/IntegrationAlexa@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(2) .divimg { background-image: url(../img/integration/IntegrationAlexa@1x.webp) } */ #integration .integration-lists ul li:nth-child(3) .divimg { background-image: url(../img/integration/IntegrationHomekit@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(3) .divimg { background-image: url(../img/integration/IntegrationHomekit@1x.webp) } */ #integration .integration-lists ul li:nth-child(4) .divimg { background-image: url(../img/integration/IntegrationScreenMirror@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(4) .divimg { background-image: url(../img/integration/IntegrationScreenMirror@1x.webp) } */ #integration .integration-lists ul li:nth-child(5) .divimg { background-image: url(../img/integration/IntegrationMobile@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(5) .divimg { background-image: url(../img/integration/IntegrationMobile@1x.webp) } */ #integration .integration-lists ul li:nth-child(6) .divimg { background-image: url(../img/integration/IntegrationDesktop@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(6) .divimg { background-image: url(../img/integration/IntegrationDesktop@1x.webp) } */ #integration .integration-lists ul li:nth-child(7) .divimg { background-image: url(../img/integration/IntegrationRazer@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(7) .divimg { background-image: url(../img/integration/IntegrationRazer@1x.webp) } */ #integration .integration-lists ul li:nth-child(8) .divimg { background-image: url(../img/integration/IntegrationIFTTT@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(8) .divimg { background-image: url(../img/integration/IntegrationIFTTT@1x.webp) } */ #integration .integration-lists ul li:nth-child(9) .divimg { background-image: url(../img/integration/IntegrationSmartThings@1x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(9) .divimg { background-image: url(../img/integration/IntegrationSmartThings@1x.webp) } #integration .integration-lists ul li:nth-child(10) .divimg { background-image: url(../img/integration/IntegrationFlic@1x.jpg) } /* .is-webp #integration .integration-lists ul li:nth-child(10) .divimg { background-image: url(../img/integration/IntegrationFlic@1x.webp) } */ #integration.mobile #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/scenes@1x.jpg); } /* .is-webp #integration.mobile #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/scenes@1x.webp); } */ #integration.mobile #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/scheduels@1x.jpg); } /* .is-webp #integration.mobile #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/scheduels@1x.webp); } */ #integration.mobile #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/playlist@1x.jpg); } /* .is-webp #integration.mobile #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/playlist@1x.webp); } */ #integration.mobile #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/discover@1x.jpg); } /* .is-webp #integration.mobile #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/discover@1x.webp); } */ #integration.mobile #s2 .item:nth-child(6) .wrapper-left .divimg { background-image: url(../img/integration/away@1x.jpg); } /* .is-webp #integration.mobile #s2 .item:nth-child(6) .wrapper-left .divimg { background-image: url(../img/integration/away@1x.webp); } */ #integration.google #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection1@1x.png); } .is-webp #integration.google #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection1@1x.webp); } #integration.google #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection2@1x.jpg); } .is-webp #integration.google #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection2@1x.webp); } #integration.google #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection3@1x.jpg); } .is-webp #integration.google #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection3@1x.webp); } #integration.alexa #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/ALexa/alexaSection1@1x.png); } .is-webp #integration.alexa #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/ALexa/alexaSection1@1x.webp); } #integration.alexa #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection2@2x.jpg); } .is-webp #integration.alexa #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection2@2x.webp); } #integration.alexa #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection3@1x.png); } .is-webp #integration.alexa #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection3@1x.webp); } #integration.screen-mirror #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection1@1x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection1@1x.webp); } #integration.screen-mirror #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection2@2x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection2@2x.webp); } #integration.screen-mirror #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection3@1x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection3@1x.webp); } #integration.screen-mirror #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection4@1x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection4@1x.webp); } #integration.homekit #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection1@1x.png); background-size: 80%; background-position: 50% 100%;} .is-webp #integration.homekit #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection1@1x.webp); background-size: 80%; background-position: 50% 100%;} #integration.homekit #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection2@1x.jpg); } .is-webp #integration.homekit #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection2@1x.webp); } #integration.homekit #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection3@1x.jpg); } .is-webp #integration.homekit #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection3@1x.webp); } #integration.desktop #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection1@1x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection1@1x.webp); } #integration.desktop #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection2@1x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection2@1x.webp); } #integration.desktop #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection3@1x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection3@1x.webp); } #integration.desktop #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection4@1x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection4@1x.webp); } #integration.ifttt #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection1@1x.jpg); } .is-webp #integration.ifttt #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection1@1x.webp); } #integration.ifttt #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection2@1x.jpg); } .is-webp #integration.ifttt #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection2@1x.webp); } #integration.ifttt #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection3@1x.jpg); } .is-webp #integration.ifttt #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection3@1x.webp); } #integration.smart-things #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection1@1x.jpg); } .is-webp #integration.smart-things #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection1@1x.webp); } #integration.smart-things #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection2@1x.jpg); } .is-webp #integration.smart-things #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection2@1x.webp); } #integration.razer #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection1@1x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection1@1x.webp); } #integration.razer #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection2@1x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection2@1x.webp); } #integration.razer #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection3@1x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection3@1x.webp); } #integration.razer #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection4@1x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection4@1x.webp); } #integration.flic-button #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection1@1x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection1@1x.webp); } #integration.flic-button #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection2@1x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection2@1x.webp); } #integration.flic-button #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection3@1x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection3@1x.webp); } #integration.flic-button #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection4@1x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection4@1x.webp); } } @media (-webkit-min-device-pixel-ratio: 2) { #integration #hero { background-image: url(../img/integration/IntegrationHero@2x.jpg); } .is-webp #integration #hero { background-image: url(../img/integration/IntegrationHero@2x.webp); } #integration .integration-lists ul li:nth-child(1) .divimg { background-image: url(../img/integration/IntegrationGoogle@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(1) .divimg { background-image: url(../img/integration/IntegrationGoogle@2x.webp) } #integration .integration-lists ul li:nth-child(2) .divimg { background-image: url(../img/integration/IntegrationAlexa@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(2) .divimg { background-image: url(../img/integration/IntegrationAlexa@2x.webp) } #integration .integration-lists ul li:nth-child(3) .divimg { background-image: url(../img/integration/IntegrationHomekit@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(3) .divimg { background-image: url(../img/integration/IntegrationHomekit@2x.webp) } #integration .integration-lists ul li:nth-child(4) .divimg { background-image: url(../img/integration/IntegrationScreenMirror@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(4) .divimg { background-image: url(../img/integration/IntegrationScreenMirror@2x.webp) } #integration .integration-lists ul li:nth-child(5) .divimg { background-image: url(../img/integration/IntegrationMobile@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(5) .divimg { background-image: url(../img/integration/IntegrationMobile@2x.webp) } #integration .integration-lists ul li:nth-child(6) .divimg { background-image: url(../img/integration/IntegrationDesktop@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(6) .divimg { background-image: url(../img/integration/IntegrationDesktop@2x.webp) } #integration .integration-lists ul li:nth-child(7) .divimg { background-image: url(../img/integration/IntegrationRazer@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(7) .divimg { background-image: url(../img/integration/IntegrationRazer@2x.webp) } #integration .integration-lists ul li:nth-child(8) .divimg { background-image: url(../img/integration/IntegrationIFTTT@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(8) .divimg { background-image: url(../img/integration/IntegrationIFTTT@2x.webp) } #integration .integration-lists ul li:nth-child(9) .divimg { background-image: url(../img/integration/IntegrationSmartThings@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(9) .divimg { background-image: url(../img/integration/IntegrationSmartThings@2x.webp) } #integration .integration-lists ul li:nth-child(10) .divimg { background-image: url(../img/integration/IntegrationFlic@2x.jpg) } .is-webp #integration .integration-lists ul li:nth-child(10) .divimg { background-image: url(../img/integration/IntegrationFlic@2x.webp) } #integration.mobile #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/scenes@2x.jpg); } .is-webp #integration.mobile #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/scenes@2x.webp); } #integration.mobile #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/scheduels@2x.jpg); } .is-webp #integration.mobile #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/scheduels@2x.webp); } #integration.mobile #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/playlist@2x.jpg); } .is-webp #integration.mobile #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/playlist@2x.webp); } #integration.mobile #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/discover@2x.jpg); } .is-webp #integration.mobile #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/discover@2x.webp); } #integration.mobile #s2 .item:nth-child(6) .wrapper-left .divimg { background-image: url(../img/integration/away@2x.jpg); } .is-webp #integration.mobile #s2 .item:nth-child(6) .wrapper-left .divimg { background-image: url(../img/integration/away@2x.webp); } #integration.google #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection1@2x.png); } .is-webp #integration.google #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection1@2x.webp); } #integration.google #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection2@2x.jpg); } .is-webp #integration.google #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection2@2x.webp); } #integration.google #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection3@2x.jpg); } .is-webp #integration.google #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Google/googleSection3@2x.webp); } #integration.alexa #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/ALexa/alexaSection1@2x.jpg); } .is-webp #integration.alexa #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/ALexa/alexaSection1@2x.webp); } #integration.alexa #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection2@2x.jpg); } .is-webp #integration.alexa #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection2@1x.webp); } #integration.alexa #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection3@2x.jpg); } .is-webp #integration.alexa #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Alexa/alexaSection3@2x.webp); } #integration.screen-mirror #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection1@2x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection1@2x.webp); } #integration.screen-mirror #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection2@1x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection2@1x.webp); } #integration.screen-mirror #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection3@2x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection3@2x.webp); } #integration.screen-mirror #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection4@2x.jpg); } .is-webp #integration.screen-mirror #s2 .item:nth-child(5) .wrapper-left .divimg { background-image: url(../img/integration/Screen/screenSection4@2x.webp); } #integration.homekit #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection1@2x.png); } .is-webp #integration.homekit #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection1@2x.webp); } #integration.homekit #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection2@2x.jpg); } .is-webp #integration.homekit #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection2@2x.webp); } #integration.homekit #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection3@2x.jpg); } .is-webp #integration.homekit #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Homekit/homekitSection3@2x.webp); } #integration.desktop #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection1@2x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection1@2x.webp); } #integration.desktop #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection2@2x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection2@2x.webp); } #integration.desktop #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection3@2x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection3@2x.webp); } #integration.desktop #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection4@2x.jpg); } .is-webp #integration.desktop #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Desktop/desktopSection4@2x.webp); } #integration.ifttt #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection1@2x.jpg); } .is-webp #integration.ifttt #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection1@2x.webp); } #integration.ifttt #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection2@2x.jpg); } .is-webp #integration.ifttt #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection2@2x.webp); } #integration.ifttt #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection3@2x.jpg); } .is-webp #integration.ifttt #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/IFTTT/iftttSection3@2x.webp); } #integration.smart-things #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection1@2x.jpg); } .is-webp #integration.smart-things #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection1@2x.webp); } #integration.smart-things #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection2@2x.jpg); } .is-webp #integration.smart-things #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Smart/smartSection2@2x.webp); } #integration.razer #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection1@2x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection1@2x.webp); } #integration.razer #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection2@2x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection2@2x.webp); } #integration.razer #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection3@2x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection3@2x.webp); } #integration.razer #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection4@2x.jpg); } .is-webp #integration.razer #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Razer/razerSection4@2x.webp); } #integration.flic-button #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection1@2x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(1) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection1@2x.webp); } #integration.flic-button #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection2@2x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(2) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection2@2x.webp); } #integration.flic-button #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection3@2x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(3) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection3@2x.webp); } #integration.flic-button #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection4@2x.jpg); } .is-webp #integration.flic-button #s2 .item:nth-child(4) .wrapper-left .divimg { background-image: url(../img/integration/Flic/flicSection4@2x.webp); } } } @media screen and (min-width: 768px) { #integration { padding-top: 80px; } #integration .integration-lists { padding: 60px 50px; } #integration .integration-lists .content { width: 80%; margin: 0 auto; } #integration .integration-lists ul { display: flex; flex-wrap: wrap; } #integration .integration-lists ul li { width: calc((100% - 30px) / 2); margin-right: 30px; } #integration .integration-lists ul li:nth-child(2n) { margin-right: 0; } #integration .integration-tabs { padding: 30px 50px; } #integration .integration-tabs .slider-toggle a.btn-prev { left: 40px; } #integration .integration-tabs .slider-toggle a.btn-next { right: 40px; } #integration .integration-tabs ul { margin: 0 30px; } #integration #s1 { padding: 60px 50px 20px; } #integration #s1 .divicon { max-width: 160px; } #integration #s1 .title { font-size: 55px; } #integration #s1 .text { font-size: 18px; width: 85%; } #integration #s1 .download-wrapper { margin-top: 40px; } #integration #s2 { padding: 60px 50px 100px; } #integration #s2 .item { display: flex; } #integration #s2 .item:nth-child(2n) { flex-direction: row-reverse; justify-content: space-between; } #integration #s2 .item:nth-child(2n) .wrapper-left { margin-left: 30px; } #integration #s2 .item:nth-child(2n) .wrapper-right { margin-left: 0; } #integration #s2 .item .wrapper-left { width: calc((100% - 30px) / 2); min-height: 380px; border-radius: 10px; overflow: hidden; } #integration #s2 .item .wrapper-left .divimg { height: 100%; box-sizing: border-box; } #integration #s2 .item .wrapper-right { width: calc((100% - 30px) / 2); margin-left: 30px; display: flex; justify-content: center; flex-direction: column; border-radius: 10px; box-sizing: border-box; } } @media screen and (min-width: 1024px) { /* #integration .integration-tabs ul { overflow: hidden; } */ #integration #s1 { grid-template-columns: 1fr 1fr; align-items: center; } #integration #s1 .divimg { grid-row-end: 3; } #integration #s1 .content { grid-column-end: 2; } #integration #s2 .item h1 { font-size: 32px; } #integration #s2 .item .text { font-size: 18px; } #integration #s2 .item .wrapper-left { min-height: 450px; } #integration #s2 .item .wrapper-right { padding: 50px 70px; } } @media screen and (min-width: 1280px) { #integration { padding-top: 100px; } #integration .integration-lists { padding: 60px 0; margin: 0 auto; width: 1000px; } #integration .integration-lists ul li a .divimg { height: 260px; } #integration .integration-tabs { padding: 30px 10%; } #integration .integration-tabs .slider-toggle a.btn-prev { left: 10%; } #integration .integration-tabs .slider-toggle a.btn-next { right: 10%; } #integration #s1 { padding: 100px 10% 50px; } #integration #s1 .content { width: 650px; align-self: baseline;} #integration #s1 .divicon { align-self: end; } #integration #s2 { padding: 60px 10% 100px; } #integration #s2 .item .wrapper-left { min-height: 600px; } #integration #s2 .item .wrapper-right { padding: 50px 10%; } #integration.alexa #s2 .item:nth-child(3) .wrapper-right { padding: 50px 7%; } #integration.smart-things #s2 .item:nth-child(1) .wrapper-right { padding: 50px 7%; } #integration #s2 .item:nth-child(3) .wrapper-right p:nth-child(8) { font-size: 14px; font-weight: 500; width: 80%; margin: 0 auto; } } @media screen and (min-width: 1440px) { #integration #s2 .item .wrapper-right .btn-operate { max-width: 100%; } #integration #s2 .item .wrapper-right .btn-operate .btn { width: 160px; } #integration #s1 .divimg img { width: 75%; } } @media screen and (min-width: 1920px) { /* #integration .integration-lists { padding: 60px 15%; } */ #integration.ifttt #s1 .text { width: 95%; } #integration .integration-tabs { padding: 30px 15%; } #integration .integration-tabs ul { margin: 0; } #integration .integration-tabs .slider-toggle { display: none; } #integration #s1 .divimg picture { display: flex; justify-content: center; } #integration #s1 .text { width: 90%; } #integration #s1 { padding: 70px 15% 50px; } #integration #s1 .title { font-size: 80px; } #integration #s1 .text { font-size: 23px; } #integration #s2 { padding: 60px 15% 100px; } #integration #s2 .item .wrapper-left { min-height: 650px; } }