a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, shops, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section, shops {
	display: block
}
body {
	line-height: 1;
	background: #000000
}
ol, ul {
	list-style: none
}
blockquote, q {
	quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
	content: '';
	content: none
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
.flex-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}
.flex-box>* {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1
}
.flex-box.row-reverse {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse
}
section img {
	width: 100%
}
section p:not(td) {
	font-size: 18px
}
.text:not(td)>*, .text:not(td) h2, .text:not(td) h4, .text:not(td) p {
	color: #ffffff
}
.text:not(td) h2 {
	font-size: 48px;
	line-height: 1.2!important;
	color: #222222;
	text-transform: uppercase
}
.flex-box .bg-image {
	background-size: cover;
	background-position: center;
	min-height: 650px;
	margin: 0 auto
}
.small {
	font-size: 85%!important;
	color: #d1d1d1
}
.btn-circle-bo {
	width: 150px;
	padding: 10px;
	text-align: center;
	color: #222222;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #ffffff!important;
	border-radius: 30px;
	z-index: 1
}
#luffy .has-animation.animate-in:before {
	background-color: #D8A73C
}
#zoro .has-animation.animate-in:before {
	background-color: #5ED394
}
#chopper .has-animation.animate-in:before {
	background-color: #46AEB8
}
.has-animation {
	position: relative
}
.has-animation h2, .has-animation img, .has-animation p {
	opacity: 0
}
.has-animation.animate-in h2, .has-animation.animate-in img, .has-animation.animate-in p {
	-webkit-animation: textHidden 0.1s 1.1s forwards;
	animation: textHidden 0.1s 1.1s forwards
}
.has-animation.animate-in:after, .has-animation.animate-in:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	z-index: 10
}
.has-animation.animate-in:after {
	background-color: #202020;
	-webkit-animation-delay: .5s;
	animation-delay: .5s
}
.has-animation.animation-ltr.animate-in:before {
	-webkit-animation: revealLTR 1.8s ease;
	animation: revealLTR 1.8s ease
}
.has-animation.animation-ltr.animate-in:after {
	-webkit-animation: revealLTR 1s .6s ease;
	animation: revealLTR 1s .6s ease
}
.has-animation.animation-rtl.animate-in:before {
	-webkit-animation: revealRTL 1.8s ease;
	animation: revealRTL 1.8s ease
}
.has-animation.animation-rtl.animate-in:after {
	-webkit-animation: revealRTL 1s .6s ease;
	animation: revealRTL 1s .6s ease
}
.has-animation.animate-in2 h2, .has-animation.animate-in2 img, .has-animation.animate-in2 p {
	-webkit-animation: textHidden 0.1s 1.1s forwards;
	animation: textHidden 0.1s 1.1s forwards
}
.has-animation.animate-in2:after, .has-animation.animate-in2:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	z-index: 10
}
.has-animation.animate-in2:after {
	background-color: #202020;
	-webkit-animation-delay: .5s;
	animation-delay: .5s
}
.has-animation.animate-in2:before {
	background-color: #46AEB8
}
.has-animation.animation-ltr.animate-in2:before {
	-webkit-animation: revealLTR 1.8s ease;
	animation: revealLTR 1.8s ease
}
.has-animation.animation-ltr.animate-in2:after {
	-webkit-animation: revealLTR 1s .6s ease;
	animation: revealLTR 1s .6s ease
}
.has-animation.animation-rtl.animate-in2:before {
	-webkit-animation: revealRTL 1.8s ease;
	animation: revealRTL 1.8s ease
}
.has-animation.animation-rtl.animate-in2:after {
	-webkit-animation: revealRTL 1s .6s ease;
	animation: revealRTL 1s .6s ease
}
@-webkit-keyframes revealRTL {
0% {
width:0;
right:0
}
65% {
width:100%;
right:0
}
to {
width:0;
right:100%
}
}
@keyframes revealRTL {
0% {
width:0;
right:0
}
65% {
width:100%;
right:0
}
to {
width:0;
right:100%
}
}
@-webkit-keyframes revealLTR {
0% {
width:0;
left:0
}
65% {
width:100%;
left:0
}
to {
width:0;
left:100%
}
}
@keyframes revealLTR {
0% {
width:0;
left:0
}
65% {
width:100%;
left:0
}
to {
width:0;
left:100%
}
}
@-webkit-keyframes textHidden {
0% {
opacity:0
}
to {
opacity:1
}
}
@keyframes textHidden {
0% {
opacity:0
}
to {
opacity:1
}
}
#hero {
	line-height: 0;
	height: 60vw;
	overflow: hidden;
	position: relative;
	background-color: #000000;
	z-index: 20;
	background-size: cover;
	margin-top: 64px
}
#hero>div {
	margin-top: 0;
	padding-bottom: 0;
	background-position: center;
	background-size: cover;
	display: block;
	position: relative;
	min-height: auto
}
#hero .hero-image-wrapper {
	position: absolute;
	top: 0;
	height: 60vw;
	z-index: 1
}
#hero .hero-bc {
	margin-top: 0;
	position: absolute;
	top: 0;
	width: 100vw;
	height: 65vw;
	background-size: cover;
	z-index: 1
}
#hero .hero-bc-front {
	margin-top: 0;
	position: absolute;
	bottom: 0;
	height: 1024px;
	width: 100vw;
	background-size: cover;
	z-index: 6
}
#hero .watch {
	width: 40%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 65%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10
}
#hero .title {
	width: 28%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 16%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 6
}
#hero .luffy {
	width: 100%;
	max-width: 720px;
	position: absolute;
	left: 53%;
	top: 38%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 5;
	opacity: 0
}
#hero .zoro {
	width: 100%;
	max-width: 700px;
	position: absolute;
	left: 70%;
	top: 30%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 4;
	opacity: 0
}
#hero .chopper {
	width: 100%;
	max-width: 345px;
	z-index: 4;
	position: absolute;
	left: 25%;
	top: 23%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 4;
	opacity: 0
}
#hero .flag {
	width: 100%;
	max-width: 85vw;
	z-index: 3;
	position: absolute;
	left: 50%;
	top: 40%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

@media (min-width:1024px) {
section.hero {
	height: 48vw
}
}

@media (max-width:767px) {
#hero {
	height: auto
}
}
#pin {
	z-index: 9
}
#device {
	position: relative;
	width: 100%;
	height: auto!important;
	line-height: 0;
	background: url("../images/onepiece-intro-bg.jpg");
	background-size: cover;
	overflow: hidden;
	position: relative;
	padding-top: 0;
	z-index: 15
}
#device .intro {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden
}
#device .intro .content {
	position: relative;
	margin-top: 10vh;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	z-index: 6
}
#device .intro .content .has-animation {
	width: 100%;
	margin: 0 auto;
	max-width: 800px
}
#device .intro .content h2 {
	color: #ffffff;
	font-size: 48px;
	margin: 0 auto;
	line-height: 1.4!important;
	width: 100%;
	text-align: center;
	max-width: 800px
}
#device .intro .content h2 span {
	font-size: 4vw;
	display: contents;
	color: #ffffff;
	font-weight: bold
}
#device .intro .content p {
	color: #ffffff;
	font-size: 18px;
	padding: 0;
	margin-bottom: 20px;
	font-weight: bold
}
#device .intro .content img {
	width: 100%;
	max-width: 300px;
	margin: 0 auto 20px auto
}
#device [class*=" icon-"]:before, #device [class^=icon-]:before {
	margin-bottom: 5px
}
#video {
	position: relative;
	background: #333;
	height: 50vh;
	width: 60%;
	margin: 30px auto 0 auto;
	min-height: 480px;
	background-size: cover;
	background-position: center;
	overflow: hidden
}
#video:after {
	content: "";
	background: #111111;
	width: 100%;
	height: 100%;
	opacity: .5;
	position: absolute;
	left: 0;
	top: 0
}
#video:before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50
}
#video .video-bc {
	position: relative;
	min-height: 600px;
	height: auto;
	opacity: .8;
	background: center center no-repeat;
	background-position: 100% 0;
	background-size: cover
}
.slogan-container {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translateY(-50%, -50%);
	width: 90%;
	z-index: 100
}
.slogan-container a {
	text-decoration: none;
	display: block;
	text-align: center
}
.slogan-container a:hover {
	text-decoration: none
}
.slogan-container a:hover circle {
	fill: #fff;
	opacity: 0.8
}
.slogan-container a:hover path {
	fill: #000
}
.slogan-container h2, .slogan-container span {
	font-size: 28px;
	letter-spacing: 10px;
	display: inline-block;
	color: #fff;
	font-weight: bold;
	margin: 0;
	vertical-align: middle
}
.slogan-container span {
	display: none
}
#video h2:first-letter, #video span:first-letter {
	margin-left: 30px
}
#video .play-video-button {
	width: 70px;
	height: 70px;
	vertical-align: middle
}
#video video {
	width: 100%;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%)
}

@media (max-width:900px) {
#video video {
	width: initial;
	height: 100%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translateY(-50%, -50%)
}
}

@media (max-width:767px) {
.mobisvglehide {
	display: none!important
}
.mobilehide {
	display: none!important
}
.slogan-container h2, .slogan-container span {
	display: block;
	line-height: 1.8
}
.slogan-container span {
	margin-bottom: 20px
}
.slogan-container a:hover {
	text-decoration: none
}
}

