/* layout */
body.top header{background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.top header h1 a{background-image:url(/global/sustainability/img/logo.svg);transition:1s}
body.top header #gnb li a{color:#fff;transition:1s}
body.top header #gnb li a.outlink:after{background-image:url(/global/sustainability/img/ico_outlink.svg);transition:1s}

section{position:relative;width:100%;box-sizing:border-box;background:#fff}
.pin-spacer{overflow:initial !important}
picture img{height:100%;object-fit: cover;object-position:center center}

/* video1 */
#video1{
	width:100%;height:100vh;
	overflow:hidden;
	background:#000;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
#video1:before{
	content:'';
	position:absolute;top:0;left:0;
	display:block;width:100%;height:100%;
	background: #000000;
	opacity: 0.3;
	z-index:1
}
#video1 dl{
	position:absolute;top:50%;left:0;
	width:100%;
	text-align:center;
	transform:translateY(-50%);
	z-index:2
}
#video1 dl dt{font-size:86px;color:#fff;font-weight:600;line-height:130%}
#video1 dl dd{font-size:30px;color:#fff;font-weight:300;line-height:150%}
#video1:after{
	content:'';
	position:fixed;left:0;bottom:50px;
	display:block;width:100%;height:14px;
	background:url(/global/sustainability/img/arrow_guide.svg) no-repeat center;
	background-size:auto 100%;
	font-size:0;
	z-index:2
}
.video{
	    position: absolute;
		top: -999px;
		right: -999px;
		left: -999px;
		bottom: -999px;
		display: block;
		margin: auto;
		min-width: 100%;
		min-height: 100%;
}
.video.mobile{display:None}

/* copy1 */
#copy1{width:100%;height:auto;box-sizing:border-box;padding:200px 0 calc(200px - 12.5vh);}
.copy{
	position:Relative;
	overflow:hidden;height:auto;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
.copy p{max-width:1066px;margin:0 auto;font-size:64px;line-height:130%;}
.copy p span{display:inline-block;}
.copy .bg{
	content:'';
	position: absolute;top:0;left:0;
	display:block;width:100%;height:calc(100% + 300px);
	margin-top:-300px;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,0.8) 100%);
}

/* better */
#better{
	width:auto;height:auto;
	margin:0 78px;
	background:#000
}
#better .stage{
	position:sticky;top:-1px;
	width:100%;height:calc(100vh + 1px);
	box-sizing:border-box;
	border-top:12.5vh solid #fff;border-bottom:12.5vh solid #fff;
	z-index:2;
}
#better .stage:before,
#better .stage:after,
#better .stage>div:before,
#better .stage>div:after{
	content:'';
	position:absolute;bottom:-1px;left:0;
	display:block;width:18px;height:18px;
	background:url(/global/sustainability/img/main/radius.svg) no-repeat;
}
#better .stage:after{left:auto;right:0;transform:rotate(-90deg)}
#better .stage>div:before{bottom:auto;top:-1px;transform:rotate(90deg)}
#better .stage>div:after{bottom:auto;top:-1px;left:auto;right:0;transform:rotate(180deg)}
#better .txt{
	position:Relative;
	overflow:hidden;height:auto;
	margin-top:-100vh;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
#better .txt p:first-child,
#better .txt p:last-child{height:100vh;}
#better .txt p{
	position:relative;left:0;width:100%;
	height:calc(100vh - 25vh);
	margin-top:-1px;
	overflow:hidden;
	z-index:1;
	background:#000;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
#better .txt p picture{
	position:fixed;top:0;left:0;
	display:block;width:100%;height:100vh;
	border-radius:0;
	background:#000
}
/*#better .txt p span{}*/
#better .txt p .ani{
	position:relative;top:50%;display:block;transform:translateY(-50%);
	text-align:center;font-size:46px;color:#fff;font-weight:500;line-height:140%;font-weight:600;
}

/* copy3 */
#copy3{
	width:100%;height:auto;
	overflow:hidden;
	padding:328px 0;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
#copy3 picture{
	position:fixed;top:0;left:0;
	display:block;width:100%;height:100vh;
	border-radius:0
}
#copy3 .txt p{
	position:Relative;
	text-align:center;font-size:40px;color:#fff;line-height:140%;z-index:1
}

