@charset "utf-8";

/* greeting */
section#greeting .bg01 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    width: 80%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(30% 55% at 65% 50%, rgba(82, 80, 153, 1) 0%, rgba(229, 229, 218, 1) 100%);
    mix-blend-mode: overlay;
    filter: blur(100px);
}

/* message */
.contents#message .bg01 {
	position: absolute;
	bottom: 10%;
	right: 5%;
	z-index: 0;
	color: rgba(255, 255, 255, 0.50);
	font-size: 150px;
	opacity: 0.2;
}

@media screen and (max-width: 1179px) {
	.contents#message .bg01 {
		right: -3%;
		font-size: 93px;
	}
}

@media screen and (max-width: 639px) {
	.contents#message .bg01 {
		font-size: 63px;
	}
}

.contents#message .bg02 img {
	position: absolute;
    bottom: 18%;
    right: 6%;
    z-index: 3;
    width: 284px;
}

@media screen and (max-width: 1179px) {
	.contents#message .bg02 img {
		right: 0%;
        bottom: 9%;
        width: 206px;
	}
}

@media screen and (max-width: 639px) {
	.contents#message .bg02 img {
		right: 0;
	}
}

.contents#message .bg03 img {
	position: absolute;
    bottom: 28%;
    right: 12%;
    z-index: 1;
    width: 157px;
}

@media screen and (max-width: 1179px) {
	.contents#message .bg03 img {
		right: 7%;
        bottom: 16%;
        width: 114px;
        
	}
}

@media screen and (max-width: 639px) {
	.contents#message .bg03 img {
        right: 80px;
		bottom: 18%;
	}
}

/* statistics */
.contents#statistics .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contents#statistics .z-1,
.contents#statistics .z-2,
.contents#statistics .z-3 {
	position: absolute;
	width: 200vw;
	height: 200vw;
	left: -50vw;
	top: -50vw;
	transform-origin: center;
}

.contents#statistics .star {
	overflow: hidden;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	background-size: 512px 512px;
}

.contents#statistics .tl {
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/statistics_star_01.png?v=240930d");
}

.contents#statistics .tr {
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/img/statistics_star_02.png?v=240930d");
}

.contents#statistics .bl {
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/img/statistics_star_03.png?v=240930d");
}

.contents#statistics .br {
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/img/statistics_star_04.png?v=240930d");
}

@keyframes star-ani {
	0% {
		opacity: .5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: .5;
	}
}

.contents#statistics .star-ani {
	animation-name: star-ani;
	animation-iteration-count: infinite;
}

.contents#statistics .freq-5 {
	animation-duration: 5s;
}

.contents#statistics .freq-6 {
	animation-duration: 6.33s;
}

.contents#statistics .freq-7 {
	animation-duration: 7s;
}

.contents#statistics .freq-8 {
	animation-duration: 8.88s;
}

.contents#statistics .freq-9 {
	animation-duration: 9s;
}

.contents#statistics .freq-10 {
	animation-duration: 10.17s;
}

.contents#statistics .delay-2 {
	animation-delay: 1.33s;
}

.contents#statistics .delay-4 {
	animation-delay: 2.11s;
}

/* load */
.contents#journey .bg01 {
	position: absolute;
	top: 5%;
	left: 5%;
	z-index: 0;
	width: 1100px;
	height: 1100px;
	background: rgba(90, 233, 253);
	border-radius: 50%;
	opacity: 0.1;
	filter: blur(140px);
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg01 {
		display: none;
	}
}

.contents#journey .bg02 {
	position: absolute;
	bottom: 10%;
	right: 10%;
	z-index: 0;
	width: 1042px;
	height: 1042px;
	background: rgba(255, 216, 7);
	border-radius: 50%;
	opacity: 0.05;
	filter: blur(140px);
	animation-delay: .5s;
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg02 {
		right: 50%;
		bottom: 50%;
		transform: translate(50%, 50%);
		width: 100%;
		height: 100%;
	}
}

.contents#journey .bg03 {
    position: absolute;
    top: -100px;
    right: 140px;
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg03 {
		top: 26%;
		right: 25%;
	}
}

