@charset "utf-8";

.mo{display:none;}
.pc{display:inline-block;}

@media screen and (max-width:500px){
    .pc{display:none;}
    .mo{display:inline-block;}
}


#page{}

#page .since{text-align:center;}
#page .since img{max-width:30%;}
#page .text{text-align:center;margin:60px 0 34px; width:100%;}
#page .text img{max-width:80%;}
#page .text2{text-align:center;font-size:16px;color:#222;}

#page .history_list{background-image:url(../img/ko/bg.png);background-position:center bottom;background-repeat:no-repeat;padding:0 10px 70px;}
#page .history_list .line{position:relative;}
#page .history_list .line .circle{position:relative;border:6px solid #000000;border-radius:50%;width:120px;margin:auto;}
#page .history_list .line .circle:before{content:"";display:block;padding-bottom:100%;}
#page .history_list .line .circle img{max-width:70%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
#page .history_list .line ul{position:relative;margin:0;padding:0;list-style:none;padding-bottom:5%;}
#page .history_list .line ul:before{content:"";width:1px;background-color:#000000;height:100%;margin-left:-1px;display:block;margin:0px auto;position:absolute;left:50%;}
#page .history_list .line li{text-align:right;padding-right:calc(50% - 5px);}
#page .history_list .line li:before{content:"";display:block;padding-bottom:5%;}
#page .history_list .line li .content{display:inline-block;font-size:18px;color:#555;margin-right:10px;}
#page .history_list .line li .year{display:inline-block;font-size:20px;color:#222;font-weight:500;float:right;}
#page .history_list .line li .year:before{content:"";display:inline-block;background-repeat:no-repeat;width:76px;height:30px;background-position:center right;float:right;margin-left:10px;}
#page .history_list .line li:nth-child(2n){text-align:left;padding-right:0;padding-left:calc(50% - 5px);}
#page .history_list .line li:nth-child(2n) .year{float:left;}
#page .history_list .line li:nth-child(2n) .year:before{transform:rotate(180deg);float:left;margin-left:0;margin-right:10px;}
#page .history_list .line li:nth-child(2n) .content{margin-left:10px;margin-right:0;}
#page .history_list .line.reverse li{text-align:left;padding-right:0;padding-left:calc(50% - 5px);}
#page .history_list .line.reverse li .content{margin-right:0;margin-left:10px;}
#page .history_list .line.reverse li .year{float:left;}
#page .history_list .line.reverse li .year:before{float:left;margin-left:0;margin-right:10px;background-position:center left;}
#page .history_list .line.reverse li:nth-child(2n){text-align:right;padding-left:0;padding-right:calc(50% - 5px);}
#page .history_list .line.reverse li:nth-child(2n) .year{float:right;}
#page .history_list .line.reverse li:nth-child(2n) .year:before{float:right;margin-right:0;margin-left:10px;}
#page .history_list .line.reverse li:nth-child(2n) .content{margin-left:0;margin-right:10px;}

#page .history_list .line .b_orange{border-color:#e94c16;}
#page .history_list .line .b_blue{border-color:#005970;}
#page .history_list .line .b_gray{border-color:#555555;}
#page .history_list .line .b_black{border-color:#000;}

#page .history_list .line1 ul:before{background-color:#e94c16;}
#page .history_list .line1 li .year:before{background-image:url(../img/ko/line1.png);}

#page .history_list .line2 ul:before{background-color:#005970;}
#page .history_list .line2 li .year:before{background-image:url(../img/ko/line2.png);}

#page .history_list .line3 ul:before{background-color:#555555;}
#page .history_list .line3 li .year:before{background-image:url(../img/ko/line3.png);}

#page .history_list .line4{}
#page .history_list .line4 ul{position:absolute;top:26%;width:100%;padding:0;}
#page .history_list .line4 ul:before{display:none;}
#page .history_list .line4 li .year:before{background-image:url(../img/ko/line4.png);}
#page .history_list .line4.reverse li{text-align:left;padding-right:0;padding-left:calc(50% + 60px);}
#page .history_list .line4.reverse li .year:before{margin-right:0;}
#page .history_list .line4.reverse li .content{margin-left:0;}


@media screen and (max-width:1200px){
	#page .history_list .line .circle{width:110px;}
	#page .history_list .line li .year{font-size:18px;}
	#page .history_list .line li .year:before{height:25px;}
	#page .history_list .line li .content{font-size:16px;}
}

@media screen and (max-width:1000px){
	#page .history_list .line .circle{width:100px;}
	#page .history_list .line li .year{float:none !important;font-size:16px;}
	#page .history_list .line li .content{display:block !important;margin-right:85px;font-size:14px;}
	#page .history_list .line li:nth-child(2n) .year{float:none !important;}
	#page .history_list .line li:nth-child(2n) .content{display:block !important;margin-left:85px;}
	
	#page .history_list .line.reverse li .content{margin-right:0;margin-left:85px;}
	#page .history_list .line.reverse li:nth-child(2n) .content{margin-left:0;margin-right:85px;}
	
	#page .history_list .line4 .content{margin-top:-25px;}
	#page .history_list .line4.reverse li{padding-left:calc(50% + 60px);}
}

@media screen and (max-width:900px){
	#page .history_list .line .circle{width:90px;}
	#page .history_list .line li .year{font-size:15px;}
	#page .history_list .line li .year:before{width:50px;}
	#page .history_list .line li .content{margin-right:60px;font-size:13px;}
	#page .history_list .line li:nth-child(2n) .content{margin-left:60px;}
	#page .history_list .line.reverse li .content{margin-left:60px;}
	#page .history_list .line.reverse li:nth-child(2n) .content{margin-right:60px;}
	#page .history_list .line4.reverse li{padding-left:calc(50% + 50px);}
}

@media screen and (max-width:700px){
	#page .history_list .circle{width:75px;}
}

@media screen and (max-width:500px){
	#page .history_list .line .circle{width:65px;border-width:4px;}
	#page .history_list .line li:before{padding-bottom:0;}
	#page .history_list .line li .year{font-size:13px;height:10px;}
	#page .history_list .line li .year:before{width:40px;}
	#page .history_list .line li .content{margin-right:50px;font-size:11px;}
	#page .history_list .line li:nth-child(2n) .content{margin-left:50px;}
	#page .history_list .line.reverse li .content{margin-left:50px;}
	#page .history_list .line.reverse li:nth-child(2n) .content{margin-right:50px;}
	#page .history_list .line4.reverse li{padding-left:calc(50% + 35px);}
	#page .history_list .line4.reverse li .year{height:25px;}
}

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

}