@charset "utf-8";

.areas img.center-img,
.areas video.center-img {
	display: block; 
	position: relative; 
	top: 0; left: 50%; 
	transform: translateX(-50%); 
	max-width: none;
}
div.areas {
	position: relative;
}
div.side-banner {
	position: fixed;
	right: 40px;
	bottom: 100px;
	z-index: 20;
	text-align: center
}
div.side-banner a {
	cursor: pointer;
}

a.btn-bg {
	display: inline-block;
	padding: 16px 42px;
	border-radius: 10px;
	box-shadow: 0px 0px 12px -2px rgba(0, 0, 0, 0.5);
	line-height: 1.25;
	background: #da291c;
	text-decoration: none;
	color: white;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.6s ease;
	overflow: hidden;
}
a.btn-bg.green {
	background: #2d8d46;
}
a.btn-bg:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	top: var(--mouse-y);
	left: var(--mouse-x);
	transform-style: flat;
	transform: translate3d(-50%, -50%, 0);
	background: rgba(255, 255, 255, 0.1);
	border-radius: 100%;
	transition: width 0.3s ease, height 0.3s ease;
}
a.btn-bg:hover {
	background: #620700;
}
a.btn-bg.green:hover {
	background: #105622;
}

/* area-1 */
.area-1 {
	height: 1043px;
}
.area-1 div.text-1 {
	position: absolute;
	z-index: 1;
	top: 150px;
	width: 100%;
	color: #392d26;
}
.area-1 div.text-1 p.f {
	font-family: 'yg-jalnan';
	font-size: 56px;
	line-height: 76px;
}
.area-1 div.text-1 p.s {
	font-family: 'eastarjet-b';
	font-size:32px;
	padding: 20px 0 48px 0;
}
.area-1 div.text-1 p.t {
	font-family: 'eastarjet-m';
	font-size:26px;
	line-height: 36px;
}

/* area-2 */
.area-2 {
	height: 1230px;
}
.area-2 img.center-img {

}
.area-2 div.slide-weather {
	position: absolute;
	top: 300px;
	width: 1320px;
	height: 743px;
	left:50%;
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	transform: translateX(-50%);
}
.area-2 div.weather-swiper {
	position: absolute;
	width: 1440px;
	height: 843px;
	left:50%;
	transform: translateX(-50%);
	overflow: hidden;
	text-align: center;
}
.area-2 div.slide-weather .swiper-horizontal>.swiper-pagination-bullets {
	bottom: 35px;
	right: 0;
}
.area-2 .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
	width: 95%;
}
.area-2 div.slide-weather .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.area-2 div.slide-weather .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 20px;
}
.area-2 div.slide-weather .swiper-pagination {
	z-index: 10;
	text-align: right;
}
.area-2 div.slide-weather .swiper-pagination-bullet {
	width: 11px;
	height: 11px;
	background: #fff;
}
.area-2 .swiper-button-next, 
.area-2 .swiper-button-prev {
	top: 45%;
	color: #fff;
}
.area-2 .swiper-button-next {
	right: 5px;
}
.area-2 .swiper-button-prev {
	left: 5px;
}
.area-2 div.slide-text {
	position: absolute;
	top: 850px;
	width: 692px;
	height: 290px;
	z-index: 10;
	left:36%;
	transform: translateX(-50%);
	overflow: hidden;
}

