@charset "utf-8";
/* CSS Document */

@media (max-width: 1240px){
	.foil{max-width:100vw;}
	.foil{padding-left:20px; padding-right: 20px}
}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media screen and (max-width:768px){
	
	input.medium,
	input.large,
	input.xlarge{flex: 1 1 auto;width: auto;}
	/*input[type="date"]{flex: 1 1 auto;}*/
	
	.outer {padding-top: 60px; padding-bottom: 60px;}
	.outer .foil{padding-top:0;padding-bottom:0;}
	.inner.row{flex-direction: column; grid-row-gap: 30px; row-gap:30px}
	.inner.row.aic{align-items: stretch;}
	
	
/*	.foil.inner.row.aifs{align-items: stretch}
	.foil.pt-60{padding-top:0;}
	.foil.ptb-60{padding-top:0;padding-bottom:0;}
	.foil.col.aic{align-items: stretch}*/
	
	[class*="fw"]{flex:0 1 auto;}


	/*------------ Top Navigation ------------*/	
	.top-nav__foil .foil{padding:0;}
	
	.top-nav__left .item {padding-top: 10px; padding-bottom: 10px;}
	.top-nav__left .item .tag{display: none}
	
	.top-nav__right .account .sub .tag{display: none;}
	.top-nav__right .account .sub::before{margin-right: 0;}
	
	/*------------ Main Navigation ------------*/	
	
	.main-nav__foil .logo{padding-top: 10px; padding-bottom: 10px;}
	.main-nav__foil .logo img{height: 50px;}
	
  .main-nav__foil label {
    display: flex;
    cursor: pointer;
		align-items: center;
  }
	
	.main-nav__foil input:checked ~ .main-nav {
		opacity: 1;
		visibility: visible;
		display: flex;
    flex-flow: column nowrap;
    align-items:stretch;
	}

	.main-nav {
    position: absolute;
    opacity: 0;
    visibility: collapse;
		display:none;
    top: 48px;
    right: 30px;
    background: #fff;
		border:2px solid #e9e9e9;
		z-index: 111;

  }
	.main-nav a:not(:last-of-type){
		border-bottom:1px solid #e9e9e9;
		color:var(--thm-color);
		padding:10px 15px;
		font-size:16px;
	}
	
	.main-nav a:not(:last-of-type)::after{display:none}
	.main-nav a:not(:last-of-type)::before{display:none}
	
	.page-footer{
		background: linear-gradient(to right, rgba(var(--thm-black-rgb),.85) 50%, rgba(var(--thm-black-rgb),.85) 50%), url("../images/bg/bg-04.png");
		background-size: cover;
		background-attachment: fixed;
	}
	
	.copyright {font-size: 14px;}
	.footer-nav.row {justify-content: center; gap:0;grid-gap:0; column-gap: 20px;}
	
	/*------------------------ Intro Section ------------------------------*/	
	#intro .image img{height: 120px;}
	
	/*----------- Make Appointment ----------- */	
	.appointment__foil .input__foil .step-01{padding:30px;}
	.appointment__foil .input__foil .step-02,
	.appointment__foil .input__foil .step-03,
	.appointment__foil .input__foil .step-04{padding:20px;}
	.appointment__foil .step-02 .main{min-width: auto}
	
	.appointment__foil .step-04 .content{padding:20px;}
	.appointment__foil .step-04 .content .fw-200{flex: 0 0 120px}
	
	.appointment__foil .input__foil .title{font-size:22px;}
	
	.calender-slots__foil {font-size:12px; line-height: 1.4em;column-gap: 10px}
	.calender-slots {row-gap:10px;grid-row-gap: 10px;}
	.calender-slots .slot{padding:5px;}
	.calender__foil .ui-datepicker.ui-datepicker-inline {width: auto !important;}
	
	.products__foil .title{text-align:center}
}