@import"./reset.css"; @import"./style_after.css"; body { background-color: #fff}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0); border: 0}

.desktop-image { display: block}

.mobile-image { display: none}

.pbr { display: block}

.mbr { display: inline-block}

.ani-text i { display: inline-block}

#skip__content a { overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: #000; color: #fff; text-align: center}

#skip__content a a:focus { position: relative; width: 100%; height: auto; padding: 10px}

header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; border-bottom: 1px solid #4d4d4d}

header.invert .header__wrap { filter: invert(1); background: #000; font-weight: 500}

header .header__wrap { padding: 25px 40px; width: 100%; background-color: rgba(0,0,0,0); display: flex; justify-content: space-between; align-items: center; transition: background-color .3s ease-in-out}

header .header__wrap .bi__logo img { display: block}

header .header__wrap .bi__tabs ul { display: flex; justify-content: space-between; align-items: center}

header .header__wrap .bi__tabs ul li { padding: 0 2rem; color: #fff; font-weight: 700}

header .header__wrap .bi__tabs ul li:hover { color: #ccc}

header .header__wrap .bi__menu { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; cursor: pointer}

header .header__wrap .bi__menu .menu__icon { width: 20px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: start}

header .header__wrap .bi__menu .menu__icon span { display: block; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1)}

header .header__wrap .bi__menu .menu__icon span:last-child { margin-bottom: 0; width: 50%}

header .header__wrap .bi__menu:hover .menu__icon span:first-of-type { width: 50%}

header .header__wrap .bi__menu:hover .menu__icon span:last-of-type { width: 100%}

header nav.bi__nav { overflow: hidden; visibility: hidden; display: flex; flex-direction: column; position: fixed; top: 0; left: 100%; right: 0; bottom: 0; width: 100%; height: 100vh; color: #fff; background-color: #222; transition: all .8s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: .2s; opacity: 0; z-index: -1}

header nav.bi__nav .nav__head { padding: 25px 40px; width: 100%; background-color: rgba(0,0,0,0); display: flex; justify-content: space-between; align-items: center}

header nav.bi__nav .nav__head .nav__support { margin-left: auto; margin-right: 40px}

header nav.bi__nav .nav__head .nav__support a { font-size: .938vw; margin-right: 2.083vw}

header nav.bi__nav .nav__head .nav__close { width: 40px; height: 40px; color: #fff}

header nav.bi__nav .nav__head .nav__close .close__icon { display: inline-block; cursor: pointer; position: relative; width: 40px; height: 40px; background-color: rgba(0,0,0,0); border: none}

header nav.bi__nav .nav__head .nav__close .close__icon span { display: block; width: 100%; height: 3px; background-color: #fff; position: absolute; border-radius: 3px; transition: transform .3s ease}

header nav.bi__nav .nav__head .nav__close .close__icon span:first-of-type { top: 50%; left: 0; transform: translateY(-50%) rotate(45deg)}

header nav.bi__nav .nav__head .nav__close .close__icon span:last-of-type { top: 50%; left: 0; transform: translateY(-50%) rotate(-45deg)}

header nav.bi__nav .nav__body { display: flex; flex-direction: column; justify-content: center; height: 100%}

header nav.bi__nav .nav__body ul.nav__menu { padding-left: 13.542vw}

header nav.bi__nav .nav__body ul.nav__menu .menu__item { padding: 2.604vw 0; display: flex; visibility: hidden; transition: all .8s cubic-bezier(0.19, 1, 0.22, 1); transform: translateY(3.125vw); opacity: 0}

header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__button { color: rgba(0,0,0,0); -webkit-text-stroke: 1px #fff}

header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__list a { visibility: visible; transform: translateY(0); opacity: 1}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__button { font-size: 3.125vw; font-weight: 700; color: #fff; transition: color .4s ease-in-out,-webkit-text-stroke .4s ease-in-out}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list { padding-left: 5.208vw; display: flex; justify-content: space-between; align-items: center}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a { margin-right: 3.125vw; position: relative; font-size: 2.083vw; font-weight: 400; color: #666; visibility: hidden; transform: translateY(100%); transition: all .6s; opacity: 0; cursor: pointer}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a:last-of-type { margin-right: 0}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a::after { content: ""; display: inline-block; width: .625vw; height: .625vw; background-color: #0e998e; border-radius: 50%; position: absolute; top: -0.625vw; right: -0.625vw; z-index: 1; opacity: 0; transform: scale(0.5); transition: all .6s}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a:hover { color: #fff}

header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a:hover::after { transform: scale(1); opacity: 1}

header nav.bi__nav .nav__body .nav__support { display: none}

header nav.bi__nav.active { left: 0; opacity: 1; visibility: visible; z-index: 101}

header nav.bi__nav.active .nav__body ul.nav__menu .menu__item { visibility: visible; transform: translateY(0); opacity: 1}

main { width: 100%}

main section { position: relative; display: flex; justify-content: center; align-items: center}

main section.active .ani-text i { animation: fadeLeft .4s .2s both}

main section.fullHeight { overflow: hidden; height: 100vh; background-color: #000}

main section.fullHeight .swiper-controls { width: 100%; height: 4px; position: absolute; bottom: 0; left: 0; z-index: 1}

main section.fullHeight .swiper-controls .swiper-pagination-progressbar-fill { background-color: #0e998e}

main section .inner { position: relative; padding: 120px 40px; margin: 0 auto; width: 100%; max-width: 1440px}

main section .intro__wrap { position: relative; display: flex; width: 100%; height: 100%}

main section .intro__wrap .bi__intro { flex: 1; position: relative; height: 100%; background-color: #4682b4; display: flex; justify-content: center; align-items: center; transition: flex 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: .2s; cursor: pointer}

main section .intro__wrap .bi__intro.intro-01 { background: url("/assets/images/common/bi-intro-01.jpg") center top no-repeat; background-size: auto 100%}

main section .intro__wrap .bi__intro.intro-02 { background: url("/assets/images/common/bi-intro-02.jpg") center top no-repeat; background-size: auto 100%}

main section .intro__wrap .bi__intro.intro-03 { background: url("/assets/images/common/bi-intro-03.jpg") center top no-repeat; background-size: auto 100%}

main section .intro__wrap .bi__intro .bi__intro__title { position: absolute; text-align: center; padding: 0 2rem; z-index: 2}

main section .intro__wrap .bi__intro .bi__intro__title h2 { font-size: 3.125vw; font-weight: bold; text-transform: uppercase; transition: color .8s ease-in-out,-webkit-text-stroke .8s ease-in-out; color: rgba(0,0,0,0); -webkit-text-stroke: 1px #fff}

main section .intro__wrap .bi__intro .bi__intro__title p { color: #fff; padding-top: 1rem; font-size: 1.563vw; transition: all .3s ease-out}

main section .intro__wrap .bi__intro::after { display: inline-block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; transition: all 1s ease-out; opacity: .3; z-index: 1}

main section .intro__wrap .bi__intro:last-child { border-right: 0}

main section .intro__wrap .bi__intro:hover { flex-basis: 50%; z-index: 1}

main section .intro__wrap .bi__intro:hover::after { opacity: .7}

main section .intro__wrap .bi__intro:hover .bi__intro__title h2 { color: #fff}

main section .intro__wrap .bi__intro:not(:hover) { flex-basis: 25%}

footer { padding: 2.5rem 0; background-color: #333; display: flex; justify-content: center; align-items: center}

footer .footer__inner { position: relative; width: 100%; max-width: 1440px; margin: 0 2rem; display: flex; justify-content: center; align-items: center}

footer .footer__inner a { position: absolute; top: 0; left: 0; z-index: 1}

footer .footer__inner a img { display: block; opacity: .5}

footer .footer__inner .footer__info ul { display: flex; flex-wrap: wrap; width: 500px; justify-content: center; align-items: center}

footer .footer__inner .footer__info ul li { display: flex; align-items: baseline; padding: 0 20px 10px 0}

footer .footer__inner .footer__info ul li p { font-weight: 400; font-size: .9rem}

footer .footer__inner .footer__info ul li p.name { padding-right: 10px; font-weight: 600; color: gray}

footer .footer__inner .footer__info ul li p.desc { color: #fff}

footer .footer__inner .footer__copyright { text-align: center; font-size: .8rem; color: gray}

.floating__menu { position: fixed; right: 20px; bottom: 100px; z-index: 90}

.floating__menu button { margin-top: 10px; width: 70px; height: 70px; border-radius: 50%; background-color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 4px 4px 4px rgba(0,0,0,.2)}

.floating__menu button:nth-child(2n) { background-color: #0e998e}

.floating__menu button:nth-child(2n)>* { color: #fff}

.floating__menu button>img { display: block}

.floating__menu button>span { padding-top: 4px; display: block; font-size: .8em}

@media(max-width: 1439px) { nav.bi__nav .nav__head { padding:20px 30px}

 nav.bi__nav .nav__head .nav__support a { font-size: inherit}

 nav.bi__nav .nav__head .nav__close { width: 2.778vw; height: 2.778vw; color: #fff}

 nav.bi__nav .nav__head .nav__close .close__icon { width: 2.778vw; height: 2.778vw}

 nav.bi__nav .nav__head .nav__close .close__icon span { width: 100%; height: .278vw; border-radius: .278vw}

 nav.bi__nav .nav__body ul.nav__menu { padding-left: 13.542vw}

 nav.bi__nav .nav__body ul.nav__menu .menu__item { padding: 2.604vw 0}

 nav.bi__nav .nav__body ul.nav__menu .menu__item .item__button { font-size: 3.125vw}

 nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list { padding-left: 5.208vw; display: flex; justify-content: space-between; align-items: center}

 nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a { margin-right: 3.125vw; font-size: 2.083vw; cursor: pointer}

 nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a:last-of-type { margin-right: 0}

 nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a::after { width: .625vw; height: .625vw; top: -0.625vw; right: -0.625vw}

 nav.bi__nav .nav__body .nav__support { display: none}

 main section .inner { padding: 6.944vw 2.778vw}

 main section .intro__wrap .bi__intro .bi__intro__title h2 { font-size: 2.778vw}

 main section .intro__wrap .bi__intro .bi__intro__title p { padding-top: 1rem; font-size: 2.083vw} 
 }

@media(max-width: 1279px) { header .header__wrap { padding:20px 30px}

 header .header__wrap .bi__tabs { display: none}

 header .header__wrap .bi__tabs ul li { font-size: 14px}

 header .header__wrap .bi__menu { width: 20px; height: 20px}

 header .header__wrap .bi__menu .menu__icon span { height: 2px}

 header nav.bi__nav .nav__head { padding: 20px 30px}

 header nav.bi__nav .nav__head .bi__logo img { width: 100%}

 header nav.bi__nav .nav__head .nav__support { display: none}

 header nav.bi__nav .nav__head .nav__close { width: 5.128vw; height: 5.128vw; color: #fff}

 header nav.bi__nav .nav__head .nav__close .close__icon { width: 5.128vw; height: 5.128vw}

 header nav.bi__nav .nav__head .nav__close .close__icon span { width: 100%; height: .278vw; border-radius: .278vw}

 header nav.bi__nav .nav__body { justify-content: start}

 header nav.bi__nav .nav__body ul.nav__menu { padding-left: 3.659vw; display: flex; flex-direction: column; justify-content: space-between; align-items: start}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item { padding: 6.098vw 0 0; flex-direction: column}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__button { color: rgba(0,0,0,0); -webkit-text-stroke: 1px #fff}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__list { max-height: 230px; visibility: visible}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__list a { visibility: visible; transform: translateX(0); opacity: 1}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__button { font-size: 3.902vw; text-align: left}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list { visibility: hidden; max-height: 0; padding-left: 0; padding-top: 2.564vw; flex-direction: column; justify-content: start; align-items: start; transition: max-height .5s ease-out}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a { margin: 1.564vw 0; font-size: 2.927vw; text-align: left; cursor: pointer; transform: translateX(30px) translateY(0)}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a::after { width: .732vwvw; height: .732vwvw; top: -0.732vwvw; right: -0.732vwvw}

 header nav.bi__nav .nav__body .nav__support { display: flex; flex-direction: column; position: absolute; right: 30px; bottom: 40px; z-index: 1}

 header nav.bi__nav .nav__body .nav__support a { padding-top: 3.128vw; font-size: 2vw; text-decoration: underline}

 header nav.bi__nav.active { left: 0; opacity: 1; visibility: visible; z-index: 101; overflow-y: auto; } 

 header nav.bi__nav.active .nav__body ul.nav__menu .menu__item { visibility: visible; transform: translateY(0); opacity: 1; } 

 footer .footer__inner a { display: none}

 main { width: 100%}

 main section .intro__wrap .bi__intro { flex: 0 0 auto; width: 100%}

 main section .intro__wrap .bi__intro .bi__intro__title h2 { font-size: 3.75rem}

 main section .intro__wrap .bi__intro .bi__intro__title p { padding-top: 1rem; font-size: 3.659vw}

 main section .intro__wrap .bi__intro::after { display: inline-block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; transition: all 1s ease-out; opacity: .4; z-index: 1}

 main section .intro__wrap .bi__intro:hover { flex-basis: 100%}

 main section .intro__wrap .bi__intro:not(:hover) { flex-basis: 100%}

 main section .intro__wrap .bi__intro.swiper-slide-active .bi__intro__title h2 { color: #fff} 
 }

@media(max-width: 767px){
 .desktop-image { display:none}

 .mobile-image { display: block}

 .pbr { display: inline-block}

 .mbr { display: block}

 header .header__wrap { padding: 20px 30px}

 header .header__wrap .bi__logo { width: 77px}

 header .header__wrap .bi__logo img { width: 100%}

 header .header__wrap .bi__tabs { display: none}

 header .header__wrap .bi__menu { width: 20px; height: 20px}

 header .header__wrap .bi__menu .menu__icon span { height: 2px}

 header nav.bi__nav .nav__head { padding: 20px 30px}

 header nav.bi__nav .nav__head .bi__logo { width: 77px}

 header nav.bi__nav .nav__head .bi__logo img { width: 100%}

 header nav.bi__nav .nav__head .nav__support { display: none}

 header nav.bi__nav .nav__head .nav__close { width: 5.128vw; height: 5.128vw; color: #fff}

 header nav.bi__nav .nav__head .nav__close .close__icon { width: 5.128vw; height: 5.128vw}

 header nav.bi__nav .nav__head .nav__close .close__icon span { width: 100%; height: .278vw; border-radius: .278vw}

 header nav.bi__nav .nav__body { justify-content: start}

 header nav.bi__nav .nav__body ul.nav__menu { padding-left: 7.692vw; display: flex; flex-direction: column; justify-content: space-between; align-items: start}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item { padding: 10.256vw 0 0; flex-direction: column}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__button { color: rgba(0,0,0,0); -webkit-text-stroke: 1px #fff}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__list { max-height: 150px; visibility: visible}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item.active .item__list a { visibility: visible; transform: translateX(0); opacity: 1}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__button { font-size: 8.205vw; text-align: left}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list { visibility: hidden; max-height: 0; padding-left: 0; padding-top: 2.564vw; flex-direction: column; justify-content: start; align-items: start; transition: max-height .5s ease-out}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a { margin: 2.564vw 0; font-size: 6.154vw; text-align: left; cursor: pointer; transform: translateX(30px) translateY(0)}

 header nav.bi__nav .nav__body ul.nav__menu .menu__item .item__list a::after { width: 2.051vw; height: 2.051vw; top: -2.051vw; right: -2.051vw}

 header nav.bi__nav .nav__body .nav__support { display: flex; flex-direction: column; position: absolute; left: auto; bottom: 40px; z-index: 1}

 header nav.bi__nav .nav__body .nav__support a { padding-top: 5.128vw; font-size: 3.59vw; text-decoration: underline}

 header nav.bi__nav.active { left: 0; opacity: 1; visibility: visible; z-index: 101; overflow-y: auto; } 

 header nav.bi__nav.active .nav__body ul.nav__menu .menu__item { visibility: visible; transform: translateY(0); opacity: 1}

 footer { padding: 7.692vw 0}

 footer .footer__inner { max-width: 82.564vw; margin: 0}

 footer .footer__inner a { display: none}

 footer .footer__inner .footer__info ul { flex-direction: column; width: 100%}

 footer .footer__inner .footer__info ul li { padding: 2px 0}

 footer .footer__inner .footer__info ul li p { font-size: 3.077vw}

 footer .footer__inner .footer__info ul li p.name { padding-right: 10px}

 footer .footer__inner .footer__info ul li p.desc { color: #fff; line-height: 1.5em}

 footer .footer__inner .footer__copyright { padding-top: 10px; font-size: 3.077vw}

 .floating__menu { bottom: 50px}

 .floating__menu button { width: 54px; height: 54px}

 .floating__menu button>img { width: 18px; height: 18px}

 .floating__menu button>span { padding-top: 0; font-size: .8em}

 main { width: 100%}

 main section .inner { padding: 12.821vw 5.128vw}

 main section.fullHeight { overflow: hidden}

 main section .intro__wrap .bi__intro { flex: 0 0 auto; width: 100%}

 main section .intro__wrap .bi__intro .bi__intro__title h2 { font-size: 10.256vw}

 main section .intro__wrap .bi__intro .bi__intro__title p { padding-top: 1rem; font-size: 6.154vw} 
 }

@keyframes fadeLeft { 
 0% { transform: translateX(20px); opacity: 0}

 100% { transform: translateX(0); opacity: 1} 
 }

#fullpage.tech .section.sec1 { background: url("/assets/images/pages/sync/bg-01.jpg") center center no-repeat; background-size: cover}

#fullpage.tech .section.sec2 { background: url("/assets/images/pages/sync/bg-02.jpg") center center no-repeat; background-size: cover}

#fullpage.tech .section.sec3 { background: url("/assets/images/pages/sync/bg-03.jpg") center center no-repeat; background-size: cover}

#fullpage.business .section.sec1 { background: url("/assets/images/pages/business/bg-01.jpg") center center no-repeat; background-size: cover}

#fullpage.business .section.sec2 { background: url("/assets/images/pages/business/bg-02.jpg") center center no-repeat; background-size: cover}

#fullpage.business .section.sec3 { background: url("/assets/images/pages/business/bg-03.jpg") center center no-repeat; background-size: cover}

#fullpage.business .section.sec4 { background: url("/assets/images/pages/business/bg-04.jpg") center center no-repeat; background-size: cover}

#fullpage.business .section.sec5 { background: url("/assets/images/pages/business/bg-05.jpg") center center no-repeat; background-size: cover}

#fullpage.business .section.sec6 { background: url("/assets/images/pages/business/bg-06.jpg") center center no-repeat; background-size: cover}

#fullpage .section .title_box { text-align: center; color: #fff}

#fullpage .section .title_box h2 { font-size: 80px; color: #fff; font-weight: 400; text-transform: uppercase; line-height: 1.4em}

#fullpage .section .title_box h2 strong { font-size: inherit; font-weight: 700; color: #fff}

#fullpage .section .title_box h3 { padding-top: 10px; font-size: 30px}

#fullpage .section .title_box .btn__more { display: inline-block; position: relative; margin-top: 40px; font-size: 20px; z-index: 1}

#fullpage .section .title_box .btn__more::before { display: inline-block; content: ""; position: absolute; left: -20%; bottom: -7px; width: 34px; height: 34px; border-radius: 50%; background-color: #0e998e; z-index: -1}

#fullpage .section .title_box .btn__more::after { display: inline-block; content: ""; position: absolute; right: -2rem; bottom: 0; width: 25px; height: 14px; background: url("/assets/images/pages/arrow.png") center center no-repeat; background-size: 100%}

#fullpage h1 { color: #fff}

#conversion { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: none; z-index: 20}

#conversion .layer1 { position: absolute; width: 100%; height: 100%; bottom: -100%; background: #0e998e; z-index: 2}

#conversion .layer2 { position: absolute; width: 100%; height: 100%; bottom: -100%; background: #000; z-index: 1}

#conversion.up .layer1 { animation: slide-up 1s forwards}

#conversion.up .layer2 { animation: slide-up 1s .1s forwards}

#conversion.down .layer1 { animation: slide-down 1s forwards}

#conversion.down .layer2 { animation: slide-down 1s .1s forwards}

@keyframes slide-up { 
 0% { bottom: -100%}

 50% { bottom: 0}

 100% { bottom: 100%} 
 }

@keyframes slide-down { 
 0% { bottom: 100%}

 50% { bottom: 0}

 100% { bottom: -100%} 
 }

#scroll__plz { position: absolute; bottom: 50px; left: 50%; transform: translate(-50%, 0%); display: flex; flex-direction: column; justify-content: center; align-items: center}

#scroll__plz>img { display: inline-block}

#scroll__plz>span { padding-top: 10px; font-size: 10px; color: #fff; text-transform: uppercase}

#pagenation { display: flex; flex-direction: column; position: fixed; left: 40px; top: 50%; transform: translate(0, -50%); width: auto; z-index: 10}

#pagenation li { margin: 10px 0}

#pagenation a { display: inline-block; position: relative}

#pagenation a i { display: inline-block; width: 10px; height: 10px; background: #d5d5d5; border-radius: 50%; transform: translateY(-50%)}

#pagenation a i::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; opacity: 0; transition: all .3s}

#pagenation li.active a i { background: #0e998e}

#pagenation li.active a i::before { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.5); opacity: 1}

@media(max-width: 1439px){
 #fullpage .section .title_box h2 { font-size:5.556vw}

 #fullpage .section .title_box h3 { font-size: 2.083vw}

 #fullpage .section .title_box .btn__more { font-size: 1.389vw} 
 }

@media(max-width: 1279px){
 #fullpage .section .title_box h2 { font-size:8.989vw}

 #fullpage .section .title_box h3 { font-size: 3.659vw}

 #fullpage .section .title_box .btn__more { font-size: 2.439vw} 
 }

@media(max-width: 767px){
 #fullpage .section .title_box h2 { font-size:10.256vw}

 #fullpage .section .title_box h3 { font-size: 5.128vw}

 #fullpage .section .title_box .btn__more { font-size: 4.103vw}

 #pagenation { left: 20px}

 #pagenation li { margin: 5px 0}

 #pagenation a i { width: 6px; height: 6px}

 #pagenation a i::before { width: 6px; height: 6px}

 #pagenation li.active a i::before { width: 18px; height: 18px} 
 }

section .h100 { height: 100px}

section .content__title { text-align: center}

section .content__title span { font-size: 20px; font-weight: 600; color: #999}

section .content__title h3 { padding-top: 10px; font-size: 56px; color: #333}

section .content__title h3 strong { font-weight: 700}

section .content__title h4 { padding-top: 20px; font-size: 24px}

section .content__title.alignLeft { text-align: left}

section .page__deco { position: absolute; width: 90px; height: 90px; border-radius: 45px; transition: all .4s ease; z-index: 1}

section .page__deco.type1 { height: 180px; top: -90px; right: 60px; background-color: #0e998e; transform: rotate(25deg)}

section .page__deco.type2 { width: 110px; height: 110px; top: -55px; left: 25%; border-radius: 50%; background-color: #c0ded8}

section .page__deco.type3 { height: 180px; bottom: -90px; right: 15%; background-color: #1685b2; transform: rotate(25deg)}

section .page__deco__text { position: absolute; width: -moz-max-content; width: max-content; color: #ccc; font-family: "Pretendard","Noto Sans KR",Dotum,"돋움",sans-serif; font-weight: 700; font-size: 8.333vw; line-height: 1em; opacity: .6; z-index: 0}

section.content__banner { overflow: hidden}

section.content__banner img { width: 100%}

section.content__banner .inner { position: absolute; height: -webkit-fill-available; padding: 0}

section.content__banner .banner__text { width: 36.458vw; height: 13.75vw; position: absolute; top: 50%; left: 40px; transform: translateY(-50%); color: #fff; background: url("/assets/images/pages/bg-bannertext.png") left top no-repeat; background-size: 100% 100%}

section.content__banner .banner__text h2 { margin-top: -14px; font-family: "Pretendard","Noto Sans KR",Dotum,"돋움",sans-serif; font-weight: 400; font-size: 4.167vw}

section.content__banner .banner__text p { padding-top: 20px; font-size: 1.25vw; font-weight: 400; line-height: 1.3em}

section.content__service h3 { text-align: center; font-size: 34px; font-weight: 700; padding-bottom: 30px}

section.content__service .service__desc { text-align: center; font-size: 24px; line-height: 1.4em}

section.content__service.sync-boot .service__wrap>div>div.service-01 { background: url("/assets/images/pages/sync_boot/service-01.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-boot .service__wrap>div>div.service-02 { background: url("/assets/images/pages/sync_boot/service-02.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-boot .service__wrap>div>div.service-03 { background: url("/assets/images/pages/sync_boot/service-03.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-boot .service__wrap>div>div.service-04 { background: url("/assets/images/pages/sync_boot/service-04.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-cms .service__wrap>div>div.service-01 { background: url("/assets/images/pages/sync_cms/service-01.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-cms .service__wrap>div>div.service-02 { background: url("/assets/images/pages/sync_cms/service-02.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-cms .service__wrap>div>div.service-03 { background: url("/assets/images/pages/sync_cms/service-03.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.sync-cms .service__wrap>div>div.service-04 { background: url("/assets/images/pages/sync_cms/service-04.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-certification .service__wrap>div>div.service-01 { background: url("/assets/images/pages/business_certification/service-01.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-certification .service__wrap>div>div.service-02 { background: url("/assets/images/pages/business_certification/service-02.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-certification .service__wrap>div>div.service-03 { background: url("/assets/images/pages/business_certification/service-03.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-certification .service__wrap>div>div.service-04 { background: url("/assets/images/pages/business_certification/service-04.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-commerce .service__wrap>div>div.service-01 { background: url("/assets/images/pages/business_commerce/service-01.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-commerce .service__wrap>div>div.service-02 { background: url("/assets/images/pages/business_commerce/service-02.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-commerce .service__wrap>div>div.service-03 { background: url("/assets/images/pages/business_commerce/service-03.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-commerce .service__wrap>div>div.service-04 { background: url("/assets/images/pages/business_commerce/service-04.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-commerce .service__wrap>div>div.service-05 { background: url("/assets/images/pages/business_commerce/service-05.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-commerce .service__wrap>div>div.service-06 { background: url("/assets/images/pages/business_commerce/service-06.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-cloud .service__wrap>div>div.service-01 { background: url("/assets/images/pages/business_cloud/service-01.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-cloud .service__wrap>div>div.service-02 { background: url("/assets/images/pages/business_cloud/service-02.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-cloud .service__wrap>div>div.service-03 { background: url("/assets/images/pages/business_cloud/service-03.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-cloud .service__wrap>div>div.service-04 { background: url("/assets/images/pages/business_cloud/service-04.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-ai .service__wrap>div>div.service-01 { background: url("/assets/images/pages/business_ai/service-01.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-ai .service__wrap>div>div.service-02 { background: url("/assets/images/pages/business_ai/service-02.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-ai .service__wrap>div>div.service-03 { background: url("/assets/images/pages/business_ai/service-03.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-ai .service__wrap>div>div.service-04 { background: url("/assets/images/pages/business_ai/service-04.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-ai .service__wrap>div>div.service-05 { background: url("/assets/images/pages/business_ai/service-05.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service.business-ai .service__wrap>div>div.service-06 { background: url("/assets/images/pages/business_ai/service-06.png") 0 0 no-repeat; background-size: 100% auto}

section.content__service .service__wrap { margin-top: 120px; overflow: hidden; display: flex; flex-wrap: wrap}

section.content__service .service__wrap>img { width: 100%; border-top-right-radius: 50px}

section.content__service .service__wrap>div { flex: 1 1 50%; height: auto}

section.content__service .service__wrap>div:first-child { margin-top: 100px}

section.content__service .service__wrap>div:last-child>div:first-child { border-top-right-radius: 50px}

section.content__service .service__wrap>div>div { flex: 1; display: flex; height: 420px; flex-direction: column; padding: 60px; color: #fff}

section.content__service .service__wrap>div>div h4 { font-family: "Pretendard","Noto Sans KR",Dotum,"돋움",sans-serif; font-size: 40px; font-weight: 700}

section.content__service .service__wrap>div>div p { padding-top: 20px; font-size: 20px; line-height: 1.4em}

section.content__feature { overflow: hidden; background: url("/assets/images/pages/sync_boot/feature-bg.jpg") 0 0 no-repeat; background-size: cover}

section.content__feature .keywords { margin-top: 60px; padding-bottom: 90px; background: url("/assets/images/pages/sync_cms/keywords-bg.png") center 12px no-repeat}

section.content__feature .keywords p { text-align: center; font-size: 24px; font-weight: 400; line-height: 1.4em}

section.content__feature .keywords ul { margin: 40px auto 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 55%}

section.content__feature .keywords ul li { display: flex; flex: 0 0 auto; justify-content: center; align-items: center; margin: 4px; padding: 4px 16px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; font-size: 16px; color: #666}

section.content__feature ul.feature_wrap { margin: 0 auto 86px; width: -moz-fit-content; width: fit-content; border: 1px solid #ccc; display: flex}

section.content__feature ul.feature_wrap>li { flex: 1; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 60px 40px; max-width: 14.271vw; height: 430px; border-right: 1px solid #ccc; text-align: center; background-color: #fff; word-break: keep-all; transition: .8s}

section.content__feature ul.feature_wrap>li:last-child { border: 0 none}

section.content__feature ul.feature_wrap>li:hover { background: linear-gradient(28deg, rgb(22, 133, 178) 0%, rgb(12, 158, 134) 100%); transition: .2s ease-in; border-top-right-radius: 30px; z-index: 5}

section.content__feature ul.feature_wrap>li:hover h4,section.content__feature ul.feature_wrap>li:hover p,section.content__feature ul.feature_wrap>li:hover li { color: #fff}

section.content__feature ul.feature_wrap>li:hover p { height: 151px; word-break: keep-all; width: 100%; border-color: rgba(0,0,0,0); opacity: 1}

section.content__feature ul.feature_wrap>li:hover p:before { display: none}

section.content__feature ul.feature_wrap>li h4 { padding: 20px 0; min-height: 96px; font-size: 18px; line-height: 1.4em}
section.content__feature ul.feature_wrap>li ul {
    height: 150px;
    overflow: auto;

}
section.content__feature ul.feature_wrap>li p { font-size: 14px; font-weight: 300; line-height: 1.4em; transition: .4s height,border-color; overflow: hidden; border-radius: 3px; height: 3px; position: relative}

section.content__feature ul.feature_wrap>li p:before { display: block; position: absolute; top: 0; border-top: 3px solid #0c9f84; left: 0; content: ""; width: 30px; height: 3px; left: 50%; margin-left: -15px}

section.content__feature ul.feature_wrap>li>ul li { font-size: 14px; font-weight: 300; line-height: 1.4em; text-align: center; padding-bottom: 4px}

section.content__feature .swiper-controls .swiper-pagination { position: absolute; top: auto; bottom: -50px}

section.content__feature .swiper-controls .swiper-navigator { display: none}

section.content__feature .all-swiper { overflow: visible}

section.content__feature .all-swiper ul.feature_wrap { flex-wrap: nowrap}

section.content__feature .all-swiper ul.feature_wrap>li { flex: initial; max-width: initial}

section.content__composition h4 { padding-top: 40px; font-size: 24px; font-weight: 700; text-align: center}

section.content__composition .diagram { margin: 60px 0 50px; display: flex}

section.content__composition .diagram>img { margin: auto; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover}

section.content__composition:nth-of-type(odd) { background-color: #f4f4f4}

section.content__function { background-color: #f4f4f4; position: relative}

section.content__function .inner { display: flex}

section.content__function .content__title { width: 33%}

section.content__function .content__dial { width: 67%; display: flex; justify-content: center; align-items: center}

section.content__function .dial__wrap { position: relative; margin: 100px 0 60px; width: 600px; height: 600px; border: 1px solid #ccc; border-radius: 50%}

section.content__function .dial__wrap button { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border: 1px solid rgba(0,0,0,0); border-radius: 50%; background-color: rgba(0,0,0,0); display: flex; justify-content: center; align-items: center; z-index: 1}

section.content__function .dial__wrap button::after { content: ""; display: inline-block; position: absolute; width: 19px; height: 19px; border-radius: 50%; background-color: #ccc; transition: all .2s ease-in}

section.content__function .dial__wrap button.active,section.content__function .dial__wrap button:hover { border: 1px solid #0e998e; background: #fff}

section.content__function .dial__wrap button.active::after,section.content__function .dial__wrap button:hover::after { background-color: #0e998e}

section.content__function .dial__wrap button.active .btn__inner,section.content__function .dial__wrap button:hover .btn__inner { color: #0e998e}

section.content__function .dial__wrap button.active .btn__inner img,section.content__function .dial__wrap button:hover .btn__inner img { filter: invert(58%) sepia(52%) saturate(7064%) hue-rotate(148deg) brightness(90%) contrast(89%)}

section.content__function .dial__wrap button .btn__inner { position: absolute; top: 50%; left: 50%; width: 210px; height: 90px; display: flex; flex-direction: column; justify-content: center; align-items: center}

section.content__function .dial__wrap button .btn__inner span { padding-top: 10px; font-size: 24px; line-height: 1.2em}

section.content__function.sync-boot .dial__wrap { background: url("/assets/images/pages/sync_boot/dial.png") center center no-repeat; background-size: 83% auto}

section.content__function.sync-cms .dial__wrap { background: url("/assets/images/pages/sync_cms/dial.png") center center no-repeat; background-size: 83% auto}

section.content__function.sync-any .dial__wrap { background: url("/assets/images/pages/sync_any/dial.png") center center no-repeat; background-size: 83% auto}

section.content__function .dial__desc { position: absolute; bottom: 0; left: 0; width: 33.854vw; height: 620px; background: #fff; border-top-right-radius: 2.604vw}

section.content__function .dial__desc .desc__wrap { width: 310px; position: absolute; top: 6.25vw; right: 3.208vw}

section.content__function .dial__desc .desc__wrap>ul>li { display: none}

section.content__function .dial__desc .desc__wrap>ul>li.active { display: block}

section.content__function .dial__desc .desc__wrap>ul>li h4 { display: flex; justify-content: start; align-items: center; font-size: 24px; color: #0e998e; font-weight: 500}

section.content__function .dial__desc .desc__wrap>ul>li h4>img { display: inline-block; filter: invert(58%) sepia(52%) saturate(7064%) hue-rotate(148deg) brightness(90%) contrast(89%); margin-right: 10px}

section.content__function .dial__desc .desc__wrap>ul>li p.title { padding: 40px 0 20px; font-size: 36px; font-weight: 700; line-height: 1.2em; word-break: keep-all}

section.content__function .dial__desc .desc__wrap>ul>li p.desc { font-size: 18px; line-height: 1.3em}

section.content__function .dial__desc .desc__wrap>ul>li ul li { position: relative; padding: 2px 0 2px 25px; font-size: 18px; line-height: 1.3em}

section.content__function .dial__desc .desc__wrap>ul>li ul li::before { display: inline-block; content: ""; width: 6px; height: 6px; position: absolute; top: 12px; left: 10px; border-radius: 50%; background-color: #000}

section.content__function .dial__desc .desc__wrap .pagenation { margin-top: 100px; display: flex; justify-content: start; align-items: center}

section.content__function .dial__desc .desc__wrap .pagenation span { font-size: 18px}

section.content__function .dial__desc .desc__wrap .pagenation span.current { font-weight: 700}

section.content__function .dial__desc .desc__wrap .pagenation span.divide { display: inline-block; margin: 0 5px; width: 30px; height: 3px; background-color: #000}

section.content__function .dial__desc .desc__wrap .pagenation span.total { color: #ccc}

section.content__flatform { background-color: #ddd}

section.content__flatform .content__list { margin: 50px 0; display: flex; justify-content: space-between; align-items: start}

section.content__flatform .content__list .item { flex: 1; margin-right: 40px}

section.content__flatform .content__list .item:last-child { margin-right: 0}

section.content__flatform .content__list .item .head { padding: 12px; background: linear-gradient(180deg, rgb(22, 133, 178) 0%, rgb(12, 158, 134) 100%); color: #fff; font-size: 18px; border-top-right-radius: 45px}

section.content__flatform .content__list .item .body { padding: 20px; background-color: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.1)}

section.content__flatform .content__list .item .body ul li { margin-bottom: 20px; border: 1px solid #ddd}

section.content__flatform .content__list .item .body ul li:last-child { margin-bottom: 0}

section.content__flatform .content__list .item .body ul li span { display: block; width: 100%; text-align: center; padding: 12px 30px; color: #333}

section.content__flatform .content__list .item .body ul li span.name { position: relative; font-size: 14px; border-top: 1px solid #ddd; background-color: #f4f4f4}

section.content__flatform .content__list .item .body ul li span.name::after { display: inline-block; content: ""; width: 10px; height: 10px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border-radius: 50%}

section.content__flatform .content__list .item .body ul li span.name.type1::after { background-color: #387ade}

section.content__flatform .content__list .item .body ul li span.name.type2::after { background-color: #ff8f0b}

section.content__flatform .content__list .item .body ul li span.name.type3::after { background-color: #27a633}

section.content__flatform .content__list .item .body ul li span.name.type4::after { background-color: #a16ed3}

section.content__flatform .content__list .item .body ul li span.name.type5::after { background-color: #ffcd1e}

section.content__flatform .content__list .item .body ul li span.name.type6::after { background-color: #41a7a7}

section.content__flatform .content__list .item .body ul li span.name.type7::after { background-color: #6cb9ff}

section.content__flatform .content__list .item .body ul li span.name.type8::after { background-color: #a0d800}

section.content__flatform .content__list .item .body ul li span.name.type9::after { background-color: #ff5a5a}

section.content__flatform .content__list .item .body ul li span.name.type10::after { background-color: #a8a8a8}

section.content__flatform .content__list .item .body ul li span.name.type11::after { background-color: #beb66c}

section.content__flatform .content__list .item .body ul li span.name.type12::after { background-color: #b4843d}

section.content__flatform .content__list .item .body ul li span.name.type13::after { background-color: #d36ec9}

section.content__flatform .content__list .item .body ul li span.name.type14::after { background-color: #d97171}

section.content__flatform .content__list .item .body ul li span.name.type15::after { background-color: #b21616}

section.content__introduce .content__tabs { margin-top: 70px}

section.content__introduce .content__tabs .tab__menu { display: flex; flex-wrap: nowrap}

section.content__introduce .content__tabs .tab__menu button { flex: 1; padding: 10px; width: auto; border-bottom: 2px solid #ddd; font-size: 20px; font-weight: 400}

section.content__introduce .content__tabs .tab__menu button.active { font-weight: 700; border-color: #000}

section.content__introduce .content__tabs .tab__contents { position: relative; margin: 80px 0}

section.content__introduce .content__tabs .tab__contents .item { display: none; width: 100%}

section.content__introduce .content__tabs .tab__contents .item.active { display: flex; flex-direction: column; justify-content: center; align-items: center}

section.content__introduce .content__tabs .tab__contents .item h4 { font-size: 30px; font-weight: 700}

section.content__introduce .content__tabs .tab__contents .item>p { padding-top: 30px; font-size: 20px; line-height: 1.4em; text-align: center}

section.content__introduce .content__tabs .tab__contents .item>img { margin-top: 60px}

section.content__introduce .content__tabs .tab__contents .item .cards { margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%}

section.content__introduce .content__tabs .tab__contents .item .cards li { flex: 0 1 22.5%; padding: 30px; margin-bottom: 40px; border: 1px solid #ddd; border-top-right-radius: 50px; box-shadow: 10px 10px 10px rgba(0,0,0,.1)}

section.content__introduce .content__tabs .tab__contents .item .cards li .head-num { font-size: 30px; font-weight: 700; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid #ddd; text-align: right; color: #0e998e}

section.content__introduce .content__tabs .tab__contents .item .cards li .head-text { font-size: 20px; font-weight: 700; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd; text-align: left; color: #333; letter-spacing: -1px}

section.content__introduce .content__tabs .tab__contents .item .cards li .title { font-size: 20px; font-weight: 700; padding-bottom: 20px}

section.content__introduce .content__tabs .tab__contents .item .cards li .desc { font-size: 16px; line-height: 1.3em; min-height: 5em}

section.content__introduce .content__tabs .tab__contents .item .cards li:last-child { margin-right: 0}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col { flex-wrap: wrap; justify-content: space-between}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li { flex: 0 1 48.5%; padding: 0; margin: 0 0 40px}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li:nth-of-type(even) { margin-right: 0}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li .head-text { font-size: 20px; font-weight: 700; padding: 24px; margin-bottom: 0; border: 0 none; text-align: center; color: #333}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>img { width: 100%}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div { display: flex; padding: 30px 0; flex-wrap: wrap}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div div { flex: 0 1 50%; padding: 0 40px}

section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div div:nth-of-type(odd) { border-right: 1px solid #ccc}

section.content__introduce .content__tabs .tab__contents .item .cards.type-text li { background-color: #f4f4f4}

@media(max-width: 1439px) { section .content__title span { font-size:1.389vw}

 section .content__title h3 { padding-top: .694vw; font-size: 3.889vw}

 section .content__title h4 { padding-top: 1.389vw; font-size: 1.667vw}

 section .page__deco { width: 6.25vw; height: 6.25vw; border-radius: 3.125vw}

 section .page__deco.type1 { height: 12.5vw; top: -6.25vw; right: 4.167vw}

 section .page__deco.type2 { width: 7.639vw; height: 7.639vw; top: -3.819vw}

 section .page__deco.type3 { height: 12.5vw; bottom: -6.25vw; right: 4.167vw}

 section.content__banner .banner__text { left: 40px}

 section.content__service .service__desc { font-size: 1.667vw}

 section.content__service .service__wrap { margin-top: 6.944vw}

 section.content__service .service__wrap>div:first-child { margin-top: 6.944vw}

 section.content__service .service__wrap>div>div { height: 29vw; padding: 4.167vw}

 section.content__service .service__wrap>div>div h4 { font-size: 2.778vw}

 section.content__service .service__wrap>div>div p { padding-top: 1.389vw; font-size: 1.389vw}

 section.content__feature { background: url("/assets/images/pages/sync_boot/feature-bg.jpg") 0 0 no-repeat; background-size: auto 100%}

 section.content__feature .keywords { margin-top: 4.167vw; padding-bottom: 6.25vw; background: url("/assets/images/pages/sync_cms/keywords-bg.png") center 2.833vw no-repeat; background-size: auto 100%}

 section.content__feature .keywords p { font-size: 1.667vw}

 section.content__feature .keywords ul { margin: 2.778vw auto 0; width: 55%}

 section.content__feature .keywords ul li { margin: .278vw; padding: .278vw 1.111vw; border-radius: 1.111vw; font-size: 1.111vw}

 section.content__feature ul.feature_wrap { margin: 0 auto 5.972vw; display: flex; flex-wrap: wrap}

 section.content__feature ul.feature_wrap>li { flex: 1; padding: 3.472vw 2.083vw 3vw}

 section.content__feature ul.feature_wrap>li h4 { padding: 1.389vw 0; min-height: 6.667vw; font-size: .8rem}

 section.content__feature ul.feature_wrap>li p {font-size: .972vw;height: 151px;word-break: keep-all;width: 100%;border-color: rgba(0,0,0,0);opacity: 1;}
section.content__feature ul.feature_wrap>li p:before{
 opacity:0
}
 section.content__composition .diagram { max-width: 1440px; width: 100%; margin: 4.167vw 0 3.472vw}

 section.content__function .inner { display: flex}

 section.content__function .dial__wrap { position: relative; margin: 6.944vw 0 4.167vw; width: 34.722vw; height: 34.722vw}

 section.content__function .dial__wrap button { width: 3.333vw; height: 3.333vw}

 section.content__function .dial__wrap button::after { width: 1.319vw; height: 1.319vw}

 section.content__function .dial__wrap button .btn__inner { width: 6.944vw; height: 6.25vw}

 section.content__function .dial__wrap button .btn__inner span { font-size: 1.389vw}

 section.content__function .dial__desc { position: absolute; bottom: 0; left: 0; width: 33.854vw; height: 38.722vw; background: #fff; border-top-right-radius: 2.604vw}

 section.content__function .dial__desc .desc__wrap { width: 80%; position: absolute; top: 6.25vw; right: 10%}

 section.content__function .dial__desc .desc__wrap>ul>li h4 { font-size: 1.667vw}

 section.content__function .dial__desc .desc__wrap>ul>li p.title { padding: 2.778vw 0 1.389vw; font-size: 2.222vw}

 section.content__function .dial__desc .desc__wrap>ul>li p.desc { font-size: 1.25vw}

 section.content__function .dial__desc .desc__wrap>ul>li ul li { padding: .139vw 0 .139vw 1.736vw; font-size: 1.25vw}

 section.content__function .dial__desc .desc__wrap>ul>li ul li::before { width: .417vw; height: .417vw; top: .833vw; left: .694vw}

 section.content__function .dial__desc .desc__wrap .pagenation { margin-top: 6.944vw}

 section.content__function .dial__desc .desc__wrap .pagenation span { font-size: 1.25vw}

 section.content__function .dial__desc .desc__wrap .pagenation span.divide { margin: 0 .347vw; width: 30px; height: 3px}

 section.content__flatform .content__list { margin: 50px 0; justify-content: space-between; align-items: start}

 section.content__flatform .content__list .item { margin-right: 2.778vw}

 section.content__flatform .content__list .item .head { padding: .833vw; font-size: 1.111vw; border-top-right-radius: 3.125vw}

 section.content__flatform .content__list .item .body { padding: 1.389vw}

 section.content__flatform .content__list .item .body ul li { margin-bottom: 1.389vw}

 section.content__flatform .content__list .item .body ul li:last-child { margin-bottom: 0}

 section.content__flatform .content__list .item .body ul li span.category { font-size: 1.111vw; line-height: 1.2em}

 section.content__flatform .content__list .item .body ul li span.name { font-size: .972vw; line-height: 1.2em}

 section.content__flatform .content__list .item .body ul li span.name::after { width: .694vw; height: .694vw} 
 }

@media(max-width: 1279px) { section .h100 { height:4.688vw}

 section .content__title span { font-size: 1.389vw}

 section .content__title h3 { padding-top: .694vw; font-size: 3.889vw}

 section .content__title h4 { padding-top: 1.389vw; font-size: 1.667vw}

 section.content__banner .banner__text { left: 40px; transform: translateY(-30%)}

 section.content__banner .banner__text h2 { margin-top: -14px; font-size: 4.167vw}

 section.content__banner .banner__text p { padding-top: 20px; font-size: 1.25vw}

 section.content__service .service__desc { font-size: 1.875vw}

 section.content__service .service__wrap { margin-top: 6.944vw}

 section.content__service .service__wrap>div:first-child { margin-top: 6.944vw}

 section.content__service .service__wrap>div>div { height: 27vw; padding: 4.167vw}

 section.content__service .service__wrap>div>div h4 { font-size: 3.125vw}

 section.content__service .service__wrap>div>div p { padding-top: 1.563vw; font-size: 1.563vw}

 section.content__feature { background: url("/assets/images/pages/sync_boot/feature-bg.jpg") 0 0 no-repeat; background-size: auto 100%}

 section.content__feature ul.feature_wrap { margin: 0 auto 5.972vw; display: flex; flex-wrap: wrap}

 section.content__feature ul.feature_wrap>li { flex: 1; padding: 3.472vw 2.083vw; }

 section.content__feature ul.feature_wrap>li:hover { border-top-right-radius: 2.083vw}

 section.content__feature ul.feature_wrap>li h4 { padding: 20px 0; min-height: 6.667vw;}

 section.content__feature ul.feature_wrap>li p { font-size: .972vw}

 section.content__composition .diagram { max-width: 1440px; width: 100%; margin: 4.167vw 0 3.472vw}

 section.content__function .inner { display: flex}

 section.content__function .dial__wrap { position: relative; margin: 6.944vw 0 4.167vw; width: 34.722vw; height: 34.722vw}

 section.content__function .dial__wrap button { width: 3.333vw; height: 3.333vw}

 section.content__function .dial__wrap button::after { width: 1.319vw; height: 1.319vw}

 section.content__function .dial__wrap button .btn__inner { width: 6.944vw; height: 6.25vw}

 section.content__function .dial__wrap button .btn__inner span { padding-top: 4px; font-size: 1.389vw}

 section.content__function .dial__desc { position: absolute; bottom: 0; left: 0; width: 33.854vw; height: 39.722vw; background: #fff; border-top-right-radius: 2.604vw}

 section.content__function .dial__desc .desc__wrap { width: 80%; position: absolute; top: 5.25vw; right: 10%}

 section.content__function .dial__desc .desc__wrap>ul>li h4 { font-size: 1.875vw}

 section.content__function .dial__desc .desc__wrap>ul>li p.title { padding: 2.439vw 0 1.22vw; font-size: 2.222vw}

 section.content__function .dial__desc .desc__wrap>ul>li p.desc { font-size: 1.406vw}

 section.content__function .dial__desc .desc__wrap>ul>li ul li { padding: .156vw 0 .156vw 1.953vw; font-size: 1.406vw}

 section.content__function .dial__desc .desc__wrap>ul>li ul li::before { width: .469vw; height: .469vw; top: .938vw; left: .781vw}

 section.content__function .dial__desc .desc__wrap .pagenation { margin-top: 4.944vw}

 section.content__function .dial__desc .desc__wrap .pagenation span { font-size: 1.25vw}

 section.content__function .dial__desc .desc__wrap .pagenation span.divide { margin: 0 .347vw; width: 30px; height: 3px}

 section.content__flatform .content__list { margin: 3.472vw 0; justify-content: space-between; align-items: start}

 section.content__flatform .content__list .item { margin-right: 1.563vw}

 section.content__flatform .content__list .item .head { padding: 1.172vw; font-size: 1.2vw}

 section.content__flatform .content__list .item .body { padding: 1.172vw}

 section.content__flatform .content__list .item .body ul li { margin-bottom: 1.172vw}

 section.content__flatform .content__list .item .body ul li:last-child { margin-bottom: 0}

 section.content__flatform .content__list .item .body ul li span.category { padding: .938vw 2.344vw; font-size: 1.2vw; line-height: 1.2em}

 section.content__flatform .content__list .item .body ul li span.name { padding: .938vw 2.344vw; font-size: 1.1vw; line-height: 1.2em}

 section.content__flatform .content__list .item .body ul li span.name::after { width: .694vw; height: .694vw} 
 }

@media(max-width: 767px) { section .h100 { height:10.256vw}

 section .content__title span { font-size: 4.103vw}

 section .content__title h3 { padding-top: 1.282vw; font-size: 8.205vw}

 section .content__title h4 { padding-top: 1.282vw; font-size: 4.615vw}

 section .content__title.mCenter { text-align: center}

 section.content__banner .banner__text { width: 78.205vw; height: 47.692vw; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("/assets/images/pages/bg-bannertext-m.png") left top no-repeat; background-size: 100% 100%}

 section.content__banner .banner__text h2 { margin-top: -1.026vw; font-size: 9.231vw}

 section.content__banner .banner__text p { padding-top: 5.128vw; font-size: 4.615vw}

 section.content__service .service__desc { font-size: 4.615vw}

 section.content__service .service__wrap { margin-top: 12.821vw; flex-direction: column}

 section.content__service .service__wrap>div:first-child { margin-top: 0}

 section.content__service .service__wrap>div:last-child>div:first-child { border-radius: 0}

 section.content__service .service__wrap>div>div { height: 53.846vw; padding: 5.128vw}

 section.content__service .service__wrap>div>div.service-01 { border-top-right-radius: 50px}

 section.content__service .service__wrap>div>div h4 { font-size: 6.154vw}

 section.content__service .service__wrap>div>div p { padding-top: 3.59vw; font-size: 3.59vw}

 section.content__feature { overflow: hidden; background: #f4f4f4}

 section.content__feature .keywords { margin-top: 10.256vw; padding-bottom: 6.25vw; background: url("/assets/images/pages/sync_cms/keywords-bg.png") center 2.833vw no-repeat; background-size: auto 100%}

 section.content__feature .keywords p { font-size: 4.615vw}

 section.content__feature .keywords ul { margin: 5.128vw auto 0; width: 100%}

 section.content__feature .keywords ul li { margin: 1.026vw; padding: 1.026vw 4.103vw; border-radius: 4.103vw; font-size: 3.59vw}

 section.content__feature ul.feature_wrap { margin: 0 auto 10.256vw; flex-wrap: initial; border: 0 none; box-shadow: 5px 5px 10px rgba(0,0,0,.2)}

 section.content__feature ul.feature_wrap>li { flex: 0 0 auto; width: 85.897vw; max-width: 100%; height: 117.949vw; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 0 none; color: #fff; background: linear-gradient(28deg, rgb(22, 133, 178) 0%, rgb(12, 158, 134) 100%)}

 section.content__feature ul.feature_wrap>li:hover { transform: scale(1)}

 section.content__feature ul.feature_wrap>li.swiper-slide-active { transition: all .2s ease-in; border-top-right-radius: 12.821vw}

 section.content__feature ul.feature_wrap>li h4 { padding: 10.256vw 0 5.128vw; min-height: 6.667vw; font-size: 5.128vw}

 section.content__feature ul.feature_wrap>li p { font-size: 3.59vw; margin: 0 20vw; height: 151px; word-break: keep-all; width: 100%; border-color: rgba(0,0,0,0); opacity: 1}

 section.content__feature .all-swiper { overflow: hidden}

 section.content__feature .all-swiper ul.feature_wrap { flex-wrap: nowrap}

 section.content__feature .all-swiper ul.feature_wrap>li { flex: 1; max-width: 100%}

 section.content__feature .swiper-controls { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 13.846vw}

 section.content__feature .swiper-controls .swiper-pagination { position: unset; width: 60%; height: 2px; background-color: #e8e8e8}

 section.content__feature .swiper-controls .swiper-pagination .swiper-pagination-progressbar-fill { background-color: #222}

 section.content__feature .swiper-controls .swiper-navigator { display: flex}

 section.content__feature .swiper-controls .swiper-navigator>div { width: 13.846vw; height: 13.846vw; border: 1px solid #ddd; position: unset; margin: 0}

 section.content__feature .swiper-controls .swiper-navigator>div::after { font-size: 6vw; font-weight: 700; color: #666}

 section.content__composition .diagram { max-width: 100%; width: 100%; margin: 10.256vw 0 2vw}

 section.content__composition .diagram img { width: 100%}

 section.content__function { flex-direction: column}

 section.content__function .inner { display: flex; flex-direction: column}

 section.content__function .content__title { width: 100%}

 section.content__function .content__title h4 { padding-top: 3.59vw}

 section.content__function .content__dial { width: 100%}

 section.content__function .content__dial .dial__wrap { position: relative; margin: 10.256vw 0 4.167vw; width: 80.769vw; height: 80.769vw}

 section.content__function .content__dial .dial__wrap button { width: 6.667vw; height: 6.667vw}

 section.content__function .content__dial .dial__wrap button::after { width: 2.051vw; height: 2.051vw}

 section.content__function .content__dial .dial__wrap button .btn__inner { display: none}

 section.content__function .dial__desc { position: unset; width: 100%; height: auto; padding: 7.692vw; border-top-right-radius: 2.604vw}

 section.content__function .dial__desc .desc__wrap { width: 100%; position: unset}

 section.content__function .dial__desc .desc__wrap>ul>li h4 { font-size: 4.615vw}

 section.content__function .dial__desc .desc__wrap>ul>li p.title { padding: 5.128vw 0 3.59vw; font-size: 6.154vw}

 section.content__function .dial__desc .desc__wrap>ul>li p.desc { font-size: 3.846vw}

 section.content__function .dial__desc .desc__wrap>ul>li ul li { padding: .513vw 0 .513vw 6.41vw; font-size: 4.615vw}

 section.content__function .dial__desc .desc__wrap>ul>li ul li::before { width: 1.538vw; height: 1.538vw; top: 3.077vw; left: 2.564vw}

 section.content__function .dial__desc .desc__wrap .pagenation { margin-top: 10.256vw}

 section.content__function .dial__desc .desc__wrap .pagenation span { font-size: 3.846vw}

 section.content__function .dial__desc .desc__wrap .pagenation span.divide { margin: 0 1.282vw; width: 30px; height: 2px}

 section.content__flatform .content__list { margin: 10.256vw 0; flex-direction: column; justify-content: center; align-items: start}

 section.content__flatform .content__list .item { width: 100%; margin-right: 0; margin-bottom: 5.128vw}

 section.content__flatform .content__list .item .head { padding: 3.846vw; font-size: 4.103vw}

 section.content__flatform .content__list .item .body { padding: 5.128vw}

 section.content__flatform .content__list .item .body ul li { margin-bottom: 5.128vw}

 section.content__flatform .content__list .item .body ul li:last-child { margin-bottom: 0}

 section.content__flatform .content__list .item .body ul li span.category { padding: 3.077vw 7.692vw; font-size: 4.103vw}

 section.content__flatform .content__list .item .body ul li span.name { padding: 2.564vw 7.692vw; font-size: 3.59vw}

 section.content__flatform .content__list .item .body ul li span.name::after { width: 2.564vw; height: 2.564vw}

 section.content__introduce .content__tabs { margin-top: 12.821vw}

 section.content__introduce .content__tabs .tab__menu { overflow-x: auto}

 section.content__introduce .content__tabs .tab__menu button { flex: 0 0 55vw; padding: 2.564vw; font-size: 4.103vw}

 section.content__introduce .content__tabs .tab__menu.fullWidth { overflow: unset}

 section.content__introduce .content__tabs .tab__menu.fullWidth button { flex: 1}

 section.content__introduce .content__tabs .tab__contents { margin: 10.256vw 0}

 section.content__introduce .content__tabs .tab__contents .item h4 { font-size: 5.128vw}

 section.content__introduce .content__tabs .tab__contents .item>p { padding-top: 5.128vw; font-size: 4.103vw}

 section.content__introduce .content__tabs .tab__contents .item>img { margin-top: 10.256vw; width: 60%}

 section.content__introduce .content__tabs .tab__contents .item .cards { margin-top: 10.256vw; flex-direction: column; justify-content: space-between; width: 100%}

 section.content__introduce .content__tabs .tab__contents .item .cards li { flex: 1; padding: 5.128vw; margin-bottom: 5.128vw; border-top-right-radius: 7.692vw}

 section.content__introduce .content__tabs .tab__contents .item .cards li .head-num { font-size: 5.128vw; padding-bottom: 2.564vw; padding-right: 5.128vw; margin-bottom: 7.692vw}

 section.content__introduce .content__tabs .tab__contents .item .cards li .head-text { font-size: 20px; font-weight: 700; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd; text-align: left; color: #333; letter-spacing: -1px}

 section.content__introduce .content__tabs .tab__contents .item .cards li .title { font-size: 4.103vw; padding-bottom: 5.128vw}

 section.content__introduce .content__tabs .tab__contents .item .cards li .desc { font-size: 3.59vw; min-height: auto}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col { flex-wrap: wrap; justify-content: start}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li { flex: 1; margin: 0 0 5.128vw}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li .head-text { font-size: 4.103vw; padding: 3.846vw}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>img { width: 100%}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div { padding: 5.128vw 0; flex-direction: column}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div div { flex: 1; padding: 0 5.128vw}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div div:nth-of-type(odd) { border-right: 0 none}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-2col li>div div:nth-of-type(even) { margin-top: 5.128vw}

 section.content__introduce .content__tabs .tab__contents .item .cards.type-text li { background-color: #f4f4f4} 
 }