/* for */
#for{	
	padding:0 78px 240px;
}
#for h2{
	max-width:1175px;
	margin:0 auto;padding:240px 0;
	font-size:64px;line-height:130%;
}
#for .forWrap{
	position:Relative;
	height:auto;
}
#for .forWrap picture{
	position:sticky;top:78px;right:0;
	float:right;
	display:block;width:50%;height:calc(100vh - 156px);
	background:url(/global/sustainability/img/main/image-of-sun-sets-right-at-the-top-of-the-valley.jpg) no-repeat center;background-size:cover;
	border-radius:24px;
}
#for .forWrap picture img{position:absolute;top:0;left:0;object-fit: cover;object-position: 50% 50%; width: 100%;height: 100%;transition:.5s}
#for .forWrap picture .people{opacity:0}
#for .forWrap.second  picture .planet{opacity:0}
#for .forWrap.second  picture .people{opacity:1}
#for .forWrap:after{
	content:'';
	display:block;
	clear:both
}
#for .forWrap>div{
	float:left;width:50%
}
#for .forWrap>div div{
	position:relative;
	height:100vh;
	box-sizing:border-box;
}
#for .forWrap>div div:nth-child(2){height:150vh}
#for .forWrap>div div:nth-child(2) dl{bottom:50vh}
#for dl{
	position:absolute;bottom:0;left:50%;
	width:100%;max-width:412px;
	margin:0 auto;
	box-sizing:border-box;
	vertical-align:bottom;
	transform:translateX(-50%);
	z-index:1
}
#for dl dt{
	margin-bottom:24px;
	font-size:64px;font-weight:600;line-height:130%;
}
#for dl dd{
	font-size:24px;line-height:150%;
}
#for dl dd a{
	position:relative;
	display:inline-block;
	height:44px;line-height:44px;
	margin-top:35px;padding:0 21px;
	background: #303030;
	border-radius: 99px;
	font-size:18px;color:#fff;
	transition:.2s;z-index:10
}
#for dl dd a:focus{outline-color:#007bff}
#for dl dd a:after{
	content:'';
	display:inline-block;width:12px;height:100%;
	box-sizing:border-box;
	margin-left:8px;
	background:url(/global/sustainability/img/ico_link.svg) no-repeat center;
	vertical-align:top;
	transition:.2s
}
#for dl dd a:hover{opacity:.87}

/* cardData */
#cardData{
	width:100%;height:auto;
	padding:0 0 166px;
	background:#000;
	/*overflow:hidden;*/
}
#cardData:before{
	content:'';
	position:absolute;top:-100vh;left:0;
	display:block;width:100%;height:100vh;
	background:#000
}
#cardData h2{
	padding:120px 0 80px;
	text-align:center;font-size:64px;color:#fff;font-weight:600;line-height:130%
}
#cardData .card_slider_wrap{
	position:relative;
	width:100%;
	padding:0 78px;
	box-sizing:border-box;
	overflow:hidden;
}
#cardData ul{
	position:relative;
}
#cardData .slick-list{overflow:visible}
#cardData .swiper-slide{
	position:relative;
	display:inline-block;width:412px;height:540px;
	margin-right:24px;
	background:#333;background-repeat:no-repeat;background-size:cover;background-position:center;
	border-radius: 24px;
}
#cardData .swiper-slide:last-child{margin-right:0}
#cardData ul li p{
	position:absolute;bottom:0;left:0;
	width:100%;box-sizing:border-box;
	padding:32px;
	font-size:24px;color:#fff;line-height:150%
}
#cardData ul li p b{font-weight:700}
#cardData ul li span{
	position:absolute;top:50px;left:32px;
	display:inline-block;
	padding-top:17px;
	font-size:24px;color:rgba(255, 255, 255, 0.6);line-height: 130%;
}
#cardData ul li span b{padding-right:10px;font-size:86px;font-weight:700;color:#fff}
#cardData ul li:before{
	content:'';
	position:absolute;top:32px;left:32px;
	display:block;width:120px;height:120px;
	background-repeat:no-repeat;background-position:0 0
}
#cardData ul li.card1:before{background-image:url(/global/sustainability/img/main/cardData_icon1.svg)}
#cardData ul li.card3{background: #DA0F47;}
#cardData ul li.card5{background: #fff}
#cardData ul li.card5 p{color:#000}
#cardData ul li.card5:before{background-image:url(/global/sustainability/img/main/cardData_icon5.svg)}
#cardData ul li.card6{background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 32.5%), #333333;}
#cardData div.swiper-button{top:270px}
#cardData .cardInfo{
	margin-top:20px;
	font-size:16px;color:#fff;
	opacity:0;transition:.3s;
}
#cardData .active .cardInfo{opacity:0.6;transition-delay:.1s}
.card_slider_wrap{transition:.5s;opacity:0}
.card_slider_wrap.active{opacity:1}

