@charset "UTF-8";

/* system CSS */
.wrapper {
	--color-main1: #fff;
	--color-main2: #1c1cc9;
	--color-main3: #D2D1CF;
	--color-main4: #FF9600;
	--color-bg: #000;
	--glitch-width: 100vw;
	--glitch-height: 100vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--time-anim: 4s;
	--delay-anim: 2s;
	--blend-mode-1: overlay;
	--blend-mode-2: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: #fb909a;
}
.wrapper, .wrapper a {
 cursor: none;
}
.wrapper .custom_cursor .cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}
.wrapper .custom_cursor .cursor_small {
  width: 5px;
  height: 5px;
  left: -2.5px;
  top: -2.5px;
  border-radius: 50%;
  z-index: 990;
	background-color: rgba(255, 255, 255, 0.8);
}
.wrapper .custom_cursor .cursor_canvas {
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}
.upper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width: 100%;
}
.upper .logo {
	position: absolute;
	top: 18px;
	left: 18px;
}
.upper .logo img {
	width: 160px;
}
.gnb {
	height: 70px;
	text-align: center;
}
.gnb li {
	display: inline-block;
}
.gnb li a {
	display: block;
	position: relative;
	padding: 0 30px;
	color: var(--color-main1);
	line-height: 70px;
	text-transform: uppercase;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
}
.gnb .ko {
	display: none;
	position: absolute;
	top: 0;
	left: -webkit-calc((100% - 80px)/2);
	left: -moz-calc((100% - 80px)/2);
	left: calc((100% - 80px)/2);
	width: 80px;
	color: var(--color-main2);
}
.gnb li:hover .en {
	opacity: 0;
}
.gnb li:hover .ko {
	display: block;
}
.side_menu{
	position: absolute;
	top: 0;
	right: 20px;
}
.side_menu li {
	display: inline-block;
}
.side_menu li a {
	position: relative;
	padding: 0 20px;
	font-size: 14px;
	color: var(--color-main1);
	line-height: 70px;
	text-transform: capitalize;
}
.side_menu span {
	position: absolute;
	top: 6px;
	right: 4px;
	height: 12px;
}
.side_menu span img {
	width: 9px;
	height: 10px;
}
.side_menu li:hover a {
	color: var(--color-main2);
}
.side_menu li a .arrow_blue {
	display: none;
}
.side_menu li:hover a .arrow_blue {
	display: block;
}
.keyvisual_title {
	position: relative;
	color: var(--color-main1);
	font-size: 15vw;
	font-weight: 900;
	-webkit-animation-name: glitch-anim-text;
	-moz-animation-name: glitch-anim-text;
	animation-name: glitch-anim-text;
	-webkit-animation-duration: var(--time-anim);
	-moz-animation-duration: var(--time-anim);
	animation-duration: var(--time-anim);
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
	-moz-animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
	animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
}

/* Glitch styles */
.glitch {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--glitch-width);
	height: var(--glitch-height);
	overflow: hidden;
}
.glitch_img {
	position: absolute;
	top: -webkit-calc(-1 * var(--gap-vertical));
	top: -moz-calc(-1 * var(--gap-vertical));
	top: calc(-1 * var(--gap-vertical));
	left: -webkit-calc(-1 * var(--gap-horizontal));
	left: -moz-calc(-1 * var(--gap-horizontal));
	left: calc(-1 * var(--gap-horizontal));
	width: -webkit-calc(100% + var(--gap-horizontal) * 2);
	width: -moz-calc(100% + var(--gap-horizontal) * 2);
	width: calc(100% + var(--gap-horizontal) * 2);
	height: -webkit-calc(100% + var(--gap-vertical) * 2);
	height: -moz-calc(100% + var(--gap-vertical) * 2);
	height: calc(100% + var(--gap-vertical) * 2);
	background: url(../images/main.jpg) no-repeat 50% 0;
	background-color: var(--blend-color-1);
	background-size: cover;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	background-blend-mode: var(--blend-mode-1);
}
.glitch_img:nth-child(n+2) {
	opacity: 0;
}
.imgloaded .glitch_img:nth-child(n+2) {
	-webkit-animation-duration: var(--time-anim);
	-moz-animation-duration: var(--time-anim);
	animation-duration: var(--time-anim);
	-webkit-animation-delay: var(--delay-anim);
	-moz-animation-delay: var(--delay-anim);
	animation-delay: var(--delay-anim);
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.imgloaded .glitch_img:nth-child(4) {
	background-color: var(--color-main4);
	background-blend-mode: var(--blend-mode-1);
	-webkit-animation-name: glitch-anim;
	-moz-animation-name: glitch-anim;
	animation-name: glitch-anim;
}
.imgloaded .glitch_img:nth-child(5) {
	background-color: var(--color-main2);
	background-blend-mode: var(--blend-mode-2);
	-webkit-animation-name: glitch-anim-flash;
	-moz-animation-name: glitch-anim-flash;
	animation-name: glitch-anim-flash;
}

/* Animations */
@keyframes glitch-anim {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	}
	1.5% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	}
	2% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	}
	2.5% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	3% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	}
	5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	}
	5.5% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	}
	7% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	}
	8% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	9% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	}
	10.5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	}
	11% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	}
	13% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	}
	14% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	}
	14.5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	}
	15% {
		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	}
	16% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	18% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	}
	21.9% {
		opacity: 1;
		-webkit-transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
	}
	22%, 100% {
		opacity: 0;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}

