/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white: #ffffff;
@black: #191919;
@l_black: #333333;
@gray: #c6c6c6;
@l_gray: #eeeeee;
@d_gray: #afafaf;
@dd_gray: #777777;
@bg_gray: #DDDDDD;
@l_red: #ffcfcf;
@red: #CC1E1E;
@d_red: #FF0000;
@yellow: #f9f40c;
@l_yellow: #ffe6b5;
@d_yellow: #bb8210;
@l_blue: #96F0FC;
@zalo_blue: #0068FF;
@blue: #0285b2;
@d_blue: #163b84;
@dd_blue: #3B5998;
@text_blue: #0085B2;
@green: #59b559;
@l_green: #d2edd2;
@d_green: #064b66;
@violet: #8243c4;
@d_violet: #58278c;
@sky: #dff7fd;
@l_sky: #c9effb;
@brown: #926834;
@pink: #fdc0c0;
@orange: #ec7c30;


/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&family=Zen+Old+Mincho&display=swap');

@font-face{
	font-family:'oswald_medium';
	src:url('/font/Oswald-Medium.ttf');
}
@font-face{
	font-family:'oswald_bold';
	src:url('/font/Oswald-Bold.ttf');
}

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
	font-family: 'Nunito', sans-serif;
	font-size:14px;
	color:@black;
	/* background-color:@dd_gray; */
	/* letter-spacing:0.5px; */
	line-height: normal;
	box-sizing:border-box;
	scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Playfair Display', serif;
}
a{
	font-size:14px;
	color:@black;
	text-decoration:none;

	@media(min-width:769px){
		&:hover{
			text-decoration:none;
		}
	}
}
img{
	max-width:100%;
	vertical-align:bottom;
}
ul{
	margin:0;
	padding:0;

	li{
		list-style:none
	}
}
dl{
	margin:0;
	
	dd{
		margin:0;
	}
}

