html, body, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; box-sizing: border-box; color: #333; }

ul { margin: 0; }

img { max-width: 100%; vertical-align: middle; }

ul { list-style-type: none; padding: 0; }

a { text-decoration: none; }

.main-wrapper { position: relative; }

.main-wrapper #logo { position: absolute; top: 32px; left: 32px; z-index: 1; }

.main-wrapper #logo img { width: 168px; }

@media (max-width: 800px) { .main-wrapper #logo { top: 16px; left: 16px; }
  .main-wrapper #logo img { width: 100px; } }

.main-wrapper > header { position: fixed; top: 16px; right: 16px; z-index: 1000; }

.main-wrapper > header .container { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; width: 100%; }

.main-wrapper > header .container .menu { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; }

@media (max-width: 800px) { .main-wrapper > header .container .menu { margin-right: 0; position: fixed; display: block; width: 100%; top: 0; right: 0; transform: translateX(100%); padding: 0; z-index: 1; } }

.main-wrapper > header .container .menu .toggle-icon { display: none; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .toggle-icon { display: block; position: absolute; top: 0; left: -48px; width: 48px; height: 48px; background-color: transparent; z-index: 100; } }

.main-wrapper > header .container .menu .toggle-icon label[for='menu-toggle'] { transition: all .3s ease-in-out; display: block; position: relative; width: 48px; height: 48px; }

.main-wrapper > header .container .menu .toggle-icon label[for='menu-toggle'] span { width: 32px; height: 2px; position: absolute; top: 23px; right: 8px; background-color: #F7931E; transition: all .3s ease-in-out; }

.main-wrapper > header .container .menu .toggle-icon label[for='menu-toggle']::before { content: ''; display: block; position: absolute; background-color: #F7931E; width: 32px; height: 2px; top: 16px; right: 8px; transition: all .3s ease-in-out; }

.main-wrapper > header .container .menu .toggle-icon label[for='menu-toggle']::after { content: ''; display: block; position: absolute; background-color: #F7931E; width: 32px; height: 2px; right: 8px; bottom: 16px; transition: all .3s ease-in-out; }

.main-wrapper > header .container .menu #menu-toggle { display: none; }

.main-wrapper > header .container .menu #menu-toggle:checked ~ .toggle-icon { background-color: #FCDDA7; }

.main-wrapper > header .container .menu #menu-toggle:checked ~ .toggle-icon label[for='menu-toggle'] span { transform: rotateZ(45deg) translate3d(0, 0, 0); background-color: #F7931E; }

.main-wrapper > header .container .menu #menu-toggle:checked ~ .toggle-icon label[for='menu-toggle']::before { transform: rotateZ(45deg) translate3d(0, 0, 0); top: 23px; background-color: #F7931E; }

.main-wrapper > header .container .menu #menu-toggle:checked ~ .toggle-icon label[for='menu-toggle']::after { transform: rotateZ(-45deg) translate3d(0, 0, 0); bottom: 23px; background-color: #F7931E; }

@media (max-width: 800px) { .main-wrapper > header .container .menu #menu-toggle:checked ~ nav { transform: translateX(-100%); color: #fff; background-color: #FBB03B; width: 100%; } }

.main-wrapper > header .container .menu .nav { margin-left: 32px; margin-right: 32px; transition: all .3s ease-in-out; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .nav { width: 100%; height: 100vh; margin-left: 0; margin-right: 0; } }

.main-wrapper > header .container .menu .nav ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .nav ul { display: block; padding: 48px 48px; } }

.main-wrapper > header .container .menu .nav ul li { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .nav ul li { -ms-flex-pack: center; justify-content: center; border-bottom: 1px dashed #fff; } }

.main-wrapper > header .container .menu .nav ul li.active a { color: #fff; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .nav ul li.active a { color: #74B3D6; } }

.main-wrapper > header .container .menu .nav ul li a { color: #F7931E; background-color: #fff; font-size: 18px; line-height: 24px; font-weight: 600; padding: 8px 32px; border: 1px solid #F7931E; border-radius: 21px; margin: 8px; transition: all .3s ease; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .nav ul li a { color: #fff; background-color: transparent; border-color: transparent; } }

.main-wrapper > header .container .menu .nav ul li a.active, .main-wrapper > header .container .menu .nav ul li a:hover { color: #fff; background-color: #74B3D6; border-color: #74B3D6; }

@media (max-width: 800px) { .main-wrapper > header .container .menu .nav ul li a.active, .main-wrapper > header .container .menu .nav ul li a:hover { color: #FCDDA7; background-color: transparent; border-color: transparent; } }

.main-wrapper > header .container .content { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; }

@media (max-width: 800px) { .main-wrapper > header .container .content { -ms-flex-pack: center; justify-content: center; } }

.main-wrapper > header .container .content .title { -ms-flex: 0 1 40%; flex: 0 1 40%; }

@media (max-width: 800px) { .main-wrapper > header .container .content .title { -ms-flex: 0 1 200px; flex: 0 1 200px; margin-left: 16px; } }

.main-wrapper > header .container .content .header { -ms-flex: 1 1 60%; flex: 1 1 60%; }

@media (max-width: 800px) { .main-wrapper > header .container .content .header { -ms-flex: 0 1 100%; flex: 0 1 100%; } }

.main-wrapper > header .container .content .header h1 { color: #fff; font-size: 44px; line-height: 64px; padding: 40px 16px 8px; }

@media (max-width: 800px) { .main-wrapper > header .container .content .header h1 { font-size: 24px; line-height: 36px; padding: 20px 8px 8px; } }

.main-wrapper > header .container .content .header h2 { color: #fff; font-size: 24px; line-height: 32px; font-weight: 100; padding: 0px 16px; }

@media (max-width: 800px) { .main-wrapper > header .container .content .header h2 { font-size: 16px; line-height: 24px; padding: 0 8px 8px; } }

.main-wrapper > header .container .content .logo { -ms-flex: 0 1 160px; flex: 0 1 160px; padding: 220px 16px 40px; }

@media (max-width: 800px) { .main-wrapper > header .container .content .logo { -ms-flex: 0 1 80px; flex: 0 1 80px; padding: 120px 0 0 8px; margin-right: auto; } }

.main-wrapper > header .container .content .time { -ms-flex: 0 1 400px; flex: 0 1 400px; padding: 0px 16px 40px; margin: 20px 40px 0 0; }

@media (max-width: 800px) { .main-wrapper > header .container .content .time { -ms-flex: 0 1 160px; flex: 0 1 160px; padding: 0px 8px 0 0; margin: 100px 0 0 0; } }

.main-wrapper > main section .container { margin: 0 auto; }

.main-wrapper footer { padding: 16px 0; position: absolute; bottom: 0; width: 100%; }

.main-wrapper footer .container { text-align: center; }

.main-wrapper footer .container .org { margin-bottom: 16px; }

.main-wrapper footer .container .org a img { height: 68px; }

.main-wrapper footer .container p { font-size: 13px; line-height: 24px; padding: 0 16px; }

.main-wrapper #gotop { position: fixed; right: 16px; bottom: 8vh; width: 75px; height: 75px; line-height: 40px; font-size: 18px; opacity: 0; cursor: pointer; text-align: center; z-index: 1000; background-image: url(../img/gotop.png); background-size: cover; }

@media (max-width: 800px) { .main-wrapper #gotop { right: 8px; width: 40px; height: 40px; } }

.container { width: 75%; margin: 0 auto; }

@media (max-width: 800px) { .container { width: 100%; } }

.video-wrapper { position: relative; padding-top: 56.25%; height: 0; }

.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

body { margin: 0; padding: 0; font-family: 'Noto Sans TC', sans-serif; color: #333; }

body .main-wrapper #p1 { background-image: url(../img/kv-bg.gif); background-size: cover; background-repeat: no-repeat; position: relative; }

@media (max-width: 800px) { body .main-wrapper #p1 { background-image: url(../img/kv-bg-mobi.png); } }

body .main-wrapper #p1 .bg { position: absolute; left: 0; bottom: 0; width: 40%; max-width: 460px; }

@media (max-width: 800px) { body .main-wrapper #p1 .bg { display: none; } }

body .main-wrapper #p1 .container { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: 100vh; width: 85%; }

@media (max-width: 800px) { body .main-wrapper #p1 .container { display: block; width: 100%; } }

body .main-wrapper #p1 .container .title { -ms-flex: 0 1 40%; flex: 0 1 40%; padding: 0 0 180px; }

@media (max-width: 800px) { body .main-wrapper #p1 .container .title { padding: 80px 32px 80px; } }

body .main-wrapper #p1 .container .title h2 { background-color: #F7931E; color: #fff; display: inline-block; padding: 0 1vw; font-size: 1.8vw; line-height: 3.2vw; margin-bottom: 16px; }

@media (max-width: 800px) { body .main-wrapper #p1 .container .title h2 { font-size: 4.4vw; line-height: 8vw; } }

body .main-wrapper #p1 .container .title h1 { color: #333; font-size: 4.6vw; line-height: 6vw; }

@media (max-width: 800px) { body .main-wrapper #p1 .container .title h1 { font-size: 11vw; line-height: 12vw; } }

body .main-wrapper #p1 .container .title h1 span { color: #74B3D6; font-size: 3.4vw; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }

@media (max-width: 800px) { body .main-wrapper #p1 .container .title h1 span { font-size: 8.0vw; } }

body .main-wrapper #p1 .container .img { -ms-flex: 0 1 60%; flex: 0 1 60%; position: relative; }

body .main-wrapper #p1 .container .img #e1 { width: 100%; }

body .main-wrapper #p1 .container .img #e1-1 { width: 100%; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

body .main-wrapper #p1 .container .img #e2 { position: absolute; width: 29.31539%; top: 61.69154%; left: 36.57109%; z-index: 1; opacity: 0; }

body .main-wrapper #p1 .container .img #e3 { position: absolute; width: 32.59216%; top: 16.08624%; left: 47.16208%; z-index: 3; opacity: 1; }

body .main-wrapper #p1 .container .img #e3-1 { position: absolute; width: 33.29432%; top: 14.6%; left: 46.9%; z-index: 3; opacity: 0; }

body .main-wrapper #p1 .container .img #e3-2 { position: absolute; width: 4.62259%; top: 42.3%; left: 73.93%; z-index: 3; opacity: 0; }

body .main-wrapper #p1 .container .img #e4 { position: absolute; width: 35.7519%; top: 33.58209%; left: 22.29374%; z-index: 2; opacity: 0; }

body .main-wrapper #p1 .container .img #e5 { position: absolute; width: 8.77706%; top: 53%; left: 85.9%; z-index: 4; opacity: 0; }

body .main-wrapper #p1 .container .img #e5-0 { position: absolute; width: 11.70275%; top: 58%; left: 80%; z-index: 4; opacity: 0; }

body .main-wrapper #p1 .container .img #e6 { position: absolute; width: 10.35693%; top: 15.4%; left: 32.5%; z-index: 5; opacity: 0; }

body .main-wrapper #p1 .container .img #e6-0 { position: absolute; width: 14.0433%; top: 20%; left: 25%; z-index: 5; opacity: 0; }

body .main-wrapper #p2 { background-image: url(../img/part-2-bg.png); background-size: auto 100%; background-repeat: no-repeat; background-position: center right; background-color: #FCDDA7; min-height: 100vh; }

@media (max-width: 800px) { body .main-wrapper #p2 { background-image: url(../img/part-2-bg-mobi.png); background-size: 100% auto; background-position: bottom center; } }

body .main-wrapper #p2 .container { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 80px 0; }

@media (max-width: 800px) { body .main-wrapper #p2 .container { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 40px 0 120px; } }

body .main-wrapper #p2 .container .info { -ms-flex: 0 1 50%; flex: 0 1 50%; }

@media (max-width: 800px) { body .main-wrapper #p2 .container .info { -ms-flex: 0 1 100%; flex: 0 1 100%; padding: 32px; } }

body .main-wrapper #p2 .container .info h2 { color: #F7931E; display: inline-block; font-size: 45px; line-height: 64px; margin-bottom: 16px; padding: 0 16px; }

@media (max-width: 800px) { body .main-wrapper #p2 .container .info h2 { font-size: 28px; line-height: 40px; } }

body .main-wrapper #p2 .container .info p { font-size: 20px; line-height: 38px; font-weight: 500; margin-bottom: 60px; padding: 0 16px; }

@media (max-width: 800px) { body .main-wrapper #p2 .container .info p { font-size: 16px; line-height: 32px; margin-bottom: 32px; } }

body .main-wrapper #p2 .container .info a { background-color: #A2C8DD; color: #fff; font-size: 16px; font-weight: 600; line-height: 48px; display: block; width: 112px; padding: 0 32px; margin: 0 auto; border-radius: 24px; }

body .main-wrapper #p2 .container .video { -ms-flex: 0 1 50%; flex: 0 1 50%; }

@media (max-width: 800px) { body .main-wrapper #p2 .container .video { -ms-flex: 0 1 100%; flex: 0 1 100%; } }

body .main-wrapper #p2 .container .video h3 { color: #F7931E; font-size: 20px; text-align: center; line-height: 28px; padding-bottom: 20px; }

body .main-wrapper #p2 .container .video .video-border { box-sizing: border-box; border: 2px solid #fff; border-radius: 25px; max-width: 592px; margin: 0 auto; background-color: #FBB03B; position: relative; }

@media (max-width: 800px) { body .main-wrapper #p2 .container .video .video-border { max-width: 95%; } }

body .main-wrapper #p2 .container .video .video-border .video-wrapper { max-width: 560px; margin: 16px; }

body .main-wrapper #p3 .container { overflow: hidden; max-width: 1200px; padding: 80px 0; }

body .main-wrapper #p3 .container h2 { color: #74B3D6; text-align: center; font-size: 45px; line-height: 64px; padding-bottom: 15px; }

@media (max-width: 800px) { body .main-wrapper #p3 .container h2 { font-size: 28px; line-height: 40px; } }

body .main-wrapper #p3 .container > p { text-align: center; font-size: 22px; line-height: 38px; font-weight: 600; padding: 0 32px; }

@media (max-width: 800px) { body .main-wrapper #p3 .container > p { font-size: 16px; line-height: 28px; } }

body .main-wrapper #p3 .container > ul { transition: all .5s ease; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; padding: 48px 0; margin: 0 auto; }

@media (max-width: 800px) { body .main-wrapper #p3 .container > ul { padding: 16px 0; -ms-flex-wrap: wrap; flex-wrap: wrap; } }

body .main-wrapper #p3 .container > ul.active { width: 85%; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

@media (max-width: 800px) { body .main-wrapper #p3 .container > ul.active { width: 100%; }
  body .main-wrapper #p3 .container > ul.active li { padding: 0; }
  body .main-wrapper #p3 .container > ul.active li img { margin-bottom: 16px; width: 60%; }
  body .main-wrapper #p3 .container > ul.active li h3 { max-width: 80px; } }

body .main-wrapper #p3 .container > ul li { -ms-flex: 0 1 25%; flex: 0 1 25%; max-width: 25%; text-align: center; transition: all .5s ease; cursor: pointer; }

@media (max-width: 800px) { body .main-wrapper #p3 .container > ul li { -ms-flex: 0 1 160px; flex: 0 1 160px; max-width: 160px; margin-bottom: 0px; } }

body .main-wrapper #p3 .container > ul li.active h3 { color: #fff; background-color: #74B3D6; border-color: #74B3D6; }

body .main-wrapper #p3 .container > ul li img { width: 85%; margin-bottom: 24px; }

body .main-wrapper #p3 .container > ul li h3 { font-size: 19px; line-height: 32px; color: #74B3D6; background-color: #fff; padding: 0 22px; display: inline-block; border: 2px solid #74B3D6; border-radius: 18px; }

@media (max-width: 800px) { body .main-wrapper #p3 .container > ul li h3 { font-size: 16px; line-height: 24px; padding: 0 16px; border-radius: 14px; } }

body .main-wrapper #p3 .container .swiper-case-container { position: relative; height: 0; }

body .main-wrapper #p3 .container .swiper-case-container.active { height: 600px; overflow: hidden; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container.active { height: 660px; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case.active { z-index: 10; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide { -ms-flex-negative: 1; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide { -ms-flex-negative: 0; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article { margin: 8px 20px; padding-bottom: 16px; box-shadow: 0 0 10px 1px #e3e5e8; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article { margin: 8px 30px; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article .img { width: 100%; position: relative; padding-top: 66.6875%; margin-bottom: 16px; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article h4 { padding: 0 24px; font-size: 18px; line-height: 28px; height: 84px; margin-bottom: 16px; overflow: hidden; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article h4 { height: 56px; margin-bottom: 8px; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article p { padding: 0 24px; font-size: 16px; line-height: 24px; height: 96px; overflow: hidden; margin-bottom: 40px; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article p { margin-bottom: 24px; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-wrapper .swiper-slide article a { font-size: 18px; line-height: 32px; color: #fff; background-color: #F7931E; width: 100px; text-align: center; display: block; margin: 0 auto 16px; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-prev-case, body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-next-case { background-repeat: no-repeat; background-size: 12px; position: absolute; width: 40px; height: 40px; top: calc(50% - 20px); border-radius: 20px; z-index: 1; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-prev-case:focus, body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-next-case:focus { outline: none; }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-prev-case.swiper-button-disabled, body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-next-case.swiper-button-disabled { opacity: 0; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-prev-case, body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-next-case { width: 20px; height: 40px; top: 28%; display: block; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-prev-case { background-image: url(../img/arrow-left_w.png); background-color: #74B3D6; background-position: center; left: 4px; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-prev-case { background-image: url(../img/arrow-left.svg); left: 4px; background-color: transparent; background-size: contain; } }

body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-next-case { background-image: url(../img/arrow-right_w.png); right: 4px; background-color: #74B3D6; background-position: center; }

@media (max-width: 800px) { body .main-wrapper #p3 .container .swiper-case-container .swiper-case .swiper-button-next-case { background-image: url(../img/arrow-right.svg); right: 4px; background-color: transparent; background-size: contain; } }

body .main-wrapper #p4 { background-color: #A2C8DD; position: relative; z-index: 1; }

body .main-wrapper #p4 .container { padding: 48px 0; }

@media (max-width: 800px) { body .main-wrapper #p4 .container { padding: 48px 0; } }

body .main-wrapper #p4 .container h2 { color: #fff; text-align: center; font-size: 45px; line-height: 64px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container h2 { font-size: 28px; line-height: 40px; } }

body .main-wrapper #p4 .container > p { color: #fff; text-align: center; font-size: 22px; line-height: 38px; font-weight: 600; padding: 0 16px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container > p { font-size: 16px; line-height: 28px; } }

body .main-wrapper #p4 .container > .logo { text-align: center; vertical-align: bottom; }

body .main-wrapper #p4 .container > .logo a { display: inline-block; }

body .main-wrapper #p4 .container > .logo a img { height: 56px; }

body .main-wrapper #p4 .container > .logo span { display: inline-block; vertical-align: bottom; height: 36px; }

body .main-wrapper #p4 .container .swiper-p4 { position: relative; }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article { padding: 8px 80px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article { padding: 16px 0; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article:nth-of-type(2n) a { -ms-flex-direction: row-reverse; flex-direction: row-reverse; border-top: 1px solid #fff; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article:nth-of-type(2n) a { -ms-flex-direction: column; flex-direction: column; border-color: transparent; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 32px 16px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a { -ms-flex-direction: column; flex-direction: column; padding: 0 16px; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a img { -ms-flex: 0 0 300px; flex: 0 0 300px; width: 300px; height: 300px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a img { margin: 0 auto; -ms-flex: 0 0 180px; flex: 0 0 180px; width: 180px; height: 180px; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a .txt { padding: 16px 32px; vertical-align: middle; max-width: 100%; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a .txt { padding: 8px 32px 0; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a .txt h3 { font-size: 26px; line-height: 32px; margin-bottom: 16px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a .txt h3 { text-align: center; font-size: 20px; line-height: 28px; margin-bottom: 0; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a .txt p { font-size: 18px; line-height: 32px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-wrapper .swiper-slide article a .txt p { text-align: center; font-size: 16px; line-height: 26px; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-button-prev-p4, body .main-wrapper #p4 .container .swiper-p4 .swiper-button-next-p4 { background-repeat: no-repeat; background-size: contain; width: 60px; height: 60px; position: absolute; top: 47.2%; z-index: 1; }

body .main-wrapper #p4 .container .swiper-p4 .swiper-button-prev-p4:focus, body .main-wrapper #p4 .container .swiper-p4 .swiper-button-next-p4:focus { outline: none; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-button-prev-p4, body .main-wrapper #p4 .container .swiper-p4 .swiper-button-next-p4 { width: 30px; height: 60px; top: 40%; } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-button-prev-p4 { background-image: url(../img/arrow-left.png); left: 0px; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-button-prev-p4 { background-image: url(../img/arrow-left-mobi.svg); } }

body .main-wrapper #p4 .container .swiper-p4 .swiper-button-next-p4 { background-image: url(../img/arrow-right.png); right: 0; }

@media (max-width: 800px) { body .main-wrapper #p4 .container .swiper-p4 .swiper-button-next-p4 { background-image: url(../img/arrow-right-mobi.svg); } }

body .main-wrapper #p5 { background-image: url(../img/part-5-bg.png); background-size: 100% auto; background-repeat: no-repeat; position: relative; padding: 80px 0 360px; }

@media (max-width: 800px) { body .main-wrapper #p5 { background-image: url(../img/part-5-bg-mobi.jpg); padding: 40px 16px 360px; } }

body .main-wrapper #p5::before { content: ''; display: block; width: 100%; height: 80px; margin-top: -81px; background-color: #A2C8DD; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }

@media (max-width: 800px) { body .main-wrapper #p5::before { height: 40px; margin-top: -41px; } }

body .main-wrapper #p5 .container { padding: 48px 0; }

body .main-wrapper #p5 .container .p5-bg2 { position: absolute; bottom: 0; right: 0; max-height: 274px; }

@media (max-width: 800px) { body .main-wrapper #p5 .container .p5-bg2 { display: none; } }

body .main-wrapper #p5 .container h2 { color: #F7931E; text-align: center; font-size: 45px; line-height: 88px; }

@media (max-width: 800px) { body .main-wrapper #p5 .container h2 { font-size: 28px; line-height: 56px; } }

body .main-wrapper #p5 .container > p { text-align: center; font-size: 22px; line-height: 38px; font-weight: 600; margin-bottom: 32px; }

@media (max-width: 800px) { body .main-wrapper #p5 .container > p { font-size: 16px; line-height: 28px; } }

body .main-wrapper #p5 .container .video-box { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; }

@media (max-width: 800px) { body .main-wrapper #p5 .container .video-box { -ms-flex-wrap: wrap; flex-wrap: wrap; } }

body .main-wrapper #p5 .container .video-box .nav { list-style: none; padding-left: 0; margin: 0 40px 0 0; }

@media (max-width: 800px) { body .main-wrapper #p5 .container .video-box .nav { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: start; align-items: flex-start; -ms-flex-order: 1; order: 1; } }

body .main-wrapper #p5 .container .video-box .nav li { position: relative; width: 240px; height: 135px; padding: 0px; border: rgba(0, 0, 0, 0.12) solid 4px; margin-bottom: 24px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

@media (max-width: 800px) { body .main-wrapper #p5 .container .video-box .nav li { width: 128px; height: 72px; margin-right: 12px; } }

body .main-wrapper #p5 .container .video-box .nav li:after { content: ''; position: absolute; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent; display: block; width: 0; z-index: 1; right: -15px; top: 53px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

@media (max-width: 800px) { body .main-wrapper #p5 .container .video-box .nav li:after { content: none; } }

body .main-wrapper #p5 .container .video-box .nav li:before { content: ''; position: absolute; border-style: solid; border-width: 18px 0 18px 18px; border-color: transparent; display: block; width: 0; z-index: 0; right: -22px; top: 50px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

@media (max-width: 800px) { body .main-wrapper #p5 .container .video-box .nav li:before { content: none; } }

body .main-wrapper #p5 .container .video-box .nav li img { width: 100%; }

body .main-wrapper #p5 .container .video-box .nav li.active, body .main-wrapper #p5 .container .video-box .nav li:hover { border-color: #F7931E; }

body .main-wrapper #p5 .container .video-box .nav li.active:after { border-color: transparent #F7931E; }

body .main-wrapper #p5 .container .video-box .nav li.active:before { border-color: transparent #F7931E; }

body .main-wrapper #p5 .container .video-box .video { -ms-flex: 1 1 auto; flex: 1 1 auto; background-color: rgba(0, 0, 0, 0.12); box-shadow: 0px 16px 10px -8px rgba(0, 0, 0, 0.12); }

@media (max-width: 800px) { body .main-wrapper #p5 .container .video-box .video { width: 100%; margin-bottom: 32px; } }

body .main-wrapper #p5 .container .video-box .video .video-container { position: relative; padding-bottom: 56.25%; border: 10px solid #F7931E; }

body .main-wrapper #p5 .container .video-box .video .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*# sourceMappingURL=style.css.map */