@charset "utf-8";

.main__title{
	float: left;
	width: 20.83%;
	padding-bottom: 10px;
	border-bottom: 2px solid rgb(0,0,0);
	font-size: 20px;
	font-weight: normal;
	box-sizing: border-box;
}
.main__title.wt-color {
	border-color: rgb(255,255,255);
}
.main__slider .slick-slide a{
	display: block;
	height: 1000px;
	font-size: 0;
}
.main__slider .slick-arrow{
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 5;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	background-position: center center;
	background-repeat: no-repeat;
}
.main__slider .slick-prev{
	margin-left: 480px;
	background-image: url(/sjduko2020/resource/images/common/arr_long_wt_left.png);
}
.main__slider .slick-next{
	margin-left: 550px;
	background-image: url(/sjduko2020/resource/images/common/arr_long_wt.png);
}
.main__slide-wrap {
	position: relative;
}
.main__slide-wrap .progress{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 85px;
	width: 1200px;
	margin: 0 auto;
}
.main__slide-wrap .progress:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgb(255,255,255);
	opacity: .5;
}
.main__slide-wrap .line{
	position: absolute;
	bottom: 0;
	left: 0;	
	width: 0;
	height: 1px;
	margin: 0 auto;
	background: rgb(255,255,255);
}
.line-ani{
	animation: proBar 3.3s 1;
	animation-fill-mode: forwards;
}
/* .main__slide-wrap:hover .line-ani{
	animation-play-state: paused;
} */
.main__slide-wrap .brand{
	position: absolute;
	top: 35px;
	left: 0;
	font-size: 16px;
	color: rgb(255,255,255);
}
.main__con{
	padding: 100px 0 80px;
}
.main__con img{width: 100%;}
.main--top{
	overflow: hidden;
}
.main__con .tab-box{
	float: right;
	width: 70.83%;
	margin-top: -15px;
	overflow: hidden;
}
.main__con .tab{
	float: left;
	width: 42.35%;
	margin-top: 8px;
	font-size: 16px;
	font-family: 'WorkSans-Light';
	box-sizing: border-box;
}
.main__con .tab + .tab{
	margin-left: 14.12%;	
}
.main__con .tab li{
	margin-top: 7px;
}
.main__con .tab li a{
	display: block;
	padding-left: 10px;
	transition:all .3s ease;
	color: rgb(255,255,255);
}
.main__con .tab li a:hover,
.main__con .tab li a.on{
	background: rgb(255,255,255);
	color: rgb(0,0,0);
}
.main__con .select__tab{display: none;}
.campaign__list{
	position: relative;
	max-width: 1740px;
	margin: 0 auto;
}
.campaign__list:after{
	content: '';
	display: block;
	clear: both;
}
.campaign__list li{
	float: left;
	width: 22.99%;
}
.campaign__list li:nth-child(1){
	margin: 4.02% 0 0 5.75%;
}
.campaign__list li:nth-child(2){
	float: right;
	margin: 0 3.45% 0 0;
}
.campaign__list .brand__video{
	width: 36.78%;
	margin: 5.75% 5.17% 0 2.87%;
}
.campaign__list .brand__video .in-video{
	padding-bottom: 75%;
}
.main__con .story__list {
	margin: 60px 0 100px;
}
.main__con .story__list li{
	width: 23.25%;
	margin-right: 2.3%;
}
.main__con .story__list li:nth-child(4n){
	margin-right: 0;
}
.main__con .story__list .txt p{
	height: 88px;
}
.main__banner{
	overflow: hidden;
}
.main__banner a{
	position: relative;
	float: left;
	display: block;
	width: 50%;
	height: 200px;
}
.main__banner .txt{
	position: absolute;
	top: 0;
	width: 540px;
	height: 100%;
	line-height: 34px;
	font-size: 28px;
	color: rgb(255,255,255);
	box-sizing: border-box;
}
.main__banner .txt p{
	position: absolute;
	top: 50%;
	left: 0;
	transform:translateY(-50%);
}
.main__banner .more{
	position: absolute;
	right: 0;
	bottom: 30px;
	font-size: 16px;
	box-sizing: border-box;
}
.main__banner .more:after{
	content: '';
	display: inline-block;
	width: 40px;
	height: 17px;
	margin-left: 30px;
	vertical-align: middle;
	transition:all .5s ease;
	background: url(/sjduko2020/resource/images/common/arr_long_wt.png) 0 0 / 100% no-repeat;	
}
.main__banner .more:hover:after{
	transform:translateX(20%);
}
/*데스크탑*/
@media only all and (min-width:1200px){
	.main__banner .left .txt{
		right: 60px;
	}
	.main__banner .right .txt{
		left: 60px;
	}
}
/*태블릿 & 모바일*/
@media only all and (max-width:1199px){
	.main__banner .txt{
		width: 100%;
		padding: 0 20px;
	}
	.main__banner .txt p{
		left: 20px;
	}
	.main__banner .more{
		right: 20px;
	}
}

