@media (max-width:800px) { 

#w_header { height:60px; }
#w_header.up { top:-62px; }
#w_header.down { height: 100vh; }

#w_header .wrap { height: auto; display: block; }
#w_header h1 { height:auto; padding-top:22px; }
#w_header h1 img { height:16px; }
#w_header #w_gnb { width: 240px; margin:60px auto 0; text-align: center; }
#w_header #w_gnb > li { float:none; margin-left: 0; line-height:50px; border-bottom:1px solid #ddd; }
#w_header #w_gnb ul { position: static; padding-top: 0px; line-height:50px; display: none; }
#w_header #w_gnb ul li { border-top:1px dashed #ddd; }
#w_header #w_gnb a { display: block; }

.lang { width: 240px; margin:0 auto; }
.lang p { display: none; }
.lang ul { background: none; padding:0; position: static; display: flex; font-size:16px; align-items: center; justify-content: center; height: 50px; }
.lang ul li { width: 25%; }

#nav_btn { position:absolute; right:0; top:12px; }
#nav_btn .line{ width: 30px; height: 2px; background-color: #fff; display: block; margin: 8px auto; transition: all 0.3s ease-in-out;}
#nav_btn:hover{ cursor: pointer;}
#nav_btn.act .line:nth-child(2){ opacity: 0;}
#nav_btn.act .line:nth-child(1){ transform: translateY(10px) rotate(45deg);}
#nav_btn.act .line:nth-child(3){ transform: translateY(-10px) rotate(-45deg);}    

#w_footer .top { padding-top: 40px; display: block; }
#w_footer .top div h2 { font:24px pteb; }
#w_footer .top div a:nth-of-type(1) { font-size:24px; margin-top: 20px; }
#w_footer .top div a:nth-of-type(2) { font-size:18px; margin-top: 10px; }
#w_footer .top div p { font-size:14px; line-height:1.6; }
#w_footer #w_gnb { display: none; }
#w_footer .bottom { margin-top: 20px; padding-bottom: 40px; font-size:14px; line-height:50px; }    


/* index */

#main { height: 360px; }
#main .wrap { }
#main h2 { font-size:28px; padding-top: 0; position: absolute; left: 0; top: 80px; width: 100%; }
#main p { margin-top: 0; font-size:13px; position: absolute; bottom: 14px; width: 100%;  }

.w_prd { flex-direction: column-reverse; }
.w_prd div, 
.w_prd figure { width: 100%; }
.w_prd div { height: 100vw; }
.w_prd div h2 { font:22px stb; }
.w_prd div img { margin-top: 30px; margin-bottom: 30px; width: 80%; }
.w_prd div p { font:14px/1.6 stm; padding:0 3%; box-sizing: border-box; word-break: keep-all;}

#prd2 { flex-direction: column-reverse; }

#lineup { padding:100px 0; }
#lineup h2 { font:22px steb; }
#lineup ul { display:grid; grid-template-columns: repeat(1, 1fr); gap: 20px; font:16px steb; margin-top: 40px; }
#lineup ul li a { background: #cfa276; height: 200px; }
#lineup ul li a figure { height: 100px; }
#lineup ul li a figure img { height: 100%; }
#lineup ul li p { margin-top: 20px; } 

#rnd { padding:80px 0;}
#rnd h2 { font:28px pteb; }
#rnd strong { font:26px ptm; margin-top: 30px; }
#rnd p { font:16px/1.8 ptm; margin-top: 30px; }
#rnd a { width: 160px; height: 44px; font-size:14px; margin-top: 30px; }

#about { padding:80px 0; }
#about h2 { font:18px stb; }
#about strong { font:28px steb; margin-top: 30px; }
#about p { margin-top: 30px; font:16px/1.8 stm; }

/* sub layout */
.sv { height: 240px; padding-top: 40px; }
.sv h2 { font-size:28px; }

nav.sm ul { display: none; }
nav { background: var(--color); }
nav select { background:none; border:none; color:#fff; height: 44px; font:18px stsb; width: 97%; outline:none; padding:0 3%; box-sizing: border-box; }
nav select option { color:#2d2d2d; } 

.cont.pt120 { padding-top: 60px; }
.cont.pb300 { padding-bottom: 200px; }
.cont .wrap { max-width: none; }
.cont .right { width: auto; margin-top: 20px;}

/* sub1_1 */
#sub1_1 .cont1 { display: block; }

#sub1_1 .cont2 .right,
#sub1_1 .cont3 .right { margin-left: 0; display: block; }
#sub1_1 .cont2 .right ul { width: auto; margin-top: 20px; }
#sub1_1 .cont2 .right ul li { padding-bottom: 30px; }
#sub1_1 .cont2 .right ul h3 { border-bottom:1px solid #cfa276; }
#sub1_1 .cont2 .right img { display: none; }

#sub1_1 .cont3 { margin-top: 100px; }
#sub1_1 .cont4 img { min-height: 200px; }

/* sub1_2 */
#sub1_2 .cont1 { display: block; }
#sub1_2 .cont2 { margin-top: 40px; }

#sub1_2 .cont3 { margin-top: 60px; display: block; }
#sub1_2 .cont3 ul li { display: block; padding-left: 30px; padding-bottom: 30px; }
#sub1_2 .cont3 ul li p { width: auto; margin-top: 10px; }

#sub1_2 .cont4 { margin-top: 40px; }
#sub1_2 .cont4 .right ul { padding:10px; }
#sub1_2 .cont4 .right ul li { width: 100px; height: 100px; text-align: center; line-height: 1.2; }
#sub1_2 .cont4 .right p { margin-top: 20px; font-size:16px;  }


/* sub1_3 */
#sub1_3 .cont1 { display: block; }
#sub1_3 .right article { padding: 0 0 40px 0; }
#sub1_3 .right article h3 { position: static; font-size:18px; font-family: steb; margin-bottom: 10px; }
#sub1_3 .right article ul li { padding-left: 30px; font-size:14px; }

/* sub2_1 */
#sub2_1 .cont1 { display: block; }
#sub2_1 .cont2 div { width: 100px; }
#sub2_1 .cont2 div figure { width: 80px; height: 80px; margin-top: 20px; }
#sub2_1 .cont2 div figure img { height: 30px; }
#sub2_1 .cont2 li:last-child div figure:before { height: 220px; }
#sub2_1 .cont2 li:last-child div figure:after { top: calc(100% + 220px); }
#sub2_1 .cont2 li { margin-bottom: 20px; align-items: start; }
#sub2_1 .cont2 article { width: calc(100% - 100px);}
#sub2_1 .cont2 article strong { display: inline-block; }

#sub2_1 .cont3 { display: block; margin-top: 50px;  }
#sub2_1 .cont3 figure { width: 100%; }
#sub2_1 .cont3 figure img { width: 90%; }
#sub2_1 .cont3 article { width: auto; margin-top: 30px; font-size:16px;  }
#sub2_1 .cont3 article h3 { margin-bottom: 20px; }

/* sub2_2 */
#sub2_2 .cont1 { display: block; }
#sub2_2 .cont1 ul { gap: unset; }
#sub2_2 .cont1 ul li { width: 48%; margin-right: 4%; margin-bottom: 4vw; }
#sub2_2 .cont1 ul li:nth-child(2n) { margin-right: 0; }
#sub2_2 .cont1 ul li img { width: 100%; }

.modal .area img { max-width:70vw; }


/* sub2_3 */
#sub2_3 .cont1 { display: block; }
#sub2_3 .cont2 { margin-top: 40px; }

/* sub3_1 */
.opt { padding-top: 60px; }
.opt nav { position: fixed; left: -101%; top: 0; float:none; width: 100%; border-top:none; height:100vh; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); padding:100px 40px 0; box-sizing: border-box; transition:0.3s; z-index: 10; }
.opt nav.on { left: 0; }

.opt nav h2 { font:30px steb; position: absolute; top: -50px; }
.opt nav > ul > li a { display:flex; align-items: center; justify-content: space-between; height: 40px; border-bottom:1px solid #ddd; font:16px stm; }
.opt nav > ul > li a i { display: none; }
.opt nav > ul li.act a i { display: block; }
.opt nav > ul ul li a { padding-left: 30px; }
.opt .xi-apps { position: fixed; right: 3vw; bottom: 3vh; width: 44px; height: 44px; border-radius: 44px; color:#fff; background: #cfa276; font-size:24px; z-index:99; }

.opt .right { float:none; }

.opt .right .cont1 h2 { font-size:18px; }
.opt .right .cont1 figure { min-height:260px; }
.opt .right .cont1 figure img { width: 80%; }
.opt .right .cont2 { display: block; }
.opt .right .cont2 article { width: auto; padding-bottom: 60px; }
.opt .right .cont2 article > p { margin-top: 20px; }
.opt .right .cont2 article ul { margin-top: 20px; }
.opt .right .cont2 article ul li { margin-top: 10px; }
.opt .right .cont2 article ul li figure { width: 100px; height: 100px; margin-right: 20px; }
.opt .right .cont3 { margin-top: 0; }
.opt .right .cont4 h2 { font-size:20px; }
.opt .right .cont4 .lineUp li { width: 100%; height: 240px;  margin-top: 20px; }

#line_modal .area { width: 75vw; height: 240px; }
#line_modal .area .linePrd .swiper-slide img { height:auto; max-width:80%; max-height: 80%; }
#line_modal .area .swiper-button-next { right: -40px; }
#line_modal .area .swiper-button-prev { left: -40px; }

/* sub4_1 */
#sub4_1 .cont1 { display: block; }
#sub4_1 .cont1 .gmap { height: 300px; }
#sub4_1 .cont1 .gmap iframe { height: 300px; }   
#sub4_1 .cont1 ul li { padding-left: 70px; }

/* sub4_2 */
#sub4_2 .cont1 { display: block; }
#sub4_2 .right table th { font-size:14px; width: auto; padding-left: 10px; border-bottom:none; }
#sub4_2 .right table th, #sub4_2 .right table td { display: block; padding:0; }
#sub4_2 .right table input[type="text"] { font-size:14px; }
#sub4_2 .right table input[type="file"] { font-size:14px; }
#sub4_2 .right table textarea { font:14px/1.6 stm; height: 300px; }
#sub4_2 .right table label { line-height:1.2; padding:0 10px; padding-top: 12px; display: inline-block; }
#sub4_2 .right table .req:before { top:12px; left: 0; }
#sub4_2 .right table input[type="submit"] { width: 180px; height: 50px; font:16px stsb; margin-top: 20px; }
















}