.footer { background: #CED8E2; padding: 2rem; color: #606060; font-size: 0.929em; } .footer .brand-logo { max-width: 180px; max-height: 180px; width: auto; } @media (min-width:993px) { .footer .contact-col { max-width: 300px; } } @media (max-width:576px) { .footer { padding: 2rem 0 60px; } } .footer .footer-text { margin-top: 1.6rem; } .footer .footer-text>li { margin-bottom: 12px; position: relative; } .footer .footer-text>li>* { line-height: 20px; } .footer .footer-text .contact-icon { margin-right: 10px; } .footer .copyright { font-size: 0.875rem; color: #AAA; border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 0.5rem; } .footer .service h3 { font-size: 1.2rem; font-weight: bold; text-align: left; color: #3E546C; /*padding-bottom: 0.5rem; border-bottom: solid 1px rgba(255, 255, 255, 0.7);*/ width: 100%; } /* .footer .service h3::before { content: ''; position: absolute; width: 20px; height: 4px; background-color: #D0A600; bottom: -2px; }*/ .footer .service li { padding: 0 0 0.6rem 0; font-size: 1rem; line-height: 110%; display: block; } .footer a { color: #606060; } .footer .service .list-unstyled a { display: inline-block; color: #606060; } .footer .service .list-unstyled a:hover { color: #D0A600; } .footer-pall .rd-parallax-layer[data-type=media]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(50, 50, 50, 0.5); } .footer-pall .pg-title { margin-bottom: 3rem; } .footer-pall-html .social-icon-img{ max-width:3rem; } .footer-pall-html .social-icon { display: inline-block; width: 3rem; height: 3rem; border-radius: 50%; } .footer-pall-html .social-icon::before { font-size: 2rem; color: #FFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }@media (max-width:544px) { /*html,body{ font-size: 14px; }*/ } .pswp{ z-index:3500; } img { max-width: 100%; height: auto; } .nav-link { cursor: pointer; } .rounded-circle { border-radius: 50% !important; } .btn { border-radius: 0; padding-right: 3.75rem; box-sizing: border-box; overflow: hidden; transition: all .5s; } .btn:before { content: ''; position: absolute; left: -50px; top: 50%; margin-top: -0.5px; width: 35px; height: 1px; background: #fff; transition: all .5s; } .btn:after { content: ''; position: absolute; right: 14px; top: 50%; margin-top: -0.5px; width: 35px; height: 1px; background: #c1c1c1; transition: all .5s; } .btn:hover { padding-left: 3.75rem; padding-right: 0.75rem; transition: all .5s; } .btn:hover:before { left: 0px; transition-delay: .2s; background: #c1c1c1 } .btn:hover:after { right: -50px; width: 0px; } .btn-default { background-color: #bd2130; } .flex-card-header { display: block; } .empty-hidden:empty { display: none; } .indent-cont { display: block; max-width: 830px; margin-left: auto; margin-right: auto; } .bg-top-shadow { box-shadow: inset 0px 2px 3px rgba(20%, 20%, 40%, 0.2); } .text-box { padding: 0.5rem 1rem; border: 1px solid #516f77; color: #516f77; display: inline-block; left: 50%; transform: translateX(-50%); margin: 1rem auto 3rem; } .text-box:after { content: ''; position: absolute; height: 2rem; width: 0; border-right: 1px solid #516f77; top: calc(100% + 1rem); left: 50%; } #pagearea .break-inside-avoid { outline: 1px dotted #CCC; background-color: rgba(0, 255, 100, 0.1); } .break-inside-avoid { display: grid; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .dotted-btm { border-bottom: 2px dotted #DDD; } .step-wrap { counter-reset: my-sub-counter; } .step-row { counter-reset: my-sec-counter; } .step-block { padding: 1.25rem; height: 100%; } .step-block::before { counter-increment: my-sec-counter; content: counter(my-sec-counter); position: absolute; bottom: 50px; right: 5px; color: #E8E8E8; font-family: Arial; font-style: italic; font-size: 8em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } .step-block::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; border-bottom: 1px dotted #CCC; } .step-topic::before { content: '步驟'counter(my-sub-counter); counter-increment: my-sub-counter; position: relative; display: inline-block; font-family: 'Allura', '微軟正黑體'; font-size: 1rem; } .en .step-topic::before { content: 'Step'counter(my-sub-counter); } .step-topic>span.fa { font-size: 18px; margin-left: 0.25rem; margin-right: 0.25rem; color: #990000; } .step-topic>span { font-size: 1rem; } .step-text { color: #999; } .entre-row { counter-reset: block-counter; } .entre-row .card-body { text-align: center; } .entre-row .card-title::before { content: 'STEP 'counter(block-counter); counter-increment: block-counter; position: relative; display: inline-block; } .slick-dots { position: absolute; bottom: 30px; } .slick-arrow { z-index: 10; } .products-carousel { max-width: 420px; margin: auto; } .slider-syn { width: 100%; } .slider-syn .items-view { margin-bottom: 1rem; } .slider-syn .slider-nav .slick-slide { margin: 0.5rem; } .slider-syn .slider-nav .slick-list { margin: -0.5rem; } .slider-syn .slider-nav .items-block { cursor: pointer; border: dotted 1px #CCC; } .slick-arrow { cursor: pointer; width: 40px; height: 40px; } .slick-prev { left: -50px; } .slick-next { right: -50px; } .slick-prev::before { content: ''; display: block; width: 40px; height: 40px; background-image: url(/images/icons/arrow-bl.png); background-size: cover; } .slick-next:before { content: ''; display: block; width: 40px; height: 40px; background-image: url(/images/icons/arrow-br.png); background-size: cover; } .slider-syn .slider-nav .slick-slide.slick-current .items-block { border: solid 1px #000; } .slider-syn .items-view { margin-bottom: 1rem; } .items-view .items-block, .items-nav .items-block { background-size: contain; background-position: center center; background-repeat: no-repeat; padding-bottom: 100%; } .tab-group .nav-tabs .nav-link { margin-left: 0; margin-right: 2px; } .tab-group .tab-pane { padding: 1rem 0; } .tab-group.qatab-group .nav-tabs .nav-link { padding: 0.5rem; width: 100px; text-align: center; border: 0; } #gotop { display: none; position: fixed; right: 20px; bottom: 30px; width: 40px; height: 40px; line-height: 32px; text-align: center; font-size: 25px; background: rgba(0, 0, 0, .36); color: #FAFCFD; cursor: pointer; z-index: 80 } #gotop>span.fa { top: -5px; } #gotop>.txt { position: absolute; width: 100%; line-height: normal; font-size: 12px; bottom: 5px; text-align: center } .wdg-contact-wrap { position: absolute; left: 0; top: 100px; padding: 0.25rem; margin-top: 1rem; background-color: rgba(0, 0, 0, 0.4); color: #FFF; font-size: 12px; transition-duration: .6s; transition-timing-function: ease-out; z-index: 3000; } .wdg-contact-wrap.hide { left: -55px; transition-duration: .6s; transition-timing-function: ease-out; } .wdg-contact-wrap .wdg-switch { display: block; left: 0; line-height: 32px; text-align: center; transition-duration: .6s; font-family: FontAwesome; } .wdg-contact-wrap .wdg-switch::before { content: '\f060'; } .wdg-contact-wrap.hide .wdg-switch { width: 28px; line-height: 60px; left: 100%; background-color: rgba(0, 0, 0, 0.4); transition-duration: .6s; transition-delay: .3s; } .wdg-contact-wrap.hide .wdg-switch::before { content: '\f061'; } .wdg-contact-wrap .wdg-link:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .wdg-contact-wrap .wdg-link { display: block; } .wdg-contact-wrap .wdg-icon { display: block; width: 45px; height: 45px; text-align: center; margin: auto; } .wdg-contact-wrap .wdg-icon:before { content: ''; display: inline-block; height: 100%; width: 0; vertical-align: middle; } .wdg-contact-wrap .wdg-icon>img { max-width: 32px; max-height: 32px; display: inline-block; vertical-align: middle; } .invalid-feedback { font-size: 14px; color: #FF3F00; position: absolute; right: 14px; bottom: 0; pointer-events: none; } .invalid-feedback .list-unstyled { margin: 0; } .has-error .form-input { box-shadow: 0 0 1px 1px #FF3F00 inset; } .help-block { font-size: 14px; color: #FF3F00; position: absolute; right: 24px; bottom: 0; pointer-events: none } .help-block .list-unstyled { margin: 0 }@keyframes ani-mouse { 0% { opacity: 1; top: 29%; } 65% { opacity: 1; top: 100%; } 85% { opacity: 0; top: 100%; } 100% { opacity: 0; top: 29%; } } .main-banner-content { position: absolute; margin-top: -100px; left: 50%; transform: translateX(-50%); color: #000; text-shadow:0 0 4px rgba(0,0,0,0.7); } .main-banner-content::after { content: ''; position: absolute; top: 100%; margin-top: 1rem; width: 150px; height: 50px; left: 50%; margin-left: -75px; background-image: url(/images/icons/scrolldown-w.png); background-size: contain; background-position: center; background-repeat: no-repeat; animation: ani-mouse 1.5s linear infinite; } @media(max-width:768px) { .main-banner-content { display: none; } } .home-carousel .slick-prev { left: 25px; } .home-carousel .slick-next { right: 25px; } .home-carousel .items-block>img { width: 100%; } .home-carousel .items-block { padding-bottom: 43.5%; } .slick-carousel .video-block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; } .slick-carousel .video-block::before { display: none; } .video-block>iframe { position: absolute; width: 100%; height: 100%; } .video-block>iframe:not([src]) { display: none; } .items-block figure { position: absolute; } *:not(.slick-carousel) .video-block.bsyoutube { padding-bottom: 56.25% !important; } @media (max-width:544px) { .home-carousel .slick-prev { left: 1rem; } .home-carousel .slick-next { right: 1rem; } } .about_section .about-content-left { text-align: right; vertical-align: bottom; } .about_section .text-parallax { background-repeat: no-repeat; margin-top: 10px; display: inline-block; background: url(/images/content/index-09.jpg); background-position: center; } .about_section .text-parallax-content { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 180px; line-height: 1; overflow: hidden; margin-bottom: 0; background-color: #FFF; color: #c5a47e; mix-blend-mode: hard-light; } .about_section .about-content-right { vertical-align: bottom; text-align: left; font-size: 26px; font-weight: bold; line-height: 36px; padding: 0 0 20px 20px; } .about_section .about-content-right .txt-1st { color: #dc3545; } .about_section .table-xl { display: table; width: 100%; table-layout: fixed; margin-top: -2rem; } .rd-parallax.index-parallax { color: #FFF; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8); } .rd-parallax.index-parallax .heading, .about_section .heading { text-align: center; } .rd-parallax.index-parallax h4.title span, .about_section h4.title span { padding: 0 20px; z-index: 1; position: relative; font-weight: normal; font-family: 'Montserrat'; line-height: 100%; font-size: 2rem; } .rd-parallax.index-parallax .container { margin-top: 4rem; margin-bottom: 4rem; } @media (max-width:576px) { .home-rd-parallax .rd-parallax-inner, .home-rd-parallax .rd-parallax-layer { transform: none !important; } } .why-cont>.row>* { padding-bottom: 0.5rem; } .why-cont .card { border: solid 1px #FFF; background-color: rgba(0, 0, 0, 0.60); height: 100%; padding: 1rem; } .why-cont .why-title .glyphicon { color: #dc3545; margin-right: 0.5rem; } .why-cont .why-text { color: rgba(255, 255, 255, 0.5); } .advisory-cont { background-color: rgba(255, 255, 255, 0.5); padding: 3rem; border-radius: 0.5rem; } .home-service-slick .info-wrap { position: absolute; top: auto; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); color: #FFF; text-align: center; } .home-service-slick .info-wrap>* { margin: 0; padding: 0.5rem; }.dr-pg-slick { overflow: hidden; border: solid 1px #FFF; background-color: #FFF; } .dr-pg-slick .slick-next, .items-nav .slick-prev { /*width: 36px; height: 36px; line-height: 36px; text-align: center;*/ } .dr-pg-slick .slick-prev { top: auto; transform: none; bottom: 25px !important; } .dr-pg-slick .slick-next { top: auto; transform: none; bottom: 25px !important; } .dr-pg-slick .slick-prev::before, .dr-pg-slick .slick-next::before { font-size: 36px; font-family: FontAwesome; } .dr-pg-slick .slick-slide.slick-active { transition-duration: .3s; } .dr-pg-slick .slick-list { margin-right: 3px; margin-left: 3px; overflow: hidden; } .dr-pg-slick .item-wrap { padding: 4px 2px 4px 2px; } .dr-pg-slick { max-height: 470px; } .dr-pg-slick .items-block { padding-bottom: 460px; background-position: center center; background-size: cover; } @media(max-width:1200px) { .dr-pg-slick { max-height: 430px; } .dr-pg-slick .items-block { padding-bottom: 420px; } } @media(max-width:768px) { .dr-pg-slick { max-height: 330px; } .dr-pg-slick .items-block { padding-bottom: 320px; } } .doc-info-wrap { position: absolute; text-align: center; bottom: 0; right: 0; left: 0; background-color: rgba(255, 255, 255, 0.3); transform: translateY(100%); padding: 1rem; transition-duration: .4s; } #pagearea .doc-info-wrap { transform: translateY(0); } .dr-pg-slick .slick-slide.trigger .doc-info-wrap { background-color: rgba(255, 255, 255, 0.9); transform: translateY(0); transition-duration: .3s; transition-delay: .3s; } .doc-info-wrap>.name { font-weight: 700; font-size: 1.25rem; color: #5f4e78; } .doc-info-wrap>.slogen { word-break: break-all; white-space: pre-wrap; color: #333; line-height: normal; } .doc-info-wrap>.slogen * { animation-delay: .3s; animation-duration: 0.3s; } @media(max-width:576px) { .doc-info-wrap>.slogen { font-size: 14px; } }.banner-section .banner-inner-bg { background-size: cover; background-repeat: no-repeat; background-position: center; padding-bottom: 27%; width: 100% !important; } .banner-section .banner-inner-bg>div { top: auto; bottom: 6vw; transform: none; } .banner-section .topic-wrap { left: 6vw; } .banner-section .topic-wrap h3 { font-size: 48px; font-weight: bold; text-shadow: 0.3vw 0.3vw 0.5vw rgba(0, 0, 0, 0.8); } .pg-title { font-size: 2.8rem; color: #E4D2C8; font-weight: 700; } .pg-title>h6 { display: inline-block; font-family: Jadyn Maria; font-size: 36px; margin-top: -28px; top: -4px; left: 7rem; color: #FFF; } @media(max-width:992px) { .pg-title { font-size: 2rem; } .banner-section .banner-inner-bg { padding-bottom: 40%; } .banner-section .topic-wrap h3 { font-size: 40px; } } @media(max-width:768px) { .pg-title { font-size: 1.75rem; } } @media(max-width:576px) { .pg-title>h6 { left: 4rem; } .banner-section .topic-wrap h3 { font-size: 34px; } } @media(max-width:464px) { .banner-section .topic-wrap h3 { font-size: 30px; } } .slick-slide { outline: none !important; } .page-list-row .item-info-wrap { padding-top: 0.5rem; } .page-list-row .item-info-wrap>.name { display: inline-block; color: #666; margin-bottom: 0; } .page-list-row .item-wrap { padding: 8px; border: 1px solid #EEE; border-radius: 4px; height: 100%; } .page-list-row .description { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; overflow: hidden; color: #FFF; } .page-list-row .description .ani-list { transform: translateX(50%); opacity: 0; transition-duration: .4s; } .page-list-row .box:hover .ani-list { transform: translateX(0); opacity: 1; transition-duration: .4s; } .page-list-row .box .ani-list:nth-child(1) { transition-delay: .4s; } .page-list-row .box .ani-list:nth-child(2) { transition-delay: 0.6s; } .page-list-row .box .ani-list:nth-child(3) { transition-delay: 0.8s; } .page-list-row .box .ani-list:nth-child(4) { transition-delay: 1.0s; } .page-list-row .box .ani-list:nth-child(5) { transition-delay: 1.2s; } .page-list-row .box .ani-list:nth-child(6) { transition-delay: 1.4s; } .page-list-row .box .ani-list:nth-child(7) { transition-delay: 1.6s; } .page-list-row .cate { color: #FFF; } .about-img { border: 6px #FFF solid; border-radius: 80px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .brand-sect { background-size: 100% auto; background-repeat: no-repeat; } .brand-sect::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url(/images/content/about_bg_full.jpg); z-index: -1; } .brand-block { margin-top: 15%; margin-left: 6%; width: 60%; } @media (max-width:992px) { .brand-block { width: 700px; } } @media (max-width:768px) { .brand-block { width: auto; margin-left: auto; } } .content-sys { margin: 2.5rem auto; } .idx-row { counter-reset: block-counter; } .idx-col .card-body { margin: 0; padding: 0; } .idx-col .card-index { flex: 0 0 auto; width: auto; max-width: none; margin: 0; padding-right: 0.5rem; } .idx-col .card-index::before { content: counter(block-counter); counter-increment: block-counter; font: 8rem 'arial'; font-style: italic; color: #DDD; line-height: 8rem; } .idx-col .card-text { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; padding-top: 1rem; color: #666; } .numberlist ol { counter-reset: li; list-style: none; margin-bottom: 1rem; text-align: left; padding-left: 1rem; } .numberlist li { position: relative; display: block; padding: 1em 1em 1em 3em; *padding: .4em; margin: .5em 0; background: #fff; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; } .numberlist li::before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 3em; width: 3em; line-height: 2.5em; border: .3em solid #fff; text-align: center; font-weight: 700; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; color: #fff; } .contacts-block>a { text-decoration: none; } .contacts-block>a>div { border: 1px solid #CCC; border-radius: 4px; } .contacts-block>a>div:hover { background-color: #e5feff; } .contacts-block h5 { margin-top: 1rem; color: #da251d; text-decoration: none; } .contacts-block p { margin-top: 1rem; color: #666; text-decoration: none; } .prev-next-wrap>.row { background-color: #e2e2e2; margin: 0; border-radius: 0.25rem; } .prev-next-wrap a { color: #dc3545; } .prev-next-wrap .prev-pg:hover, .prev-next-wrap .next-pg:hover { background-color: #efefef; } .prev-next-wrap .prev-pg { padding: 0 1rem 0 40px; } .prev-next-wrap .next-pg { padding: 0 40px 0 1rem; } .prev-next-wrap .prev-pg, .prev-next-wrap .next-pg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prev-next-wrap .prev-pg::before { content: '\f104'; font-family: FontAwesome; font-size: 24px; position: absolute; left: 1rem; top: 15px; } .prev-next-wrap .next-pg::before { content: '\f105'; font-family: FontAwesome; font-size: 24px; position: absolute; left: auto; right: 1rem; top: 15px; } .prev-next-divider { position: absolute; top: 10px; bottom: 10px; width: 0; left: 50%; border-left: 1px solid #FFF; z-index: 1; } @media (max-width:464px) { .prev-next-divider { top: 50%; bottom: auto; width: auto; left: 10px; right: 10px; border-top: 1px solid #FFF; } } .image-grid .image-wrap { overflow: hidden; } .image-grid .image-wrap figure { position: absolute; bottom: 10px; left: 10px; right: 10px; margin: 0; } .image-grid .image-wrap>a { transform: scale(1); transition-duration: .6s; } .image-grid .image-wrap>a:hover { transform: scale(1.2); transition-duration: .6s; }.reason-image { padding-bottom: 100%; border-radius: 50%; } .reason-row .reason-list-img { width: 25%; padding: 0 1rem 1rem 1rem; } .reason-row .reason-list-topic, .reason-row .reason-list-content { width: 75%; padding: 0 1rem 1rem 1rem; } .reason-row { margin-bottom: 1.5rem; } .reason-sect:nth-child(odd) .reason-list-topic, .reason-sect:nth-child(odd) .reason-list-content { float: left; } .reason-sect:nth-child(odd) .reason-list-img { float: right; } .reason-sect:nth-child(even) .reason-list-topic, .reason-sect:nth-child(even) .reason-list-content { float: right; } .reason-sect:nth-child(even) .reason-list-img { float: left; } .reason-cont { counter-reset: my-sub-counter; } .reason-list-topic::before { content: '#'counter(my-sub-counter); counter-increment: my-sub-counter; position: relative; display: inline-block; font-family: 'Allura', '微軟正黑體'; font-size: 2.2rem; font-weight: bold; color: rgb(235, 206, 202); } .reason-list-topic>.topic-en { font-family: Jadyn Maria; margin-top: 1.2rem; margin-bottom: 0; } .reason-cont.stylist .reason-list-topic::before { display: none; } .reason-cont.stylist .reason-list-topic>.topic-en { font-family: Courgette, 微軟正黑體; } .reason-cont.stylist .reason-row { background-color: rgba(235, 206, 202, 0.5); padding: 1.5rem; } .reason-cont.stylist .reason-list-topic>.topic-en {} @media (max-width: 768px) { .reason-row .reason-list-topic { width: calc(100% - 136px); } .reason-sect:nth-child(odd) .reason-list-topic { padding-right: 0; } .reason-sect:nth-child(even) .reason-list-topic { padding-left: 0; } .reason-sect .reason-list-img { width: 136px; } .reason-row .reason-list-content { width: 100%; } .reason-cont.stylist .reason-row { padding: 1rem 0; } } .items-image { padding-bottom: 100%; border-radius: 50%; } .items-row .items-list-img { width: 20%; padding: 0 1rem 1rem 1rem; } .items-row .items-mid { float: left; width: 40%; padding: 0 1rem 1rem 1rem; } .items-row .items-tail { float: left; width: 40%; padding: 50px 1rem 1rem 1rem; } .items-row { margin-bottom: 1.5rem; } .items-sect .items-list-img { float: left; } .items-cont { counter-reset: my-list-counter; } .items-list-topic::before { content: '#'counter(my-list-counter); counter-increment: my-list-counter; position: relative; display: inline-block; font-family: 'Allura', '微軟正黑體'; font-size: 2.2rem; font-weight: bold; color: rgb(235, 206, 202); } .items-list-topic>.topic-en { font-family: Jadyn Maria; margin-top: 1.2rem; margin-bottom: 0; } @media (max-width:768px) { .items-row .items-list-img { position: absolute; float: none; left: auto; right: 1rem; width: 100px; padding: 0; } .items-row .items-mid { width: 100%; } .items-row .items-list-topic { width: calc(100% - 100px); } .items-row .items-tail { width: 100%; padding-top: 0rem; } } .team-slick{ overflow:hidden; max-height:200px; } .team-slick.slick-initialized{ max-height:none; }aside { margin-bottom: 1rem; } aside .categories-block { width: 250px; background-color: #FFF; width: 270px; } .col-aside { flex: 0 0 300px; max-width: 300px; } .col-content { flex: 0 0 calc(100% - 300px); max-width: calc(100% - 300px); } @media (max-width:992px) { .col-aside, .col-content { flex: 0 0 100%; max-width: 100%; } .aside-top { display: none; } aside .categories-block { background-color: transparent; width: auto; } aside .cat-button { width: 100%; overflow: hidden; text-overflow: ellipsis; } aside #cat-wrap { width: 100%; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); z-index: 50; } aside #cat-wrap>.cat-item { border-radius: 0; margin-bottom: 0; border-top: 0; } } .categories-block .cat-caret { position: absolute; width: 32px; height: 32px; top: 4px; right: 0; text-align: center; transition-duration: .3s; transform: rotate(0deg); transform-origin: center center; line-height: 32px; } .categories-block .cat-item { padding: 0; } .categories-block .cat-caret:before { display: block; font-family: FontAwesome; content: '\f107'; color: #999; font-size: 20px; } .cat-caret.trigger { transition-duration: .3s; transform: rotate(-180deg); } .cat-wrap>.cat-item { border: 1px solid #DDD; border-radius: 0.25rem; margin-bottom: 0.15rem; background-color: rgba(0, 0, 0, 0.03); } .cat-wrap>.cat-item>.cat-link { width: calc(100% - 35px); font-size: 1.2rem; text-decoration: none; padding: 8px 12px; } .cat-menu { border-radius: 0 0 0.25rem 0.25rem; } .cat-menu>.cat-item { border-top: 1px dotted #CCC; } .cat-menu>.cat-item>.cat-link { white-space: pre-wrap; word-break: break-all; padding: 8px 0 8px 24px; text-decoration: none; transition-duration: .6s; } .cat-menu>.cat-item>.cat-link:hover { background-color: #fafafa; color: #dc3545; padding-left: 3rem; transition-duration: .6s; } .aside-top { margin-bottom: 1.5rem; } .aside-top span { position: absolute; z-index: 99; color: #FFF; font-weight: bold; font-size: 1.2rem; left: 15px; top: 6px; width: 90%; text-align: center; } aside ul { padding: 0; } aside ul li { list-style: none; } aside ul li::after { display: block; clear: both; content: ''; } aside .collapse ul li::before { border: none; } aside .collapse ul li { border-bottom: 1px dotted #CCC; margin-left: 2rem; font-size: 0.9rem; } aside ul a { color: #686868; display: inline-block; width: 100%; cursor: pointer; } aside ul li.active::before { border-left: solid 1px #8d4999; } aside ul li.active>a { color: #c82333; } aside ul li.active>a:hover { color: #dc3545; }.title_heading { text-align: center; margin-bottom: 1.5rem; } .title_heading h4.title::after { background: url(/images/sprites/bg_line.png) repeat; content: ''; height: 5px; margin-left: 10px; position: absolute; bottom: 0px; width: 99%; display: block; } .title_heading h4.title { overflow: hidden; font-size: 2rem; } .title_heading h4 { margin: 0; padding: 0; position: relative; } .title_heading h4.title span { background: #FFF; padding: 0 20px; z-index: 1; position: relative; font-weight: normal; line-height: 117%; } .backgray .title_heading h4.title span { background: #f3f5f6; } .area-title.backgray h4.title { font-size: 2rem; } .about-service { max-width: 800px; margin: 2rem auto 0; } .about-service .icon-col { position: relative; padding-bottom: 1.2rem } .about-service .icon-col .popover { position: absolute; top: 100%; left: 0px; will-change: transform; opacity: 0; transition-duration: .5s; font-size: 0.8rem; pointer-events: none; } .about-service .popover-body { color: rgba(100, 100, 100, 0.7); } .about-service .icon-col:hover .popover { opacity: 1; top: calc(100% - 1.5rem); } #pagearea .about-service .icon-col .popover { pointer-events: none; } #pagearea .about-service .icon-col:hover .popover { pointer-events: all; } .about-service .icon-col .popover .arrow { left: 50%; } .about-service .one { background-color: #333; padding: 0; border-radius: 80px; max-width: 72px; margin-left: auto; margin-right: auto; } .about-service .one:hover { background-color: #990000; } .about-service h5 { margin-top: 1rem; font-size: 1rem; text-align: center; } .about-img { border: 6px #FFF solid; border-radius: 80px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .about-counsell .fa { font-size: 18px; margin-left: 0.25rem; margin-right: 0.25rem; color: #990000; } .about-counsell .card { background-color: transparent; border: none; border-bottom: 2px #DDD dotted; text-align: left; position: relative; } .about-counsell .card-title { margin-bottom: 1rem; }.inquiry { font-size: 1rem; text-align: left; } .inquiry .container { max-width: 1300px; } @media (max-width: 576px) { .inquiry .container { max-width: 100%; } } .birthdayPicker select { display: inline-block !important; width: auto; } .inquiry .inquiry-bg { background: url(/images/content/inquiry-01.jpg) 100% center; background-size: cover; } .inquiry .inquiry-content { background-color: #FFF; } .inquiry-content form { border: solid 1px #d8d8d8; padding: 1rem 7%; } @media (max-width: 576px) { .inquiry-content form { border: 0; padding: 0; } } .inquiry .col-form-label { color: #FFF; text-align: right; background-color: rgba(119, 119, 119, 1.00); padding: 10px 15px; flex: 0 0 33.333333%; max-width: 33.333333%; } .inquiry .col-form-input { padding: 5px 14px; flex: 0 0 66.666667%; max-width: 66.666667%; align-self: center !important; } .inquiry .form-check-inline>* { vertical-align: middle; } @media (max-width: 464px) { .inquiry .col-form-label { text-align: center; background-color: rgba(119, 119, 119, 1.00); flex: 0 0 calc(100% - 16px); margin: 8px 8px 0 8px; padding: 4px; border-radius: 4px; max-width: 100%; } .inquiry .col-form-input { padding: 4px 8px; margin-top: 4px; flex: 0 0 100%; max-width: 100%; } } .inquiry .form-check-label { line-height: 100%; margin-left: 5px; margin-top: -2px; } .inquiry .form-check-input { margin-left: 5px; } .inquiry .form-check { margin-bottom: 0; } .inquiry legend { font-size: 1rem; } .inquiry .form-row { background-color: #e6e6e6; } .inquiry .form-group { margin-bottom: 2px; } .inquiry .form-control { padding: 0.25rem 0.75rem; vertical-align: middle; } .inquiry textarea.form-control { margin: 4px 0; } .inquiry input.form-control { margin-right: 1rem; } .w-10 { width: 10% !important; } .contactform .form-group.has-error .invalid-feedback { display: block; bottom: 10px; right: 16px; }.article-list-block{ margin-bottom:2rem; } .article-img-block { /*width: 160px; float: left; margin-right: 1rem; padding: 3px;*/ border-radius: 4px; } .article-list-col:last-child hr { display: none; } .article-img { padding-bottom: 62.5%; background-position: center center; background-size: cover; margin-bottom:0.5rem; } .news-title { font-size: 1.8rem; } .list-title { display: block; /*float: right; width: calc(100% - 176px);*/ color: #3E546C; } .search-res-list .list-title, .search-res-list .list-text { width: calc(100% - 116px); } .search-res-list .list-title>a { color: #3E546C; } .search-res-list .list-link { overflow: hidden; text-overflow: ellipsis; display: block; color: #009933; width: calc(100% - 116px); } a.list-title.no-img { width: 100%; } a.badge-news-sort { background: #777; padding: 2px 6px; color: #FFF !important; border-radius: 3px; } a.badge-news-sort:link, a.badge-news-sort:visited { color: #FFF !important; } .list-text { line-height: 1.6rem; color: #585756; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3.2rem; } @media (max-width: 768px) { .article-img-block {} .news-title { font-size: 1.5rem; } a.list-title { float: none; width: 100%; margin-bottom: 0.5rem; } .search-res-list .list-title, .search-res-list .list-link { width: 100%; } .list-text { -webkit-line-clamp: 3; max-height: 4.8rem; } .search-res-list .list-text { -webkit-line-clamp: 4; ; max-height: 6.4rem; } } @media (max-width: 464px) { .article-img-block { width: 120px; } .article-img { padding-bottom: 80%; } } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; list-style: none; } .pagination>li { display: inline-block; } .pagination.blue>li>a, .faq-wrapper .pagination.blue>li>span { background: #e3edf5; } .pagination>li>a, .pagination>li>span { display: inline-block; width: 30px; line-height: 30px; text-align: center; color: #666; margin: 0 4px; border: none; border-radius: 15px; } .pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span { width: auto; padding: 0 22px; border-radius: 15px; font-size: 12px; text-transform: uppercase; } .pagination.blue>li>a, .faq-wrapper .pagination.blue>li>span { background: #CED8E2; } .pagination>li>a.active { color: #FFF; background-color: #999; }.video-card { border: 1px solid #EEE; border-radius: 0.25rem; } .video-card .flex-card-header { border-bottom: 1px solid #EEE; padding: 0.25rem; } .video-card .flex-card-header .bsyoutube { border-radius: 0.25rem; } .video-card .flex-card-body>h5 { font-size:1rem; padding: 0.5rem; margin: 0; } @media (max-width: 464px){ .video-card .flex-card-body>h5 { padding: 0.3rem 0.5rem; } }.class-card { border: 1px solid #EEE; border-radius: 0.25rem; } .class-card .flex-card-header { border-bottom: 1px solid #EEE; padding: 0.25rem; } .class-card .flex-card-header .bsyoutube { border-radius: 0.25rem; } .class-card .flex-card-body a:link h5,.class-card .flex-card-body a:visited h5 { font-size: 1rem; padding: 0.5rem; margin: 0; color:#222; } .class-card .flex-card-body a:hover h5 { color:#dc3545; } @media (max-width: 464px) { .class-card .flex-card-body h5 { padding: 0.3rem 0.5rem; } }.slick-carousel .items-block { opacity: 0; } .slick-carousel .slick-slide .items-block { opacity: 1; } .cert-head-row { align-content: space-around; border-radius: 4px; background-color: rgb(153, 153, 153); } .cert-head-row::after { content: ''; position: absolute; width: 10px; height: 10px; left: 100%; top: 50%; margin-top: -10px; border-left: 10px solid rgb(153, 153, 153); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .cert-head-row>div { text-align: center; padding: 1rem; } .cert-head-row hr { border-top: 1px solid rgba(255, 255, 255, 1); margin: 0.5rem 0; } .cert-head-row>div>span { width: 100%; display: inline-block; font-size: 24px; color: #FFF; } @media(max-width:992px) { .cert-head-row hr { display: none; } .cert-head-row::after { left: 50%; top: 100%; margin-top: 0; margin-left: -10px; border-top: 10px solid rgb(153, 153, 153); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0; } } @media(max-width:768px) { .cert-head-row>div>span { font-size: 20px; line-height: normal; } } @media(max-width:576px) { .cert-head-row>div>span { font-size: 20px; } } @media(max-width:464px) { .cert-head-row>div { text-align: center; padding: 0.5rem 1rem; } } .home-service-slick .items-block { padding-top: 130%; margin: 0.5rem; background-size: cover; background-position: center; } .home-cert-slick .items-block { /*position: absolute; top: 50%; margin: 1rem; background-size: cover; background-position: center; transform: translateY(-75%); */ padding-bottom: 100%; } .home-cert-slick .items-block>img { position: absolute; max-width: 90%; max-height: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%) perspective(600px) rotate3d(0.1, -1, 0.2, 45deg) scale(0.8); transition-duration: 0.5s; } .home-cert-slick .items-block:hover>img { transform: translate(-50%, -50%) perspective(800px) rotateY(0deg); transition-duration: 0.5s; } .home-cert-slick .item-wrap { display: block; } .home-cert-slick .info-wrap { width: 100%; padding: 0 0.5rem; } .home-cert-slick .info-wrap>.name { text-align: center; font-size: 14px; line-height: normal; color: #333; } .home-cert-slick .items-block>img { box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2); } .slick-carousel .slick-prev, .slick-carousel .slick-next { width: 40px; height: 40px; left: 10px; transition-duration: 1s; z-index: 1; background-color: rgba(255, 255, 255, 0.75); border-radius: 50%; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); } .slick-carousel .slick-prev:before, .slick-carousel .slick-next:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%); background-image: url(/images/black-arrow-l.png); background-size: contain; } .slick-carousel .slick-next { left: auto; right: 10px; } .slick-carousel .slick-next:before { background-image: url(/images/black-arrow-r.png); } @media (max-width:576px) { .slick-carousel .slick-prev, .slick-carousel .slick-next { width: 32px; height: 32px; } } /* .home-cert-slick .items-block:before { content: ''; position: absolute; left: 3%; right: 0%; bottom: 0%; top: 3%; transform: skew(2deg, 4deg) rotate(-2deg); background-color: rgba(0, 0, 0, 0.2); box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2); z-index: -1; transition-duration: 0.5s; } .home-cert-slick .items-block:hover { transform: perspective(800px) rotateY(0deg); transition-duration: 0.5s; } .home-cert-slick .items-block:hover:before { left: 0%; right: 0%; bottom: 0%; top: 0%; transform: skew(0deg, 0deg) rotate(0deg); transition-duration: 0.5s; }*/.topic-cont { text-align: center; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .topic-cont>.topic-inner::before, .topic-cont>.topic-inner::after { background: url(/images/bg_line.png) repeat; background-color: rgba(0, 0, 0, 0.05); content: ''; height: 3px; position: absolute; top: calc(50% - 2px); margin-top: 0px; width: 900px; display: block; } .topic-cont>.topic-inner::before { left: auto; right: 100%; } .topic-cont>.topic-inner::after { right: 0; left: 100%; } .topic-cont>.topic-inner { text-align: center; font-size: 2rem; display: inline-block; padding: 0.5rem 1rem 0.8rem; margin-bottom: 0; } .topic-cont h3 { color: #E3D2C8; margin-bottom: 0.25rem; } .topic-cont h6 { color: #666; display: block; margin-top: 0rem; text-align: right; } @media (max-width:576px) { .topic-cont h3 {} .topic-cont h6 {} } .swipe-gallery .pswp-item { cursor: zoom-in; } .spotlight-grid .img-set figure { position: absolute; right: 0; left: 0; bottom: 0px; margin: 0; padding: 0.5rem; background-color: rgba(0, 0, 0, 0.5); color: #FFF; line-height: 1.2rem; } .standard-slick { margin-left: -0.5em; margin-right: -0.5em; } .standard-slick .slick-dots { position: relative; bottom: auto; } .standard-slick .items-block { margin-left: 0.5em; margin-right: 0.5em; } @media(max-width:1200px) { .standard-slick .slick-arrow { width: 32px; height: 32px; background-color: rgba(255, 255, 255, 0.5); } .standard-slick .slick-arrow::before { display: block; width: 24px; height: 24px; margin-left: auto; margin-right: auto; } .standard-slick .slick-prev { left: 10px; } .standard-slick .slick-next { right: 10px; } } .tab-slick .slider-for { background-color: rgb(230, 230, 230); } .tab-slick .slider-for .items-block { padding: 1rem; } .tab-slick .slick-carousel .slick-arrow::before { color: rgb(0, 92, 175); } .tab-slick>.slider-nav { margin: 0 auto; overflow: hidden; } .tab-slick>.slider-nav::before { content: ''; background-color: #C8CACE; position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 8px; z-index: -1; } .tab-slick>.slider-nav .slick-list { width: 100%; margin: auto; overflow: hidden; padding-bottom: 8px; } .tab-slick>.slider-nav .slick-list:nth-child(2) { width: calc(100% - 50px); } .tab-slick>.slider-nav .slick-prev { left: 0; } .tab-slick>.slider-nav .slick-next { right: 0; } .tab-slick>.slider-nav .items-block { text-align: center; height: 46px; font-size: 16px; padding: 0 12px; transition-duration: .3s; cursor: pointer; } .tab-slick>.slider-nav .items-block>span { display: block; text-align: center; top: 50%; transform: translateY(-50%); line-height: 24px; font-size: 20px; color: #005CB9; } @media(max-width:576px) { .tab-slick>.slider-nav .items-block>span { font-size: 16px; line-height: 16px; } } .tab-slick>.slider-nav .slick-current .items-block { transition-duration: .3s; } .tab-slick>.slider-nav .slick-current .items-block::after { content: ''; background-color: #005CB9; position: absolute; left: 0; right: 0; top: 100%; height: 8px; z-index: 1; transition-duration: .3s; } .tab-slick>.slider-for .slick-slide { height: 0; transition-duration: .3s; } .tab-slick>.slider-for .slick-slide.slick-current { height: auto; transition-duration: .3s; } .collapse-item { margin-bottom: 0.25rem; border-bottom: 1px solid #CCC; } .qa-pane { counter-reset: h5; } .collapse-head { padding: 10px 0; line-height: 20px; border-radius: 0.25rem; color: #a85c42; cursor: pointer; } .collapse-head:hover { color: #d1a17a; } .collapse-head::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 16px; top: 10px; font-size: 24px; line-height: 1; transition: .2s; transition-duration: .3s; transform: rotate(0deg); } .collapse-head.trigger::after { content: '\f107'; transition: .2s; transition-duration: .3s; transform: rotate(-180deg); } .collapse-head .collapse-topic { max-width: calc(100% - 35px); padding-left: 2.8rem; outline: none; margin: 0; text-align: left; } /* .collapse-head .collapse-topic::before { content: counter(h5) '. '; counter-increment: h5; position: absolute; left: 0; width: 2.4rem; text-align: right; }*/ .qatab-group .nav-tabs { border: 0; margin-bottom: 2rem; } .qatab-group .collapse-head .collapse-topic { max-width: calc(100% - 35px - 2.8rem); left: 2.8rem; padding: 0; outline: none; margin: 0; text-align: left; } .qatab-group .qa-topic-icon { position: absolute; top: 0.5rem; left: 0.5rem; width: 1.5rem; height: 1.5rem; text-align: right; background-size: contain; background-repeat: no-repeat; background-position: center; } .qatab-group .qaicon-nav .qaicon { transform: scale(0.9); opacity: 0.5; transition-duration: 0.4s; } .qatab-group .qaicon-nav.active .qaicon { transform: scale(1); opacity: 1; transition-duration: 0.4s; } @media (max-width:576px) { .collapse-head .collapse-topic { font-size: 1rem; padding-left: 2.4rem; } .collapse-head .collapse-topic::before { font-size: 1.35rem; width: 2rem; } } .collapse-content { border: 0; } .collapse-text { margin: 20px; border: 0; padding-left: 15px; color: #686868; line-height: 1.8; } .collapse-text::before { height: 100%; width: 1px; content: ''; left: -6px; border-left: 1px solid #DDD; position: absolute; } .course-legend .topic-cell { float: right; text-align: right; width: 58.33333%; padding: 0 1rem; } .course-legend .img-cell { float: left; width: 41.66667%; padding: 0 1rem; } .course-legend .desc-cell { float: right; width: 58.33333%; padding: 1rem 1rem 0 1rem; } .course-legend .desc-wrap { padding: 1rem; background-color: #ccc; background-image: url(/images/banner/paper-bg.jpg?2); } .course-legend .course-desc { max-height: 336px; overflow: auto; } @media (max-width:768px) { .course-legend .topic-cell { float: none; width: 100%; text-align: center; } .course-legend .img-cell { float: none; width: 220px; margin: auto; } .course-legend .desc-cell { float: none; width: 100%; } }.scroll-tb-wrap { overflow: auto; max-height: 700px; padding-left: 0; border-left: 1px solid #999 !important; border-top: 1px solid #999 !important; } .scroll-tb-wrap > table{ width:100%; min-width:700px; } .scroll-tb-wrap tbody>tr>td:first-child, .scroll-tb-wrap th:first-child { position: sticky; left: 0; z-index: 100; } .scroll-tb-wrap tbody>tr>td[rowspan]:first-child { z-index: 110; } .scroll-tb-wrap thead tr th, .scroll-tb-wrap tbody>tr:first-child>td { position: sticky; top: 0; z-index: 120 !important; } .scroll-tb-wrap tbody>tr:first-child>td:first-child { z-index: 130 !important; } .scroll-tb-wrap th:first-child { z-index: 2; } .scroll-tb-wrap table { /*overflow: auto; -ms-overflow-style: scrollbar;*/ } .scroll-tb-wrap table th, .scroll-tb-wrap table td { vertical-align: middle !important; border-right: 1px solid #999 !important; border-bottom: 1px solid #999 !important; } .scroll-tb-wrap table th { } .scroll-tb-wrap table th:first-child { } .scroll-tb-wrap table thead th:first-child { z-index: 100; } @media (max-width:576px) { .scroll-tb-wrap table th:first-child { min-width: auto; } } .scroll-tb-wrap table td { } .scroll-tb-wrap .device .flex-card-header .bsbgset { height: 300px; } @media (max-width: 576px) { .device .flex-card-header .bsbgset { height: 200px; } } .device .fn-sel .flex-card:hover .btn-dark { color: #8ec31d; } .device .fn-sel:nth-child(1) .flex-card .flex-card-header .bsbgset { background-image: url('/files/device01.png'); } .device .fn-sel:nth-child(1) .flex-card:hover .flex-card-header .bsbgset { background-image: url('/files/device01-1.png'); } .device .fn-sel:nth-child(2) .flex-card .flex-card-header .bsbgset { background-image: url('/files/device02.png'); } .device .fn-sel:nth-child(2) .flex-card:hover .flex-card-header .bsbgset { background-image: url('/files/device02-1.png'); } .device .fn-sel:nth-child(3) .flex-card .flex-card-header .bsbgset { background-image: url('/files/device03.png'); } .device .fn-sel:nth-child(3) .flex-card:hover .flex-card-header .bsbgset { background-image: url('/files/device03-1.png'); } .device .fn-sel:nth-child(4) .flex-card .flex-card-header .bsbgset { background-image: url('/files/device04.png'); } .device .fn-sel:nth-child(4) .flex-card:hover .flex-card-header .bsbgset { background-image: url('/files/device04-1.png'); } .device .fn-sel:nth-child(5) .flex-card .flex-card-header .bsbgset { background-image: url('/files/device05.png'); } .device .fn-sel:nth-child(5) .flex-card:hover .flex-card-header .bsbgset { background-image: url('/files/device05-1.png'); }.sticky-wrap { display: block; min-height: 1.5rem; overflow: auto; scroll-behavior: smooth; } .sticky-wrap>table { width:100%; border-collapse: collapse; } .sticky-wrap>table th { color: #FFF; background-color: rgb(162, 143, 204); } .sticky-wrap>table td { z-index: 0; } .sticky-wrap>table th { text-align: center; z-index: 1; } .sticky-wrap>table th::after, .sticky-wrap>table td::after { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; border-bottom: 1px solid #EEE; border-right: 1px solid #EEE; pointer-events: none; } .sticky-wrap>table>thead.caption { top: 0; position: -webkit-sticky; position: sticky; display: table-caption; z-index: 5; } .sticky-wrap>table>thead:not(.caption) th { top: 0; position: -webkit-sticky; position: sticky; z-index: 3; } .sticky-wrap>table>thead:not(.caption) th:first-child { z-index: 5 !important; } .sticky-wrap>table>tbody>tr:first-child th { top: 0; left: auto; position: -webkit-sticky; position: sticky; z-index: 3; } .sticky-wrap>table>tbody th { left: 0; position: -webkit-sticky; position: sticky; z-index: 3; } .sticky-wrap>table>tbody>tr:first-child th:first-child { top: 0; left: 0; z-index: 5; } .sticky-wrap>table>tfoot th { bottom: 0; position: -webkit-sticky; position: sticky; } .sticky-left { position: -webkit-sticky; position: sticky; left: 0; z-index: 4 !important; } .sticky-right { position: -webkit-sticky; position: sticky; right: 0; z-index: 4 !important; }.item-desc-row:not(:last-child){ margin-bottom:2rem; } .item-desc-row h5 { font-weight: bold; } .item-desc-image { padding-bottom: 100%; border-radius: 50%; } .item-desc-imgwrap { width: 100px; } @media (max-width:464px) { .item-desc-imgwrap { width: 80px; } .item-desc-row>div:first-child { padding-right: 0; } }