#body.index header 	{ position:relative; }

	#body.index .container	{ background: url(images/bg-hit.jpg) no-repeat center top fixed;  position:relative;
			  		-webkit-background-size: cover;
			  		   -moz-background-size: cover;
			 			 -o-background-size: cover;
			 			    background-size: cover;
								min-height:70vh;}

	#body.index main 	{ padding:20px 0 80px 0; position:relative; }
	#body .hero-content 		{ position: relative; top:0; width:100%;
						  left: 50%; transform: translate(-50%, 0);}


	#body .big-box 			{}
	#body .big-box .bb-txt-r	{ display: flex; float: right;   flex-direction: row; align-items: flex-end; padding-bottom: 20px; }
	#body .big-box .bb-text.small 	{ font-size: 40px; color: #fff; line-height: 0.8; font-weight: bold; }
	#body .big-box .bb-text.large 	{ font-size: 60px; color: #fff; padding-left: 15px; line-height: 0.8; font-weight: bold; }
	#body .big-box .bb-col1 	{ width:40%; height:400px; float:left; }
	#body .big-box .bb-col2 	{ width:60%; height:400px; float:left; }


	#body .small-box							{ margin-top:20px; }
	#body .small-box .sb-col1 				{ width:40%; float:left; }
	#body .small-box .sb-col1 .sb-sm1			{ width:calc(50% - 10px); float:right; margin-right:10px; background-color:#000; overflow:hidden;}
	#body .small-box .sb-col2 				{ width:60%; float:left; }
	#body .small-box .sb-col2 .sb-sm2 		{ width:calc(38% - 20px); float:left; margin-left:10px; margin-right:10px }
	#body .small-box .sb-col2 .sb-sm3 		{ width:calc(38% - 10px); float:left; margin-left:10px; }
	#body .small-box .sb-col2 .sb-sm4 		{ width:calc(24% - 20px); float:left; margin-left:20px; }
	#body .small-box .sb-col1 .sb-sm1 .what 		{ background-color:#f60; color:#fff; display:inline-block; padding:8px 10px 8px 15px; font-size:18px; position:absolute; top:0; left:0; z-index:5;}
	#body .small-box .sb-col1 .sb-sm1 .what-img 	{ height:100%; width:auto; position: relative; display: block; margin: 0 auto; }
	#body .small-box .sb-col1 .sb-sm1 .posted 	{ background-color:#f60; color:#fff; font-size:12px; font-weight:normal; text-align:center; width:100%; padding:5px; position:absolute; bottom:0; z-index:5; }

	#body .small-box .sb-col2 .sb-sm2>i { display:inline-block; }

	#body .small-box .sb-col1 .sb-sm1,
	#body .small-box .sb-col2 .sb-sm2,
	#body .small-box .sb-col2 .sb-sm3,
	#body .small-box .sb-col2 .sb-sm4 	{ height:150px; text-align:left; font-size:24px; font-weight:bold; line-height:1; padding:10px 0 0 15px; color:#fff;  transition: all 0.3s ease-out;} 
	#body .small-box .sb-col1 .sb-sm1		{ padding:0; }

	#body .small-box .sb-col1 .sb-sm1:hover,
	#body .small-box .sb-col2 .sb-sm2:hover,
	#body .small-box .sb-col2 .sb-sm3:hover,
	#body .small-box .sb-col2 .sb-sm4:hover 	{ cursor:pointer; color:#4798d8}


	#body .blink 				{ animation: blinker 1s linear infinite;}

	#body @keyframes blinker  {  
	  						50% { opacity: 0; }
						}


	#body.index footer 			{ position:relative; background-color:#fff;}
	#body.index footer .f-pos 	{ padding-top:20px; padding-bottom:20px; }

	#body.index .footer-col 				{ display:flex; align-items:flex-start;}
	#body.index .footer-col .fc-col1 	{ margin-right:100px; width:40%; background-color:#ececec; padding:15px; border-left:10px solid #06c;}
	#body.index .footer-col .fc-col1 h3 	{}

 	#body.index .footer-col .fc-col2 	{}
 	#body.index .footer-col .fc-col2 p 	{ font-weight:bold; margin-bottom:15px; }

	#body ul.ul-footer 		{ margin:0; padding:0; }
	#body ul.ul-footer li		{ margin:0; padding:0; display:inline-block; list-style:none; color:#333 }
	#body ul.ul-footer li	a 		{ color:#333; text-decoration:none; transition: all 0.3s ease-out; cursor:pointer; }
	#body ul.ul-footer li	a:hover	{ color:#06c; text-decoration:none; }
	#body ul.ul-footer li:before 				{  content: "|"; padding:0 10px; }
	#body ul.ul-footer li:first-child:before 	{  content: ""; padding-left:0; display:none;}


	#body ul.member-icon 			{ margin:0; padding:0; }
	#body ul.member-icon li 		{ margin:0; padding:0 15px 15px 0; list-style:none; display:inline-block; }
	#body ul.member-icon li img 	{ width:auto; height:50px; margin-bottom:10px }
	
	/* Special Announcement */
	#body .sa-top-col{
		display: none;
	    padding: 15px;
		border-left: 10px solid #002E6D;
		background-color: #ececec;
		margin-bottom: 10px;
	}
	#body .sa-bottom-col{
		display: block;
	}



    /* ==========================================================================
        Media Style
    ============================================================================= */
    @media only screen and (max-width:1024px) {
	#body.index main 	{ padding-top:0;}

	#body .big-box .bb-txt-r	{ flex-direction: column; padding-bottom: 10px; }
	#body .big-box .bb-text.small 	{ font-size: 20px; color: #fff; line-height: 1.4; }
	#body .big-box .bb-text.large 	{ font-size: 30px; color: #fff; padding-left: 0px; line-height: 1; }

	#body .small-box .sb-col1 				{ width:25%; }
	#body .small-box .sb-col2 				{ width:75%; }
	#body .small-box .sb-col1 .sb-sm1			{ width:calc(100% - 8px); margin-right:8px; }
	#body .small-box .sb-col2 .sb-sm2 		{ width:calc(36% - 16px); margin-left:8px; margin-right:8px }
	#body .small-box .sb-col2 .sb-sm3 		{ width:calc(36% - 8px); margin-left:8px; }
	#body .small-box .sb-col2 .sb-sm4 		{ width:calc(28% - 16px); margin-left:16px; }

	#body .small-box .sb-col1 .sb-sm1,
	#body .small-box .sb-col2 .sb-sm2,
	#body .small-box .sb-col2 .sb-sm3,
	#body .small-box .sb-col2 .sb-sm4 			{ font-size:22px; }
	#body .small-box .sb-col1 .sb-sm1 .what-img 	{ text-align:right; transform: none; float:right;}

	#body .small-box .sb-col1 .sb-sm1 .what 		{ font-size:16px;}

	#body.index .footer-col 				{ display:block; align-items:flex-start;}
	#body.index .footer-col .fc-col1 	{ width: 100%; margin-bottom:50px}
	
	#body .sa-top-col{
		display: block;
	}
	#body .sa-bottom-col{
		display: none;
	}

    }


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
	#body .big-box .bb-txt-r	{ flex-direction: column; padding-bottom: 10px; }
	#body .big-box .bb-text.small 	{ font-size: 25px; color: #fff; line-height: 1.4; }
	#body .big-box .bb-text.large 	{ font-size: 40px; color: #fff; padding-left: 0px; line-height: 1; }

    #body .big-box .bb-col1,
    #body .big-box .bb-col2,  
    #body #b1.esbanner.fixh100 { height:200px; }

	#body .small-box .sb-col1 .sb-sm1,
	#body .small-box .sb-col2 .sb-sm2,
	#body .small-box .sb-col2 .sb-sm3,
	#body .small-box .sb-col2 .sb-sm4 		{ font-size:18px; }

	#body .small-box .sb-col2 .sb-sm2 		{ width:calc(36% - 10px); margin-left:5px; margin-right:5px }
	#body .small-box .sb-col2 .sb-sm3 		{ width:calc(36% - 5px); margin-left:5px; }
	#body .small-box .sb-col2 .sb-sm4 		{ width:calc(28% - 10px); margin-left:10px; }
	}




    @media only screen and (min-device-width: 768px)  and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    #body .big-box .bb-col1,
    #body .big-box .bb-col2,  
	#body .big-box .bb-txt-r	{ flex-direction: row; padding-bottom: 10px; }
	#body .big-box .bb-text.small 	{ font-size: 25px; color: #fff; line-height: 1.2; }
	#body .big-box .bb-text.large 	{ font-size: 40px; color: #fff; padding-left: 15px; line-height: 1; }
    #body #b1.esbanner.fixh100 { height:280px; }
    }

    @media only screen and (max-width:767px) {
	#body.index main 	{ padding-top:0; overflow:hidden; width:100%;}

	#body .big-box .bb-col1 	{ display:none;}
	#body .big-box .bb-col2 	{ width:100%; height:200px; float:none; }
	#body .big-box .bb-txt-r	{ flex-direction: column; padding-bottom: 10px; }
	#body .big-box .bb-text.small 	{ font-size: 20px; color: #fff; line-height: 1.4; }
	#body .big-box .bb-text.large 	{ font-size: 30px; color: #fff; padding-left: 0px; line-height: 1; }


	#body .small-box .sb-col1 					{ width:100%; }
	#body .small-box .sb-col2 					{ width:100%; }
	#body .small-box .sb-col1 .sb-sm1 .what-img 	{ width:100%; height:auto;}
	#body .small-box .sb-col1 .sb-sm1				{ width:100%; }

	#body .small-box .sb-col1 .sb-sm1 { height:auto; margin-right:0; margin-left:0; margin-bottom:20px;  }

	#body .small-box .sb-col2 .sb-sm2 		{ width:calc(50% - 8px); margin-left:0; margin-right:8px }
	#body .small-box .sb-col2 .sb-sm3 		{ width:calc(50% - 8px); margin-left:8px; }
	#body .small-box .sb-col2 .sb-sm4 		{ width:calc(50% - 8px); margin-left:0px; margin-top:16px }

	#body .small-box .sb-col1 .sb-sm1 .what 		{ font-size: 20px;}
	#body .small-box .sb-col1 .sb-sm1 .posted 	{ font-size: 14px;}

	#body .small-box { margin-top:40px; }

	}