/* CSS Document */
#hd_gnb_bak{position: absolute;top: calc( 100% + 1px );left: 0;width: 100%;height: 340px;background: #FFF;display: none;}

#ms3_slide2{width: 100%;height: 100%;}
.ms3_01 figure{background-image: url(/img/index/ms3_02.jpg);}
.ms3_02 figure{background-image: url(/img/index/ms3_04.jpg);}
.ms3_03 figure{background-image: url(/img/index/ms3_03.jpg);}
.ms3_04 figure{background-image: url(/img/index/ms3_09.jpg);}
.ms3_05 figure{background-image: url(/img/index/ms3_01.jpg);}
.ms3_06 figure{background-image: url(/img/index/ms3_07.jpg);}
.ms3_07 figure{background-image: url(/img/index/ms3_05.jpg);}
.ms3_08 figure{background-image: url(/img/index/ms3_06.jpg);}


@media screen and (max-width: 720px){
	.ms3_01 figure{background-image: url(/img/index/ms3_mo_02.jpg);}
	.ms3_02 figure{background-image: url(/img/index/ms3_mo_04.jpg);}
	.ms3_03 figure{background-image: url(/img/index/ms3_mo_03.jpg);}
	.ms3_04 figure{background-image: url(/img/index/ms3_mo_09.jpg);}
	.ms3_05 figure{background-image: url(/img/index/ms3_mo_01.jpg);}
	.ms3_06 figure{background-image: url(/img/index/ms3_mo_05.jpg);}
	.ms3_07 figure{background-image: url(/img/index/ms3_mo_06.jpg);}
	.ms3_08 figure{background-image: url(/img/index/ms3_mo_07.jpg);}
	

}
.ms3_dot2{
	position: absolute;
	bottom: 5%;
	z-index: 1;
	text-align: center; 
	display: flex;
	height: 1px; 
	background-color: rgba(0,0,0,0.2);
	left: 25px;
}
.ms3_dot2 span{ 
	width: 10px;
    height: 10px;
    background-color:#eee;
    border: 1px solid #7c7c7c;
    opacity: 1;
    margin: 0 50px;
    position: relative;
	margin-top: -5px;
}
.ms3_dot2 span::before{
	content: '';
	position: absolute;
/*
	top: 0;
    left: 0;
	height: 100%;
	background-color: rgba(0,0,0,1);
*/
	top: 42%;
    left: calc(100% + 1px);
    width: 100px;
    height: 2px;
}
.ms3_dot2 span::after{ 
	position: absolute;
	top: 100%;
    left: 50%;
	transform: translateX(-50%); 
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 400;
    -webkit-text-stroke: 0.01em;
    padding-top: 6px;
	text-align: left;
	white-space:pre;
	line-height: 1.3;
}
/*
.ms3_dot2 span.played::before {
     animation: countingBar 7s ease-out forwards;
    background-color: rgba(0, 0, 0, 1);
}
*/
/* 클릭된 이전 dot - width 고정용 */
.ms3_dot2 span.played{
	background-color: #000; border: solid 1px #000;
}
.ms3_dot2 span.played::before {
    width: 100px;
    background-color: rgba(0, 0, 0, 1);
}

/* 현재 슬라이드에서만 애니메이션 작동 */
.ms3_dot2 span.playing::before {
    animation: countingBar 10s ease-out forwards;
    background-color: rgba(0, 0, 0, 1);
}

.ms3_dot2 span:nth-child(1){margin-left: 0; background-color: #000; border: solid 1px #000;}
.ms3_dot2 span:nth-child(8){margin-right: 0;}
.ms3_dot2 span:nth-child(8):before{display: none;}
.ms3_dot2 span:nth-child(1)::after{content: "종이 봉투";}
.ms3_dot2 span:nth-child(2)::after{content: "종이 쇼핑백";}
.ms3_dot2 span:nth-child(3)::after{content: "종이 안전 봉투";}
.ms3_dot2 span:nth-child(4)::after{content: "종이컵";}
.ms3_dot2 span:nth-child(5)::after{content: "종이 식품 용기";}
.ms3_dot2 span:nth-child(6)::after{content: "특수지";}
.ms3_dot2 span:nth-child(7)::after{content: "종이 테이프";}
.ms3_dot2 span:nth-child(8)::after{content: "종이 완충재";}

.ms3_dot2_en span::after{text-align: center; padding-top: 10px;}
.ms3_dot2_en span:nth-of-type(2n)::after{bottom: 100%; top: initial; padding-bottom: 10px; padding-top: 0;}
.ms3_dot2_en span:nth-child(1)::after{content: "Paper Bag";}
.ms3_dot2_en span:nth-child(2)::after{content: "Paper Shopping Bag";}
.ms3_dot2_en span:nth-child(3)::after{content: "Paper Padded Mailer";}
.ms3_dot2_en span:nth-child(4)::after{content: "Paper Cup";}
.ms3_dot2_en span:nth-child(5)::after{content: "Paper Food Containers";}
.ms3_dot2_en span:nth-child(6)::after{content: "Specialty Paper";}
.ms3_dot2_en span:nth-child(7)::after{content: "Paper Tape";}
.ms3_dot2_en span:nth-child(8)::after{content: "Cushioning Paper";}


.ms3_dot2 span.swiper-pagination-bullet-active{background-color: #000; border: solid 1px #000;}
.ms3_dot2 span.swiper-pagination-bullet-active::before{animation-name: countingBar; animation-duration: 7s;animation-timing-function: ease-out; animation-fill-mode:forwards; background-color: rgba(0,0,0,1);}

@keyframes countingBar {
	0% {width: 0;}
	100% {width:100px;}
}

@media screen and (max-width: 1280px){
	.ms3_dot2 span{margin: 0 40px; margin-top: -4px;}
	.ms3_dot2 span.played::before{width: 80px;}
	@keyframes countingBar {
		0% {width: 0;}
		100% {width:80px;}
	}
}
@media screen and (max-width: 960px){
	.ms3_right{display: none;}
	.ms3_dot2 span{ margin: 0 5vw; margin-top: -4px;}
	.ms3_dot2 span.played::before{width: 10vw;}
	@keyframes countingBar {
		0% {width: 0;}
		100% {width:10vw;}
	}
	
}
@media screen and (max-width: 720px){
	.ms3_dot2{left: 0;}
	.ms3_dot2 span::before{top: 40%;}
	.ms3_dot2 span::after{display: none;}
	.ms3_dot2 span{width: 6px; height: 6px; margin: 0 5vw; margin-top: -2px;}
}