:root {
  --model-main-color: #002245;
  --model-sec-color: #acb4ba;
  
  --model-text-color: #002245;
}

body {
	color:#ffffff;
}
@media (max-width: 1024px) {
	body {
		background:#ffffff;
		padding-bottom:calc(7vh + 60px);
	}
}

/*===============================
====== CONTAINER & CONTENT ======
===============================*/

/*===== HEADER LOGO =====*/
.header-logo {
	display: none;
}
.header-logo img {
	max-height:6vh;
}
@media (max-width: 1024px) {
	.header-logo {    
		display: flex;
	}
	.header-logo img {
		max-height:3.5vh;
	}
}


/*===============================
====== CONTAINER & CONTENT ======
===============================*/
.container .content {
	position: relative;
	width: 77%;
	display: flex;
	padding:0 1vw;
	flex-direction: column;
	justify-content:space-between;
	gap:3vh;
}

@media (max-width: 1024px) {
	.container .content {
		position:relative;
		width: 100%;
		height:auto;
		padding:0 2vw;
		margin-top:8vh;
		background-size: 100%;
		gap:3vh;
	}
}


/*===================
====== SECTION ======
===================*/
.section {
	position:relative;
	height:90vh;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

@media (max-width: 1024px) {	
	.section {
		height:auto;
		min-height:60vh;
	}
}


/*====== SECTION CONTENT ====== */
.section .content-top {
	position:relative;
}
.section .content-top .top-content {
	position:relative;
	text-align:center;
}

.section .content-top .logo-img {
	display:block;
	width:33vw;
	margin:0 auto;
	line-height:1;
}

.section .content-top h1 {
	margin: 0 auto;
    line-height: 1;
	font-weight: 400;
	font-size: 36px;
}

.section .content-top .top-content {
	width: calc(100% - (7vw * 2));
    margin: 0 auto;
    text-align: right;
}

.section .content-top .section_ttl {
	margin-top:5vh;
	margin-right:-1vw;
	width:fit-content;
	padding:14px 20px;
	font-size:22px;
	font-weight:400;
	line-height:100%;
	color:var(--model-main-color);
	background:var(--model-sec-color);
	border-radius:12px 0 0 12px;
	border:1px solid #ffffff;
}

@media (max-width: 1024px) {
	.section .content-top {
		background-position:center bottom;
	}
	
	.section .content-top .logo-img {
		width:70vw;
	}
	.section .content-top h1 {
		font-size: 18px;
		font-weight: normal;
	}
	.section .content-top .section_ttl {
		margin-top:3vh;
	}
}
.title-text {
    position: relative;
    margin: 0 auto;
	margin-top:1vh;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:2vw;
	color: #ffffff;
	font-weight: bold;
	font-size: 38px;
	line-height: 1;
}
.title-text:before, .title-text:after {
    content: "";
    height: 2px;
    background: #ffffff;
    width: 5%;
}
@media (max-width: 1024px) {
	.title-text {
		font-weight:400;
		font-size:22px;
	}
}
/*===== /HEADER TEXT =====*/

/*====== CUSTOM ======*/
.section.sec1 {
	position:relative;
}
.section.sec1 .content-top {
	height:100%;
	padding-top:8vh;
	background-image:url("../images/main_BG.jpg");
	background-position:center center;
	background-size:cover;
	border-radius:0 0 37px 37px;
	text-align: center;
	flex:1;
}
.section.sec1 .content-top-masc {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:60%;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
	z-index:0;
}
@media (max-width: 1024px) {
	.section.sec1 .content-top {
		padding-top:2vh;
		background-size: 150%;
	}
}

.section.sec4 {
	height: auto;
    justify-content: flex-end;
}
.color-gal {
	height:100%;
}
@media (max-width: 1024px){
	.section.sec4 {
		height: auto;
        min-height: auto;
		justify-content:center;
	}
	.section.sec4:after {
		height:60%;
		display:none;
	}
}


/*======= PRICE ========*/
.section .price_wrap {
	display: flex;
	text-align:left;
	font-size: 30px;
	line-height: 0.7;
	position:relative;
}

.section .price-txt {
	display: block;
    width: min-content;
    padding-left: 2px;
    margin-top: -3px;
    align-self: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 0.8;
}

.section .price {
	font-size:2.2em;
	margin-right:3px;
	font-weight:700;
}

.section .price-cur {
	align-self: end;
    font-size: 24px;
}

.section .price .small {
	font-size:40%;
}

/*===== sub-price =====*/
.sub-price {
	display: block;
    width: 100%;
    padding: 2px 15px;
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--model-main-color);
    border-radius: 8px;
}

