@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700');

/*common css*/
	*{box-sizing:border-box}
    body,ul,li,h1,h2,h3,p,figure{margin:0;padding:0}
	body{font-family: 'Roboto', sans-serif, Arial, Tahoma , Geneva, Verdana;}
	body{background:#fafafa}
	li{list-style:none}
	a{text-decoration:none;display:block}
	.left{float:left}
	.right{float:right}
	.clear{clear:both}
	input,.textarea:focus{outline:none}
	input:focus::-webkit-input-placeholder { color:transparent; }
	input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
	input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
	input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
	.ellipsis{max-height:50px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /* 라인수 */-webkit-box-orient: vertical;word-wrap:break-word;}

	#top_button{position:fixed;right:50%;bottom:400px;margin-right:-314px;color:#bbbbbb;font-size:16px;z-index:999;font-weight:bold;text-align:center;cursor:pointer;opacity:0}
	#top_button i{color:#bbbbbb;font-size:30px;}

/*--clock--*/
	.clock-wrapper{position:absolute;bottom:50px;right:0px;color:#fff;font-weight:300}
	.clockAPM{font-size:12px; margin-right:5px;}
	.clockTZ{font-size:12px;}
	.clockTime{font-size:25px;width:64px;line-height:26px}
	.clockDate{font-size:10px;}
/*--section--*/
	.section_inner{position:relative;}
	.section_inner li{float:left}
	.section_inner>h1{font-size: 22px;font-weight: 100;font-family:'Cinzel', serif;color:#6d6d6d;}
	.section_inner,header,#category,.page_name,#article_wrap,.sub_nav_inner,#search{width:1160px;margin:auto;}
	.section_inner iframe{max-width:100%}
	
	#article a {display:inline;}
	#header_wrap{height:210px;background-color:#002a3a;}

	header{position:absolute;padding-top:100px;left:50%;margin-left:-576px}
	nav>ul>li a{color:#fff}
	nav>ul>li{float:left;;font-size:16px;margin:1px 26px;padding-top:10px}
	nav>ul>li:nth-child(4){margin-right:300px}
	nav>ul>li:last-child{margin-right:148px}
	nav .li a{position:relative}
	nav .li a:before {content:'';position:absolute;left:0;bottom:-6px;background:#006bbe;width:0;height:2.6px;transition:all .2s ease-in}
	nav .li a:hover:before{width:100%}
	nav .on a:before{width:100%}
	
	#web_menu{height:40px}
	#logo{position:absolute;left:50%;margin-left:-150px;margin-top:-70px;width:291px;height:154px;z-index:999;}
		
/*--login_button--*/
	#login {position:absolute;right:0;bottom:2px;margin-right:0;z-index:990}
	#login>a{display:inline-block;position:relative;font-size:14px;color:#006bbe;border:1px solid #006bbe;border-radius:2px;padding:8px 17px;margin-top:-8px;}
	#login a .ef{position:absolute; top:0; left:0; display:block;background:#006bbe;transform:scale(0,1);width:100%;height:33px;transform-origin:left;transition:all .3s ease-in}
	#login a:hover .ef{transform:scale(1,1);}
	#login a .log_text{position:relative;transition:all .3s ease-in}
	#login a:hover .log_text{color:#fff}

	#login_menu{position:absolute;right:0;top:170px;display:none;z-index:1000;}
	#login_menu li{margin-top:6px;}
	#login_menu a{width:238px;height:57px;background:#00435d;padding-top:24px;border-radius:2px;font-size:12px;text-align:center;transition:all .4s ease;color:#fff;box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.5)}
	.fa-facebook{color:#0095ff !important}
	.fa-google-plus{color:#ff0000 !important}
	#login_menu .fa{margin-right:6px;} 
	#login_menu li:hover a{background:#006bbe}	

/*--logout_button--*/
	#logout{position:absolute;right:0px;bottom:2px;margin-right:0;margin-left:30px;z-index:999}
	#logout>a{position:relative;font-size:14px;color:#fff;border:1px solid #006bbe;;background:#006bbe;border-radius:2px;padding:8px 10px;margin-top:-8px;}

	#user a{position:absolute;right:82px;top:-8px;background:#006bbe;border-radius:2px;padding:7.5px 10px ;margin:0 4px}
	#user .fa{color:#fff;}

	#user_info{display:none;position:absolute;left:-42px;top:40px;background:rgba(0,25,36,0.9);;color:#8a8a8a;padding:14px;font-size:14px;font-weight:300;width:197px;}
	#user_info p{margin-bottom:16px}
	#user_info p:last-child{margin-bottom:0px}
	#user_info i{float:left;font-size:26px;margin-right:16px;line-height:20px}
	#user_info .active i{color:#fff}
	#user_info .active{color:#fff}
	.my_ticket a{text-align: center; color: #0090ff; border: 1px solid #0090ff; border-radius: 2px; padding: 8px 0;}

/*--sub_nav--*/
	#sub_nav_wrap{border-bottom:1px solid #cccccc;}
	#sub_nav{width:1160px;margin:auto}
	#sub_nav li{float:left;margin:34px 50px 28px 0}
	#sub_nav a{color:#bbbbbb;font-size:20px;font-weight:400;transition:all .4s ease}
	#sub_nav a:hover{color:#006bee;}
	#sub_nav .active{color:#006bee;}

/*--footer--*/
	footer{position:relative;background-color:#fafafa;width:100%;padding-top:76px;padding-bottom:160px}
	#privacy li a{margin-right:38px;color:#bbbbbb;font-size:13px;font-weight:500;transition:all .5s ease}
	#privacy li a:hover, #privacy li a.on{color:#002A3A}
	#sns{float:right;margin-bottom:10px}
	#sns .fa{font-size:30px;margin-left:20px;transition:all .5s ease}
	#sns li :hover .fa{color:#002A3A}
	#imc{border-top:1px solid #cccccc;padding-top:30px;}
	#imc p{color:#8a8a8a;font-size:12px;padding:10px 0 0 60px}
			
	#pc_view{display:none;position:absolute;bottom:-100px;left:50%;margin-left:-150px;}
	#pc_view a{width:300px;}
	#pc_view p{text-align:center;}
				
/*--ghost_button--*/
	.ghost_button a{position:relative;display:inline-block;border:1px solid #bbbbbb;border-radius:2px;padding:10px 28px;transition:all .2s ease-in-out}
	.ghost_button .button_text{font-size:13px;color:#bbbbbb;margin:0 16px; cursor:pointer;}
	.fa{color:#bbbbbb;vertical-align:-1px}
	.ghost_button a:hover{border:1px solid #006bbe;box-shadow:1px 1px 1px 0px rgba(50, 50, 50, 0.2)}
	.ghost_button a:hover .button_text{color:#006bbe}
	.ghost_button a:hover .fa{color:#006bbe}
			
/*--box--*/
	figure{position:relative;height:215px;background-color:#333366;border-radius:2px 2px 0 0;overflow:hidden}
	figure img{position:absolute;left:50%;margin-left:-300px}
	.figure_read{position:absolute;left:0;top:0;width:100%;background:rgba(0,0,0,0.4);height:215px;padding-top:105px;color:#fff;font-size:12px;text-align:center;;border-radius:2px 2px 0 0;opacity:0;transition:all .5s ease} 
	.box_inner{height:205px;padding:28px;}
	.contents{height:142px; }
	.contents h3{color:#8a8a8a;font-weight:500;margin-bottom:10px;height:50px}
	.contents p{font-size:14px;font-weight:300;color:#8a8a8a;}
	.category{font-size:12px;font-weight:900;}
	.date{font-size:12px;font-weight:300;color:#8a8a8a;}

/*--sub page common css--*/
	.page_name{clear:both;;padding-top:218px;margin:auto;color:#fff;font-weight:100;font-size:50px}
	[contenteditable=true]:empty:before {content: attr(placeholder);display: block; /* For Firefox */color:#bbbbbb}
	[contenteditable=true]:empty:focus:before {color:transparent}
/*--most view,most recent --*/
	#view_type{margin-bottom:4px}
	#view_type a{color:#8a8a8a;font-size:12px;font-weight:400;transition:all .5s ease}
	#view_type i{font-size:16px;margin-right:10px;transition:all .5s ease}
	#view_type a:hover,.view_active{color:#002a3a !important}
	#view_type a:hover i,.view_active i{color:#002a3a !important}
	#view_type a{margin-left:30px}

/*--search bar--*/
	#search {position:relative;width:100%;padding-top:59px;margin-bottom:40px;z-index:999}
	#search h1{font-size:30px;font-weight:300;color:#002a3a;}
	#search i{font-size:38px;margin-right:20px}
	#search span{color:#bbbbbb;position:relative;}
	#search span:after {content:'';position:absolute;right:-2px;height:100%;width:1.2px;background-color:#bbbbbb;opacity:1;animation:focus .7s infinite}
	@keyframes focus {
		from {opacity:0}
		to {opacity:1}
	}
	#search input{float:left;position:absolute;left:58px;z-index:9;background-color:transparent;border:none;width:77%;height:38px;top:58px;font-size:30px;font-weight:300;outline:none;color:#bbbbbb}
	#search .close{position:absolute;right:4px;top:59px;opacity:0;transition:all .3s ease}

/*--news--*/
	.patch{color:#3b5999}
	.developer{color:#34b5b7}
	.announce{color:#ea5b9e}
	.event{color:#d57d00}
	.known{color:#80bb00}

 /*--category--*/
	#category{margin-top:0px;margin-bottom:50px;;display:inline-block}
	#category a{position:relative;display:inline-block;color:#bbbbbb;font-size:16px;font-weight:400;border:1px solid #bbbbbb;border-radius:2px;padding:10px 28px;transition:all .8s ease;}
	#category li{margin-right:10px;margin-bottom:10px}
	#category .active{background:#006bbe;border:1px solid #006bbe;}
	#category .active .category_text{color:#fff}
	#category a .ef{position:absolute; top:0; left:0; display:block;background:#006bbe;opacity:0;width:100%;height:40px;transform-origin:left;transition:all .6s ease}
	#category a:hover .ef{opacity:1}
	#category a:hover{border:1px solid #006bbe;}
	#category a .category_text{position:relative;}
	#category a:hover .category_text{color:#fff}

/*--pagination--*/
	#pagination {padding:70px 0 0 0;text-align:right;}
	#pagination ul{display: inline-block}
	#pagination li {display: inline;}
	#pagination li .fa{color:#002a3a}
	#pagination li a {color:#002a3a;float: left;padding: 16px 22px;}
	#pagination li a.active { background-color: #006bbe;color: white;}
	#pagination li a:hover:not(.active) {background-color: #fff;}

/*popup_login*/
	#login_wrap{position:fixed;top:0;background:rgba(13,23,27,0.3);width:100%;height:100%;overflow:auto;z-index:99999}
	#login_popup{position:relative;width:344px;height:280px;background:#10191c;border-radius:2px;color:#fff;text-align:center;padding:36px;margin:auto;top:50%;margin-top:-140px;box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.4);animation:popup 0.4s ease;}
	@keyframes popup {
		from {transform: scale(0.8); }
		to {transform: scale(1); }
	}
	#login_popup p{font-size:22px;font-weight:300}
	#login_popup b{font-size:14px;font-weight:100}
	#popup_login_menu{margin-top:30px}
	#popup_login_menu li {margin-top: 10px;}
	#popup_login_menu li:hover a{background:#006bbe}
	#popup_login_menu a {height: 57px;background: #00435d;padding-top: 24px;border-radius: 2px;font-size: 12px;text-align: center;transition: all .4s ease;color: #fff;}
	#popup_login_menu .fa {margin-right: 6px;}
	.popup_close{position:absolute;top:10px;right:10px;cursor:pointer}
	.popup_close .fa{font-size:30px;color:#fff}


/*--responsive--*/

@media screen and (max-width:1200px) {
	.section_inner,header,.img_top,#category,.page_name{width:100%}
	header,footer,.section_inner,.page_name,.sub_nav_inner{padding-left:20px;padding-right:20px}
	header{height:182px;left:0;margin-left:0;padding-top:130px;}
	#login,#logout{position:absolute;bottom:68px;right:90px}
	#login_menu{right:90px;top:120px;z-index:999;}
	.clock-wrapper{right:90px;bottom:120px}
	#logo{margin-top:-100px;margin-left:-84px;width:170px;height:90px}
	#logo img{width:170px}
	nav>ul>li{margin:0 27px}
	nav>ul>li:nth-child(1){margin-left:0px}
	nav>ul>li:nth-child(4){margin-right:27px}
	nav{margin:auto;width:780px}
	#sub_nav{width:100%}
}
@media screen and (max-width:910px) {
	.clock-wrapper{right:20px}
	#login,#logout{right:20px;bottom:68px}
	#login_menu{right:20px;top:120px;z-index:999;}
	nav{width:100%}
	nav ul li:nth-child(1){margin-left:4%}
	nav ul li {margin:0 3.5%;}
}
@media screen and (max-width:650px) {
	#privacy li a{margin-bottom:20px}
	#sns{float:left;clear:both}
	#sns .fa{margin:30px 20px 10px 0}
	#pc_view{display:block;bottom:-130px}
}
a {cursor:pointer;}
input[type="file"] { 
	position: absolute; 
	width: 1px; 
	height: 1px; 
	padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip:rect(0,0,0,0); 
	border: 0; 
}