@keyframes topbar{
  0% {top: -80px;}
  100% {top: 0px;}
}
@-webkit-keyframes topbar{
  0% {top: -80px;}
  100% {top: 0px;}
}

@keyframes submenu{
  0% {left: -100%;}
  100% {left: 0px;}
}
@-webkit-keyframes submenu{
  0% {left: -100%;}
  100% {left: 0px;}
}

body { padding-top: 184px; }

header {   
	position: fixed;
	top: 0;
	z-index: 3;
    width: 100%; 
    height:184px;
    float: left;
    padding: 15px 0;
    color: #fff; 
	background: #274b99;
	text-align: center;
}

header a{color: #fff;}
header.open { /* 20171120 */
	display: block;
	height: 100%;
	max-height: 100%;
}

.mobile-social { position: relative; width: 320px; margin: auto; }
.mobile-social a { float: left; }
.mobile-social a img.social-line { width: 15px; height: auto; }

/* MOBILE MENU ICON */
#menu-icon{
	width:30px; height: 26px; float:left;
	margin:18px 7px 0 20px; display: none;
}
#menu-icon i{
	background:#fff; height: 3px;
	width:100%; clear: both; 
	float:left; margin: 0 0 5px 0;
	display: block;
}


/* TOP SEARCH */
#search-icon {
    float: right; cursor: pointer;
    font-size: 20px;
    margin:42px 0 0;
}
.search-frm{
	display: none;
	position: fixed; 
	z-index: 51; 
	width:100%;
	height: 185px;
	top:0;
	padding: 30px 0 0px 0; 
	background:#274b99;
	color:#fff; 
}
.search-h{ font:bold 50px/50px 'Prompt','Tahoma','Arial','sans-serif'; font-weight: 400;  letter-spacing: 0.8px;}
.search-frm form{padding:50px 0 20px; position: relative;}
.search-frm .txt{
	width: 97%;
	padding:5px 0;
	border:none; 
	background:none;
	border-bottom:1px solid #fab216; 
	/*font:bold 20px/25px 'Prompt',tahoma;*/
	font: 20px 'Prompt',tahoma;
	color:#fff; 
	letter-spacing: 1.5px; 
	outline: none;
	text-decoration: none;
}
.search-frm .txt::-webkit-input-placeholder{color:#8f9cc2; font-style: italic;}
.search-frm .txt:-moz-placolder{color:#8f9cc2; font-style: italic;}
#search-close{position: absolute; cursor: pointer; right:0px; bottom:30px; width:20px; height:20px;}
#search-close:after{transform: rotate(-45deg);}
#search-close:before{transform: rotate(45deg);}
#search-close:before,#search-close:after{
	content:' '; background:#fff; 
	width:2px; height: 100%;
	position: absolute; 
	top:0; left:50%; transition:ease-in-out 0.3s;
}
.rotate:after{transform: rotate(-90deg) !important;}
.rotate:before{transform: rotate(90deg) !important;}
.rotate:before,.rotate:after{}

.search-recommen{
	background:#fff; color:#999;
	box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.35);
	padding:40px 0 20px 0;
}
.search-recommen ul{width:33%; float: left;}
.search-recommen li{
	display: block; margin:0 0 17px 0; 
	clear: both; float: left; width:100%;
	font:21px/20px 'Prompt','Tahoma','Arial','sans-serif'; font-weight: 400;
	letter-spacing: 0.3px;
}
.search-recommen li.recommen-h{font:22px/18px 'Prompt','Tahoma','Arial','sans-serif'; font-weight: 600; margin:0 0 22px 0;}
.recommen-dot{height:30px; clear: both; float: left;  width:100%; margin: 30px 0 0;}
.search-recommen li a{color: #333333; transition:ease-in-out .2s}
.search-recommen li a:hover{text-decoration: none; color:#274b99;}




/* TOP LOGO */
#logo-nation {
    display: block;
    float: left;
    min-height: 100px; 
}
#logo-nation svg {
    width: 120px;
    display: block;
    float: left;
}
#logo-nation .st0 {fill: #FFFFFF;}
#top-left {float: left;width: 40%;}
#logo-kom {float: left; margin: 2px 0 0 50px; margin-top: 24px; }
#logo-kom svg {width: 200px; float: left;}
#logo-kom .st0 { fill: #FFFFFF;}
#logo-kom .st1 { fill: none;}
#logo-kom .st2 {fill: #231F20;}
#logo-kom .st3 {fill-rule: evenodd; clip-rule: evenodd; fill: #FFFFFF;}
#top-date {
    margin: 8px 0 0 50px;
    float: left;
    font: 14px/18px 'Prompt',tahoma;
    font-weight: 200;
 	letter-spacing: 1px;
}