@media (max-width:599px) {
#video {
	height: 400px;
	background-position: 700px center
}
}
#device .op-menu {
	height: 70vh;
	position: relative;
	display: block
}
#device .op-menu .container {
	width: 100%!important;
	max-width: 1170px!important;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center
}
#device .op-menu-m {
	display: none
}
#feature-item {
	width: 100%;
	height: auto;
	min-height: 200px;
	line-height: 0;
	background-size: cover;
	overflow: hidden;
	position: relative;
	padding-top: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 5
}
#feature-item .container {
	max-width: 100vw
}
#feature-item .feature-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 30vh;
	overflow: hidden;
	min-height: 200px
}
#feature-item .feature-item .container {
	width: 100%;
	max-width: 1200px;
	padding-top: 0
}
#feature-item .feature-item span {
	font-size: 12px;
	color: #d1d1d1;
	display: inline-block
}
#feature-item .feature-item ol {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 1rem;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}
#feature-item .feature-item li {
	width: calc(100%/6 - 10px);
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: start;
	text-align: center;
	padding: 0 1em
}
#feature-item .feature-item p {
	color: #fff;
	font-size: 1em!important;
	line-height: 1.4em!important
}
#feature-item .feature-item img {
	max-width: 80px;
	margin-bottom: 10px
}
svg:not(:root) {
	overflow: hidden;
	color: #fff;
	fill: white
}
.gh__logo__svg {
	overflow: hidden;
	color: #000000!important;
	fill: #000000!important
}
#luffy {
	position: relative;
	background: url("../images/onepiece-producy-bg-luffy.jpg");
	background-size: cover;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	z-index: 20
}
#luffy .container {
	width: 100%!important;
	height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#luffy .container .people {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	position: absolute;
	bottom: -10%;
	right: -200px;
	z-index: 10;
	opacity: 0
}
#luffy .container .watch {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	position: absolute;
	top: 65%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
	opacity: 0
}
#luffy .container .word {
	width: 100%;
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 3%;
	left: 0;
	opacity: 0
}
#luffy .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 25%;
	position: absolute;
	text-align: left;
	top: 68%;
	left: 5%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	z-index: 20
}
#luffy .container h2 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 60px
}
#luffy .container h3 {
	text-transform: uppercase;
	color: #D8A73C;
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 0px!important
}
#luffy .container p {
	color: #ffffff;
	font-size: 16px;
	width: 100%;
	margin-bottom: 20px!important
}
#luffy .container .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1
}
#luffy .container .btn-circle-bo {
	width: 150px;
	padding: 10px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #D8A73C;
	background-color: #D8A73C!important;
	border-radius: 30px;
	z-index: 1
}
#luffy .container .bg {
	position: absolute;
	left: 0;
	bottom: 0;
	background: url("../images/onepiece-producy-bg-luffy-sign.png");
	background-size: cover;
	width: 100%;
	height: 110vh;
	z-index: 10
}
#luffy-band {
	position: relative;
	background: url("../images/onepiece-product-bands-bg.jpg");
	width: 100%;
	height: auto;
	overflow: hidden;
	background-position: top center;
	background-size: cover;
	z-index: 20;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row
}
#luffy-band .container {
	width: 100%!important;
	height: 80vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row
}
#luffy-band .container .band01.band02 {
	height: 80vh
}
#luffy-band .container .band01 {
	width: 60%;
	background: url("../images/onepiece-product-luffy-bands01.png");
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative
}
#luffy-band .container .band02 {
	width: 40%;
	background: url("../images/onepiece-product-luffy-bands02.png");
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative
}
#luffy-band .container .text01, #luffy-band .container .text02 {
	top: 66vh
}
#luffy-band .container .text01 {
	background-color: #ffffff;
	color: #000;
	position: absolute;
	left: 44%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%)
}
#luffy-band .container .text01 p {
	font-size: 21px;
	font-weight: 800;
	padding: 10px 30px;
	margin: 0
}
#luffy-band .container .text02 {
	background-color: #ffffff;
	color: #000;
	position: absolute;
	right: 40%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%)
}
#luffy-band .container .text02 p {
	font-size: 21px;
	font-weight: 800;
	padding: 10px 30px;
	margin: 0
}
#zoro {
	position: relative;
	background: url("../images/onepiece-producy-bg-zoro.jpg");
	background-size: cover;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	z-index: 20
}
#zoro .container {
	width: 100%!important;
	height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#zoro .container .people {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	position: absolute;
	bottom: -2vw;
	left: -300px;
	z-index: 10;
	opacity: 0
}
#zoro .container .watch {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	position: absolute;
	top: 65%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
	opacity: 0
}
#zoro .container .word {
	width: 100%;
	max-width: 55%;
	margin: 0 auto;
	position: absolute;
	top: 3%;
	right: 3%;
	opacity: 0
}
#zoro .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 25%;
	position: absolute;
	text-align: left;
	top: 73%;
	right: 5%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	z-index: 20
}
#zoro .container h2 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 60px
}
#zoro .container h3 {
	text-transform: uppercase;
	color: #5ED394;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2!important;
	margin-bottom: 0px!important
}
#zoro .container h3 span {
	display: inline-block
}
#zoro .container p {
	color: #ffffff;
	font-size: 16px;
	width: 100%;
	margin-bottom: 20px!important
}
#zoro .container .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1
}
#zoro .container .btn-circle-bo {
	width: 150px;
	padding: 10px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #5ED394!important;
	border-radius: 30px;
	z-index: 1
}
#zoro .container .bg {
	position: absolute;
	left: 80px;
	bottom: 55px;
	background: url("../images/onepiece-producy-bg-zoro-sign.png");
	background-size: cover;
	width: 100%;
	height: 100vh;
	z-index: 8
}
#zoro-band {
	position: relative;
	background: url("../images/onepiece-product-bands-bg.jpg");
	width: 100%;
	height: auto;
	overflow: hidden;
	background-position: top center;
	background-size: cover;
	z-index: 20;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row
}
#zoro-band .container {
	width: 100%!important;
	height: 80vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row
}
#zoro-band .container .band01.band02 {
	height: 80vh
}
#zoro-band .container .band01 {
	width: 60%;
	background: url("../images/onepiece-product-zoro-bands01.png");
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative
}
#zoro-band .container .band02 {
	width: 40%;
	background: url("../images/onepiece-product-zoro-bands02.png");
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative
}
#zoro-band .container .text01, #zoro-band .container .text02 {
	top: 66vh
}
#zoro-band .container .text01 {
	background-color: #ffffff;
	color: #000;
	position: absolute;
	left: 44%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%)
}
#zoro-band .container .text01 p {
	font-size: 21px;
	font-weight: 800;
	padding: 10px 30px;
	margin: 0
}
#zoro-band .container .text02 {
	background-color: #ffffff;
	color: #000;
	position: absolute;
	right: 40%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%)
}
#zoro-band .container .text02 p {
	font-size: 21px;
	font-weight: 800;
	padding: 10px 30px;
	margin: 0
}
#chopper {
	position: relative;
	background: url("../images/onepiece-producy-bg-chopper.jpg");
	background-size: cover;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	z-index: 20
}
#chopper .container {
	width: 100%!important;
	height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#chopper .container .people {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	position: absolute;
	bottom: 3%;
	right: -100px;
	z-index: 10;
	opacity: 0
}
#chopper .container .watch {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	position: absolute;
	top: 65%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
	opacity: 0
}
#chopper .container .word {
	width: 100%;
	max-width: 55%;
	margin: 0 auto;
	position: absolute;
	top: 5%;
	left: 5%;
	opacity: 0
}
#chopper .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 25%;
	position: absolute;
	text-align: left;
	top: 65%;
	left: 5%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	z-index: 20
}
#chopper .container h2 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 60px
}
#chopper .container h3 {
	text-transform: uppercase;
	color: #46AEB8;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2!important;
	margin-bottom: 10px!important
}
#chopper .container h3 span {
	display: inline-block
}
#chopper .container p {
	color: #ffffff;
	font-size: 16px;
	width: 100%;
	margin-bottom: 20px!important
}
#chopper .container .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1
}
#chopper .container .btn-circle-bo {
	width: 150px;
	padding: 10px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #46AEB8!important;
	border-radius: 30px;
	z-index: 1
}
#chopper .container .bg {
	position: absolute;
	left: 0;
	bottom: 0;
	background: url("../images/onepiece-producy-bg-chopper-sign.png");
	background-size: cover;
	width: 100%;
	height: 110vh;
	z-index: 10
}
#chopper-band {
	position: relative;
	background: url("../images/onepiece-product-bands-bg.jpg");
	width: 100%;
	height: auto;
	overflow: hidden;
	background-position: top center;
	background-size: cover;
	z-index: 20;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row
}
#chopper-band .container {
	width: 100%!important;
	height: 80vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row
}
#chopper-band .container .band01.band02 {
	height: 80vh
}
#chopper-band .container .band01 {
	width: 60%;
	background: url("../images/onepiece-product-chopper-bands01.png");
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative
}
#chopper-band .container .band02 {
	width: 40%;
	background: url("../images/onepiece-product-chopper-bands02.png");
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative
}
#chopper-band .container .text01, #chopper-band .container .text02 {
	top: 66vh
}
#chopper-band .container .text01 {
	background-color: #ffffff;
	color: #000;
	position: absolute;
	left: 44%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%)
}
#chopper-band .container .text01 p {
	font-size: 21px;
	font-weight: 800;
	padding: 10px 30px;
	margin: 0
}
#chopper-band .container .text02 {
	background-color: #ffffff;
	color: #000;
	position: absolute;
	right: 40%;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%)
}
#chopper-band .container .text02 p {
	font-size: 21px;
	font-weight: 800;
	padding: 10px 30px;
	margin: 0
}
#gallery {
	background: #4696b8;
	position: relative;
	z-index: 20
}
#gallery img {
	position: absolute;
	bottom: 5%;
	left: 3%;
	width: 100%;
	max-width: 650px;
	z-index: 10
}
#gallery .text {
	position: absolute;
	top: 50%;
	left: 18%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: left;
	z-index: 9
}
#gallery .text h2 {
	color: #ffffff;
	text-align: left
}
#gallery .container .text {
	margin: 3vw auto 3vw auto
}
#gallery .container p {
	color: #ffffff;
	width: 100%;
	text-align: center;
	margin: auto;
	margin-bottom: 30px
}
#gallery .container span {
	display: block;
	font-size: 85%!important;
	color: #222222
}
#gallery .wrapper {
	position: relative
}
#solar {
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 10
}
#solar .container {
	width: 100%!important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
