:root {
    --color:#cfa276;
}
/* common */
body { background: #f7f7f4; }
.wrap { max-width:1600px; width:94%; }
.cp { color:var(--color); }


#w_header { position:fixed; top: 0; left: 0; width: 100%; height:80px; color:#fff; z-index: 99; transition:0.3s; overflow: hidden; }
#w_header.up { top:-80px; }
#w_header.fix, #w_header.down { background: rgba(151,77,5,0.5); border-bottom:1px solid #ddd; backdrop-filter: blur(10px); }
#w_header.down { height: 320px; }
#w_header h1 { height: 20px; }

#w_header .wrap { height: 80px; }
#w_header #w_gnb > li { float:left; margin-left: 100px; font:18px ptsb; }
#w_header #w_gnb > li:first-child { margin-left: 0; }
#w_header #w_gnb ul { position: absolute; padding-top: 30px; font:16px/2.4 ptr; }

.lang { width: 54px; position: relative; }
.lang p { cursor: pointer; }
.lang ul { background: var(--color); padding:4px 8px; position: absolute; top: 26px; width: 100%; text-align: center; font-weight: normal; display: none; }

#w_footer { background: #000; color:#4c4c4c; }
#w_footer .top { padding-top: 60px; display:flex; justify-content: space-between; align-items: start; }
#w_footer .top div h2 { font:36px pteb; }
#w_footer .top div a:nth-of-type(1) { font:36px pteb; display: inline-block; margin-top: 30px; }
#w_footer .top div a:nth-of-type(2) { font:bold 24px ptsb; display: inline-block; margin-top: 20px; }
#w_footer .top div p { font:20px ptb; margin-top: 14px;  }
#w_footer #w_gnb { display:flex; align-items: start; justify-content: center;}
#w_footer #w_gnb > li { margin-left: 60px; }
#w_footer #w_gnb > li > a { font:18px pteb; } 
#w_footer #w_gnb ul { font:18px/2 ptm; margin-top: 6px; }
#w_footer .bottom { margin-top: 60px; border-top:1px solid #4c4c4c; padding-bottom: 60px; font:16px/70px ptm; }

/* index */

#main { height: 1012px; background:url(/images/main.png) no-repeat center/cover; text-align: center; color:#fff; }
#main .wrap { display:flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
#main h2 { font:900 50px/1.2 steb; text-transform: uppercase; padding-top: 100px;}
#main p { margin-top: 480px; font:18px stm; }

.w_prd { display:flex; justify-content: center; background: #9d8369; }
.w_prd div, 
.w_prd figure { width: 50%; }
.w_prd div { display:flex; flex-direction: column; justify-content: center; align-items: center; color:#fff; text-align: center; }
.w_prd div h2 { font:22px stb; }
.w_prd div img { margin-top: 80px; margin-bottom: 80px; }
.w_prd div p { font:18px/1.6 stm; }
.w_prd figure img { width: 100%; }

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

#lineup { padding:300px 0; text-align: center; }
#lineup h2 { font:30px steb; }
#lineup ul { display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; color:#fff; font:20px steb; margin-top: 80px; }
#lineup ul li { position: relative; }
#lineup ul li a { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 260px; background: #9d8369; border-radius: 14px; overflow: hidden; transition:0.3s; }
#lineup ul li a:hover { background: #cfa276; }
#lineup ul li a figure { height: 125px; }
#lineup ul li p { margin-top: 30px; } 

#rnd { background:url(/images/bg_rnd.png) no-repeat center/cover; text-align: center; color:#fff; padding:150px 0;}
#rnd h2 { font:36px pteb; }
#rnd strong { font:36px ptm; display: inline-block; margin-top: 50px; }
#rnd p { font:20px/1.8 ptm; margin-top: 50px; }
#rnd a { display:inline-flex; justify-content: center; align-items: center; width: 190px; height: 50px; border:1px solid #fff; border-radius: 25px; box-sizing: border-box; font:18px ptm; margin-top: 40px; }

#about { padding:240px 0; text-align: center; }
#about h2 { font:24px stb; }
#about strong { font:60px steb; margin-top: 50px; display: inline-block; }
#about p { margin-top: 50px; font:18px/1.8 stm; }

/* sub layout */
.sv { height: 500px; }
.sv h2 { font:36px stb; color:#fff; }
#sv1 { background:url(/images/bg_sub1.png) no-repeat center/cover; }
#sv2 { background:url(/images/bg_sub2.png) no-repeat center/cover; }
#sv3 { background:url(/images/bg_sub3.png) no-repeat center/cover; }
#sv4 { background:url(/images/bg_sub4.png) no-repeat center/cover; }

nav.sm ul { display: flex; align-items: center; justify-content: center; height: 50px; background: #cfa276; color:#fff; }
nav.sm ul li a { padding:0 40px; font:16px ptm; }
nav.sm3 { display: none; }


 
.cont { background: #f7f7f4; }
.cont .wrap { max-width: 1400px; }
.cont .right { width: 952px; }

/* sub1_1 */
#sub1_1 .cont1 img { width: 100%; }

#sub1_1 .cont2 .right,
#sub1_1 .cont3 .right { margin-left: auto; }
#sub1_1 .cont2 .right ul { width: 680px; }
#sub1_1 .cont2 .right ul h3 { border-bottom:1px solid #cfa276; }
#sub1_1 .cont2 .right img { position: absolute; bottom: 0; right: 860px; }

#sub1_1 .cont4 img { width: 100%; min-height: 360px; }

/* sub1_2 */
#sub1_2 .cont2 img { width: 100%; } 

#sub1_2 .cont3 ul li { border-top:1px solid #cfa276; padding-top: 10px; padding-bottom: 50px; position: relative; padding-left: 34px; }
#sub1_2 .cont3 ul li span { position: absolute; left: 0; }
#sub1_2 .cont3 ul li p { width: 680px; }

#sub1_2 .cont4 .right { margin-left: auto; }
#sub1_2 .cont4 .right ul { border:1px solid #cfa276; padding:14px; border-radius: 200px; }
#sub1_2 .cont4 .right ul li { width: 220px; height: 220px; border:1px solid #cfa276; border-radius: 220px; }


/* sub1_3 */
#sub1_3 .right article { position: relative; padding: 0 0 70px 200px; }
#sub1_3 .right article h3 { position: absolute; left: 0; top: -4px; font-size:24px; }
#sub1_3 .right article ul li { padding-left: 70px; margin-bottom: 20px; position: relative;  }
#sub1_3 .right article ul li span { position: absolute; left: 0; font-family: steb; }

/* sub2_1 */
#sub2_1 .cont2 div { width: 408px; }
#sub2_1 .cont2 div figure { width: 156px; height: 156px; border:1px solid #cfa276; border-radius: 156px; margin:0 auto; position: relative; background: #f7f7f4; }
#sub2_1 .cont2 div figure:before { content:""; height: 220px; border-left:1px solid #cfa276; position: absolute; top: 100%; left: 50%; }
#sub2_1 .cont2 div figure:after { content:""; border:7px solid transparent; border-top:10px solid #cfa276; position: absolute; top: calc(100% + 220px); left:calc(50% - 7px); display: block; }
#sub2_1 .cont2 li:last-child div figure:before { height: 100px; }
#sub2_1 .cont2 li:last-child div figure:after { top: calc(100% + 100px); }
#sub2_1 .cont2 li { margin-bottom: 160px; }
#sub2_1 .cont2 article strong { display: inline-block; }

#sub2_1 .cont3 figure { width: 408px; }
#sub2_1 .cont3 article { width: 680px; }
#sub2_1 .cont3 article h3 { margin-bottom: 40px; }

/* sub2_2 */
#sub2_2 .cont1 ul { display:flex; flex-wrap: wrap; column-gap:30px; row-gap:50px; justify-content:flex-start;}
#sub2_2 .cont1 ul li { width: calc((100% - 90px) / 4); cursor:pointer; flex:0 0 calc((100% - 90px) / 4); border:1px solid #ededed;}
#sub2_2 .cont1 ul li img {  width:100%;  display:block;}

.modal { position: fixed; left: 0; top: 0; right: 0; bottom:0; background: rgba(0,0,0,0.8); z-index:999; display: none; align-items: center; justify-content: center; }
.modal.on { display:flex; }
.modal .area img { max-width:50vw; max-height:80vh; }

/* sub2_3 */
#sub2_3 .cont2 img { width: 100%; }


/* sub3_1 */
.opt { }
.opt nav { float:left; width: 350px; border-top:1px solid #2d2d2d; position: relative; }
.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 { display: none; }
.opt nav > ul .act ul { display: block; }
.opt nav > ul ul li a { padding-left: 30px; }
.opt .right { float:right; border-top:1px solid #2d2d2d; }

.opt .right .cont1 figure { min-height:660px; }
.opt .right .cont2 article { width: 460px; border-top:1px solid #666; }
.opt .right .cont2 article ul li {  justify-content: flex-start;}
.opt .right .cont2 article ul li figure { width: 130px; height: 130px; margin-right: 30px; border:2px solid #cfa276; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.opt .right .cont2 article ul li figure p { margin: 0; text-align: center; line-height: 1.3; }
.opt .right .cont3 img {width: 100%;}
.opt .right .cont4 .lineUp { display:flex; justify-content: space-between; flex-wrap: wrap; }
.opt .right .cont4 .lineUp li { position: relative; border-radius: 20px; overflow: hidden; width: 460px; text-align: center; height: 310px; display: flex; align-items: center; justify-content: center;  margin-top: 40px; cursor: pointer; }
.opt .right .cont4 .lineUp li img { width: 70%; }
.opt .right .cont4 .lineUp li p { position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center;}
.opt .right .cont4 .lineUp li article { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(207,162,118,0.8); opacity: 0; transition:0.7s; }
.opt .right .cont4 .lineUp li:hover article { opacity: 1; }
.opt .right .cont4 .lineUp li article table { width: 200px; border-collapse: collapse; margin-top: 10px; text-align: left; }
.opt .right .cont4 .lineUp li article table th { width: 100px; text-align: left; padding:4px 0; }
.opt .right .cont4 .lineUp img { width: auto; height:auto; }


#line_modal .area { width: 60vw; height: 70vh; position: relative; }
#line_modal .area .linePrd { background: #fff; border-radius: 20px; width: 100%; height: 100%; }
#line_modal .area .linePrd .swiper-slide {  display: flex;  justify-content: center;  align-items: center;}
#line_modal .area .linePrd .swiper-slide img {  max-width: 50vw;  max-height: 40vh;  object-fit: contain;}
#line_modal .area .swiper-button-next { right: -60px; color:#fff; }
#line_modal .area .swiper-button-prev { left: -60px; color:#fff; }




/* sub4_1 */
#sub4_1 .cont1 .gmap { border:2px solid #cfa276; border-radius: 20px; box-sizing: border-box; overflow: hidden; vertical-align: top; height: 500px; }
#sub4_1 .cont1 .gmap iframe { width: 100%; height: 500px; }   
#sub4_1 .cont1 ul li { padding-left: 270px; position: relative; margin-bottom: 14px; }
#sub4_1 .cont1 ul li span { position: absolute; left: 0; font-family: steb; }

/* sub4_2 */
#sub4_2 .right table { width: 100%; border-top:2px solid #ddd; }
#sub4_2 .right table th, #sub4_2 .right table td { border-bottom:1px solid #ddd; padding:10px 0; text-align: left; }
#sub4_2 .right table tr:last-child td { border-bottom:none; }
#sub4_2 .right table th { font-size:20px; font-family: stb; width: 230px; padding-left: 16px; vertical-align: top; }
#sub4_2 .right table input[type="text"] { width: 100%; height: 50px; border:none; background: none; padding:0 10px; box-sizing: border-box; font:20px stm; }
#sub4_2 .right table input[type="file"] { width: 100%; height: 50px; border:none; background: none; padding:0 10px; box-sizing: border-box; font:20px/50px stm; }
#sub4_2 .right table textarea { border:none; padding:10px; box-sizing: border-box; width: 100%; height: 400px; background: none; font:20px/1.6 stm; }
#sub4_2 .right table label { line-height:50px; }
#sub4_2 .right table .req { position: relative; }
#sub4_2 .right table .req:before { content:"*"; position: absolute; left: -16px; color:#cfa276; top:-12px; }
#sub4_2 .right table input[type="submit"] { width: 220px; height: 50px; background: #cfa276; color:#fff; margin-top: 40px; border-radius: 50px; border:none; font:20px stsb; }


/* sub4_3 */
#sub4_3 .cont2 { font-size:12px; }
#sub4_3 .btn_bo_user li, #sub4_3 .tbl_wrap table { background: none; }