#w_header { position: fixed; border-bottom:1px solid rgba(255,255,255,0.7); width: 100%; z-index: 99; color:#333; transition:0.3s; top:0; }
#w_header.up { top:-101px; }
#w_header.fix { background: #fff; border-bottom-color:#ddd; }
#w_header .wrap { width: 94%; height: 100px; }
#w_header #w_gnb li { padding:0 35px; }
#w_header .lang { position: relative; }
#w_header .lang select { width: 90px; height: 34px; border:1px solid #fff; border-radius: 100px; background: none; appearance: none; color:#fff; padding-left: 20px; background: #0a302e; border-color:#0a302e; }
#w_header .lang select option { background: #0a302e; color:#fff; }
#w_header .lang i { position: absolute; right: 20px; top:50%; transform: translateY(-50%); font-style: normal; font-size:10px; color:#fff;}
.index #w_header { color:#fff; }
.index #w_header h1 img { filter: brightness(0) invert(1); }
.index #w_header select { background:none; border-color:#fff;}

#w_footer { background: #e2e2e2; padding:80px 0 20px;}
#w_footer .wrap { align-items: start; }
#w_footer .info ul { line-height:48px; }
#w_footer .info ul li { float:left; font-weight: 400; }
#w_footer .info ul li:after { content:"|"; margin:0 14px; font-size:11px; position: relative; top: -1px;  }
#w_footer .info ul li:last-child:after { display: none; }
#w_footer strong { display: block; }
#w_footer strong:after { content:""; display: block; width: 15px; border-top:1px solid #0a302e; margin:6px 0 24px; }
#w_footer .sns ul li { float:left; margin-right: 40px; }
#w_footer .sns ul li:last-child { margin-right: 0; }

#w_footer .top { width: 160px; height: 40px; border:1px solid #999; padding:0 10px; box-sizing: border-box; color:#666; }
#w_footer .top img:last-child { margin-left: 20px; transform: rotate(180deg); }
#w_footer p.f14 { border-top:1px solid #999; height: 80px; margin-top: 80px;  }


/* index */
#main .mainSlide { height: 100vh; }
#main .mainSlide .arrow { color:#fff; }
#main .mainSlide .swiper-button-prev { left:3%; }
#main .mainSlide .swiper-button-next { right:3%; }
#main .mainSlide .swiper-pagination { bottom: 70px; }
#main .mainSlide .swiper-pagination-bullet { width: 12px; height: 12px; background: none; box-sizing: border-box; border:2px solid #fff; opacity: 1; }
#main .mainSlide .swiper-pagination-bullet-active { background: #fff; }
#main .mainSlide article { position: absolute; z-index: 10; top: 180px; left: 50%; transform: translateX(-50%); text-align: center; width: 900px; }
#main .mainSlide article p { line-height:1.6; margin-top: 20px; }
#main .mainSlide article .more { margin-top: 40px; }

#slogun h2:after { content:""; width: 60px; height: 5px; background: #777; margin:30px auto; display: block; }


#prd { background: #0a302e url(../images/white_matt.png) no-repeat left calc(50% + 700px) center/auto 100%; }
#prd p { margin-top: 20px; }
#prd .more { margin-top: 30px; }
#prd ul { margin-top: 60px; }
#prd li { width: 458px; }
#prd li figure { overflow: hidden; height: 300px; }
#prd li figure img { transform: scale(1); transition:0.3s; }
#prd li:hover figure img { transform: scale(1.05); }
#prd li dl { background: #fff; padding:14px 0; }
#prd li dl dt { font-weight: 600; }
#prd li dl dd { color:#000; }