#solar .container .product {
	width: 100%;
	max-width: 800px
}
#solar .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 35%;
	text-align: left
}
#solar .container .text img {
	width: 100%;
	max-width: 100px;
	margin-bottom: 20px
}
#solar .container .text h2 {
	text-transform: uppercase;
	color: #ffffff
}
#solar .container .text p {
	color: #ffffff;
	width: 100%;
	margin-bottom: 10px
}
#solar .container .text .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1;
	margin-bottom: 30px
}
#solar .container .text a {
	color: #222222
}
#solar .bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	z-index: -1
}
#MIL-STD-810 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	z-index: 9
}
#MIL-STD-810 .container {
	position: fixed;
	top: 20%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	opacity: 0
}
#MIL-STD-810 .container .text {
	z-index: 5
}
#MIL-STD-810 .container h2 {
	color: #ffffff;
	text-transform: uppercase;
	line-height: 1.2!important
}
#MIL-STD-810 .container p {
	color: #ffffff;
	width: 100%;
	margin-bottom: 30px
}
#MIL-STD-810 .container span {
	display: block;
	font-size: 85%!important;
	color: #222222
}
#MIL-STD-810 .product {
	opacity: 0;
	display: block;
	position: fixed;
	bottom: 0px;
	z-index: -1
}
#MIL-STD-810 .product img {
	height: 88vh;
	padding-left: 3vw
}
#MIL-STD-810 .bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	z-index: -1
}
#gps {
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 8
}
#gps .container {
	width: 100%!important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
#gps .container .product {
	width: 100%;
	max-width: 800px
}
#gps .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 35%;
	text-align: left
}
#gps .container .text img {
	width: 100%;
	max-width: 100px;
	margin-bottom: 20px
}
#gps .container .text h2 {
	text-transform: uppercase;
	color: #ffffff
}
#gps .container .text p {
	color: #ffffff;
	width: 100%;
	margin-bottom: 10px
}
#gps .container .text .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1;
	margin-bottom: 30px
}
#gps .container .text a {
	color: #222222
}
#gps .bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	z-index: -1
}
#sports {
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 9
}
#sports .container {
	width: 100%!important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: start;
	margin-left: 10vw
}
#sports .container .product {
	width: 100%;
	max-width: 800px
}
#sports .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 50%;
	text-align: left
}
#sports .container .text img {
	width: 100%;
	max-width: 100px;
	margin-bottom: 20px
}
#sports .container .text h2 {
	text-transform: uppercase;
	color: #ffffff
}
#sports .container .text p {
	color: #ffffff;
	width: 100%;
	margin-bottom: 10px
}
#sports .container .text .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1;
	margin-bottom: 30px
}
#sports .container .text a {
	color: #222222
}
#sports .product {
	opacity: 0;
	display: block;
	position: fixed;
	bottom: 5vh;
	padding-left: 3vw;
	z-index: -1
}
#sports .product img {
	height: 80vh
}
#sports .product .people {
	display: block
}
#sports .product .people-m {
	display: none
}
#sports .bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	z-index: -1
}
#health {
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-position: top center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 2
}
#health .container {
	width: 100%!important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
#health .container .product {
	width: 100%;
	max-width: 800px
}
#health .container .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 30%;
	text-align: left
}
#health .container .text img {
	width: 100%;
	max-width: 100px;
	margin-bottom: 20px
}
#health .container .text h2 {
	text-transform: uppercase;
	color: #ffffff
}
#health .container .text p {
	color: #ffffff;
	width: 100%;
	margin-bottom: 10px
}
#health .container .text .small {
	display: block;
	font-size: .9rem;
	color: #d1d1d1;
	margin-bottom: 30px
}
#health .container .text a {
	color: #222222
}
#health .bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	z-index: -1
}
#smartlife {
	background: url("../images/onepiece-connect.jpg");
	background-size: cover;
	position: relative;
	width: 100%;
	height: 220vh;
	overflow: hidden;
	background-position: top center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}
#smartlife .text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: start;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto;
	text-align: center
}
#smartlife h2 {
	color: #ffffff
}
#smartlife p {
	color: #ffffff;
	width: 60%;
	margin-bottom: 30px
}
#smartlife .connect {
	margin-top: 20vh;
	margin-bottom: 50px
}
#smartlife .connect .icon {
	width: 100%;
	max-width: 150px;
	margin: 0 auto
}
#smartlife .connect h2, #smartlife .connect p {
	margin: 0 auto
}
#smartlife .connect .connect-iq {
	width: 70%;
	max-width: 600px
}
#smartlife .connect img {
	max-width: 1200px;
	margin-top: 30px
}
#smartlife .garminpay {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	position: absolute;
	bottom: 100px
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 700px
}
#smartlife .garminpay .text {
	text-align: left
}
#smartlife .garminpay .text h2 {
	text-align: left;
	margin: 0
}
#smartlife .garminpay .text p {
	text-align: left
}
section#comparison {
	background-color: #000000;
	padding-top: 10vh;
	padding-bottom: 10vh;
	z-index: 20
}
section#comparison p {
	color: #777777;
	font-size: 12px;
	margin:30px 15px 0;
	text-align:left;
}
section#comparison h2, section#spec h2 {
	font-weight: initial;
	color: #ffffff;
	text-transform: uppercase
}
section#comparison table, section#spec table {
	table-layout: fixed;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto
}
section#comparison table figure img, section#spec table figure img {
	max-width: 80px
}
section#comparison table td, section#comparison table th, section#spec table td, section#spec table th {
	border: none;
	color: #ffffff
}
section#comparison table .text b, section#comparison table thead td, section#spec table .text b, section#spec table thead td {
	text-align: center
}
section#comparison table tfoot p, section#comparison table thead p, section#spec table tfoot p, section#spec table thead p {
	margin-bottom: 0;
	font-size: 14px!important;
	font-weight: bold;
	color: #ffffff
}
section#comparison table tfoot span.price, section#comparison table thead span.price, section#spec table tfoot span.price, section#spec table thead span.price {
	font-size: 13px;
	color: #ffffff
}
section#comparison table tfoot span.price small, section#comparison table thead span.price small, section#spec table tfoot span.price small, section#spec table thead span.price small {
	display: inherit;
	font-style: normal;
	font-size: inherit
}
section#comparison table tbody tr, section#spec table tbody tr {
	border-top: 1px solid #ccc
}
section#comparison table tbody tr:last-child, section#spec table tbody tr:last-child {
	border-bottom: 1px solid #ccc
}
section#comparison table tbody td, section#spec table tbody td {
	line-height: 25px;
	vertical-align: top!important;
	text-align: center;
	font-size: 13px;
	padding: 10px 5px
}
section#comparison table tbody td.row-label, section#spec table tbody td.row-label {
	text-align: left
}
section#comparison table tbody td.dot, section#spec table tbody td.dot {
	font-family: "Helvetica Neue", sans-serif!important;
	font-size: 30px!important
}
section#comparison table tbody td.dot span, section#spec table tbody td.dot span {
	display: block;
	font-size: 13px;
	color: #ffffff;
	font-family: Helvetica, "Microsoft JhengHei", sans-serif!important
}
#comparison.mobile .container .product-list, #comparison.mobile .container>h3, #comparison .product-list ul li p, [id*=comparison].mobile .container .product-list, [id*=comparison].mobile .container>h3, [id*=comparison] .product-list ul li p {
	color: #fff
}
#comparison .product-list ul li, [id*=comparison] .product-list ul li {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-width: 120px;
	max-width: 120px;
	margin: 10px 0;
	list-style: none
}
#comparison .product-list ul li.select span:before, [id*=comparison] .product-list ul li.select span:before {
	background-color: #ffffff
}
#comparison #spec {
	background-color: #111111!important
}
#comparison #spec table.p-sticky, [id*=comparison] #spec table.p-sticky {
	background-color: #111111!important
}
#comparison #spec table a.re-compare, [id*=comparison] #spec table a.re-compare {
	margin-bottom: 0;
	display: none;
	color: #ffffff!important;
	border-color: #ffffff!important
}
#comparison.mobile .container a.compare {
	display: inline-block;
	border: 1px solid #ffffff;
	border-color: #ffffff!important;
	color: #ffffff!important
}
#comparison.mobile .container .btn-grey-empty:hover {
	border-color: #484847!important
}
#comparison #spec table td.pd-name p, #comparison #spec table th.pd-name p, [id*=comparison] #spec table td.pd-name p, [id*=comparison] #spec table th.pd-name p {
	font-weight: bold;
	font-size: 14px!important;
	line-height: 20px!important;
	margin: 5px 0
}
#comparison #spec table a.re-compare, [id*=comparison] #spec table a.re-compare {
	color: #aaaaaa!important;
	border-color: #aaaaaa!important
}
#comparison.mobile .container a.compare {
	display: inline-block;
	border: 1px solid #ffffff;
	border-color: #ffffff!important;
	color: #ffffff!important
}
#comparison.mobile .container .btn-grey-empty:hover {
	border-color: #484847!important
}
#comparison #spec table td.pd-name p, #comparison #spec table th.pd-name p, [id*=comparison] #spec table td.pd-name p, [id*=comparison] #spec table th.pd-name p {
	font-weight: bold;
	font-size: 14px!important;
	line-height: 20px!important;
	margin: 5px 0
}
#comparison #spec table a.re-compare, [id*=comparison] #spec table a.re-compare {
	color: #aaaaaa!important;
	border-color: #aaaaaa!important
}
#comparison thead {
	background-color: #000000
}
section#comparison table tbody td.dot, section#spec table tbody td.dot {
	color: #ffffff!important
}

@media (min-width:2000px) and (max-width:2560px) {
#luffy .container .people {
	max-width: 45vw
}
#luffy .container .watch {
	width: 100%;
	max-width: 550px
}
#zoro .container .people {
	max-width: 45vw
}
#zoro .container .watch {
	width: 100%;
	max-width: 550px
}
#chopper .container .people {
	max-width: 45vw
}
#chopper .container .watch {
	width: 100%;
	max-width: 550px
}
.life-slide {
	height: 100vh;
	max-height: 1080px
}
}

