/*
font-family: 'Pretendard';
font-family: 'ariduri';
font-family: 'GmarketSansMedium';
font-family: 'Noto Sans JP', sans-serif;

*/

@font-face {
	font-family: 'GmarketSansMedium';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*초기화*/
*{margin: 0; padding: 0;}
html, body{width: 100%; height: 100%; font-size: 17px; font-family: 'Noto Sans JP', 'Pretendard' !important; scroll-behavior: smooth; }
ul, li{list-style: none;}
a{text-decoration: none; color: inherit;}
.is-hidden{overflow: hidden;}

/*공통*/
.pc{display: block;}
.tablet{display: none;}
.mob{display: none;}

.main{width: 100%; position: relative;}
.inner{width: 90%; max-width: 1200px;}
.inner2{width: 90%; max-width: 1400px;}

.ari{font-family: 'Noto Sans JP', 'ariduri'; font-weight: 700;}
.red{color: #b31414;}

.tit_point{display: inline-block; background: #b31414; color: #fff; font-family: 'Noto Sans JP', 'Poppins', sans-serif; font-weight: bold; text-transform: uppercase; padding: 2px 18px; position: relative;}
.tit_point::after{content: ''; width: 0; height: 0; position: absolute; left: 0; bottom: -14px; border-top: 14px solid #b31414; border-right: 10px solid transparent;}

/*header*/
#header{width: 100%; height: 80px; position: absolute; left: 0; top: 0; z-index: 99; overflow: hidden; transition: all 0.4s;}
#header::after{content: ''; width: 100%; height: 1px; background: #000; position: absolute; left: 0; top: 79px; z-index: -1;}
#header:hover{height: 230px; background: #fff; box-shadow: -4px 4px 4px rgba(0,0,0,0.1);}

.h_inner{width: 85%; margin: 14px auto 0; font-size: 0;}
.h_inner > div{display: inline-block; vertical-align: top;}
.h_inner > div.h_logo{width: 140px;}
.h_inner > div.h_nav{width: calc(100% - 380px); text-align: center; margin-top: 15px;}
.h_inner > div.h_etc{width: 240px; text-align: end; margin-top: 12px;}

.h_logo img{width: 100%;}

.nav > li{display: inline-block; vertical-align: top; width: 15%;}
.nav > li a{font-size: 1rem; font-weight: 700;}

.nav_sub{margin-top: 35px;}
.nav_sub > li{padding: 8px 0;}
.nav_sub > li a{font-size: 0.95rem; font-weight: 500; transition: all 0.4s;}
.nav_sub > li a:hover{color: #b31414;}

.lang{width: 70px; height: 28px; border: 2px solid #000; margin-right: 16px; box-sizing: border-box; position: relative; overflow: hidden; display: inline-block; transition: all 0.4s; text-align: center; vertical-align: top;}
.lang > li a{font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; display: block; padding: 2px 0;}
.lang:hover{overflow: visible; background: #000; color: #fff; height: 110px;}

.etc_btn{width: 70px; height: 28px; margin-right: 16px; background: #000; position: relative; display: inline-block;}
.etc_btn a{font-size: 0.8rem; color: #fff; font-weight: 700; letter-spacing: 3px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}

.sitemap{width: 34px; height: 28px; display: inline-block; vertical-align: top; position: relative; z-index: 99;}
.sitemap > span{height: 3px; width: 100%; background: #000; display: block; transition: all 0.4s;}
.sitemap > span:nth-child(1){position: absolute; left: 0; top: 2px;}
.sitemap > span:nth-child(2){position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.sitemap > span:nth-child(3){position: absolute; left: 0; bottom: 2px;}
.sitemap.is-active > span{background: #fff;}
.sitemap.is-active > span:nth-child(1){transform: rotate(45deg); left: -2px; top: 12px;}
.sitemap.is-active > span:nth-child(2){opacity: 0;}
.sitemap.is-active > span:nth-child(3){transform: rotate(-45deg); bottom: 13px; left: -2px;}

.mobnav{width: 100%; height: 100vh; background: #000; color: #fff; position: fixed; top: 0; transform: translateY(-100%); transition: all 0.4s;}
.is-open{transform: none;}

.sitemap_inner{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);}
.mobnav .ari{font-size: 3rem; margin-top: 3vh;}
.mobnav img{width: 140px; position: absolute; right: 6%; bottom: 8vh;}

.mob_nav{width: 100%; font-size: 0; margin-top: 10vh;}
.mob_nav > li{display: inline-block; vertical-align: top; width: calc(100%/6); padding-right: 5%; box-sizing: border-box;}
.mob_nav > li a{font-size: 1.4rem; font-weight: 700;}
.mob_sub{margin-top: 4vh;}
.mob_sub > li a{font-size: 1.2rem; font-weight: 700; display: block; padding-bottom: 1.5vh;}

/*footer*/
.footer{background: #000; color: #fff; padding: 4vh 0 8vh; position: relative;}
.f_bg{width: 100%; position: absolute; left: 0; top: -9vh; animation: f_move 1s infinite alternate;}
.f_top{width: 160px; position: absolute; top: -16vh; right: 5%;}
.f_top img{width: 100%;}
.f_inner{width: 85%; margin: auto; font-size: 0;}

.f_inner > div{display: inline-block; vertical-align: top;}
.f_inner > div.f_logo{width: 140px;}
.f_inner > div.f_info{width: calc(100% - 340px); box-sizing: border-box; padding-left: 7%; margin-top: 1vh;}
.f_inner > div.f_nav{width: 200px;  text-align: end; margin-top: 4vh;}

.f_inner > div.f_logo img{width: 100%;}

.f_info p br { display: none; }
.f_info p{font-size: 0.9rem; font-weight: 200;}
.f_info p span.txt{margin-right: 30px;}
.f_info p span.bold{font-weight: 700; margin-right: 4px;}
.f_info p span:nth-last-child(1){margin-right: 0;}
.f_info p:nth-child(2){margin: 2vh 0 1vh;}
.f_info p.copy{margin-top: 4vh; font-size: 0.8rem;}

.f_nav ul > li a{font-size: 0.85rem; font-weight: 200; padding-bottom: 10px; display: block;}
@keyframes f_move {
	0% { top: -9vh; }
	100% { top: -10vh; }
}

/*메인1*/
.main1{margin: 26vh 0 0; border-bottom: 1px solid #000;}
.m1_wrap{position: relative; margin: 0 auto 10vh;}
.m1_bg{width: 100%;}
.m1_bg2{width: 65%;position: absolute;left: 49%;top: -6vh;transform: translateX(-50%);}
.m1_bg2 img{width: 100%; animation: m1_bg 1s infinite alternate;}

.m1_bg3{display: none; width: 24%; position: absolute; right: 5%; bottom: -10vh;}
.m1_bg3 img{width: 100%; animation: m1_bg2 1s infinite alternate;}

.m1_bg4{width: 24%;position: absolute;right: 0%;top: 0vh;}
.m1_bg4 img{width: 100%; animation: m1_bg2 1s infinite alternate;}

.m1_bg5{width: 15%;position: absolute;left: -7%;bottom: -31vh;}
.m1_bg5 img{width: 100%; animation: m1_bg2 1s infinite alternate;}

.m1_bg6{width: 30%;position: absolute;right: -10%;bottom: -22vh;}
.m1_bg6 img{width: 100%; animation: m1_bg2 1s infinite alternate;}

.m1_con{margin: 0 auto 16vh; text-align: center;}
.m1_con p{font-size: 2.4rem; font-weight: 700; line-height: 1.5; display: inline-block; position: relative;}
.m1_con p .love{position: absolute; left: 8%; top: 0; width: 18px;}

.m1_con0 p{font-size: 2.8rem; font-weight: 700; font-family: 'GmarketSansMedium';}
.m1_con0{margin: 0 auto 10vh;}


.m1_youtube{position:relative; margin: 0 auto 26vh; padding-bottom:34%; padding-top:30px; height:0; overflow:hidden;}
.m1_youtube iframe,
.m1_youtube object,
.m1_youtube embed {position:absolute; top:0; left:0; width:100%; height:100%;}

.scroll{position: absolute; left: 50%; bottom: -8vh; transform: translateX(-50%); width: 160px;}
.scroll img{width: 100%;}

@keyframes m1_bg {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(2deg); }
}
@keyframes m1_bg2 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(2deg); }
}

/*메인2*/
.main2{z-index: -1; overflow: hidden;}
.m3_bg{height: 100%; display: block; margin: -10vh auto 0;}
.m1_ul{font-size: 0; margin: auto; position: absolute; top: 28vh; left: 50%; transform: translateX(-50%);}
.m1_ul > li{display: inline-block; vertical-align: middle; width: 50%;}

.m1_ul > li.img{position: relative;}
.m1_ul > li.img img:nth-child(1){width: 100%; animation: m2_img 1s infinite alternate;}
.m1_ul > li.img img.m2_cha{width: 30%; position: absolute; right: 0; bottom: -4vh;}

.m1_ul > li.txt p.tit_point{font-size: 0.9rem;}
.m1_ul > li.txt p.ari{font-size: 3rem; margin: 3vh 0 5vh;}
.m1_ul > li.txt p:nth-child(3){font-size: 1.1rem; font-weight: 700; line-height: 1.4;}

.m2_bg{width: 100px; position: absolute; left: -8%; bottom: -10vh;}
@keyframes m2_img {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(9deg); }
}

/*메인3*/
.main3{padding: 16vh 0 10vh; overflow: hidden;}
.main3 .inner{margin: auto;}
.m3_video{width: 100%;}
.m3_video video{width: 100%;}

/*메인4*/
.main4{padding: 16vh 0 10vh; overflow: hidden;}
.main4 .inner{margin: auto;}

.m4_tit .tit_point{font-size: 0.9rem;}
.m4_tit .ari{font-size: 3rem; margin: 3vh 0 5vh; text-transform: uppercase;}
.m4_tit .more a{background: #fff; font-size: 0.8rem; border: 3px solid #000; padding: 6px 20px; font-weight: 600; letter-spacing: 2px; transition: all 0.4s;}
.m4_tit .more a:hover{background: #b31414;}

.m4_ul{margin: 10vh auto 0; font-size: 0;}
.m4_ul > li{display: inline-block; width: 50%; vertical-align: top; box-sizing: border-box; overflow: hidden;}
.m4_ul > li.right{text-align: end; margin-top: -16vh;}

.m4_con{width: 600px; height: 600px; background: #fff; display: inline-block; border: 8px solid #000; position: relative; transition: all 0.4s;}
.m4_left{border-radius: 50%;}
.m4_right{border-radius: 8px;}

.m4_con .click{position: absolute; right: 5%; bottom: 6vh; width: 60px;}

.m4_left:hover{background: url(../img/m4_pro1.png) no-repeat center/cover;}
.m4_right:hover{background: url(../img/m4_pro2.png) no-repeat center/cover;}

.m4_con:hover .m4_txt p{color: #fff; text-shadow: 2px 2px 2px rgb(0 0 0 / 20%);}
.m4_con:hover .m4_txt .icon img:nth-child(1){opacity: 0;}
.m4_con:hover .m4_txt .icon img:nth-child(2){opacity: 1;}

.m4_txt{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%;}
.m4_txt p.icon{display: inline-block; width: 100px; position: relative;}
.m4_txt p.icon img{width: 100%; display: block; transition: all 0.4s;}
.m4_txt p.icon img:nth-child(2){opacity: 0; position: absolute; left: 0; top: 0;}
.m4_right .m4_txt p.icon{width: 60px;}

.m4_txt .tit{font-size: 2rem; font-weight: 700; margin: 2vh 0 3vh; transition: all 0.4s;}
.m4_txt p:nth-child(3){font-size: 1.1rem; font-weight: 700; line-height: 1.4; transition:  all 0.4s;}

.m4_bgtxt{font-size: 10rem; color: #f1f1f1; position: absolute; right: -8%; bottom: 4vh; z-index: -99; font-family: 'DrawingGuides';}

/*메인5*/
.main5{margin-top: 16vh; padding-bottom: 12vh;}
.main5::after{content: ''; width: 100%; height: 80%; background: #b31414; position: absolute; left: 0; bottom: 0; z-index: -99;}
.m5_wrap{margin: auto; position: relative; border: 8px solid #000; border-radius: 8px;}
.m5_wrap::after{content: ''; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0; z-index: -2;}

.m5_wrap .more{position: absolute; right: -5%; bottom: 12vh;}
.m5_wrap .more a{background: #fff; font-size: 0.8rem; border: 3px solid #000; padding: 6px 20px; font-weight: 600; letter-spacing: 2px; transition: all 0.4s;}
.m5_wrap .more a:hover{background: #ffd100;}
.m5_body{width: 440px; position: absolute; right: 50px; top: -12vh; z-index: -99;}
.m5_arm{width: 300px; position: absolute; right: 86px; top: -2vh; z-index: 99; animation: m4_img 1s infinite alternate;}
.m5_tape{width: 100px; position: absolute; left: 140px; top: -5vh; z-index: 99;}

.m5_ul{width: 90%; margin: 7vh auto; font-size: 0; z-index: -99;}
.m5_ul > li{display: inline-block; vertical-align: middle;}
.m5_ul > li.img{width: 45%; margin-right: 5%; position: relative;}
.m5_ul > li.txt{width: 50%; box-sizing: border-box; padding-left: 5%;}

.m5_ul > li.img img{width: 100%;}
.m5_ul > li.img::before{content: ''; width: 100%; height: 100%; background: #ebebeb; position: absolute; left: 0; top: 0; transform: rotate(-7deg); z-index: -1;}

.m5_ul > li.txt p.tit_point{font-size: 0.9rem}
.m5_ul > li.txt p.ari{font-size: 3rem; margin: 3vh 0 6vh;}
.m5_ul > li.txt p.con{font-size: 1.1rem; font-weight: 700; line-height: 1.4;}
@keyframes m4_img {
	0% { top: -2vh; }
	100% { top: -3vh; }
}

/*메인6*/
.main6{padding: 10vh 0; overflow: hidden;}
.m6_bg{position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: #b31414; z-index: -99;}
.m6_bg::after{content: ''; width: 0; height: 0; border-top: 1400px solid #b31414; border-left: 300px solid transparent; position: absolute; left: -28%; top: 0;}

.m6_ul{margin: auto; font-size: 0; overflow: hidden;}
.m6_ul > li{display: inline-block; vertical-align: bottom;}
.m6_ul > li.map{width: 700px; height: 700px;}
.m6_ul > li.info{width: calc(100% - 700px); color: #fff; text-align: end;}

.m6_ul > li.map iframe{width: 100%; height: 100%;} 

.m6_ul > li.info .tit_point{font-size: 0.9rem; background: #fff; color: #b31414;}
.m6_ul > li.info .tit_point::after{content: ''; width: 0; height: 0; position: absolute; left: auto; right: 0; bottom: -13px; border-right: 0; border-top: 14px solid #fff; border-left: 10px solid transparent;}
.m6_ul > li.info p.ari{font-size: 3rem; margin: 3vh 0 5vh; text-transform: uppercase;}
.m6_ul > li.info p:nth-child(3){font-size: 1.2rem; font-weight: 700; line-height: 1.5;}
.m6_ul > li.info p:nth-last-child(1){font-size: 2rem; font-weight: 700; margin: 2vh 0 8vh;}

/*메인7*/
.main7{padding: 16vh 0 30vh;}
.m7_bg{width: 100%; height: 30%; background: url(../img/m7_bg.png) no-repeat center/cover; position: absolute; left: 0; top: 0; z-index: -1;}

.m7_ul{margin: auto; display: flex; justify-content: space-between;}
.m7_ul > li{display: inline-block; vertical-align: middle; text-align: center; background: #fff; width: 400px; height: 400px; border: 8px solid #000; border-radius: 8px;
	box-sizing: border-box; padding: 70px; transition:  all 0.4s;}

.m7_ul i{font-size: 3rem; margin-bottom: 4vh; transition: all 0.4s;}
.m7_ul .ari{font-size: 3rem; color: #b31414; text-transform: uppercase; transition: all 0.4s; font-weight: 900;}
.m7_ul .tit{font-size: 1.4rem; font-weight: 700; margin-top: 1vh;}

.m7_ul .more{margin-top: 4vh; display: none; transition: all 0.4s;}
.m7_ul .more a{background: #fff; font-size: 0.8rem; border: 3px solid #000; padding: 6px 20px; font-weight: 600; letter-spacing: 2px; transition: all 0.4s;}
.m7_ul .more a:hover{background: #b31414;}

.m7_ul > li:hover{border-radius: 50%; background: #ffd100; color: #000; padding: 80px;}
.m7_ul > li:hover i{display: none;}
.m7_ul > li:hover .ari{color: #000;}
.m7_ul > li:hover .more{display: block;}