  /.   @charset "utf-8";
/**************************************************

	SUPERBOARD :: HISTORY SKIN :: basic

**************************************************/
/* 연혁 */
.his-wrap {margin:80px 100px;}
.his-wrap h1{text-align:center;font-weight:normal;font-family:mn,noto;font-size:36px;color:#222222}
.his-wrap h2{margin-top:10px;text-align:center;font-weight:normal;font-size:18px;color:#666666}
.his-wrap .info{position:relative;}

.his-wrap .info>div{margin:0 0 45px 0; position:relative;}
.his-wrap .info>div:after{content:'';display:block;clear:both;}
.his-wrap dl{position:relative;width:50%;min-height:120px;}
.his-wrap dl.last{padding-bottom:0px;}
.his-wrap dt{position:absolute;top:0px;font-weight:600;font-family: opensans; font-size:36px;line-height:1em;color:#235198;}
.his-wrap dd{position:relative;margin-bottom:20px;}
.his-wrap dd strong{position:absolute;top:0px;width:40px;font-family:mn,noto;font-size:19px;color:#222;}
.his-wrap dd .txt{position:relative;top:5px;}
.his-wrap dd em{display:block;margin-bottom:5px;font-style:normal;font-weight:bold;font-size:17px;color:#222222;}
.his-wrap dd pre{position:relative;top:-2px;font-size:16px;line-height:24px;color:#666666;}
.his-wrap .img{width:50%;margin-top:75px;box-sizing:border-box;}
.his-wrap .img img{max-width:100%;}

.his-wrap .odd dl{float:right}
.his-wrap .odd dt{left:-130px;}
.his-wrap .odd dd{padding-left:110px;}
.his-wrap .odd dd:after {position:absolute; content:''; width:4px; height:4px; top:14px; left:100px; background:#235198;}
.his-wrap .odd dd strong{left:50px;}
.his-wrap .odd .img{float:left;padding-right:45px;text-align:right;}
.his-wrap .even dl{float:left;}
.his-wrap .even dt{right:-130px;}
.his-wrap .even dd{padding-right:110px;text-align:right;}
.his-wrap .even dd:after {position:absolute; content:''; width:4px; height:4px; top:14px; right:100px; background:#235198;}
.his-wrap .even dd strong{right:50px;}
.his-wrap .even .img{float:right;padding-left:45px;}
.his-wrap dl.last:after{display:none;}

.his-wrap .info:before{content:'';position:absolute;top:2%;left:50%;width:1px;height:96%;background:#ddd;}
.his-wrap dd strong::before{content:'';opacity:0;position:absolute;top:7px;width:19px;height:19px;background:url(his_icon.png);}
.his-wrap dl dt + dd strong:before{opacity:1}
.his-wrap .odd dl:after{left:0;}
.his-wrap .odd dl strong:before{left:-59px;}
.his-wrap .even dl:after{right:0;}
.his-wrap .even dl strong:before{right:-60px;}

.his-wrap dd strong:nth-child(-n+2):after{display:none;}

.his-wrap .tab{margin-bottom: 40px;text-align: center;}
.his-wrap .tab li{display: inline-block;margin-right: 5px;}
.his-wrap .tab li a{display: block;line-height: 45px;height: 45px;text-align: center;width: 120px;font-size: 16px;background: #f7f7f7;border: 1px solid #f7f7f7;}
.his-wrap .tab li.active a{background: #fff;border: 1px solid #333;}


.his-wrap .info>div:last-child:before {position:absolute; content:''; width:1px; height:95%; top:5%; left:50%; background:#fff;}


@media screen and (max-width: 1300px){
	.history_body span{font-size:50px;}

    .his-wrap{margin:30px 0px;}
	.his-wrap h1{font-size:22px;}
	.his-wrap h2{margin-top:5px;font-size:15px;}
	.his-wrap .info>div{margin:30px 0;}
	.his-wrap dt{top:0px;font-size:20px;}
	.his-wrap dd strong{font-size:15px;width:75px;}
	.his-wrap dd .txt{top:2px;}
	.his-wrap dd em{font-size:14px;}
	.his-wrap dd pre{font-size:14px;line-height:21px;}
	.his-wrap  .img{margin-top:30px;}
	.his-wrap  .img img{max-width:330px;}

	.his-wrap .odd dt{left:-80px;}
	.his-wrap .odd dd{padding-left:120px;}
	.his-wrap .odd .img{padding-right:30px; }
	.his-wrap .even dt{right:-80px;}
	.his-wrap .even dd{padding-right:120px;}
	.his-wrap .even .img{padding-left:30px;}

	.his-wrap dl:after{top:11px;}
	.his-wrap dd strong:before{top:5px;}
	.his-wrap dd strong:after{top:8px;}
    ;
    .his-wrap .tab{margin-bottom: 20px;}
    .his-wrap .tab li{margin-right: 2px;}
    .his-wrap .tab li a{line-height: 35px;height: 35px;text-align: center;width: auto;padding: 0 20px;font-size: 14px;}

}


@media screen and (max-width: 750px){
	.his-wrap {margin-top:10px;}
	.history_body span{text-align:left;}
	.his-wrap .info:before{left:70px}
	.his-wrap .info{padding-left:70px;}
	.his-wrap .info>div {margin:15px 0 30px;}
	.his-wrap dl{width:auto ;min-height:auto;}
	.his-wrap dd{margin-bottom:10px;}
	.his-wrap dd strong{width:55px;}
	.his-wrap .img{width:auto;margin-top:10px;}
	.his-wrap .odd dl{float:inherit;}
	.his-wrap .odd dt{left:-70px}
	.his-wrap .odd dd{padding-left:100px;}
	.his-wrap .odd dd:after { left:90px;top:8px;}
	.his-wrap .odd .img{float:inherit;padding-right:0px;padding-left:20px;text-align:left;}
	.his-wrap .even dl{float:inherit;}
	.his-wrap .even dt{right:auto;left:-70px;}
	.his-wrap .even dd{padding-right:0px;padding-left:100px;text-align:left;}
	.his-wrap .even dd:after {right:auto; left:90px;top:8px;}
	.his-wrap .even dd strong{right:auto;left:40px;}
	.his-wrap .even .img{float:inherit;padding-left:20px;}

	.his-wrap .even dl:after{right:auto;left:0}
	.his-wrap .even dd strong:before{right:auto;left:-46px;}
	.his-wrap .even dd strong:after{right:auto;left:-43px;}
}