@media (max-width:1680px) {
#hero {
	height: 58vw
}
#hero .hero-image-wrapper {
	height: 58vw
}
#hero .luffy {
	width: 100%;
	max-width: 620px;
	position: absolute;
	left: 53%;
	top: 37%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#hero .zoro {
	width: 100%;
	max-width: 650px;
	position: absolute;
	left: 72%;
	top: 32%
}
#hero .chopper {
	width: 100%;
	max-width: 311px;
	z-index: 4;
	position: absolute;
	left: 28%;
	top: 25%
}
#hero .hero-bc-front {
	bottom: 0;
	height: 63vw;
	width: 100vw;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat
}
#chopper .container .people {
	max-width: 760px;
	bottom: 12%;
	right: -5%
}
#chopper .container .text {
	width: 30%
}
#gallery img {
	position: absolute;
	bottom: 5%;
	left: 3%;
	width: 100%;
	max-width: 500px;
	z-index: 10
}
}

@media (max-width:1600px) {
section p:not(td) {
	font-size: 16px
}
#device .device-intro {
	height: 150vh
}
#device .people-intro .people {
	width: 100%;
	max-width: 820px
}
}

@media (min-width:1450px) and (max-width:1580px) {
#luffy .container .people {
	max-width: 60%
}
#luffy .container .bg {
	position: absolute;
	left: 0;
	bottom: -37vh;
	background-size: contain;
	width: 100%;
	height: 110vh;
	z-index: 10
}
#zoro .container .people {
	max-width: 60%
}
#zoro .container .bg {
	left: 10%;
	bottom: 18%;
	background-size: contain;
	width: 100%;
	height: 85%
}
#chopper .container .people {
	max-width: 50%
}
.life-slide {
	background-size: contain;
	max-height: 870px
}
#MIL-STD-810 .product img {
	height: auto;
	width: 100vw;
	padding-left: 3vw
}
#MIL-STD-810 .bg {
	background-size: contain;
	background-color: #000000
}
#sports .product img {
	height: auto
}
}

@media (max-width:1440px) {
section p:not(td) {
	font-size: 16px;
	font-weight: normal
}
.text:not(td) h2 {
	font-size: 42px;
	line-height: 1.2!important;
	color: #222222
}
#hero {
	height: 58vw
}
#hero .hero-image-wrapper {
	height: 58vw
}
#hero .luffy {
	max-width: 520px;
	position: absolute;
	left: 50%;
	top: 36%
}
#hero .zoro {
	width: 100%;
	max-width: 575px;
	position: absolute;
	left: 72%;
	top: 35%
}
#hero .chopper {
	max-width: 285px;
	z-index: 4;
	position: absolute;
	left: 26%;
	top: 27%
}
#hero .hero-bc-front {
	bottom: 0;
	height: 63vw;
	width: 100vw;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat
}
#hero .title {
	width: 26%
}
#device .op-menu {
	height: 85vh;
	position: relative
}
#luffy .container .people {
	width: 100%;
	max-width: 55%;
	margin: 0 auto;
	position: absolute;
	bottom: -10%;
	right: -240px
}
#luffy .container .watch {
	width: 100%;
	max-width: 24%;
	margin: 0 auto
}
#luffy .container .text {
	width: 30%;
	top: 65%
}
#luffy .container h2 {
	font-size: 48px
}
#luffy .container h3 {
	font-size: 30px
}
#luffy .container .btn-circle-bo {
	width: 120px;
	font-size: 16px
}
#luffy-band .container .text01 p, #luffy-band .container .text02 p {
	font-size: 18px;
	padding: 10px 30px
}
#zoro .container .people {
	width: 100%;
	max-width: 55%;
	margin: 0 auto;
	position: absolute;
	bottom: 2%;
	left: -18%
}
#zoro .container .watch {
	width: 100%;
	max-width: 24%;
	margin: 0 auto
}
#zoro .container .text {
	width: 30%;
	top: 69%
}
#zoro .container h2 {
	font-size: 48px
}
#zoro .container h3 {
	font-size: 30px
}
#zoro .container .bg {
	position: absolute;
	left: 10%;
	bottom: 18%;
	background-size: cover;
	width: 70%;
	height: 85%;
	z-index: 8
}
#zoro .container .btn-circle-bo {
	width: 120px;
	font-size: 16px
}
#zoro-band .container .text01 p, #zoro-band .container .text02 p {
	font-size: 18px;
	padding: 10px 30px
}
#chopper .container .people {
	max-width: 45%;
	margin: 0 auto;
	position: absolute;
	bottom: 9%;
	right: -5%
}
#chopper .container .watch {
	width: 100%;
	max-width: 24%;
	margin: 0 auto
}
#chopper .container .text {
	width: 30%;
	top: 65%
}
#chopper .container h2 {
	font-size: 48px
}
#chopper .container h3 {
	font-size: 30px
}
#chopper .container .btn-circle-bo {
	width: 120px;
	font-size: 16px
}
#chopper .container .bg {
	height: 97vh
}
#chopper-band .container .text01 p, #chopper-band .container .text02 p {
	font-size: 18px;
	padding: 10px 30px
}
#gps .container .product, #health .container .product, #solar .container .product {
	width: 100%;
	max-width: 650px
}
#smartlife .connect img {
	max-width: 920px;
	margin-top: 30px
}
#smartlife .garminpay .text {
	text-align: left;
	margin-left: 10%
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 700px;
	padding-right: 30px
}
}

@media (max-width:1368px) {
.text:not(td) h2 {
	font-size: 42px;
	line-height: 1.2!important;
	color: #222222;
	text-transform: uppercase
}
#hero {
	height: 58vw
}
#hero .hero-image-wrapper {
	height: 58vw
}
#hero .luffy {
	max-width: 475px;
	left: 52%;
	top: 37%
}
#hero .zoro {
	max-width: 535px;
	left: 72%;
	top: 35%
}
#hero .chopper {
	max-width: 270px;
	left: 26%;
	top: 27%
}
#device .intro .content h2 {
	font-size: 42px
}
#device .people-intro .people {
	max-width: 700px;
	top: 110%
}
#feature-item {
	padding-top: 60px
}
}

@media (min-width:1290px) and (max-width:1360px) {
#luffy .container .people {
	max-width: 68%
}
#luffy .container .bg {
	position: absolute;
	left: 0;
	bottom: -37vh;
	background-size: contain;
	width: 100%;
	height: 110vh;
	z-index: 10
}
#zoro .container .people {
	max-width: 68%
}
#zoro .container .bg {
	left: 10%;
	bottom: 18%;
	background-size: contain;
	width: 100%;
	height: 85%
}
#chopper .container .people {
	max-width: 55%
}
.life-slide {
	background-size: contain;
	max-height: 870px
}
#MIL-STD-810 .product img {
	height: auto;
	width: 113vw;
	padding-left: 3vw
}
#MIL-STD-810 .bg {
	background-size: contain;
	background-color: #000000
}
#sports .product img {
	height: auto
}
}

@media (max-width:1280px) {
#luffy .container .people {
	max-width: 52%;
	bottom: -2%;
	right: -205px
}
#luffy .container .watch {
	width: 100%;
	max-width: 24%;
	margin: 0 auto
}
#luffy .container .word {
	max-width: 52%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#luffy .container .text {
	width: 30%;
	top: 65%
}
#luffy .container h2 {
	font-size: 48px;
	margin-bottom: 0
}
#luffy .container h3 {
	font-size: 30px
}
#luffy .container p {
	font-size: 15px
}
#luffy .container .btn-circle-bo {
	width: 120px;
	font-size: 16px
}
#zoro .container .people {
	width: 100%;
	max-width: 55%;
	margin: 0 auto;
	position: absolute;
	bottom: 2%;
	left: -18%
}
#zoro .container .watch {
	width: 100%;
	max-width: 24%;
	margin: 0 auto
}
#zoro .container .word {
	width: 100%;
	max-width: 50%
}
#zoro .container .text {
	width: 30%;
	top: 69%
}
#zoro .container h2 {
	font-size: 48px;
	margin-bottom: 0
}
#zoro .container h3 {
	font-size: 30px
}
#zoro .container p {
	font-size: 15px
}
#zoro .container .bg {
	position: absolute;
	left: 10%;
	bottom: 18%;
	background-size: cover;
	width: 70%;
	height: 85%;
	z-index: 8
}
#zoro .container .btn-circle-bo {
	width: 120px;
	font-size: 16px
}
#chopper .container .people {
	max-width: 45%;
	margin: 0 auto;
	position: absolute;
	bottom: 9%;
	right: -5%
}
#chopper .container .watch {
	width: 100%;
	max-width: 24%;
	margin: 0 auto
}
#chopper .container .text {
	width: 30%;
	top: 65%
}
#chopper .container .word {
	max-width: 50%
}
#chopper .container h2 {
	font-size: 48px;
	margin-bottom: 0
}
#chopper .container h3 {
	font-size: 30px
}
#chopper .container p {
	font-size: 15px
}
#chopper .container .btn-circle-bo {
	width: 120px;
	font-size: 16px
}
#chopper .container .bg {
	height: 97vh
}
#gps .container .product, #health .container .product, #solar .container .product {
	width: 100%;
	max-width: 550px
}
#solar .container .text img {
	width: 100%;
	max-width: 80px;
	margin-bottom: 20px
}
#MIL-STD-810 .container {
	top: 25%
}
#smartlife p {
	color: #ffffff;
	width: 70%;
	margin-bottom: 30px
}
#smartlife .connect .icon {
	width: 100%;
	max-width: 100px;
	margin: 0 auto
}
}