/* TOP SOCIAL & LIVE BUTTON */
#top-right {
    float: right;
    width: 45%;
    color: #fff;
    position: relative;
}
#top-social {font-size: 28px; padding: 46px 0 0; float: right;}
#top-right a:hover {color: #fff; text-decoration: none;}
#top-social i {
    opacity: 0.7;
    margin: 0 5px;
    transition: ease-in-out .2s;
    -webkit-transition: ease-in -out .2s;
}
#top-social i:hover {opacity: 1; color: #fff;}
#top-right img {width: 25px; opacity: 0.7; margin: 0 5px;}
#top-right img:hover {opacity: 1;}
#top-right img, #top-right a, #top-right i {display: inline-block; vertical-align: middle;}
#top-right #live-icon {
    border: 2px solid #fff;
    height: 40px;
    width: 120px;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
    padding: 6px 0 0;
    margin: 0 0 0 10px;
}
#top-right #live-icon i {
    display: inline-block;
    position: relative;
    /*width: 23px;
    height: 23px;*/
    opacity: 1;
    margin: 0 10px 0 0;
    /*background: #fff;
    border-radius: 50%;*/
    vertical-align: top;
    font-size: 24px;
}
#top-right #live-icon i:after {
    /*content: ' '; 
	border:5px solid transparent;
    border-left-color: #333;*/
    position: absolute;
    top: 6px;
    left: 10px;
}
#top-right #live-icon span {
    display: inline-block;
    padding: 5px 0 0;
    vertical-align: top;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
}
#top-right #live-icon:hover {
	background: #fff;
	color: #274b99;
	transition: all 0.5s ease;
}

#top-live{float: right; margin: 42px 0 0 10px; margin-top: 37px; }
#true-hit {
    position: absolute;
    top: -0px;
    right: 0; display: block;
    width: 14px;
    height: 16px;
    overflow: hidden;
}
#true-hit img {width: 100%; display: block; margin: 0; opacity: 1;}



/* MENU TOP */ 
#menu-top { float: left;padding: 47px 0 0 50px; }
#menu-top ul {font-size: 0; margin: 0;}
#menu-top li {
    display: block; float: left;
    letter-spacing: 0.5px;
    font: 18px/18px 'Prompt','Tahoma','Arial','sans-serif'; font-weight: 400; 
	margin: 0 42px 0 0;
    position: relative; box-sizing: border-box;
}
#menu-top li:first-child{display: none;}
#menu-top li a {
    transition: ease-in-out .1s;
    -webkit-transition: ease-in-o ut .1s;
	padding:0 0 17px 0; display: block;
}
#menu-top li:hover,#menu-top li.active{}
#menu-top li a:hover, #menu-top li.hover a, #menu-top li.active a { 
	color: #fab216; 
	text-decoration: none; 
	outline: none; 
	border-bottom:5px solid #fab216; 
}
#menu-top li a:focus { color: unset; text-decoration: none; outline: none; border: none; }
/*
#menu-top li a:after {
    width: 100%;
    height: 5px;
    content: ' '; 
	background:#fab216;
    bottom: -22px;
    display: block;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: ease-in- out .1s;
    -webkit-transition: ease -in-out .1s;
}
*/

#menu-top li:hover .after, #menu-top li.active .after{opacity: 1;}
#menu-top li a:hover:after, #menu-top li.active a:after {opacity: 1;}
#menu-top li:last-child .sub-menu-2{left:auto; right:100%;}
.sub-menu {display: none;}
#menu-top li .sub-menu li a{border:none !important; white-space: nowrap;}
#menu-top li .sub-menu-1{
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 2;
    min-width: 185px;
    /*padding: 15px 0px;*/
    margin: 0;
    background: #fab216;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    
}
#menu-top li .sub-menu-1 li {
    display: block;
    clear: both;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}
#menu-top li .sub-menu-1 a {
    display: block;
    clear: both;
    float: left;
    width: 100%;
    padding: 10px 20px;
    padding-right: 50px;
    box-sizing: border-box;
    font: 14px/18px 'Prompt','Tahoma','Arial','sans-serif'; font-weight: 400;
    color: #333;
}
#menu-top li .sub-menu-1 a:hover {background:#8f660d; color:#fff;}
#menu-top li .sub-menu-1 a:after {display: none;}
#menu-top li .sub-menu-1 li.active a {background: #8f660d; color: #fff;}
#menu-top li .sub-menu-2 {
    position: absolute;
    left: 100%;
    background: #8f660d;
    min-width: 185px;
}
#menu-top li .sub-menu-2 a {color: #fff;}
#menu-top li .sub-menu-2 a:hover {color: #fab216 !important;}