/*----- スマホ用は非表示 -----*/
.mb{
	display:none;
}
/*---------- デフォルトスタイルのリセット ----------*/
input[type="text"], input[type="email"], input[type="password"], textarea{
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select{
	border:none;
	border-radius:0;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:10px 20px 10px 10px;
	background-image:url('/images/select_cursor.png');
	background-position:center right 10px;
	background-repeat:no-repeat;
	background-size:10px;
}
button{
	position:relative;
	border:none;
	border-radius:0;
	cursor:pointer;
	overflow:hidden;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;

	&:before{
		content:'';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:@black;
		opacity:0;
		transition:0.3s;
	}
	@media(min-width:769px){
		&:hover:before{
			opacity:0.3;
		}
	}
	&:disabled:before{
		content:none;
	}
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:@gray;
}

/*---------- error ----------*/
.error{
	background-color:@pink !important;
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
::-webkit-scrollbar-track{
	background:@gray;
}
::-webkit-scrollbar-thumb{
	background:@dd_gray;
	box-shadow:inset 0 0 0 1px @gray;
}

/*---------- loading ----------*/
.loading{
	display:none;

	&.active{
		display:block;
		position:fixed;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background:rgba(0, 0, 0, 0.5);
		z-index:1000;
		
		span{
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			width:100%;
			text-align:center;
	
			i{
				font-size:50px;
				color:@white;
			}
		}
	}
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.mobile{
		display:none !important;
	}	
}

/*---------- animation ----------*/
.scroll_top{
	transform:translateY(60px);
	transition:1s;
	opacity:0;

	&.scroll_top_fade{
		transform:translateY(0);
		opacity:1;
	}
}
.scroll_right{
	transform:translateX(60px);
	transition:1s;
	opacity:0;

	&.scroll_right_fade{
		transform:translateX(0);
		opacity:1;
	}
}

.fadein_border{
	position:relative;

	&.active{
		&:before{
			content:'';
			position:absolute;
			top:5px;
			left:5px;
			width:calc(~'100% - 11px');
			height:calc(~'100% - 11px');
			border-top:1px solid @white;
			border-right:1px solid @white;
			z-index:10;
			animation-duration:1s;
			animation-iteration-count:1;
			animation-timing-function:ease-out;
			animation-name:fadein_border_be;
	
			@keyframes fadein_border_be{
				0%, 40%{
					width:0;
					height:0;
				}
				70%{
					width:calc(~'100% - 11px');
					height:0;
				}
				100%{
					width:calc(~'100% - 11px');
					height:calc(~'100% - 11px');
				}
			}
		}
		&:after{
			content:'';
			position:absolute;
			right:5px;
			bottom:5px;
			width:calc(~'100% - 11px');
			height:calc(~'100% - 11px');
			border-bottom:1px solid @white;
			border-left:1px solid @white;
			z-index:10;
			animation-duration:1s;
			animation-iteration-count:1;
			animation-timing-function:ease-out;
			animation-name:fadein_border_af;
	
			@keyframes fadein_border_af{
				0%, 40%{
					width:0;
					height:0;
				}
				70%{
					width:calc(~'100% - 11px');
					height:0;
				}
				100%{
					width:calc(~'100% - 11px');
					height:calc(~'100% - 11px');
				}
			}
		}
	}
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100px;
	background-color:@white;
	z-index:1000;
}
.header_container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	height:100%;
	z-index:2;
}
.header_logo{
	padding-left:20px;

	a{
		display:block;

		img{
			width:300px;
		}
	}
}
.header_nav{
	display:flex;
	align-items:center;
	gap:20px;

	> a{
		font-size:16px;
		color:@black;
		transition:0.3s;

		@media(min-width:769px){
			&:hover{
				color:@d_gray;
			}
		}
	}
	.contact{
		img{
			width:100px;
			transition:0.3s;

			@media(min-width:769px){
				&:hover{
					opacity:0.7;
				}
			}
		}
	}
}
.header_mobile{
	display:none;
}


/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
.footer_special{
	position: fixed;
    bottom: 0;
    /* width: 100%; */
    right: 0;
    left: 0;
    z-index: 100;

	.footer_links{
		background: #000;

		.contact_link_note{
			display:flex;
			justify-content:center;
			align-items:center;
			width: 100%;
			height:49px;
			font-family: 'Playfair Display', serif;
			font-size:24px;
			color: @yellow;
			background: @text_blue;
			border-bottom: 1px solid @white;
		}
		.footer_link_list{
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.link_button{
				display: flex;
				height: 50px;
				align-items: center;
				justify-content: center;

				img{
					width: 30px;
					height: auto;
				}
			}
			.mail{
				background: @text_blue;
			}
			.face{
				background: @dd_blue;
			}
			.zalo{
				background: @zalo_blue;
			}
			a:hover{
				opacity:0.8;
			}
		}
	}
}


/*---------------------------------------------*/
/*-------------------- top --------------------*/
/*---------------------------------------------*/
.main_wrap{
	padding-top: 100px;
}
.kv_section{
	background-image: url("/images/lp_images/kv_bg_img.webp");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	/* margin-bottom: 100px; */
}
.kv_contents{
	width: 100%;
	display: flex;
	justify-content: space-between;	
	padding: 39px 50px 40px 46px;
	box-sizing: border-box;

	.kv_title{
		padding-top: 81px;

		.u_title_note{
			font-size: 28px;
		}
		.title{
			font-size: 60px;
			font-weight: bold;
			margin-bottom: 30px;
		}
		.detail{
			font-size: 34px;
		}
	}
	.kv_img{
		max-width: 400px;
	}
}
.lp_page{
	padding-bottom:50px;

	.kv_contents{
		position: relative;

		.page_title{
			position: absolute;
			right: 0;
			z-index: -1;
		}
	}
	.title {
		font-family: 'Playfair Display', serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size: inherit;
		font-weight: inherit;
	}
	
	.lp_section_1{
		padding: 0 20px;
		margin-top: 100px;

		.lp_section_content{
			max-width: 1100px;
			margin: 0 auto;

			.title{
				/* font-size: 45px; */
				font-size:30px;
				margin-bottom: 24px;
				font-weight: 500;

				p{

				}
				span{
					font-size: 70px;
					color: @d_red;
				}
			}
			.detail{
				display: flex;
				font-size: 30px;
				gap: 40px;

				.text_box{
					width: 70%;
					padding-top: 36px;
					line-height: 50px;

					.blue_text{
						font-size:30px;
						color: @blue;
						margin-bottom: 30px;
					}
				}
				.img_box{
					width: 30%;
				}
			}
		}
	}
	.lp_section_2{
		padding: 0 20px;
		margin-top: 100px;

		.lp_section_content{
			background-color: @bg_gray;
			max-width: 1380px;
			margin: 0 auto;
			padding:20px;
			border-radius: 30px;

			.title{
				/* font-size: 40px; */
				font-size:30px;
				text-align: center;
				/* margin-bottom: 60px; */
				margin: 20px 0 40px;
				font-weight: 500;

				h3{

				}
			}
			.detail{
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				gap:10px;

				.contnent_box{
					width: 560px;
					background-color: @white;
					padding:20px;
					border-radius: 30px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap:5px;
					box-sizing: border-box;

					.content{
						font-size: 16px;
						display: flex;
						align-items: center;
						gap: 10px;
						height:90px;

						img{
							width: 40px;
						}
					}

					@media(max-width:840px){
						.content{
							height:100px;
						}
					}
					.content:last-child{
						margin-bottom: 0;
					}
				}
				.detail_arrow_box{
					display: flex;
					align-items: center;
					.detail_arrow{
						max-width: 100px;
						height: auto;
					}
				}
			}
			.detail::before{
				position: absolute;
				background-image: url("images/lp_images/blue_right_arrow.webp");
				background-repeat: no-repeat;
				background-size: contain;
				height: 80px;
				width: 100px;
				top: 50%;
				left: 50%;
				transform: translate(50%, 50%);
			}
		}
	}
	.lp_section_3{
		padding: 0 20px;
		margin-top: 100px;
		
		.lp_section_content{
			max-width: 1380px;
			margin: 0 auto;

			.title{
				display: flex;
				gap: 50px;
				align-items: center;
				justify-content: center;
				margin-bottom: 100px;

				.img_box{
					max-width: 250px;
				}
				h3{
					display: inline-block;
					max-width: 870px;
					font-size: 30px;
					font-family: 'Nunito', sans-serif;

					.spe_text{
						font-size: 40px;
						background-image: linear-gradient(#f6ff1d, #f6ff1d);
						background-size: 100% 10px; 
						background-repeat: no-repeat;
						background-position: 0 87%;
					}
					.small_text{
						font-size: 30px;
					}
					.blue_text{
						font-size:30px;
						color: @blue;
					}
				}
			}
			.detail{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap:20px;

				.contnent_box{
					position: relative;
					height: 100%;
					text-align: center;
					padding: 150px 0 170px;
					display: inline-block;
					overflow: hidden;
					border-radius: 30px;
					box-sizing: border-box;

					.bg_img{
						position: absolute;
						z-index: 10;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						object-fit: cover;
						filter: brightness(90%);
					}
					.poster_tex_box{
						position: absolute;
						left: 16px;
						top: 30px;
						font-size: 23px;
						z-index: 30;
						color: @white;
						text-align: left;
						text-shadow: 4px 4px 2px rgba(37, 37, 37, 0.7);
						transform: rotate(-6deg); 
						display: inline-block;
					}
					.poster_tex{
						position: relative;
						z-index: 0;
						display: inline-block;
						padding-right: 10px;
						font-weight: bold !important;
					}
					.poster_tex::after {
						content: "";
						position: absolute;
						left: 0;
						bottom: 4px;
						width: 100%;
						height: 10px;
						background-color:#015fff;
						transform-origin: left bottom;
						z-index: -1;
					}
					.poster_tex_line_2{
						margin-left: 20px;
						white-space: nowrap;
					}
					h4{
						font-size: 50px;
						position: relative;
						z-index: 30;
						color: @white;
						font-weight: 900;
						text-shadow: 4px 4px 0 rgba(37, 37, 37, 0.7);
					}
					.note_text{
						position: absolute;
						z-index: 30;
						text-align: left;
						background-color: rgba(255, 255, 255, 0.7);
						border-radius: 20px;
						height: 128px;
						display: flex;
						align-items: center;
						padding:15px;
						right: 0;
						bottom: 0;
						box-sizing: border-box;

						p{
							font-size: 20px;
							font-weight: bold !important;
						}
						.spe_text{
							font-size: 26px;
						}
						.blue_text{
							color: @blue;
						}
						.red_text{
							color: @red;
						}
					}
				}
			}
		}
	}
	.lp_section_4{
		padding: 0 20px;
		/* margin-bottom: 100px; */
		margin-top: 100px;

		.lp_section_content{
			background-color: @bg_gray;
			max-width: 1380px;
			margin: 0 auto;
			padding: 50px 40px;
			border-radius: 30px;

			.title{
				font-size: 30px;
				text-align: center;
				margin-bottom: 50px;
				color: @text_blue;
				font-weight: bold;

				h3{

				}
			}
			.detail{
				display: flex;
				justify-content: center;
				position: relative;
				gap: 40px;
				margin-bottom: 50px;
				position: relative;

				.contnent_box{
					max-width: 320px;
					text-align: center;
					padding: 20px;
					background: @white;
					border-radius: 20px;

					.img_box{
						height: 181px;
						display: flex;
						justify-content: center;

						img{
							height: 100%;
							width: auto;
						}
					}
					.title_box{
						height: 60px;
						display: flex;
						font-size: 24px;
						font-weight: bold;
						justify-content: center;
						align-items: flex-end;
						margin-bottom: 12px;
					}
					.content_box{
						font-size: 16px;
						width: 100%;
						text-align: left;
						line-height: 28px;
					}
				}
			}
			.section_content_link{
				text-align: center;

				a{
					padding: 20px 192px;
					background: @text_blue;
					color: @yellow;
					font-size: 24px;
					font-weight: bold;
					display: inline-block;
					border-radius: 36px;
				}

				a:hover{
					opacity:0.8;
				}
			}
		}
	}
	.lp_section_5{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		line-height: 1;
		margin-bottom: 100px;
		max-width: 1380px;
		margin: 0 auto;
		padding: 0 20px;
		gap: 20px;
		margin-top: 100px;

		.common_column {
			position: relative;

			.text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 20px;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 10px;
				text-align: center;
				box-sizing: border-box;
				z-index: 2;

				h2 {
					font-size: 40px;
					color: @white;
				}
				p {
					font-size: 15px;
					line-height: 1.8;
					color: @white;
				}
			}

			.img {
				position: relative;
				height: 300px;
				overflow: hidden;
				z-index: 1;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: 0.3s;
				}

				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
			}
			.img.youtube_img {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ededed;
			}
			.img.youtube_img img {
				width: 60%;
				height: auto;
			}
			.img.youtube_img:before {
				/* background-image: linear-gradient(0deg, #ff0000, #ff4d00, #ff7300, #ffb300, #ffffff); */
				/* opacity: 0.7; */
			}
			.img.facebook_img {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ededed;
			}
			.img.facebook_img img {
				width: 60%;
				height: auto;
			}
			.img.facebook_img:before {
				/* background-image: linear-gradient(0deg, #ff0000, #ff4d00, #ff7300, #ffb300, #ffffff); */
				/* opacity: 0.7; */
			}
			.img.case_study_img::before {

				background-color: @black;
				opacity: 0.4;
			}
			a {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 30;
			}
			&:before {
				content: '';
				position: absolute;
				top: 5px;
				left: 5px;
				width: calc(~"100% - 11px");
				height: calc(~"100% - 11px");
				border-top: 1px solid @white;
				border-right: 1px solid @white;
				z-index: 10;
				animation-duration: 1s;
				animation-iteration-count: 1;
				animation-timing-function: ease-out;
				animation-name: fadein_border_be;
			}
			&:after {
				content: '';
				position: absolute;
				right: 5px;
				bottom: 5px;
				width: calc(~"100% - 11px");
				height: calc(~"100% - 11px");
				border-bottom: 1px solid @white;
				border-left: 1px solid @white;
				z-index: 10;
				animation-duration: 1s;
				animation-iteration-count: 1;
				animation-timing-function: ease-out;
				animation-name: fadein_border_af;
			}
			&:hover .img img {
				transform: scale(1.1);
			}
		}
	}
}
.banner_contents{
	/* background:#e9f2ff; */
	padding: 0 20px;
    margin-top: 100px;

	a{
		display: block;
		margin: 0 auto;
		max-width: 1200px;
		padding: 0 20px;

		img{
			width: 100%;
			box-shadow:0 0 8px gray;
		}
	}
}