@media (min-width:1025px) and (max-width:1200px) {
#hero {
	height: 65vw;
	margin-top: 113px
}
#hero .hero-bc-front {
	bottom: 0;
	height: 77vw
}
#hero .luffy {
	max-width: 410px;
	left: 56%;
	top: 46%
}
#hero .zoro {
	max-width: 435px;
	left: 73%;
	top: 35%
}
#hero .chopper {
	max-width: 230px;
	left: 26%;
	top: 32%
}
#luffy .container .people {
	max-width: 68%
}
#luffy .container .bg {
	position: absolute;
	left: 0;
	bottom: -37vh;
	background-size: contain;
	width: 100%;
	height: 110vh;
	z-index: 10
}
#luffy-band {
	height: 70vh
}
#luffy-band .container {
	height: 70vh
}
#luffy-band .container .text01, #luffy-band .container .text02 {
	top: 50vh
}
#zoro .container .people {
	max-width: 68%
}
#zoro .container .bg {
	left: 10%;
	bottom: 18%;
	background-size: contain;
	width: 100%;
	height: 85%
}
#chopper .container .people {
	max-width: 55%
}
.life-slide {
	background-size: contain;
	max-height: 700px
}
#MIL-STD-810 .product img {
	height: auto;
	width: 100vw;
	padding-left: 3vw
}
#MIL-STD-810 .bg {
	background-size: contain;
	background-color: #000000
}
#sports .product img {
	height: auto
}
}

@media (max-width:1024px) {
#hero {
	height: 115vw;
	margin-top: 113px
}
#hero .hero-bc {
	height: 125vw
}
#hero .hero-bc-front {
	bottom: 0;
	height: 172vw;
	z-index: 3
}
#hero .luffy {
	max-width: 510px;
	left: 50%;
	top: 35%
}
#hero .zoro {
	max-width: 515px;
	left: 73%;
	top: 26%
}
#hero .chopper {
	max-width: 290px;
	left: 16%;
	top: 26%
}
#hero .title {
	width: 43%;
	top: 14%
}
#hero .watch {
	width: 60%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 62%
}
#hero .flag {
	width: 112%;
	max-width: 125vw;
	z-index: 3;
	position: absolute;
	left: 50%;
	top: 32%
}
#device .intro .content {
	margin-top: 5vh
}
#device .op-menu {
	height: 40vh;
	position: relative
}
#video {
	height: auto;
	width: 80%
}
#feature-item .feature-item {
	height: 20vh
}
#luffy {
	height: 95vh
}
#luffy .container {
	height: 95vh
}
#luffy .container .people {
	max-width: 110vw;
	bottom: -2%;
	right: -53vw
}
#luffy .container .watch {
	max-width: 40%;
	margin: 0 auto;
	position: absolute;
	top: 75%;
	left: 30%
}
#luffy .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#luffy .container .text {
	width: 40%;
	top: 44%
}
#luffy .container h2 {
	font-size: 4em
}
#luffy .container h3 {
	font-size: 2.5em
}
#luffy .container .btn-circle-bo {
	margin-top: 10px
}
#luffy .container .bg {
	display: none
}
#luffy-band {
	height: 37vh
}
#luffy-band .container .text01 {
	top: 30vh
}
#luffy-band .container .text02 {
	top: 30vh
}
#zoro {
	height: 95vh
}
#zoro .container {
	height: 95vh
}
#zoro .container .people {
	max-width: 110vw;
	bottom: 2%;
	left: -48vw
}
#zoro .container .watch {
	max-width: 40%;
	margin: 0 auto;
	position: absolute;
	top: 75%;
	left: 75%
}
#zoro .container .word {
	max-width: 78%;
	margin: 0 auto;
	position: absolute;
	top: 3%;
	left: 4%
}
#zoro .container .text {
	width: 40%;
	top: 45%
}
#zoro .container h2 {
	font-size: 4em
}
#zoro .container h3 {
	font-size: 2.5em
}
#zoro .container .btn-circle-bo {
	margin-top: 10px
}
#zoro .container .bg {
	display: none
}
#zoro-band {
	height: 37vh
}
#zoro-band .container .text01 {
	top: 30vh
}
#zoro-band .container .text02 {
	top: 30vh
}
#chopper {
	height: 95vh
}
#chopper .container {
	height: 95vh
}
#chopper .container .people {
	max-width: 73vw;
	bottom: 5%;
	right: -18vw
}
#chopper .container .watch {
	max-width: 40%;
	margin: 0 auto;
	position: absolute;
	top: 75%;
	left: 30%
}
#chopper .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#chopper .container .text {
	width: 40%;
	top: 44%
}
#chopper .container h2 {
	font-size: 3.6em
}
#chopper .container h3 {
	font-size: 2.5em
}
#chopper .container .btn-circle-bo {
	margin-top: 10px
}
#chopper .container .bg {
	display: none
}
#chopper-band {
	height: 37vh
}
#chopper-band .container .text01 {
	top: 30vh
}
#chopper-band .container .text02 {
	top: 30vh
}
#gallery .text {
	position: absolute;
	top: 30%;
	left: 50%;
	text-align: center;
	z-index: 9
}
#gallery .text h2 {
	color: #ffffff;
	text-align: center
}
#gallery .life-slide {
	height: 100vh;
	max-height: 1260px;
	min-height: 300px
}
#gps .container, #health .container, #solar .container, #sports .container {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#gps .container .text, #health .container .text, #solar .container .text, #sports .container .text {
	width: 100%;
	text-align: center;
	margin: 0 auto
}
#gps .container .text a, #gps .container .text img, #health .container .text a, #health .container .text img, #solar .container .text a, #solar .container .text img, #sports .container .text a, #sports .container .text img {
	margin: 0 auto
}
#gps .container .product, #health .container .product, #solar .container .product {
	width: 100%;
	margin-top: 30px;
	max-width: 700px
}
#sports .container {
	margin-left: 0;
	position: absolute;
	top: 26%
}
#sports .product {
	opacity: 1;
	position: absolute;
	bottom: auto;
	top: 40%
}
#sports .product .people {
	display: none
}
#sports .product .people-m {
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 0
}
#MIL-STD-810 .container {
	top: 13%
}
#MIL-STD-810 .product {
	display: none!important
}
#smartlife {
	background: url("../images/onepiece-connect-m.jpg");
	height: 87vh
}
#smartlife .connect {
	margin-top: 4vh;
	margin-bottom: 50px
}
#smartlife .connect img {
	max-width: 750px;
	margin-top: 30px
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 700px;
	padding-right: 80px
}
#smartlife p {
	color: #ffffff;
	width: 88%;
	margin-bottom: 30px
}
section#comparison {
	padding-top: 0vh
}
}

@media (min-width:770px) and (max-width:1020px) {
#hero {
	height: 120vw;
	margin-top: 113px
}
#hero .title {
	width: 50%
}
#hero .hero-bc-front {
	bottom: 0;
	height: 178vw
}
#hero .hero-bc {
	height: 90vw;
	background-size: cover;
	z-index: 1
}
#hero .luffy {
	max-width: 525px;
	left: 53%;
	top: 37%
}
#hero .zoro {
	max-width: 505px;
	left: 73%;
	top: 28%
}
#hero .chopper {
	max-width: 270px;
	left: 19%;
	top: 27%
}
#hero .flag {
	width: 112%;
	max-width: 125vw;
	z-index: 3;
	position: absolute;
	left: 50%;
	top: 34%
}
#hero .watch {
	width: 70%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 60%
}
#luffy {
	height: 120vh
}
#luffy .container {
	height: 120vh
}
#luffy .container .people {
	max-width: 110vw;
	bottom: -2%;
	right: -53vw
}
#luffy .container .watch {
	max-width: 40%;
	margin: 0 auto;
	position: absolute;
	top: 75%;
	left: 30%
}
#luffy .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#luffy .container .text {
	width: 40%;
	top: 44%
}
#luffy .container h2 {
	font-size: 3em
}
#luffy .container h3 {
	font-size: 2em
}
#luffy .container .btn-circle-bo {
	margin-top: 10px
}
#luffy .container .bg {
	display: none
}
#zoro {
	height: 120vh
}
#zoro .container {
	height: 120vh
}
#zoro .container .people {
	max-width: 90%;
	left: -30vw;
	right: auto
}
#zoro .container .watch {
	max-width: 40%;
	margin: 0 auto;
	position: absolute;
	top: 75%;
	left: 73%
}
#zoro .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#zoro .container .text {
	width: 40%;
	top: 37%
}
#zoro .container h2 {
	font-size: 3em
}
#zoro .container h3 {
	font-size: 2em
}
#zoro .container .btn-circle-bo {
	margin-top: 10px
}
#zoro .container .bg {
	display: none
}
#chopper-band, #luffy-band, #zoro-band {
	height: 50vh
}
#chopper-band .container, #luffy-band .container, #zoro-band .container {
	height: 50vh
}
#chopper-band .container .text01, #chopper-band .container .text02, #luffy-band .container .text01, #luffy-band .container .text02, #zoro-band .container .text01, #zoro-band .container .text02 {
	top: 42vh
}
#chopper {
	height: 120vh
}
#chopper .container {
	height: 120vh
}
#chopper .container .people {
	max-width: 75vw;
	bottom: 5%;
	right: -19vw
}
#chopper .container .watch {
	max-width: 40%;
	margin: 0 auto;
	position: absolute;
	top: 75%;
	left: 30%
}
#chopper .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#chopper .container .text {
	width: 40%;
	top: 44%
}
#chopper .container h2 {
	font-size: 3em
}
#chopper .container h3 {
	font-size: 2em
}
#chopper .container .btn-circle-bo {
	margin-top: 10px
}
#chopper .container .bg {
	display: none
}
.life-slide {
	background-size: contain;
	max-height: 700px
}
#MIL-STD-810 .product img {
	height: auto;
	width: 113vw;
	padding-left: 3vw
}
#sports .product img {
	height: auto
}
#gallery .life-slide {
	height: 110vh;
	max-height: 1300px;
	min-height: 300px;
	background-size: cover
}
#gps, #health, #solar, #sports {
	height: 130vw
}
#MIL-STD-810 .container {
	top: 16%
}
#MIL-STD-810 .bg {
	background-size: cover;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	top: 69%;
	right: 0
}
#smartlife {
	height: 120vh
}
#smartlife .connect {
	margin-top: 10vh;
	margin-bottom: 50px
}
#smartlife .garminpay {
	bottom: 50px
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 700px;
	padding-right: 35px
}
}