#menu-top li .sub-menu-1 li.sub-h,
#menu-top li .sub-menu-1 li.hide-menu{
	display: none;
}

#menu-top li.have-sub2:after{
	font-family: "Ionicons";
	content:'\f3d1'; position: absolute;
	top:10px;
	right:20px; 
	opacity: 0.40; 
}


/* FIXED MENU BAR ON SCROLL DOWN */
.fixed{position:fixed; z-index: 50; height: 86px; top:0; padding: 5px 0; animation: topbar ease-in-out 1.0s;} /*height: 85px;*/
.fixed #top-left{display: none;}
.fixed #logo-text, .fixed #logo-kom, .fixed #top-date, .fixed #top-right, .fixed #true-hit{display: none;}
.fixed #logo-nation{min-height: auto; height: 75px; overflow: hidden;}
.fixed #logo-nation svg{width:75px; height: auto;}
.fixed #menu-top{padding: 28px 0 0 50px;}
.fixed #search-icon{margin: 26px 0 0;}
.fixed #menu-top li a{padding:0 0 30px 0}
.fixed #menu-top li a:hover{}
.fixed #menu-top li .sub-menu-1{top:52px;}
.fixed #menu-top li .sub-menu-1 a{padding: 10px 20px; padding-right: 50px;}






/* MOBILE & TABLET */
@media only screen and (max-width:1199px){
	header{height: 173px;}
	.fixed{height: 70px;}
	#logo-nation{margin-left:-5px;}
	#logo-nation svg{width:65px; height: auto;}
	#logo-kom{margin: 14px 0 0 20px;}
	#logo-kom svg{width:140px;}
	#top-date{margin: 12px 0 0 24px;}
	#top-right{padding: 10px 0 0;}
	#top-live{margin: 0;}
	#top-social{padding:15px 0 0; clear: both; font-size:22px;}
	#top-social i{margin: 0 0 0 5px;}
	#top-right img{margin:0 0 1px 5px; width:19px;}
	#menu-top{padding: 25px 0 0 0px; clear: both; float: left; text-align: left;}
	#menu-top li{font-size:16px; margin: 0 30px 0 0;}
	#search-icon{margin: 20px 0 0;}
	#true-hit{top:10px; right: 132px;}
	#true-hit img{margin:0; width:100%;}
	
	#menu-top li .sub-menu-1{top: 33px;}
	#menu-top li a{}
	/*#menu-top li a:hover,#menu-top li.active a{border:none;}*/
	#menu-top li a:hover,#menu-top li.active a { padding-bottom: 10px; }
	#menu-top li a:focus{color:#fff; text-decoration: none;}
	#menu-top li.active a:focus{color:#fab216;}
	#menu-top li .sub-menu-1 a:focus{color:#333; background:#fab216;}
	
	.fixed #menu-top li .sub-menu-1{top:44px;}
	
	/* FIXED MENU BAR ON SCROLL DOWN */
	.fixed #logo-nation{height:60px;}
	.fixed #logo-nation svg{width:60px;}
	.fixed #menu-top{padding: 20px 0 0 15px; clear: none;}
	.fixed #search-icon{margin: 18px 0 0;}
}

@media only screen and (max-width:990px){
	#menu-top li{font-size:14px; margin: 0 20px 0 0;}
	#search-icon{margin: 20px 0 0;}
	
	#menu-top li .sub-menu-1{top:33px;}
}