@keyframes glitch-anim-text {
	0% {
		-webkit-transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	2% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	4% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	7% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	8% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	9% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	9.9% {
		-webkit-transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
	}
	10%, 100% {
		-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
		transform: translate3d(0,0,0) scale3d(1,1,1);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}

/* Flash */
@keyframes glitch-anim-flash {
	0%, 5% {
		opacity: 0.2;
		-webkit-transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
	}
	5.5%, 100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/* CircleType */
.more_wrap {
	position: relative;
	position: absolute;
	right: 0;
	bottom: 150px;
	width: 30vw;
}
#more_info {
	font-family: 'Abril Fatface';
	font-size: 1.4vw;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .3rem;
	color: var(--color-main2);
	-webkit-animation: text-animation 15s infinite linear;
	-moz-animation: text-animation 15s infinite linear;
	animation: text-animation 15s infinite linear;
}
@keyframes text-animation {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
.arrow_container {
	position: relative;
	position: absolute;
	top: calc((100% - 8vw)/2);
	top: -moz-calc((100% - 8vw)/2);
	top: calc((100% - 8vw)/2);
	z-index: 200;
	display: block;
	margin-left: calc((100% - 8vw)/2);
	margin-left: -moz-calc((100% - 8vw)/2);
	margin-left: calc((100% - 8vw)/2);
  width: 8.3333vw;
  height: 8.33333vw;
  border-radius: 50%;
  border: 1px solid var(--color-main1);
  overflow: hidden;
  -webkit-transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
  -moz-transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
  -o-transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
  transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
}
.arrow_container:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	background-color: rgba(255, 150, 0, 0.7);
	border: none;
}
.arrow_container:hover .arrow {
	-webkit-animation: bounce 0.8s;
	-moz-animation: bounce 0.8s;
	animation: bounce 0.8s;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes bounce {
  0% {
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
  100% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
}
.arrow_box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 0.8vw;
  height: 0.8vh;
  pointer-events: none;
}
.arrow {
  position: relative;
  display: block;
  fill: var(--color-main1);
}

#page1 {
	background-color: var(--color-main3);
}
.shop {
	text-align: center;
}
.shop li {
	display: inline-block;
}
.shop li a {
	position: relative;
	display: block;
	width: 30vw;
	padding: 3vw;
	border: 1px solid var(--color-main1);
	border-radius: 50%;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.shop li a.active {
	width: 40vw;
}
.shop li:last-child a {
	margin-left: 6vw;
}
.shop li a img {
	max-width: 100%;
	height: auto;
}
.shop li a span {
	display: none;
	position: absolute;
	top: 1.5vw;
	left: 0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
.shop li a span.active {
	display: block;
}
#page2 {
	position: relative;
}
.bg_box1 .line_top {
	position: absolute;
	top: 0;
	left: 30vw;
	z-index: -1;
	width: 0;
	height: 16vh;
	background-color: var(--color-main3);
	-webkit-transition: width 0.3s ease-out;
	-moz-transition: width 0.3s ease-out;
	-o-transition: width 0.3s ease-out;
	transition: width 0.3s ease-out;
}
.bg_box1 .line_right {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 20vw;
	height: 0;
	background-color: var(--color-main3);
	-webkit-transition: height 0.3s ease-out;
	-moz-transition: height 0.3s ease-out;
	-o-transition: height 0.3s ease-out;
	transition: height 0.3s ease-out;
	-webkit-ttransition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.bg_box1 .line_bottom {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 0;
	height: 18vh;
	background-color: var(--color-main3);
	-webkit-transition: width 0.6s ease-out;
	-moz-transition: width 0.6s ease-out;
	-o-transition: width 0.6s ease-out;
	transition: width 0.6s ease-out;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.bg_box1 .line_left {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 15vw;
	height: 0;
	background-color: var(--color-main3);
	-webkit-transition: height 0.6s ease-out;
	-moz-transition: height 0.6s ease-out;
	-o-transition: height 0.6s ease-out;
	transition: height 0.6s ease-out;
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 1.2s;
	-o-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
#page2.active .bg_box1 .line_top {
	width: 70vw;
}
#page2.active .bg_box1 .line_right {
	height: 100%;
}
#page2.active .bg_box1 .line_bottom {
	width: 100%;
}
#page2.active .bg_box1 .line_left {
	height: 100%;
}
.bg_box2 {
	position: absolute;
	width: 64vw;
	height: 100vh;
	top: 10vh;
	left: 15vw;
}
.bg_box2 .line_top{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 10px;
	background-color: var(--color-main1);
	-webkit-transition: width 0.4s ease-out;
	-moz-transition: width 0.4s ease-out;
	-o-transition: width 0.4s ease-out;
	transition: width 0.4s ease-out;
}
.bg_box2 .line_right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 0;
	background-color: var(--color-main1);
	-webkit-transition: height 0.4s ease-out;
	-moz-transition: height 0.4s ease-out;
	-o-transition: height 0.4s ease-out;
	transition: height 0.4s ease-out;
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
#page2.active .bg_box2 .line_top {
	width: 100%;
}
#page2.active .bg_box2 .line_right {
	height: 100%;
}
.lookbook ul {
	text-align: center;
}
.lookbook ul li {
	display: inline-block;
}
.lookbook ul li a {
	display: block;
	margin-left: -5px;
	padding: 0;
	width: 21vw;
}
.lookbook img {
	max-width: 100%;
	height: auto;
}
.lookbook h3 a {
	display: block;
	position: relative;
	position: absolute;
	left: -webkit-calc((100% - 1300px)/2);
	left: -moz-calc((100% - 1300px)/2);
	left: calc((100% - 1300px)/2);
	bottom: 8vh;
	color: var(--color-main1);
	font-size: 5rem;
	font-weight: 800;
	text-align: center;
	-webkit-transition: color .2s ease-in;
	-moz-transition: color .2s ease-in;
	-o-transition: color .2s ease-in;
	transition: color .2s ease-in;
}
.lookbook h3 a:hover {
	color: var(--color-main2);
}
.look_arrow {
	width: 120px;
	height: 56px;
}
.arrw_line1, .arrw_tri1{
	fill: none;
	stroke: var(--color-main2);
	stroke-width: 7px;
	stroke-dasharray: 110;
	stroke-dashoffset: 110;
}
.lookbook h3 a:hover .arrw_line1 {
	-webkit-animation: dash .6s linear forwards;
	-moz-animation: dash .6s linear forwards;
	animation: dash .6s linear forwards;
}
.lookbook h3 a:hover .arrw_tri1 {
	-webkit-animation: dash .6s linear .6s forwards;
	-moz-animation: dash .6s linear .6s forwards;
	animation: dash .6s linear .6s forwards;
}
@keyframes dash {
	0% {stroke-dashoffset: 110;}
	100% {stroke-dashoffset: 0;}
}
.lookbook h3 a span {
	opacity: 0;
	display: block;
	float: right;
	width: 200px;
	height: 120px;
	background: url("../images/icons/arrow_right_hover.png") no-repeat center center;
	-webkit-transition: opacity .4s ease-in;
	-moz-transition: opacity .4s ease-in;
	-o-transition: opacity .4s ease-in;
	transition: opacity .4s ease-in;
}
.lookbook h3 a:hover span {
	opacity: 1;
}
#page3 {
	background-color: var(--color-bg);
}
.dim {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../images/dim.png");
}
.about_title {
	position: absolute;
	top: 22vh;
	left: 2vw;
	z-index: 10;
	color: var(--color-main1);
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 800;
	font-size: 6rem;
}
.about_more {
	display: block;
	position: absolute;
	left: -webkit-calc((100% - 250px)/2);
	left: -moz-calc((100% - 250px)/2);
	left: calc((100% - 250px)/2);
	bottom: 16vh;
	text-align: center;
}
.cir {
	width: 250px;
	height: 250px;
}
.cir_line {
	display: block;
	fill: none;
	stroke: var(--color-main1);
	stroke-width: 2;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	transform-origin: center;
	-webkit-transition: all .8s ease-out;
	-moz-transition: all .8s ease-out;
	-o-transition: all .8s ease-out;
	transition: all .8s ease-out;
}
.cir_more {
	opacity: 0;
	display: block;
	position: absolute;
	top: -webkit-calc((100% - 30px)/2);
	top: -moz-calc((100% - 30px)/2);
	top: calc((100% - 30px)/2);
	left: -webkit-calc((100% - 100px)/2);
	left: -moz-calc((100% - 100px)/2);
	left: calc((100% - 100px)/2);
	width: 100px;
	height: 50px;
	color: var(--color-main1);
	text-transform: uppercase;
	font-weight: 600;
	-webkit-transition: opacity .6s ease-out;
	-moz-transition: opacity .6s ease-out;
	-o-transition: opacity .6s ease-out;
	transition: opacity .6s ease-out;
	-webkit-transition-delay: .9s;
	-moz-transition-delay: .9s;
	-o-transition-delay: .9s;
	transition-delay: .9s;
}
.cir_more.active {
	opacity: 1;
}
.about_more:hover .cir_line {
	stroke: var(--color-main2);
}
.about_more:hover .cir_more {
	color: var(--color-main2);
}
.city_wrap {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	display: flex;
	position: relative;
	-webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
  -moz-box-pack: center;
	-ms-flex-pack: center;
  -webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-color: var(--color-bg);
}
.distort {
	position: absolute;
	pointer-events: none;
	will-change: transform;
}
.distort_img {
	opacity: 0;
	width: 800px;
	height: 1120px;
}
.menu {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	text-align: center;
	font-size: 8vh;
	font-weight: normal;
	line-height: 1.5;
}
.menu_link {
	z-index: 900;
	margin-left: 4vw;
	color: var(--color-main1);
	font-weight: 700;
	white-space: nowrap;
}
.menu_link:hover {
	color: var(--color-main2);
}
.menu_link span {
	display: inline-block;
}
#page5 {
	background: no-repeat center url("../images/stockist.jpg");
	background-size: cover;
}
.stockist {
	text-align: center;
	margin-top: 10vh;
}
.stockist li {
	display: inline-block;
}
.stockist li:last-child {
	margin-left: 7vw;
}
.stock {
	position: relative;
	width: 20vw;
}
.stock img {
	max-width: 100%;
	height: auto;
}
.stock_name {
	position: absolute;
	top: -50px;
	left: -20px;
	color: var(--color-main1);
	font-size: 5rem;
	font-weight: 800;
	text-align: left;
}
.stock_more {
	display: block;
	position: absolute;
	padding: 3vh 4vw 1vh 1vw;
	right: -.8vw;
	bottom: -1.4vh;
	color: var(--color-main1);
	border: 2px solid var(--color-main1);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: capitalize;
}
.stock_more:hover {
	color: var(--color-main2);
	border: 2px solid var(--color-main2);
}
.stock_arrow {
	margin-left: 6px;
}
.arrw_line2, .arrw_tri2 {
	fill: none;
	stroke: var(--color-main2);
	stroke-width: 2px;
}
.arrw_line2 {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
}
.arrw_tri2 {
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
}
.stock_more:hover .arrw_line2 {
	-webkit-animation: dash2 .6s linear forwards;
	-moz-animation: dash2 .6s linear forwards;
	animation: dash2 .6s linear forwards;
}
.stock_more:hover .arrw_tri2 {
	-webkit-animation: dash3 .6s linear .6s forwards;
	-moz-animation: dash3 .6s linear .6s forwards;
	animation: dash3 .6s linear .6s forwards;
}
@keyframes dash2 {
	0% {stroke-dashoffset: 60;}
	100% {stroke-dashoffset: 0;}
}
@keyframes dash3 {
	0% {stroke-dashoffset: 20;}
	100% {stroke-dashoffset: 0;}
}
.stock_adr {
	margin-top: 90px;
}
.stock_adr, .stock_adr a {
	display: block;
	color: #fff;
	font-weight: 600;
	text-align: left;
}
#page6 {
	position: relative;
}
.page6_bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg);
}
.bg_box3 {
	position: absolute;
	top: 10vh;
	left: 0;
	z-index: -1;
	width: 80vw;
	height: 80vh;
}
.bg_box3 .line_top{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-main1);
	-webkit-transition: width 0.4s ease-out;
	-moz-transition: width 0.4s ease-out;
	-o-transition: width 0.4s ease-out;
	transition: width 0.4s ease-out;
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
.bg_box3 .line_right {
	position: absolute;
	top: 0;
	right: 0;
	width: 2px;
	height: 0;
	background-color: var(--color-main1);
	-webkit-transition: height 0.4s ease-out;
	-moz-transition: height 0.4s ease-out;
	-o-transition: height 0.4s ease-out;
	transition: height 0.4s ease-out;
	-webkit-transition-delay: 0.8s;
	-moz-transition-delay: 0.8s;
	-o-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.bg_box3 .line_bottom {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-main1);
	-webkit-transition: width 0.4s ease-out;
	-moz-transition: width 0.4s ease-out;
	-o-transition: width 0.4s ease-out;
	transition: width 0.4s ease-out;
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 1.2s;
	-o-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
#page6.active .bg_box3 .line_top {
	width: 100%;
}
#page6.active .bg_box3 .line_right {
	height: 100%;
}
#page6.active .bg_box3 .line_bottom {
	width: 100%;
}
.container {
	display: grid;
	display: -ms-grid;
	grid-template-columns: 1fr 1.3fr;
	-ms-grid-columns: 1fr 1.3fr;
	width: 900px;
	height: 70vh;
	margin-left: -webkit-calc((100vw - 900px)/2);
	margin-left: -moz-calc((100vw - 900px)/2);
	margin-left: calc((100vw - 900px)/2);
}
.item:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 5;
}
.item:nth-child(2) {
	grid-column: 1 / 2;
	grid-row: 5 / 9;
}
.item:nth-child(3) {
	margin-top: 60px;
	grid-column: 2 / 3;
	grid-row: 1 / 4;
}
.item:nth-child(4) {
	grid-column: 2 / 3;
	grid-row: 4 / 7;
}
.item:nth-child(5) {
	grid-column: 2 / 3;
	grid-row: 7 / 10;
}
.item a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.item a .bestimg {
	display: block;
	width: 100%;
	height: 100%;
}
.item a .bestimg_hover {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}
.item a:hover .bestimg_hover {
	opacity: 1;
}
.item:nth-child(1) .bestimg {
	background-image: url(../images/bestseller1.jpg);
	background-size: cover;
}
.item:nth-child(1) .bestimg_hover {
	background-image: url(../images/bestseller1_hover.jpg);
	background-size: cover;
}
.item:nth-child(2) .bestimg {
	background-image: url(../images/bestseller2.jpg);
	background-size: cover;
}
.item:nth-child(2) .bestimg_hover {
	background-image: url(../images/bestseller2_hover.jpg);
	background-size: cover;
}
.item:nth-child(3) .bestimg {
	background-image: url(../images/bestseller3.jpg);
	background-size: cover;
}
.item:nth-child(3) .bestimg_hover {
	background-image: url(../images/bestseller3_hover.jpg);
	background-size: cover;
}
.item:nth-child(4) .bestimg {
	background-image: url(../images/bestseller4.jpg);
	background-size: cover;
}
.item:nth-child(4) .bestimg_hover {
	background-image: url(../images/bestseller4_hover.jpg);
	background-size: cover;
}
.item:nth-child(5) .bestimg {
	background-image: url(../images/bestseller5.jpg);
	background-size: cover;
}
.item:nth-child(5) .bestimg_hover {
	background-image: url(../images/bestseller5_hover.jpg);
	background-size: cover;
}
.item b {
	position: absolute;
	color: var(--color-main1);
	font-size: 0.9rem;
	font-weight: 700;
}
.item:nth-child(1) b {
	top: 34px;
	left: -80px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.item:nth-child(2) b {
	top: 50px;
	left: -100px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.item:nth-child(3) b {
	top: -40px;
	right: 0;
}
.item:nth-child(4) b {
	top: 56px;
	right: -100px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.item:nth-child(5) b {
	top: 30px;
	right: -70px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.item a:hover > b {
	color: var(--color-main2);
}
.item strong {
	position: absolute;
	opacity: 0;
	top: -webkit-calc((100% - 100px)/2);
	top: -moz-calc((100% - 100px)/2);
	top: calc((100% - 100px)/2);
	left: -webkit-calc((100% - 280px)/2);
	left: -moz-calc((100% - 280px)/2);
	left: calc((100% - 280px)/2);
	width: 280px;
	height: 100px;
	padding: 24px;
	color: var(--color-main2);
	border: 1px solid var(--color-main2);
	border-radius: 50%;
	font-size: 2.2rem;
	font-weight: 800;
	font-style: italic;
	text-align: center;
	text-transform: uppercase;
	-webkit-transition: opacity .4s ease-out;
	-moz-transition: opacity .4s ease-out;
	-o-transition: opacity .4s ease-out;
	transition: opacity .4s ease-out;
}
.item a:hover > strong{
	opacity: 1;
}