/* Main Stylesheet Created By: Andamant Works Main Color Used: 1. General: #333333 2. Blue (secondary): #005bac 4. Bright Blue (secondary): #13c3f5 3. Green (ternary): #36b063 */ /* INITIAL CSS */ @media only screen and (min-width: 1600px) { html {font-size: 40px;} } @media only screen and (max-width: 1400px) { html {font-size: 30px;} } @media only screen and (max-width: 768px) { html {font-size: 28px;} } @media only screen and (max-width: 500px) { html {font-size: 27px;} } body {color: #333333; font-family: 'GeneralFont', Arial, Verdana; font-size: 0.5rem; line-height: 0.8rem; position: relative;} b, strong {font-family: 'BoldFont', Arial, Verdana; font-weight: normal;} i, em {font-family: 'ItalicFont', Arial, Verdana; font-weight: normal;} b i, i b, b em, em b, strong i, i strong, strong em, em strong {font-family: 'BoldItalicFont', Arial, Verdana;} h1, h2, h3, h4, h5 {font-family: 'TitleFont', Arial, Verdana; color: #333333; font-weight: normal;} h1 b, h2 b, h3 b, h4 b, h5 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {font-family: 'TitleBoldFont', Arial, Verdana; font-weight: normal;} h1 i, h2 i, h3 i, h4 i, h5 i, h1 em, h2 em, h3 em, h4 em, h5 em{font-family: 'TitleItalicFont', Arial, Verdana; font-weight: normal;} h1 b i, h2 b i, h3 b i, h4 b i, h5 b i, h1 i b, h2 i b, h3 i b, h4 i b, h5 i b, h1 b em, h2 b em, h3 b em, h4 b em, h5 b em, h1 em b, h2 em b, h3 em b, h4 em b, h5 em b, h1 strong i, h2 strong i, h3 strong i, h4 strong i, h5 strong i, h1 i strong, h2 i strong, h3 i strong, h4 i strong, h5 i strong, h1 strong em, h2 strong em, h3 strong em, h4 strong em, h5 strong em, h1 em strong, h2 em strong, h3 em strong, h4 em strong, h5 em strong {font-family: 'TitleBoldItalicFont', Arial, Verdana; font-weight: normal;} h1 {font-size: 1.45rem; line-height: 1.75rem; margin-bottom: 0.5rem;} h2 {font-size: 1.3rem; line-height: 1.6rem; margin-bottom: 0.5rem;} h3 {font-size: 1.15rem; line-height: 1.45rem; margin-bottom: 0.5rem;} h4 {font-size: 1.0rem; line-height: 1.3rem; margin-bottom: 0.5rem;} h5 {font-size: 0.85rem; line-height: 1.15rem; margin-bottom: 0.5rem;} h1.no-mb, h2.no-mb, h3.no-mb, h4.no-mb, h5.no-mb {margin-bottom: 0;} p, p a {font-size: 0.6rem; color: #333333; line-height: 0.9rem;} p.big, .big {font-size: 0.8rem; line-height: 1.1rem;} p.med, .med {font-size: 0.7rem; line-height: 1.0rem;} p a:hover {text-decoration: underline; color: #333333;} a {color: #005bac; font-size: 0.6rem; line-height: 0.9rem; text-decoration: none; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} a:hover {color: #36b063; text-decoration: underline;} .cl-secondary {color: #005bac;} .cl-secondary-2 {color: #13c3f5;} .cl-ternary {color: #36b063;} .cl-white {color: #fff;} .cl-gray {color: #999999;} .cl-dark-gray {color: #696969;} img { backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden;} img.full-width {width: 100%; display: block;} img.centered {margin: 0 auto; display: block; max-width: 100%; height: auto;} img.round-border {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;} .gen-img-wrap {margin-bottom: 30px; position: relative;} .gen-img-wrap.no-mb {margin-bottom: 0;} .gen-img-wrap img {max-width: 100%; display: block;} .gen-img-wrap img.centered {margin-left: auto; margin-right: auto;} .full-img-wrap {position: relative;} .full-img-wrap img {width: 100%; display: block;} .dmb-img-wrap {position: relative; width: 100%; height: 100%; background: transparent;} .dmb-img-wrap img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;} .ta-center {text-align: center;} .ta-left {text-align: left;} .ta-right {text-align: right;} .ta-justify {text-align: justify;} .fl-left {float: left;} .fl-right {float: right;} .fl-clear {clear: both;} .sfw {float: left; width: 100%; position: relative;} .mt-10 {margin-top: 10px;} .mt-20 {margin-top: 20px;} .mt-80 {margin-top: 80px;} .mb-20 {margin-bottom: 20px;} .mb-30 {margin-bottom: 30px;} /* /INITIAL CSS */ /* GENERAL LAYOUT CSS */ .sfw {float: left; width: 100%; position: relative;} .wrap {width: 80%; margin: 0 auto; position: relative;} @media only screen and (min-width: 1600px) { .wrap {width: 75%;} } @media only screen and (max-width: 768px) { .wrap {width: 80%;} } @media only screen and (max-width: 500px) { .wrap {width: 90%;} } /* /GENERAL LAYOUT CSS */ /* WYSIWYG CONTENT */ .wysiwyg-content, .wysiwyg-content p, .wysiwyg-content a, .wysiwyg-content ul li, .wysiwyg-content ol li {font-size: 0.6rem; color: #333333; line-height: 0.9rem; font-family: 'GeneralFont', Arial, Verdana;} .wysiwyg-content.big, .wysiwyg-content.big p, .wysiwyg-content.big a, .wysiwyg-content.big ul li, .wysiwyg-content.big ol li {font-size: 0.7rem; line-height: 1.0rem; font-family: 'GeneralFont', Arial, Verdana;} .wysiwyg-content.small, .wysiwyg-content.small p, .wysiwyg-content.small a, .wysiwyg-content.small ul li, .wysiwyg-content.small ol li {font-size: 0.55rem; line-height: 0.75rem; font-family: 'GeneralFont', Arial, Verdana;} .wysiwyg-content.white, .wysiwyg-content.white p, .wysiwyg-content.white a, .wysiwyg-content.white ul li, .wysiwyg-content.white ol li {color: #fff;} .wysiwyg-content img {} .wysiwyg-content img.fr-dib {display: block; margin: 0 auto;} .wysiwyg-content img.fr-dib.fr-fil {text-align: left;} .wysiwyg-content img.fr-dib.fr-fir {text-align: right;} .wysiwyg-content img.fr-dii {} .wysiwyg-content img.fr-dii.fr-fil {float: left; margin-right: 30px;} .wysiwyg-content img.fr-dii.fr-fir {float: right; margin-left: 30px;} .wysiwyg-content a {color: #282e68;} .wysiwyg-content a:hover {color: #282e68; text-decoration: underline;} .wysiwyg-content p a {color: #333333;} .wysiwyg-content p a:hover {color: #282e68;} .wysiwyg-content.white a {color: #fff;} .wysiwyg-content.white a:hover {color: #fff; text-decoration: underline} .wysiwyg-content.white h1, .wysiwyg-content.white h2, .wysiwyg-content.white h3, .wysiwyg-content.white h4, .wysiwyg-content.white h5 {color: #fff;} .wysiwyg-content ul li {padding-left: 0px; list-style-type: disc; padding-bottom: 3px; margin-left: 55px;} .wysiwyg-content ol li {list-style-type: decimal; margin-left: 55px;} .wysiwyg-content.list-flat ol li {margin-left: 15px;} .wysiwyg-content img.feat-img {float: left; max-width: 50%; margin-right: 20px; margin-bottom: 20px;} .wysiwyg-content img {max-width: 100% !important;} .wysiwyg-content table {width: 100%;} .wysiwyg-content table tbody tr {border-top: 1px solid #eaeaea;} .wysiwyg-content table tbody tr:last-child {border-bottom: 1px solid #eaeaea;} .wysiwyg-content table tbody tr td {padding: 15px 20px; font-size: 15px; line-height: 23px; border-left: 1px solid #eaeaea; vertical-align: middle;} .wysiwyg-content table tbody tr td:last-child {border-right: 1px solid #eaeaea;} .wysiwyg-content table.fr-alternate-rows tr:nth-child(odd) td {background: #fff;} .wysiwyg-content table.fr-alternate-rows tr:nth-child(even) td {background: #f5f5f5;} /* /WYSIWYG CONTENT */ /* FORM */ input[type=text], input[type=email], input[type=password], textarea {font-family: 'GeneralFont', Arial, Verdana; border: 1px solid #9f9f9f; box-sizing: border-box; height: 1.7rem; padding: 0 0.6rem; font-size: 0.6rem; line-height: 0.8rem; color: #333333; width: 100%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;} input[type=text]:hover, input[type=text]:focus, input[type=email]:hover, input[type=email]:focus, input[type=password]:hover, input[type=password]:focus, textarea:hover, textarea:focus {outline: 0; box-shadow: 0px 0px 5px #005bac; -webkit-box-shadow: 0px 0px 5px #005bac; -moz-box-shadow: 0px 0px 5px #005bac; -o-box-shadow: 0px 0px 5px #005bac;} textarea {padding: 0.6rem; min-height: 6.4rem;} textarea.no-resize {resize: none;} input[type=text].datepicker {padding-right: 1.7rem; background: url(../images/icon/calendar.svg) no-repeat right 15px center; background-size: auto 20px;} select {font-family: 'GeneralFont', Arial, Verdana; font-size: 0.6rem; line-height: 0.8rem; padding: 0 0.6rem; color: #333333; box-sizing: border-box;} select:hover, select:focus {outline: 0;} .styled-select-wrapper {width: 100%; box-sizing: border-box; overflow: hidden; border: 1px solid #9f9f9f; height: 1.7rem; background: url(../images/icon/arrow-down.png) no-repeat right 0.6rem center #fff; background-size: 0.3rem auto; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;} .styled-select-wrapper select {display: block; width: 120%; border: none; background: transparent; height: 1.7rem; padding: 0 1.2rem 0 0.4rem;} .styled-select-wrapper select option {background: none;} input[type="checkbox"] {font-family: 'GeneralFont', Arial, Verdana; font-size: 0.6rem; line-height: 0.9rem;} .styled-checkbox-wrapper {margin-bottom: 10px;} .styled-checkbox-wrapper input[type="checkbox"] {display: none;} .styled-checkbox-wrapper label {font-family: 'GeneralFont'; font-size: 0.6rem; line-height: 0.9rem; color: #333333; display: inline-block; padding-left: 1.3rem; background: url(../images/icon/checkbox.png) no-repeat left top 0.1rem; background-size: 0.8rem auto;} .styled-checkbox-wrapper label:hover {cursor: pointer;} .styled-checkbox-wrapper label a {color: #005bac;} .styled-checkbox-wrapper input[type="checkbox"]:checked + label {background: url(../images/icon/checkbox-checked.png) no-repeat left top; background-size: 0.8rem auto;} input[type="radio"] {font-family: 'GeneralFont', Arial, Verdana;font-size: 0.6rem; line-height: 0.9rem;} .styled-radio-wrapper{position: relative;} .styled-radio-wrapper input[type="radio"] {display:none;} .styled-radio-wrapper label {display:inline-block; padding: 1px 0px 0px 1.1rem; font-size: 0.6rem; line-height: 0.9rem; font-family: 'GeneralFont', Arial, Verdana; background: url(../images/icon/radio-off.png) no-repeat left top 0.17rem; cursor: pointer; background-size: 0.7rem auto;} .styled-radio-wrapper input[type="radio"]:checked + label {background: url(../images/icon/radio-on.png) no-repeat left top 0.17rem; background-size: 0.7rem auto;} .gen-form .styled-radio-wrapper {margin-bottom: 0.5rem;} .gen-form .styled-radio-wrapper:last-child {margin-bottom: 0;} input[type="file"] {font-family: 'GeneralFont', Arial, Verdana;} .styled-input-file-wrapper {cursor: pointer; font-size: 0.5rem; line-height: 0.7rem; color: #333333; background: #dbdbdb; border: 1px solid #dbdbdb; font-family: 'GeneralFont', Arial, Verdana; box-sizing: border-box; padding: 0.5rem; height: 50px; text-align: center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;} .styled-input-file-wrapper:hover {background: #282e68; color: #fff;} .styled-input-file-wrapper input[type="file"] {display: none;} .styled-input-file-wrapper label {} label.upload-file-info {} label.upload-file-info.warning {display: block; margin-top: 0.5rem; font-size: 0.4rem; line-height: 0.6rem;} input[type="submit"], a.gen-btn {border: none; background: none; display: inline-block; color: #fff; font-size: 0.6rem; font-family: 'BoldFont', Arial, Verdana; background: #40caf1; border: 1px solid #40caf1; padding: 0.5rem 0.8em; min-width: 4.5rem; text-align: center; cursor: pointer; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;} input[type="submit"]:hover, input[type="submit"]:focus, a.gen-btn:hover, a.gen-btn:focus {background: #005bac; border: 1px solid #005bac; text-decoration: none;} input[type="submit"].inverse, a.gen-btn.inverse {color: #005bac; border: 1px solid #005bac; background: none;} input[type="submit"].inverse:hover, input[type="submit"].inverse:focus, a.gen-btn:hover, a.gen-btn:focus {background: #005bac; color: #fff;} a.gen-btn.full-width {display: block;} .gen-form-wrapper {margin-bottom: 20px;} .gen-form-wrapper.no-mb {margin-bottom: 0;} .gen-form-wrapper.inline {} .gen-form-wrapper.inline .gfw-title {float: left; width: 22%; margin-right: 3%; box-sizing: border-box;} .gen-form-wrapper.inline .gfw-sep {float: left; width: 3%; margin-right: 3%; box-sizing: border-box;} .gen-form-wrapper.inline .gfw-input {float: left; width: 69%; box-sizing: border-box;} .gen-form-wrapper.inline label {font-size: 15px; line-height: 45px;} ::placeholder {color: #bfbfbf;} .amt-form-notification {display: block; position: relative; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; border: 1px solid transparent; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;} .amt-form-notification p {font-size: 0.5rem; line-height: 0.7rem; padding-right: 1rem; font-family: 'BoldFont', Arial, Verdana;} .amt-form-notification .close-btn {position: absolute; top: 50%; transform: translateY(-50%); right: 0.6rem; width: 0.4rem; height: 0.4rem; cursor: pointer;} .amt-form-notification.success {background: #d9ffd8; border: 1px solid #00b400;} .amt-form-notification.success p {color: #00b400;} .amt-form-notification.success .close-btn {background: url(../images/icon/amt-form-close-success.png) no-repeat center; background-size: 0.4rem 0.4rem;} .amt-form-notification.failed {background: #ffdddf; border: 1px solid #f03a17;} .amt-form-notification.failed p {color: #f03a17;} .amt-form-notification.failed .close-btn {background: url(../images/icon/amt-form-close-failed.png) no-repeat center; background-size: 0.4rem 0.4rem;} /* /FORM */ /* HEADER */ #main-bg {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: url(../images/bg/main-bg.jpg) no-repeat center; background-size: cover !important; z-index: 0;} #main-bg.type-2 {background: url(../images/bg/main-bg-2.jpg) no-repeat center;} #header {margin-top: 1rem;} #logo-ct {margin: 0 auto; width: 310px; background: #fff; padding: 0.7rem 1.2rem; box-sizing: border-box; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; box-shadow: 0px 5px 10px #8f8f8f; -webkit-box-shadow: 0px 5px 10px #8f8f8f; -moz-box-shadow: 0px 5px 10px #8f8f8f; -o-box-shadow: 0px 5px 10px #8f8f8f;} img#logo {width: 100%; display: block;} #logo-anim-ct {position: absolute; top: -40px; right: 0;} img#logo-anim {height: 210px;} #main-nav-ct {position: fixed; left: 30px; bottom: 5rem; z-index: 800; width: 3.75rem; height: 3.75rem;} #main-nav-ct .inner {position: relative;} #event-vote-nav-ct {position: fixed; left: 30px; bottom: 9.25rem; z-index: 700; width: 3.75rem; height: 3.75rem; display: none;} #event-vote-nav-ct .inner {position: relative;} .mnav-btn {width: 2.5rem; height: 2.5rem; display: inline-block; cursor: pointer; position: relative; z-index: 700; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; transition: all 0.15s linear; webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #mnav-pointer {position: relative; width: 3.75rem; height: 3.75rem; background: url(../images/icon/nav-pointer.png) no-repeat center #fff; background-size: 2.75rem auto; z-index: 800;} #mnav-vote {position: relative; width: 3.75rem; height: 3.75rem; background: url(../images/icon/nav-vote.png) no-repeat center #fff; background-size: 2.75rem auto; z-index: 800;} #mnav-home {position: absolute; top: 0.63rem; left: 0.63rem; background: url(../images/icon/nav-home.png) no-repeat center #fff; background-size: 1.25rem auto; z-index: 700;} #mnav-home.displayed {top: -2.75rem; left: 2.3rem; z-index: 900;} #mnav-profile {position: absolute; top: 0.63rem; left: 0.63rem; background: url(../images/icon/nav-profile.png) no-repeat center #fff; background-size: 1.25rem auto; z-index: 700;} #mnav-profile.displayed {top: -0.75rem; left: 4.5rem; z-index: 900;} #mnav-back {position: absolute; top: 0.63rem; left: 0.63rem; background: url(../images/icon/nav-back-2.png) no-repeat center #fff; background-size: 1.25rem auto; z-index: 700;} #mnav-back.displayed {top: 2.25rem; left: 4.5rem; z-index: 900;} #mnav-livenow {position: absolute; top: 0.63rem; left: 0.63rem; background: url(../images/icon/nav-livenow.png) no-repeat center #fff; background-size: 1.25rem auto; z-index: 700;} #mnav-livenow.displayed {top: 4.25rem; left: 2.25rem; z-index: 900;} #mnav-additional {position: absolute; top: 0.63rem; left: 0.63rem; background: url(../images/icon/nav-additional-2.png) no-repeat center #fff; background-size: 1.25rem auto; z-index: 700;} #mnav-additional.displayed {top: 4.25rem; left: 2.25rem; z-index: 900;} .cust-tooltip {display: inline-block; padding-bottom: 0.5rem; position: absolute; display: none;} .cust-tooltip.reverse {padding-bottom: 0; padding-top: 0.5rem;} .cust-tooltip div {position: absolute; bottom: 0.1rem; left: 1rem; width: 1rem; height: 0.5rem; background: url(../images/icon/tri-down.png) no-repeat center; background-size: auto 0.5rem;} .cust-tooltip.reverse div {background: url(../images/icon/tri-up.png) no-repeat center; background-size: auto 0.5rem; bottom: auto; top: 0; left: 1rem;} .cust-tooltip p {min-width: 5.5rem; background: #fff; box-sizing: border-box; padding: 0.3rem; text-align: center; color: #6ec573; font-size: 0.5rem; line-height: 0.7rem; box-shadow: 0px 0px 10px #bfbfbf; -webkit-box-shadow: 0px 0px 10px #bfbfbf; -moz-box-shadow: 0px 0px 10px #bfbfbf; -o-box-shadow: 0px 0px 10px #bfbfbf;} .mnav-btn .cust-tooltip {top: -1.8rem; left: -0.1rem;} #header-2 {margin-top: 1rem;} #header-2 .wrap {width: 90%;} #header-2 .inner {padding: 0.7rem; background: #fff; position: relative; z-index: 500;} #header-2 .inner p {font-size: 0.5rem; line-height: 0.7rem; margin-bottom: 0.5rem; font-family: 'BoldFont', Arial, Verdana;} #header-2-left-ct {float: left; width: 32%; box-sizing: border-box;} #header-2-middle-ct {float: left; width: 36%; box-sizing: border-box; padding-left: 1.5rem; padding-right: 1.5rem; text-align: center;} #header-2-middle-ct img {max-height: 3.5rem; display: block; margin-left: auto; margin-right: auto; margin-top: 0.1rem;} #header-2-right-ct {float: right; width: 32%; box-sizing: border-box;} #header-2-right-ct p {text-align: right;} ul.header-2-img-list {} #header-2-right-ct ul.header-2-img-list {float: right;} ul.header-2-img-list > li {float: left; margin-right: 0.35rem;} ul.header-2-img-list > li:last-child {margin-right: 0;} ul.header-2-img-list > li img {max-height: 2.4rem; display: block;} #spotlight-bg {} #spotlight-bg img.featured {width: 100%; position: relative; z-index: 400; margin-bottom: -8rem; display: block;} #spotlight-bg img.mobile {display: none;} @media only screen and (min-width: 1600px) { #logo-ct {width: 450px;} #main-nav-ct {bottom: 4rem; width: 3.25rem; height: 3.25rem;} #event-vote-nav-ct {bottom: 7.75rem; width: 3.25rem; height: 3.25rem;} .mnav-btn {width: 2.25rem; height: 2.25rem;} #mnav-pointer, #mnav-vote {width: 3.25rem; height: 3.25rem; background-size: 2.25rem auto;} #mnav-home {background-size: 1rem auto;} #mnav-home.displayed {top: -2.5rem; left: 2.25rem;} #mnav-profile {background-size: 1rem auto;} #mnav-profile.displayed {top: -0.5rem; left: 3.75rem;} #mnav-back {background-size: 1rem auto;} #mnav-back.displayed {top: 2rem; left: 3.75rem;} #mnav-livenow {background-size: 1rem auto;} #mnav-livenow.displayed {top: 4rem; left: 1.75rem;} #mnav-additional {background-size: 1rem auto;} #mnav-additional.displayed {top: 4rem; left: 1.75rem;} #logo-anim-ct {top: -55px; right: 5%;} img#logo-anim {height: 300px;} #header-2 .wrap {width: 80%;} #header-2-middle-ct img {max-height: 2.75rem; margin-top: 0.5rem;} ul.header-2-img-list > li img {max-height: 2rem;} } @media only screen and (max-width: 1200px) { #header-2-middle-ct img {max-height: 2.75rem;} ul.header-2-img-list > li img {max-height: 2rem;} #spotlight-bg {margin-bottom: 1rem;} } @media only screen and (max-width: 1024px) { #main-nav-ct {bottom: 2.75rem; left: 20px; width: 3.5rem; height: 3.5rem;} #event-vote-nav-ct {bottom: 6.5rem; left: 20px; width: 3.5rem; height: 3.5rem;} #mnav-pointer, #mnav-vote {width: 3.5rem; height: 3.5rem; background-size: 2.5rem auto;} .mnav-btn {width: 2.25rem; height: 2.25rem;} #mnav-home {background-size: 1rem auto;} #mnav-home.displayed {top: -2.5rem; left: 2.25rem;} #mnav-profile {background-size: 1rem auto;} #mnav-profile.displayed {top: -0.5rem; left: 3.75rem;} #mnav-back {background-size: 1rem auto;} #mnav-back.displayed {top: 2rem; left: 3.75rem;} #mnav-livenow {background-size: 1rem auto;} #mnav-livenow.displayed {top: 4rem; left: 1.75rem;} #mnav-additional {background-size: 1rem auto;} #mnav-additional.displayed {top: 4rem; left: 1.75rem;} #header-2-left-ct {width: 37%;} #header-2-middle-ct {width: 30%;} #header-2-middle-ct img {max-height: 2.0rem; margin-top: 0.7rem;} #header-2-right-ct {width: 33%;} ul.header-2-img-list > li img {max-height: 1.7rem;} #spotlight-bg {margin-bottom: 2rem;} } @media only screen and (max-width: 900px) { #logo-anim-ct {display: none;} } @media only screen and (max-width: 768px) { #header-2-left-ct, #header-2-right-ct {display: none;} #header-2-middle-ct {float: none; width: 100%;} #header-2-middle-ct img {margin-top: 0; max-height: 3rem;} #spotlight-bg {margin-bottom: -1rem;} #spotlight-bg img.featured {display: none;} #spotlight-bg img.mobile {display: block; width: 100%;} } @media only screen and (max-width: 500px) { #logo-ct {width: 100%; padding: 0.5rem 2.5rem;} #header-2 {margin-top: 1rem; margin-bottom: 1rem;} #header-2 .inner {padding: 0; background: none;} #header-2-middle-ct {padding: 0.5rem 2.5rem; box-sizing: border-box; background: #fff; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; box-shadow: 0px 5px 10px #8f8f8f; -webkit-box-shadow: 0px 5px 10px #8f8f8f; -moz-box-shadow: 0px 5px 10px #8f8f8f; -o-box-shadow: 0px 5px 10px #8f8f8f;} #header-2-middle-ct img {max-height: 4.1rem; max-width: 100%;} #spotlight-bg {display: none;} } @media only screen and (max-width: 400px) { /* .mnav-btn {width: 2rem; height: 2rem;} #mnav-pointer {width: 2.75rem; height: 2.75rem; background-size: 1.75rem auto;} #mnav-home {background-size: 1rem auto;} #mnav-home.displayed {top: -1.5rem; right: -1.5rem;} #mnav-back {background-size: 1rem auto;} #mnav-back.displayed {right: -3rem;} #mnav-livenow {background-size: 1rem auto;} #mnav-livenow.displayed {bottom: -1.5rem; right: -1.5rem;} */ #main-nav-ct {bottom: 2.5rem; width: 3rem; height: 3rem;} #event-vote-nav-ct {bottom: 5.75rem; width: 3rem; height: 3rem;} .mnav-btn {width: 2rem; height: 2rem;} #mnav-pointer, #mnav-vote {width: 3rem; height: 3rem; background-size: 2rem auto;} #mnav-home {background-size: 1rem auto;} #mnav-home.displayed {top: -2.25rem; left: 2rem;} #mnav-profile {background-size: 1rem auto;} #mnav-profile.displayed {top: -0.5rem; left: 3.5rem;} #mnav-back {background-size: 1rem auto;} #mnav-back.displayed {top: 1.75rem; left: 3.5rem;} #mnav-livenow {background-size: 1rem auto;} #mnav-livenow.displayed {top: 3.25rem; left: 1.75rem;} #mnav-additional {background-size: 1rem auto;} #mnav-additional.displayed {top: 3.25rem; left: 1.75rem;} } /* /HEADER */ /* HOME */ #content {} #home-sfw {margin-top: 1.5rem;} #home-left-ct {float: left; width: 20%; margin-right: 2.5%;} #home-middle-ct {float: left; width: 55%; margin-right: 2.5%; background: rgba(255, 255, 255, 0.8); padding: 2rem; box-sizing: border-box; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #home-middle-ct a {display: block; margin-bottom: 1rem;} #home-middle-ct a:last-child {margin-bottom: 0;} #home-middle-ct img {display: block; margin: 0 auto; margin-bottom: 1rem;} #home-middle-ct img:last-child {margin-bottom: 0;} #home-middle-ct img.logo-small {max-width: 45%;} #home-middle-ct img.logo-large {max-width: 85%;} #home-right-ct {float: left; width: 20%;} ul#home-nav-list {} ul#home-nav-list > li {margin-bottom: 1rem;} ul#home-nav-list > li:last-child {margin-bottom: 0;} .nav-btn-ct {padding: 1rem; background: rgba(255, 255, 255, 0.8); box-sizing: border-box; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} a.nav-btn {display: block; background: url(../images/bg/button-gen-bg.jpg) no-repeat center; background-size: cover !important; position: relative; transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} a.nav-btn:hover {transform: scale(1.05); text-decoration: none;} a.nav-btn.active:hover {transform: scale(1);} a.nav-btn p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; text-align: center; font-family: 'TitleFont', Arial, Verdana; font-size: 0.8rem; line-height: 1.0rem; color: #fff;} #home-right-ct .nav-btn-ct {margin-bottom: 1rem;} #home-right-ct .nav-btn-ct:last-child {margin-bottom: 0;} #sisufp-sfw {margin-top: 1.5rem;} #sisufp-middle-ct {width: 55%; margin: 0 auto; background: rgba(255, 255, 255, 0.8); padding: 1.5rem; box-sizing: border-box; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #sisufp-middle-ct img {display: block; margin: 0 auto; margin-bottom: 1rem;} #sisufp-left-ct, #sisufp-right-ct {position: absolute; top: 50%; width: 20%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); box-sizing: border-box; padding: 1rem; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #sisufp-left-ct {left: 0;} #sisufp-right-ct {right: 0;} #sisufp-left-ct img, #sisufp-right-ct img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 70%; max-height: 70%;} .section-title-ct {margin-bottom: 1rem;} h2.gen-section-title {margin-bottom: 0.3rem; color: #005bac; font-family: 'TitleBoldFont', Arial, Verdana;} .section-title-ct p, .section-title-ct p a {font-size: 0.7rem; line-height: 1.0rem;} .section-title-ct p a {color: #005bac;} .gen-form label.form-label {font-size: 0.6rem; line-height: 0.9rem; font-family: 'BoldFont', Arial, Verdana; display: block; margin-bottom: 0.3rem;} .gen-form-row {float: left; width: 100%; position: relative; margin-bottom: 0.7rem;} .gen-form-row .gfr-full {float: left; width: 100%; position: relative;} .gen-form-row .gfr-half {float: left; width: 48%; margin-right: 4%; position: relative;} .gen-form-row .gfr-half:nth-child(2n) {margin-right: 0;} .gen-form-row .gfr-label {float: left; width: 39%; margin-right: 3%;} .gen-form-row .gfr-sep {float: left; width: 2%; margin-right: 3%;} .gen-form-row .gfr-form {float: left; width: 53%;} .gen-form-row .gfr-label, .gen-form-row .gfr-sep {font-size: 0.6rem; line-height: 1.7rem;} .gen-form input[type="submit"] {width: 100%;} .gen-form a.gen-btn {display: block;} .form-note {display: block; font-size: 0.45rem; line-height: 0.65rem; color: #7f7f7f; margin-top: 0.1rem;} label.error {font-size: 0.5rem; color: #ff0000; margin-top: 0.2rem; display: inline-block; font-family: 'BoldFont', Arial, Verdana;} .gfr-submit-ct {margin-top: 0.5rem;} #custom-institution-ct {display: none;} #login-forgot-password-ct-resp {display: none;} .gen-popup-ct {background: #fff; width: 700px; box-sizing: border-box; padding: 1rem;} .gen-popup-ct.narrow {width: 600px;} .gen-popup-ct.large {width: 1024px;} .gen-popup-section {margin-bottom: 0.7rem;} .gen-popup-section.mb-small {margin-bottom: 0.5rem;} .gen-popup-section.mb-large {margin-bottom: 1.0rem;} .gen-popup-ct .gen-popup-section:last-child {margin-bottom: 0;} .gen-popup-ct a.gen-btn {font-size: 0.5rem; line-height: 0.5rem; padding: 0.5rem 0.8rem; min-width: 3rem;} @media only screen and (min-width: 1600px) { .gen-popup-ct {width: 1024px;} } @media only screen and (max-width: 1200px) { .nav-btn-ct {padding: 0.75rem;} .gen-popup-ct.large {width: 900px;} #register-form .gfr-half {width: 100%; margin-right: 0; margin-bottom: 0.7rem;} #register-form .gen-form-row .gfr-half:nth-child(2n) {margin-bottom: 0;} } @media only screen and (max-width: 1024px) { a.nav-btn p {font-size: 0.7rem; line-height: 0.9rem;} .gen-popup-ct.large {width: 700px;} #home-left-ct {width: 22%; margin-right: 3%;} #home-middle-ct {width: 50%; margin-right: 3%;} #home-right-ct {width: 22%;} #sisufp-sfw .wrap {width: 80%;} #sisufp-left-ct, #sisufp-right-ct {display: none;} #sisufp-middle-ct {float: none; width: 100%; margin-right: 0;} #register-form .gfr-half {width: 48%; margin-right: 4%; margin-bottom: 0;} #register-form .gen-form-row .gfr-half:nth-child(2n) {margin-right: 0;} } @media only screen and (max-width: 768px) { #home-sfw .wrap {width: 70%;} .nav-btn-ct {padding: 1rem;} #home-left-ct {display: none;} #home-middle-ct {float: none; width: 100%; margin-right: 0;} #home-right-ct {float: none; width: 100%; margin-top: 1rem;} ul#home-nav-list > li {float: left; width: 47.5%; margin-right: 5%; margin-bottom: 0;} ul#home-nav-list > li:nth-child(2n) {margin-right: 0;} ul#home-nav-list > li:nth-child(2n + 1) {clear: both;} a.nav-btn p {font-size: 1.0rem; line-height: 1.25rem;} #sisufp-sfw .wrap {width: 70%;} #register-form .gfr-half {width: 100%; margin-right: 0; margin-bottom: 0.7rem;} #register-form .gen-form-row .gfr-half:nth-child(2n) {margin-bottom: 0;} .gen-popup-ct, .gen-popup-ct.narrow, .gen-popup-ct.large {width: 500px;} } @media only screen and (max-width: 600px) { #home-sfw .wrap {width: 80%;} #sisufp-sfw .wrap {width: 80%;} .gen-popup-ct, .gen-popup-ct.narrow, .gen-popup-ct.large {width: 480px;} } @media only screen and (max-width: 500px) { #home-sfw .wrap {width: 90%;} #sisufp-sfw .wrap {width: 90%;} .gen-popup-ct, .gen-popup-ct.narrow, .gen-popup-ct.large {width: 320px;} ul#home-nav-list > li {float: left; width: 47%; margin-right: 6%; margin-bottom: 0;} #login-form .gen-form-row .gfr-half {width: 100%; margin-right: 0; margin-bottom: 0.6rem;} #login-form .gen-form-row .gfr-half:nth-child(2n) {margin-bottom: 0;} #login-forgot-password-ct {display: none;} #login-forgot-password-ct-resp {display: block; margin-top: 10px; text-align: center;} .form-note {font-size: 0.5rem; line-height: 0.7rem; margin-top: 0.2rem;} } @media only screen and (max-width: 400px) { #home-middle-ct img.logo-small {max-width: 50%;} .nav-btn-ct {padding: 0.75rem;} a.nav-btn p {font-size: 0.65rem; line-height: 0.85rem;} .gen-form-row {margin-bottom: 0.5rem;} #sisufp-middle-ct {padding: 1rem;} h2.gen-section-title {font-size: 1.1rem; line-height: 1.3rem;} .section-title-ct p, .section-title-ct p a {font-size: 0.6rem; line-height: 0.8rem;} #login-form .gen-form-row .gfr-half {margin-bottom: 0.5rem;} .gen-popup-ct, .gen-popup-ct.narrow, .gen-popup-ct.large {padding: 0.75rem;} } /* /HOME */ /* DASHBOARD */ #dashboard-slideshow-sfw {margin-top: 1rem;} #dashboard-slideshow-sfw .slick-dots {bottom: 0.5rem;} #dashboard-slideshow-sfw .slick-dots li {width: 0.5rem; height: 0.5rem; margin: 0 2px;} #dashboard-slideshow-sfw .slick-dots li:last-child {} #dashboard-slideshow-sfw .slick-dots li button {width: 0.5rem; height: 0.5rem; background: url(../images/icon/bullet.png) no-repeat center; background-size: 0.5rem auto; transition: background 0.2s linear; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear;} #dashboard-slideshow-sfw .slick-dots li button::before {content: "";} #dashboard-slideshow-sfw .slick-dots li.slick-active button {background: url(../images/icon/bullet-active.png) no-repeat center; background-size: 0.5rem auto;} .slideshow-item {} .slideshow-item img.featured, .slideshow-item video.featured {display: block; width: 100%;} .slideshow-item img.thumb, .slideshow-item video.thumb {display: none;} #dashboard-nav-sfw {margin-top: 1rem;} #dashboard-nav-sfw .wrap {width: 70%;} ul#dashboard-nav-list {} ul#dashboard-nav-list > li {float: left; width: 22.5%; margin-right: 3.333%;} ul#dashboard-nav-list > li:last-child {margin-right: 0;} @media only screen and (min-width: 1600px) { #dashboard-slideshow-sfw {margin-top: 1.5rem;} #dashboard-slideshow-sfw .slick-dots li {width: 0.8rem; height: 0.8rem; margin: 0 6px;} #dashboard-slideshow-sfw .slick-dots li button {width: 0.8rem; height: 0.8rem; background-size: 0.8rem auto;} #dashboard-slideshow-sfw .slick-dots li.slick-active button {background-size: 0.8rem auto;} #dashboard-nav-sfw {margin-top: 1.5rem;} #dashboard-nav-sfw .wrap {width: 70%;} ul#dashboard-nav-list > li {float: left; width: 22%; margin-right: 4%;} } @media only screen and (max-width: 1200px) { #dashboard-slideshow-sfw .slick-dots {bottom: 1rem;} #dashboard-slideshow-sfw .slick-dots li {margin: 0 3px;} #dashboard-slideshow-sfw .slick-dots li button {width: 0.5rem; height: 0.5rem; background-size: 0.5rem auto;} #dashboard-slideshow-sfw .slick-dots li.slick-active button {background-size: 0.5rem auto;} ul#dashboard-nav-list > li a.nav-btn p {font-size: 0.75rem; line-height: 0.95rem;} } @media only screen and (max-width: 1024px) { #dashboard-nav-sfw .wrap {width: 90%;} ul#dashboard-nav-list > li {width: 23.5%; margin-right: 2%;} ul#dashboard-nav-list > li:last-child {margin-right: 0;} } @media only screen and (max-width: 768px) { .slideshow-item img.featured, .slideshow-item video.featured {display: none;} .slideshow-item img.thumb, .slideshow-item video.thumb {display: block; width: 100%;} #dashboard-nav-sfw .wrap {width: 75%;} ul#dashboard-nav-list > li .nav-btn-ct {padding: 1rem;} ul#dashboard-nav-list > li {width: 46%; margin-right: 8%; margin-bottom: 1rem;} ul#dashboard-nav-list > li:nth-child(4n) {margin-right: 8%;} ul#dashboard-nav-list > li:nth-child(4n + 1) {clear: none;} ul#dashboard-nav-list > li:nth-child(2n) {margin-right: 0;} ul#dashboard-nav-list > li:nth-child(2n + 1) {clear: both;} } @media only screen and (max-width: 500px) { #dashboard-nav-sfw .wrap {width: 90%;} #dashboard-slideshow-sfw .slick-dots {bottom: 0.75rem;} #dashboard-slideshow-sfw .slick-dots li {margin: 0 2px;} ul#dashboard-nav-list > li {width: 47%; margin-right: 6%; margin-bottom: 0.75rem;} ul#dashboard-nav-list > li:nth-child(4n) {margin-right: 6%;} ul#dashboard-nav-list > li:nth-child(4n + 1) {clear: none;} ul#dashboard-nav-list > li:nth-child(2n) {margin-right: 0;} ul#dashboard-nav-list > li:nth-child(2n + 1) {clear: both;} ul#dashboard-nav-list > li .nav-btn-ct {padding: 0.75rem;} } @media only screen and (max-width: 400px) { ul#dashboard-nav-list > li a.nav-btn p {font-size: 0.65rem; line-height: 0.85rem;} } /* /DASHBOARD */ /* PRODUCT */ #current-nav-ct {position: absolute; z-index: 100; left: 10%; top: 2.2rem;} #current-nav-ct.type-2 {top: 1.2rem;} #current-nav-ct-resp {display: none;} #current-nav-ct .nav-btn-ct, #current-nav-ct-resp .nav-btn-ct {padding: 0.8rem; box-sizing: border-box;} #current-nav-ct a.nav-btn, #current-nav-ct-resp a.nav-btn {width: 5rem;} #current-nav-ct a.nav-btn p, #current-nav-ct-resp a.nav-btn p {font-size: 0.9rem; line-height: 1.1rem;} a.nav-btn-type-2 {display: block; margin-bottom: 0.4rem; padding: 0.4rem 1rem; min-width: 8.5rem; text-align: center; background: url(../images/bg/button-gen-bg.jpg) no-repeat center; background-size: cover !important; box-sizing: border-box; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px;} a.nav-btn-type-2.bg-alt {background: url(../images/bg/green-horizontal-bg-2.jpg) no-repeat center; background-size: cover !important; } a.nav-btn-type-2 p {font-size: 0.8rem; line-height: 1.0rem; color: #fff;} a.nav-btn-type-2 p.small {font-size: 0.65rem; line-height: 0.85rem;} a.nav-btn-type-2:hover {text-decoration: none; transform: scale(1.08);} a.nav-btn-type-2.no-efc:hover {transform: none !important;} #current-nav-ct a.nav-btn-type-2:last-child {margin-bottom: 0;} #product-sfw {margin-top: 3rem;} #product-list-sfw {} .product-item {box-sizing: border-box; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1rem;} .product-item .inner {position: relative; height: 12rem;} .product-item .inner img {position: absolute; bottom: 12%; z-index: 200; left: 50%; transform: translateX(-50%); max-width: 80%; max-height: 80%; opacity: 0.8; filter: contrast(80%); -webkit-filter: contrast(80%); transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear;} .product-item .inner img:hover {opacity: 1.0; transform: translateX(-50%) scale(1.1); filter: contrast(90%); -webkit-filter: contrast(90%);} .product-item .btm-plater {position: absolute; z-index: 150; bottom: 0.5rem; width: 100%; height: 2.7rem; background: #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; box-shadow: 0px 10px 10px #9f9f9f; -webkit-box-shadow: 0px 10px 10px #9f9f9f; -moz-box-shadow: 0px 10px 10px #9f9f9f; -o-box-shadow: 0px 10px 10px #9f9f9f;} #product-list-sfw .slick-prev {content: ''; width: 1.5rem; height: 1.5rem; background: url(../images/icon/arrow-prev.png) no-repeat center !important; top: 50%; left: -1.3rem; transform: translateY(-50%); opacity: 1.0; background-size: 1.5rem 1.5rem !important; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #product-list-sfw .slick-next {content: ''; width: 1.5rem; height: 1.5rem; background: url(../images/icon/arrow-next.png) no-repeat center !important; top: 50%; right: -1.3rem; transform: translateY(-50%); opacity: 1.0; background-size: 1.5rem 1.5rem !important; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #product-list-sfw .slick-prev:hover {background: url(../images/icon/arrow-prev-hover.png) no-repeat center !important; background-size: 1.5rem 1.5rem !important;} #product-list-sfw .slick-next:hover {background: url(../images/icon/arrow-next-hover.png) no-repeat center !important; background-size: 1.5rem 1.5rem !important;} #product-list-sfw .slick-prev.slick-disabled, #product-list-sfw .slick-prev.slick-disabled:hover, #product-list-sfw .slick-prev.slick-disabled:focus {opacity: 0.2;} #product-list-sfw .slick-next.slick-disabled, #product-list-sfw .slick-next.slick-disabled:hover, #product-list-sfw .slick-next.slick-disabled:focus {opacity: 0.2;} .product-item .inner .cust-tooltip {top: auto; bottom: -0.4rem; z-index: 1000; left: 50%; transform: translateX(-50%); width: 7.5rem;} .product-item .inner .cust-tooltip div {left: 50%; transform: translateX(-50%);} .product-item .inner .cust-tooltip p {font-size: 0.6rem; line-height: 0.8rem; color: #005bac;} .popup-accordion {} .popup-accordion-title {} .popup-accordion-title h3 {font-size: 0.8rem; line-height: 1.0rem; padding: 0.4rem 1rem; background: url(../images/icon/arrow-down-white.png) no-repeat right 0.5rem center #35beec; background-size: 0.4rem auto; color: #fff; font-family: 'TitleBoldFont', Arial, Verdana; color: #fff; padding-right: 1rem; cursor: pointer; transition: background 0.15s linear; -webkit-transition: background 0.15s linear; -moz-transition: background 0.15s linear; -o-transition: background 0.15s linear;} .popup-accordion-title h3.opened {background: url(../images/icon/arrow-up-white.png) no-repeat right 0.5rem center #35beec; background-size: 0.4rem auto;} .popup-accordion-title h3:hover, .popup-accordion-title h3.opened:hover {background-color: #36b063;} .popup-accordion-content {display: none; padding: 0.5rem 0;} ul.product-benefit-list {} ul.product-benefit-list > li {margin-bottom: 0.7rem;} ul.product-benefit-list > li:last-child {margin-bottom: 0;} ul.product-benefit-list > li .img-wrap {float: left; width: 18%;} ul.product-benefit-list > li .img-wrap img {display: block; margin: 0 auto; max-width: 100%;} ul.product-benefit-list > li .desc-wrap {float: right; width: 79%; margin-top: 0.1rem;} ul.product-benefit-list > li .desc-wrap.full-width {float: none; width: 100%;} ul.product-benefit-list > li .desc-wrap h4 {font-size: 0.8rem; line-height: 1.0rem; margin-bottom: 0.2rem; font-family: 'TitleBoldFont', Arial, Verdana;} ul.product-benefit-list > li .desc-wrap h4 i {font-family: 'TitleBoldItalicFont', Arial, Verdana; } ul.product-benefit-list > li .desc-wrap p {} .product-specification {} .product-specification h5 {font-size: 0.7rem; line-height: 0.9rem; margin-bottom: 0; font-family: 'TitleBoldFont', Arial, Verdana; margin-bottom: 0.1rem;} .product-specification p {font-size: 0.6rem; line-height: 0.8rem; margin-bottom: 0; color: #0464b0;} .product-specification p.plain {color: #333333;} .product-specification p.plain a {color: #005bac; font-size: 0.6rem; line-height: 0.8rem;} @media only screen and (min-width: 1600px) { #product-sfw {margin-top: 2.5rem;} #current-nav-ct {left: 12.5%; top: 2.5rem;} #current-nav-ct.type-2 {top: 1.5rem;} #current-nav-ct a.nav-btn p {font-size: 0.85rem; line-height: 1.05rem;} #product-list-sfw .slick-prev {width: 1.8rem; height: 1.8rem; left: -1.6rem; background-size: 1.8rem 1.8rem !important;} #product-list-sfw .slick-next {width: 1.8rem; height: 1.8rem; right: -1.6rem; background-size: 1.8rem 1.8rem !important;} #product-list-sfw .slick-prev:hover {background-size: 1.8rem 1.8rem !important;} #product-list-sfw .slick-next:hover {background-size: 1.8rem 1.8rem !important;} } @media only screen and (max-width: 1200px) { #current-nav-ct {display: none;} #current-nav-ct-resp {display: block; margin-bottom: 1.5rem; text-align: center; text-align: center;} #current-nav-ct-resp .nav-btn-ct {width: 6rem; margin: 0 auto;} #current-nav-ct-resp a.nav-btn {width: 100%;} #current-nav-ct-resp a.nav-btn p {font-size: 0.8rem; line-height: 1.0rem;} a.nav-btn-type-2 {display: inline-block; margin-right: 0.5rem;} #current-nav-ct-resp a.nav-btn-type-2:last-child {margin-right: 0; margin-bottom: 0;} #product-sfw {margin-top: 1.5rem;} } @media only screen and (max-width: 1024px) { .product-item .inner img {bottom: 8%;} } @media only screen and (max-width: 768px) { .product-item {padding-left: 0.75rem; padding-right: 0.75rem;} a.nav-btn-type-2 {display: block; margin-right: 0; width: 12rem; margin-left: auto !important; margin-right: auto !important;} ul.product-benefit-list > li .img-wrap {width: 23%;} ul.product-benefit-list > li .desc-wrap {width: 74%;} ul.product-benefit-list > li .desc-wrap.full-width {width: 100%;} .popup-accordion-title h3 {font-size: 0.7rem; line-height: 0.9rem;} } @media only screen and (max-width: 500px) { .product-item .inner {height: 15rem;} .product-item .inner img {max-width: 75%; max-height: 75%; bottom: 14%;} #product-list-sfw .slick-prev {left: -0.45rem;} #product-list-sfw .slick-next {right: -0.45rem;} #current-nav-ct-resp .nav-btn-ct {width: 5rem; margin: 0 auto;} #current-nav-ct-resp a.nav-btn p {font-size: 0.65rem; line-height: 0.85rem;} a.nav-btn-type-2 {width: 95%;} .popup-accordion-title h3 {font-size: 0.6rem; line-height: 0.8rem;} ul.product-benefit-list > li {margin-bottom: 1rem;} ul.product-benefit-list > li .img-wrap {float: none; width: 100%; margin-bottom: 0.4rem;} ul.product-benefit-list > li .img-wrap img {max-width: 4rem;} ul.product-benefit-list > li .desc-wrap {float: none; width: 100%; text-align: center;} .product-specification {text-align: center;} } /* /PRODUCT */ /* EVENT */ #event-sfw {margin-top: 3rem;} ul#event-list {} ul#event-list > li {float: left; width: 31%; margin-right: 3.5%;} ul#event-list > li:nth-child(3n) {margin-right: 0;} ul#event-list > li:nth-child(3n + 1) {clear: both;} ul#event-list > li .img-wrap {margin-bottom: 0.5rem;} ul#event-list > li .img-wrap img {width: 100%; height: auto; transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} ul#event-list > li .img-wrap img:hover {transform: scale(1.1);} ul#event-list > li .btn-wrap {} ul#event-list > li .btn-wrap a {display: block; text-align: center; font-size: 0.7rem; line-height: 1.0rem; padding: 0.7rem 1rem; color: #fff; cursor: pointer; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} ul#event-list > li .btn-wrap a.opened {background: url(../images/bg/green-horizontal-bg.jpg) no-repeat center; background-size: cover !important;} ul#event-list > li .btn-wrap a.opened:hover {font-size: 0.8rem; line-height: 1.0rem; font-family: 'BoldFont', Arial, Verdana; text-decoration: none;} ul#event-list > li .btn-wrap a.locked, ul#event-list > li .btn-wrap a.locked:hover {font-size: 0.7rem; line-height: 1.0rem; background: url(../images/bg/blue-horizontal-bg.jpg) no-repeat center; background-size: cover !important; text-decoration: none; cursor: text;} ul#event-list > li .btn-wrap a.expired, ul#event-list > li .btn-wrap a.expired:hover {font-size: 0.7rem; line-height: 1.0rem; background: #bfbfbf; cursor: text; text-decoration: none; cursor: text;} #event-detail-sfw {margin-top: 3rem; margin-bottom: 1rem;} #event-detail-ct {position: relative; height: auto;} #event-detail-ct-resp {display: none;} #evd-ringframe {position: absolute; left: 50%; transform: translateX(-50%); height: 100%; background: url(../images/bg/ring-white.png) no-repeat center; background-size: 100% 100%; transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear;} #evd-ringframe.active {transform: none; left: auto; right: 0; width: 47.5% !important; height: 95% !important;} #evd-ringframe-resp {display: none;} /* .evd-speaker-ct {position: absolute; width: 12rem; background: aqua; height: auto; z-index: 200; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear;} .evd-speaker-ct .img-wrap {width: 45%;} .evd-speaker-ct .img-wrap img {margin: 0 auto; max-width: 100%;} .evd-speaker-ct .desc-wrap {width: 50%; text-align: center; margin-top: 1rem;} .evd-speaker-ct .desc-wrap h3 {font-size: 0.6rem; line-height: 0.8rem; color: #0065b7;} .evd-speaker-ct .desc-wrap a.gen-btn {background: #0065b7; font-size: 0.5rem; font-family: 'GeneralFont', Arial, Verdana; padding: 0.2rem 0.5rem;} .evd-speaker-ct .desc-wrap a.gen-btn:hover {background: #36b063; text-decoration: none; border: 1px solid #36b063;} /#evd-ringframe.three-items .evd-speaker-ct:nth-child(1), #evd-ringframe.four-items .evd-speaker-ct:nth-child(1) {position: absolute; top: 25%; left: -9rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2), #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) {position: absolute; top: 25%; right: -9rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(3) {position: absolute; bottom: 0; left: 30%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(3) {left: -30%; bottom: 0;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(4) {left: 70%; bottom: 0;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(1) .img-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(1) .img-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(3) .img-wrap {float: right;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(1) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(3) .desc-wrap {float: left;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2) .img-wrap, #evd-ringframe.three-items .evd-speaker-ct:nth-child(3) .img-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) .img-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(4) .img-wrap{float: left;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.three-items .evd-speaker-ct:nth-child(3) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(4) .desc-wrap{float: right;} */ .evd-speaker-ct {position: absolute; width: 5rem; height: 5rem; z-index: 200; transition: top 0.5s linear, left 0.5s linear, bottom 0.5s linear, right 0.5s linear; -webkit-transition: top 0.5s linear, left 0.5s linear, bottom 0.5s linear, right 0.5s linear; -moz-transition: top 0.5s linear, left 0.5s linear, bottom 0.5s linear, right 0.5s linear; -o-transition: top 0.5s linear, left 0.5s linear, bottom 0.5s linear, right 0.5s linear;} .evd-speaker-ct .img-wrap {width: 100%;} .evd-speaker-ct .img-wrap img {margin: 0 auto; max-width: 100%;} .evd-speaker-ct .desc-wrap {position: absolute; text-align: center; width: 7rem; top: 0; margin-top: 1rem; box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem;} .evd-speaker-ct .desc-wrap h3 {font-size: 0.6rem; line-height: 0.8rem; color: #0065b7;} .evd-speaker-ct .desc-wrap .speaker-description {display: none;} .evd-speaker-ct .desc-wrap a.gen-btn {background: #0065b7; font-size: 0.5rem; font-family: 'GeneralFont', Arial, Verdana; padding: 0.2rem 0.5rem; border: 1px solid #0065b7;} .evd-speaker-ct .desc-wrap a.gen-btn:hover {background: #36b063; text-decoration: none; border: 1px solid #36b063;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(1), #evd-ringframe.four-items .evd-speaker-ct:nth-child(1) {top: 25%; left: -10%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2), #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) {top: 25%; right: -10%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(1).active, #evd-ringframe.four-items .evd-speaker-ct:nth-child(1).active {top: 36%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2).active, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2).active {top: 36%; right: 80%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(3) {bottom: -10%; left: 35%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(3).active {bottom: 34.5%; left: -10%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(3) {bottom: 0; left: 0;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(3).active {bottom: 34.5%; left: -10%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(4) {bottom: 0; right: 0;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(4).active {bottom: 34.5%; right: 80%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(1) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(1) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(3) .desc-wrap {left: -7rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.three-items .evd-speaker-ct:nth-child(3) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(4) .desc-wrap {right: -7rem;} #evd-glow {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; z-index: 50; background: url(../images/bg/glow-white.png) no-repeat center; background-size: 100% auto;} #evd-join {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65%; height: 33%; z-index: 100; background: url(../images/icon/join-webinar.png) no-repeat center; background-size: 75% auto; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #evd-join:hover {transform: translate(-50%, -50%) scale(1.1);} #speaker-description-ct {background: #13c3f5; box-sizing: border-box; padding: 1rem; position: absolute; left: 0; width: 45%; text-align: center; top: 50%; transform: translateY(-50%); display: none; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #speaker-description-ct h2.speaker-title {font-size: 0.8rem; line-height: 1.0rem; font-family: 'TitleBoldFont', Arial, Verdana; color: #fff;} #speaker-description-ct .wysiwyg-content {max-height: 300px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;} #speaker-description-ct .wysiwyg-content::-webkit-scrollbar {display: none;} .scb-white .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: #fff !important;} .scb-white .mCSB_scrollTools .mCSB_draggerRail {background-color: #fff !important; height: 100%;} #speaker-description-ct a.gen-btn {background: none; border: 1px solid #fff; margin-top: 0.7rem; padding: 0.3rem 0.8rem;} #speaker-description-ct a.gen-btn:hover {background: #fff; color: #13c3f5; text-decoration: none;} @media only screen and (min-width: 1600px) { #event-sfw {margin-top: 2.5rem;} #event-detail-sfw {margin-top: 4rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2).active, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2).active {right: 82.5%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(3).active {left: -10%; bottom: 34.5%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(3).active {left: -10%; bottom: 34.5%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(4).active {bottom: 34.5%; right: 82.5%;} } @media only screen and (max-width: 1200px) { #event-sfw {margin-top: 1.5rem;} ul#event-list > li {float: left; width: 48%; margin-right: 4%; margin-bottom: 2rem;} ul#event-list > li:nth-child(3n) {margin-right: 4%;} ul#event-list > li:nth-child(3n + 1) {clear: none;} ul#event-list > li:nth-child(2n) {margin-right: 0;} ul#event-list > li:nth-child(2n + 1) {clear: both;} ul#event-list > li .img-wrap img:hover {transform: scale(1.05);} #event-detail-sfw {margin-top: 1.5rem;} #event-detail-sfw .wrap {width: 95%;} } @media only screen and (max-width: 1024px) { .evd-speaker-ct {width: 4.3rem; height: 4.3rem;} .evd-speaker-ct .desc-wrap {margin-top: 0.75rem; width: 6rem;} .evd-speaker-ct .desc-wrap h3 {margin-bottom: 0.3rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(1) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(1) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(3) .desc-wrap {left: -6.5rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.three-items .evd-speaker-ct:nth-child(3) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2) .desc-wrap, #evd-ringframe.four-items .evd-speaker-ct:nth-child(4) .desc-wrap {right: -6.5rem;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(2).active, #evd-ringframe.four-items .evd-speaker-ct:nth-child(2).active {right: 78%;} #evd-ringframe.three-items .evd-speaker-ct:nth-child(3).active {bottom: 33.5%; left: -10%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(3).active {bottom: 33.5%; left: -10%;} #evd-ringframe.four-items .evd-speaker-ct:nth-child(4).active {bottom: 33.5%; right: 78%;} #speaker-description-ct .wysiwyg-content {max-height: 250px;} #evd-join:hover {transform: translate(-50%, -50%) scale(1.05);} } @media only screen and (max-width: 900px) { #event-detail-sfw .wrap {width: 70%;} #event-detail-ct {display: none;} #event-detail-ct-resp {display: block;} ul#event-speaker-list-resp {} ul#event-speaker-list-resp > li {margin-bottom: 1.5rem;} ul#event-speaker-list-resp > li:last-child {margin-bottom: 0;} ul#event-speaker-list-resp > li .title-wrap {position: relative; height: 6rem;} ul#event-speaker-list-resp > li .title-wrap .img-wrap {position: absolute; left: 0; transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear;} ul#event-speaker-list-resp > li .title-wrap .img-wrap.active {left: 50%; transform: translateX(-50%);} ul#event-speaker-list-resp > li .title-wrap .img-wrap img {width: 6rem; height: 6rem;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap {position: absolute; top: 50%; transform: translateY(-50%); margin-left: 7rem; max-width: 75%;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap h3 {font-size: 0.8rem; line-height: 1.0rem; color: #0065b7;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap a.gen-btn {background: #0065b7; font-size: 0.6rem; font-family: 'GeneralFont', Arial, Verdana; padding: 0.3rem 0.5rem; border: 1px solid #0065b7;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap a.gen-btn:hover {background: #36b063; text-decoration: none; border: 1px solid #36b063;} ul#event-speaker-list-resp > li .description-wrap {background: #13c3f5; box-sizing: border-box; padding: 1rem; text-align: center; margin-top: 0.5rem; display: none; text-align: center; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} ul#event-speaker-list-resp > li .description-wrap h3.speaker-title {font-size: 1rem; line-height: 1.2rem; font-family: 'BoldFont', Arial, Verdana; margin-bottom: 0.7rem; color: #fff;} ul#event-speaker-list-resp > li .description-wrap a.close-speaker-description {margin: 0 auto; background: none; border: 1px solid #fff; margin-top: 1rem; font-size: 0.6rem; padding: 0.4rem 0.8rem;} ul#event-speaker-list-resp > li .description-wrap a.close-speaker-description:hover {background: #fff; color: #13c3f5;} #evd-ringframe-resp {position: relative; display: block; width: 100%; background: url(../images/bg/ring-white.png) no-repeat center; background-size: 100% 100%; margin-top: 1.5rem;} #evd-glow-resp {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; z-index: 50; background: url(../images/bg/glow-white.png) no-repeat center; background-size: 100% auto;} #evd-join-resp {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65%; height: 33%; z-index: 100; background: url(../images/icon/join-webinar.png) no-repeat center; background-size: 75% auto; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #evd-join-resp:hover {transform: translate(-50%, -50%) scale(1.1);} } @media only screen and (max-width: 768px) { #event-sfw .wrap {width: 75%;} ul#event-list > li {float: none; width: 100%; margin-right: 0;} ul#event-list > li:last-child {margin-bottom: 0;} ul#event-speaker-list-resp > li .title-wrap {height: 5rem;} ul#event-speaker-list-resp > li .title-wrap .img-wrap img {width: 5rem; height: 5rem;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap {margin-left: 6rem;} ul#event-speaker-list-resp > li .description-wrap a.close-speaker-description {font-size: 0.55rem; line-height: 0.75rem;} } @media only screen and (max-width: 600px) { #event-sfw .wrap {width: 90%;} #event-detail-sfw .wrap {width: 90%;} ul#event-speaker-list-resp > li .title-wrap {height: 4.5rem;} ul#event-speaker-list-resp > li .title-wrap .img-wrap img {width: 4.5rem; height: 4.5rem;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap {margin-left: 5.25rem;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap h3 {font-size: 0.7rem; line-height: 0.9rem;} ul#event-speaker-list-resp > li .title-wrap .desc-wrap a.gen-btn {font-size: 0.55rem; padding: 0.25rem 0.4rem; min-width: 3.5rem;} ul#event-speaker-list-resp > li .description-wrap h3.speaker-title {font-size: 0.8rem; line-height: 1.0rem;} ul#event-speaker-list-resp > li .description-wrap a.close-speaker-description {min-width: 3rem;} } /* /EVENT */ /* WEBINAR */ #webinar-sfw {z-index: 600;} #webinar-sfw .wrap {width: 90%;} #webinar-ct {float: left; width: 70%; box-sizing: border-box; padding: 0.75rem; background: rgba(255, 255, 255, 0.8); position: relative; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #webinar-ct.full-width {float: none; width: 100%;} #webinar-ct .inner {position: relative;} #webinar-countdown-ct {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 500;} #webinar-countdown-ct.full-screen {background: rgba(255, 255, 255, 1.0);} #webinar-countdown-ct .caption {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center; color: #fff;} #webinar-countdown-ct .caption h2 {font-size: 1.3rem; line-height: 1.5rem; color: #fff;} #webinar-countdown-ct .caption h3 {font-size: 1.0rem; line-height: 1.2rem; color: #fff;} #webinar-countdown-ct .caption p {font-size: 2.0rem; line-height: 2.2rem; color: #fff;} #webinar-countdown-ct .caption p.small {font-size: 0.8rem; line-height: 1.0rem;} #webinar-countdown-ct.full-screen .caption {width: 100%; height: 100%; object-fit: cover;} #webinar-countdown-ct.full-screen .caption img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 70%; max-height: 70%;} #webinar-ct iframe {width: 100% !important; height: 100% !important;} #webinar-ct .temp-ct {position: absolute; width: 100%; height: 300px; background: #000; z-index: 300;} #webinar-ct .temp-ct.top {left: 0; top: 0; height: 60px; background: #fff; text-align: center; box-sizing: border-box; padding: 0.3rem 0.5rem;} #webinar-ct .temp-ct.top img {display: block; margin: 0 auto; max-height: 100%;} #webinar-ct .temp-ct.bottom {left: 0; bottom: 0; height: 60px;} #group-chat-ct {float: right; width: 28%; box-sizing: border-box; padding: 0.75rem; background: rgba(255, 255, 255, 0.8); position: relative; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #group-chat-ct .inner {position: relative;} #group-chat-ct iframe {width: 100% !important; height: 100% !important;} #full-featured-groupchat-ct {margin-top: 0.5rem; text-align: center;} #full-featured-groupchat-ct a.gen-btn {font-size: 0.5rem; line-height: 0.7rem; padding-left: 0.7rem; padding-right: 0.7rem;} @media only screen and (min-width: 1600px) { #webinar-sfw {} #webinar-sfw .wrap {width: 80%;} } @media only screen and (max-width: 1200px) { #webinar-sfw {padding-bottom: 3rem;} #webinar-ct {float: none; width: 100%;} #group-chat-ct {float: none; width: 100%; margin-top: 0.5rem;} } @media only screen and (max-width: 1024px) { #webinar-sfw .wrap {width: 90%;} } @media only screen and (max-width: 768px) { #webinar-sfw {padding-bottom: 5rem;} #webinar-countdown-ct .caption p {font-size: 1.5rem; line-height: 1.7rem;} } @media only screen and (max-width: 500px) { #webinar-sfw .wrap {width: 100%;} #webinar-ct {padding: 0; background: none;} #webinar-ct .temp-ct.top {height: 60px; padding: 0.4rem 0.5rem;} #group-chat-ct {padding: 0; background: none;} #webinar-ct .inner {height: 12rem;} #group-chat-ct .inner {height: 15rem;} #webinar-countdown-ct.full-screen .caption img {max-width: 85%; max-height: 85%;} } /* /WEBINAR */ /* OUR JOURNEY */ #oj-sfw {margin-top: 3rem;} ul#oj-list {} ul#oj-list > li {float: left; width: 23.5%; margin-right: 2%; margin-bottom: 1rem;} ul#oj-list > li:nth-child(4n) {margin-right: 0;} ul#oj-list > li:nth-child(4n + 1) {clear: both;} ul#oj-list > li .img-wrap {overflow: hidden; /* height: 8rem; */ border-top-left-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; -o-border-top-left-radius: 15px; border-top-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; -o-border-top-right-radius: 15px;} ul#oj-list > li .img-wrap img {/* width: 100%; height: 100%; object-fit: cover; */ display: block; width: 100%; border-top-left-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; -o-border-top-left-radius: 15px; border-top-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; -o-border-top-right-radius: 15px;} ul#oj-list > li .desc-wrap {padding: 0.7rem; background: rgba(0, 191, 243, 0.4); box-sizing: border-box; min-height: 7rem; border-bottom-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; -o-border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -o-border-bottom-right-radius: 15px;} ul#oj-list > li .desc-wrap .title {margin-bottom: 0.5rem;} /* ul#oj-list > li .desc-wrap .title h3, ul#oj-list > li .desc-wrap .title h3 a {color: #005bac; font-size: 0.75rem; line-height: 1.0rem; font-family: 'TitleBoldFont', Arial, Verdana; margin-bottom: 0;} */ ul#oj-list > li .desc-wrap .title h3 {text-align: center; color: #fff; font-size: 1.05rem; line-height: 1.25rem; font-family: 'TitleBoldFont', Arial, Verdana; margin-bottom: 0.7rem;} ul#oj-list > li .desc-wrap .title h3 a {color: #fff; font-size: 1.05rem; line-height: 1.25rem;} ul#oj-list > li .desc-wrap .title h3 a:hover {color: #36b063; text-decoration: none;} ul#oj-list > li .desc-wrap p.info {color: #36b063;} ul#oj-list > li .desc-wrap .description p {font-size: 0.55rem; line-height: 0.75rem; color: #fff;} ul#oj-list > li .desc-wrap .description a.read-more {display: block; text-align: right; margin-top: 0.5rem; font-size: 0.55rem; line-height: 0.75rem; color: #005bac; font-family: 'BoldFont', Arial, Verdana;} ul#oj-list > li .desc-wrap .description a.read-more:hover {color: #36b063; text-decoration: none;} ul#oj-list > li .pic-title {display: none;} ul#oj-img-list {margin-top: 1rem;} ul#oj-img-list > li {margin-bottom: 1.5rem;} ul#oj-img-list > li:last-child {margin-bottom: 0;} ul#oj-img-list > li .img-wrap {float: left; width: 40%;} ul#oj-img-list > li .img-wrap img {margin: 0 auto; max-width: 100%;} ul#oj-img-list > li .desc-wrap {float: right; width: 57%;} @media only screen and (min-width: 1600px) { #oj-sfw {margin-top: 2.5rem;} ul#oj-list > li .desc-wrap {min-height: 10rem;} } @media only screen and (max-width: 1200px) { #oj-sfw {margin-top: 1.5rem;} ul#oj-list > li {width: 48.5%; margin-right: 3%;} ul#oj-list > li:nth-child(4n) {margin-right: 3%;} ul#oj-list > li:nth-child(4n + 1) {clear: none;} ul#oj-list > li:nth-child(2n) {margin-right: 0;} ul#oj-list > li:nth-child(2n + 1) {clear: both;} ul#oj-list > li .desc-wrap {min-height: 6rem;} } @media only screen and (max-width: 1024px) { #oj-sfw {margin-top: 1.5rem;} ul#oj-img-list > li {margin-top: 1rem; padding-top: 1rem; border-top: 1px dotted #7f7f7f;} ul#oj-img-list > li .img-wrap {float: none; width: 100%; margin: 0;} ul#oj-img-list > li .img-wrap img {margin: 0 auto; max-width: 60%; display: block;} ul#oj-img-list > li .desc-wrap {float: none; width: 100%; margin-top: 0.5rem; text-align: center;} } @media only screen and (max-width: 768px) { #oj-sfw .wrap {width: 75%;} ul#oj-list > li {float: none; width: 100%; margin-right: 0;} ul#oj-list > li:last-child {margin-bottom: 0;} ul#oj-list > li .desc-wrap {min-height: 7rem;} ul#oj-img-list > li .img-wrap img {max-width: 80%;} } @media only screen and (max-width: 500px) { #oj-sfw .wrap {width: 90%;} ul#oj-img-list > li .img-wrap img {max-width: 100%;} ul#oj-list > li .desc-wrap {min-height: 6rem;} } /* /OUR JOURNEY */ /* INFINITY ONLINE */ #io-sfw {margin-top: 3rem;} #io-list-ct-resp {display: none;} #io-left-ct {float: left; width: 38%;} #io-left-ct .wysiwyg-content {max-height: 12rem; overflow-y: scroll; box-sizing: border-box; padding: 1rem; background: #13c3f5; text-align: center; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-overflow-style: none; scrollbar-width: none;} #io-left-ct .wysiwyg-content::-webkit-scrollbar {display: none;} #io-left-ct .wysiwyg-content p.big {font-size: 0.65rem; line-height: 0.85rem;} #io-right-ct {float: right; width: 58%;} #io-right-ct img {margin: 0 auto; max-width: 100%;} #io-list-ct {float: left; width: 60%;} .io-item {} .io-item .inner {position: relative;} /* .io-item .inner img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; opacity: 0.5;} .io-item.slick-slide.slick-active.slick-center img {max-width: 100%; max-height: 100%; opacity: 1.0;} */ .io-item .inner img {display: block; width: 100%; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #io-list-ct .slick-prev {content: ''; width: 1.5rem; height: 1.5rem; background: url(../images/icon/arrow-prev.png) no-repeat center !important; top: 50%; transform: translateY(-50%); left: -1rem; opacity: 1.0; background-size: 1.5rem 1.5rem !important; z-index: 300; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #io-list-ct .slick-next {content: ''; width: 1.5rem; height: 1.5rem; background: url(../images/icon/arrow-next.png) no-repeat center !important; top: 50%; transform: translateY(-50%); right: -1rem; opacity: 1.0; background-size: 1.5rem 1.5rem !important; z-index: 300; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #io-list-ct .slick-prev:hover {background: url(../images/icon/arrow-prev-hover.png) no-repeat center !important; background-size: 1.5rem 1.5rem !important;} #io-list-ct .slick-next:hover {background: url(../images/icon/arrow-next-hover.png) no-repeat center !important; background-size: 1.5rem 1.5rem !important;} #io-list-ct .slick-prev.slick-disabled, #io-list-ct .slick-prev.slick-disabled:hover, #io-list-ct .slick-prev.slick-disabled:focus {opacity: 0.2;} #io-list-ct .slick-next.slick-disabled, #io-list-ct .slick-next.slick-disabled:hover, #io-list-ct .slick-next.slick-disabled:focus {opacity: 0.2;} #io-subscribe-ct {float: right; width: 35%; margin-top: 3rem;} #io-subscribe-ct-resp {display: none;} a.io-subscribe-btn {background: #0065b7; font-size: 0.7rem; font-family: 'GeneralFont', Arial, Verdana; padding: 0.5rem 0.8rem; border: 1px solid #0065b7; display: block;} a.io-subscribe-btn:hover {background: #36b063; text-decoration: none; border: 1px solid #36b063;} @media only screen and (min-width: 1600px) { #io-sfw {margin-top: 2.5rem;} #io-left-ct .wysiwyg-content {max-height: 15rem;} } @media only screen and (max-width: 1200px) { #io-sfw {margin-top: 1.5rem;} #io-left-ct {width: 55%;} #io-left-ct .wysiwyg-content {max-height: 15rem;} #io-right-ct {width: 40%;} #io-list-ct, #io-subscribe-ct {float: none; width: 100%; margin: 0;} #io-list-ct {margin-bottom: 1rem;} #io-subscribe-ct {margin-top: 0rem; display: none;} #io-subscribe-ct-resp {display: block; margin-top: 0.5rem; text-align: center;} } @media only screen and (max-width: 768px) { #io-list-ct-resp {display: block; margin-bottom: 1rem;} #io-list-ct-resp .slick-prev {content: ''; width: 1.5rem; height: 1.5rem; background: url(../images/icon/arrow-prev.png) no-repeat center !important; top: 50%; transform: translateY(-50%); left: -1rem; opacity: 1.0; background-size: 1.5rem 1.5rem !important; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #io-list-ct-resp .slick-next {content: ''; width: 1.5rem; height: 1.5rem; background: url(../images/icon/arrow-next.png) no-repeat center !important; top: 50%; transform: translateY(-50%); right: -1rem; opacity: 1.0; background-size: 1.5rem 1.5rem !important; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;} #io-list-ct-resp .slick-prev:hover {background: url(../images/icon/arrow-prev-hover.png) no-repeat center !important; background-size: 1.5rem 1.5rem !important;} #io-list-ct-resp .slick-next:hover {background: url(../images/icon/arrow-next-hover.png) no-repeat center !important; background-size: 1.5rem 1.5rem !important;} #io-list-ct-resp .slick-prev.slick-disabled, #io-list-ct-resp .slick-prev.slick-disabled:hover, #io-list-ct-resp .slick-prev.slick-disabled:focus {opacity: 0.2;} #io-list-ct-resp .slick-next.slick-disabled, #io-list-ct-resp .slick-next.slick-disabled:hover, #io-list-ct-resp .slick-next.slick-disabled:focus {opacity: 0.2;} #io-left-ct, #io-right-ct {float: none; width: 100%; margin: 0;} #io-left-ct .wysiwyg-content {max-height: auto;} #io-list-ct {display: none;} #io-subscribe-ct {float: none; margin-top: 1rem; width: 100%; display: block;} #io-subscribe-ct-resp {display: none;} } @media only screen and (max-width: 500px) { #io-list-ct-resp .slick-prev {left: -0.5rem;} #io-list-ct-resp .slick-next {right: -0.5rem;} } /* /INFINITY ONLINE */ /* MY ACCOUNT */ #my-account-sfw {margin-top: 3rem;} #my-account-sfw .inner {background: rgba(255, 255, 255, 0.8); padding: 3rem 2rem; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;} #myacc-qrcode-ct {float: left; width: 35%; box-sizing: border-box; position: relative;} #myacc-qrcode-ct img {display: block; margin: 0 auto; max-width: 100%;} #myacc-cert-ct {text-align: center; margin-top: 1rem;} a#cert-dl-btn {display: inline-block; font-size: 0.9rem; line-height: 1.2rem; padding-left: 1.5rem; background: url(../images/icon/dl.png) no-repeat left center; background-size: 1rem auto; color: #00bff3;} #myacc-form-ct {float: right; width: 60%; padding-top: 1.5rem; position: relative;} #myacc-form-ct.viewed {padding-top: 1rem;} #change-href-ct {position: absolute; top: -2rem; right: 0; text-align: right;} #change-href-ct a {display: block; color: #00bff3; cursor: pointer; font-size: 0.7rem; line-height: 1.0rem;} #change-myacc-ct {display: block;} .gen-form.my-account-form .gen-form-row {margin-bottom: 0.3rem;} .gen-form.my-account-form .gfr-label, .gen-form.my-account-form .gfr-sep {font-size: 0.8rem; line-height: 1.0rem;} .gen-form.my-account-form .gfr-label {font-family: 'BoldFont', Arial, Verdana;} .gen-form.my-account-form .gfr-form p {font-size: 0.8rem; line-height: 1.0rem; padding-left: 0.6rem; padding-right: 0;} .gen-form.my-account-form input[type="text"] {font-size: 0.8rem;} .gen-form.my-account-form input[type="text"].locked {border: 1px solid transparent; background: none; font-size: 0.8rem; height: 1.0rem;} .gen-form.my-account-form input[type="text"].locked:focus, .gen-form.my-account-form input[type="text"].locked:hover { box-shadow: none; box-shadow: none; box-shadow: none; box-shadow: none;} .gen-form.my-account-form input[type="submit"] {width: auto; min-width: 10rem;} #change-mypass-ct {display: none;} #my-account-form-submit-ct {margin-top: 0.75rem; display: none;} #my-password-form-submit-ct {margin-top: 0.75rem;} #my-acc-take-survey-ct {margin-top: 0.3rem; text-align: center;} #my-acc-take-survey-ct a.nav-btn-type-2 { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #my-acc-take-survey-ct a.nav-btn-type-2 p {font-size: 0.7rem; line-height: 0.9rem;} @media only screen and (min-width: 1600px) { #my-account-sfw {margin-top: 2.5rem;} #myacc-qrcode-ct {width: 30%;} #myacc-form-ct {width: 65%;} .gen-form.my-account-form .gfr-label, .gen-form.my-account-form .gfr-sep {font-size: 0.9rem; line-height: 1.1rem;} .gen-form.my-account-form .gfr-form p {font-size: 0.9rem; line-height: 1.1rem;} .gen-form.my-account-form input[type="text"], .gen-form.my-account-form input[type="text"].locked {font-size: 0.9rem; line-height: 1.1rem;} } @media only screen and (max-width: 1300px) { a#cert-dl-btn {font-size: 0.7rem; line-height: 0.9rem; padding-left: 1.2rem; background-size: 0.9rem auto;} .gen-form.my-account-form .gfr-label, .gen-form.my-account-form .gfr-sep {font-size: 0.8rem; line-height: 1.0rem;} .gen-form.my-account-form input[type="text"].locked {font-size: 0.8rem; height: 1.0rem;} #myacc-form-ct {padding-top: 1rem;} } @media only screen and (max-width: 1300px) { #my-account-sfw {margin-top: 1.5rem;} } @media only screen and (max-width: 1024px) { #my-account-sfw {margin-top: 1.5rem;} #my-account-sfw .wrap {width: 75%;} #myacc-qrcode-ct {float: none; width: 100%; margin: 0; padding-bottom: 0.7rem; margin-bottom: 0.7rem; border-bottom: 1px dotted #bfbfbf;} #myacc-qrcode-ct img {max-width: 350px;} #myacc-form-ct {float: none; width: 100%; margin: 0; padding: 0;} #myacc-form-ct.viewed {padding: 0;} #change-href-ct {position: relative; top: auto; right: auto; margin-bottom: 1rem;} #my-account-form-submit-ct, #my-password-form-submit-ct {text-align: center;} } @media only screen and (max-width: 768px) { #my-account-sfw .inner {padding: 1.2rem;} #my-account-sfw .wrap {width: 90%;} } @media only screen and (max-width: 500px) { #myacc-qrcode-ct img {max-width: 60%;} a#cert-dl-btn , #change-href-ct a {font-size: 0.6rem; line-height: 0.9rem;} /* .gen-form.my-account-form .gfr-label, .gen-form.my-account-form .gfr-sep {font-size: 0.6rem; line-height: 0.8rem;} .gen-form.my-account-form input[type="text"] {font-size: 0.6rem; height: 1.5rem;} .gen-form.my-account-form input[type="text"].locked {font-size: 0.6rem; height: 0.8rem;} */ .gen-form.my-account-form .gen-form-row {margin-bottom: 1.0rem;} .gen-form.my-account-form .gfr-label {float: none; width: 100%; text-align: center; font-size: 0.7rem; line-height: 0.9rem;} .gen-form.my-account-form .gfr-label.upc {font-size: 0.8rem; line-height: 1.0rem; text-transform: uppercase;} .gen-form.my-account-form .gfr-sep {display: none;} .gen-form.my-account-form .gfr-form {float: none; width: 100%; text-align: center; margin-top: 0.1rem;} .gen-form.my-account-form input[type="text"], .gen-form.my-account-form input[type="password"] {font-size: 0.65rem; height: 1.5rem; text-align: center;} .gen-form.my-account-form input[type="text"].locked {font-size: 0.65rem; line-height: 0.85rem;} .gen-form.my-account-form .gfr-form p {font-size: 0.65rem; line-height: 0.85rem; padding-right: 0.6rem;} } /* /MY ACCOUNT */ /* NOT FOUND */ #not-found-sfw {margin-top: 3rem; text-align: center;} #not-found-sfw h2 {font-family: 'TitleBoldFont', Arial, Verdana; font-size: 3rem; line-height: 3.2rem; margin-bottom: 1rem;} #not-found-sfw p, #not-found-sfw p a {font-size: 0.7rem; line-height: 1.0rem;} #not-found-sfw p a {font-family: 'BoldFont', Arial, Verdana; color: #005bac;} #not-found-sfw p a:hover {color: #36b063; text-decoration: none;} /* /NOT FOUND */ /* ADDITIONAL */ #fp-waiting {background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; z-index: 9000; display: none;} #fp-waiting img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} a#start-popup-notif {display: none;} /* /ADDITIONAL */ /* FOOTER */ #footer {margin-top: 3rem;} /* /FOOTER */ /* GROUP CHAT */ .snackbar {display: none !important;} /* /GROUP CHAT */ /* CUSTOM POPUP */ .amt-custom-popup {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 5000; display: none;} .amt-custom-popup .outer-ct {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);} .amt-custom-popup .gen-popup-ct {max-height: 80vh; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;} .amt-custom-popup .gen-popup-ct::-webkit-scrollbar {display: none;} .gen-popup-ct a.gen-btn { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0;} .gen-popup-ct a.gen-btn.disabled {background: #cfcfcf; border: 1px solid #cfcfcf; cursor: text;} .gen-popup-ct p.question {font-size: 0.7rem; line-height: 1.0rem; margin-bottom: 0.5rem;} .amt-popup-close-btn {position: fixed; top: -0.5rem; right: -0.5rem; width: 1.5rem; height: 1.5rem; background: url(../images/icon/close-circle.png) no-repeat center; background-size: 1.5rem 1.5rem; cursor: pointer; z-index: 1500;} #event-vote-popup {} #intl-webinar-attend-popup {text-align: center;} /* / CUSTOM POPUP */