@media only screen and (max-width:767px){
	header .container {
		width:100%; box-sizing: border-box;
		padding: 0; float: left;
	}
	
	header, .fixed{height: auto;}
	
	.search-frm .txt{width:93%;}
	.search-recommen ul{width:100%; margin:0 0 25px;}
	.search-recommen li{font-size:18px; margin:0 0 15px;}
	.search-recommen li.recommen-h{margin:0 0 13px 0;}
	
	header{position: fixed; padding:10px 0px; top:0; box-sizing: border-box; z-index: 50;}
	
	#top-left{}
	#menu-icon{display:block;}
	.menu-click i{background:#fab216 !important;}
	
	#logo-nation{height:55px; min-height: auto; margin-left:0;}
	#logo-nation svg{width:55px;}
	#logo-nation #logo-text, #top-date{display: none;}
	#logo-kom{margin:12px 0 0 5px;}
	#logo-kom svg{width:110px; height: auto;}
	#top-right{width:100%; clear: both; float:left; position: static;}
	#top-right img, #top-right a, #top-right i{vertical-align: top;}
	#top-right img{height: 27px; width:auto; margin-top:2px;}
	#top-live{
		clear: both; float: left; 
		margin: 20px 0; width:100%;
		padding:0 20px;
	}
	/*#top-right{display: none;} updated : 20171120 */
	#top-right #live-icon{
		margin: 0; width:100%; box-sizing: border-box; 
		/*display: none; updated : 20171120 */
	}
	#top-social{
		clear: both; float: left; 
		position: absolute;
		bottom:0; left:0; width:100%;
		padding: 13px 0; font-size:32px;
		border-top:1px solid #93a5cc;
		/*display: none; updated : 20171120  */
		bottom: -58px; background: #274b99; /* updated : 20171120 */
	}
	
	#menu-top{
		width:100%; padding:0 0 60px 0; display: none;
		height: 300px; overflow-x: hidden; overflow-y: scroll; padding-bottom: 0px; margin-top: 10px; /* updated : 20171120 */
	}
	#menu-top li{
		width:100%; display: block; 
		clear: both; float:left; text-align: left;
		border-top:1px solid #3d5da3; border-bottom:none; /* updated : 20171120 */
	}
	#menu-top li #top-right { padding-top: 0px; } /* updated : 20171120 */
	#menu-top li #top-right a { margin: auto; } /* updated : 20171120 */
	#menu-top li:first-child{display: block;}
	#menu-top li a{
		display: block; position: relative; 
		padding: 15px 20px; box-sizing: border-box;
		/*border-top:1px solid #3d5da3; border-bottom:none; updated : 20171120*/
	}
	#menu-top li .mobile-social {
		margin-bottom: 30px;
	}
	#menu-top li .mobile-social a {
	    padding: 15px 15px 0 15px; /* updated : 20171120 */
	}
	#menu-top li .mobile-social a, #menu-top li.active .mobile-social a, #menu-top li:hover .mobile-social a i { font-size: 25px; }
	#menu-top li .mobile-social a img.social-line, #menu-top li.active .mobile-social a img.social-line, #menu-top li:hover .mobile-social a img.social-line { width: 25px; }
	#menu-top li .sub-menu-1 li { border: none; } /* updated : 20171120 */
	#menu-top li .sub-menu-2 { padding-top: 0px; } /* updated : 20171120 */
	#menu-top li a:hover, #menu-top li.active a { padding-bottom: 15px; }
	#menu-top li a, #menu-top li.active a, #menu-top li:hover a{border-bottom:none;}
	#menu-top li a:after{display: none;}
	#menu-top li.active a:before{
		background:#fab216; position: absolute; 
		left:0; top: 0; content:'';
		height: 100%; width:5px;
	}
	#menu-top li.have-sub:after{
		font-family: "Ionicons";
		content:'\f3d1'; position: absolute;
		right:20px; top:16px;
		opacity: 0.30;
	}
	#menu-top li.have-sub2:after{
		font-family: "Ionicons";
		content:'\f3d0'; position: absolute;
		right:20px; top:11px;
		opacity: 0.70;
	}
	
	#menu-top li .sub-menu-1{
		position: fixed; top:0;
		z-index: 4; width:100%;
		left:-100%;
		transition: ease-in-out .3s;
		height:99.99%; overflow-y: scroll;
	}
	#menu-top li .slide-menu{
		animation: submenu ease-in-out 0.3s; 
		left:0px;
	}
	#menu-top li .sub-menu-1 li.sub-h,
	#menu-top li .sub-menu-1 li.hide-menu{
		display: block;
	}
	#menu-top li .sub-menu-1 li.sub-h{
		width: 100%; color:#fab216; 
		padding:15px 20px; font-size: 22px;
		background: #274b99; text-align: center;
	}
	#menu-top li .sub-menu-1 li a{border:none; padding: 12px 20px;}
	#menu-top li .sub-menu-1 a:hover{background:#fab216;}
	#menu-top li .sub-menu-1 a:active{text-decoration: none; color: #fff;}
	#menu-top li .sub-menu-1 li.active{background:#8f660d;}
	#menu-top li .sub-menu-1 li.active a::before{display: none;}
	#menu-top li .sub-menu-1 li.hide-menu{
		position: absolute; top: 10px; left:20px; color:#fff;
		font-size:26px; width:20px; cursor: pointer;
	}
	
	#menu-top li .sub-menu-2{
		position: static; clear: both; 
		float: left; width:100%; background:#8f660d;
		padding:10px 20px; box-sizing: border-box;
	}
	#menu-top li .sub-menu-2 li{margin: 0; box-sizing: border-box; width:100%; border-left:none;}
	#menu-top li .sub-menu-2 li:first-child{border-top:1px solid #fff;}
	#menu-top li .sub-menu-2 a{color:#fff; padding:10px 25px !important;}
	
	#search-icon{position: absolute; top:25px; right:20px; margin: 0;}
	
	#top-right #true-hit{display: none;}
	
	a:active{text-decoration: none;}
	
}

@media only screen and (max-width:479px){	
}