/* news */
#news{
	padding-bottom:140px;margin-top:-1px;
	overflow:Hidden;
	background:#000;
}
#news h2{color:#fff}
#news .outlink,
#news .swiper-slide dt,
#news .swiper-slide dd{color:#fff}
#news .swiper-slide dt{display:block;}
#news .outlink:after{border:1px solid #fff;background-image:url(/global/sustainability/img/ico_outlink.svg)}
#news a:hover .outlink:after{background-color:#fff;background-image:url(/global/sustainability/img/ico_outlink_on.svg)}
#news .more{position:relative;z-index:1}
#news .more .outlink{background:#fff;color:rgba(0, 0, 0, 0.87);}
#news .more .outlink:after{background-image:url(/global/sustainability/img/ico_outlink_on.svg)}
#news .more .outlink:focus{outline-color:#000}

/* copy4 */
#copy4{
	width:100%;
	box-sizing:border-box;
	text-align:center;
	background:#000
}
#copy4 .copy4Ani{
	position:relative;
	padding:240px 0 calc(50vh - 233px);
	background:#fff
}
#copy4 .copy4Ani:before{
	content:'';
	position:absolute;top:-100vh;left:0;
	display:block;width:100%;height:100vh;
	background:#fff
}
#copy4 .copy p{max-width:800px;font-size:34px}
#copy4 .copy p b{
	display:block;
	font-size:64px;font-weight:600;line-height:130%
}
#copy4 .copy+.copy{margin-top:200px;}

@media (max-width: 1440px) {
	#video1 dl dt{font-size:66px}
	#video1 dl dd{font-size:26px}
	#video1:after{bottom:40px}
	#copy1{padding:160px 0 calc(160px - 12.5vh)}
	.copy p{max-width:750px;font-size:48px}
	#better{margin:0 30px}
	#better .txt p .ani{font-size:38px;}
	#copy3{padding:240px 0;margin-top:240px}
	#copy3 .txt p{font-size:34px;}
	#for{padding:0 30px 200px}
	#for h2{padding:200px 0 200px 99px;max-width:100%;font-size:48px}
	#for dl{max-width:336px;left:99px;transform:translateX(0)}
	#for dl dt{font-size:48px}
	#for dl dd{font-size:18px}
	#for .forWrap:before{top:30px;height:calc(100vh - 60px);}
	#cardData{padding-bottom:80px;}
	#cardData h2{padding:120px 0 60px;font-size:48px;}
	#cardData .card_slider_wrap{padding:0 30px}
	#cardData .swiper-slide{width:272px;height:356px;}
	#cardData ul li:before{top:24px;left:24px;width:92px;height:92px;background-size:100% auto}
	#cardData ul li span{top:38px;left:24px;padding-top:15px}
	#cardData ul li span{font-size:18px}
	#cardData ul li span b{font-size:66px;}
	#cardData ul li p{padding:24px;font-size:18px}
	#cardData .cardInfo{margin-top:16px;font-size:14px}
	#cardData div.swiper-button{top:178px}
	#copy4 .copy4Ani{padding:200px 0 calc(50vh - 142px);}
	#copy4 .copy p{font-size:34px}
	#copy4 .copy p b{/*margin-top:120px;*/font-size:48px}
	#copy4 .copy+.copy{margin-top:120px;}
}