/*---------------------------------------------*/
/*------------------ contact ------------------*/
/*---------------------------------------------*/
.contact_page{
	padding: 20px 20px 50px;

	.contact_form{
		max-width: 900px;
		margin: 0 auto;

		.card_contact_form{

			.form_content{
				margin-bottom: 80px;
			}
			.form_title{
				text-align: center;
				margin-bottom: 80px;

				h2{
					color: @text_blue;
					font-size: 30px;
					border-bottom: 1px solid @text_blue;
					padding-bottom: 5px;
					display: inline-table;
				}
			}
			.row{
				margin-top: 20px;

				.col_2{
					display: grid;
					grid-template-columns: 250px 1fr;
					margin-bottom: 30px;

					.label_title{
						font-weight: bold;
					}
					input{
						border: 1px solid @gray;
						padding: 10px 20px;
						font-size: 18px;
						font-family: 'Nunito', sans-serif;
					}
				}
			}
			.checkbox_list{
				display: grid;
				grid-template-columns: 1fr;
				gap: 30px;

				input{
					width: 20px;
					height: 20px;					
				}
				label{
					display: flex;
					align-items: center;
					gap: 10px;
				}
				.input_error {
					border: 1px solid @l_red !important;
				}
			}
			#other_reason{
				border: 1px solid @gray;
				padding: 10px 20px;
				font-size: 18px;
				font-family: 'Nunito', sans-serif;
				width: 100%;
				resize: vertical;
			}
			#timeframe{
				border: 1px solid @gray;
				padding: 10px 20px;
				font-size: 18px;
				font-family: 'Nunito', sans-serif;
			}
			.actions{

				.submit_note{
					margin-bottom: 20px;
				}
				a{
					font-size: 23px;
					background: @text_blue;
					padding: 10px 30px;
					color: @white;
					box-sizing: border-box;
					display: block;
					text-align: center;
				}
			}
			.red_point{
				color: @red;
			}
			.contact_thanks_form{
				text-align: center;

				h2{
					font-size: 30px;
					margin-bottom: 50px;
				}
				p{
					font-size: 20px;
				}
			}
		}
	}
	.input_error {
		background-color: @l_red !important;
	}
}


