@charset "utf-8";

/**************************************************
	Content CSS Document
	IEETU Web Standardization Team
	2021-08-23
**************************************************/

/**************************************************
	Common
**************************************************/


/**************************************************
	Content
**************************************************/
#header{background:none;}
#footer{position:relative; z-index:101;}
.cont_wrap{padding-bottom:135px; word-break:keep-all; word-wrap:break-word;}
.cont_wrap .nav{position:fixed; left:0; right:0; bottom:0; z-index:100; height:135px; background:rgba(41,61,137,.9);}
body.sub02 .cont_wrap .nav{background:rgba(4,140,191,.9);}
body.sub03 .cont_wrap .nav{background:rgba(76,128,2,.9);}
body.sub04 .cont_wrap .nav{background:rgba(156,63,13,.9);}
body.sub05 .cont_wrap .nav{background:rgba(146,22,56,.9);}
.cont_wrap .nav ul{display:flex; align-items:center; height:135px; margin-left:300px;}
.cont_wrap .nav ul > li{width:16.66%; height:100%;}
.cont_wrap .nav ul > li button{display:block; position:relative; z-index:10; overflow:hidden; width:100%; height:100%; background:none; color:transparent;}
.cont_wrap .nav ul > li button i{display:block; position:absolute; left:20px; right:0; top:50%; transform:translateY(-50%); height:18px; background:url(../images/main/year_2012.png) no-repeat 0 0/contain; transition:height .3s;}
.cont_wrap .nav ul > li button.y0 i{background-image:url(../images/main/year_2012.png);}
.cont_wrap .nav ul > li button.y1 i{background-image:url(../images/main/year_2013.png);}
.cont_wrap .nav ul > li button.y2 i{background-image:url(../images/main/year_2016.png);}
.cont_wrap .nav ul > li button.y3 i{background-image:url(../images/main/year_2019.png);}
.cont_wrap .nav ul > li button.y4 i{background-image:url(../images/main/year_2022.png);}
.cont_wrap .nav ul > li.slick-active button i{height:32px; background:url(../images/main/year_2012_active2.png) no-repeat 0 0/contain;}
.cont_wrap .nav ul > li.slick-active button.y0 i{background-image:url(../images/main/year_2012_active2.png);}
.cont_wrap .nav ul > li.slick-active button.y1 i{background-image:url(../images/main/year_2013_active2.png);}
.cont_wrap .nav ul > li.slick-active button.y2 i{background-image:url(../images/main/year_2016_active2.png);}
.cont_wrap .nav ul > li.slick-active button.y3 i{background-image:url(../images/main/year_2019_active2.png);}
.cont_wrap .nav ul > li.slick-active button.y4 i{background-image:url(../images/main/year_2022_active2.png);}
.cont_wrap .nav .go_top{position:absolute; bottom:100%; right:0;}
.cont_wrap .nav .go_top a{display:block; justify-content:center; align-items:center; position:relative; overflow:hidden; width:70px; height:70px; color:transparent; background:#2e8a3a;}
.cont_wrap .nav .go_top a:after{content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:20px; height:20px; margin:auto; border:1px solid #fff; border-width:1px 1px 0 0; transform:translateY(25%) rotate(-45deg);}

.c_history{overflow:hidden;}
.c_history .c_head{position:relative; height:100vh; padding:135px 20px 135px 260px; background:url(../images/content/bg_sub01.jpg) no-repeat 50% 0/cover; color:#fff; transform:scale(1.2); transition:all 2s ease-in-out;}
.c_history .c_head.active{transform:none;}
/*.c_history .c_head:after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; transition:height 1s ease-in-out;}
.c_history .c_head.active:after{height:0;}*/
body.sub01 .c_history .c_head{background-image:url(../images/content/bg_sub01.jpg);}
body.sub02 .c_history .c_head{background-image:url(../images/content/bg_sub02.jpg);}
body.sub03 .c_history .c_head{background-image:url(../images/content/bg_sub03.jpg);}
body.sub04 .c_history .c_head{background-image:url(../images/content/bg_sub04.jpg);}
body.sub05 .c_history .c_head{background-image:url(../images/content/bg_sub05.jpg);}
.c_history .c_head > .inr{position:relative; margin-left:85px; padding-left:75px;}
.c_history .c_head > .inr:before{content:''; display:block; position:absolute; top:10px; left:0; width:2px; height:0; background:#fff; transition:height 1s 1.5s ease-in-out;}
.c_history .c_head.active > .inr:before{height:100%;}
.c_history .c_head .history_chapter{opacity:0; position:absolute; bottom:0; left:0; transform:translateX(-50px) rotate(-90deg); transform-origin:0 100%; font-size:24px; transition:opacity 1s 2s ease-in-out;}
.c_history .c_head.active .history_chapter{opacity:1;}
.c_history .c_head .history_tit{opacity:0; transform:translateY(50%); transition:opacity 1s 2.5s ease-in-out, transform 1s 2.5s ease-in-out;}
.c_history .c_head.active .history_tit{opacity:1; transform:translateY(0);}
.c_history .history_tit .date{display:block; font-family:"Elice Digital Baeum"; font-size:80px; line-height:1.1; letter-spacing:-1px;}
.c_history .history_tit strong{display:block; margin:30px 0 0; font-family:"Arita-buri"; font-size:70px; letter-spacing:-1px;}
.c_history .history_lst{margin:60px 0 0; opacity:0; transform:translateY(50%); transition:opacity 1s 3s ease-in-out, transform 1s 3s ease-in-out;}
.c_history .c_head.active .history_lst{opacity:1; transform:translateY(0);}
.c_history .history_lst li{margin:15px 0; font-size:17px;}
.c_history .history_lst li a{display:flex; color:#fff;}
.c_history .history_lst li .date{flex:0 0 auto; margin:0 20px 0 0; font-weight:600;}
.c_history .c_head .area_scroll{position:absolute; top:30%; right:80px; transform:translateY(-50%) rotate(90deg); transform-origin:100% 100%; display:flex; align-items:center; font-size:13px;  opacity:0; transition:all 1s 2s;}
.c_history .c_head.active .area_scroll{top:50%; opacity:1;}
.c_history .c_head .area_scroll .line{position:relative; overflow:hidden; width:80px; height:1px; margin-right:10px; background:rgba(255,255,255,.2);}
.c_history .c_head .area_scroll .line:before{content:''; position:absolute; top:0; left:0; bottom:0; width:100%; height:1px; background:#fff; animation:scroll 2s infinite;}
.c_history .c_head .area_scroll span{display:flex; align-items:center;}
.c_history .c_head .area_scroll span i{display:flex; align-items:center; width:22px; height:14px; margin-right:10px; padding:0 5px; border:2px solid #fff; border-radius:10px;}
.c_history .c_head .area_scroll span i:before{content:''; width:5px; height:2px; border-radius:2px; background:#fff; animation:scroll2 2s infinite alternate;}
@keyframes scroll{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
@keyframes scroll2{
  0%{transform:translateX(100%);}
  100%{transform:translateX(0);}
}

.c_history .c_body{max-width:1400px; margin:0 auto;}
.c_history .c_headline{margin:100px 0 80px; font-family:"Arita-buri"; font-size:20px; line-height:1.6; text-align:center;}
.c_history .c_headline strong{font-size:24px;}
.c_history .area_item .item{display:flex; align-items:center; margin:60px 0; background:#f6f6f6;}
.c_history .area_item .item:nth-child(even){flex-direction:row-reverse; background:#fff2ef;}
.c_history .area_item .item > div{width:50%;}
.c_history .area_item .item .item_pic{overflow:hidden;}
.c_history .area_item .item .item_pic img{transition:transform .6s ease-in-out;}
.c_history .area_item .item .item_pic:hover img{transform:scale(1.1);}
.c_history .area_item .item .item_txt{padding:30px 80px;}
.c_history .area_item .item .item_date{font-size:17px; text-decoration:underline;}
.c_history .area_item .item .item_tit{margin:50px 0 0; font-family:"Arita-buri"; font-weight:800; font-size:32px; letter-spacing:-1px;}
.c_history .area_item .item .item_desc{margin:30px 0 0; font-size:18px; line-height:1.6;}

/* ~ 1400px */
@media screen and (max-width:1400px){
	#footer{position:static;}
	#footer > .inr{display:none;}
	#footer .goto_kmedihub{position:absolute; z-index:101;}
	.cont_wrap .nav ul{margin:0 30px;}
	.cont_wrap .nav ul > li{width:20%;}

	.c_history .c_head{padding:135px 30px 50px;}
	.c_history .c_head > .inr{margin:50px 0 0; padding:0;}
	.c_history .c_head > .inr:before{width:0; height:2px; transition:width 1s 1s ease-in-out;}
	.c_history .c_head.active > .inr:before{width:100%; height:2px;}
	.c_history .c_head .history_chapter{bottom:auto; top:-50px; transform:translateY(-50%);}
	.c_history .history_tit .date{padding-top:30px; font-size:50px;}
	.c_history .history_tit strong{margin-top:20px; font-size:40px;}
	.c_history .history_lst{margin-top:20px;}
	.c_history .history_lst li{margin:10px 0; font-size:16px;}
	.c_history .c_body{padding:0 10px;}
	.c_history .c_headline{margin:60px 0 40px;}
	.c_history .area_item .item{margin:40px 0;}
	.c_history .area_item .item .item_txt{padding:30px;}
	.c_history .area_item .item .item_tit{margin-top:30px; font-size:30px;}
	.c_history .area_item .item .item_desc{margin-top:20px; font-size:16px;}
}

@media screen and (max-width:1259px){
	/**************************************************
		Common
	**************************************************/

	/**************************************************
		Content
	**************************************************/
}

@media screen and (max-width:1023px){
	/**************************************************
		Common
	**************************************************/

	/**************************************************
		Content
	**************************************************/
	.cont_wrap .nav{height:80px;}
	.cont_wrap .nav ul{height:100%; margin:0 10px;}
	.cont_wrap .nav ul > li button i{left:10px; bottom:20px;}
	.cont_wrap .nav ul > li button.y0 i{background-image:url(../images/main/year_2012_m.png);}
	.cont_wrap .nav ul > li button.y1 i{background-image:url(../images/main/year_2013_m.png);}
	.cont_wrap .nav ul > li button.y2 i{background-image:url(../images/main/year_2016_m.png);}
	.cont_wrap .nav ul > li button.y3 i{background-image:url(../images/main/year_2019_m.png);}
	.cont_wrap .nav ul > li button.y4 i{background-image:url(../images/main/year_2022_m.png);}
	.cont_wrap .nav ul > li.slick-active button i{height:32px; background:url(../images/main/year_2012_m_active2.png) no-repeat 0 0/contain;}
	.cont_wrap .nav ul > li.slick-active button.y0 i{background-image:url(../images/main/year_2012_m_active2.png);}
	.cont_wrap .nav ul > li.slick-active button.y1 i{background-image:url(../images/main/year_2013_m_active2.png);}
	.cont_wrap .nav ul > li.slick-active button.y2 i{background-image:url(../images/main/year_2016_m_active2.png);}
	.cont_wrap .nav ul > li.slick-active button.y3 i{background-image:url(../images/main/year_2019_m_active2.png);}
	.cont_wrap .nav ul > li.slick-active button.y4 i{background-image:url(../images/main/year_2022_m_active2.png);}

	.cont_wrap .nav .go_top a{width:35px; height:35px;}
	.cont_wrap .nav .go_top a:after{width:10px; height:10px;}

	.c_history .c_head{/*min-height:870px;*/ height:auto; padding-top:100px;}
	.c_history .c_head .area_scroll{display:none;}

	.c_history .c_head .history_chapter{font-size:17px; transform:none;}
	.c_history .history_tit .date{font-size:40px;}
	.c_history .history_tit strong{margin-top:30px; font-size:40px;}
	.c_history .history_lst li{margin:12px 0; font-size:14px;}

	.c_history .c_headline{margin:40px 0 30px; font-size:15px;}
	.c_history .c_headline strong{font-size:18px;}

}

@media screen and (max-width:767px){
	/**************************************************
		Common
	**************************************************/


	/**************************************************
		Content
	**************************************************/
	.c_history .c_head{padding-left:20px; padding-right:20px;}
	.c_history .c_headline br{display:none;}
	:root .c_history .area_item .item{flex-direction:column; margin:30px 0;}
	.c_history .area_item .item > div{width:100%;}
	.c_history .area_item .item > .item_pic img{width:100%;}
	.c_history .area_item .item .item_txt{padding:25px 15px;}
	.c_history .area_item .item .item_tit{font-size:24px;}

}

/* ~ 639px */
@media screen and (max-width:639px){
	/**************************************************
		Common
	**************************************************/


	/**************************************************
		Content
	**************************************************/

}

@media screen and (max-width:537px){
	/**************************************************
		Common
	**************************************************/

	/**************************************************
		Content
	**************************************************/
	.c_history .history_tit strong{display:flex; flex-wrap:wrap;}

}