.Main__MainvisualContainer {
	height: auto;
	position: relative;
	width: 100%;
	z-index:1;
}

.Whoawho__Page.isLoaded .Main__MainvisualContainer {
	transition: background-color 0s linear 1.2s
}

.Main__MainVideo {
	position:absolute;top:0;width:100%;height:177vh;
}

.Main__Mainvisual {
    box-sizing: border-box;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    transform: scale(.5);
    width: 100%;
    will-change: transform;
    z-index: 2;
	overflow: hidden;
}

.Main__Mainvisual video {
	width:100%;
}

@media(max-width:1480px) {
	.Main__Mainvisual {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media(max-width:1160px) {
	.Main__Mainvisual video {
		width:unset;
		height:100vh;
	}
}


.Whoawho__Page.isLoaded .Main__Mainvisual {
	transform: none;
	transition: transform 1.2s cubic-bezier(.165, .84, .44, 1)
}

.Main__TopTitle {
	height: 100vh;
	position: relative;
	width: 100%;
	z-index: 4
}

.Main__TopTitle.isFallbackVisible {
	margin-bottom: 0;
	margin-top: 0
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__TopTitle.isFallbackVisible {
		margin-bottom: 23.2vw
	}

	.Main__TopTitle {
		padding-top: 11.3vh
	}
}

.Main__TopTitleContainer {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: 6.2vw;
	width: 100%
}

.Main__TopTitleFallback {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0
}

.Main__GoodTitle {
	color: #121212;
	font-size: 8.2vw;
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: .8;
	margin-left: 4.8vw;
	opacity: .1;
	position: relative;
	width: 90.2vw;
	z-index: 1;
	
}

.Main__GoodTitle.onScreen {
	opacity: 1
}

.Main__GoodTitle .SplitText__LineMask {
	opacity: 0;
	overflow: visible;
	transform: translate3d(0, 25%, 0);
	will-change: opacity, transform
}

.Main__GoodTitle.onScreen .SplitText__LineMask {
	opacity: 1;
	transform: none
}

.Main__GoodTitle.onScreen .SplitText__LineMask:nth-child(0) {
	transition: transform 1s cubic-bezier(.165, .84, .44, 1) .4s, opacity .2s ease .4s
}

.Main__GoodTitle.onScreen .SplitText__LineMask:first-child {
	transition: transform 1s cubic-bezier(.165, .84, .44, 1) .5s, opacity .2s ease .5s
}

.Main__GoodTitle.onScreen .SplitText__LineMask:nth-child(2) {
	margin-top:2vw;
	transition: transform 1s cubic-bezier(.165, .84, .44, 1) .6s, opacity .2s ease .6s
}

.Main__TopTitleBottom {
	align-items: center;
	bottom: 0;
	display: flex;
	height: 12.6vw;
	justify-content: end;
	margin-left: 4.8vw;
	margin-top: auto;
	pointer-events: none;
	position: fixed;
	width: 90.2vw;
	z-index: 1
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__GoodTitle {
		font-size: 13.9vw;
		line-height: 14.6vw;
		margin-left: 4.6vw;
		width: 90.9vw
	}
	.Main__GoodTitle.onScreen .SplitText__LineMask:nth-child(2) {
		margin-top:0;
	}
	.Main__TopTitleBottom {
		box-sizing: border-box;
		height: auto;
		margin-left: 4.6vw;
		padding-bottom: 6vw;
		padding-top: 4.8vw;
		width: 90.9vw
	}
}

.Main__TopTitleContainer.onScreen .Main__TopTitleBottom {
	pointer-events: all
}


.Main__TopTitleArrowContainer {
	align-items: flex-end;
	display: flex;
	margin-top: -4.8vw;
	width: 4.1vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__TopTitleArrowContainer {
		margin-top: -9.3vw;
		width: 9.3vw
	}
}

.Main__TopTitleArrow {
	height: 100%;
	opacity: 0;
	width: 100%
}

.Main__TopTitleArrow svg {
	cursor: pointer;
	will-change: transform, opacity
}

.Main__TopTitleArrow:hover svg {
	animation: topArrowHover 1s cubic-bezier(.165, .84, .44, 1) forwards
}

.Main__History {
    position: absolute;
    width: 100vw;
    height: 300vh;
    margin-top: -100vh;
}

@media(max-width: 768px) and (orientation: portrait) {
	.Main__History {
		display:none;
	}
}

@media(max-width: 1024px) and (min-width: 768px) {
	.Main__History {
		.Main__LineContainer.onAnimation .lines .line:nth-child(3) {
			display:none;
		}
		.Main__LineContainer.onAnimation .lines .line:nth-child(6) {
			left: 33vw;
		}
		.Main__LineContainer .lines .line:nth-child(5) {
			left: -3vw;
		}
		.Main__LineContainer.onAnimation .lines .line:nth-child(6) {
			left: 40vw;
		}
		.Main__LineContainer .lines .line:nth-child(4) {
			top: 20vh;
		}
		.Main__HistoryWords .historytext {
			font-size: 1.8vw;
			top:6vw;
			left:5vw;
		}
		.Main__HistoryWords .historytext .subtitle {
			font-size: 1.2vw;
		}
		.Main__HistoryWords .word:nth-child(4) {
			top: -1vh;
			left: 2vw;
		}
		.Main__HistoryWords .word:nth-child(6){
			top: 13vw;
			left: 11vw;
		}
		.Main__HistoryWords .word:nth-child(7){
			top: 20vw;
			left: 16vw;
		}
		.Main__HistoryWords .word:nth-child(8){
			top: 27vw;
			left: 22vw;
		}
		.Main__HistoryWords .word:nth-child(9){
			top: 34vw;
			left: 28vw;
		}
		.Main__HistoryWords .word:nth-child(10){
			top: 5vw;
			left: 47vw;
		}
		.Main__HistoryWords .word:nth-child(11){
			top: 12vw;
			left: 53vw;
		}
		.Main__HistoryWords .word:nth-child(12){
			top: 18vw;
			left: 59vw;
		}
		.Main__HistoryWords .historyimg {
			left: 30vw;
		}
	}
}

.Main__History .txtContainer{
    padding-top: 26vh;
    background: #ffffff;
    height: 74vh;
    position: sticky;
    top: 0;
	transition: background 0.3s linear;
}

.Main__LineContainer {
	position: absolute;
	width: 100%;
	height: 100vh;
}

.Main__LineContainer .lines .line{
	position: absolute;
	height: 2px;
	background-color:#ffffff;
	background-size: 2px 2px;
}

.Main__LineContainer .lines .line:nth-child(1) {
	top: -28vh;
	right: 0;
	transform: rotate(-45deg);
	transform-origin: right top;
}

.Main__LineContainer.onAnimation .lines .line:nth-child(1) {
	animation: homeLineContainerAnimation1 2.7s ease forwards;
}

.Main__LineContainer .lines .line:nth-child(2) {
	bottom: 51vh;
	left: 0;
	transform: rotate(-45deg);
	transform-origin: left bottom;
}

.Main__LineContainer.onAnimation .lines .line:nth-child(2) {
	animation: homeLineContainerAnimation2 2.7s ease forwards;
}

.Main__LineContainer .lines .line:nth-child(3) {
	top: -28vh;
	left: -1vw;
	transform: rotate(45deg);
	transform-origin: left top;
}

.Main__LineContainer.onAnimation .lines .line:nth-child(3) {
	animation: homeLineContainerAnimation3 2s ease forwards;
	animation-delay: 3s;
}

.Main__LineContainer .lines .line:nth-child(4) {
	top: 0vh;
	right: 0;
	transform: rotate(-45deg);
	transform-origin: right top;
}

.Main__LineContainer.onAnimation .lines .line:nth-child(4) {
	animation: homeLineContainerAnimation4 2s ease forwards;
	animation-delay: 3s;
}

.Main__LineContainer .lines .line:nth-child(5) {
	top: -35vw;
	left: 0vw;
	height: 1px;
	transform: rotate(45deg);
	transform-origin: left top;
}

.Main__LineContainer.onAnimation .lines .line:nth-child(5) {
	animation: homeLineContainerAnimation5 3s ease forwards;
	animation-delay: 5s;
}

.Main__LineContainer .lines .line:nth-child(6) {
	top: -36vw;
	left: 23vw;
	height: 1px;
	transform: rotate(45deg);
	transform-origin: left top;
}

.Main__LineContainer.onAnimation .lines .line:nth-child(6) {
	animation: homeLineContainerAnimation6 1s ease-out forwards;
	animation-delay: 5.6s;
}

@keyframes homeLineContainerAnimation1 {
	0% {
		width: 0;
	}
	90% {
		width: 47vh;
	}
	to {
		width: 0;
	}
}

@keyframes homeLineContainerAnimation2 {
	0% {
		width: 0;
	}
	90% {
		width: 53vh;
	}
	to {
		width: 0;
	}
}

@keyframes homeLineContainerAnimation3 {
	0% {
		width: 0;
	}
	to {
		width: 38vh;
	}
}

@keyframes homeLineContainerAnimation4 {
	0% {
		width: 0;
	}
	to {
		width: 113vh;
	}
}

@keyframes homeLineContainerAnimation5 {
	0% {
		width: 0;
	}
	to {
		width: 140vw;
	}
}

@keyframes homeLineContainerAnimation6 {
	0% {
		width: 0;
	}
	to {
		width: 138.7vw;
	}
}

.Main__ServiceLinesAnimation {
	height: 19.4vw;
	margin-bottom: 2vw;
	opacity: .8;
	width: 100%;
	will-change: opacity
}

.Main__ServiceLinesAnimation path {
	transform: scale(0);
	transform-origin: center;
	transition: transform 2s cubic-bezier(.165, .84, .44, 1);
	will-change: transform
}

.Main__ServiceLinesAnimation.onScreen {
	opacity: .0;
	transition: opacity 2s cubic-bezier(.165, .84, .44, 1) 2s;
}

.Main__ServiceLinesAnimation.onScreen path {
	transform: scale(0.5);
	transition: transform 1.2s cubic-bezier(.165, .84, .44, 1)
}

.Main__ServiceLinesAnimation.onScreen path:first-child {
	transition-delay: .3s
}

.Main__ServiceLinesAnimation.onScreen path:nth-child(2) {
	transition-delay: .15s
}

.Main__ServiceLinesAnimation.onScreen path:nth-child(3) {
	transition-delay: 0s
}

.Main__ServiceLinesAnimation.onScreen path:nth-child(4),
.Main__ServiceLinesAnimation.onScreen path:nth-child(5) {
	transition-delay: .15s
}

.Main__ServiceLinesAnimation.onScreen path:nth-child(6) {
	transition-delay: .3s
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__ServiceLinesAnimation {
		display: none
	}
}

.Main__HistoryWords {
	position:absolute;
	color: #ffffff;
	font-size: 12vw;
	font-weight: 700;
	letter-spacing: -.13em;
	margin: 0vw auto auto;
	text-align: center;
	width: 100vw;
	top: 0vh;
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__HistoryWords {
		margin-top: 0;
		padding-top: 2.7vw
	}
}

.Main__HistoryWords .historytext{
	position: absolute;
	font-family: 'Pretendard-Regular';
	font-size: 1.1vw;
	font-weight: 700;
	letter-spacing: -.03em;
	text-align:left;
	top: 5vw;
	left: 20vw;
}

.Main__HistoryWords .word{
	opacity: 0;
}

.Main__HistoryWords .word .title{
	line-height: 1.4vw;
}

.Main__HistoryWords .word .subtitle{
	font-size: .7vw;
	font-weight: 600;
	color: #a59fb5;
	margin-left: 1vw;
}

.Main__HistoryWords .historyimg{
	position: absolute;
	top: -15vh;
	left: 33vw;
}

.Main__HistoryWords .historyimg img{
	width: 24vw;
	opacity: 0;
}

.Main__HistoryWords.onAnimation .historyimg img{
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 5s;
}

.Main__HistoryWords.onAnimation .word:nth-child(1){
	animation-delay: 0.3s;
	animation: homeSecondCatchphraseAnimation 3s ease forwards;
}

.Main__HistoryWords.onAnimation .word:nth-child(2){
	animation-delay: 0.6s;
	animation: homeSecondCatchphraseAnimation 3s ease forwards;
}

.Main__HistoryWords .word:nth-child(2) .char {
	opacity: .3;
	letter-spacing: -.09em;

}

.Main__HistoryWords .word:nth-child(3){
	font-size: 4vw;
	font-weight: 700;
	letter-spacing: -.05em;
	top: 0vh;
	left: 10vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(3){
	animation: homeSecondCatchphraseAnimation 3s ease forwards;
	animation-delay: .7s;
}

.Main__HistoryWords .word:nth-child(4){
	position:absolute;
	font-size: 4vw;
	font-weight: 700;
	letter-spacing: -.05em;
	top: 0vh;
	left: 10vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(4){
	animation: homeSecondCatchphraseAnimation2 3s ease forwards;
	animation-delay: 3s;
}

.Main__HistoryWords.onAnimation .word:nth-child(5){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 4s;
}

.Main__HistoryWords .word:nth-child(6){
	top: 10vw;
	left: 25vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(6){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 4.3s;
}

.Main__HistoryWords .word:nth-child(7){
	top: 15vw;
	left: 30vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(7){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 4.6s;
}

.Main__HistoryWords .word:nth-child(8){
	top: 20vw;
	left: 35vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(8){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 4.9s;
}

.Main__HistoryWords .word:nth-child(9){
	top: 25vw;
	left: 40vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(9){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 5.2s;
}

.Main__HistoryWords .word:nth-child(10){
	top: 8vw;
	left: 48vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(10){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 5.5s;
}

.Main__HistoryWords .word:nth-child(11){
	top: 13vw;
	left: 53vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(11){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 5.8s;
}

.Main__HistoryWords .word:nth-child(12){
	top: 18vw;
	left: 58vw;
}

.Main__HistoryWords.onAnimation .word:nth-child(12){
	animation: homeSecondCatchphraseAnimation2 2s ease forwards;
	animation-delay: 6.1s;
}

@keyframes homeSecondCatchphraseAnimation {
	0% {
		opacity: 0;
		transform: translate3d(0, -50%, 0)
	}
	90% {
		opacity: 1;
		transform: none
	}
	to {
		opacity: 0;
		transform: none
	}
}

@keyframes homeSecondCatchphraseAnimation2 {
	0% {
		opacity: 0;
		transform: translate3d(0, -10%, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

.Main__ServiceListTitle {
	color: #000;
	font-size: 4vw;
	font-weight: 700;
	letter-spacing: -.05em;
	text-align: center;
	margin-top: 7vw;
}

.Main__ServiceListTitle .subtitle {
	font-family: 'Pretendard-Regular';
	color: #000;
	font-size: 1.5vw;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	margin-top: 0.5vw;
}

.Main__ServiceList {
	column-count: 2;
	margin-left: auto;
	margin-right: auto;
	margin-top: 7.6vw;
	width: 77.7vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__ServiceList {
		column-count: 1;
		margin-top: 9.3vw;
		width: 75.5vw
	}
}

.Main__ServiceListItem {
	border-top: .03vw solid hsla(0, 0%, 7%, .5);
	display: flex;
	font-size: 1vw;
	line-height: 120%;
	padding-bottom: 7.2vw;
	padding-top: 2.9vw;
	width: 36.8vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__ServiceListItem {
		border-top: .1vw solid hsla(0, 0%, 7%, .5);
		font-size: 3.2vw;
		padding-bottom: 11.3vw;
		padding-top: 5.3vw;
		width: 100%
	}
}

.Main__RightSlide {
	height: 100vh;
	width: 35vw;
	right:0;
	top:0;
	position: fixed;
	background: #fff;
	transition: right 0.5s ease;
	right: calc(var(--vw, 1vw) * -50);
	border-left: 1px solid #e1e1e1;
	z-index: 3;
}
.Main__RightSlide .text1 {
	margin-top:50px;margin-left:60px;
}

.Main__RightSlide .text2 {
	position: absolute;top: 245px;left: 55px;transform-origin: top;transform: rotate(91deg);
}

.Main__RightSlide .text2 span {
	font-size: 50px;
}

.Main__RightSlide .text3 {
	position: absolute;bottom: 50px;left: 55px;
}

.Main__RightSlide .text3 span {
	font-weight: 400;font-size: 30px;line-height: 36px;
}


.Main__LeftPortfolio {
	width: 64vw;
	margin-top: 40vh;
	opacity:0;
	z-index:4;
}

.Main__LeftPortfolio.onScreen {
	opacity: 1;
	transition: margin-left 0.5s ease, opacity 1s ease;
}

@media(max-width:1024px) {
	.Main__RightSlide .text1 span {
		font-size: 13px;
	}
	.Main__RightSlide .text2 {
		top: 205px;
	}
	.Main__RightSlide .text2 span {
		font-size: 34px;
	}
	.Main__RightSlide .text3 {
		bottom: 20px;
		left: 25px;	
	}
	.Main__RightSlide .text3 span {
		font-size: 20px;
		line-height: 26px;
	}
}

@media(max-width:768px) and (orientation:portrait) {
	.Main__RightSlide {
		display:none;
	}
	.Main__LeftPortfolio {
		width: 100%;
		background:#fff;
	}
}

.Main__LeftPortfolioTitle {
	margin-bottom:10vh;
	opacity: .1;
	position: relative; height: 80px;margin-bottom: 40px; border-bottom: 1px solid #e1e1e1;
}

.Main__LeftPortfolioTitle.onScreen {
	opacity: 1;
	transition: transform 1s cubic-bezier(.165, .84, .44, 1) .4s, opacity 1s ease .4s
}

.Main__LeftPortfolioTitle .title_works {
	position: absolute;left: 30px;top: 25px;
}

.Main__LeftPortfolioTitle .title_works span {
	font-weight: 700;font-size: 24px;line-height: 26px;letter-spacing: -0.4px;
}

.Main__ServiceListItemTitle {
	font-weight: 700;
	letter-spacing: -.045em;
	width: 9vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__ServiceListItemTitle {
		width: 23vw
	}
}


.Main__Portfolio {
        font-family: 'Pretendard-Regular',serif;
        column-width: 480px;
        column-gap: 30px;
        padding: 30px;
}

@media(max-width:1640px) {
        .Main__Portfolio {
                column-width: 360px;
                column-gap: 15px;
                padding: 15px;
        }
}

.Main__Portfolio figure{
        display: inline-block;
        width:100%;
        margin:0;
        margin-bottom: 50px;
        padding:0px;
        border-bottom:1px solid #dedede;

}
.Main__Portfolio figure img{
        width:100%;
}


.Main__Portfolio .title_portfoilo{
	font-size:16px;
	color:#959595;
}

.Main__Portfolio .content_portfoilo{
	font-size:20px;
	line-height:30px;
	font-weight:500;
	padding-top:10px;
	color:#444;
}
.Main__Portfolio .img_portfoilo{
	padding-top:20px;
}

.Main__Portfolio .img_portfoilo img{
	border-radius:12px;
}


.Main__Portfolio .title2_portfolio{
	text-decoration:underline; 
	text-underline-position:under;
	color:#000
}

.Main__Portfolio .tag_portfolio {padding-top:20px;padding-bottom:30px;}
.Main__Portfolio .tag_portfolio ul li{display:inline-block; color:#7d7d7d; font-size:14px; padding:10px 20px; margin: 0 5px 5px; border-radius:20px; background:#f4f4f4}

.Main__ServiceListItemContent {
	font-family: 'Pretendard-Regular';
	letter-spacing: -.025em;
	margin-left: 3vw;
	width: 18vw
}

@media(max-width:1024px) and (orientation:portrait) {
	.Main__Portfolio {
		column-width: 360px;
		column-gap: 15px;
		padding: 15px;
	}
	.Main__ServiceListItemContent {
		width: 49vw
	}
}

.Main__Video {
	border-radius: 13.8vw 13.8vw 0 0;
	height: 1200px;
	width: 100%;
	transform-origin:center top;
	transform:scale(1.34);
	will-change: border-radius
}

.Main__Video.onScreen {
	border-radius: 0;
	transition: border-radius 1.2s cubic-bezier(.165, .84, .44, 1)
}

.Main__VideoImageContainer {
	height: 100%;
	transform-origin: center;
	transition: transform .8s cubic-bezier(.165, .84, .44, 1);
	width: 100%;
	will-change: transform
}

.Main__Video.isMasked .Main__VideoImageContainer {
	transform: scale(.8) translate3d(0, 0, 0);
	transition: transform 1.2s cubic-bezier(.165, .84, .44, 1)
}

.Main__VideoMask {
	-webkit-clip-path: path("M0,200 Q0,0 200,0 L1400,0 Q1600,0 1600,200 L1600,600 Q1600,800 1400,800 L200,800 Q0,800 0,600 Z");
	clip-path: path("M0,200 Q0,0 200,0 L1400,0 Q1600,0 1600,200 L1600,600 Q1600,800 1400,800 L200,800 Q0,800 0,600 Z");
	height: 800px;
	margin-left: auto;
	margin-right: auto;
	transform-origin: top;
	transition: -webkit-clip-path 1.2s cubic-bezier(.165, .84, .44, 1);
	transition: clip-path 1.2s cubic-bezier(.165, .84, .44, 1);
	transition: clip-path 1.2s cubic-bezier(.165, .84, .44, 1), -webkit-clip-path 1.2s cubic-bezier(.165, .84, .44, 1);
	width: 1600px;
	will-change: clip-path
}

.Main__Video.isMasked .Main__VideoMask {
	-webkit-clip-path: path("M0,200 Q0,0 200,0 L1400,0 Q1600,0 1600,200 L1600,600 Q1600,800 1400,800 L200,800 Q0,800 0,600 Z");
	clip-path: path("M0,200 Q0,0 200,0 L1400,0 Q1600,0 1600,200 L1600,600 Q1600,800 1400,800 L200,800 Q0,800 0,600 Z");
	transform:scale(0.9);
	will-change: transform;
}


.Main__VideoImage {
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	width: 100%;
	will-change: transform
}

.Main__Video.onScreen .Main__VideoImage {
	transform: scale(1);
	transition: transform 1.5s cubic-bezier(.165, .84, .44, 1), -webkit-clip-path 1s cubic-bezier(.165, .84, .44, 1);
	transition: transform 1.5s cubic-bezier(.165, .84, .44, 1), clip-path 1s cubic-bezier(.165, .84, .44, 1);
	transition: transform 1.5s cubic-bezier(.165, .84, .44, 1), clip-path 1s cubic-bezier(.165, .84, .44, 1), -webkit-clip-path 1s cubic-bezier(.165, .84, .44, 1)
}

.Main__Video_Mobile { display:none;padding: 3vw; }
.Main__Video_Mobile .Main__VideoImage { border-radius: 12vw; }

@media(max-width:1600px) {
	.Main__Video_Mobile { display:block; }
	.Main__Video { display:none; }
}

.Main__Digital {
	margin: 7vw auto;
	padding-top: 200vh;
	width: 78vw;
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Digital {
		padding-top: 13.9vw;
		width: 90.9vw
	}
}

@media(max-width:768px)and (orientation:portrait) {
	.Main__Digital {
		margin-top:-65vh;
	}
}

.Main__DigitalTitle {
	color: #030507;
	font-size: 6.2vw;
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: 6.6vw;
	text-align: center
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__DigitalTitle {
		font-size: 9vw;
		line-height: 9vw
	}
}

.Main__DigitalTitle .word .char {
	opacity: 0.1
}

.Main__DigitalTitle.onScreen .word .char {
	opacity: 1
}

.Main__DigitalTitle.onScreen .word:nth-child(1) .char:nth-child(1) {
	transition: opacity 1s linear 0.4s
}

.Main__DigitalTitle.onScreen .word:nth-child(1) .char:nth-child(2) {
	transition: opacity 1s linear .1s
}

.Main__DigitalTitle.onScreen .word:nth-child(1) .char:nth-child(3) {
	transition: opacity 1s linear .4s
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(1) {
	animation: Main__DigitalTitle_word5 2s linear infinite .1s;
}

@keyframes Main__DigitalTitle_word1 {
  0% { opacity: 1;color:#8124f3; }
  100% { opacity: 1;color:#7956ff; }
}

@keyframes Main__DigitalTitle_word2 {
  0% { opacity: 0.5;color:#fff; }
  10% { opacity: 1;color:#5b5965; }
  100% { opacity: 1;color:#5b5965; }
}

@keyframes Main__DigitalTitle_word3 {
  0% { opacity: 0.5;color:#fff; }
  10% { opacity: 1;color:#000; }
}

@keyframes Main__DigitalTitle_word4 {
  0% { opacity: 0.5;color:#fff; }
  10% { opacity: 1;color:#5b5965; }
  100% { opacity: 1;color:#5b5965; }
}

@keyframes Main__DigitalTitle_word5 {
  0% { opacity: 0.5;color:#fff; }
  10% { opacity: 0.8;color:#000; }
  100% { opacity: 0.5;color:#000; }
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(2) {
	animation: Main__DigitalTitle_word5 2s linear infinite .15s;
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(3) {
	animation: Main__DigitalTitle_word5 2s linear infinite .2s;
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(4) {
	animation: Main__DigitalTitle_word3 2s linear infinite .25s;
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(5) {
	animation: Main__DigitalTitle_word5 2s linear infinite .3s;
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(6) {
	animation: Main__DigitalTitle_word3 2s linear infinite .35s;
}

.Main__DigitalTitle.onScreen .word:nth-child(2) .char:nth-child(7) {
	animation: Main__DigitalTitle_word5 2s linear infinite .4s;
}

.Main__DigitalTitle.onScreen .word:nth-child(4) .char:nth-child(1){
	transition: opacity 1s linear .4s
}

.Main__DigitalTitle.onScreen .word:nth-child(4) .char:nth-child(3) {
	transition: opacity 1s linear .6s
}

.Main__DigitalTitle.onScreen .word:nth-child(4) .char:nth-child(5) {
	transition: opacity 1s linear .8s
}

.Main__DigitalTitle.onScreen .word:nth-child(4) .char:nth-child(7) {
	transition: opacity 1s linear 1s
}

.Main__DigitalTitle.onScreen .word:nth-child(4) .char:nth-child(9) {
	transition: opacity 1s linear 1.2s
}

.Main__DigitalTitle.onScreen .word:nth-child(6) .char:nth-child(1) {
	transition: opacity 2s linear .2s
}

.Main__DigitalTitle.onScreen .word:nth-child(6) .char:nth-child(3) {
	transition: opacity 2s linear .2s
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(1) {
	animation: Main__DigitalTitle_word2 5s linear infinite .1s;
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(2) {
	animation: Main__DigitalTitle_word3 5s linear infinite .2s;
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(3) {
	animation: Main__DigitalTitle_word3 5s linear infinite .3s;
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(4) {
	animation: Main__DigitalTitle_word3 5s linear infinite .4s;
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(5) {
	animation: Main__DigitalTitle_word3 5s linear infinite .5s;
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(6) {
	animation: Main__DigitalTitle_word3 5s linear infinite .6s;
}

.Main__DigitalTitle.onScreen .word:nth-child(10) .char:nth-child(7) {
	animation: Main__DigitalTitle_word3 5s linear infinite .7s;
}

.Main__DigitalTitle.onScreen .word:nth-child(12) .char:nth-child(1) {
	animation: Main__DigitalTitle_word4 5s linear infinite .1s;
}

.Main__DigitalTitle.onScreen .word:nth-child(12) .char:nth-child(2) {
	animation: Main__DigitalTitle_word5 5s linear infinite .1s;
}

.Main__DigitalTitle.onScreen .word:nth-child(12) .char:nth-child(3) {
	animation: Main__DigitalTitle_word5 2s linear infinite .2s;
}

.Main__DigitalTitle.onScreen .word:nth-child(12) .char:nth-child(4) {
	animation: Main__DigitalTitle_word5 2s linear infinite .2s;
}

.Main__DigitalTitle.onScreen .word:nth-child(12) .char:nth-child(5) {
	animation: Main__DigitalTitle_word5 2s linear infinite .3s;
}

.Main__DigitalTitle.onScreen .word:nth-child(12) .char:nth-child(7) {
	animation: Main__DigitalTitle_word3 2s linear infinite .3s;
}

.Main__OurBrand {
	background-color: #f3f1e9;
	overflow: hidden;
	padding-bottom: 6.9vw;
	padding-top: 13.1vw;
	position: relative
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand {
		padding-bottom: 18.6vw;
		padding-top: 15.1vw
	}
}

.Main__OurBrand__Lines {
	left: 0;
	margin-top: -14%;
	position: absolute;
	top: 0;
	width: 200%;
	will-change: transform
}

.Main__OurBrand__Subject {
	font-family:'Pretendard-Regular';
	font-size:3vw;
	color: #030507;
	font-size: 3vw;
	font-weight: 500;
	letter-spacing: -.05em;
	margin-left: 4.86vw;
}

.Main__OurBrand__Title {
	color: #030507;
	font-size: 6vw;
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: 6.6vw;
	margin-bottom: 6.2vw;
	margin-left: 4.8vw;
	width: 59.7vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__Title {
		font-size: 14.1vw;
		line-height: 13.8vw;
		margin-bottom: 2.7vw;
		margin-left: 4.6vw;
		width: 90.9vw
	}
}

.Main__OurBrand__Slider {
	width: 100%
}

.Main__OurBrand__SliderTop {
	border-top: .03vw solid hsla(0, 0%, 7%, .36);
	margin-left: 4.8vw;
	width: 90.2vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderTop {
		border-top: .1vw solid hsla(0, 0%, 7%, .36);
		margin-left: 4.6vw;
		width: 90.9vw
	}
}

.Main__OurBrand__SliderArrows {
	display: flex;
	justify-content: space-between;
	margin-left: 82.6vw;
	margin-top: 1.8vw;
	width: 7.6vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderArrows {
		margin-left: 69vw;
		margin-top: 3.9vw;
		width: 21.8vw
	}
}

.Main__OurBrand__SliderArrow {
	align-items: center;
	background-color: #fff;
	border-radius: 3.3vw;
	cursor: pointer;
	display: flex;
	height: 3.3vw;
	justify-content: center;
	transform: none;
	transition: transform .6s cubic-bezier(.165, .84, .44, 1);
	width: 3.3vw;
	will-change: transform
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderArrow {
		border-radius: 9.3vw;
		height: 9.3vw;
		width: 9.3vw
	}
}

.Main__OurBrand__SliderArrowIcon {
	width: 1vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderArrowIcon {
		width: 2.8vw
	}
}

.Main__OurBrand__SliderArrow:first-child:hover .Main__OurBrand__SliderArrowIcon {
	animation: articlesArrowHoverLeft .6s ease
}

@keyframes articlesArrowHoverLeft {
	49% {
		opacity: 0;
		transform: translate3d(-50%, 0, 0)
	}

	50% {
		opacity: 0;
		transform: translate3d(50%, 0, 0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.Main__OurBrand__SliderArrow:nth-child(2):hover .Main__OurBrand__SliderArrowIcon {
	animation: articlesArrowHoverRight .6s ease
}

@keyframes articlesArrowHoverRight {
	49% {
		opacity: 0;
		transform: translate3d(50%, 0, 0)
	}

	50% {
		opacity: 0;
		transform: translate3d(-50%, 0, 0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.Main__OurBrand__SliderSlides {
	cursor: grab;
	overflow: hidden;
	padding-bottom: 5.5vw;
	padding-top: 2vw;
	white-space: nowrap
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlides {
		padding-bottom: 0;
		padding-top: 8.3vw
	}
}

.Main__OurBrand__SliderSlidesRoller {
	display: inline-block;
	margin-left: 4.8vw;
	pointer-events: none;
	will-change: transform
}

.Main__OurBrand__SliderSlidesRoller.hasPointerEvent {
	pointer-events: all
}

.Main__OurBrand__SliderSlide {
	align-items: flex-start;
	border-radius: .69vw;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	height: 32.6vw !important;
	padding: 5.8vw 4.1vw 3.1vw;
	position: relative;
	transform: translate3d(0, 20.8vw, 0);
	transform-origin: center;
	transition: transform 1s cubic-bezier(.165, .84, .44, 1), border-radius 1s cubic-bezier(.165, .84, .44, 1);
	width: 30vw;
	background:#000;
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlide {
		border-radius: .9vw;
		height: 100vw !important;
		padding: 13.9vw 5.8vw 4.6vw;
		transform: none;
		width: 75.5vw
	}
}

.Main__OurBrand__SliderSlide:hover {
	border-radius: 2vw;
	transform: none
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlide:hover {
		border-radius: .9vw;
		transform: scale(1)
	}
}

.Main__OurBrand__SliderSlide:not(:last-child) {
	margin-right: 1.3vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlide:not(:last-child) {
		margin-right: 5.8vw
	}
}


.Main__OurBrand__Slider.onScreen .Main__OurBrand__SliderSlide:not(:hover) {
	transform: none
}

.Main__OurBrand__Slider.onScreen .Main__OurBrand__SliderSlide:not(:hover):nth-child(0) {
	transition-delay: 0s
}

.Main__OurBrand__Slider.onScreen .Main__OurBrand__SliderSlide:not(:hover):first-child {
	transition-delay: .1s
}

.Main__OurBrand__Slider.onScreen .Main__OurBrand__SliderSlide:not(:hover):nth-child(2) {
	transition-delay: .2s
}

.Main__OurBrand__Slider.onScreen .Main__OurBrand__SliderSlide:not(:hover):nth-child(3) {
	transition-delay: .3s
}

.Main__OurBrand__Slider.onScreen .Main__OurBrand__SliderSlide:not(:hover):nth-child(4) {
	transition-delay: .4s
}

.Main__OurBrand__SliderSlideBackground {
	display: flex;
	flex-direction: column;
	height: 100%;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0
}

.Main__OurBrand__SliderSlide:nth-child(1) {
	background:#fec10e;
}

.Main__OurBrand__SliderSlide:nth-child(2) {
	background:#f25e44;
}

.Main__OurBrand__SliderSlide:nth-child(3) {
	background:#f2919f;
}

.Main__OurBrand__SliderSlide .Main__OurBrand__SliderSlideBackground img{
	width: 88%;
	position: absolute;
	bottom: -20px;
	left: 6%;
}

.Main__OurBrand__SliderDot {
	align-items: center;
	background-color: #f3f1e9;
	border-radius: .6vw;
	display: flex;
	height: 1.2vw;
	justify-content: center;
	left: 2.29vw;
	position: absolute;
	top: 2vw;
	transition: transform .9s cubic-bezier(.165, .84, .44, 1);
	width: 1.24vw;
	will-change: transform
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderDot {
		border-radius: 2vw;
		height: 2vw;
		left: 2.3vw;
		top: 3vw;
		width: 2vw
	}
}

.Main__OurBrand__SliderSlide:hover .Main__OurBrand__SliderDot {
	transform: scale(2)
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlide:hover .Main__OurBrand__SliderDot {
		transform: none
	}
}

.Main__OurBrand__SliderDotArrow {
	opacity: 0;
	overflow: hidden;
	transform: translate3d(-100%, 0, 0);
	transition: opacity .1s cubic-bezier(.165, .84, .44, 1), transform .3s cubic-bezier(.165, .84, .44, 1);
	width: .9vw;
	will-change: opacity, transform
}

.Main__OurBrand__SliderSlide:hover .Main__OurBrand__SliderDotArrow {
	opacity: 1;
	transform: scale(.5);
	transition: opacity .2s cubic-bezier(.165, .84, .44, 1), transform .3s cubic-bezier(.165, .84, .44, 1)
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlide:hover .Main__OurBrand__SliderDotArrow {
		opacity: 0;
		transform: translate3d(-100%, 0, 0)
	}
}

.Main__OurBrand__SliderSlideLogo {
	height: 1.2vw;
	-webkit-user-select: none;
	user-select: none
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlideLogo {
		height: 3.7vw
	}
}

.Main__OurBrand__SliderSlide:nth-child(3n-2) .Main__OurBrand__SliderSlideLogo {
	filter: invert(100%) sepia(0) saturate(0) hue-rotate(321deg) brightness(106%) contrast(101%)
}

.Main__OurBrand__SliderSlideText {
	color: #030507;
	font-size: 1.7vw;
	letter-spacing: -.025em;
	line-height: 2.3vw;
	margin-top: 2vw;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
	white-space: break-spaces;
	width: 18.7vw;
	z-index: 1
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__OurBrand__SliderSlideText {
		font-size: 4.6vw;
		line-height: 5.6vw;
		margin-top: 6.9vw;
		width: 60.4vw
	}
}

.Main__OurBrand__SliderSlide:nth-child(3n-2) .Main__OurBrand__SliderSlideText {
	color: #f3f3f3
}

.Main__Contact {
	align-items: center;
	display: flex;
	height: 100vh;
	height: calc(var(--vh, 1vh)*100);
	overflow: hidden;
	position: relative;
	width: 100%
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Contact {
		height: 72.5vw
	}
}

.Main__Contact__BackgroundCover {
	background-color: #2a263b;
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	top: 0;
	transition: opacity .6s ease;
	width: 100%;
	will-change: opacity;
	z-index: 1
}

.Main__Contact__Infos {
	position: relative;
	width: 100%;
	z-index: 3;
	text-align: center;
}

.Main__Contact__Text {
	font-family: 'Pretendard-Regular',serif;
	color: #f3f3f3;
	font-size: 4vw;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 4.6vw;
	width: 100%;
	text-align: center;
}

.Main__Contact__Text.telnumber {
	font-size:1.8vw;margin-top:40px;letter-spacing:0;
}

/*CIRCLE ANIMATION*/
.pulse {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
}
.pulse circle {
  fill: #6728a1;
  -webkit-transform: scale(0);
		  transform: scale(0);
  opacity: 0;
  -webkit-transform-origin: 50% 50%;
		  transform-origin: 50% 50%;
  -webkit-animation: pulse 4s cubic-bezier(0.5, 0.5, 0, 1);
		  animation: pulse 4s cubic-bezier(0.5, 0.5, 0, 1);
		  animation-iteration-count: infinite;
}
.pulse circle:nth-child(2) {
  fill: #ff5154;
  -webkit-animation: pulse 4s 0.75s cubic-bezier(0.5, 0.5, 0, 1);
		  animation: pulse 4s 0.75s cubic-bezier(0.5, 0.5, 0, 1);
		  animation-iteration-count: infinite;
}
.pulse circle:nth-child(3) {
  fill: #ffffff;
  -webkit-animation: pulse 4s 1.5s cubic-bezier(0.5, 0.5, 0, 1);
		  animation: pulse 4s 1.5s cubic-bezier(0.5, 0.5, 0, 1);
		  animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  25% {
	opacity: 0.7;
  }
  100% {
	-webkit-transform: scale(1);
			transform: scale(1);
  }
}

@keyframes pulse {
  25% {
	opacity: 0.7;
  }
  100% {
	-webkit-transform: scale(1);
			transform: scale(1);
  }
}
/*CIRCLE ANIMATION*/

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Contact__Text {
	    font-size: 6vw;
		line-height: 6.8vw;
	}
	.Main__Contact__Text.telnumber {
		font-size:4.3vw;
	}
}

.Main__Contact__Cta {
	cursor: pointer;
	display: inline-flex;
	margin-top: 3.47vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Contact__Cta {
		margin-top: 5.5vw
	}
}

.Main__Contact__CtaLabel {
	color: #fff;
	font-size: 1.52vw;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.86vw;
	margin-right: .69vw;
	transform: none;
	transition: transform .6s cubic-bezier(.77, 0, .175, 1);
	will-change: transform
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Contact__CtaLabel {
		font-size: 4vw;
		line-height: 3.9vw;
		margin-right: 2.3vw
	}
}

.Main__Contact__Cta:hover .Main__Contact__CtaLabel {
	transform: translate3d(2.2vw, 0, 0)
}

.Main__Contact__CtaArrow {
	align-items: center;
	background-color: #571eff;
	border-radius: 1.8vw;
	display: flex;
	height: 1.8vw;
	justify-content: center;
	transform: none;
	transform-origin: right;
	width: 1.8vw
}

.Main__Contact__CtaArrow,
.Main__Contact__CtaArrow:first-child {
	transition: transform .6s cubic-bezier(.77, 0, .175, 1);
	will-change: transform
}

.Main__Contact__CtaArrow:first-child {
	transform: translate3d(-1.38vw, 0, 0) scale(0);
	transform-origin: left
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Contact__CtaArrow {
		border-radius: 2.5vw;
		height: 2.5vw;
		margin-top: .8vw;
		width: 2.5vw
	}
}

.Main__Contact__Cta:hover .Main__Contact__CtaArrow {
	transform: translate3d(1.3vw, 0, 0) scale(0)
}

.Main__Contact__Cta:hover .Main__Contact__CtaArrow:first-child {
	transform: none
}

.Main__Contact__CtaArrowIcon {
	width: 1vw
}

@media(max-width:1024px)and (orientation:portrait) {
	.Main__Contact__CtaArrowIcon {
		width: 1.4vw
	}
}



.SplitText__LineMask {
	overflow: hidden
}

.SplitText__LineWord {
	display: inline-block;
	will-change: transform
}

.word {
	display: inline-block
}

.Parallax__ChildrenContainer {
	position:relative;
	height: 100%;
	transform-origin: center;
	width: 100%
}

.Mask {
	contain: paint
}

@media(max-width:1024px)and (orientation:portrait) {
	.Mask {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
		contain: none
	}
}

html.safari.mac .Mask {
	overflow: hidden
}

html.is-touch .Mask.disabledOnMobile {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	contain: none
}

.Mask__Container {
	will-change: transform
}

.ImageLazyLoad {
	opacity: 0;
	transition: opacity .9s ease;
	will-change: opacity
}

.ImageLazyLoad.loaded {
	opacity: 1
}

/*order 버튼*/
.project_order {
    font-family: 'Pretendard-Regular',serif;
    font-size: 0.8vw;
    font-weight: 700;
    position: fixed;
    left: 3vw;
    bottom: 3vw;
    -webkit-transform: rotate(270deg);
    z-index: 11;
    opacity: 0;
    transition: opacity .9s ease;
}
.project_order.onScreen {
	opacity:1;
}
.project_order a { 
    position: absolute;
    z-index: 12;
    color: #fff;
    -webkit-transform: rotate(-270deg);
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
    opacity: 1;
    width: 5vw;
    top: 2vw;
}

/*dotted circle effect*/
.hovicon {
    display: inline-block;
    cursor: pointer;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    text-decoration: none;
    z-index: 1;
    color: #000;
}
.hovicon.small {
	font-size: 20px;
	line-height:45px;
	width:45px;
	height:45px;
	margin:7px;
}
.hovicon.mini {
	font-size: 15px;
	line-height:32px;
	width:30px;
	height:30px;
	margin:7px;
}
.hovicon.auto-width {
	width: auto;
	height: auto;
	padding: 15px;
}
.hovicon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content:'';
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.hovicon:before {
	speak: none;
	font-size: 48px;
	line-height: 90px;
	display: block;
}
.hovicon.effect-8 {
	margin-top:50px;
	margin-left:-50px;
	background: rgba(255, 255, 255, 0.1);
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
}
.hovicon.effect-8:after {
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
	opacity: 0;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}
.hovicon.effect-8:hover {
	background: rgba(255, 255, 255, 0.05);
	-webkit-transform: scale(0.93);
	-moz-transform: scale(0.93);
	-ms-transform: scale(0.93);
	transform: scale(0.93);
	color: #fff;
}
.hovicon.effect-8:hover i {
	color: #fff;
}
.hovicon.effect-8:after {
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
	-moz-animation: sonarEffect 1.3s ease-out 75ms;
	animation: sonarEffect 1.3s ease-out 75ms;
	animation-iteration-count:infinite;
}
@-webkit-keyframes sonarEffect {
	0% {
	border:1px solid #fff;
		opacity: 0.3;
	}
	40% {
	border:1px solid #000;
		opacity: 0.7;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #bbb, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
	border:1px solid #fff;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}
@-moz-keyframes sonarEffect {
	0% {
	border:1px solid #fff;
		opacity: 0.3;
	}
	40% {
	border:1px solid #000;
		opacity: 0.7;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #bbb, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
	border:1px solid #fff;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes sonarEffect {
	0% {
	border:1px solid #fff;
		opacity: 0.3;
	}
	40% {
	border:1px solid #000;
		opacity: 0.7;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #bbb, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
	border:1px solid #fff;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}



/* Effect 4 */
 .hovicon.effect-4 {
    width: 5vw;
    height: 5vw;
}
.hovicon.effect-4.small {
	width:45px;
	height:45px;
}
.hovicon.effect-4.mini {
	width:30px;
	height:30px;
}
.hovicon.effect-4.sub-a {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}
.hovicon.effect-4:before {
	line-height: 92px;
}
.hovicon.effect-4:after {
	top: -4px;
	left: -4px;
	padding: 0;
	z-index: 10;
	border: 4px dashed #fff;
}
.hovicon.effect-4.changed:after {
	border: 4px dashed #000;
}
.hovicon.effect-4:hover {
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	color: #fff;
}
.hovicon.effect-4:hover i {
	color: #fff;
}
/* Effect 4b */
 .hovicon.effect-4.sub-b {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}
.hovicon.effect-4.sub-b:after {
	-webkit-animation: spinAround 9s linear infinite;
	-moz-animation: spinAround 9s linear infinite;
	animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 1024px) and (orientation: portrait) {
    .hovicon.effect-4 {
		width: 12vw;
		height: 12vw;
    }
	.project_order {
		font-size: 2vw;
		bottom: 5vw;
	}
	.project_order a {
		width: 11vw;
		top: 5vw;
	}
}
/*dotted circle effect end*/