@keyframes visual_effect{
    0%{transform:scale(1.15)}
    100%{transform:scale(1)}    
}
@keyframes h2_effect{
    0%{opacity:0}
    100%{opacity:1}    
}

#header{position:fixed}
.scroll_on .hsec1{background:#db5d1a}
.scroll_on  h1{filter: brightness(20)}
.center{text-align:center}

/*pc*/
@media all and (min-width:1200px) {	 
    #main{padding-bottom:100px}
     
    .s_visual{position:relative;height:320px;overflow:hidden}
    .s_visual .bg{position:absolute;width:100%;height:100%;animation:visual_effect 5s forwards;}
    .s_visual h2{position:absolute;left:0;width:100%;top:50%;text-align:center;font-size:45px;color:#fff;font-weight:500;letter-spacing:-1px;opacity:0;animation:h2_effect 1s 1s forwards;font-family:'GmarketSans'}
    
    .sub1 .s_visual .bg{background:url(/base/img/images/sub/s1_visual.jpg) no-repeat center /cover}
    .sub2 .s_visual .bg{background:url(/base/img/images/sub/s2_visual.jpg) no-repeat center /cover}
	.sub3 .s_visual .bg{background:url(/base/img/images/sub/s3_visual.jpg) no-repeat center /cover}
	.sub4 .s_visual .bg{background:url(/base/img/images/sub/s4_visual.jpg) no-repeat center /cover}
    
    .s_cate{position:relative;margin:70px 0 50px}
    .s_cate ul{display:flex;justify-content: center}    
    .s_cate li{text-align:center;min-width:130px;border:1px solid #ddd;margin-left:-1px}
    .s_cate li a{display:block;font-size:18px;color:#333;padding:0 50px;height:50px;line-height:50px}
    .s_cate li.on a{background:#e85a0f !important;color:#fff;border:1px solid #e85a0f}
    .s_cate li:hover a{background:#f5f5f5}    
    
	.h3_group{margin:60px 0;text-align:center}
    .h3_group .tit{font-size:35px;font-weight:normal}
    .h3_group .desc{font-size:19px;color:#777;margin:15px 0}

    .s_slogan{margin:60px 0;text-align:center}
    .s_slogan .tit{font-size:35px;color:#333;letter-spacing:-1px}
    .s_slogan .desc{font-size:18px;color:#777;font-weight:300;letter-spacing:-1px;margin:15px 0}
    
    .s_table table{width:100%;border-collapse:collapse;border-top:3px solid #e85a0f;margin:60px 0}
    .s_table th,
    .s_table td{padding:15px 30px;border:1px solid #ddd;border-width:1px 0}
    .s_table th{background:#f5f5f5;font-weight:500;text-align:left}

	.s_img{margin:50px 0;text-align:center}
    
    .p{font-size:19px;color:#555;letter-spacing:-1px;font-weight:300}
    
    /*sub page*/
    .sub1a .sec1{display:flex;justify-content:space-between;margin:100px auto}
    .sub1a .sec1 > div{flex:1}
    .sub1a .sec1 .photo{max-width:600px}
    .sub1a .sec1 .con{flex:1;padding-left:80px}
    .sub1a .sec1 .con .slogan{font-size:35px;color:#333;letter-spacing:-1px}
    .sub1a .sec1 .con .p{margin:50px 0 100px}
    .sub1a .sec1 .con .ceo{text-align:right;font-size:18px;letter-spacing:-1px;font-weight:300}
    .sub1a .sec1 .con .ceo em{font-size:30px;font-weight:400;margin-left:20px}
    
	
    .sub1c .sec1{margin:100px auto}
    .sub1c .historyG{display:flex;justify-content:space-between;max-width:1200px;margin:50px auto}
    .sub1c .historyG .yearG{width:28%}
    .sub1c .historyG .yearG em{display:block;border:2px solid #e85a0f;line-height:40px;border-radius:40px;width:80%;text-align:center;color:#e85a0f}
    .sub1c .historyG .monthG{flex:1;border-top:2px solid #e85a0f}
    .sub1c .historyG .monthG .list{display:flex;padding:20px 20px;border-bottom:1px solid #ddd}
    .sub1c .historyG .monthG .list .year{margin-right:30px;font-weight:500}
    .sub1c .historyG .monthG .list .info{color:#555}

	.root_daum_roughmap_landing{width:100% !important}
}

    

/*mobile*/
@media all and (max-width:1199px) {   
    #main{padding-bottom:50px}
     
    .s_visual{position:relative;height:200px;overflow:hidden}
    .s_visual .bg{position:absolute;width:100%;height:100%;animation:visual_effect 5s forwards;}
    .s_visual h2{position:absolute;left:0;width:100%;top:45%;text-align:center;font-size:25px;color:#fff;font-weight:500;opacity:0;animation:h2_effect 1s 1s forwards}
    
    .sub1 .s_visual .bg{background:url(/base/img/images/sub/s1_visual.jpg) no-repeat center /cover}
    .sub2 .s_visual .bg{background:url(/base/img/images/sub/s2_visual.jpg) no-repeat center /cover}
	.sub3 .s_visual .bg{background:url(/base/img/images/sub/s3_visual.jpg) no-repeat center /cover}
	.sub4 .s_visual .bg{background:url(/base/img/images/sub/s4_visual.jpg) no-repeat center /cover}

    
    .s_cate{position:relative;margin:40px 0}
    .s_cate ul{display:flex;justify-content: center}    
    .s_cate li{text-align:center;min-width:65px;border:1px solid #ddd;margin-left:-1px}
    .s_cate li a{;display:flex;align-items: center;justify-content: center;font-size:12px;padding:0 5px;height:40px;line-height:1}
    .s_cate li.on a{background:#e85a0f !important;color:#fff;border:1px solid #e85a0f}
    .s_cate li:hover a{background:#f5f5f5}

	.s_cate.row2 ul{flex-wrap:wrap}
	.s_cate.row2 li{width:33.33%;margin-top:-1px}
	.s_cate.row2 a{height:30px}
	   
	.h3_group{margin:30px 0;text-align:center}
    .h3_group .tit{font-size:20px;font-weight:normal}
    .h3_group .desc{font-size:14px;color:#777;margin:10px 0}
    
    .s_slogan{margin:30px 0;text-align:center}
    .s_slogan .tit{font-size:20px}
    .s_slogan .desc{font-size:14px;color:#777;margin:10px 0}
    
    .s_table table{width:100%;border-collapse:collapse;border-top:2px solid #e85a0f;margin:30px 0}
    .s_table th,
    .s_table td{padding:5px 15px;border:1px solid #ddd;border-width:1px 0}
    .s_table th{background:#f5f5f5;font-weight:500;text-align:left}

    .s_img{margin:25px 0;text-align:center}

    .p{font-size:13px;color:#777}
    
    /*sub page*/
    .sub1a .sec1{margin:50px auto}
    .sub1a .sec1 > div{}
    .sub1a .sec1 .photo{max-width:600px}
    .sub1a .sec1 .con{}
    .sub1a .sec1 .con .slogan{font-size:20px;margin:15px 0 25px}
    .sub1a .sec1 .con .ceo{margin-top:50px;text-align:right}
    .sub1a .sec1 .con .ceo em{font-size:18px;font-weight:400;margin-left:10px}


	.sub1c .sec1{margin:50px auto}
    .sub1c .historyG{display:flex;justify-content:space-between;max-width:1200px;margin:30px auto}
    .sub1c .historyG .yearG{width:30%}
    .sub1c .historyG .yearG em{display:block;border:2px solid #e85a0f;line-height:30px;border-radius:30px;width:90%;text-align:center;color:#e85a0f}
    .sub1c .historyG .monthG{flex:1;border-top:2px solid #e85a0f}
    .sub1c .historyG .monthG .list{display:flex;padding:10px 10px;border-bottom:1px solid #ddd}
    .sub1c .historyG .monthG .list .year{margin-right:10px;font-weight:500}
    .sub1c .historyG .monthG .list .info{color:#555}


	.root_daum_roughmap_landing{width:100% !important}
	.root_daum_roughmap .wrap_map{height:350px !important}
    

}