/*---------------------------------------------*/
/*------------------ company ------------------*/
/*---------------------------------------------*/
.company_page{
	padding: 20px 20px 50px;

	.page_content{
		max-width: 1100px;
		margin: 0 auto;
		font-size: 18px;
		
		.text_img_style{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin-bottom: 100px;

			.text_box{

				.title{
					font-size: 28px;
					margin-bottom: 20px;
				}
				p{
					margin-bottom: 20px;
				}
				.note{
					text-align: end;
					margin-top: 40px;

					h4{
						font-size: 22px;
						font-family: 'Nunito', sans-serif;
					}
				}
			}
			.img_box{
				text-align: center;

				img{
					max-width: 500px;
					width: 100%;
				}
			}
		}
		.img_style{
			text-align: center;
			font-size: 16px;
			margin-bottom: 50px;

			img{
				width: 900px;
			}
			p{
				margin-top: 16px;
			}
		}
		.table_style{

			table{
				width: 100%;
				border-collapse: collapse;

				tr{

					th{
						color: @blue;
						border: 2px solid @l_gray;
						padding: 10px 20px;
					}
					td{
						border: 2px solid @l_gray;
						padding: 10px 20px;
					}
				}
				.flex_box{
					display: flex;
					flex-direction: column;
					gap: 10px;

					.address_box{
						display: flex;
						gap: 10px;
						align-items: center;
	
						.note{
							color: @white;
							background: @blue;
							padding: 8px 0;
							width: 160px;
							display: inline-block;
							text-align: center;
						}
					}
				}
			}
		}
	}
}


/*---------------------------------------------*/
/*-------------------- faq --------------------*/
/*---------------------------------------------*/
.faq_page{
	padding: 20px 20px 50px;

	.page_content{
		max-width: 1100px;
		margin: 0 auto;
		font-size: 22px;
		
		.content_container{

			.faq_select_section{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				align-items: center;
				justify-items: center;
				margin-bottom: 50px;
				gap: 10px;
				padding: 10px 0;

				a{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 50px;
					font-size: 18px;
					color: @white;
					background-color: @blue;
					border-radius: 10px;
				}
			}
			.sticky_section{
				position: sticky;
				top: 100px;
				z-index: 90;
				background: @white;
			}
			.que_ans_content{
				scroll-margin-top: 180px;
				margin-bottom: 100px;

				.que_ans_title{

					h2{
						color: @blue;
						font-size: 32px;
						display: flex;
						justify-content: center;
						align-items: center;
						word-break: auto-phrase;
						white-space: nowrap;
						margin-bottom: 50px;
						text-align: center;

						&::before, &::after {
							content: '';
							background: @blue;
							height: 1px;
							width: 45%;
						}
						&::before {
							margin-right: 30px;
						}
						&::after {
							margin-left: 30px;
						}
					}
				}
				.que_ans_lists{
					display: grid;
					grid-gap: 20px;

					.que_ans_box{
						position: relative;
						cursor: pointer;
						transition: 0.3s;

						.que_box{
							position: relative;
							cursor: pointer;
							transition: 0.3s;
							border: 1px solid @gray;

							&:before {
								content: '';
								position: absolute;
								top: calc(45%);
								right: 20px;
								width: 10px;
								height: 10px;
								border-right: 2px solid #777777;
								border-bottom: 2px solid #777777;
								transform: translateY(-50%) rotate(45deg);
							}
						}
						.ans_box{
							border: 1px solid @gray;
							background: @l_gray;
							border-top: none;
						}
						dl{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							grid-gap: 20px;
							margin: 0;
							padding: 10px 40px 10px 20px;
							font-size: 18px;
							background: @white;

							dt{
								font-size: 28px;
								font-weight: bold;
							}
							dd{

							}
							dl dd {
								margin: 0;
							}
						}
						.blue{
							color: @blue;
						}
						.red{
							color: @red;
						}
					}
				}
			}
		}
	}
}


