body{ background-color: #ededed; } .navbar{ padding: 0.3rem 0.7rem; @include mobile{ height: 8.5vh; padding: 0.1rem 0.1rem; } } .navbar-brand-block{ display: inline-block; width: 10%; @include xl-desktop{ display: none; } @include desktop{ display: none; } @include pad{ display: none; } @include mobile{ display: none; } } .navbar-brand-block-sm{ display: none; @include xl-desktop{ display: inline-block; margin-left: auto; margin-right: auto; padding: .4rem 0; } @include desktop{ display: inline-block; margin-left: auto; margin-right: auto; padding: .4rem 0; } @include pad{ display: inline-block; margin-left: auto; margin-right: auto; padding: .4rem 0; } @include mobile{ display: inline-block; margin-left: auto; margin-right: auto; } .navbar-brand{ padding: 0; } } .bg-navbar{ background-color: rgba(44,45,50,.1); @include xl-desktop{ background-color: rgba(44,45,50,.7); } @include desktop{ background-color: rgba(44,45,50,.7); } @include pad{ background-color: rgba(44,45,50,.7); } @include mobile{ background-color: rgba(44,45,50,.7); } } .top-btn { z-index: 9; position: fixed; right: 20px; bottom: 70px; line-height: 3; cursor: pointer; display: none; .top-btn-img{ opacity: 0.7; @include mobile{ width: 40px; } } } .scroll-downs-wrapper{ position: absolute; bottom: 2%; left: 48%; margin: auto; @include xl-desktop{ bottom: 8%; left: 50%; } @include desktop{ bottom: 8%; left: 50%; } @include pad{ bottom: 8%; left: 50%; } @include mobile{ bottom: 3%; left: 47%; } .scroll-downs-mix{ color: #9a9a9a; font-size: 12px; animation-name: move; -webkit-animation-name: move; animation-duration: 2.2s; -webkit-animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); -webkit-animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } img{ transform: translateX(8%); -webkit-transform: translateX(8%); -moz-transform: translateX(8%); -ms-transform: translateX(8%); margin-top: 0.5rem; } .scroll-downs{ width :25px; height: 45px; } .mousey { width: 3px; padding: 1px 10px; height: 28px; border: 2px solid #9a9a9a; border-radius: 25px; opacity: 0.75; -webkit-box-sizing: content-box; box-sizing: content-box; transform: translateX(35%); -webkit-transform: translateX(35%); -moz-transform: translateX(35%); -ms-transform: translateX(35%); } .scroller { width: 3px; height: 8px; border-radius: 25%; background-color: #9a9a9a; animation-name: scroll; -webkit-animation-name: scroll; animation-duration: 2.2s; -webkit-animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); -webkit-animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } } .section-wrapper{ position: relative; } .jumbotron{ width: 100%; min-width: 100%; height: 900px; min-height: 900px; padding: 0; margin-bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; @include xl-desktop{ width: 100%; height: 240vh; min-height:240vh; background-size: cover; } @include desktop{ width: 100%; height: 190vh; min-height:190vh; background-size: cover; } @include pad{ width: 100%; height: 140vh; min-height:140vh; background-size: cover; } @include mobile{ width: 100%; height: 80vh; min-height:80vh; background-size: cover; } } .jumbotron-m{ width: 100%; min-width: 100%; height: 620px; min-height: 620px; padding: 0; margin-bottom: 0; background-repeat: no-repeat; background-position: bottom 100% right 100%; background-size: 100% 100%; @include xl-desktop{ width: 100%; height: 250vh; min-height:250vh; background-size: 100% 100%; } @include desktop{ width: 100%; height: 230vh; min-height:230vh; background-size: 100% 100%; } @include pad{ width: 100%; height: 200vh; min-height:200vh; background-size: 100% 100%; } @include mobile{ width: 100%; height: 80vh; min-height:auto; background-size: 100% 100%; } } .jumbotron-s{ width: 100%; min-width: 100%; height: 85px; min-height: 85px; padding: 0; margin-bottom: 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; @include xl-desktop{ width: 100%; height: 9vh; min-height:9vh; background-size: 100% 100%; } @include desktop{ width: 100%; height: 8vh; min-height:8vh; background-size: 100% 100%; } @include pad{ width: 100%; height: 7vh; min-height:7vh; background-size: 100% 100%; } @include mobile{ width: 100%; height: 100%; min-height: 100%; background-size: 100% 100%; } } .jumbotron-long{ @include xl-desktop{ height: 300vh; min-height: 300vh; } @include desktop{ height: 260vh; min-height: 260vh; } @include pad{ height: 230vh; min-height: 230vh; } @include mobile{ height: 180vh; min-height: 180vh; } } .jumbotron-medium{ @include xl-desktop{ height: 150vh; min-height: 150vh; } @include desktop{ height: 135vh; min-height: 135vh; } @include pad{ height: 103vh; min-height: 103vh; } @include mobile{ height: 65vh; min-height: 65vh; } } .jumbotron-short{ @include xl-desktop{ height: 130vh; min-height: 130vh; } @include desktop{ height: 110vh; min-height: 110vh; } @include pad{ height: 80vh; min-height: 80vh; } @include mobile{ height: 50vh; min-height: 50vh; } } .jumbotron-bg01{ background-image:url(../../images/ps_lists/section_bg_1.png); @include xl-desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_1.png); } @include desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_1.png); } @include pad{ background-image:url(../../images/ps_lists/mb/section_mbg_1.png); } @include mobile{ background-image:url(../../images/ps_lists/mb/section_mbg_1.png); } } .jumbotron-bg02{ background-image:url(../../images/ps_lists/section_bg_2.png); } .jumbotron-bg03{ background-image:url(../../images/ps_lists/section_bg_3.png); @include xl-desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_3.png); } @include desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_3.png); } @include pad{ background-image:url(../../images/ps_lists/mb/section_mbg_3.png); } @include mobile{ background-image:url(../../images/ps_lists/mb/section_mbg_3.png); } } .jumbotron-bg04{ background-image:url(../../images/ps_lists/section_bg_4.png); @include xl-desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_4.png); } @include desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_4.png); } @include pad{ background-image:url(../../images/ps_lists/mb/section_mbg_4.png); } @include mobile{ background-image:url(../../images/ps_lists/mb/section_mbg_4.png); } } .jumbotron-bg05{ background-image:url(../../images/ps_lists/section_bg_5.png); @include mobile{ background-image:url(../../images/ps_lists/mb/section_mbg_5.png); } } .jumbotron-bg06{ background-image:url(../../images/ps_lists/section_bg_6.png); } .jumbotron-bg07{ background-image:url(../../images/ps_lists/section_bg_7.png); @include xl-desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_7.png); } @include desktop{ background-image:url(../../images/ps_lists/mb/section_mbg_7.png); } @include pad{ background-image:url(../../images/ps_lists/mb/section_mbg_7.png); } @include mobile{ background-image:url(../../images/ps_lists/mb/section_mbg_7.png); } } .jumbotron-bg08{ background-image:url(../../images/ps_lists/section_bg_8.png); } .section{ width: 1140px; max-width: 1140px; height: 100%; margin: auto auto; position: relative; @include xl-desktop{ width: 100%; height: 100%; max-width: 100%; } @include desktop{ width: 100%; height: 100%; max-width: 100%; } @include pad{ width: 100%; height: 100%; max-width: 100%; } @include mobile{ width: 100%; height: 100%; max-width: 100%; } &.section1-pd{ padding: 16rem 0; @include xl-desktop{ padding: 0; } @include desktop{ padding: 0; } @include pad{ padding: 0; } @include mobile{ padding: 0; } } &.section2-pd{ padding: 0; @include xl-desktop{ padding: 0; } @include desktop{ padding: 0; } @include pad{ padding: 0; } @include mobile{ padding: 0; } } &.section3-pd{ padding: 0; @include xl-desktop{ padding: 0; } @include desktop{ padding: 0; } @include pad{ padding: 0; } @include mobile{ padding: 0; } } &.section4-pd{ padding: 0; @include xl-desktop{ padding: 0; } @include desktop{ padding: 0; } @include pad{ padding: 0; } @include mobile{ padding: 0; } } &.section5-pd, &.section6-pd{ padding: 5em 0; @include xl-desktop{ padding: 5rem 3rem; } @include desktop{ padding: 3rem 3rem; } @include pad{ padding: 2rem 3rem; } @include mobile{ // padding: 1rem 0rem; padding: 0; } } &.section7-pd{ padding: 6rem 0; @include xl-desktop{ padding: 5rem 3rem; } @include desktop{ padding: 7rem 3rem; } @include pad{ padding: 6rem 3rem; } @include mobile{ padding: 2rem 1rem; } } &.section8-pd{ padding: 1rem 0; @include xl-desktop{ padding: 0; } @include desktop{ padding: 0; } @include pad{ padding: 0; } @include mobile{ padding: 0; } } &.section-bg-w{ width: 1340px; max-width: 1340px; @include xl-desktop{ width: 100%; max-width: 100%; } @include desktop{ width: 100%; max-width: 100%; } @include pad{ width: 100%; max-width: 100%; } @include mobile{ width: 100%; max-width: 100%; } } } .section1-wrapper{ position: absolute; text-align: center; width: 100%; height: auto; top: 30%; } .section2-wrapper{ text-align: center; height: 33vh; @include xl-desktop{ text-align: center; width: 100%; height: 23vh; } @include desktop{ text-align: center; width: 100%; height: 23vh; } @include pad{ text-align: center; width: 100%; height: 23vh; } @include mobile{ text-align: center; width: 100%; height: 23vh; } } .section3-wrapper, .section4-wrapper{ position: absolute; text-align: left; width: 100%; height: auto; top: 12%; @include xl-desktop{ position: absolute; text-align: center; width: 100%; height: auto; top: 10%; } @include desktop{ position: absolute; text-align: center; width: 100%; height: auto; top: 10%; } @include pad{ position: absolute; text-align: center; width: 100%; height: auto; top: 10%; } @include mobile{ position: absolute; text-align: center; width: 100%; height: auto; top: 5%; } } .section5-wrapper, .section6-wrapper{ text-align: center; height: 15vh; @include xl-desktop{ text-align: center; height: 15vh; } @include desktop{ text-align: center; height: 15vh; } @include pad{ text-align: center; height: 12vh; } @include mobile{ text-align: center; width: 100%; height: 8vh; padding: .5rem 0; } } // ###### title ##### .section1-title, .section2-title{ width: 680px; @include xl-desktop{ width: auto; height: 50vh; } @include desktop{ width: auto; height: 40vh; } @include pad{ width: auto; height: 35vh; } @include mobile{ width: auto; height: 20vh; } } .section3-title{ width: 590px; @include xl-desktop{ height: 65vh; width: auto; } @include desktop{ height: 60vh; width: auto; } @include pad{ height: 48vh; width: auto; } @include mobile{ height: 30vh; width: auto; } } .section4-title{ width: 590px; @include xl-desktop{ height: 65vh; width: auto; } @include desktop{ height: 60vh; width: auto; } @include pad{ height: 48vh; width: auto; } @include mobile{ height: 28vh; width: auto; } } .section5-title, .section6-title{ width: 680px; @include xl-desktop{ width: auto; height:11vh; } @include desktop{ width: auto; height:10vh; } @include pad{ width: auto; height:9vh; } @include mobile{ width: auto; height:6vh; } } // ###### content ##### .section2-content, .section5-content, .section6-content{ @include xl-desktop{ display: none; } @include desktop{ display: none; } @include pad{ display: none; } @include mobile{ display: none; } } .section2-content{ position: absolute; top: 35%; width: 1140px; @include xl-desktop{ width: 100%; } @include desktop{ width: 100%; } @include pad{ width: 100%; } @include mobile{ width: 100%; } } .section2-mb-content-wrapper{ display: none; @include xl-desktop{ display: block; width: 100%; text-align: center; height: 100%; margin-top:15rem; } @include desktop{ display: block; width: 100%; text-align: center; height: 100%; margin-top:10rem; } @include pad{ display: block; width: 100%; text-align: center; height: 100%; margin: 0; margin-top:10rem; } @include mobile{ display: block; width: 100%; text-align: center; height: 100%; margin: 0; } } .section2-mb-content{ display: none; @include xl-desktop{ display: block; background-image: url(../../images/ps_lists/section2_content_mb.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 100%; } @include desktop{ display: block; background-image: url(../../images/ps_lists/section2_content_mb.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 100%; } @include pad{ display: block; background-image: url(../../images/ps_lists/section2_content_mb.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 100%; } @include mobile{ display: block; background-image: url(../../images/ps_lists/section2_content_mb.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 100%; } } .section2-mb-content-all{ @include xl-desktop{ width: auto; height: 240vh; } @include desktop{ width: auto; height: 210vh; } @include pad{ width: auto; height: 180vh; } @include mobile{ width: auto; height: 150vh; } } .section5-mb-content-all{ @include xl-desktop{ width: auto; height: 220vh; } @include desktop{ width: auto; height: 170vh; } @include pad{ width: auto; height: 120vh; } @include mobile{ width: auto; height: 70vh; } } .section6-mb-content-all{ @include xl-desktop{ width: auto; height: 95vh; } @include desktop{ width: auto; height: 80vh; } @include pad{ width: auto; height: 60vh; } @include mobile{ width: auto; height: 33vh; } } .section5-content{ background-image: url(../../images/ps_lists/section5_content.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 600px; min-height: 600px; position: relative; .arrow-wrapper{ width: 100%; height: 20%; display: flex; position: absolute; top: 42%; } .arrow-icon{ width: 10%; max-width: 10%; flex: 0 0 50%; height: 100%; position: absolute; &.arrow-icon-r{ left: 75%; } &.arrow-icon-l{ left: 15%; } } } .section5-mb-content-wrapper{ display: none; @include xl-desktop{ display: block; width: 100%; height: 80%; margin: 1rem auto; margin: 0; text-align: center; } @include desktop{ display: block; width: 100%; height: 80%; margin: 1rem auto; margin: 0; text-align: center; } @include pad{ display: block; width: 100%; height: 80%; margin: 1rem auto; margin: 0; text-align: center; } @include mobile{ display: block; width: 100%; height: 80%; margin: 0; text-align: center; } } .section6-content-wrapper{ position: relative; } .section6-content{ background-image: url(../../images/ps_lists/section6_chart.png); background-repeat: no-repeat; background-position: left center; background-size: contain; width: 60%; height: 600px; min-height: 600px; } .section6-context-wrapper{ height: 100%; min-height: 100%; position: absolute; top: 0; left: 25%; @include xl-desktop{ display: none; } @include desktop{ display: none; } @include pad{ display: none; } @include mobile{ display: none; } } .section6-context{ padding-top: 2rem; padding-bottom: 2rem; } .section6-context-focus{ margin: 0 -3rem; } .section6-mb-content-wrapper{ display: none; @include xl-desktop{ display: block; width: 100%; height: 90%; margin: 0; text-align: center; } @include desktop{ display: block; width: 100%; height: 90%; margin: 0; text-align: center; } @include pad{ display: block; width: 100%; height: 90%; margin: 0; text-align: center; } @include mobile{ display: block; width: 100%; height: 90%; margin: 0; text-align: center; } } .section7-content{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255, 0.5); position: relative; @include xl-desktop{ display: block; } @include desktop{ display: block; } @include pad{ display: block; } @include mobile{ display: block; } .section7-content-btn1{ position: absolute; display: block; width: 40%; bottom: 5%; left: 30%; padding: 3rem 0; opacity: 0; transform: translate3d(10px, 3px, 0px); -webkit-transform: translate3d(10px, 3px, 0px); -moz-transform: translate3d(10px, 3px, 0px); -ms-transform: translate3d(10px, 3px, 0px); @include xl-desktop{ display: block; width: 50%; bottom: 5%; left: 25%; padding: 3rem 0; } @include desktop{ display: block; width: 50%; bottom: 2%; left: 25%; padding: 2.8rem 0; } @include pad{ display: block; width: 50%; bottom: 2%; left: 25%; padding: 1.8rem 0; } @include mobile{ display: block; width: 50%; bottom: 3%; left: 25%; padding: .8rem 0rem; } } .section7-content-btn-wrapper{ font-family: 'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; position: absolute; bottom: 5%; left: 40%; text-shadow: 2px 2px #cdcdcd; @include xl-desktop{ bottom: 6%; left: 33%; } @include desktop{ bottom: 6%; left: 33%; } @include pad{ bottom: 4%; left: 33%; } @include mobile{ bottom: 4%; left: 33%; } } .section7-content-btn{ border: 3px solid #fc5c3f; color: #fc5c3f; padding: 1rem 5rem; background-color: #FFF; width: 280px; text-align: center; font-size: 18px; font-weight: bold; letter-spacing: 1px; @include xl-desktop{ border: 3px solid #fc5c3f; padding: 1rem 1rem; width: 340px; font-size: 16px; } @include desktop{ border: 2px solid #fc5c3f; padding: 1rem 1rem; width: 280px; font-size: 16px; } @include pad{ border: 1px solid #fc5c3f; padding: 1rem 1rem; width: 210px; font-size: 16px; } @include mobile{ border: 1.5px solid #fc5c3f; padding: .3rem 0; width: 33vw; font-size: 14px; } &:hover, &:active, &:focus{ color: #FFF; background-color: #fc5c3f; border-color: #fc5c3f; outline: none; } } } .section8-content{ font-family: 'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 12rem; color: #212529; @include desktop{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 1rem; } @include pad{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 1rem; } @include mobile{ display: none; } span{ font-size: 14px; font-weight: bold; @include desktop{ font-size: 14px; } @include pad{ font-size: 14px; } @include mobile{ display: none; } } a{ color: inherit; &:hover{ color: inherit; text-decoration: none; } } } .section8-mb-content{ display: none; @include mobile{ font-family: 'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: bold; display: block; text-align: center; font-size: 12px; padding: .5rem 0; color: #212529; } a{ color: inherit; &:hover{ color: inherit; text-decoration: none; } } }