@media (min-width:770px) and (max-width:991px) {
#hero {
	margin-top: 50px
}
}

@media (max-width:768px) {
.text:not(td) h2 {
	font-size: 36px;
	text-transform: uppercase
}
#hero {
	height: 115vw;
	margin-top: 50px
}
#hero .hero-bc {
	height: 125vw
}
#hero .hero-bc-front {
	bottom: 0;
	height: 172vw;
	z-index: 3
}
#hero .luffy {
	max-width: 460px;
	left: 57%;
	top: 35%
}
#hero .zoro {
	max-width: 455px;
	left: 75%;
	top: 29%
}
#hero .chopper {
	max-width: 260px;
	left: 21%;
	top: 29%
}
#hero .title {
	width: 43%;
	top: 14%
}
#hero .watch {
	width: 72%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 62%
}
#hero .flag {
	width: 112%;
	max-width: 125vw;
	z-index: 3;
	position: absolute;
	left: 50%;
	top: 32%
}
#device .op-menu {
	display: none
}
#device .op-menu-m {
	display: block;
	height: 190vw;
	margin-top: 40px
}
#device .op-menu-m .container {
	width: 60%!important
}
#device .op-menu-m .watch-01, #device .op-menu-m .watch-02, #device .op-menu-m .watch-03 {
	height: 60vw;
	position: relative;
	overflow: hidden;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 10px auto
}
#device .op-menu-m .watch-01 .text, #device .op-menu-m .watch-02 .text, #device .op-menu-m .watch-03 .text {
	position: absolute;
	top: 65%;
	left: 25%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#device .op-menu-m .watch-01 .text h2, #device .op-menu-m .watch-02 .text h2, #device .op-menu-m .watch-03 .text h2 {
	font-size: 40px;
	color: #fff;
	margin: 0
}
#device .op-menu-m .watch-01 .text p, #device .op-menu-m .watch-02 .text p, #device .op-menu-m .watch-03 .text p {
	font-size: 18px;
	color: #fff;
	margin-bottom: 20px
}
#device .op-menu-m .watch-01 .text a, #device .op-menu-m .watch-02 .text a, #device .op-menu-m .watch-03 .text a {
	font-size: 16px;
	color: #222222;
	padding: 0.8rem 1.6rem
}
#device .op-menu-m .watch-01 {
	background-image: url(../images/character-menu-1-m.jpg);
	position: relative;
	overflow: hidden
}
#device .op-menu-m .watch-01 .text {
	position: absolute;
	top: 65%;
	left: 28%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#device .op-menu-m .watch-01 .text h2 {
	font-size: 40px;
	color: #fff;
	margin: 0
}
#device .op-menu-m .watch-01 .text p {
	font-size: 18px;
	color: #fff;
	margin-bottom: 20px
}
#device .op-menu-m .watch-01 .text a {
	font-size: 16px;
	color: #222222;
	padding: 0.8rem 1.6rem
}
#device .op-menu-m .watch-02 {
	background-image: url(../images/character-menu-2-m.jpg)
}
#device .op-menu-m .watch-03 {
	background-image: url(../images/character-menu-3-m.jpg)
}
#luffy .container {
	height: 95vh
}
#luffy .container .people {
	max-width: 110vw;
	bottom: -2%;
	right: -58vw
}
#luffy .container .watch {
	max-width: 38%;
	margin: 0 auto;
	position: absolute;
	top: 77%;
	left: 30%
}
#luffy .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#luffy .container .text {
	width: 40%;
	top: 48%
}
#luffy .container h2 {
	font-size: 40px
}
#luffy .container h3 {
	font-size: 28px
}
#luffy .container .btn-circle-bo {
	margin-top: 0
}
#luffy .container .bg {
	display: none
}
#luffy-band .container .text01 {
	left: 36%
}
#luffy-band .container .text01 p {
	font-size: 15px;
	padding: 10px 20px
}
#luffy-band .container .text02 {
	left: auto;
	right: 70px
}
#luffy-band .container .text02 p {
	font-size: 15px;
	padding: 10px 20px
}
#zoro .container {
	height: 95vh
}
#zoro .container .people {
	max-width: 93vw;
	bottom: 5%;
	left: -48vw
}
#zoro .container .watch {
	max-width: 38%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 74%
}
#zoro .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 3%;
	left: 2%
}
#zoro .container .text {
	width: 40%;
	top: 48%
}
#zoro .container h2 {
	font-size: 40px
}
#zoro .container h3 {
	font-size: 28px
}
#zoro .container p {
	margin-bottom: 10px!important
}
#zoro .container .btn-circle-bo {
	margin-top: 0
}
#zoro .container .bg {
	display: none
}
#zoro-band .container .text01 {
	left: 36%
}
#zoro-band .container .text01 p {
	font-size: 15px;
	padding: 10px 20px
}
#zoro-band .container .text02 {
	left: auto;
	right: 70px
}
#zoro-band .container .text02 p {
	font-size: 15px;
	padding: 10px 20px
}
#chopper .container {
	height: 95vh
}
#chopper .container .people {
	max-width: 76vw;
	bottom: 4%;
	right: -25vw
}
#chopper .container .watch {
	max-width: 38%;
	margin: 0 auto;
	position: absolute;
	top: 77%;
	left: 30%
}
#chopper .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#chopper .container .text {
	width: 40%;
	top: 48%
}
#chopper .container h2 {
	font-size: 40px
}
#chopper .container h3 {
	font-size: 28px
}
#chopper .container .btn-circle-bo {
	margin-top: 0
}
#chopper .container .bg {
	display: none
}
#chopper-band .container .text01 {
	left: 36%
}
#chopper-band .container .text01 p {
	font-size: 15px;
	padding: 10px 20px
}
#chopper-band .container .text02 {
	left: auto;
	right: 70px
}
#chopper-band .container .text02 p {
	font-size: 15px;
	padding: 10px 20px
}
#gps .container .product, #health .container .product, #solar .container .product {
	margin-top: 30px;
	max-width: 600px
}
#gps .container .text, #health .container .text, #solar .container .text, #sports .container .text {
	margin-top: 20px;
	padding: 0 2rem
}
#smartlife {
	height: 110vh
}
#smartlife .connect {
	margin-top: 10vh;
	margin-bottom: 50px
}
#smartlife .garminpay {
	bottom: 50px
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 700px;
	padding-right: 35px
}
section#comparison table, section#spec table {
	table-layout: fixed;
	max-width: 700px
}
}

