@charset "UTF-8";

:root{
  --spcolor1: rgba(229,219,216,1);
  --spcolor2: rgba(250,249,247,1);

}

.tooltips.align-right .tips{
	right: 0 !important;
}

.sp-full-screen-banner:before,
.sp-full-screen-banner:after{
	display: none;	
}
.sp .section-title:after{
	display: none;
}
.sp-full-screen-banner:after{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.1);
	top: 0;
	left: 0;
	display: block;
	clip-path: unset;
	bottom: 0;
	z-index: 0;
}
.sp-full-screen-banner .title{
	z-index: 1;
}
.sp-full-screen-banner .title .sp-sub-title{
    font-size: calc(var(--font-size) * 1.5);
    text-align: center;
    font-weight: 600;
    padding-right: 0;
    text-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.sp-full-screen-banner.center-title{
	padding-top: 37.5%;
}
.sp-full-screen-banner.center-title .section-title{
	font-size: calc(var(--font-size) * 5);
	letter-spacing: .1em;
	padding: .3em .5em .5em;
	line-height: 1;
	background-color: rgba(215,215,215,.3);
	margin:0 auto 50px;
	text-shadow: 0 3px 10px rgba(0,0,0,.3);
	white-space: nowrap;

}
.sp-full-screen-banner-location{
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	font-size: calc(var(--font-size) * 1.2);
	color: #fff;
	font-weight: 500;
	padding-left: 45px;
	z-index: 1;
	text-shadow: 0 3px 10px rgba(0,0,0,.5);
	letter-spacing: .05em;
}
.sp-full-screen-banner-location:after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	background: url(https://d2350fb44r6k35.cloudfront.net/assets/images/revamp/cocomall/sp/location.png) no-repeat;
	background-size: contain;
}
section.sp:not(#sec0){
	padding-top: 0;
}
section.sp:not(#sec0) > div{
	padding:100px;
	color: rgba(62, 31, 3, 1);
}
.center-title-block,
.sp-service-container,
.sp-lesson-container{
	font-size: calc(var(--font-size) * 1.5);
	background-color: var(--spcolor2);
}
.sp-block-with-text-lists-container,
.sp-material-container{
	background-color: var(--spcolor1);
}
.sp-bigtitle{
	font-size: calc(var(--font-size) * 2.5);
	font-weight: 600;
}
.sp-bigtitle ~ .description{
	font-size: calc(var(--font-size) * 1.4);
}
.sp-block-with-text-lists{
	padding: 100px;
	/*display: flex;
	justify-content: center;
	gap:0 9%;*/
}
.sp-block-with-text-list{
/*	flex: 0 0 25%;*/
}
.sp-block-thumbnail{
	padding-bottom: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 10px;
}
.sp-block-content{
	padding-top:35px;
}
.sp-block-title{
	font-weight: 600;
	font-size: calc(var(--font-size) * 1.4);
}
.sp-block-description{
	font-size: calc(var(--font-size) * 1.2);
}
.sp-service-wrapper{
	padding: 0 0 40px;
	width: 75%;
	margin:0 auto;
}
.sp-service-lists-container{
	text-align: left;
	flex: 0 0 60%;
}
.sp-service-lists-title{
	font-size: calc(var(--font-size) * 1.75);
	text-align: center;
	margin-bottom: 20px;
}
.sp-service-lists{
	padding-top: 50px;
	display: flex;
	padding-bottom: 50px;
	flex-direction: column;
}
.sp-service-lists > div{
	flex: 0 0 40%;
	display: flex;
	justify-content: center;
	gap:40px;
}
.sp-service-list{
	line-height: 1.7;
	padding-left: 60px;
	padding-right: 60px;
	position: relative;
	margin-bottom: 30px;

}
.sp-service-list:after{
	position: absolute;
	left: 0;
	top: 0;
	background: url(https://d2350fb44r6k35.cloudfront.net/assets/images/revamp/red_tick.png) center center no-repeat;
	background-size: contain;
	width: 60px;
	height: 55px;
	content: '';
}
.sp-service-thumbnail{
	flex: 0 0 30%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 10px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.sp-service-thumbnail span{
	color: #fff;
	font-size: calc(var(--font-size) * 1.8);
	text-shadow: 0 3px 10px rgba(0,0,0,.3);
	font-weight: 600;
	padding: 10px 30px;
	width: 100%;
	background-color: rgba(215,215,215,.6);
	margin-bottom: 30px;
}
.sp-center-banner{
	width: 75%;
	padding-bottom: 50%;
	position: relative;
	margin: 100px auto;
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size: cover;
}
.sp-center-banner:after{
	content: '';
	z-index: 0;
	width: 100%;
	height: 100%;
/*	background-color: rgba(255, 255, 255, .1);*/
	position: absolute;
	top: 0;
	left: 0;
}
.sp-center-banner .sp-bigtitle{
	position: absolute;
	color: #fff;
	z-index: 1;
	font-size: calc(var(--font-size) * 5);
	letter-spacing: .01em;
	padding: .3em .5em .5em;
	line-height: 1.3;
	background-color: rgba(215,215,215,.3);
	margin:0 auto 50px;
	text-shadow: 0 3px 10px rgba(0,0,0,.2);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}
.photo-with-description-block{
	padding:100px 220px !important;
}
.photo-with-description-block.color1{
	background-color: var(--spcolor2);
}
.photo-with-description-block.color2{
	background-color: var(--spcolor1);
}
.photo-with-description-block .pwd-description{
	font-size: calc(var(--font-size) * 1.5);
	padding: 50px 0 0;
}
.photo-with-description-block .pwd-photo{
	width: 100%;
	padding-bottom: 70%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.photo-with-description-block .pwd-title{
	font-size: calc(var(--font-size) * 2);
	font-weight: 600;
	margin-bottom: 1em;
}
.photo-with-description-block .btn,
.sp-lesson-container .btn,
.sp-lesson-info-container .btn
{
	margin-top: 100px;
}
.sp-lesson-container .sp-center-banner{
	padding-bottom: 40%;
	margin-bottom: 50px;
}
.sp-lesson-container .sp-center-banner:after{
	background-color: rgba(0, 0, 0, .1);
}
.sp-lesson-container .sp-lesson-description{
	margin-bottom: 5em;
	font-size: calc(var(--font-size) * 1.5);
}
.sp-lesson-container .sp-lesson-title{
	font-size: calc(var(--font-size) * 2);
	font-weight: 600;
	margin-bottom: 1em;
	color: rgba(121, 93, 81, 1);
}
.sp-lesson-lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:0 2%;
}
.sp-lesson-list{
	flex: 0 0 25%;
	font-size: calc(var(--font-size) * 1.5);
	font-weight: 500;
	border-radius: 50em;
	color: #fff;
	background-color: rgba(121, 93, 81, 1);
	padding: 9px 50px 12px 100px;
	margin-bottom: 2%;
	position: relative;
	white-space: nowrap;
}
.sp-lesson-list:after{
	position: absolute;
	content: '';
  top: 12px;
  left: 29px;
  width: 45px;
  height: 38px;
	clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
	background-color: var(--orange-color);
}
.sp-lesson-info-container{
	padding: 0 !important;
}
.sp-material-container{
	padding: 100px 0 0 !important;
}
.sp-padding-100-lr{
	padding: 0 100px;
}
.sp-lesson-info-content{
	background-color: var(--spcolor2);
	padding-bottom: 100px;
	display: flex;
	flex-wrap: wrap;
	padding-top: 20px;
	justify-content: center;
}
.sp .full-image-banner{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 40%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.sp-lesson-info-content > div{
	color: rgba(121, 93, 81, 1);
}
.sp-lesson-info-content-bigtitle{
	font-size: calc(var(--font-size) * 5);
	font-weight: 600;
	letter-spacing: .2em;
}
.sp-lesson-info-content-subtitle{
	font-size: calc(var(--font-size) * 1.8);
	font-weight: 500;
}
.sp-lesson-info-content-lt{
	flex:0 0 60%;
	text-align: left;
	padding-left: 10%;
}
.sp-lesson-info-content-rt{
	flex:0 0 40%;
	text-align: left;
	padding-top: 25px;
	font-size: calc(var(--font-size) * 1.1);
	font-weight: 500;
}
.sp-lesson-info-list{
	margin-bottom: 25px;
}
.sp-lesson-info-list .title{
	position: relative;
}
.sp-lesson-info-list .title:after{
	content: '';
	width: 4px;
	top: 4px;
	height: calc(100% - 4px);
	position: absolute;
	left: -15px;
	background-color: rgba(121, 93, 81, 1);
}
.sp-material-block-bigtitle{
	color: #fff;
	font-size: calc(var(--font-size) * 2.5);
	font-weight: 600;
}
.sp-material-block-container{
	padding: 100px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.sp-material-block-container:after{
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(123, 93, 81, .5);
	z-index: 0;
}
.sp-material-block-bigtitle,
.sp-material-blocks{
	z-index: 1;
	position: relative;
}
.sp-material-block-label{
	position: absolute;
	top: 0;
	right:0;
	z-index: 2;
}
.sp-material-block-bigtitle{
	text-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.sp-material-blocks{
	display: flex;
	gap: 0 2%;
	justify-content: center;
	padding-top: 50px;
}
.sp-material-block{
	flex: 0 0 20%;
	background-color: #fff;
	padding:20px 30px;
	border-radius: 10px;
}
.sp-material-block-title{
	font-size: calc(var(--font-size) * 1.7);
	font-weight: 600;
}
.sp-material-block-img{
	padding-bottom: 75%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 70%;
/*	background-color: #eee;*/
	margin:20px 0;
}
.sp-material-block-description{
	font-size: calc(var(--font-size) * 1);
}
.sp-material-block-description .big{
	font-size: calc(var(--font-size) * 1.4);
	font-weight: 500;
}
.sp-material-block-description sup {
	font-weight: 500;
	vertical-align: top;
	font-size: smaller;
	position: unset;
  line-height: unset;
}
.more{
	margin-top: 30px;
	font-size: calc(var(--font-size) * 1);
	padding: 8px 20px 12px;
	line-height: 1;
	border-radius: 50em;
	border: 2px solid rgba(62, 31, 3, 1);
	display: inline-block;
	cursor: pointer;
	background-color: var(--spcolor1);
	transition: background-color 100ms linear, color 100ms linear;
}
.more:hover{
	background-color: rgba(62, 31, 3, 1);
	color: #fff;
}
section.sp10 .section-title{
	padding-bottom:0;
	margin:50px auto;
	font-size: calc(var(--font-size) * 2.25);
	font-weight: 700;
}

section.sp10 .section-title:after{
	display: none;
}

.num-lists{
	margin:0 auto;
	padding: 0 10% 0 5%;
}
.num-list{
	display: flex;
	padding: 0 50px 100px 60px;
	width: 1440px;
	max-width: 100%;
}
.num-list:last-child{
	padding-bottom: 0;
}
.num-list .num{
	font-size: calc(var(--font-size) * 2.25);
	flex: 1 1 auto;
	line-height: 1;
}
.num-list .text-content{
	flex: 1 1 auto;
	margin:0 15%;
	text-align: left;
}
.num-list .text-content .title{
	font-size: calc(var(--font-size) * 1.85);
	padding-bottom: calc(var(--font-size) * 1.15);
}
.num-list .text-content .description{
	font-size: calc(var(--font-size) * 1);
	padding-bottom: calc(var(--font-size) * 1.65);
}
.num-list .text-content .btn{
	text-align: center;
}
.num-list .img{
	flex: 0 0 467px;
	width: 100%;
}
.btn.mini-btn{
	height: 52px !important;
	min-width: 225px !important;
}
.btn.mini-btn div{
	line-height: 51px !important;
	font-size: 22px !important;
	height: 52px !important;
}
.sp10th-testimonial .swiper-slide .testimonial-info{
	margin-top: 0;
}
.boss-banner-container{
	max-width: 100%;
	margin:0 auto 50px;
	background-color: #ededed;
}
.boss-banner-wrapper{
	width: 1200px;
	margin: 0 auto;
	max-width: 99%;
	overflow-x: hidden;
}
.media-list-swiper{
	max-width: 85%;
	width: 1332px;
}
.media-list-swiper .swiper-slide{
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
}
.page-sp10th header .header-lt .logo-codecohk{
	width: 300px;
}
.page-sp10th header.sticky .header-lt .logo-codecohk{
	width: 250px;
}

.big-slider{
	position: relative;
	width: 100%;
}
.big-slider-msg-box{
	position: relative;
	padding: 110px 0 87px 16%;
	z-index: 2;
	text-align: left;
}
.msg-box-wrapper{
	display: inline-block;
  position: relative;
  background-color: rgba(255,255,255,.9);
  text-align: center;
  padding: 148px 40px 30px;
}
.big-swipe-slider{
	position: absolute;
	width: 100%;
	background-color: #fff;
	top: 0;
	left: 0;
	height: 100%;
}
.big-swipe-slider .swiper-wrapper{
	transition-timing-function: linear !important;
}
.big-slider-msg-box .msg-box-wrapper .tag-label{
	position: absolute;
	background-color: var(--orange-color);
	color:#fff;
	top: 0;
	left: 38px;
	margin-top: -15px;
	padding: 0 15px;
}
.big-slider-msg-box .msg-box-wrapper .tag-label:before{
	content: '';
}
.big-slider-msg-box .msg-box-wrapper .tag-label:before{
	width: 100%;
	height: 15px;
	clip-path: polygon(100% 0, 100% 100%, 50% 0, 0 100%, 0 0);
	background-color: var(--orange-color);
	position: absolute;
	left: 0;
	bottom: -14px;
}
.big-slider-msg-box .msg-box-wrapper .tag-label .num{
	font-size: calc(var(--font-size) * 3);
	line-height: 1;
}
.big-slider-msg-box .msg-box-wrapper .tag-label .num span{
	font-size: calc(var(--font-size) * 2.1);
}
.big-slider-msg-box .msg-box-wrapper .tag-label .text{
	margin: 7px 0 12px;
}
.big-slider-msg-box .msg-box-wrapper .text-content-1{
	font-size: calc(var(--font-size) * 1.1);
	font-weight: 600;
}
.big-slider-msg-box .msg-box-wrapper .text-content-2{
	font-size: calc(var(--font-size) * 1.58);
	font-weight: 600;
	margin: 4px 0 6px;
}
.big-slider-msg-box .msg-box-wrapper .text-content-3{
	font-size: calc(var(--font-size) * 2.3);
	font-weight: 900;
	margin-bottom: 32px;
}
.big-slider-msg-box .msg-box-wrapper .color-blue{
	color: var(--blue-color);
}
.big-slider-msg-box .msg-box-wrapper .text-content-4{
	margin:10px 0 0;
	font-weight: 600;
}
.showcase-container{
	width: 100%;
	padding: 100px 0 0;
	background-color: #FDE2D8;
}
.showcase-list{
	margin: 50px auto 80px;
  max-width: 80%;
  width: 1380px;
  text-align: left;
}
.showcase-list > .title{
	font-size: calc(var(--font-size) * 1.45);
	font-weight: 600;
	margin-bottom: 32px;
}
.showcase-items{
	display: flex;
	justify-content: space-between;
}
.showcase-item{
	flex: 0 0 28%;
	background-color: #fff;
}

.why-container{
	padding: 100px 0 0 !important;
	background: #E5F2F3;
	width: 100%;
}
.why-wrapper{
	margin: 0 auto;
  max-width: 80%;
  width: 1380px;
  text-align: left;
}
.why-container .why-wrapper > .title{
	font-size: calc(var(--font-size) * 2);
	margin-bottom: 60px;
}
.why-lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.why-list{
	flex: 0 0 28%;
	margin-bottom: 120px;
}
.why-list .icon{
	width: 48px;
	height: 48px;
	margin-bottom: 15px;
}
.why-list .title{
	font-size: calc(var(--font-size) * 1.35);
	font-weight: 600;
	margin-bottom: 30px;
}
.why-list .description{
	font-size: calc(var(--font-size) * 1.05);
}
.booking-step-container{
	margin: 0 auto;
  max-width: 80%;
  width: 1380px;
  text-align: left;
}
.booking-step-container .title{
	font-size: calc(var(--font-size) * 2);
  margin-bottom: 30px;
  font-weight: 600;
}
.booking-form-container{
	background: url(https://d2350fb44r6k35.cloudfront.net/assets/images/commercial/form_bg.jpg) center center no-repeat;
	background-size: cover;
}
.booking-form-wrapper{
	margin: 0 auto;
  max-width: 80%;
  width: 1380px;
  text-align: left;
}
.booking-form-wrapper .title{
	font-size: calc(var(--font-size) * 2);
  margin-bottom: 50px;
  padding-top: 60px;
  font-weight: 600;
}
.booking-form{
}
.booking-form .booking-form-field{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booking-form .booking-form-top{
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.booking-form .booking-form-img{
	flex: 0 0 55%;
	margin-bottom: 15px;
}
.booking-form-top .request-field{
	width: 100%;
	margin:0 auto 15px;
}
.booking-form-field .label{
	font-size: calc(var(--font-size) * 1.35);
	font-weight: 600;
	margin-bottom: 15px;
	color: black;
	text-align: left;
}
.booking-form-field .tnc{
	margin-top: 0px;
	margin-bottom: 5px;
}
.booking-form-field .tnc label{
	font-size: calc(var(--font-size) * 1);
	margin-left: 5px;
}
.booking-form-field .label:not(:first-child){
	padding-top: 15px;
}
.booking-form-field .request-field{
	max-width: 100%;
}
.booking-form-field .request-field input{
	padding: 0 20px;
	text-align: left;
}
/*.request-field-dropdown .ui-button:active {
    color: var(--black-color) !important;
}*/
.request-field-dropdown .ui-selectmenu-text{
	text-align: left;
  padding: 0 12px;
}
.booking-form-field .checkbox{
	margin-bottom: 5px;
}
.showcase-item{
	padding: 20px;
}
.showcase-img{
	width: 100%;
	height: 0;
	padding-bottom: 90%;
	background-size: cover;
	background-position: center center;
}
.showcase-info{
	margin-top: 15px;
  text-align: center;
  font-size: calc(var(--font-size) * 1);
}
.showcase-info .description{
	font-size: calc(var(--font-size) * 0.8);
}

.boss-banner-wrapper{

}
.boss-banner-wrapper > *{
	position: relative;
}
.boss-banner-wrapper .boss, .boss-banner-wrapper .txt{
	position: absolute;
}
.boss-banner-wrapper .bg, .boss-banner-wrapper .txt{
	transform: translateX(-2%);
	opacity: 0;
	transition: transform 2000ms var(--cubic), opacity 1000ms var(--cubic);
}
.boss-banner-wrapper .txt{
	z-index: 3;
}
.boss-banner-wrapper .boss{
	transform: translateX(5%);
	opacity: 0;
	transition: transform  2000ms var(--cubic), opacity 1000ms var(--cubic);
	z-index: 2;
}

.active .boss-banner-wrapper .boss,
.active .boss-banner-wrapper .bg,
.active .boss-banner-wrapper .txt{
	opacity: 1;
	transform: translateX(0);
}

.sp10th-testimonial{
	width: 100%;
	margin:0 auto;
	padding: 0 5%;
}
.sp10th-testimonial .swiper-prev-next-btns > *{
	position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 50em;
    margin-top: calc(-50px - 24px);
    background: var(--blue-color) url(https://d2350fb44r6k35.cloudfront.net/assets/images/revamp/btn_arrow_blue.png) center center no-repeat;
    background-size: cover;
    filter: brightness(1.0);
    z-index: 2;
    display: block;
    cursor: pointer;
}
.sp10th-testimonial .swiper-prev-next-btns > *:hover{
	filter: brightness(1.1);
}
.sp10th-testimonial .swiper-prev-next-btns .swiper-btn-prev{
	left: 5%;
	transform: rotate(180deg);
    transform-origin: center center;
}
.sp10th-testimonial .swiper-prev-next-btns .swiper-btn-next{
	right: 5%;
}

@media only screen and (max-width: 1600px){
	section.sp:not(#sec0) > div{
		padding:70px;
	}
	.sp-material-container{
		padding-top: 70px !important;
	}
	.sp-block-with-text-lists{
		padding: 70px;
	}
	.sp-material-block{
		flex: 0 0 24%;
	}
	.sp-center-banner{
		margin: 70px auto;
	}
	.photo-with-description-block .btn, .sp-lesson-container .btn, .sp-lesson-info-container .btn{
		margin-top: 70px;
	}
	.sp-lesson-list:after{
		width: 41px;
		height: 35px;
	}
	.sp-lesson-list{
		padding-left: 90px;
		font-size: calc(var(--font-size) * 1.4);
	}
	.photo-with-description-block{
		padding: 70px 140px !important;
	}
	.sp-service-lists{
		padding:30px 0;
	}
	.sp-service-lists > div{
		gap: 30px;
	}
	.num-list{
		padding: 0 30px 100px 40px;
	}
	.num-list .text-content{
		margin: 0 10%;
	}
	.big-slider-msg-box{
		transform-origin: left top;
    transform: scale(.9);
	}
	.big-swipe-slider{
		height: 90%;
	}
}
@media only screen and (max-width: 1440px){
	.sp-material-block-container{
		padding:70px;
	}
	.sp-service-lists-title{
	  font-size: calc(var(--font-size) * 1.8);
	}
	.sp-lesson-info-content-bigtitle{
		font-size: calc(var(--font-size) * 4.5);
	}
	.sp-full-screen-banner.center-title .section-title{
		margin-bottom: 40px;
	}
	.sp-service-lists{
		padding:30px 0;
	}
	.sp-service-lists > div{
		gap: 0;
	}
}
@media only screen and (max-width: 1280px){
	.sp-lesson-list:after {
    width: 1.3em;
    height: 1.2em;
	}
	.sp-lesson-list{
		padding-left: 80px;
	}
	.sp-lesson-info-list .title:after{
		width: 3px;
		left: -12px;
	}
	.sp-block-with-text-lists{
		padding: 70px 40px;
	}
	.photo-with-description-block .pwd-description{
		padding: 30px 70px 0;
	}
	.sp-lesson-info-content{
		padding-bottom: 70px;
	}
	.sp-lesson-info-content-lt{
	 	padding-left: 8%;
	}
	.sp-full-screen-banner.center-title .section-title{
		margin-bottom: 20px;
	}
	.sp-service-lists{
		padding:30px 0;
	}
	.sp-service-lists > div{
		justify-content: space-between;
	}
	.sp-service-list{
		padding-left: 38px;
		padding-right: 0;
		margin-bottom: 20px;
	}
	.sp-service-list:after{
		width: 40px;
		height: 40px;
	}
	.num-list {
    padding: 0 10px 80px 20px;
	}
	.num-list .text-content {
    margin: 0px 9%;
	}
}
@media only screen and (max-width: 1024px){
	section.sp:not(#sec0) > div,
	.sp-service-wrapper{
    padding: 40px;
	}
	.sp-service-wrapper{
		padding:40px 0;
		width: 90%;
	}
	.sp-material-container{
		padding-top: 40px !important;
	}
	.sp-block-with-text-lists{
		padding: 40px;
		gap: 0 6%;
	}
	.sp-block-with-text-list{
/*		flex:0 0 28%;*/
	}
	.sp-service-lists-title{
		font-size: calc(var(--font-size) * 1.8);
	}
	.sp-service-lists{
		padding:40px 0;
	}
	.sp-service-list{
		padding-left: 40px;
	}
	.sp-service-list:after{
		width: 42px;
		height: 42px;
	}
	.sp-service-lists > div {
    flex: 0 0 45%;
	}
	.sp-service-thumbnail{
		flex:0 0 35%;
	}
	.sp-full-screen-banner.center-title .section-title{
		margin-bottom: 24px;
	}
	.sp-block-content{
		padding-top: 15px;
	}
	.sp-material-block-title{
		font-size: calc(var(--font-size) * 1.5);
	}
	.sp-material-block{
		padding: 15px 22px;
	}
	.sp-center-banner{
		margin: 40px auto;
	}
	.sp-lesson-list{
		flex:0 0 33%;
	}
	.sp-center-banner{
		margin: 40px auto;
	}
	.photo-with-description-block .btn, .sp-lesson-container .btn, .sp-lesson-info-container .btn{
		margin-top: 40px;
	}
	.sp-lesson-info-content-lt{
		padding-left: 4%;
	}
	.sp-lesson-info-content-bigtitle{
		font-size: calc(var(--font-size) * 4.5);
    font-weight: 600;
    letter-spacing: .15em;
	}
	.sp-lesson-info-content{
		padding-bottom: 40px;
	}
	.photo-with-description-block{
		padding: 40px 80px !important;
	}
	.sp-lesson-container .sp-lesson-description{
		margin-bottom: 3em;
	}
	.sp-lesson-container .sp-center-banner{
		margin-bottom: 30px;
	}
	.sp-full-screen-banner.center-title .section-title{
		font-size: calc(var(--font-size) * 3.7);
		padding: 0.3em 0.5em 0.4em;
		margin-bottom: 10px;
	}
	.sp-full-screen-banner .title .sp-sub-title{
		font-size: calc(var(--font-size) * 1.3);
	}
	.sp-full-screen-banner-location{
		padding-left: 40px;
		font-size: calc(var(--font-size) * 1);
		bottom: 25px;
	}
	.sp-full-screen-banner-location:after{
		width: 30px;
		height: 30px;
	}
	.big-slider-msg-box{
		padding: 70px 0 47px 12%;
		transform: scale(.9);
	}
	.big-swipe-slider{
		height: 90%;
	}
	.num-list .img{
		flex: 0 0 40%;
	}
	.num-list {
    padding: 0 0 80px 10px;
	}
	.showcase-item {
    padding: 14px;
	}
	.showcase-list, .why-wrapper, .booking-step-container, .booking-form-wrapper{
		max-width: 88%;
	}
	.why-list .title{
		margin-bottom: 20px;
	}
	.why-list{
		margin-bottom: 80px;
	}
}

@media only screen and (max-width: 768px){
	.sp-full-screen-banner.center-title .section-title{
		font-size: calc(var(--font-size) * 3.5);
		margin-bottom: 14px;
	}
	.sp-full-screen-banner .title .sp-sub-title{
		font-size: calc(var(--font-size) * 1.2);
	}
	
	.center-title-block, .sp-service-container, .sp-lesson-container{
		font-size: calc(var(--font-size) * 1.2);
	}
	.sp-bigtitle,
	.sp-material-block-bigtitle{
		font-size: calc(var(--font-size) * 2);
	}
	.sp-block-with-text-lists{
		padding: 40px 0 20px;
		gap: 0 4%;
	}
	.sp-block-with-text-list{
/*		flex:0 0 32%;*/
	}
	.sp-block-title{
		font-size: calc(var(--font-size) * 1.2);
	}
	.sp-block-description{
		font-size: calc(var(--font-size) * 1);
	}
	.sp-service-lists-title{
		font-size: calc(var(--font-size) * 1.5);
	}
	.sp-service-wrapper{
		padding: 40px 0 20px;
		width: 100%;
	}
	.sp-service-lists{
		padding: 20px 0;
	}
	.sp-service-list:after{
		width: 36px;
		height: 36px;
		top: -3px;
	}
	.sp-service-list{
		padding-left: 34px;
		margin-left: -34px;
	}
	.sp-service-thumbnail{
		flex:0 0 40%;
	}
	.sp-service-thumbnail span{
		font-size: calc(var(--font-size) * 1.5);
	}
	.sp-center-banner .sp-bigtitle{
		font-size: calc(var(--font-size) * 3.5);
		padding: 0.3em 0.5em 0.4em;
	}
	.sp-material-blocks{
		padding-top: 40px;
		flex-wrap: wrap;
		gap: 0 4%;
	}
	.sp-material-block{
		margin-bottom: 4%;
		flex:0 0 40%;
	}
	.sp-lesson-list{
		font-size: calc(var(--font-size) * 1.2);
	}
	.sp-lesson-info-content-bigtitle{
		font-size: calc(var(--font-size) * 3.5);
	}
	.sp-lesson-info-content-subtitle{
		font-size: calc(var(--font-size) * 1.4);
	}
	.page-sp10th header .header-lt .logo-codecohk {
    width: 250px;
	}
	.big-slider-msg-box {
    padding: 60px 0 0 12%;
    transform: scale(.8);
	}
	.big-swipe-slider {
    height: 86%;
	}
	.page-sp10th #trigger1 + section{
		padding-top: 70px;
	}
	.sp-bigtitle ~ .description {
    	font-size: calc(var(--font-size) * 1.3);
	}
	.showcase-item {
    	padding: 10px;
    	flex: 0 0 31%;
	}
	.showcase-info{
		margin-top: 10px;
	}
	.showcase-list > .title{
		font-size: calc(var(--font-size) * 1.4);
    	margin-bottom: 22px;
	}
	.booking-form .booking-form-img{
		order: 1;
		width: 100%;
	    margin-bottom: 35px;
	    flex: 0 0 100%;
	}
	.booking-form .booking-form-field{
		width: 100%;
		text-align: center;
	}
	.booking-form{
		flex-direction: column;
	}
	.booking-form .booking-form-top{
		order: 2;
		flex: 0 0 100%;
	}
	.booking-form .booking-form-bottom{
		order: 3;
		flex: 0 0 100%;
	}
	.boss-banner-wrapper .desktop{
		display: none;
	}
	.boss-banner-wrapper .mobile{
		display: block;
	}
}
div.big-view{
	display: block;
}
div.small-view,div.small-view-flex{
	display: none;
}
div.big-view-flex{
	display: flex;
}
@media only screen and (max-width: 640px){
	.active .boss-banner-wrapper .boss{
		transform: translateX(35px);
	}

	.photo-with-description-block .pwd-title{
		font-size: calc(var(--font-size) * 1.3);
	}
	.sp-center-banner .sp-bigtitle,
	.sp-full-screen-banner.center-title .section-title{
		font-size: calc(var(--font-size) * 2.5);
	}
	.sp-full-screen-banner.center-title{
		padding-top: 62.5%;
	}
	.sp-full-screen-banner .title .sp-sub-title{
		font-size: calc(var(--font-size) * 1.1);
	}
	.sp .full-screen-banner.center-title .title{
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}
	.sp-full-screen-banner-location {
    padding-left: 30px;
    font-size: calc(var(--font-size) * 1);
    bottom: 18px;
    white-space: nowrap;
	}
	.sp-full-screen-banner-location:after {
    width: 24px;
    height: 24px;
	}
	.sp-bigtitle, .sp-material-block-bigtitle{
		font-size: calc(var(--font-size) * 1.5);
	}
	.sp-block-with-text-lists {
    padding: 30px 0 10px;
    gap: 0 4%;
	}
	section.sp:not(#sec0) > div, .sp-service-wrapper {
    padding: 25px;
	}
	.sp-block-title{
		font-size: calc(var(--font-size) * 1.3);
	}
	.sp-block-content {
    padding-top: 12px;
	}
	.sp-service-wrapper{
		display: block;
	}
	.sp-service-lists-title{
		text-align: center;
	}
	.sp-service-wrapper{
		padding: 25px 0;
	}
	.sp-service-lists{
		padding:20px 0 40px;
		flex-direction: row;
	}
	.sp-service-list{
		margin-bottom: 12px;
	}
	.sp-service-lists > div{
		flex: 0 0 50%;
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	.sp-service-thumbnail{
		height: 230px;
    max-width: 360px;
    margin: 0 auto;
	}
	.sp-service-thumbnail span{
		margin-bottom: 20px;
	}
	.sp-center-banner{
		width: 85%;
		padding-bottom: 50%;
		margin: 30px auto;
	}
	.sp-material-block-container{
		padding: 40px 25px;
	}
	.sp-material-block{
		flex: 0 0 48%;
	}
	.sp-material-block-title{
		font-size: calc(var(--font-size) * 1.2);
	}
	.sp-material-block-img{
		margin: 12px 0;
	}
	.photo-with-description-block .pwd-description {
    padding: 15px 0px 0;
    font-size: calc(var(--font-size) * 1.15);
	}
	.sp-lesson-container .sp-lesson-description{
		font-size: calc(var(--font-size) * 1.15);
	}
	.sp-lesson-lists{
		gap: 0 1%;
		justify-content: spacing-between;
	}
	.sp-lesson-list{
		padding: 9px 22px 12px 40px;
		font-size: calc(var(--font-size) * 1);
		flex:0 0 48%;
	}
	.sp-lesson-list:after {
    width: 1em;
    height: 1em;
    left: 16px;
		top: 13px;
  }
  .photo-with-description-block .btn, .sp-lesson-container .btn, .sp-lesson-info-container .btn{
  	margin-top: 20px;
  }
  .sp-lesson-info-content{
  	display: block;
  }
  .sp-lesson-info-content-rt{
  	padding-left: calc(4% + 12px);
  }
  .sp-lesson-info-list{
  	margin-bottom: 15px;
  }
  .sp-block-title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .more{
  	font-size: 12px;
  	padding: 8px 20px 10px;
  }
  .photo-with-description-block{
  	padding: 40px !important;
  }
  .sp-lesson-container .sp-center-banner{
  	padding-bottom: 50%;
  }
  div.big-view, div.big-view-flex{
	display: none;
	}
	div.small-view{
		display: block;
	}
	div.small-view-flex{
		display: flex;
	}
	.sp-padding-100-lr{
		padding:0 25px;
	}
	.sp-block-with-text-lists-container{
		padding:25px 0 !important;
	}
	.page-sp10th header .header-lt .logo-codecohk {
    	width: 170px;
	}
	.num-list{
		flex-wrap: wrap;
	}
	.num-list .img{
		order: 1;
		flex: 1 0 100%;
		margin-bottom: 15px;
	}
	.num-list .num{
		order: 2;
		flex: 0 1 10%;
		margin-top: 2px;
	}
	.num-list .text-content{
		order: 3;
		flex: 1 1 70%;
    margin-right: 0;
	}
	.big-slider-msg-box {
    padding: 230px 16px 0 16px;
    transform: scale(1);
	}
	.big-swipe-slider {
    height: 50%;
	}
	.msg-box-wrapper{
		padding: 86px 20px 20px;
		box-shadow: 0 5px 30px rgba(0,0,0,.2);
	}
	.big-slider-msg-box .msg-box-wrapper .tag-label .num {
    font-size: calc(var(--font-size) * 2);
  }
  .big-slider-msg-box .msg-box-wrapper .tag-label .num span {
    font-size: calc(var(--font-size) * 1.6);
	}
	.big-slider-msg-box .msg-box-wrapper .tag-label .text {
    margin: 4px 0 9px;
    font-size: calc(var(--font-size) * 1);
	}
	.big-slider-msg-box .msg-box-wrapper .tag-label{
		padding: 2px 10px 0;
		left: 20px;
	}
	.big-slider-msg-box .msg-box-wrapper .tag-label:before{
		height: 10px;
		bottom: -9px;
	}
	.msg-box-wrapper{
		background-color: rgba(255, 255, 255, 1.0);
		width: 100%;
	}
	.big-slider-msg-box .msg-box-wrapper .text-content-1{
		font-size: calc(var(--font-size) * 1);
	}
	.big-slider-msg-box .msg-box-wrapper .text-content-2{
		font-size: calc(var(--font-size) * 1.45);
	}
	.big-slider-msg-box .msg-box-wrapper .text-content-3{
		font-size: calc(var(--font-size) * 2);
	}
	.page-sp10th #trigger1 + section {
    padding-top: 90px;
	}
	.sp-bigtitle ~ .description{
		padding: 0 20px;
	}
	.sp-bigtitle ~ .description br{
		display: none;
	}
	.num-list .text-content .description {
		font-size: calc(var(--font-size) * 1);
	}
	.showcase-container{
		padding: 50px 0 0;
	}
	.showcase-item:nth-child(3){
		display: none;
	}
	.showcase-item{
		flex: 0 0 47%;
	}
	.showcase-list > .title {
    	font-size: calc(var(--font-size) * 1.2);
    	margin-bottom: 14px;
	}
	.showcase-list{
		margin: 30px auto 40px;
	}
	.btn.mini-btn div {
    	line-height: 49px !important;
    	font-size: 17px !important;
    	height: 52px !important;
	}
	.why-container {
		padding: 50px 0 0 !important;
	}
	.why-container .why-wrapper > .title {
		font-size: calc(var(--font-size) * 1.5);
		margin-bottom: 50px;
	}
	.why-list{
		flex: 0 0 46%;
		margin-bottom: 50px;
	}
	.why-list .title {
		margin-bottom: 20px;
		height: 2.5em;
	}
	
	.booking-step-container .title{
		font-size: calc(var(--font-size) * 1.5);
		margin-bottom: 0;
	}
	.booking-form-wrapper .title{
		font-size: calc(var(--font-size) * 1.5);
		margin-bottom: 20px;
    	padding-top: 40px;
	}
	.request-field textarea{
		font-size: 16px;
	}

	.page-sp10th .freequote-btn{
		display: block;
	}
	.sp10th-testimonial .swiper-prev-next-btns > *{
		margin-top: calc(-12px - 18px);
		width: 36px;
		height: 36px;
	}
	.sp10th-testimonial .swiper-prev-next-btns .swiper-btn-prev{
		left: 3%;
	}
	.sp10th-testimonial .swiper-prev-next-btns .swiper-btn-next{
		right: 3%;
	}

	.page-sp10th header{
		height: 56px;
		position: fixed;
		z-index: 999;
		background: #fff;
		width: 100vw;
	}
	.page-sp10th header:after{
		display: block;
		height: 56px;
	}
	.page-sp10th header.sticky .header-lt .logo-codecohk{
		width: 170px;
		margin: 0;
	}
}