@media (max-width: 1024px) {
	.section .price {
		font-size: 44px;
        font-weight: 800;
	}
	.section .price-cur {
		font-size:16px;
	}
	
	.sub-price {
		font-size:22px;
		padding:2px 0;
	}
}

/*====== LIGHTBOX ======*/
#lightbox {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
}
#lightbox img {
	max-width: 95%;
    max-height: 95%;
    padding: 2%;
    border: 1px solid #000000;
    border-radius: 20px;
    background: #ffffff;
}
#close-lightbox {
	position: absolute;
	top: 15px;
	right: 25px;
	color: #ffffff;
	font-size: 30px;
	cursor: pointer;
}

/*===== PLUSIM =====*/
.plusim {
	width:100%;
	display: flex;
    padding: 10px;
    gap: 16px;
    line-height: 1;
    font-size: 18px;
}
.plusim .plusim-data {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.plusim .plusim-data.ver {
	flex-direction:row;
	gap:4px;
}
.plusim .sep {
	position:relative;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.plusim .sep:before {
	content:"";
	position:absolute;
	top:0;
	left:50%;
	height:100%;
	width:1px;
	background:#000000;
	z-index:0;
}
.plusim .sep i {
	font-size: 14px;
    font-style: normal;
    font-weight: 300;
    background: #ffffff;
	z-index:1;
}

@media (max-width: 1024px) {
	.plusim {
        justify-content: center;
		padding-top: calc(70vw * 0.5043 / 2); 	/*7vw -> float img width, 0.5043 -> float img ratio*/
	}
}

.note {
	font-size:14px;
}


/*====== SECTION CONTENT ====== */
.section .content-mid {
	width: 40%;
    margin: 3vh auto 3vh 1vw;
    background: #ffffff;
    display: flex;
	flex-direction:column;
    align-items: center;
	color:var(--model-text-color);
	gap:1vh;
}

.section .content-float {
	position: absolute;
    display: flex;
    align-items: flex-end;
    max-width: 60%;
    top: 100%;
    translate: 0 -50%;
    right: 0;
}

@media (max-width: 1024px) {
    .section .content-mid {
        margin: 0 auto;
        width: auto;
    }
	
	.section .content-float {	
		
        width: 70vw;
        max-width: 70vw;
        right: 50%;
        translate: 50% -50%;
	}
}


/*=============================//
//===== SLIDER SECTION ========//
//=============================*/
.slider-section {
	width:100%;
	position:relative;
	margin-top:auto;
}
.slider-section:before {
	content:'';
	position:absolute;
	width:100%;
	height:50%;
	top:0;
	right:0;
	left:0;
	background:var(--model-main-color);
	border-radius:8px;
}

/*====== SWIPER ======*/
.swiper-container {
	position: relative;
	width:90%;
	margin:0 auto;
	pointer-events: auto;
}
.swiper-container .swiper-slide {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0 12px;
	text-align:center;
	padding-top:9px;
	padding-bottom:9px;
}
.swiper-container .swiper-slide img {
	border-radius: 15px;
    max-height: 100%;
    cursor: pointer;
    box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, .35);
}
.swiper-container .swiper-slide.swiper-slide-active {
}
.swiper-container .swiper-slide.swiper-slide-next {
}
.swiper-container .swiper-slide.swiper-slide-duplicate-prev {
}

.jeneral-gal .swiper-button-next, 
.jeneral-gal .swiper-button-prev {
	left: 20px;
    right: auto;
    width: calc(5% - 6px);
    background: var(--model-sec-color);
    border-radius: 10px 0 0 10px;
	transform: translate(0, -50%);
    top: 50%;
    margin-top: 0;
	z-index:0;
}
.jeneral-gal .swiper-button-next {
	right: 20px;
    left: auto;
    border-radius: 0 10px 10px 0;
}
.jeneral-gal .swiper-button-next:after, 
.jeneral-gal .swiper-button-prev:after {
	font-size: 22px;
    font-weight: bold;
    color: #ffffff;
}

/*====== COLOR GAL ======*/
.color-gal .swiper-container .swiper-slide {
	padding:0;
}
.color-gal .swiper-container .swiper-slide img {
	border-radius: 0;
    box-shadow: none;
}
.color-gal .swiper-container .swiper-pagination {
	direction:ltr;
	bottom:0;
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1vw;
	
	position: static;
    padding: 50px 1vw 3vh 1vw;
    margin-top: -40px;
	border-radius:15px;
    background: var(--model-sec-color);
}

.color-gal .swiper-container .swiper-pagination-bullet {
	border-radius:0;
    background: none;
    width: auto;
    height: auto;
    opacity: 1;
}
.color-gal .swiper-container .swiper-pagination-bullet-active {
	text-decoration:underline;
	color:#000000;
}

.color-gal .swiper-button-next, 
.color-gal .swiper-button-prev {
	right: 20px;
    left: auto;
    width: 60px;
    aspect-ratio: 1;
    height: auto;
    background: var(--model-main-color);
    border-radius: 100%;
}
.color-gal .swiper-button-prev {
	left: 20px;
    right: auto;
}
.color-gal .swiper-button-next:after, 
.color-gal .swiper-button-prev:after {
	font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

/*====== CARCOLOR ======*/
.carcolor-img {
	width:80%;
	margin:0 auto;
}
.carcolor-btns {
	display:flex;
	justify-content:center;
	gap:50px;
}

.carcolor-txt {
	font-size: 14px;
    color: #000000;
	line-height:20px;
}
.carcolor-txt:after {
	content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    height: 20px;
    aspect-ratio: 1;
	border: 2px solid #ffffff;
    border-radius: 100%;
    background: #3b3b3b;
}
.carcolor-txt.black:after {
    background: #0f0f0f;
}
.carcolor-txt.gray:after {
    background: #3a3a3a;
}
.carcolor-txt.silver:after {
    background: #808281;
}
.carcolor-txt.white:after {
    background: #a3a4a8;
}
.carcolor-txt.Hblue:after {
    background: #6487a5;
}
.carcolor-txt.green:after {
    background: #76715e;
}
.carcolor-txt.rock:after {
    background: #8f9094;
}
.carcolor-txt.red:after {
    background: #ca3c4a;
}
.carcolor-txt.Sblue:after {
    background: #263d8d;
}
.carcolor-txt.gold:after {
    background: #aca39e;
}
.carcolor-txt.bronze:after {
    background: #8b8178;
}


@media (max-width: 1024px){
	.slider-section {
		margin-top:0;
		padding-top: 2vh;
	}
	
	.swiper-container .swiper-slide {
		padding:0 6px;
	}
	.swiper-container .swiper-slide img {
		border-radius:6px;
	}
	.jeneral-gal .swiper-button-next, 
	.jeneral-gal .swiper-button-prev {
		height:30px;
		width: calc(5% + 16px);
	}
	.jeneral-gal .swiper-button-next:after,
	.jeneral-gal .swiper-button-prev:after {
		font-size:16px;
	}
	.jeneral-gal .swiper-button-prev {
		left:0;
		right:auto;
	}
	.jeneral-gal .swiper-button-next {
		right:0;
		left:auto;
	}
	
	.color-gal .swiper-container {
		width:100%;
		height:100%;
	}
	.color-gal .swiper-container .swiper-wrapper {
        translate: 0;
	}
	.color-gal .swiper-container .swiper-slide img {
		box-shadow: none;
        border: none;
		padding-right:10%;
		padding-left:10%;
	}
	.color-gal .swiper-button-next, 
	.color-gal .swiper-button-prev {
		width:40px;
		margin-top:-60px;
	}
	.color-gal .swiper-button-next:after, 
	.color-gal .swiper-button-prev:after {
		font-size:16px;
	}
	
	.carcolor-img {
		display: flex;
		height: 50%;
		width: 90%;
		align-items: flex-end;
	}
	.carcolor-txt {
		font-size: 12px;
		font-weight: 400;
		color: #000000;
	}
	.carcolor-txt:after {
		height:10px;
		margin-left:3px;
	}
	
	.color-gal .swiper-container .swiper-pagination {
		padding: 50px 2vw 1vh 2vw;
		gap: 3vw;
		row-gap: 1vh;
	}
}

/*====== SLIDER SECTION ======
============================*/


/*=============================//
//======= CARD SECTION ========//
//=============================*/
.cardSection {
	flex-direction:row;
	height: 45vh;
}

.cardSection .textDiv {
	width:40%;
	background:var(--model-main-color);
	border-radius: 0 8px 8px 0;
}

.cardSection .textDiv p {
	padding:0 2vw;
	font-size:16px;
}

.cardSection .imgDiv {
	position:relative;
	width:60%;
	background-size:cover;
	background-position:center;
	border-radius:8px 0 0 8px;
	display:flex;
	align-items:flex-start;
	justify-content:center;
}
.cardSection.card1 .imgDiv {
	background-image: url('../images/forester_img1.png');
}
.cardSection.card2 .imgDiv {
	background-image: url('../images/forester_img5.png');
}
.cardSection.card3 .imgDiv {
	background-image: url('../images/forester_img2.png');
}
.cardSection .imgDiv .imgDiv-img {
	position:relative;
	margin-top:2vh;
	max-width:60%;
	z-index:1;
}
.cardSection .imgDiv .imgDiv-masc {
display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(0deg, rgba(0, 34, 69, 0) 0%, rgba(0, 34, 69, .6) 50%);
    z-index: 0;
}

.cardSection .listItems {
	display: flex;
    justify-content: space-evenly;
    color: #000000;
    width: 98%;
    margin: 0 auto;
	margin-bottom:1vh;
}
.cardSection .listItems .itemData {
	border-right:1px solid #000000;
	padding:0 5px;
	width:100%;
}
.cardSection .listItems .itemData .line2 {
	display:block;
	font-size:14px;
}


@media (max-width: 1024px) {

	.cardSection {
		flex-direction: column;
		min-height: auto;
		height:auto;
	}
	.cardSection .textDiv {
		width: 100%;
		border-radius: 0 0 15px 15px;
		order: 1;
	}
	.section .content-top .section_ttl {
		margin-top: 5vw;
		margin-right: -2vw;
	}
	.cardSection .imgDiv {
		width: 100%;
		border-radius: 15px 15px 0 0;
		min-height: 30vh;
	}
	.cardSection .listItems .itemData .line1 {
		font-size:18px;
	}
	.cardSection .listItems .itemData .line2 {
		font-size:12px;
		line-height:1;
	}
}

/*===================//
//===== FORM ========//
//===================*/
.form-container {
	background:var(--model-sec-color);
}
#formTop h2 {
	font-size:26px;
	color:#ffffff;
}
.form-title strong {
	color:#ffffff;
}

.areas {
	background:var(--model-main-color);
	color:#ffffff;
}

@media (max-width: 1024px) {
	.areas {
		background:#00aabc;
	}
}
/*====================//
//===== FOOTER =======//
//====================*/

footer {
	padding: 0 1vw;
	padding-bottom:5vh;
	color:#000000;
}
footer a {
	color:var(--model-main-color);
}
@media (max-width: 1024px) {
	footer {
		padding-bottom:0;
	}
}
/*===== /FOOTER =====
===================*/



@media (max-width: 1024px) {
    ._buttons {
		position: fixed;
		height:60px;
		bottom: 7vh;
	}
}