@media (max-width:599px) {
#comparison a.btn-size-default, [id*=comparison] a.btn-size-default {
	font-size: 12px!important;
	margin: 5px;
	padding: 0.2em 0.1em!important
}
#pd-nav .pd-list-con h1, #pd-nav .pd-list-con h2 {
	font-size: 4vw!important
}
.gh__header__nav__content {
	position: absolute!important;
	width: 100%;
}
.text:not(td) h2 {
	font-size: 28px;
	text-transform: uppercase
}
#hero {
	height: 150vw
}
#hero .hero-bc-front {
	top: 47vw;
	height: 150vw;
	width: 100vw
}
#hero .hero-bc {
	height: 100vh
}
#hero .watch {
	width: 80%;
	left: 53%;
	top: 68%
}
#hero .luffy {
	max-width: 281px;
	left: 58%;
	top: 48%
}
#hero .zoro {
	max-width: 289px;
	left: 76%;
	top: 30%
}
#hero .chopper {
	max-width: 140px;
	left: 17%;
	top: 29%
}
#hero .flag {
	width: 145vw;
	max-width: 189vw;
	z-index: 3;
	position: absolute;
	left: 40%;
	top: 38%
}
#hero .title {
	width: 65%;
	top: 16%
}
#device {
	background-size: cover
}
#device .intro .content img {
	width: 100%;
	max-width: 220px;
	margin: 0 auto 20px auto
}
#device .intro .content h2 {
	font-size: 28px;
	padding: 0 2rem 20px 2rem;
	width: 90%
}
#device .intro .content p {
	color: #ffffff;
	font-size: 16px
}
#device #feature-item .feature-item p {
	color: #fff;
	font-size: 14px!important;
	line-height: 1.4em!important
}
#device .feature-item {
	min-height: 60vh;
	height: auto!important;
	overflow: auto
}
#device .feature-item li {
	width: 50%;
	min-width: 50%;
	max-width: 50%
}
#device .feature-item ol {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: start
}
#device .op-menu {
	display: none
}
#device .op-menu-m {
	display: block;
	height: 240vw;
	margin-top: 40px
}
#device .op-menu-m .container {
	width: 90%!important
}
#device .op-menu-m .watch-01, #device .op-menu-m .watch-02, #device .op-menu-m .watch-03 {
	height: 80vw;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 10px auto
}
#device .op-menu-m .watch-01 .text, #device .op-menu-m .watch-02 .text, #device .op-menu-m .watch-03 .text {
	position: absolute;
	top: 65%;
	left: 25%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#device .op-menu-m .watch-01 .text h2, #device .op-menu-m .watch-02 .text h2, #device .op-menu-m .watch-03 .text h2 {
	font-size: 20px;
	color: #fff;
	margin: 0 0 15px;
}
#device .op-menu-m .watch-01 .text p, #device .op-menu-m .watch-02 .text p, #device .op-menu-m .watch-03 .text p {
	font-size: 14px;
	color: #fff;
	margin-bottom: 20px
}
#device .op-menu-m .watch-01 .text a, #device .op-menu-m .watch-02 .text a, #device .op-menu-m .watch-03 .text a {
	font-size: 16px;
	color: #222222;
	padding: 0.8rem 1.6rem
}
#device .op-menu-m .watch-01 {
	background-image: url(../images/character-menu-1-m.jpg);
	background-size: cover;
	height: 80vw;
	position: relative;
	overflow: hidden
}
#device .op-menu-m .watch-01 .text {
	position: absolute;
	top: 65%;
	left: 25%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#device .op-menu-m .watch-01 .text h2 {
	font-size: 20px;
	color: #fff;
	margin: 0 0 15px;
}
#device .op-menu-m .watch-01 .text p {
	font-size: 14px;
	color: #fff;
	margin-bottom: 20px
}
#device .op-menu-m .watch-01 .text a {
	font-size: 16px;
	color: #222222;
	padding: 0.8rem 1.6rem
}
#device .op-menu-m .watch-02 {
	background-image: url(../images/character-menu-2-m.jpg);
	background-size: cover
}
#device .op-menu-m .watch-03 {
	background-image: url(../images/character-menu-3-m.jpg);
	background-size: cover
}
#video {
	min-height: 250px;
	height: auto;
	width: 90%
}
#luffy .container {
	height: 95vh
}
#luffy .container .people {
	max-width: 130vw;
	width: 96vw;
	bottom: -5%;
	right: -65vw
}
#luffy .container .watch {
	max-width: 50%;
	margin: 0 auto;
	position: absolute;
	top: 77%;
	left: 30%
}
#luffy .container .word {
	max-width: 93%;
	margin: 0 auto;
	position: absolute;
	top: 3%;
	left: 4%
}
#luffy .container .text {
	width: 90%;
	top: 40%
}
#luffy .container h2 {
	font-size: 40px
}
#luffy .container h3 {
	font-size: 20px
}
#luffy .container p {
	font-size: 14px;
	margin-bottom: 10px!important
}
#luffy .container .btn-circle-bo {
	margin-top: 0
}
#luffy .container .bg {
	display: none
}
#luffy-band {
	height: 200vw;
	background: url("../images/onepiece-product-bands-bg-m.jpg")
}
#luffy-band .container {
	height: 200vw;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#luffy-band .container .band01 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-luffy-bands01-m.png");
	background-position: top center;
	background-size: cover
}
#luffy-band .container .band02 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-luffy-bands02-m.png");
	background-position: top center;
	background-size: cover
}
#luffy-band .container .text01 {
	left: 50%;
	top: 88%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#luffy-band .container .text02 {
	left: 50%;
	top: 78%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#zoro .container {
	height: 95vh
}
#zoro .container .people {
	max-width: 130vw;
	width: 86vw;
	bottom: 1%;
	right: -15vw
}
#zoro .container .watch {
	max-width: 50%;
	margin: 0 auto;
	position: absolute;
	top: 78%;
	left: 30%
}
#zoro .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 3%;
	left: 4%
}
#zoro .container .text {
	width: 90%;
	top: 43%
}
#zoro .container h2 {
	font-size: 40px
}
#zoro .container h3 {
	font-size: 20px
}
#zoro .container p {
	font-size: 14px;
	margin-bottom: 10px!important
}
#zoro .container .btn-circle-bo {
	margin-top: 0
}
#zoro .container .bg {
	display: none
}
#zoro-band {
	height: 200vw;
	background: url("../images/onepiece-product-bands-bg-m.jpg")
}
#zoro-band .container {
	height: 200vw;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#zoro-band .container .band01 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-zoro-bands01-m.png");
	background-position: top center;
	background-size: cover
}
#zoro-band .container .band02 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-zoro-bands02-m.png");
	background-position: top center;
	background-size: cover
}
#zoro-band .container .text01 {
	left: 50%;
	top: 88%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#zoro-band .container .text02 {
	left: 50%;
	top: 78%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#chopper .container {
	height: 95vh
}
#chopper .container .people {
	max-width: 137vw;
	width: 77vw;
	bottom: 4%;
	right: -32vw
}
#chopper .container .watch {
	max-width: 50%;
	margin: 0 auto;
	position: absolute;
	top: 78%;
	left: 30%
}
#chopper .container .word {
	max-width: 93%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#chopper .container .text {
	width: 90%;
	top: 42%
}
#chopper .container h2 {
	font-size: 40px
}
#chopper .container h3 {
	font-size: 20px;
	margin-bottom: 0px!important
}
#chopper .container p {
	font-size: 14px;
	margin-bottom: 10px!important
}
#chopper .container .btn-circle-bo {
	margin-top: 0
}
#chopper .container .bg {
	display: none
}
#chopper-band {
	height: 200vw;
	background: url("../images/onepiece-product-bands-bg-m.jpg")
}
#chopper-band .container {
	height: 200vw;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#chopper-band .container .band01 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-chopper-bands01-m.png");
	background-position: top center;
	background-size: cover
}
#chopper-band .container .band02 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-chopper-bands02-m.png");
	background-position: top center;
	background-size: cover
}
#chopper-band .container .text01 {
	left: 50%;
	top: 88%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#chopper-band .container .text02 {
	left: 50%;
	top: 78%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#gallery .text {
	width: 100%
}
#gallery .life-slide {
	height: 200vw;
	max-height: 1260px;
	min-height: 300px
}
#solar {
	height: 220vw
}
#solar .container .text img {
	width: 100%;
	max-width: 60px;
	margin-bottom: 10px!important
}
#solar .container .text .small {
	margin-bottom: 10px
}
#gps .container .text, #health .container .text, #solar .container .text, #sports .container .text {
	padding: 0
}
#gps .container .product, #health .container .product, #solar .container .product {
	margin-top: 20px;
	max-width: 340px
}
#MIL-STD-810 {
	height: 220vw
}
#MIL-STD-810 .container {
	top: 20%
}
#MIL-STD-810 .bg {
	height: 90%;
	top: 55%
}
#gps {
	height: 200vw
}
#sports {
	height: 200vw
}
#sports .product {
	top: 50%;
	padding-left: 0
}
#sports .product .people-m {
	width: 100%
}
#smartlife {
	z-index: 20;
	height: 290vw
}
#smartlife .connect .text {
	margin-top: 30px
}
#smartlife .connect h2 {
	margin-bottom: 10px
}
#smartlife .connect p {
	line-height: 1.4!important
}
#smartlife .garminpay {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	bottom: auto;
	margin-top: 115px
}
#smartlife .garminpay .text {
	text-align: center;
	margin-left: auto;
	padding: 0 2rem
}
#smartlife .garminpay .text h2 {
	text-align: center;
	margin: 0 auto
}
#smartlife .garminpay .text p {
	text-align: center;
	margin: 0 auto
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding-right: initial
}
#comparison figure, [id*=comparison] figure {
	width: 100%
}
section#comparison table figure img, section#spec table figure img {
	max-width: 100px;
	min-width: 90px
}
section#comparison table, section#spec table {
	table-layout: fixed;
	max-width: 340px
}
}

@media (max-width:414px) {
#device .intro .content h2 {
	width: 89%
}
#hero .luffy {
	max-width: 281px;
	left: 58%;
	top: 42%
}
#hero .hero-bc-front {
	top: 47vw;
	height: 150vw;
	width: 100vw
}
}

@media (max-width:390px) {
.text:not(td) h2 {
	font-size: 28px;
	text-transform: uppercase
}
#hero {
	height: 150vw
}
#hero .hero-bc-front {
	top: 49vw;
	height: 150vw;
	width: 100vw
}
#hero .hero-bc {
	height: 100vh
}
#hero .watch {
	width: 80%;
	left: 53%;
	top: 68%
}
#hero .luffy {
	max-width: 267px;
	left: 58%;
	top: 41%
}
#hero .zoro {
	max-width: 289px;
	left: 76%;
	top: 30%
}
#hero .chopper {
	max-width: 140px;
	left: 17%;
	top: 29%
}
#hero .flag {
	width: 145vw;
	max-width: 189vw;
	z-index: 3;
	position: absolute;
	left: 40%;
	top: 38%
}
#hero .title {
	width: 65%;
	top: 16%
}
#device {
	background-size: cover
}
#device .intro .content img {
	width: 100%;
	max-width: 220px;
	margin: 0 auto 20px auto
}
#device .intro .content h2 {
	font-size: 28px;
	padding: 0 2rem 20px 2rem;
	width: 90%
}
#device .intro .content p {
	color: #ffffff;
	font-size: 16px
}
#device #feature-item .feature-item p {
	color: #fff;
	font-size: 14px!important;
	line-height: 1.4em!important
}
#device .feature-item {
	min-height: 60vh;
	height: auto!important;
	overflow: auto
}
#device .feature-item li {
	width: 50%;
	min-width: 50%;
	max-width: 50%
}
#device .feature-item ol {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: start
}
#video {
	min-height: 250px;
	height: auto;
	width: 90%
}
#luffy .container {
	height: 95vh
}
#luffy .container .people {
	max-width: 130vw;
	width: 114vw;
	bottom: -2%;
	right: -76vw
}
#luffy .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 77%;
	left: 35%
}
#luffy .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#luffy .container .text {
	width: 90%;
	top: 35%
}
#luffy .container h2 {
	font-size: 40px
}
#luffy .container h3 {
	font-size: 20px
}
#luffy .container p {
	font-size: 14px;
	margin-bottom: 10px!important
}
#luffy .container .btn-circle-bo {
	margin-top: 0
}
#luffy .container .bg {
	display: none
}
#luffy-band {
	height: 200vw;
	background: url("../images/onepiece-product-bands-bg-m.jpg")
}
#luffy-band .container {
	height: 200vw;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#luffy-band .container .band01 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-luffy-bands01-m.png");
	background-position: top center;
	background-size: cover
}
#luffy-band .container .band02 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-luffy-bands02-m.png");
	background-position: top center;
	background-size: cover
}
#luffy-band .container .text01 {
	left: 50%;
	top: 88%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#luffy-band .container .text02 {
	left: 50%;
	top: 78%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#zoro .container {
	height: 95vh
}
#zoro .container .people {
	max-width: 130vw;
	width: 114vw;
	bottom: 3%;
	right: -2vw
}
#zoro .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 77%;
	left: 35%
}
#zoro .container .word {
	max-width: 85%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#zoro .container .text {
	width: 90%;
	top: 38%
}
#zoro .container h2 {
	font-size: 40px
}
#zoro .container h3 {
	font-size: 20px
}
#zoro .container p {
	font-size: 14px;
	margin-bottom: 10px!important
}
#zoro .container .btn-circle-bo {
	margin-top: 0
}
#zoro .container .bg {
	display: none
}
#zoro-band {
	height: 200vw;
	background: url("../images/onepiece-product-bands-bg-m.jpg")
}
#zoro-band .container {
	height: 200vw;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#zoro-band .container .band01 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-zoro-bands01-m.png");
	background-position: top center;
	background-size: cover
}
#zoro-band .container .band02 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-zoro-bands02-m.png");
	background-position: top center;
	background-size: cover
}
#zoro-band .container .text01 {
	left: 50%;
	top: 88%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#zoro-band .container .text02 {
	left: 50%;
	top: 78%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#chopper .container {
	height: 95vh
}
#chopper .container .people {
	max-width: 146vw;
	width: 95vw;
	bottom: 4%;
	right: -42vw
}
#chopper .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 77%;
	left: 35%
}
#chopper .container .word {
	max-width: 93%;
	margin: 0 auto;
	position: absolute;
	top: 4%;
	left: 4%
}
#chopper .container .text {
	width: 90%;
	top: 38%
}
#chopper .container h2 {
	font-size: 40px
}
#chopper .container h3 {
	font-size: 20px
}
#chopper .container p {
	font-size: 14px;
	margin-bottom: 10px!important
}
#chopper .container .btn-circle-bo {
	margin-top: 0
}
#chopper .container .bg {
	display: none
}
#chopper-band {
	height: 200vw;
	background: url("../images/onepiece-product-bands-bg-m.jpg")
}
#chopper-band .container {
	height: 200vw;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}