/* 기후위기 */
.area-2 div.slide-weather div.swiper-imgs {
	width: 1320px;
	height: 743px;
	margin: 0 auto;
	font-family: 'eastarjet-b';
	font-size: 40px;
	line-height: 54px;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.7);
	letter-spacing: -1px;
}
.area-2 div.slide-weather div.swiper-imgs span {
	display: block;
	font-family: 'eastarjet-m';
	font-size: 26px;
	padding-top: 5px;
}
.area-2 div.slide-weather div.swiper-imgs.img-1 {
	padding-top: 150px;
	background: url('/climate/images/main/weather_img_1.jpg') 0 0 no-repeat;
}
.area-2 div.slide-weather div.swiper-imgs.img-2 {
	padding-top: 140px;
	background: url('/climate/images/main/weather_img_2.jpg') 0 0 no-repeat;
}
.area-2 div.slide-weather div.swiper-imgs.img-3 {
	padding-top: 310px;
	background: url('/climate/images/main/weather_img_3.jpg') 0 0 no-repeat;
}
.area-2 div.slide-weather div.swiper-imgs.img-4 {
	padding-top: 250px;
	background: url('/climate/images/main/weather_img_4.jpg') 0 0 no-repeat;
	text-align: left;
}
.area-2 div.slide-weather div.swiper-imgs.img-4 p {
	margin-left: 80px;
}
.area-2 div.slide-weather div.swiper-imgs.img-5 {
	padding-top: 140px;
	background: url('/climate/images/main/weather_img_5.jpg') 0 0 no-repeat;
}
.area-2 div.weather-swiper-text div.swiper-txts {
	padding: 50px;
	height: 288px;
	font-family: 'eastarjet-m';
	font-size: 26px;
}
.area-2 div.weather-swiper-text div.swiper-txts span.a {
	display: block;
	font-family: 'yg-jalnan';
	font-size: 24px;
	color: #fff;
}
.area-2 div.weather-swiper-text div.swiper-txts span.b {
	display: block;
	font-family: 'yg-jalnan';
	font-size: 64px;
	color: #fff;
	padding: 13px 0 15px 0;
	letter-spacing: -2px;
}
.area-2 div.weather-swiper-text div.swiper-txts span.c {
	display: block;
	font-family: 'eastarjet-l';
	font-size: 26px;
	color: #fff;
	line-height: 34px;
}
.area-2 div.weather-swiper-text div.swiper-txts.txt-1 {
	width: 632px;
	background: #4c4035;
}
.area-2 div.weather-swiper-text div.swiper-txts.txt-2 {
	width: 692px;
	background: #da291c;
}
.area-2 div.weather-swiper-text div.swiper-txts.txt-3 {
	width: 632px;
	background: #1b3255;
}
.area-2 div.weather-swiper-text div.swiper-txts.txt-4 {
	width: 652px;
	background: #dd8717;
}
.area-2 div.weather-swiper-text div.swiper-txts.txt-5 {
	width: 692px;
	background: #779bb6;
}
/* //기후위기 */


/* area-3 */
.area-3 {
	height: 1446px;
}
.area-3 div.content-area {
	position: absolute;
	top: 0;
	width: 100%;
	height: 1446px;
	color: #fff;
	text-align: center;
}
.area-3 div.content-area p.txt-1 {
	font-family: 'yg-jalnan';
	font-size: 32px;
	margin-top: 200px;
}
.area-3 div.content-area p.txt-2 {
	display: inline-block;
	font-family: 'yg-jalnan';
	font-size: 80px;
	margin-top: 20px;
	background: #da291c;
	padding: 15px 15px 0 15px;
}
.area-3 div.content-area p.txt-3 {
	font-family: 'eastarjet-l';
	font-size: 26px;
	line-height: 43px;
	margin-top: 35px;
	letter-spacing: -1px;
}
.area-3 div.content-area div.round-1 {
	position: absolute;
	left: 0;
	bottom: 100px;
}
.area-3 div.content-area div.round-2 {
	position: absolute;
	left: 50%;
	/*transform: translateX(-50%);*/
	margin-left: -460px;
	bottom: 0;
}
.area-3 div.content-area div.round-3 {
	position: absolute;
	top: 175px;
	right: 0;
}

@media only screen and (max-width: 1600px) {
	.area-3 div.content-area div.round-3 {
		top: 280px;
	}
	.area-3 div.content-area div.round-3 img {
		width: 300px;
	}
}

.area-3 div.content-area p.tt-1 {
	position: absolute;
	top: 725px;
	left: 28%;
	transform: translateX(-50%);
	font-family: 'eastarjet-b';
	font-size: 32px;
	text-shadow: 0 0 2px rgba(0,0,0,0.5);
	text-align: left;
}
.area-3 div.content-area p.tt-2 {
	position: absolute;
	left: 69%;
	bottom: 135px;
	transform: translateX(-50%);
	font-family: 'eastarjet-b';
	font-size: 32px;
	text-shadow: 0 0 2px rgba(0,0,0,0.5);
	text-align: left;
}