@media (max-width: 1024px) {
	body.top header .menu:before, 
	body.top header .menu:after{background:#fff}

	.video.web{display:None}
	.video.mobile{display:block}
	#video1{height: calc(var(--vh, 1vh) * 100);transition:.5s}
	#video1 dl{box-sizing:border-box;padding:0 57px;}
	#video1 dl dt{font-size:60px;}
	#video1 dl dd{font-size:24px}
	#video1:after{height:11px;bottom:46px;}
	.copy p{padding:0 122px;font-size:44px}
	#better .txt p .ani{font-size:36px;}
	#copy3{padding:276px 100px 357px;margin-top:160px;background-image:url(/global/sustainability/img/main/m/Silhouette-of-man-against-starry-night-sky.jpg)}
	#copy3 .txt p{font-size:32px}
	#for{padding:0 122px 160px;}
	#for h2{padding:160px 0;font-size:44px;}
	#for .forWrap{}
	#for .forWrap picture{display:None !important}
	#for .forWrap>div{float:none;width:100%}
	#for .forWrap>div div,
	#for .forWrap>div div:nth-child(2){height:auto}
	#for .forWrap>div div:nth-child(2){margin-top:120px}
	#for .forWrap>div div:before{
		content:'';
		display:block;width:100%;height:393px;
		background: url(/global/sustainability/img/main/m/image-of-sun-sets-right-at-the-top-of-the-valley.jpg) no-repeat center;background-size: cover;
		border-radius: 24px;
	}
	#for .forWrap>div div:nth-child(2):before{background-image: url(/global/sustainability/img/main/m/African-American-mother-and-daughter-standing-in-park.-Little-girl-on-mother-shoulders.jpg)}
	#for dl{position:relative;left:0;transform:translateX(0);max-width:100%;margin:40px 0 0}
	#for dl dt{margin-bottom:12px;font-size:44px;}
	#for dl dd{font-size:18px;}
	#for .forWrap>div div:nth-child(2) dl{bottom:0}
	#cardData{padding:0 0 40px}
	#cardData h2{padding:100px 0 60px;font-size:44px;}
	#cardData .swiper-slide{width:251px;height:328px;}
	#cardData ul li:before{width:80px;height:80px;}
	#cardData ul li span{padding-top:10px;font-size:16px;}
	#cardData ul li span b{font-size:60px;}
	#cardData .cardInfo{margin-top:12px;font-size:14px}
	#copy4 .copy4Ani{padding:160px 0 calc(50vh - 151px)}
	#copy4 .txt p{box-sizing:border-box;padding:0 99px;font-size:32px;}
	#copy4 .copy p b{font-size:44px}
	#copy4 .copy+.copy{margin-top:160px;}
}

@media (max-width: 768px) {
	body.top header h1 a{background-image:url(/global/sustainability/img/logo.svg);transition:0s}
	#video1 dl dt{font-size:50px;line-height:110%;margin-bottom:8px;}
	#video1 dl dd{font-size:22px}
	#video1:after{}
	#copy1{padding:100px 24px calc(100px - 12.5vh);}
	.copy .bg{transform:translateY(0);background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 12%, rgba(255,255,255,0.8) 100%);}
	.copy p{max-width:516px;padding:0;font-size:33px;line-height:140%}
	.copy p span{display:inline}
	#better{margin:0 24px}
	#better .txt p{padding:0 30px;font-size:26px}
	#better .txt p .ani{font-size:28px;line-height:140%}
	#copy3{padding:246px 24px;margin-top:100px}
	#copy3 .txt p{font-size:26px;}
	#for{padding:0 24px 100px;}
	#for h2{padding:100px 0;font-size:33px;}
	#for h2 br{display:None}
	#for dl{margin-top:30px;}
	#for dl dt{font-size:33px;}
	#for .forWrap>div div:before{height:65.6vw;max-height:394px}
	#for .forWrap>div div:nth-child(2){margin-top:80px}
	#cardData{padding:0}
	#cardData h2{box-sizing:border-box;padding:100px 25px 60px;font-size:33px;}
	#cardData h2 br{display:none}
	#cardData .card_slider_wrap{padding:0 24px;}
	#cardData .swiper-slide{width:239px;height:313px;}
	#cardData ul li:before{width:72px;height:72px}
	#cardData ul li span{padding-top:5px}
	#cardData ul li span b{font-size:50px;padding-right:5px}
	#cardData .cardInfo{margin-top:12px;font-size:13px}
	#copy4 .copy4Ani{padding:100px 24px 200px;}
	#copy4 .txt p{padding:0 24px;font-size:26px;}
	#copy4 .copy p b{font-size:33px}
	#copy4 .copy+.copy{margin-top:140px;}
}

@media (max-width: 600px) {
	#better .txt p br{display:none}
}

@media (max-width: 375px) {
	#better .txt p span{padding-bottom:-70px}
}


/* ie only */
body.ie .copy p span i{display:none}
body.ie #better .txt p{background-attachment:scroll}
body.ie #cardData ul li{opacity:1}
body.ie #news .news_slider_wrap,
body.ie #cardData .slider_wrap{width:100%;overflow:auto}
body.ie #news .swiper-button{display:none}
body.ie #news .swiper-slide{margin-right:20px}