#chopper-band .container .band01 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-chopper-bands01-m.png");
	background-position: top center;
	background-size: cover
}
#chopper-band .container .band02 {
	width: 100%;
	height: 100vw;
	background: url("../images/onepiece-product-chopper-bands02-m.png");
	background-position: top center;
	background-size: cover
}
#chopper-band .container .text01 {
	left: 50%;
	top: 88%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#chopper-band .container .text02 {
	left: 50%;
	top: 78%;
	position: relative;
	width: 60%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#gallery .text {
	width: 100%
}
#gallery .life-slide {
	height: 200vw;
	max-height: 1260px;
	min-height: 300px
}
#gps .container .text, #health .container .text, #solar .container .text, #sports .container .text {
	padding: 0
}
#MIL-STD-810 .bg {
	height: 90%
}
#sports .product {
	top: 50%;
	padding-left: 0
}
#sports .product .people-m {
	width: 100%
}
#smartlife {
	z-index: 20;
	height: 300vw
}
#smartlife .connect .text {
	margin-top: 30px
}
#smartlife .connect h2 {
	margin-bottom: 10px
}
#smartlife .connect p {
	line-height: 1.4!important
}
#smartlife .garminpay {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	bottom: auto;
	margin-top: 115px
}
#smartlife .garminpay .text {
	text-align: center;
	margin-left: auto;
	padding: 0 2rem
}
#smartlife .garminpay .text h2 {
	text-align: center;
	margin: 0 auto
}
#smartlife .garminpay .text p {
	text-align: center;
	margin: 0 auto
}
#smartlife .garminpay .money img {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding-right: initial
}
#comparison figure, [id*=comparison] figure {
	width: 100%
}
section#comparison table, section#spec table {
	table-layout: fixed;
	max-width: 340px
}
}

@media (max-width:375px) {
#device .intro .content h2 {
	width: 100%
}
#luffy {
	height: 200vw
}
#luffy .container {
	height: 200vw
}
#luffy .container .word {
	max-width: 85%;
	position: absolute;
	top: 2%;
	left: 4%
}
#luffy .container .people {
	max-width: 130vw;
	width: 114vw;
	bottom: -8%;
	right: -76vw
}
#luffy .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 32%
}
#zoro {
	height: 200vw
}
#zoro .container {
	height: 200vw
}
#zoro .container .word {
	max-width: 85%;
	position: absolute;
	top: 2%;
	left: 4%
}
#zoro .container .people {
	max-width: 120vw;
	width: 107vw;
	bottom: 2%;
	right: -13vw
}
#zoro .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 32%
}
#chopper {
	height: 200vw
}
#chopper .container {
	height: 200vw
}
#chopper .container .word {
	max-width: 85%;
	position: absolute;
	top: 2%;
	left: 4%
}
#chopper .container .people {
	max-width: 130vw;
	width: 90vw;
	bottom: 2%;
	right: -39vw
}
#chopper .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 32%
}
#smartlife {
	height: 320vw
}
}

@media (max-width:360px) {
section p:not(td) {
	font-size: 15px;
	font-weight: normal
}
#hero .luffy {
	max-width: 265px;
	left: 56%;
	top: 40%
}
#hero .zoro {
	max-width: 277px;
	left: 79%;
	top: 30%
}
#MIL-STD-810 .container {
	top: 23%
}
#MIL-STD-810 .bg {
	top: 57%
}
}

@media (max-width:320px) {
#pd-nav .pd-list-con h1, #pd-nav .pd-list-con h2 {
	font-size: 3vw!important
}
.text:not(td) h2 {
	font-size: 24px;
	text-transform: uppercase
}
.text:not(td) p {
	font-size: 14px
}
#hero .luffy {
	max-width: 245px;
	left: 58%;
	top: 40%
}
#hero .zoro {
	max-width: 257px;
	left: 76%;
	top: 30%
}
#device .intro .content h2 {
	font-size: 25px;
	padding: 0 2rem 20px 2rem;
	width: 90%
}
#device .intro .content p {
	color: #ffffff;
	font-size: 14px
}
#device .op-menu-m .watch-01 .text h2, #device .op-menu-m .watch-02 .text h2, #device .op-menu-m .watch-03 .text h2 {
	font-size: 30px;
	color: #fff;
	margin: 0
}
#device .op-menu-m .watch-01 .text p, #device .op-menu-m .watch-02 .text p, #device .op-menu-m .watch-03 .text p {
	font-size: 16px;
	margin-bottom: 20px
}
#luffy {
	height: 230vw
}
#luffy .container {
	height: 230vw
}
#luffy .container .word {
	max-width: 85%;
	position: absolute;
	top: 2%;
	left: 4%
}
#luffy .container .people {
	max-width: 130vw;
	width: 114vw;
	bottom: -8%;
	right: -76vw
}
#luffy .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 32%
}
#luffy .container h2 {
	font-size: 36px
}
#luffy .container h3 {
	font-size: 16px
}
#chopper-band .container .text01 p, #chopper-band .container .text02 p, #luffy-band .container .text01 p, #luffy-band .container .text02 p, #zoro-band .container .text01 p, #zoro-band .container .text02 p {
	font-size: 14px;
	padding: 10px 10px
}
#zoro {
	height: 230vw
}
#zoro .container {
	height: 230vw
}
#zoro .container .word {
	max-width: 85%;
	position: absolute;
	top: 2%;
	left: 4%
}
#zoro .container .people {
	max-width: 120vw;
	width: 107vw;
	bottom: 2%;
	right: -13vw
}
#zoro .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 32%
}
#zoro .container h2 {
	font-size: 36px
}
#zoro .container h3 {
	font-size: 16px
}
#chopper {
	height: 230vw
}
#chopper .container {
	height: 230vw
}
#chopper .container .word {
	max-width: 85%;
	position: absolute;
	top: 2%;
	left: 4%
}
#chopper .container .people {
	max-width: 130vw;
	width: 90vw;
	bottom: 2%;
	right: -39vw
}
#chopper .container .watch {
	max-width: 60%;
	margin: 0 auto;
	position: absolute;
	top: 80%;
	left: 32%
}
#chopper .container h2 {
	font-size: 36px
}
#chopper .container h3 {
	font-size: 16px
}
#solar {
	height: 230vw
}
#solar .container .text img {
	width: 100%;
	max-width: 70px;
	margin-bottom: 20px
}
#MIL-STD-810 .container {
	top: 27%
}
#MIL-STD-810 .bg {
	height: 80%
}
#gps {
	height: 230vw
}
#sports {
	height: 230vw
}
#sports p {
	font-size: 13px
}
#gps {
	height: 230vw
}
#smartlife {
	height: 340vw
}
section#comparison table, section#spec table {
	table-layout: fixed;
	max-width: 310px
}
section#comparison h2, section#spec h2 {
	font-size: 28px
}
}
html:lang(en-HK) section p:not(td), html:lang(en-MY) section p:not(td), html:lang(en-PH) section p:not(td), html:lang(en-SG) section p:not(td), html:lang(id-ID) section p:not(td), html:lang(th-TH) section p:not(td), html:lang(vi-VN) section p:not(td) {
	font-size: 16px
}
html:lang(en-HK) #device .device-intro .product-intro .content h3, html:lang(en-MY) #device .device-intro .product-intro .content h3, html:lang(en-PH) #device .device-intro .product-intro .content h3, html:lang(en-SG) #device .device-intro .product-intro .content h3, html:lang(id-ID) #device .device-intro .product-intro .content h3, html:lang(th-TH) #device .device-intro .product-intro .content h3, html:lang(vi-VN) #device .device-intro .product-intro .content h3 {
	font-size: 1.5vw
}
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}
@-webkit-keyframes fadeIn {
0% {
opacity:0
}
to {
opacity:1
}
}
@keyframes fadeIn {
0% {
opacity:0
}
to {
opacity:1
}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}@media (min-width:768px) {
.pc{
display:block;
}
.sp{
display:none;
}
section#comparison table thead p {
  text-align:center !important;
}
}
@media (max-width:767px) {
.pc{
display:none;
}
.sp{
display:block;
}
section#comparison table thead p {
  font-size: 11px !important;
  margin:0 !important;
  text-align:center !important;
  line-height:120% !important;
}
}

.gh__header__nav__takeover{
	display:none !important;
}