@charset "utf-8";

#page ul{margin:0;padding: 0;}
#page li{list-style: none;}

#page .since{text-align: center;}
#page .text{text-align: center; margin:60px 0 34px 0;}
#page .text2{text-align: center; font-size: 16px; color:#222;     line-height: 28px;}

#page .page_divider:after{height:60px !important;}

#page .history_list{background:url(../img/ko/bg.png) bottom no-repeat; }
#page .history_list .circle{position:relative;border-radius:50%; width:120px; margin:auto;}
#page .history_list .circle:before{content:"";display:block;padding-bottom:100%;}
#page .history_list .circle .text{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%); margin:0;}

#page .history_list .b_orange{ border:6px solid #e94c16;}
#page .history_list .b_blue{ border:6px solid #005970;}
#page .history_list .b_gray{ border:6px solid #555555;}
#page .history_list .b_black{ border:6px solid #000;}

#page .history_list .line1{position: relative;}
#page .history_list .line1:after { content:""; clear:both; display:block;     padding-bottom: 5%;}
#page .history_list .line1 ul:before{ content: "";   width: 1px;   background-color: #e94c16;   height: 100%;   margin-left: -1px;   display: block;   margin: 0px auto;    position: absolute;   left: 50%;}

#page .history_list .line1 li{ text-align:right; padding-right:50%;}
#page .history_list .line1 li:before { content: "";  display: block; padding-bottom: 5%;}

#page .history_list .line1 li .content{display: inline-block; font-size: 16px; line-height: 28px; color:#555; margin-right:10px; vertical-align: top; font-weight:500;}
#page .history_list .line1 li .year{display: inline-block;  font-size: 20px; color:#222; font-weight: 500; margin-right:-5px; vertical-align: top;}
#page .history_list .line1 li .year:after{content: ""; display: inline-block; background: url(../img/ko/line1.png) no-repeat; width: 76px; height: 10px;}

#page .history_list .line1 li:nth-child(2n){ text-align:left; padding-right: 0; padding-left:50%; }
#page .history_list .line1 li:nth-child(2n):before { content: "";  display: block; padding-bottom: 5%;}
#page .history_list .line1 li:nth-child(2n) .content{display: inline-block;  font-size: 16px; line-height: 28px; color:#555;  }
#page .history_list .line1 li:nth-child(2n) .year{display: inline-block;  font-size: 20px; color:#222; margin-right:10px;margin-left:-5px;font-weight: 500;}
#page .history_list .line1 li:nth-child(2n) .year:before{content: ""; display: inline-block; background: url(../img/ko/line1.png) no-repeat;     transform: rotate(180deg); width: 76px; height: 10px;}
#page .history_list .line1 li:nth-child(2n) .year:after{content:none;}


#page .history_list .line2{position: relative;}
#page .history_list .line2:after { content:""; clear:both; display:block;     padding-bottom: 5%;}
#page .history_list .line2 ul:before{ content: "";   width: 1px;   background-color: #005970;   height: 100%;   margin-left: -1px;   display: block;   margin: 0px auto;    position: absolute;   left: 50%;}

#page .history_list .line2 li .content{display: inline-block;  font-size: 16px; line-height: 28px; color:#555; vertical-align: top; font-weight:500;}
#page .history_list .line2 li .year{display: inline-block;  font-size: 20px; color:#222; font-weight: 500; margin-left:-5px; margin-right:10px; vertical-align: top;}
#page .history_list .line2 li .year:before{content: ""; display: inline-block; background: url(../img/ko/line2.png) no-repeat; width: 76px; height: 10px;}

#page .history_list .line2 li{ text-align:left; padding-left:50%; }
#page .history_list .line2 li:before { content: "";  display: block; padding-bottom: 5%;}

#page .history_list .line2 li:nth-child(2n){ text-align:right; padding-right:50%; padding-left:0; }
#page .history_list .line2 li:nth-child(2n) .content{display: inline-block;  font-size: 16px; line-height: 28px; color:#555; margin-right:10px; vertical-align: top;}
#page .history_list .line2 li:nth-child(2n) .year{display: inline-block;  font-size: 20px; color:#222; font-weight: 500; margin-right:-5px; vertical-align: top;}
#page .history_list .line2 li:nth-child(2n) .year:after{content: ""; display: inline-block; background: url(../img/ko/line2.png) no-repeat; width: 76px; height: 10px;  transform: rotate(180deg); }
#page .history_list .line2 li:nth-child(2n) .year:before{content:none;}