.contents#journey .bg03 > div {
	position: absolute;
	border-radius: 50%;
	filter: blur(3px);
}

.contents#journey .bg03 .obj01 {
	width: 36px;
	height: 36px;
	background-color: rgba(217, 210, 194, .3);
}

.contents#journey .bg03 .obj02 {
	left: 12px;
	top: 16px;
	width: 48px;
	height: 48px;
	background-color: rgba(255, 235, 190, .3);
}

.contents#journey .bg04 {
    position: absolute;
    top: 500px;
    right: 270px;
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg04 {
		top: 40%;
		right: 90%;
	}
}

.contents#journey .bg04 > div {
	position: absolute;
	border-radius: 50%;
}

.contents#journey .bg04 .obj01 {
	width: 204px;
	height: 204px;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/load_object_01.png?v=240925a");
	background-size: 100%;
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg04 .obj01 {
		width: 112px;
		height: 112px;
	}
}

.contents#journey .bg04 .obj02 {
	left: 80px;
	top: 80px;
	width: 150px;
	height: 150px;
	background-color: rgba(181, 170, 146, .3);
	filter: blur(3px);
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg04 .obj02 {
		left: 50px;
		top: 50px;
		width: 80px;
		height: 80px;
	}
}

.contents#journey .bg05 {
    position: absolute;
    left: 0px;
    bottom: 650px;
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg05 {
		position: absolute;
		left: 60%;
        bottom: 27%;
	}
}

.contents#journey .bg05 > div {
	position: absolute;
	border-radius: 50%;
}

.contents#journey .bg05 .obj01 {
	width: 174px;
	height: 174px;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/load_object_02.png?v=240925a");
	background-size: 100%;
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg05 .obj01 {
		width: 90px;
		height: 90px;
	}
}

.contents#journey .bg05 .obj02 {
	left: 34px;
	top: 25px;
	width: 165px;
	height: 165px;
	background-color: rgba(182, 143, 103, .2);
}

@media screen and (max-width: 1179px) {
	.contents#journey .bg05 .obj02 {
		left: 16px;
		top: 12px;
		width: 86px;
		height: 86px;
	}
}

/* history */
.contents#history .bg01 {
	position: absolute;
	top: 10%;
	right: 10%;
	z-index: 0;
	width: 389px;
	height: 389px;
	background: rgba(145, 124, 20);
	border-radius: 50%;
	opacity: 0.3;
	filter: blur(140px);
}

.contents#history .bg02 {
	position: absolute;
	bottom: 15%;
	left: 10%;
	z-index: 0;
	width: 389px;
	height: 389px;
	background: rgba(124, 24, 62);
	border-radius: 50%;
	opacity: 0.3;
	filter: blur(140px);
	animation-delay: .5s;
}

.contents#history .bg-word {
	position: absolute;
	width: 100%;
	height: 44px;
	bottom: 100px;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/anniversary_bg.png");
	background-repeat: repeat-x;
}

@media screen and (max-width: 1179px) {
	.contents#history .bg-word {
		bottom: 40px;
		height: 28px;
		background-size: auto 28px;
	}
}

/* celebration */
.contents#celebration .bg01 {
	position: absolute;
	top: 40%;
	left: 60%;
	z-index: 0;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
	background: rgba(139, 30, 72, .3);
	filter: blur(140px);
}

@media screen and (max-width: 1179px) {
	.contents#celebration .bg01 {
		transform: translate(-50%, -50%) scale(.5);
		opacity: .25;
	}
}

.contents#celebration .bg02 {
	position: absolute;
	top: 50%;
	left: 40%;
	z-index: 0;
	transform: translate(-50%, -50%);
	width: 626px;
	height: 626px;
	background: rgba(90, 233, 253, .2);
	filter: blur(140px);
	animation-delay: .5s;
}

@media screen and (max-width: 1179px) {
	.contents#celebration .bg02 {
		transform: translate(-50%, -50%) scale(.5);
		opacity: .25;
	}
}

.contents#celebration .bg03 {
	position: absolute;
	top: 70%;
	left: 60%;
	z-index: 0;
	transform: translate(-50%, -50%);
	width: 626px;
	height: 626px;
	background: linear-gradient(90deg, rgba(146, 7 ,255, .3) 0%, rgba(255, 152, 152, .3) 100%);
	filter: blur(140px);
}

