@charset "utf-8";

#tenth_page {
	letter-spacing: 0.72px;
    font-size: 14px;
    line-height: 2;
    color: #333333;
}



/************************************
 head image animation
*************************************/
.head_img {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1300px;
	aspect-ratio: 1300 / 740;
	height: auto;
}


.head_img .panel {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	animation: headimg_key_1 24s linear 0s infinite normal forwards;
}

.head_img ._right {
	left: 50%;
}

.head_img .panel_logo {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.head_img .panel_logo video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.head_img .panel_logo video.sp {
	display: none;
}


@keyframes headimg_key_1 {
	 0%			{ opacity: 0; }
	 4.17%		{ opacity: 1; }
	 25%		{ opacity: 1; }
	 29.17%		{ opacity: 0; }
	 100%		{ opacity: 0; }
}

@keyframes headimg_key_2 {
	 0%			{ opacity: 0; }
	 4.17%		{ opacity: 1; }
	 12.5%		{ opacity: 1; }
	 16.67%		{ opacity: 0; }
	 100%		{ opacity: 0; }
}

@keyframes headimg_key_logo {
	 0%			{ opacity: 0; }
	 4.17%		{ opacity: 1; }
	 100%		{ opacity: 1; }
}



/************************************
 head
*************************************/
.sec_head {
	margin: 0 auto;
	max-width: 950px;
}

.sec_head ._cap {
	padding-top: 75px;
	padding-bottom: 150px;
	text-align: center;
	line-height: 2em;
}

.sec_head ._body {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color:#F3F3F3;
	padding: 70px;
}

.sec_head ._body ._img {
	width: 380px;
	height: 470px;
}

.sec_head ._body ._img img {
	width: 100%;
	height: 100%;
}

.sec_head ._body ._title1 {
	padding-bottom: 15px;
	line-height: 2em;
	font-size: 12px;
	font-weight: bold;
}

.sec_head ._body ._title {
	padding-bottom: 35px;
	line-height: 2em;
	font-size: 13px;
}

.sec_head ._body ._desc {
	width: 375px;
	line-height: 2em;
}


/************************************
 topic
*************************************/
.topic {
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;padding-bottom: 130px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}


/* image block */
.tp_img {
	position: relative;
	width: 400px;
}

.tp_img_inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.tp_img ._img {
	width: 400px;
	height: auto;
}

.tp_img ._img img {
	width: 100%;
}

.tp_img ._cap {
	padding-top: 45px;
	padding-bottom: 23px;
	font-size: 17px;
	line-height: 27px;
}


/* gap */
.tp_gap {
	width: 90px;
}

/* text block */
.tp_body {
	width: 480px;
}

.tp_body ._desc {
	padding-top: 66px;
	line-height: 2em;
    text-align: left;
}

._bar {
	display: inline-block;
	width: 100%;
	height: 3em;
	margin-bottom: 4em;
	border-bottom: 1px #cecece solid;
}


/* margin */
.tp_mgn {
	width: 120px;
}


/* topic: reverse type */
.topic.rev .tp_mgn {
	order: 1;
}

.topic.rev .tp_img {
	order: 4;
}

.topic.rev .tp_gap {
	order: 3;
}

.topic.rev .tp_body {
	order: 2;
}


/* topic: animation */
.tp_img {
    position: relative;
}

.tp_img .flip_1 {
    opacity: 0;
    animation: topic_key_5 15s linear 0s infinite normal forwards;
}

.tp_img .flip_2 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    animation: topic_key_5 15s linear 3s infinite normal forwards;
}

.tp_img .flip_3 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    animation: topic_key_5 15s linear 6s infinite normal forwards;
}

.tp_img .flip_4 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    animation: topic_key_5 15s linear 9s infinite normal forwards;
}

.tp_img .flip_5 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    animation: topic_key_5 15s linear 12s infinite normal forwards;
}

