/* scroll */
::-webkit-scrollbar { width:5px; height: 5px; }
::-webkit-scrollbar-track { background:#eee; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
::-webkit-scrollbar-thumb { height:50px; width:50px; background:#000; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }
::-webkit-scrollbar-thumb:window-inactive { background:#000; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }

.scroll_on { opacity: 0; transition: all 1s;}
.scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
.scroll_on.type_top {transform: translate(0, -50px);}
.scroll_on.type_bottom {transform: translate(0, 50px);}
.scroll_on.type_left {transform: translate(-50px, 0);}
.scroll_on.type_right {transform: translate(50px, 0);}

.wrap { position: relative; width: 1280px; margin: 0 auto; }

/* head */
.head { position: absolute; top: 0; left: 0; width: 100%; z-index: 9; }
.head .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.logo { margin: 10px 0; }
.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.menu_inr { display: flex; flex-wrap: wrap; align-items: center; }
.menu_inr li { padding: 0 40px; }
.menu_inr li a { color: #fff; font-size: 18px; }

.lang_menu { display: flex; flex-wrap: wrap; }
.lang_menu li { position: relative; padding: 0 15px; }
.lang_menu li:first-child:after { content:''; position: absolute; right: 0px; top: calc(50% - 2px); width: 3px; height: 3px; border-radius: 5px; background: rgba(255, 255, 255, 0.4); }
.lang_menu li a { color: #fff; font-size: 14px; }

nav#accordian { display: none; }
.burger { display: none; }

/* footer */
.footer { padding: 30px 0; background:#000; }
.footer_menu { display: inline-flex; flex-wrap: wrap; justify-content: center; width: 100%; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.footer_menu:after { content: ""; display: block; clear: both; }
.footer_menu li { position: relative; float: left; padding: 0 20px; }
.footer_menu li a { color: #fff; }
.footer_menu li a:hover { text-decoration: underline; }

.footer_copyright { position: relative; color: #888; font-weight: 400; line-height: 1.7em; }
.footer_copyright span { position: relative; display: inline-block; padding: 0 15px; }
.footer_copyright span:after { content:''; position: absolute; right: 0px; top: 25%; width: 1px; height: 50%; background: #666; }
.footer_copyright span.noline:after { display: none; }
.footer_copyright p { padding: 0 0px; text-align: center; color: #666; }

/* main */
.main_vis { position: relative; width: 100%; height: 100vh; background: url('../image/main/main_vis01.jpg') center center no-repeat; background-size: cover; animation: shrink 5s infinite alternate; }

@keyframes shrink {
    0% {
        background-size: 110% 110%;
    }

    100% {
        background-size: 100% 100%;
    }
}

.main_text { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; animation: fadein 1s ease-in-out; }
.main_text h2 { margin-bottom: 50px; font-size: 68px; letter-spacing: -0.03em; }
.main_text p { font-size: 30px; font-weight: 100; letter-spacing: -0.03em; word-break: keep-all; }

@keyframes fadein{
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.scrolldown { position: absolute; left: calc(50% - 45px); bottom: 0px; width: 90px; text-align: center; color: rgba(255, 255, 255, 0.4);}
.scrolldown span { display: inline-block; padding-bottom: 70px; text-align: center; font-size: 14px; }
.scrolldown span::after { content: ''; position: absolute; width: 2px; top: 100%; left: 50%; background-color: rgba(255, 255, 255, 1); transform: translateX(-50%); z-index: 2; animation: spark-scroll-line 2s ease infinite; }
.scrolldown span::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 2px; height: 60px; background-color: rgba(255, 255, 255, 0.3); transform: translateX(-50%); z-index: 1; }

@keyframes spark-scroll-line {
	0% { height: 0; margin-top:-60px; }
	40% { height: 60px; margin-top:-60px; }
	80%, 100% { height: 0; margin-top:00px; }
}

.main_con { display: flex; flex-wrap: wrap; padding: 100px 0; }
.main_con h3 { width: 100%; font-size: 48px; text-align: center; margin-bottom: 50px; }
.main_con_left, .main_con_right { width: 50%; }

.main_con01 .main_con_right { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.main_con_contents { width: 720px; }
.main_con01 .main_con_right .main_con_contents{ padding-left: 80px; }

.main_con.main_con01 .main_con_title h3 { text-align: left; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; }
.main_con_text p { color:#555; font-size: 20px; line-height: 1.6; }

.main_con_imgbox { height: 600px; }
.main_con_img_inr { width: 0%; height: 100%; }
.main_con_img_inr img { max-width: 100%; }
.main_con_img_inr.active { width: 100%; }
.main_con01 .main_con_img_inr { background: url('../image/main/main_con01_img01.jpg') center center no-repeat; background-size: cover; }

.main_con02 { background: url('../image/main/main_con02_bg01.jpg') center center no-repeat; background-size: cover; background-attachment: fixed; color: #fff; }

.swiper { width: 100%; }
.swiper-slide { display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.main_con02_inr { display: flex; flex-wrap: wrap; width: 100%; }
.main_con02_left, .main_con02_right { width: 50%; }
.main_con02_right { display: flex; flex-wrap: wrap; align-content: center; text-align: left; padding-left: 80px; }
.main_con02_Swiper { padding-bottom: 50px; }
.main_con02_right h4 { margin-bottom: 50px; width: 100%; font-size: 42px; }
.main_con02_list {}
.main_con02_list li { position: relative; padding-left: 20px; margin-bottom: 10px; color: rgba(255, 255, 255, 0.8); font-size: 19px; font-weight: 300; letter-spacing: -0.03em; }
.main_con02_list li:after { content:''; position: absolute; left: 0px; top: 10px;; width: 5px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.4); }

.product_btnbox { margin-top: 50px; text-align: center; }
a.product_more { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 180px; height: 55px; border: 2px solid #fff; border-radius: 5px; color: #fff; transition: 0.5s; }
a.product_more:hover { background: #fff; color: #000; }
a.product_more i { margin-left: 5px; }

.service_list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.service_list li { width: 32%; margin-left: 2%; }
.service_list li:nth-child(3n+1) { margin-left: 0px; }
.service_list li .service_img { margin-bottom: 30px; }
.service_list li .service_img img { max-width: 100%; }
.service_list li h4 { text-align: center; font-size: 1.25em; font-weight: 600; }

.main_con04 { border-top: 1px solid #ddd; }
.main_con04_list { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.main_con04_list li { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; text-align: center; width: 25%; margin: 0 2%; }
.main_con04_list li:last-child { margin-bottom: 0px; }
.main_con04_list li .img { margin-bottom: 30px; }
.main_con04_list li h4 { margin-bottom: 15px; color: #333; font-size: 24px; }
.main_con04_list li p { color: #555; line-height: 1.4; }

/* sub */
.sub_contents { margin-bottom: 80px; }
.sub_vis { width: 100%; height: 450px; margin-bottom: 80px; padding-top: 50px; background: url('../image/main/main_vis01.jpg') center center no-repeat; background-size: cover; }

.sub_txt { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; animation: fadein 1s ease-in-out; }
.sub_txt h2 { margin-bottom: 30px; font-size: 38px; letter-spacing: -0.03em; }
.sub_txt p { font-size: 24px; font-weight: 100; letter-spacing: -0.03em; }

.sub_title { margin-bottom: 50px; }
.sub_title h2 { text-align: center; font-size: 42px; }