/*

CORE CSS 
Author: Hao Nhien Nguyen
Licensed to: Touch Pride Pty Ltd

*/

/*-----------------------------------------------------------------------------------------------*/

/* Begin Common Section */

@import url(https://fonts.googleapis.com/css?family=Barlow|Montserrat|Saira+Stencil+One);
@import url('https://fonts.googleapis.com/css?family=Lato:300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

*{
	scrollbar-width: thin;
	scrollbar-color: #7777 #eee3;
}

*:focus {
    outline: none;
}


body
{
	padding:0;
	margin:0;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.bgFixed
{
	background-size:cover;
	background-attachment:fixed;
}

input[type=text],input[type=password],input[type=email],input[type=number],input[type=submit]
{
	
    -webkit-appearance: none;
}

button
{
    -webkit-appearance: none;
}
.bodySection
{
	padding:0 60px;
}
.lb-mobile-light
{
	height:48px;
	padding:15px 10px;
}
.shadow1
{
	box-shadow:0 0 5px #3336;
}


.AllBlur
{
	transition:0.3s;
	/*filter:blur(5px);
	-webbkit-filter:blur(5px);*/

}

.padded-dropcap {
  padding-left: 5px;
  padding-right: 10px;
  float: left;
  position: relative;
  top: -0.25em;
  margin-bottom: -0.5em;
  margin-left: -6px;
  margin-right: 2px;
  font-size: 100px;
}

/* End Common Section */


/*-----------------------------------------------------------------------------------------------*/


/* Begin Text Section */

.ff-lat
{
	font-family: 'Lato';
}

.ff-sui
{
	font-family: 'IBM Plex Sans',sans-serif;
}

.ff-osa
{
	font-family: "Open Sans";
}

.fs-1
{
	font-size:8pt;
}

.fs-2
{
	font-size:10pt;
}

.fs-3
{
	font-size:12pt;
}

.fs-4
{
	font-size:14pt;
}

.fs-5
{
	font-size:16pt;
}

.fs-6
{
	font-size:20pt;
}

.fs-7
{
	font-size:24pt;
}

.fs-8
{
	font-size:30pt;
}

.fs-9
{
	font-size:36pt;
}

.fs-10
{
	font-size:44pt;
}

.fs-v1
{
	font-size:1vw;
}

.fs-v2
{
	font-size:1.2vw;
}

.fs-v3
{
	font-size:1.6vw;
}
.fw-0
{
	font-weight: 200;
}
.fw-1
{
	font-weight: 300;
}

.fw-2
{
	font-weight:400;
}

.fw-3
{
	font-weight:500;
}

.lsp-1
{
	letter-spacing: 0.14em;
}

.tdec-0
{
	text-decoration:none;
}

.ta-c
{
	text-align:center;
}

.ta-l
{
	text-align:left;
}

.ta-r
{
	text-align:right;
}

/* End Text Section */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Float */

.fl
{
	float:left;
}

.fr
{
	float:right;
}

/* End Float */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Row */

.row:after {
	content: "";
	display: block;
	clear: both;
}

.row-1
{
	
}

/* End Row */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Col */

.col-1
{
	width: 100%;
}

.col-2
{
	width:50%;
}

.col-3
{
	width:33.33%;
}

.col-3m
{
	width:33.34%;
}

.col-3f
{
	width:66.67%;
}

.col-4
{
	width:25%;
}

.col-4f
{
	width:75%;
}

.col-5
{
	width:20%;
}


.col-5b
{
	width:40%;
}

.col-6
{
	width:16.665%;
}

.col-7
{
	width:14.285%;
}

.col-8
{
	width:12.5%;
}

.col-9
{
	widtht:11.11%;
}

.col-10
{
	width:10%;
}

.col-left-1
{
	width:300px;
}

.col-right-1
{
	width:calc(100% - 300px);
}

.col-right-1c
{
	width:calc(100% - 301px);
}

.col-mid-1
{
	width:calc(100% - 600px);
}

.col-mid-1c
{
	width:calc(100% - 602px);
}

.col-left-2
{
	width:200px;
}

.col-mid-2
{
	width:calc(100% - 400px);
}

.col-mid-2c
{
	width:calc(100% - 402px);
}

.col-right-2
{
	width:calc(100% - 200px);
}

.col-right-2c
{
	width:calc(100% - 201px);
}

.nav-col-1
{
	width:420px;
}

.col-4m
{
	width:25%;
}

/* End Col */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Positions */

.abso
{
	position:absolute;
}

.stky
{
	position:sticky;
}

.tl-0
{
	top:0;
	left:0;
}

.tr-0
{
	top:0;
	right:0;
}

.bl-0
{
	bottom;:0;
	left:0;
}

.br-0
{
	bottom:0;
	right:0;
}

/* End Positions */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Sizing */

.sq80
{
	width:80px;
	height:80px;
}

.sq60
{
	width:60px;
	height:60px;
}

.w80
{
	width: 80%;
}

.w100
{
	width: 100%;
}
.mw480p
{
	max-width: 480px;
}
.w50
{
	width: 50%;
}

.w25
{
	width: 25%;
}

.w360p
{
	width:360px;
}

/* End Sizing */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Border */

.border-0
{
	border:none;
}

.border-r0
{
	border-radius:0;
}

.border-r4
{
	border-radius:4px;
}

.border-r8
{
	border-radius:8px;
}

.border-r16
{
	border-radius:16px;
}

.border-r32
{
	border-radius:32px;
}

.border-rq
{
	border-radius:12%;
}

.border-rs
{
	border-radius:25%;
}

.border-rf
{
	border-radius:50%;
}


/* End Border */

/*-----------------------------------------------------------------------------------------------*/

/* Begin List */

.ls-0
{
	list-style:none;
	padding:0;
	margin:0;
}

/* End List */

/*-----------------------------------------------------------------------------------------------*/

/* Begin BG */

.bg-nav
{
	background: #fffc;
}

.bg-tdark-1
{
	background: #111d;
}

.bg-dark-1
{
	background: #333;
}

.bg-darkSky-1
{
	background: #234;
}

.bg-sky-1
{
	background: #48e;
}

.bg-black
{
	background: #000;
}

.bg-white
{
	background: #fff;
}

.bg-bright
{
	background: #eee;
}

.bg-glass
{
	background: #0000;
}

/* End BG */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Color */

.co-black
{
	color:#000;
}

.co-dark
{
	color:#555;
}

.co-darkSky-1
{
	color:#234;
}

.co-gray
{
	color:#999;
}

.co-silver
{
	color;#bbb;
}

.co-light
{
	color:#eee;
}

/* End Color */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Button */

.nav-noti-count
{
	position: absolute;
	top: 6px;
	left: 55%;
	background: #c56;
	color: #fff;
	padding: 0 2px;
	border-radius: 4px;
	line-height: 16px;
}

.btn
{
	cursor:pointer;
	text-align:center;
	transition:0.3s;
}

.btn-basic
{
	padding:10px;
}

.btn-thin
{
	padding:12px 15px;
}


.btn-lar
{
	padding:18px 20px;
}

.btn-opa
{
	opacity:1;
	transition:0.3s;
}

.btn-opa:hover
{
	opacity:0.8;
}

.btn-opa:active
{
	opacity:0.5;
}

.btn-opa2
{
	opacity:0;
	transition:0.3s;
}

.btn-opa2:hover
{
	opacity:0.8;
}

.btn-opa2:active
{
	opacity:0.5;
}

.btn-tdark-1
{
	background:#0000;
	color:#888;
	opacity:1;
}

.btn-tdark-1:hover
{
	background:#c56;
	color:#eee;
}

.btn-tdark-1:active
{
	background:#c56;
	color:#eee;
	opacity:0.5;
	
}

.btn-tdark-1s
{
	background:#b45;
	color:#fff;
}

.btn-tab-1
{
	color:#777;
	border-bottom:solid 1px #0000;
	display:inline-block;
	margin:0 10px;
	min-width:51%;
}

.btn-tab-1:hover
{
	border-color:#4ad;
}

.btn-tab-1s
{
	color:#555;
	border-color:#4ad;
}

.btn-nav-1
{
	display:block;
	line-height:18px;
	padding:15px;
	text-align:center;
	transition: 0.3s;
}

.navfbtn
{
	background:#0000;
	height:60px;
	width:60px;
	margin-top:0;
	border:none;
	font-size:14pt;
	margin-left:-60px;
}

.mobileS
{
	display:none;
}

.headnav
{
	transition:1s;
}

/* End Button */

/*-----------------------------------------------------------------------------------------------*/

/* Begin TextBox */

.navform
{

	width:100%;
	max-width:500px;
	transition:0.5s;
}

.navfbox
{
	padding-top:0;
	padding-bottom:0;
	padding-left:15px;
	padding-right:30px;
	width:20%;
	min-width:250px;
	max-width:400px;
	border-radius: 18px;
	border: 1px solid #ccc0;
	background: #ccc7;
	height:32px;
	margin:14px;
	font-size:12pt;
	transition:1.2s;
}

.navfbox:focus
{
	width:100%;
	background: #cccc;
	border-color: #cccc;
}

.inp-mask1
{
	transition: 0.5s;
	background: #eee;
	display: inline-block;
	width: 240px;
	height: 240px;
	font-size: 64pt;
	padding-top: 80px;
	opacity:1;
}

.inp-mask1:hover
{
	opacity:0.8;
}

.inp-mask1:active
{
	opacity:0.6;
}


.inp-mask1c
{
	transition: 0.5s;
	background: #eee;
	display: inline-block;
	width: 240px;
	height: 240px;
	font-size: 64pt;
	padding-top: 80px;
	opacity:0.5;
}

.inp-mask1b
{
	opacity:0;
}

.inp-mask1b:hover
{
	opacity:1;
}

.inp-mask1b:active
{
	opacity:0.7;
}

.inp-mask2c
{
	transition: 0.5s;
	background: #eee;
	display: inline-block;
	width: 120px;
	height: 120px;
	font-size: 32pt;
	padding-top: 30px;
	opacity:0.5;
}

.tf-tlight
{
	
}

.tf-tlight-1
{
	background:#fff3;
	border: 1px solid #ddd3;
	overflow:hidden;
	padding: 15px 10px;
	color:#444;
	text-align:center;
	transition:0.3s;
}

.tf-tlight-1:focus
{
	background:#fffa;
}

.bd-tlight-2
{
	display:inline-block;
	border:1px solid #ddd;
}
.tf-tlight-2
{
	background:#fff;
	border: 1px solid #ddd;
	overflow:hidden;
	padding: 15px 10px;
	color:#555;
	transition:0.3s;
	
	height:48px;
}

.tf-tlight-2p
{
	border:none;
}

.tf-tlight-2:focus
{
	background:#eee;
	color:#333;
}



.tf-sp-1
{
	background:linear-gradient(to right, #0000 20%,#0006 50%,#0000 80%);
	border: 1px solid #0000;
	border-radius:0px;
	overflow:hidden;
	padding: 15px 10px;
	color:#eee;
	text-align:center;
	transition:0.5s;
}

.tf-sp-1:focus
{
	border-radius: 30px;
	background:#0006;
	border: 1px solid #0009;
	color:#eee;
}

.tf-sp-2
{
	background:#ddd2;
	border: 1px solid #ddd5;
	border-radius:0px;
	overflow:hidden;
	padding: 10px 10px;
	color:#eee;
	text-align:center;
	transition:0.5s;
	width:200px;
	border-radius:4px;
}

.tf-sp-2:focus
{
	background:#ddda;
	border: 1px solid #dddb;
	color:#fff;
	width:300px;
}

.tf-sp-3
{
	background:#ddd0;
	border: 1px solid #ddd0;
	border-bottom: 1px solid #ddd5;
	border-radius:0px;
	overflow:hidden;
	padding: 10px 5px;
	color:#eee;
	text-align:center;
	width:160px;
	transition:0.5s;
}

.tf-sp-3:focus
{
	border-radius:4px;
	background:#ddda;
	border-bottom: 1px solid #dddb;
	color:#fff;
	width:300px;
}

/* End TextBox */


/*-----------------------------------------------------------------------------------------------*/

/* Begin NavBar */

.backBlur
{
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
}
.col-nav
{
	width:100px;
}
.navbar
{
	display:block;
	position: sticky;
	z-index:9999;
	top:0;
	width: 100%;
	padding:0 60px;
	overflow-y:visible;
	
}


.nav-more
{
	background: #fffc;
	transition: 1s;
	overflow-y:auto;
	position:fixed;
	top: 60px;
	width: 300px;
	
}

.nav-more-H
{
	right: -300px;
	
}

.nav-more-S
{
	right: 60px;
	
}

.nav-more-item
{
	height:45px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.nav-more-item a
{
	padding:10px;
}

.nav-more-item a:link,.nav-more-item a:visited
{
	color:inherit;
}


.nav-more-item2, .nav-more-item2 a
{
	color:#777;
	background:#eef0;
}

.nav-more-item2 a:active
{
	color:#555;
	background:#bbc4;
}

.nav-more-item2 a:hover
{
	color:#555;
	background:#bbc8;
}
.nav-Btn-1
{
	text-decoration:none;
	padding:10px 0;
	width:100%;
	height:60px;
	color:#666;
	background:#0000;
	font-family: 'IBM Plex Sans',sans-serif;
	font-size:10pt;
	line-height:16pt;
	font-weight:1000;
}



.nav-Btn-1:hover, .nav-Btn-1:active, .nav-Btn-1-S
{
	background:#0000;
	color:#58e;
}
.navbar-1
{
	height:60px;
	border-top: 1px solid #ccc5;
	border-bottom: 1px solid #ccc5;
	

}

.nav-Btn-1-A, .nav-Btn-1-A:hover
{
	color:#fff;
	background:#58e;
}

.navContents
{
	/*min-width:1280px;*/
	transition:1s;
}

.navitem-1
{
	height:100%;
	text-align:center;
	position: relative;
}

.navitem-2
{
	height:100%;
	width:100px;
	text-align:center;
	
}

.navsepv
{
	background-color: #8888;

	width: 1px;

	margin: 14px 0;

	height: 24px;
}

.nav_icon
{
	width:24px;
	height:24px;
	margin-top: -2px;
	margin-right: 10px;
}

.nav_ava
{
	width:32px;
	height:32px;
	border-radius:20px;
	background-position: center;
	background-size: cover;
	margin-top: -6px;
}

.eava {

    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-position: center;
    background-size: cover;
    margin:0 10px;
}

.notif-item
{

}

.notif-1
{
	background:#e339;
	color:#aaa;
	opacity:1;
}

.notif-1:hover
{
	color:#fff;
	background:#e339;
	opacity:0.8;
}

.notif-1:active
{
	background:#e339;
	opacity:0.5;
}

/* End NavBar */


/*-----------------------------------------------------------------------------------------------*/

/* Begin aside */



/* End aside */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Modal */

.modal
{
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
	z-index:181293;
	background-color: #333d;
	top:0;
	bottom:0;
	left:0;
	right:0;
	position:fixed;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
}

.modalSpace
{
	width:100%;
	height:100%;
	z-index:181294;
}

.modalBox
{
	position:absolute;
	z-index:181295;
	width:100%;
	height:100%;
}

.modalBoxS1
{
	
	width:100%;
	height:100%;
}

.modalBoxS1b
{
	overflow:auto;
	background:#fff;
	width:400px;
	height:100%;
}

.modalBoxS2
{
	background:#fff;
	top: 10%; 
	width:400px;
	height:400px;
}



.modal-box-left {
	width:50%;
	height:100%;
	position:absolute;
	left:0;
	padding:20px;
}

.modal-box-right {
    width:50%;
	height:100%;
	position:absolute;
	right:0;
	padding:20px;
 }

/* End Modal */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Modal */

.footer {
    width: 100%;
    padding-top: 16px;
	padding-bottom: 16px;
    background: #135;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 10pt;

}

.exWarn {

    position: absolute;
    right: 60px;
    top: 30px;
    opacity: 0.5;

}

/* End Modal */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Radio */

/* The container */
.rBtn-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.rBtn-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.rBtn-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.rBtn-container:hover input ~ .rBtn-checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.rBtn-container input:checked ~ .rBtn-checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.rBtn-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.rBtn-container input:checked ~ .rBtn-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.rBtn-container .rBtn-checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* End Radio */

/*-----------------------------------------------------------------------------------------------*/

/* Begin Switch */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #3d9;
}

input:focus + .slider {
  box-shadow: 0 0 1px #3d9;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 120px;
  top: -10px;
  opacity:0.8;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
 font-size:8pt;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.tooltiptext1
{
	left:0;
}

.tooltiptext2
{
	right:0;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext  {
  visibility: visible;
}

.nav_not:hover .nav_ava
{
	filter:invert(100%);
}

/*   */

.slideshow
{
	overflow:hidden;
}

.slide-thumb
{
	height: 200px;
	width:25%;
	/*border: 1px solid #fff;*/
	color:#eee;
	background-position: top center;
	background-size: cover;
	position:relative;
}

.slide-thumba
{
	background-color:rgba(0,0,0,0);
	color: transparent;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	padding: 20px 10px;
	transition:0.5s;
	text-decoration:none
}

.slide-thumba:hover
{
	background-color:rgba(0.1,0.1,0.1,0.7);
	color: #fafafa;
}

.slide-item
{
	max-height:500px;
	overflow:hidden;
}

.slide-item-mimg
{
	height:500px;
}

.slide-item-mimg1
{
	height:500px;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}

.slide-item-mimg2
{
	height:500px;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}

.slide-item-mtext
{
	padding:100px 50px;
	text-align:justify;
	text-justify:inter-character;
}

.fhDiv
{
	padding-bottom:50px;
}

/** Flip **/

.flipBox
{
	perspective:1000px;
	-webkit-perspective:1000px;
}

.flipBody
{
	transition:1s;
	position:relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.flipSide
{
	position: absolute;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	left:0;
	width:100%;
	
	border-radius:4px;
	overflow:hidden;
}

.flipBack
{
	transform:rotateY(180deg);
}

/* Thread */

.threadStat-1
{
	bottom:0;
	left:0;
	right:0;
	padding:10px;
	padding-top:20px;
	background: linear-gradient(to bottom, #fff0,#ffff 45%);
}

.threadStat-1 i
{
	margin:5px;
}

.threadStat-1 p
{
	margin:0;
	padding:0;
}

.icon-ft
{
	width: 64px;
	height: 64px;
	padding-top: 16px;
	border-radius: 32px;
	display: inline-block;
	background: #4bd;
	color: #eee;
	font-size:24pt;
}

.desc-ft
{
	width:calc(100% - 100px);
}

.codesc
{
	text-align:justify;
}

.readModel {

    padding: 8px 0;
	text-align: center;
	display: block;
	background-color: #011d;
	color: #eee;
	cursor: pointer;
	transition: 0.5s;
	position: absolute;
	bottom: 0px;
	right: 0;
	top:0;
	left:0;
	opacity:1;
	padding-top:200px;
}

.readModel:hover
{
	opacity:0;
}

.readModel:active
{
	opacity:0;
}

.expandImg1
{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

.courseEditBox
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow-y:auto;
	padding:0 60px;
}

.partnerBox
{
	display:inline-block;
	width:200px;
	height:125px;
	background-position: center;
	background-size: cover;
	margin:4px;
	overflow:hidden;
	border-radius:4px;
	position:relative;
	box-shadow: 0 0 4px #9999;
}

.partnerDesc
{
	height:100%;
	bottom:-100%;
	left:0;
	right:0;
	background:#333d;
	transition:0.5s;
	padding:50px 4px;
}

.partnerBox:hover .partnerDesc
{
	bottom:0;
}

.footerBtn
{
	display: inline-block;
	padding: 5px;
	color: #eee;
	height: 32px;
	width: 32px;
	background: #0000;
	margin: 8px;
	font-size: 12pt;
	border-radius: 16px;
}

.footerBtn2
{
	display:inline-block;
	padding:6px;
	background:#eeee;
	border-radius:4px;
	height:32px;
	width:32px;
	color:#135;
}

.courseFilter
{
	position:sticky; 
	top:60px; 
	left:60px;
	right:60px; 
	height:60px;
	background: #fff;
	/*border-radius: 0 0 8px 8px;*/
	box-shadow: 0 0 4px #ccc;
	z-index: 100;
}

.courseFilterItem
{
	height: 60px;padding: 16px 0;
}

.courseFilterItemR
{
	text-align:right;
}

.courseFilterItemR::after
{
	border-top: 8px solid #999;
	content: "";
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	margin-top: 10px;
	margin-left: 8px;
	position: absolute;
}

#blockCats2
{
	background:#fff;
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:fixed;
	transition:1s;
	overflow-y:auto;
}

.iframeArticles
{
	height:610px;
}
@media(max-width: 1300px) {

	body
	{
		padding-bottom:60px;
	}
	
	.bgFixed
	{
		background-attachment:unset;
	}
	.btn-tab-1
	{
		min-width:unset;
	}

	.desc-ft
	{
		padding-right:18px;
	}

	.bodySection
	{
		padding: 0 10px;
	}

	.footer
	{
		padding-bottom:66px;
	}

	.mobileS
	{
		display:block;
	}

	.mobileH
	{
		display:none;
	}
	
	.m-col-100
	{
		width:100%;
	}
	
	.m-col-100b
	{
		max-width:100% !important;
		width:100%;
	}
	
	.m-ta-c
	{
		text-align:center;
	}
	
	.m-ta-l
	{
		text-align:left;
	}
	
	.m-ta-r
	{
		text-align:right;
	}
	
	.m-fn
	{
		float:unset;
	}
	
	.m-fl
	{
		float:left;
	}
	
	.m-fr
	{
		float:right;
	}
	
	.navbar
	{
		position:fixed;
		top:auto;
		bottom:0;
		padding:0;
	}
	
	.nav-Btn-1:hover
	{
		color:#666;
		background:#0000;
	}
	.nav-Btn-1-A, .nav-Btn-1-A:hover
	{
		color:#fff;
		background:#58e;
	}
	.headnav
	{
		overflow:hidden;
		width:0;
		overflow: hidden;
		position: fixed;
		top: 51px;
	}
	
	.headnav .navitem-1
	{
		float:none;
		width: 100px;
		transition:0.3s;
		
	}
	
	.headnav .navitem-1 .btn-tdark-1
	{
		background: #222d;
		border: 1px solid #6664;
		border-left: none;
	}
	
	.headnav .navitem-1 .btn-tdark-1:hover
	{
		background:#c56;
	}
	
	.headnav .navitem-1 .btn-tdark-1s
	{
		background:#b45e;
	}
	
	
	.headnav .navclicked
	{
		width: 120px;
	}
	
	.headnav .navitem-1:hover
	{
		width: 120px;
	}
	
	.headnav .navitem-1:active
	{
		width: 120px;
	}
	
	.headnav-s
	{
		width: 120px;
	}
	
	.btn-nav-1
	{
		padding: 15px 5px;
		font-size:10pt;
	}
	


	.nav-more-S
	{
		right:0;
		bottom: 60px;
		width:360px;
	}
	
	.nav-noti-count
	{
		left:55%;
	}
	
	.navformMobile
	{
		width:100%;
		position:fixed;
		top:-60px;
		max-width:100%;
		bottom:unset;
		height:60px;
		background:#eeee;
		opacity:1;
		z-index:9999;
		transition:0.5s;
	}
	.navformMobile-s
	{
		top:0;
	}
	/*
	.navfbox
	{
		font-size:16pt;
		height:50.3px;
		transform:scale(0.625);
	}*/
	
	.navfbox {
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 20px;
		padding-right: 40px;
		width: calc(100% - 20px);
		max-width: calc(100% - 20px);
		border-radius: 4px;
		height: 40px;
		margin: 10px;
		font-size: 16pt;
		transition: 0.8s;
	}
	
	.navfbox:focus
	{
		width: calc(100% - 20px);
	}
	
	.navform .mobileS
	{
		display:none;
	}
	
	.navfbtn {
		background: #0000;
		height: 60px;
		width: 60px;
		margin-top: 0;
		border: none;
		font-weight: 100;
		font-size: 20pt;
		margin-left: -60px;
	}
	
	.nav_icon, .nav_ava
	{
		margin-right:0;
	}
  
	.col-4m
	{
		width:100%;
	}
	
	.slide-item
	{
		max-height:unset;
	}

	.slide-item-mimg
	{
		height:200px;
	}
	
	.slide-item-mimg1
	{
		height:200px;
		background-size:contain;
	}
	
	.slide-item-mimg2
	{
		height:240px;
		background-size:cover;
	}

	.slide-item-mtext
	{
		padding:20px 10px;
	}
	
	.btn-tab-1
	{
		margin: 5px;

	}
	
	.fhDiv
	{
		padding-bottom:150px;
	}

	.col-nav
	{
		width:20%;
	}
	
	
	.nav-more
	{
		bottom:60px;
		top:0;
		
	}
	
	.courseFilter
	{
		top:0; 
		left:10px;
		right:10px; 
		height:60px;
		background: #fff;
		border-radius: 0 0 8px 8px;
		box-shadow: 0 0 4px #ccc;
		z-index: 100;
	}
	
	.courseFilterItemR
	{
		text-align:center;
	}

}

@media(max-width: 800px) {

	.nav-more
	{
		bottom:60px;
		width: 100%;
		top:0;
		
	}

	.nav-more-H
	{
		right: -100%;
		
	}

	.nav-more-S
	{
		right: 0;
		
	}
	
	.bd-tlight-2
	{
		border:none;
	}
	
	.lb-mobile-light
	{
		border:none;
		font-size:16pt;
		padding:8px;
		border-bottom:1px solid #0000;
		height:46px;
	}
	
	.tf-mobile-light
	{
		border:none;
		font-size:16pt;
		padding:8px;
		border-bottom:1px solid #9999;
		transition:1s;
		border-radius:0;
		height:48px;
	}
	
	.tf-mobile-light:focus
	{
		padding:8px;
		border-bottom:1px solid #36cc;
	}
	
	.iframeArticles
	{
		height:1630px;
	}

}

@-moz-document url-prefix() {
  .AllBlur
  {
	  opacity:0.2;
  }
  
  .bdf-fallback-light
  {
	  background:#eeee;
  }
  
  .bdf-fallback-dark
  {
	  background:#111e;
  }
}