@media screen and (max-width: 1179px) {
	.contents#celebration .bg03 {
		transform: translate(-50%, -50%) scale(.5);
		opacity: .25;
	}
}

.contents#celebration .bg04 {
	position: absolute;
	top: 20%;
	left: 80%;
	z-index: 0;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 120px;
	background: rgba(20, 76, 145, .2);
	filter: blur(140px);
	animation-delay: .5s;
}

@media screen and (max-width: 1179px) {
	.contents#celebration .bg04 {
		transform: translate(-50%, -50%) scale(.5);
		opacity: .25;
	}
}

.contents#celebration .bg05 {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	background: rgba(255, 216, 75, .5) ;
	filter: blur(140px);
}

@media screen and (max-width: 1179px) {
	.contents#celebration .bg05 {
		transform: translate(-50%, -50%) scale(.5);
		opacity: .25;
	}
}

/* and */
.contents#and .bg01 {
	position: absolute;
	left: 50%;
	bottom: -50vh;
	z-index: 0;
	transform: translate(-50%, 0);
	max-width: 1100px;
	max-height: 1100px;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(123,76,3,1) 100%);
	border-radius: 50%;
	filter: blur(140px);
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg01 {
		max-width: 700px;
		max-height: 700px;
		filter: blur(140px);
	}
}

@media screen and (max-width: 639px) {
	.contents#and .bg01 {
		max-width: 600px;
		max-height: 600px;
	}
}

.contents#and .bg02 {
	position: absolute;
    left: 36%;
    bottom: 22%;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg02 {
		left: 30%;
	}
}

@media screen and (max-width: 639px) {
	.contents#and .bg02 {
		display: none;
	}
}

.contents#and .bg02 .obj01 {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background-color: #B5AA92;
	opacity: 0.4;
	filter: blur(3px);
    animation-delay: .5s;
    animation-duration: 3s;
}

.contents#and .bg03 {
	position: absolute;
    left: 30%;
    bottom: 10%;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg03 {
		left: 20%;
	}
}

.contents#and .bg03 .obj01 {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #D9D2C2;
	opacity: 0.6;
	filter: blur(3px);
}

@media screen and (max-width: 1179px) {
	.contents#and .bg03 .obj01 {
		width: 28px;
		height: 28px;
	}
}

.contents#and .bg03 .obj02 {
	position: absolute;
	top: 17px;
	left: 14px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #FFEBBE;
	opacity: 0.8;
	filter: blur(3px);
}

@media screen and (max-width: 1179px) {
	.contents#and .bg03 .obj02 {
		width: 36px;
		height: 36px;
	}
}

.contents#and .bg04 {
	position: absolute;
    right: 30%;
    bottom: 26%;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg04 {
        right: 10%;
	}
}

.contents#and .bg04 .obj01 {
	width: 178px;
	height: 178px;
	border-radius: 50%;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/finish_object_01.png");
	background-repeat: no-repeat;
	background-size: 100%;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg04 .obj01 {
		width: 116px;
		height: 116px;
	}
}

.contents#and .bg04 .obj02 {
	position: absolute;
	top: 120px;
	left: 115px;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background-color: #D9D9D9;
	opacity: 0.3;
	filter: blur(2px);
}

@media screen and (max-width: 1179px) {
	.contents#and .bg04 .obj02 {
		display: none;
	}
}

.contents#and .bg05 {
	position: absolute;
    right: 35%;
    bottom: 12%;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg05 {
		position: absolute;
		right: 10%;
		bottom: 15%;
	}
}

.contents#and .bg05 .obj01 {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-color: #B5AA92;
	filter: blur(3px);
	opacity: .4;
}

@media screen and (max-width: 1179px) {
	.contents#and .bg05 .obj01 {
		width: 74px;
		height: 74px;
	}
	
}

/* event */
.contents#event .bg01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
	height: 1000px;
	background-color: #FFAD33;
	border-radius: 50%;
	opacity: 0.1;
	filter: blur(170px);
    animation-delay: 1s;
}