@keyframes topic_key_5 {
    0%    { opacity: 0; }
    4%    { opacity: 1; }
    20%   { opacity: 1; }
    24%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* image count: 3 (e.g. HANRO) */
.tp_img.cnt3 .flip_1 {
    animation-name: topic_key_3;
    animation-duration: 9s;
}

.tp_img.cnt3 .flip_2 {
    animation-name: topic_key_3;
    animation-duration: 9s;
}

.tp_img.cnt3 .flip_3 {
    animation-name: topic_key_3;
    animation-duration: 9s;
}

@keyframes topic_key_3 {
    0%     { opacity: 0; }
    6.67%  { opacity: 1; }
    33.33% { opacity: 1; }
    40%    { opacity: 0; }
    100%   { opacity: 0; }
}

/* image count: 1 - no crossfade needed, show statically */
.tp_img.cnt1 .tp_img_inner {
    animation: none;
    opacity: 1;
    position: static;
    top: auto;
    left: auto;
}


p.line {
	border-top: 1px dotted #cecece;
	padding-top: 30px;
}


/*************************************************/
@media screen and (max-width: 767px) {
	
	#tenth_page {
		width: 100vw;
		letter-spacing: normal;
		font-size: 13px;
		color: #333333;
	}
	
	
	/************************************
	 head image
	*************************************/
	.head_img {
	}
	
	/************************************
	 head
	*************************************/
	.sec_head {
		width: 100%;
		padding-bottom: 3w;
	}
	
	.sec_head ._cap {
		padding: 13vw 0vw 17vw 0vw;
        width: 77.4vw;
        margin: 0 auto;
	}
	
	.sec_head ._body {
		display: block;
		width: 60vw;
		margin: 0 auto;
		padding: 10vw;
		background-color: #F3F3F3;
	}
	
	.sec_head ._body ._img {
		width: 60vw;
		height: 74vw;
	}
	
	.sec_head ._body ._title1 {
		padding-bottom: 0.85em;
	}
	
	.sec_head ._body ._title {
		padding-bottom: 1.8em;
	}
	
	.sec_head ._body ._desc {
		padding-top: 2em;
		width: 100%;
	}


	
	
	/************************************
	 topic
	*************************************/
	.topic {
		margin: 0 auto;
		width: 77.4vw;
		padding-bottom: 21vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.tp_img ,
	.topic.rev .tp_img {
		order: 2;
	}
	
	.tp_body ,
	.topic.rev .tp_body {
		order: 1;
	}
	
	
	/* image block */
	.tp_img {
		width: 100%;
	}
	
	.tp_img ._img {
		width: 100%;
	}
	
	.tp_img ._cap {
		padding-top: 6vw;
		padding-bottom: 3.3vw;
		font-size: 4.5vw;
		line-height: 1em;
	}
	
	
	/* gap */
	.tp_gap {
		display: none;
	}
	
	
	/* text block */
	.tp_body {
		width: 100%;
		padding-bottom: 11vw;
	}
	
	.tp_body ._desc {
		padding-top: 0;
	}
	
	.tp_body ._desc span {
		font-size: 15px;
	}
	
	._bar {
		display: none;
	}
	
	
	
	/* margin */
	.tp_mgn {
		display: none;
	}
	
	
	
	
	/************************************
	 head image animation
	*************************************/
	.head_img {
		margin: 0;
		width: 100vw;
		aspect-ratio: 1080 / 1920;
		height: auto;
	}
	
	
	.head_img .panel {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		background-size: 100% 100%;
	}

	.head_img .panel_logo {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.head_img .panel_logo video.pc {
		display: none;
	}

	.head_img .panel_logo video.sp {
		display: block;
	}

	#tenth_page .pop_up_text{
		margin: 0 auto;
        width: 77.4vw;
		text-align: left;
	}
	
	#tenth_page .popup ._desc{
		text-align: center;
	}
	
	#tenth_page .about_ebure{
		margin: 0 auto;
        width: 77.4vw;
	}
	
	@keyframes headimg_key_sp {
		 0%			{ opacity: 0; }
		 4.17%		{ opacity: 1; }
		 12.5%		{ opacity: 1; }
		 16.67%		{ opacity: 0; }
		 100%		{ opacity: 0; }
	}
	
	@keyframes headimg_key_logo {
		 0%			{ opacity: 0; }
		 4.17%		{ opacity: 1; }
		 100%		{ opacity: 1; }
	}
	p.line {
	border-top: 1px dotted #cecece;
	padding-top: 5vw;
	
	
	
}
}


span.bold {
	font-weight: bold;
}
p.right {
	text-align: right;
	margin-top: 6em;
}
a.line {
	text-decoration: underline;
}
#tenth_page .pop_up_btn{
	display: inline-block;
    border: 1px #cecece solid;
    padding: 20px 80px;
    border-radius: 0;
    margin-bottom: 140px;
    text-decoration: revert;
}



#tenth_page h4{
	font-style: normal;
	font-weight: 600; 
	font-size: 40px;
	text-align: center;
	margin-bottom: 6%;
}

#tenth_page .pop_up_text{
    text-align: center;
    margin-bottom: 5%;
}

#tenth_page .popup{
	align-items: center;
	justify-content: space-between;
    padding-bottom: 90px;
}
#tenth_page .popup ._desc{
	padding: 0;
}

#tenth_page .about_ebure{
    text-align: left;
}

#tenth_page .about_ebure a{
    text-decoration: revert;
}


@media screen and (max-width: 768px) {

#tenth_page h4{
	font-size: 30px;
}

.topic{
	flex-direction: column;
}

#tenth_page .pop_up_btn {
	margin-bottom: 70px;
}
	
}

@media screen and (max-width: 480px) {

#tenth_page h4{
	font-size: 20px;
}

}