#diff { background:url(../images/bg_matt.png) no-repeat center/cover; }
#diff h2 { margin-top: 40px; }
#diff p { margin-top: 20px; }
#diff .more { margin-top: 30px; }
#diff ul { margin-top: 80px; }
#diff ul li { width:33.3333%; position: relative; }
#diff ul li:after { content:""; position: absolute; right: 0; top: 15px; background: #fff; width: 1px; height: calc(100% - 30px); }
#diff ul li:last-child:after { display: none; }
#diff ul li figure { height: 80px; }
#diff ul li dt { color:#c6a664; margin-top: 20px; margin-bottom: 10px; font-weight: 500; }

#inside p { margin-top: 20px; }
#inside .prdSlide { padding:80px 0;}
#inside .prdSlide .swiper-slide { transform: scale(0.8); transition:0.5s; opacity: 0.3; }
#inside .prdSlide .swiper-slide img { aspect-ratio: 770 / 490;}
#inside .prdSlide .swiper-slide-active { transform: scale(1.1); opacity: 1; }
#inside .prdSlide .swiper-pagination { position:static; margin: 80px auto 0; width:93%; }
#inside .prdSlide .swiper-pagination-progressbar-fill { background: #0a302e; }
#inside .prdSlide .arrow { border:1px solid #0a302e; width: 44px; height: 44px; font-size:28px; display:flex; align-items: center; justify-content: center; transition:0.3s; top:210px; }
#inside .prdSlide .arrow:hover { color:#fff; background: #0a302e; }
#inside .prdSlide .arrow:after { display: none; }
#inside .prdSlide .xi-arrow-left { left:414px;}
#inside .prdSlide .xi-arrow-right { right:414px; }

#from { padding-top: 0; }
#from ul { margin-top: 40px; }
#from ul li { width: 450px; position: relative; overflow: hidden; }
#from ul li a > img { transform: scale(1); transition:0.3s; }
#from ul li:hover a > img { transform: scale(1.05); }
#from ul li div { position: absolute; left:0; bottom: 0; padding:40px; width: 100%; box-sizing: border-box; }
#from ul li div p { font-weight: 500; }

/* sub layout */
section.title { height: 380px; padding-top: 230px; box-sizing: border-box; }

.sv .wrap { height: 600px; align-items: start; }
.sv p { margin-top: 40px; }
#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;}
#sv5 { background:url(../images/bg_sub5.png) no-repeat center/cover;}
#sv6 { background:url(../images/bg_sub6.png) no-repeat center/cover;}


/* about */
.tit p { font-weight: 700; line-height:1.1; margin-top: 20px; }
#vision .tit { width:50%; float:left; }
#vision .right { width:50%; float:left; }
#vision .right li { border-bottom:1px solid #ddd; padding:40px 0; justify-content: start; padding-left: 100px; position: relative; }
#vision .right li:first-child { padding-top: 70px; }
#vision .right li:last-child { border-bottom:none; padding-bottom: 0; }
#vision .right li img { position: absolute; left: 24px; }

#craft { background:url(../images/bg_craft.png) no-repeat center/cover; }
#craft .wrap > p { margin-top: 30px; }
#craft ul { margin-top: 60px; }
#craft ul li { width: 335px; height: 335px; }
#craft ul li:nth-child(1) { background:url(../images/bg_cf1.png) no-repeat center/cover; }
#craft ul li:nth-child(2) { background:url(../images/bg_cf2.png) no-repeat center/cover; }
#craft ul li:nth-child(3) { background:url(../images/bg_cf3.png) no-repeat center/cover; }
#craft ul li:nth-child(4) { background:url(../images/bg_cf4.png) no-repeat center/cover; }
#craft ul li figure { height: 52px; }
#craft ul li h3 { margin-top: 10px; }
#craft ul li span { margin-top: 10px; }

#mean .tit p { font-weight:500; }
#mean .tit p span { font-weight:700; }
#mean .wrap { align-items: start; }
#mean em { font-style: normal; margin-top: 40px; display: block; }

