/* course
	----------------------------------*/
	[onclick] { cursor: pointer; }
	.course { margin-top:80px; margin-bottom:80px}
	.course-blk .cb-col1 { width:20%; float:left; display:block; position:relative;}
	.course-blk .cb-col2 { width:40%; float:left; padding-right:40px;}
	.course-blk .cb-col3 { width:40%; float:left; padding-left:40px; margin-top:100px; }

	.course-blk .cb-col1 img.mask	{ position:absolute; top:0; z-index:5 }
	.course-blk .cb-col1.for-m 	{ display:none}

	.course-tab				{ color:#fff; background-color:#0062a7; }
	.course-tab .ct-name	{ background-color:#333; padding:20px; display:inline-block; line-height:normal;}

	.course-tab .ct-name,
	.course-tab .ct-intro,
	.course-tab .ct-class	{ padding:20px 30px }
 
	.course-tab .ct-class 					{ width:100%; padding-bottom:0 }
	.course-tab .ct-class .ct-btns			{ display:inline-block; text-transform:uppercase; font-size:40px; font-weight:600;
									  		  padding:0 20px 10px 16px; border-right:1px solid #2a80bd; line-height:normal; transition: all 0.3s ease-out; }
	.course-tab .ct-class .ct-btns:first-child 	{ padding-left:0}								  		  
	.course-tab .ct-class .ct-btns img			{ width:12px; height:auto; margin-left:5px}
	.course-tab .ct-class .ct-btns.ct-current		{ color:#333;}
	.course-tab .ct-class .ct-btns img.show-white	{ display:inline-block;}
	.course-tab .ct-class .ct-btns img.show-black	{ display:none}
	.course-tab .ct-class .ct-btns.ct-current img.show-white	{ display:none}
	.course-tab .ct-class .ct-btns.ct-current img.show-black	{ display:inline-block;}
	.course-tab .ct-class .ct-btns:hover { color:#333;}

	.ct-detail							{ border-top:5px solid #333; display: none;}
	.ct-detail .btn-close 		{ position:absolute; right:20px; top:20px; color:#2a80bd; font-size:30px; z-index:10; transition: all 0.3s ease-out;}
	.ct-detail .btn-close:hover { opacity:0.5;}

	.ct-detail table.detail-point	{ width:100%; border:0; border-collapse:collapse; }
	table.detail-point tbody tr td 				{ vertical-align:top; padding-right:30px; padding-top:5px; padding-bottom:5px}
	table.detail-point tbody tr td:first-child 	{ vertical-align:top; text-align:right; width:40%; padding-left:20px }
	table.detail-point tbody tr td:last-child 	{ vertical-align:top; text-align:left; padding-right:20px }
	table.detail-point tbody tr 	{ border-bottom:1px solid #2a80bd;}
	table.detail-point .fa-circle	{ font-size:8px; padding-left:5px; color:#2a80bd}
	.ct-detail .ct-title	{ font-size:30px; color:#fff; font-weight:600; padding:20px 30px 10px 30px; line-height:normal;}
	.ct-detail .ct-free		{ padding:20px 30px}
	.ct-detail a 		{ color:#fff}
	.ct-detail a:hover 	{ color:#333}

	.course-tab .pattern		{ background-color:#fff}
	.course-tab .pattern img	{ width:100%; height:auto;}
	
	.slick-dots-container { margin-top: 0; }
	.main .slick-dots { position: absolute; 
		left: 50%;
		transform: translateX(-50%);
	}
	.slick-dots li { width: auto; height: auto;	}
	.slick-dots li.slick-active button:before { opacity: 1; } 
	.slick-slide { margin: 0; }
	



	/* Expand Collapse 
	----------------------------------*/
	.ex-wrapper			{ width:100%; float:right;}
	.expand .ex-col1	{ width:30%; float:left; text-align:right; padding-right:50px}
	.expand .ex-col2	{ width:70%; float:left}

	img.bg-expand		{ display:none}

	.square-title		{ color:#fff; line-height:normal; display:inline-block; padding:40px; transition: all 0.3s ease-out;}
	.square-bg-black    { background-color:#333;}
	.square-bg-red    	{ background-color:#e84124;}
	.title-size 		{ font-size:30px; }


	/* Appply (Red Box) 
	----------------------------------*/
	.apply			{ background-color:#e84124; color:#fff; margin-top:50px; margin-bottom:50px;}
	.apply-wrapper	{ 		display: flex;
    					align-items: flex-start;}
 	.apply-wrapper .aw-col1					{ width:15%; text-align:center; margin-right:40px}
 	.apply-wrapper .aw-col1 .aw-icon		{ width:100%;}
 	.apply-wrapper .aw-col1 .aw-icon img 	{ width:25%; height:auto;}

 	
	/* team 
	----------------------------------*/
	.team 	{ margin:150px 0 100px 0}
	.team .square-bg-red { position:absolute; top:-20px;}



	/* semi-circle btn 
	----------------------------------*/
	.btn-apply						{ right:150px; position:relative; float:right;}
	.btn-apply .btn-apply-col		{ width:100%; text-align:center; font-size:18px; font-weight:600; color:#fff;}
	.btn-apply .btn-apply-col img 	{ width:35px; height:auto; padding-top:12px}

	.btn-apply .bottom 	{ width:200px; height:100px; background-color:#e84124; z-index:10; transition: all 0.3s ease-out;
							 border-bottom-left-radius: 200px;
							border-bottom-right-radius: 200px;}

	.btn-apply:hover .bottom	{ background-color:#333}
	.btn-apply .bottom a 	{ color: inherit; text-decoration: none; }

	.btn-apply-m { display:none}

	/* ==========================================================================
		Media
	============================================================================= */
	@media only screen and (max-width: 1600px) {
	.btn-apply	{ right:100px;}
	}

	@media only screen and (max-width: 1400px) {
	.course-blk .cb-col2 { padding-right:30px;}
	.course-blk .cb-col3 { padding-left:30px;}

	.course-tab .ct-class .ct-btns		{ font-size:34px;}
	.ct-detail .ct-title				{ font-size:26px;}

	.square-title { padding:30px;}
	.title-size   { font-size:26px;}

	.btn-apply	{ right:50px;}
	}

	@media only screen and (max-width: 1200px) {
	.course-blk .cb-col1 { display:block; width:30%}
	.course-blk .cb-col2,
	.course-blk .cb-col3 { width:70%; float:right; margin-bottom:50px}
	.course-blk .cb-col2 { padding-right:30px; margin-top:72px}
	.course-blk .cb-col3 { padding-right:30px; margin-top:0; padding-left:0px}

	.expand .ex-col1	{ width:25%; padding-right:40px}
	.expand .ex-col2	{ width:75%;}

	.square-title { padding:25px;}
	.stitle-size  { font-size:24px;}

 	.apply-wrapper .aw-col1	{ width:25%;}
	}

	@media only screen and (max-width: 1024px) {
	.team .square-bg-red { top:-50px;}

	.btn-apply .btn-apply-col		{ font-size:16px; padding-top:5px; font-weight:normal;}
	.btn-apply .btn-apply-col img 	{ width:28px; height:auto; padding-top:5px}

	.btn-apply .bottom 	{						 width: 180px; height:90px; 
							 border-bottom-left-radius: 180px;
							border-bottom-right-radius: 180px;}

	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.btn-apply	{ right:30px;}
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)  and (-webkit-min-device-pixel-ratio: 1) {
	.course-blk .cb-col2 { margin-top:72px}

	.ex-wrapper			{ }
	.expand .ex-col1	{ width:100%; display:block; padding-right:0; text-align:left; margin-bottom:20px}
	.expand .ex-col2	{ width:100%; display:block;}

	.square-title { padding:25px;}
	.title-size   { font-size:24px;}

	img.bg-expand	{ width:30%; height:auto; position:absolute; right:0; top:-60px; display:block;}

	.apply-wrapper	{ width:100%; display:block;}
 	.apply-wrapper .aw-col1					{ width:100%; text-align:left; margin-right:0; display:block; border-bottom:1px solid #c53218; margin-bottom:10px}
 	.apply-wrapper .aw-col1 .aw-icon		{ width:60px; display:inline-block;}
 	.apply-wrapper .aw-col1 .aw-icon img 	{ width:50px; height:auto;}
 	.apply-wrapper .aw-col1 .aw-title		{ display:inline-block;}
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)  and (-webkit-min-device-pixel-ratio: 1) {
	.course-blk .cb-col2 { margin-top:95px}
	.expand-bg	{ width:100%; height:auto; position:absolute; right:0; top:0;}
	}

	@media only screen and (max-width: 767px) {
	.course-blk .cb-col1 { display:none}
	.course-blk .cb-col2,
	.course-blk .cb-col3 { width:100%; float:left; margin-bottom:50px}
	.course-blk .cb-col2 { padding-right:0px; margin-top:50px}
	.course-blk .cb-col3 { padding-right:0px; padding-left:0px}


	.course-blk .cb-col1.for-m 	{ display:block; width:60%; top:0; margin-top:-50px; z-index:1; float:right; margin-bottom:50px}
	.course-blk .cb-col1.for-m .img-red-circle	{ width:30%; height:auto; position:absolute; left:-35px; bottom:-35px;}

	.ct-detail .ct-title	{ padding:20px 20px 10px 20px;}
	.course-tab .ct-name,
	.course-tab .ct-intro,
	.course-tab .ct-class,
	.ct-detail .ct-free	  { padding:20px }
	.course-tab .ct-class { padding-top:0; padding-bottom:0}
	.ct-detail .ct-free	  { padding-top:30px}

	.ct-detail .ct-title 			{ font-size:20px;}
	.course-tab .ct-class .ct-btns  { font-size:20px; padding:20px 16px 10px 12px }
	.ct-detail .btn-close  { top:15px;}

	.ex-wrapper			{ }
	.expand .ex-col1	{ width:100%; display:block; padding-right:0; text-align:left; margin-bottom:20px}
	.expand .ex-col2	{ width:100%; display:block;}
	.square-title	{ padding:15px 20px;}
	.title-size 	{ font-size:18px;}

	img.bg-expand	{ width:38%; height:auto; position:absolute; right:0; top:-10px; display:block;}

	.apply-wrapper	{ width:100%; display:block;}
 	.apply-wrapper .aw-col1					{ width:100%; text-align:left; margin-right:0; display:block; border-bottom:1px solid #c53218; margin-bottom:10px}
 	.apply-wrapper .aw-col1 .aw-icon		{ width:60px; display:inline-block;}
 	.apply-wrapper .aw-col1 .aw-icon img 	{ width:50px; height:auto;}
 	.apply-wrapper .aw-col1 .aw-title		{ display:inline-block;}

	.btn-apply	{ right:20px; position:relative; float:right;}
	.btn-apply .btn-apply-col		{ font-size:14px; padding-top:5px; font-weight:normal;}
	.btn-apply .btn-apply-col img 	{ width:24px; height:auto; padding-top:5px}

	}