/* area-4 */
.area-4 {
	height: 1417px;
}
.area-4 div.movie-wrap {
	position: absolute;
	top: 51%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* area-5 */
.area-5 {
	height: 2027px;
	background: #fefefe;
}
.area-5 img.center-img {
	display: block; 
	position: absolute; 
	top: -480px; left: 50%; 
	transform: translateX(-50%) !important; 
	max-width: none;
	z-index: 0;
}
.area-5 div.content-area {
	position: absolute;
	top: 1060px;
	width: 100%;
	color: #fff;
	text-align: center;
}
.area-5 div.content-area div.text-0,
.area-5 div.content-area div.text-1,
.area-5 div.content-area div.text-2,
.area-5 div.content-area div.text-3 {
	height: 270px;
	z-index: 14;
}
.area-5 div.content-area p.txt-1 {
	font-family: 'yg-jalnan';
	font-size: 40px;
	color: #262e39;
	line-height: 60px;
}
.area-5 div.content-area p.txt-2 {
	display: inline-block;
	font-family: 'eastarjet-m';
	font-size: 26px;
	padding: 20px 15px 0 15px;
	color: #000;
	line-height: 40px;
}
.area-5 div.content-area div.tree-0,
.area-5 div.content-area div.tree-1,
.area-5 div.content-area div.tree-2,
.area-5 div.content-area div.tree-3 {
	position: absolute;
	z-index: 14;
	width: 80%;
	bottom: 94px;
	left: 50%;
	transform: translateX(-50%);
}
.area-5 div.content-area div.img-ground {
	position: absolute;
	z-index: 13;
	bottom: 0px;
}
.area-5 .swiper-horizontal>.swiper-pagination-bullets, 
.area-5 .swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: 35px;
}
.area-5 div.redtree-swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.area-5 div.redtree-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 15px;
}
.area-5 div.redtree-swiper .swiper-pagination {
	z-index: 18;
}
.area-5 div.redtree-swiper .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: #fff;
}
.area-5 .swiper-fade .swiper-slide {
	height: 697px;
}
.area-5 .swiper-button-next, 
.area-5 .swiper-button-prev {
	top: 95.4%;
	color: #fff;
	z-index: 25;
	transform: scale(0.7);
}
.area-5 .swiper-button-next {
	right: 43%;
}
.area-5 .swiper-button-prev {
	left: 43%;
}

/*20240610*/
.area-5 div.logo-txt {
	position: absolute;
	z-index: 14;
	width: 80%;
	top: 23%; 
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 28px;
	color: #262e39;
	line-height: 40px;
	font-family: 'eastarjet-b';
	text-align: center;
}
.area-5 div.logo-txt p {
	padding-bottom: 20px;
}
.area-5 div.logo-txt span {
	color: #da291c;
}
.area-5 div.logo-txt span.red {
	font-family: 'yg-jalnan';
	font-size: 60px;
}
/*//20240610*/