.contents#event .bg02 {
	position: absolute;
	top: -50px;
	right: -50px;
	width: 1100px;
	height: 1100px;
	background-color: #9BA7FF ;
	border-radius: 50%;
	opacity: 0.1;
	filter: blur(170px);
}

.contents#event .bg03 {
	position: absolute;
	bottom: 50%;
	left: 50%;
	z-index: 0;
	transform: translate(-50%, 0);
	width: 800px;
	height: 150px;
	background-color: #F1FDFF;
	border-radius: 50%;
	opacity: 5;
	filter: blur(120px);
}

@media screen and (max-width: 1179px) {
	.contents#event .bg03 {
		width: 100%;
		height: 80px;
	}
}

.contents#event .bg04 {
	position: absolute;
	top: 6%;
	left: 26%;
}

@media screen and (max-width: 1179px) {
	.contents#event .bg04 {
		display: none;
	}
}

.contents#event .bg04 .obj01 {
	width: 27px;
	height: 27px;
	background-color: #B5AA92;
	border-radius: 50%;
	opacity: 0.4;
	filter: blur(3px);
}

.contents#event .bg05 {
	position: absolute;
    bottom: 10%;
    left: 17%;
}

@media screen and (max-width: 1179px) {
	.contents#event .bg05 {
		left: 5%;
        bottom: 0;
	}
}

.contents#event .bg05 .obj01 {
	width: 40px;
	height: 40px;
	background-color: #D9D2C2;
	border-radius: 50%;
	opacity: 0.3;
	filter: blur(3px);
}

.contents#event .bg05 .obj02 {
	position: absolute;
	top: 17px;
	left: 14px;
	width: 50px;
	height: 50px;
	background-color: #FFEBBE;
	border-radius: 50%;
	opacity: 0.3;
	filter: blur(3px);
}

.contents#event .bg06 {
    position: absolute;
    top: 16%;
    right: 17%;
}

@media screen and (max-width: 1179px) {
	.contents#event .bg06 {
		top: auto;
        right: 3%;
        bottom: 6%;
	}
}

.contents#event .bg06 .obj01 {
	width: 111px;
	height: 111px;
	background-color: #B5AA92;
	border-radius: 50%;
	opacity: 0.2;
	filter: blur(3px);
}

.contents#event .bg07 {
	position: absolute;
	bottom: -5%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 793px;
	height: 300px;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/particle.png");
	mix-blend-mode: screen;
}

/* partner */
.contents#partner .bg01 {
	position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 793px;
    height: 300px;
    background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/bg/particle.png");
    mix-blend-mode: screen;
}

.contents#partner .bg02 {
	position: absolute;
    top: 20%;
    right: 15%;
}

@media screen and (max-width: 1179px) {
	.contents#partner .bg02 {
		right: -10%;
	}
}

.contents#partner .bg02 .obj01 {
	width: 370px;
	height: 370px;
	background-color: #D8C8A5;
	border-radius: 50%;
	opacity: .3;
	filter: blur(10px);
}

@media screen and (max-width: 1179px) {
	.contents#partner .bg02 .obj01 {
		width: 165px;
		height: 165px;
	}
}

.contents#partner .bg03 {
	position: absolute;
	bottom: 15%;
    left: 18%;
}

@media screen and (max-width: 1179px) {
	.contents#partner .bg03 {
		left: 0%;
	}
}

.contents#partner .bg03 .obj01 {
	width: 92px;
	height: 92px;
	background-color: #D9D2C2;
	border-radius: 50%;
	opacity: .2;
	filter: blur(4px);
}

@media screen and (max-width: 1179px) {
	.contents#partner .bg03 .obj01 {
		width: 42px;
		height: 42px;
	}
}

.contents#partner .bg03 .obj02 {
	position: absolute;
	top: -50px;
	left: 50px;
	width: 114px;
	height: 114px;
	background-color: #FFEBBE;
	border-radius: 50%;
	opacity: .3;
	filter: blur(3px);
}

@media screen and (max-width: 1179px) {
	.contents#partner .bg03 .obj02 {
		top: -25px;
		left: 25px;
		width: 50px;
		height: 50px;
	}
}