#comm > div { width: 50%;}
#comm > div:nth-child(1) { background:url(../images/comm1.png) no-repeat center/cover; }
#comm > div:nth-child(2) { background:url(../images/comm2.png) no-repeat center/cover; }
#comm dl { height: 340px; width: 720px; align-items: start; box-sizing: border-box; }
#comm > div:nth-child(1) dl { margin-left: auto; }
#comm > div:nth-child(2) dl { padding-left: 80px; }
#comm dl dt:after { content:""; display: block; width: 20px; height: 2px; background: #fff; margin:20px 0; }
#comm dl dd { line-height:2; }

/* tech */
#prm ul { margin-top: 40px; }
#prm ul li { width: 460px; height: 450px; position: relative; }
#prm ul li:nth-child(1) { background:url(../images/pre1.png) no-repeat center/cover; }
#prm ul li:nth-child(2) { background:url(../images/pre2.png) no-repeat center/cover; }
#prm ul li:nth-child(3) { background:url(../images/pre3.png) no-repeat center/cover; }
#prm ul li dl { position: absolute; width: 405px; height: 160px; left: 0; bottom: 0; background: #fff; padding:30px; box-sizing: border-box;}
#prm ul li dl dt { font-weight: 700; }
#prm ul li dl dd { font-weight:400;}

#adv ul { margin-top: 40px; background:url(../images/bg_adv.png) no-repeat center/cover; }
#adv ul li { position: relative; width: 33.3333%; height: 360px; }
#adv ul li:before { content:""; width: 1px; height: 100px; background: #fff; position: absolute; right: 0; top:50%; transform: translateY(-50%); }
#adv ul li:last-child:before { display: none; }
#adv ul li img { height: 41px; }
#adv ul li h3 { line-height:1.3; margin-top: 20px; }
#adv ul li p { margin-top: 20px; }

#inno .wrap { align-items: start; }
#inno span { display: block; margin-top: 40px; }

#story { background:url(../images/bg_story.png) no-repeat center/cover; }
#story .tit img { filter:brightness(0) invert(1); }
#story span { display: block; margin-top: 40px; }
#story figure { border:10px solid #fff; position: relative; }
#story figure img:last-child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; }

/* prd */
#cate .tit ul { margin-top: 40px; margin-bottom: 80px; justify-content: start; }
#cate .tit ul li { margin-right: 20px; width: 230px; }
#cate .tit ul li a { height: 50px; border-radius: 100px; background: #e4e4e4; color:#999; font-weight: 600; }
#cate .tit ul li.select a { background: #0a302e; color:#fff; }

.tab { display: none; }
.tab.on { display: block; }