/* area-6 */
.area-6 div.content-area {
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	padding-top: 120px;
}
.area-6 div.content-area p.txt-0 {
	display: block;
	font-family: 'yg-jalnan';
	font-size: 32px;
	color: #262e39;
	margin-top: 35px;
} 
.area-6 div.content-area p.txt-1 {
	display: inline-block;
	font-family: 'yg-jalnan';
	font-size: 64px;
	color: #da291c;
	margin-top: 80px;
} 
.area-6 div.content-area p.txt-1 img {
	position: absolute;
	margin: -74px 0 0 -131px;
}
.area-6 div.content-area p.txt-1 span {
	color: #262e39;
}
.area-6 div.content-area p.txt-2 {
	font-family: 'yg-jalnan';
	font-size: 92px;
	color: #4c4c4c;
	padding: 15px 0;
}
.area-6 div.content-area p.txt-2 img {
	vertical-align: middle;
	margin-left: 30px;
}
.area-6 div.content-area p.txt-2 span {
	font-family: 'Bebas Neue';
	color: #da291c;
	font-size: 140px;
	vertical-align: middle;
	margin: 0 10px;
}
.area-6 div.content-area p.txt-3 {
	font-size: 28px;
	color: #262e39;
	line-height: 45px;
	font-family: 'eastarjet-m';
}
.area-6 div.content-area p.txt-3 span {
	font-family: 'eastarjet-b';
}
.area-6 div.content-area p.txt-4 {
	display: inline-block;
	font-family: 'yg-jalnan';
	font-size: 48px;
	color: #fff;
	background: #da291c;
	padding: 25px 20px 15px 20px;
	margin: 50px 0 60px 0;
}
.area-6 div.content-area p.txt-5 {
	font-family: 'yg-jalnan';
	font-size: 32px;
	color: #2d8d46;
}
.area-6 div.text-number-ani {
	margin-top: 20px;
	text-align: center;
	height: 190px;
}
.area-6 div.text-number-ani a {
	font-family: 'yg-jalnan';
	font-size: 42px;
	color: #fff;
	padding: 30px 60px 22px 60px;
	border-radius: 22px;
	letter-spacing: 0px;
	text-align: center;
	margin: 35px 10px 0 10px;
	text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.area-6 div.content-area {
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	padding-top: 120px;
}
.area-6 div.content-area p.txt-6 {
	font-family: 'yg-jalnan';
	font-size: 32px;
	color: #ef0a0a;
	padding: 20px 0 5px 0;
}
.area-6 div.content-area p.txt-6 span {
	color: #262e39;
}
.area-6 div.content-area p.txt-7 {
	display: inline-block;
	font-family: 'yg-jalnan';
	font-size: 72px;
	color: #262e39;
	padding: 110px 0 15px 0;
} 
.area-6 div.content-area p.txt-8 {
	color: #262e39;
	font-size: 28px;
	font-family: 'eastarjet-m';
	line-height: 40px;
}
.area-6 div.content-area a.confirm-namkan {
	position: absolute;
	width: 280px;
	height: 220px;
	margin: 295px 0 0px 330px;
	line-height: 55px;
	padding-top: 60px;
}
.area-6 div.content-area p.txt-9 {
	color: #262e39;
	font-size: 20px;
	font-family: 'SavetheChildren';
	line-height: 30px;
	text-align: center;
}

/* area-9 */
.area-9 div.content-area {
	position: absolute;
	width: 1200px;
	top: 100px;
	left: 50%;
	transform: translate(-50%);
}
.area-9 div.content-area div.tabs {
	height: 80px;
	text-align: center;
}
.area-9 div.content-area div.tabs a {
	display: inline-block;
	width: 600px;
	height: 80px;
	margin: 0;
	text-indent: -9999px;
}
.area-9 div.content-area div.tabs a.tab-1 {
	background: url('/climate/images/main/tab1_off.png') 0 0 no-repeat;

}
.area-9 div.content-area div.tabs a.tab-1.on {
	background: url('/climate/images/main/tab1_on.png') 0 0 no-repeat;
}
.area-9 div.content-area div.tabs a.tab-2 {
	background: url('/climate/images/main/tab2_off.png') 0 0 no-repeat;
}
.area-9 div.content-area div.tabs a.tab-2.on {
	background: url('/climate/images/main/tab2_on.png') 0 0 no-repeat;
}

.area-9 div.content-area div.tab-inner {
	position: relative;
	width: 1200px;
	background: #fff;
	border-radius: 0 0 34px 34px;
	text-align: center;
	box-shadow: 0px -15px 26px rgba(0,0,0,0.2);
}
.area-9 div.content-area div.tab-inner div.activist-film {
	position: absolute;
	width: 1432px; 
	height: 526px;
	top: 50%;
	left: 50%;
	transform: translate(-49%, -30%);
}
.area-9 div.content-area div.tab-inner div.activist-film img {
	width: 100%;
}
.area-9 div.content-area div.tab-inner p.txt-1 {
	font-family: 'eastarjet-b';
	font-size: 44px;
	padding: 65px 0 10px 0;
}
.area-9 div.content-area div.tab-inner p.txt-1 span {
	font-family: 'yg-jalnan';
	font-size: 66px;
	color: #da291c;
	margin-left: 5px;
}
.area-9 div.content-area div.tab-inner p.txt-2 {
	display: inline-block;
	font-family: 'eastarjet-b';
	color: #fff;
	font-size: 30px;
	background: #da291c;
	padding: 5px 30px;
}
.area-9 div.content-area div.tab-inner p.txt-2 span {
	font-family: 'eastarjet-l';
}
.area-9 div.content-area div.tab-inner p.txt-3 {
	margin: 45px 0 0 0;	
}
.area-9 div.content-area div.tab-inner div.txt-3 {
	padding: 45px 0 25px 45px;
}
.area-9 div.content-area div.tab-inner div.what-news {
	font-family: 'eastarjet-m';
	font-size: 28px;
	color: #262e39;
	line-height: 42px;
	width: 1134px;
	height: 298px;
	background: url('/climate/images/main/activist_img_2.png') 0 0 no-repeat;
	padding-top: 30px;
	margin: 200px 0 0 55px;
}
.area-9 div.content-area div.tab-inner div.what-news span { 
	font-family: 'eastarjet-b';
}
.area-9 div.content-area div.tab-inner div.what-news p {
	padding-bottom: 25px;
}
.area-9 div.content-area div.tab-inner p.txt-4 {
	font-family: 'yg-jalnan';
	font-size: 40px;
	color: #000;
}
.area-9 div.content-area div.tab-inner p.txt-5 {
	font-family: 'eastarjet-m';
	font-size: 28px;
	color: #000;
	line-height: 45px;
	letter-spacing: -2px;
	margin-top: 25px;
}
.area-9 div.content-area div.tab-inner div.active-txt {
	width: 1162px;
	height: 234px;
	background: url('/climate/images/main/bg_activist.png') 0 0 no-repeat;
	font-family: 'eastarjet-m';
	font-size: 30px;
	color: #7e8a63;
	margin: 20px auto 0 auto;
	padding-top: 470px;
	line-height: 45px;
}
.area-9 div.content-area div.tab-inner div.active-guide {
	width: 1088px;
	height: 148px;
	background: url('/climate/images/main/txt-activist3.png') 0 0 no-repeat;
	font-family: 'eastarjet-m';
	font-size: 30px;
	margin: 50px auto 70px auto;
}
.area-9 div.content-area div.tab-inner div.active-guide p {
	opacity: 0;
	width: 0; height: 0;
	text-indent: -9999px;
}
.area-9 div.content-area div.tab-inner div.active-txt p.t {
	padding-bottom: 20px;
}
.area-9 div.content-area div.tab-inner div.active-txt span {
	font-family: 'eastarjet-b';
}
.area-9 div.content-area div.tab-inner a.active-btn {
	display: inline-block;
	font-family: 'yg-jalnan';
	font-size: 42px;
	color: #fff;
	padding: 30px 100px 24px 100px;
	margin: 0px 0 60px 0px;
	border-radius: 20px;
	letter-spacing: 2px;
}

/* area-10 */
.area-10 div.content-area {
	width: 1920px;
	position: relative; 
	top: 0; left: 50%; 
	transform: translateX(-50%); 
	max-width: none;
}
.area-10 div.content-area div.f {
	float: left;
	width: 858px;
}
.area-10 div.content-area div.f div.inner {
	position: relative;
	width: 811px;
	height: 1000px;
	overflow: hidden;
}
.area-10 div.content-area div.f div.inner img {
	position: absolute;
	left: 0;
	top: 0;
}
.area-10 div.content-area div.s {
	float: left;
	width: 1052px;
	padding: 80px 0 0 10px;
}
.area-10 div.content-area div.s p.txt-1 {
	font-size: 54px;
	font-family: 'yg-jalnan';
	color: #da291c;
	line-height: 70px;
}
.area-10 div.content-area div.s p.txt-2 {
	font-size: 27px;
	font-family: 'eastarjet-m';
	color: #000;
	letter-spacing: -2px;
	margin-top: 30px;
}
.area-10 div.story-slide {
	position: relative;
	width: 1052px;
	height: 550px;
	overflow: hidden;
	padding-top: 85px;
}


.area-10 .swiper-button-next, .area-10 .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: 242px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e2e2e;
}
.area-10 .swiper-button-next:after, .area-10 .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 55px;
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}
.area-10 .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
	position: absolute;
    left: var(--swiper-scrollbar-sides-offset,1%);
    bottom: 50px;
    /* top:var(--swiper-scrollbar-top,auto); */
    z-index: 50;
    height: var(--swiper-scrollbar-size,7px);
    width: calc(55% - 2 * var(--swiper-scrollbar-sides-offset,1%))
}
.area-10 .swiper-button-prev {
	left: 630px;
}
.area-10 .swiper-button-next {
	right: 270px;
}
.area-10 .swiper-scrollbar-drag {
	background: #da291c;
	border-radius: 0;
}
.area-10 .swiper-scrollbar {
	border-radius: 0;
}


/* slider contents */
.area-10-swiper {
	
	height: 407px;
}