#page .history_list .line3{position: relative;}
#page .history_list .line3:after { content:""; clear:both; display:block;     padding-bottom: 5%;}
#page .history_list .line3 ul:before{ content: "";   width: 1px;   background-color: #555;   height: 100%;   margin-left: -1px;   display: block;   margin: 0px auto;    position: absolute;   left: 50%;}

#page .history_list .line3 li .content{display: inline-block;  font-size: 16px; line-height: 28px;color:#555; vertical-align: top; font-weight:500;}
#page .history_list .line3 li .year{display: inline-block;  font-size: 20px; color:#222; font-weight: 500; margin-left:-5px; margin-right:10px; vertical-align: top;}
#page .history_list .line3 li .year:before{content: ""; display: inline-block; background: url(../img/ko/line3.png) no-repeat; width: 76px; height: 10px;}

#page .history_list .line3 li{ text-align:left; padding-left:50%; }
#page .history_list .line3 li:before { content: "";  display: block; padding-bottom: 5%;}

#page .history_list .line3 li:nth-child(2n){ text-align:right; padding-right:50%; padding-left:0; }
#page .history_list .line3 li:nth-child(2n) .content{display: inline-block; font-size: 16px; line-height: 28px; color:#555; margin-right:10px; vertical-align: top;}
#page .history_list .line3 li:nth-child(2n) .year{display: inline-block;  font-size: 20px; color:#222; font-weight: 500; margin-right:-5px; vertical-align: top;}
#page .history_list .line3 li:nth-child(2n) .year:after{content: ""; display: inline-block; background: url(../img/ko/line3.png) no-repeat; width: 76px; height: 10px;  transform: rotate(180deg); }
#page .history_list .line3 li:nth-child(2n) .year:before{content:none;}


#page .history_list .line4{position: relative;top: -85px;}
#page .history_list .line4:after { content:""; clear:both; display:block;     padding-bottom: 5%;}
#page .history_list .line4 li{ text-align:left; padding-left:55%; }
#page .history_list .line4 li .content{display: inline-block;  font-size: 16px; line-height: 28px; color:#555; vertical-align: top; font-weight:500;}
#page .history_list .line4 li .content:before{content: ""; display: inline-block; background: url(../img/ko/line4.png) no-repeat; width: 76px; height: 10px;}

@media screen and (max-width: 767px){
    #page .since img{    width: 30%;}
    #page .text img{width:100%;}
    #page .text { text-align: center; margin: 20px 0;}
    #page .text2{font-size: 12px; line-height:20px;}
    
    #page .history_list .circle{width:85px;}
   #page .history_list .line1 li .content{font-size: 12px; line-height:18px;    margin-right: 43px;}
    #page .history_list .line1 li:nth-child(2n) .content{font-size: 12px; line-height:18px;    margin-right: 0;
        margin-left: 44px;}
    #page .history_list .line1 li .year{font-size: 16px;}
    #page .history_list .line1 li:nth-child(2n) .year{font-size: 16px;}
    #page .history_list .line1 li .year:after{background-size:42px; width:44px;}
    #page .history_list .line1 li:nth-child(2n) .year:before{background-size:42px; width:44px;}
    
    #page .history_list .line2 li .content{font-size: 12px; line-height:18px;    margin-left: 42px;}
    #page .history_list .line2 li:nth-child(2n) .content{font-size: 12px; line-height:18px; margin-left: 0;  margin-right: 41px; }
    #page .history_list .line2 li .year{font-size: 16px;    margin-left: -3px;}
    #page .history_list .line2 li .year:before{background-size:42px; width:44px;}
    #page .history_list .line2 li:nth-child(2n) .year{font-size: 16px;    margin-right: -4px;}
    #page .history_list .line2 li:nth-child(2n) .year:after{background-size:42px; width:44px;}
    
    #page .history_list .line3 li .content{font-size: 12px; line-height:18px;margin-left: 10px;}
    #page .history_list .line3 li:nth-child(2n) .content{font-size: 12px; line-height:18px;  }
    #page .history_list .line3 li .year{font-size: 16px;    margin-left: -3px;}
    #page .history_list .line3 li .year:before{background-size:42px; width:44px;}
    #page .history_list .line3 li:nth-child(2n) .year{font-size: 16px;    margin-right: -4px;}
    #page .history_list .line3 li:nth-child(2n) .year:after{background-size:42px; width:44px;}
    
    #page .history_list .line4 li{padding-left:68%;}
    #page .history_list .line4 li .content{font-size:12px; line-height:18px;}
    #page .history_list .line4 li .content:before{background-size:42px; width:44px;    display: block;}
}