@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;}
	
	.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;}
	
	[class*="fw"]{flex:0 1 auto;}
	
	h1,h2,h3,h4,h5,h6{line-height: 1.4em}
	
	.cd-top{bottom: 15px;}

	/*------------ Top Navigation ------------*/	
	.header-top .foil{padding:0;}
	
	.top-nav__foil{position: fixed;left:0px; right:0px;}
	.top-nav__foil.row{justify-content: space-between; padding-left: 10px; padding-right: 10px}
	.top-nav__foil .text{display: none;}
	
	.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 ------------*/	
	.header-nav .foil{padding:5px 15px; margin-top: 25px;}
	.header-nav .logo{order:0;padding-top: 10px; padding-bottom: 10px;}
	.header-nav .logo img{height: 80px;}
	
	.header-nav .main-nav__foil{order:2; align-self: center; margin-bottom: 0;}
  .main-nav__foil label[for="mainNav"] {
    display: flex;
    cursor: pointer;
		align-items: center;
  }
	
	.main-nav__foil input#mainNav:checked ~ .main-nav {
		opacity: 1;
		visibility: visible;
		display: flex;
    flex-flow: column nowrap;
    align-items:stretch;
	}

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

  }
	.main-nav__foil .main-nav a{
		border-bottom:1px solid #e9e9e9;
		color:var(--thm-color);
		padding:6px 15px;
		font-size: 16px;
	}
	
	.main-nav__foil .main-nav a::after{display:none}
	
	.header-nav .header-nav__right{order: 1; align-self: center; margin-bottom: 0;}
	.header-nav .header-nav__right .btn.plr-30{padding-left: 10px; padding-right: 10px;}
	
	/*------------ Page footer ------------*/
	.page-footer{background-size:auto 100%;}
	.copyright {font-size: 14px;}
	.footer-nav.row {justify-content: center; gap:0;grid-gap:0; column-gap: 20px;}
	
	
	/*----------- Login/Reset/Request UIs ----------- */	
	.login__foil .image{display: none;}
	
	.login__foil .input__foil,
	.request__foil .input__foil{margin: 20px; padding: 30px}
	
	.login__foil .input__foil .inner.row.aife{align-items: flex-start}
	
	.login__foil .input__foil .title,
	.request__foil .input__foil .title{font-size: 22px;}
	
	.reset__foil .box-01,
	.reset__foil .box-01 .input__foil{padding:20px;}
	
	.reset__foil .guide,
	.reset__foil .guide .mb-30{margin-top: 0; margin-bottom: 0}
	
	/*--------- Home Sections -----------*/
	.home-intro__foil{
		
		background-size: auto 100%;
		background-position: 65% 0;
		background-attachment: scroll;
		
	}
	
	.images__foil .col{grid-row-gap: 100px;}
	.list .item{flex: 1 1 auto;}
	
	.home-book__foil{background-size:auto 100%;background-position: 0;}
}