.page_wrap{
	padding:100px 0;
}

.breadcrumbs{
	display:flex;
	align-items:center;
	gap:5px;
	margin-bottom:100px;

	a{
		font-size:12px;
		font-weight:bold;
		color:@blue;
		text-decoration:underline;
	}
	span{
		font-size:12px;
		font-weight:bold;
	}
}

/*-------------------- product --------------------*/
.product_kv{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:20px;
	height:300px;
	background-image:url('/images/contact/bg_stitle.jpg');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	overflow:hidden;

	h1{
		font-size:36px;
		line-height:1.5;
		text-align:center;
		text-shadow:5px 5px 12px rgba(255, 255, 255, 0.3), 
			-5px 5px 12px rgba(255, 255, 255, 0.3), 
			5px -5px 12px rgba(255, 255, 255, 0.3);
		color:@white;
	}
	p{
		font-size:16px;
		line-height:1.5;
		text-align:center;
		color:@white;
	}
}
.product_section{
	padding:20px 0 50px;
}
.product_wrap{
	max-width:1100px;
	margin:0 auto;
	padding:0 20px;
}
.product_title{
	margin-bottom:50px;
	text-align:center;

	h2{
		margin-bottom:10px;
		font-size:28px;
	}
	p{
		font-size:16px;
		font-weight:bold;
		color:@blue;
	}
}
.product_text{
	max-width:900px;
	margin:0 auto 50px;

	p{
		font-size:16px;
		font-weight:bold;
		line-height:1.5;
	}
}
.product_container{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:50px;

	.box{
		position:relative;

		.img{
			height:300px;
			margin-bottom:10px;

			img{
				width:100%;
				height:100%;
				object-fit:contain;
				transition:0.3s;
			}
		}
		h3{
			margin-bottom:20px;
			font-size:18px;
			text-align:center;
		}
		p{
			margin-bottom:50px;
			font-size:16px;
			line-height:1.5;
		}
		.link{
			display:block;
			position:relative;
			width:100%;
			padding:20px 0;
			font-size:16px;
			text-align:center;
			color:@yellow;
			background-color:@d_green;
			border-radius:10px;
			transition:0.3s;

			&:before{
				content:'»';
				position:absolute;
				top:50%;
				right:20px;
				transform:translateY(-50%);
				font-size:20px;
				line-height:1;
				color:@white;
			}
		}
		a{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		&:hover{
			.img{
				img{
					opacity:0.7;
				}
			}
			.link{
				opacity:0.7;
			}
		}
	}
}

.pd_section{
	padding:50px 0;
}
.pd_headline{
	position:relative;
	text-align:center;
	
	&:before{
		content:'';
		position:absolute;
		top:50%;
		left:0;
		width:100%;
		height:100px;
		transform:translateY(-50%);
		background-color:@sky;
		z-index:1;
	}
	h2{
		position:relative;
		font-size:64px;
		font-style:italic;
		z-index:2;

		span{
			font-size:80px;
		}
		.blue{
			color:@blue;
		}
		.orange{
			color:@orange;
		}
	}
}

.pd_section_1{
	padding-bottom:100px;

	.container{
		display:grid;
		grid-template-columns:1fr 30%;
		gap:100px;

		&.half{
			grid-template-columns:repeat(2, 1fr);
		}
		.box{
			.headline{
				.label{
					display:inline-block;
					margin-bottom:20px;
	
					span{
						position:relative;
						display:flex;
						align-items:center;
						height:40px;
						padding:0 10px;
						font-size:14px;
						color:@white;
						background-color:@red;
						box-sizing:border-box;
	
						&:after{
							content:'';
							position:absolute;
							top:0;
							right:-20px;
							bottom:0;
							border-right:20px solid transparent;
							border-bottom:40px solid @red;
						}
					}
				}
				p{
					margin-bottom:5px;
					font-size:16px;
					font-weight:bold;
					color:@blue;
				}
				h2{
					font-size:24px;

					span{
						display:inline-block;
						margin-left:20px;
						font-size:16px;
					}
				}
			}
			.icon{
				display:flex;
				justify-content:flex-end;
				align-items:flex-end;
				gap:10px;
				margin-top:20px;
				
				img{
					width:70px;
				}
			}
			.text{
				margin-top:20px;
				font-size:16px;
				line-height:1.5;
			}
			table{
				width:100%;
				margin-top:20px;
				border-collapse:collapse;

				th{
					padding:20px;
					font-size:18px;
					font-style:italic;
					text-align:center;
					background-color:@l_gray;
					border:1px solid @d_gray;
				}
				td{
					padding:20px;
					font-size:18px;
					font-style:italic;
					text-align:center;
					border:1px solid @d_gray;
				}
			}
		}
		.img{
			&.col2{
				display:grid;
				grid-template-columns:repeat(2, 1fr);
				gap:10px;
			}
			img{
				width:100%;
			}
		}
	}
}

.pd_section_2{
	margin-bottom:100px;
	padding:100px 0;
	background-image:url('/images/hyperstrongcool/bg_video.png');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;

	.video{
		position:relative;
		padding-bottom:56.25%;

		iframe{
			display:block;
			position:absolute;
			width:100%;
			height:100%;
		}
	}
}

.pd_section_3{
	padding-bottom:100px;

	.container{
		display:grid;
		gap:50px;

		.row{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			gap:20px 50px;

			&.max{
				grid-template-columns:1fr;
			}
			.box{
				.title{
					display:flex;
					align-items:center;
					gap:10px;
					margin-bottom:20px;

					img{
						width:80px;
					}
					h2{
						font-size:20px;
						line-height:1.5;
						color:@blue;
					}
				}
				.adjust{
					padding-left:40px;

					img{
						margin-bottom:20px;
						width:100%;
					}
					h3{
						margin-bottom:15px;
						font-size:20px;
						color:@blue;
					}
					p{
						font-size:16px;
						line-height:1.5;

						.red{
							color:@red;
						}
					}
				}
			}
			.img{
				h3{
					margin-bottom:20px;
					font-size:20px;
					text-align:center;
				}
				img{
					width:100%;
				}
				.img_note{
					margin-top: 8px;
					text-align: center;
				}
			}
			.flex{
				display:grid;
				grid-template-columns:repeat(2, 1fr);
				gap:50px;
				margin-top:50px;

				&.col3{
					grid-template-columns:repeat(3, 1fr);
				}
				.flex_box{
					.img{
						margin-bottom:10px;
						height:200px;

						img{
							width:100%;
							height:100%;
							object-fit:contain;
						}
					}
					h3{
						margin-bottom:15px;
						font-size:18px;
						color:@blue;
						text-align:center;
					}
					p{
						font-size:16px;
						line-height:1.5;
						text-align:center;
					}
					.tl{
						text-align:left;
					}
				}
			}
			.link{
				display:flex;
				justify-content:center;
				margin-top:50px;

				a{
					position:relative;
					width:100%;
					max-width:600px;
					padding:30px 0;
					font-size:18px;
					font-weight:bold;
					text-align:center;
					color:@yellow;
					background-color:@blue;
					border-radius:10px;
					transition:0.3s;

					&:after{
						content:'»';
						position:absolute;
						top:50%;
						right:20px;
						transform:translateY(-50%);
						font-size:20px;
						line-height:1;
						color:@white;
					}
					&:hover{
						opacity:0.7;
					}
				}
			}
			.notes{
				margin-top:50px;

				dl{
					display:grid;
					grid-template-columns:250px 1fr;
	
					dt{
						font-size:18px;
						font-weight:bold;
						line-height:1.8;
						color:@blue;
					}
					dd{
						p{
							position:relative;
							margin-bottom:10px;
							padding-left:15px;
							font-size:18px;
							line-height:1.5;
	
							&:before{
								content:'*';
								position:absolute;
								top:3px;
								left:0;
							}
						}
					}
				}
			}
			.faq{
				display:grid;
				gap:50px;

				dl{
					display:grid;
					gap:20px;

					dt{
						display:grid;
						grid-template-columns:30px 1fr;
						align-items:center;
						gap:20px;
						font-size:16px;
						font-weight:bold;

						span{
							font-size:18px;
							font-weight:bold;
							color:@blue;
						}
					}
					dd{
						padding:20px;
						font-size:16px;
						background-color:@l_gray;
						border-radius:10px;
					}
				}
			}
			.sub_text{
				margin-top:20px;

				h3{
					margin-bottom:20px;
					font-size:20px;
					text-align:center;
					color:@blue;
				}
				p{
					font-size:16px;
					line-height:1.5;
				}
			}
			.option{
				ul{
					display:grid;
					gap:20px;
					margin-top:20px;

					li{
						h2{
							margin-bottom:20px;
							font-size:20px;
							color:@blue;
						}
						h3{
							margin-bottom:5px;
							font-size:16px;
						}
						.text{
							p{
								position:relative;
								margin-bottom:5px;
								padding-left:15px;
								font-size:16px;
								line-height:1.5;

								&:before{
									content:'*';
									position:absolute;
									top:3px;
									left:0;
								}
							}
						}
					}
				}
			}
		}
	}
}

.pd_section_4{
	padding-bottom:100px;
	scroll-margin-top: 110px;

	.pd_type{
		display:flex;
		justify-content:center;
		margin-bottom:20px;
		border-bottom:1px solid @blue;

		p{
			padding:20px 50px;
			font-size:18px;
			font-weight:bold;
			color:@white;
			background-color:@blue;
			border-top-right-radius:10px;
			border-top-left-radius:10px;
		}
	}
	.container{
		display:grid;
		grid-template-columns:1fr 30%;
		align-items:center;
		gap:50px;

		.box{
			h2{
				margin-bottom:20px;
				font-size:24px;
				color:@blue;
			}
			p{
				font-size:16px;
				line-height:1.5;
			}
		}
		.img{
			img{
				width:100%;
			}
		}
	}
	.table{
		margin-top:50px;

		p{
			margin-bottom:20px;
			font-size:16px;
		}
		table{
			width:100%;
			margin-bottom:20px;
			border-collapse:collapse;

			tr{
				th{
					padding:20px;
					font-size:16px;
					line-height:1.5;
					text-align:left;
					background-color:@l_gray;
					border:1px solid @d_gray;
				}
				td{
					padding:20px;
					font-size:16px;
					line-height:1.5;
					border:1px solid @d_gray;
				}
			}
		}
		.notes{
			p{
				position:relative;
				margin-bottom:5px;
				padding-left:15px;
				font-size:18px;
				line-height:1.5;

				&:before{
					content:'*';
					position:absolute;
					top:3px;
					left:0;
				}
			}
		}
	}
	.link{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:20px;
		margin-top:50px;

		a{
			position:relative;
			width:100%;
			max-width:600px;
			padding:30px 0;
			font-size:18px;
			font-weight:bold;
			text-align:center;
			color:@yellow;
			background-color:@blue;
			border-radius:10px;
			transition:0.3s;

			&:after{
				content:'»';
				position:absolute;
				top:50%;
				right:20px;
				transform:translateY(-50%);
				font-size:20px;
				line-height:1;
				color:@white;
			}
			&:hover{
				opacity:0.7;
			}
		}
	}
}

.pd_section_5{
	padding-bottom:100px;

	.headline{
		margin-bottom:50px;

		h2{
			font-size:24px;
			color:@blue;
		}
	}
	.link{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:20px;
		margin-top:50px;

		a{
			display:block;
			position:relative;
			width:100%;
			max-width:600px;
			padding:30px 0;
			font-size:18px;
			font-weight:bold;
			text-align:center;
			color:@yellow;
			background-color:@d_green;
			border-radius:10px;
			transition:0.3s;

			&:before{
				content:'»';
				position:absolute;
				top:50%;
				right:20px;
				transform:translateY(-50%);
				font-size:20px;
				line-height:1;
				color:@white;
			}
			&.white{
				font-size:18px;
				color:@black;
				background-color:@white;
				outline:2px solid @blue;
				outline-offset:-2px;

				&:before{
					color:@blue;
				}
			}
			&:hover{
				opacity:0.7;
			}
		}
	}
}

/*---------------------------------------------*/
/*---------------- case page ------------------*/
/*---------------------------------------------*/
.case_page{
	padding: 20px 20px 50px;

	.page_content{
		max-width: 1100px;
		margin: 0 auto;
		font-size: 18px;
		
		.content_container{
			
			.poster_video{
				margin-bottom: 20px;

				.video_box{
					display: flex;
					justify-content: center;

					.video_player{
						max-width: 800px;
					}
				}
			}
			.video_note{
				text-align: center;
			}
			.case_list_box{
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				margin-top: 30px;
				padding-bottom: 60px;
				gap: 20px;
				align-items: stretch;

				.case_box{

					.case_content_box{
						border-radius: 15px;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						height: 100%;

						.img_box{
							position: relative;

							.thumbnail_img{
								object-fit: cover;
								height: 230px;
								max-width: 100%;
								width: 100%;
							}
							.tag_list{
								display: flex;
								gap: 5px;
								justify-content: flex-start;
								align-items: center;
								flex-wrap: wrap;
								position: absolute;
								bottom: -5%;
								left: 5px;

								.tag{
									display: block;
									max-width: 120px;
									text-overflow: ellipsis;
									white-space: nowrap;
									background: @blue;
									padding: 8px 5px;
									color: @white;
									font-size: 14px;
									font-weight: bold;
									text-overflow: ellipsis;
									overflow: hidden;
								}
							}
						}
						.detail_box{
							position: relative;
							display: flex;
							flex-grow: 1;
							flex-direction: column;
							gap: 10px;
							padding: 24px 24px 0;
							text-align: center;


							.detail_title{
								width: 100%;

								.title{
									font-size: 18px;
									color: @blue;
									font-weight: bold;
									border-bottom: 1px solid @blue;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									width: 80%;
									height: max-content;
									display: inline-block;
								}
							}
							.detail_descr{
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								height: max-content;
								text-align: left;
								font-size: 16px;
								font-weight: bold;
							}
						}
						.case_date{
							margin-right: 1.5rem;
							padding: 0.25rem;
							text-align: right;
							font-size: 14px;
							font-weight: bold;
							color: @dd_gray;
						}
						.read_more_box{
							margin-top: 1rem;
							display: flex;
							align-items: center;
							justify-content: center;

							.read_more{
								position: relative;
								display: flex;
								width: 100%;
								align-items: center;
								justify-content: center;
								padding-left: 2rem;
								padding-right: 2rem;
								padding-top: 0.5rem;
								padding-bottom: 0.5rem;
								font-weight: 600;
								font-size: 16px;
								background: @black;

								p{
									color: @white;
								}
								img{
									position: absolute;
									right: 1rem;
									height: 11px;
									width: 11px;
								}
							}
						}
					}
				}
			}
			.pagination_wrapper {
				display: flex;
				justify-content: center;
			}
			
			.pagination {
				display: flex;
				gap: 8px;
			}
			
			.pagination li a,
			.pagination li span {
				padding: 8px 14px;
				border: 1px solid @blue;
				border-radius: 4px;
				color: @blue;
				text-decoration: none;
			}
			
			.pagination .active span {
				background: @blue;
				color: @white;
				border-color: @blue;
			}
			.page-item:first-child,
			.page-item:last-child,
			.text-muted {
				display: none;
			}
		}
	}
}

/*---article blog page---*/
.p_case_detail{

	.l_ca_de_head{
		display: flex;
		padding-top: 23px;
        padding-bottom: 23px;
		justify-content: space-between;
		flex-direction: column;

		.l_title{
			display: flex;
			margin-bottom: 3px;

			.p_title{
				display: inline-flex;
				align-items: center;

				.u_pattern{
					background-color: rgba(0, 133, 178, 1);
					width: 20px;
					height: 20px;
					display: inline-block;
					margin-right: 8px;
				}
				h3{
					font-weight: 500;
					font-size: 24px;
					line-height: 32px;
				}
			}
		}
		.l_case_cats{
			margin-top: 10px;
			display: flex;
			gap: 10px;
			flex-wrap: wrap;

			.p_cat{
				background-color: #00a3d9;
				font-size: 12px;
				vertical-align: top;
				padding: 8px 10px;
				display: inline-block;
				color: #fff;
				font-weight: 500;
			}
		}
	}
	.l_case_detail{

		.p_date_note{
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.u_date{
				font-weight: 700;
				font-size: 18px;
			}
			.u_pattern{
				margin: 0 8px;
			}
			.u_note{
				border-bottom-width: 1px;
				color: #00a3d9;
				padding: 6px 0;
				font-weight: 600;
				font-size: 18px;
				border-bottom: 1px solid #00a3d9;
			}
		}
		.p_links{
			margin-top: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;

			.p_link{
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				border: 1px solid #000;
				background: #064b66;
				padding: 24px 40px;
				text-align: center;
				font-weight: 700;
				color: #fff;

				.link_icon{
					width: 12px;
				}
				.link_text{
					flex: 1 1 0%;
					padding: 0 12px;
				}

				&:hover{
					background: #3f9ec0;
				}
			}
			.p_link_2{
	
				.link_text{
					color: #f6ff1d;
				}
			}
		}
	}
}
.blog_header{
	padding-bottom:50px;
	border-bottom:1px solid @blue;

	time{
		font-size:16px;
		color:@dd_gray;
	}
	h1{
		font-size:24px;
		font-weight: bold;
	}
	ul{
		display:flex;
		flex-wrap:wrap;
		gap:5px 10px;
		margin-top:20px;

		li{
			padding:5px 10px;
			font-size:12px;
			border:1px solid @blue;

			a{
				color:@blue;
			}
		}
	}
}
.blog_body{
	margin-top: 50px;
	> a{
		color: @blue;
		text-decoration:none;
		font-weight:bold;
	}
	> p{
		line-height:2;
	}
	> img{
		text-align:center;
		display:block;
		margin:0 auto 20px;
		width:100%;
		max-width:350px;
	}
	> time{
		float:right;
		padding-top:10px;
	}
	pre{
		margin: 10px 0;
		padding: 10px;
		/* background-color: #eeeeee; */
		border-top: 1px solid @black;
		border-bottom: 1px solid @black;
		text-align: center;
		font-weight: 600;
		text-shadow: rgba(0, 0, 0, 0.15) 2px 2px 0px;
	}
	blockquote{
		margin:20px 0;
		padding:2px 0 2px 10px;
		border-left:5px solid @blue;
	}
	.table {
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;

		td {
			border: 1px solid #ddd;
			padding: 8px;
			vertical-align: top;
		}
	}
}

.blog_container{
	display:grid;
	gap:50px;
}
.blog_row{
	display:grid;
	gap:50px;

	&.col2{
		grid-template-columns:repeat(2, 1fr);
	}
	/* &.col3{
		grid-template-columns:repeat(3, 1fr);
	}
	&.col4{
		grid-template-columns:repeat(4, 1fr);
	} */
}
.blog_column{
	h2{
		padding: 5px 0 5px 10px;
		font-size: 24px;
		border-bottom: 1px solid @blue;
		color: @blue;
		font-weight: bold;
	}
	h3{
		padding: 5px 0 5px 15px;
		font-size: 22px;
		border-left: 4px solid @blue;
		border-bottom: 1px solid @blue;
		color: @blue;
		font-weight: bold;
	}
	p{
		font-size:16px;
		line-height:2;
	}
	a{
		text-decoration:underline;
	}
	.syntaxhighlighter{
		margin:0 !important;
		padding:10px 0 !important;
		border:1px solid @l_gray;
	}
	img{
		display:block;
		width:100%;
	}
	iframe{
		display:block;
		width:100%;
		height:400px;
	}
	hr{
		margin:50px 0;
		border:none;
		border-top:2px dotted @blue;
	}
}
.blog_footer{
	padding-top:50px;
	border-top:1px solid @blue;

	h2{
		margin-bottom:10px;
		font-size:20px;
	}
}
.related_container{
	display:grid;
	gap:15px;

	a{
		display:flex;
		align-items:center;
		gap:15px;
		padding:15px;
		border:1px solid @blue;

		time{
			font-size:13px;
			color:@gray;
		}
		h3{
			font-size:16px;
			color:@black;
		}
	}
}

.relate_area{
	.relate_item{
		border:1px solid @blue;
		margin-bottom:15px;
		padding:0 10px 10px;


		h3{
			margin:10px 0;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}

		a{
			color:#000;
		}

		.item{
			li:first-child{
				color:@black;
				border-right:1px solid @blue;
				padding-left:0;
			}

			li{
				display:inline-block;
				padding:0 5px;

				a{
					color:@blue;
				}
			}
		}
	}
}