/*태블릿*/
@media (min-width:767px) and (max-width:1199px){
	.main__slide-wrap .progress{
		width: calc(100% - 40px);
		margin: 0 20px;
		box-sizing: border-box;
	}
	.main__slider .slick-arrow{
		left: auto;
	}
	.main__slider .slick-prev{
		margin: 0;
		right: 80px;
	}
	.main__slider .slick-next{
		right: 20px;
	}
	.main__con .tab-box{
		width: 75.83%;
	}
	.main__con .tab + .tab{
		margin-left: 7.12%;
	}
}

/*모바일*/
@media only all and (max-width:767px){
	.main__con{
		padding: 30px 0;
	}
	.main__title{
		float: none;
		width: 100%;
		font-size: 1.6rem;
	}
	.main__slider img{width: 100%;}
	.main__slider .slick-slide a{
		height: auto;
		background: none !important;
	}
	.main__slider .slick-arrow{
		left: auto;
		bottom: 0;
		width: 30px;
		height: 40px;
		background-size: 30px;
	}
	.main__slider .slick-prev{
		left: 20px;
		margin-left: 0;
	}
	.main__slider .slick-next{
		right: 20px;
		margin-left: 0;
	}
	.main__slide-wrap .progress{
		width: calc(100% - 40px);
		bottom: 40px;
		margin: 0 auto;
	}
	.main__slide-wrap .brand{display: none;}

	.main__con .tab{display: none;}
	.main__con .select__tab{
		display: block;
		width: 100%;
		margin-top: 15px;
		padding: 0 15px;
		height: 40px;
		line-height: 40px;
		font-size: 1.4rem;
		font-family: 'WorkSans-Light';
		background: url(/sjduko2020/resource/images/common/arr_long_wt_bt.png) calc(100% - 15px) center / 16px no-repeat;
		color: rgb(255,255,255);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.campaign__list {
		/* height: 92.96vh; */
	}
	.campaign__list li{
		position: relative;
	}
	.campaign__list li:nth-child(1){
		width: 44.44%;
		left: 9.72%;
		z-index: 2;
		margin: 13% 0 0 0;
	}
	.campaign__list li:nth-child(2){
		width: 56.94%;
		right: 0;
		z-index: 1;
		margin: -72% 0 0 0;
	}
	.campaign__list .brand__video{
		bottom: 30px;
		z-index: 3;
		width: calc(100% - 40px);
		margin: 0 20px;
	}
	.campaign__list .brand__video.hide .in-video{
		padding-bottom: 56.25%;
	}
	.list--scorll{
		overflow-x: auto;
		white-space:nowrap;
	}
	.main__con .story__list{
		overflow: inherit;
		margin: 30px 0;
	}
	.main__con .story__list li{
		float: none;
		display: inline-block;
		width: 100%;
		margin-right: 0;
		vertical-align: top;
	}
	.main__con .story__list li + li{
		margin-top: 0;
		margin-left: 6.25%;
	}
	.main__con .story__list .txt{
		padding: 15px;
		white-space:initial;
	}
	.main__con .story__list .txt h3{
		height: auto;
		line-height: 19px;
		font-size: 1.4rem;
		-webkit-line-clamp:1;
	}
	.main__con .story__list .txt p{
		height: 51px;
		line-height: 17px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-size: 1.2rem;
	}
	.main__con .story__list .category{
		font-size: 1.1rem;
	}
	.main__banner a{
		float: none;
		width: 100%;
		height: auto;
		background: none !important;
	}
	.main__banner img{width: 100%;}
	.main__banner .txt{
		line-height: 19px;
		font-size: 1.4rem;
	}
	.main__banner .more{
		bottom: 10px;
		font-size: 1.1rem;
	}
	.main__banner .more:after{
		width: 30px;
		margin-left: 10px;
	}
}

@-webkit-keyframes proBar{
	0%{width:0;}
	100%{width:100%;}
}
@keyframes proBar{
	0%{width:0;}
	100%{width:100%;}
}