.tab0 .bnr { background:url(../images/bg_tab0.png) no-repeat center/cover; }
.tab1 .bnr { background:url(../images/bg_tab1.png) no-repeat center/cover; }
.tab2 .bnr { background:url(../images/bg_tab2.png) no-repeat center/cover; }
.tab .bnr h2 { font-weight: 600; }
.tab .bnr h2:after { content:""; display: block; width: 40px; height: 1px; background: #fff; margin:20px 0; }
.tab .bnr ul { margin-top: 100px; }
.tab .bnr ul li { width: 324px; height: 324px; background: #fff; padding:30px; box-sizing: border-box; }
.tab .bnr ul li figure { width: 60px; height: 60px; border:1px solid #0a302e; border-radius: 60px; }
.tab .bnr ul li dl { margin-top: 20px; }
.tab .bnr ul li dl dt { font-weight: 600; margin-bottom: 10px;  }
.tab .bnr ul li dl dd { position: relative; padding-left: 14px; font-size:18px; font-weight: 400; }
.tab .bnr ul li dl dd:before { content:"-"; position: absolute; left: 0; }

.tab .prdList { flex-wrap: wrap; }
.tab .prdList li { margin-top: 90px; width: 458px; }
.tab .prdList li p { margin-top: 10px; font-weight: 500; color:#666; }

/* why */
#sub4 .cont1 { align-items: start; }
#sub4 .cont1 ul { flex-wrap:wrap; width: 780px; }
#sub4 .cont1 ul li { background: #f8f8f8; width: 378px; height: 268px; box-sizing: border-box; padding:50px 0 0 25px; margin-bottom: 24px; }
#sub4 .cont1 ul li figure { height: 50px; justify-content: start; margin-bottom: 20px; }
#sub4 .cont1 ul li dl dt { font-weight: 700; line-height:1.2; }
#sub4 .cont1 ul li dl dd { margin-top: 14px; }

#sub4 .cont2 { background: #f2f2f2; }
#sub4 .cont2 .voices { margin-top: 40px; padding-bottom: 60px; }
#sub4 .cont2 .swiper-slide { display: block; }
#sub4 .cont2 .swiper-slide img { aspect-ratio: 400 / 336; }
#sub4 .cont2 .swiper-slide article { background: #fff; padding:30px 20px; }
#sub4 .cont2 .swiper-slide article p { font-weight: 500; height: 52px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#sub4 .cont2 .swiper-slide article span { display: block; text-align: right; margin-top: 10px; }
#sub4 .cont2 .swiper-pagination-bullet { width: 12px; height: 12px; }
#sub4 .cont2 .swiper-pagination-bullet-active { background: #00302d; }

#sub4 .cont3 { align-items: start; }
#sub4 .cont3 > img { padding-top: 66px; }
#sub4 .cont3 span { display: block; margin-top: 40px; }
#sub4 .cont3 #trustedContainer { width: 767px; padding-top: 66px; display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#sub4 .cont3 #trustedContainer figure { height: 100px; border-bottom:1px solid #333; width:calc((100% - 30px) / 3);}
#sub4 .cont3 #trustedContainer figure:nth-child(1),
#sub4 .cont3 #trustedContainer figure:nth-child(2),
#sub4 .cont3 #trustedContainer figure:nth-child(3) { border-top:1px solid #333; }
#sub4 .cont3 #trustedContainer figure img { max-width:80%; max-height: 40%; }



#sub4 .cont4 li { width: 460px; position: relative; }
#sub4 .cont4 li div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding:120px 0 0 40px; box-sizing: border-box; }
#sub4 .cont4 li div figure { height: 47px; justify-content: start; margin-bottom: 10px; }
#sub4 .cont4 li div dl dt { font-weight: 600; }
#sub4 .cont4 li div dl dt:after { content:""; width: 20px; height: 2px; background: #fff; display: block; margin:20px 0; }

/* journal */
#sub5 .cont1 > div { margin-bottom: 100px; }
#sub5 h2.f32 { position: relative; display:flex; align-items:center; justify-content:space-between; margin-bottom: 60px;  }
#sub5 h2.f32:after { content:""; width: 1030px; height: 2px; background: #00302d; }
#sub5 .list { align-items: start; }
#sub5 .list li { position: relative; }
#sub5 .list li a { width: 380px; height: 200px; background: #fff; position: absolute; left: 0; bottom: 0; padding:40px 0 0 20px;  }
#sub5 .list li a h3 { font-weight: 700; line-height:1.2; }
#sub5 .list li a p { margin-top: 14px; font-weight: normal; }
#sub5 .list li a img { position: absolute; left: 20px; bottom: 30px; } 

#sub5 .cont2 { background: #f2f2f2; }

#sub5 .cont4 ul { margin-top: 60px;  }
#sub5 .cont4 ul li { width: 33.3333%; position: relative; }
#sub5 .cont4 ul li img { width: 100%; aspect-ratio: 505 / 354;}
#sub5 .cont4 ul li div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; }
#sub5 .cont4 ul li div a { border:1px solid #fff; margin-top: 40px; padding:0 30px; height:50px; font-size:14px; border-radius: 100px; }
#sub5 .cont4 ul li div a i { margin-left: 20px; font-size:20px; }

#sub5 .cont5 p { margin-top: 20px; } 
#sub5 .cont5 a { width: 160px; height: 50px; display: inline-flex; margin-top: 30px; border-radius: 50px; } 
#sub5 .cont5 a i { margin-left: 20px; font-size:20px; }

/* contact */
#sub6 .cont1 { align-items: start; }
#sub6 .cont1 iframe { margin-top: 66px; }
#sub6 .cont1 ul { position: absolute; left: 0; bottom: 100px; }
#sub6 .cont1 ul li { padding: 40px 60px; position: relative; border-bottom:1px solid #ddd; }
#sub6 .cont1 ul li:last-child { border:none; }
#sub6 .cont1 ul li i { position: absolute; left: 0; font-size:50px; top:50%; transform: translateY(-50%); }
#sub6 .cont1 ul li:last-child i { font-size:40px; left: 4px; }

#sub6 .cont2 ul { margin-top: 40px; }
#sub6 .cont2 ul li { width: 425px; height: 246px; border:1px solid #ddd; padding-top: 50px; }
#sub6 .cont2 ul li img { margin-bottom: 14px; }
#sub6 .cont2 ul li h3:after { content:""; width: 20px; height: 1px; background: #00302d; margin:10px auto 14px; display: block; }
#sub6 .cont2 ul li p { font-weight: 300; line-height:1.2; }

#sub6 .cont3 { align-items: stretch; }
#sub6 .cont3 article { width: calc(100% - 820px); padding:60px 0 0 80px; box-sizing: border-box; background:#0a302e url(../images/bg_b2b.png) no-repeat right bottom; }
#sub6 .cont3 article p { margin-top: 10px; }
#sub6 .cont3 article span { margin-top: 20px; align-items: start; justify-content: start; }
#sub6 .cont3 article span i { font-size:24px; margin-right: 10px;  }
#sub6 .cont3 article a { padding:0 30px; height: 40px; border:1px solid #fff; border-radius: 100px; display:inline-flex; font-size:14px; margin-top: 40px;  }
#sub6 .cont3 article a i { font-size:20px; margin-left: 14px; }
#sub6 .cont3 > img { width: 820px; }

#sub6 .cont4 span { display: block; margin-top: 30px; }
#sub6 .cont4 .map { margin-top: 60px; height: 860px; position: relative; }

#sub6 .cont4 .map .loc { position: absolute; left: 20px; top: 40px; width: 340px; background: #fff; height:calc(100% - 80px); }
#sub6 .cont4 .loc .search { height: 50px; }
#sub6 .cont4 .loc .search strong { padding-left: 10px; display: inline-flex; }
#sub6 .cont4 .loc .search span { display: inline-block; margin-top: 0; margin-left: 6px;  }
#sub6 .cont4 .loc .search button { border:none; background: none; padding:10px;  }
#sub6 .cont4 .loc .filter { border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
#sub6 .cont4 .loc .filter a { height: 50px; padding:0 10px; box-sizing: border-box; width: 33.3333%; border-right:1px solid #ddd; }
#sub6 .cont4 .loc .filter a:last-child { border-right:none; }
#sub6 .cont4 .loc .filter a i { font-size:12px; }
#sub6 .cont4 .loc .shop { height:calc(100% - 100px); overflow: auto; }
#sub6 .cont4 .loc .shop li { border-bottom:1px solid #ddd; padding:10px; font-size:14px; }
#sub6 .cont4 .loc .shop li span { display: block; margin-top: 0; }

#sub6 .cont5 { background: url(../images/bg_sleep.png) no-repeat center/cover; }
#sub6 .cont5 img { margin-bottom: 30px; }
#sub6 .cont5 p { margin-top: 10px; } 
#sub6 .cont5 a { width: 160px; height: 44px; display: inline-flex; margin-top: 30px; border-radius: 50px; border:1px solid #fff; } 
#sub6 .cont5 a i { margin-left: 20px; font-size:20px; }