@charset "utf-8";

#contents { position:relative; min-height: 880px; z-index:1;}
.main_visual {max-width:1920px; position:relative; margin:0 auto; }
.visual_content {}
.main_visual .swiper-slide { background-color:#000;}
.main_visual .slide_img { position:relative; width:100%; height:0; padding-bottom:51.56%; background-size:cover !important; background-position:center center !important; opacity:0.6; z-index:1;}
.visual_typo {position:absolute; width:90%; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; font-size:1.57em; line-height:1.4; font-weight:300; letter-spacing:-0.04em; color:#fff;z-index:2;}
.visual_typo .text01::before { display:block; content:""; width:1px; height:2em; background:#fff; margin:0 auto 0.5em;}
.visual_typo .text01 { font-size:1.545em; opacity:0.8;}
.visual_typo .text02 { font-size:3.45em; font-weight:400; margin:0.1em 0;}
.visual_typo .text03 { opacity:0.6;}
.visual-pagination { position:absolute; width:100%; text-align:center; left:0; bottom:3%; z-index:6;}
.visual-pagination > span {text-indent:-999em; width:16px; height:16px; background:rgba(255,255,255,0.7); opacity:1; border-radius:8px; margin:0 5px; transition:0.3s ease;}
.visual-pagination > span.swiper-pagination-bullet-active {width:32px; background:#f18c1a;}
@media  (max-width: 1280px){
.main_visual .slide_img {padding-bottom:55%;}
.visual_typo {font-size:1.45em;}
}
@media  (max-width: 1024px){
.main_visual .slide_img {padding-bottom:60%;}
.visual_typo {font-size:1.9vw;}
}
@media  (max-width: 768px){
.main_visual .slide_img { padding-bottom:70%;}
.visual-pagination > span { width:12px; height:12px; border-radius:6px; }
.visual-pagination > span.swiper-pagination-bullet-active {width:24px;}
}
@media  (max-width: 440px){
.main_visual .slide_img { padding-bottom:80%;}
.visual_typo {font-size:2.5vw;}
}


.main_container {position:relative; overflow:hidden;}
.main_con {position:relative; padding:10% 0;}
.main_con {}
.bg_gray {background:#f5f5f5;}

.main_con01 { }
[class^="mainTitle"] { font-size:1.14em; line-height:1.6; font-weight:300; color:#666;}
[class^="mainTitle"] .title { color:#000; text-transform:uppercase;}
[class^="mainTitle"] .title.white { color:#fff; margin-bottom:4%;}
[class^="mainTitle"] .title .title01 { font-family: 'Outfit', sans-serif; font-size:12px; font-weight:500; letter-spacing:0.01em;}
[class^="mainTitle"] .title .title02 { font-family: 'Outfit', sans-serif; font-size:3.375em; line-height:1.2; font-weight:900;}
[class^="mainTitle"] .text { margin-top:1em;}
.mainTitle01 { display:flex;  justify-content: space-between; align-items: flex-end; margin-bottom:5%;}

.main01_02 { display:flex;  justify-content: space-between; margin-top:6%;}
.main01_02_con {position:relative; max-width:620px; width:47.5%; background:#736357;}
.main01_02_con > dl { position:absolute; left:8%; bottom:9%; color:#fff; z-index:2;}
.main01_02_con > dl dt::before { display:block; content:""; width:1px; height:4em; background:#fff; margin:0.6em 0;}
.main01_02_con > dl dt {font-family: 'Outfit', sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.2em;}
.main01_02_con > dl dd { font-size:1.57em; line-height:1.5; font-weight:300; letter-spacing:-0.04em;}
.main01_02_con img { position:relative; opacity:0.5; z-index:1;}

.main_con02 { position:relative;}
.main_0201 { display:flex; position:absolute; width:100%; height:100%; z-index:2;}
.main_0201 > div  {position:relative; width:25%; border-right:1px solid rgba(255,255,255,0.15);}
.main_02_con { position:absolute; width:100%; padding:15% 10%; color:#fff; left:0; bottom:0; font-size:1.14em; line-height:1.5; font-weight:300;  transition:padding 0.2s ease;}
.main_02_con .title {display:block; font-size:1.5em;}
.main_02_con .text { display:block; margin-top:0; height:0; overflow:hidden; transition:height 0.2s ease;}
.main_0201 > div.active .main_02_con, .main_0201 > div:hover .main_02_con { background:#8a8530; padding:10%; }
.main_0201 > div.active .main_02_con .text, .main_0201 > div:hover .main_02_con .text { height:auto; margin-top:5%;}
.main_0202 { position:relative; z-index:1;}

.main_con03::before { position:absolute; content:""; width:100%; height:70%; background:#231917; right:50%; top:0; z-index:1; }
.main_con03 .mainTitle02, .main_con03 .proudt_wrap { position:relative; z-index:3; }

.main_con04 { display:flex; justify-content: space-between;}
.main_con04 .main_video { max-width:700px; width:60%;}
.inner_video { position:relative; height:0; padding-bottom:56.25%; overflow:hidden;}
.inner_video iframe { position:absolute; width:100%; height:calc(100% + 200px); left:50%; top:50%; transform:translate(-50%,-50%);}

.main_con05 { display:flex; justify-content: space-between;}
.board_list { display:flex; justify-content: space-evenly; width:74%; border:0.6em solid #f0f0f0; padding:3% 0;}
.board_list li { position:relative; width:28%; }
.board_list li:not(:first-child)::before { position:absolute; content:""; width:1px; height:100%; background:#f0f0f0; left:-8%; top:0;}
.board_list li a { display:block; text-align:center; }
.board_list li a span { display:block;}
.board_list li a .img {max-width:84px; width:60%; margin:0 auto 5%;}
.board_list li a .text01 {font-family: 'Outfit', sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.2em; color:#f18c1a;}
.board_list li a .text02 { font-size:1.57em; line-height:1.5; color:#000; font-weight:700; margin-bottom:2%;}
.board_list li a .text03 { font-size:0.95em; font-weight:300; color:#777;}
.customer_wrap { max-width:306px; width:23.2%; background:#f18c1a; padding:1.5em 2em 1em; color:#fff;}
.customer_wrap a { color:#fff;}
.customer_dl01 > dt {}
.customer_dl01 > dt .title01 {display:block;font-family: 'Outfit', sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.2em; color:#ffd07e;}
.customer_dl01 > dt .title02 {display:block; font-size:1.57em; line-height:1.4; font-weight:700; margin-bottom:0.8em;}
.customer_dl01 > dd {}
.customer_tel { display:inline-block; font-size:2em; font-weight:700;}
.customer_dl02 { font-size:0.95em; line-height:1.5; font-weight:300; margin-top:1em;}
.customer_dl02 > dt { font-weight:700;}
.btn_more_wrap { text-align:center; margin-top:1.2em;}
.btn_more { display:inline-block; font-size:0.95em; border:1px solid #f5ad5a; background:#f29831; padding:0.7em 2em; transition:0.2s ease;}
.btn_more:hover { transform:translateX(10px);}
.btn_more span { margin-left:2em;}

.main_con06 { padding-top:0;}
.insta_wrap {}
.insta_wrap > dt { text-align:center; font-family: 'Outfit', sans-serif; font-size:2.14em; line-height:1.5; font-weight:500; margin-bottom:3%;}
.insta_wrap > dt a {color:#000;}

@media (max-width:1820px) {
.main_02_con { font-size:0.94em; padding:12% 6%}
.main_0201 > div.active .main_02_con, .main_0201 > div:hover .main_02_con { padding:7% 6%;}
}

@media (max-width:1280px) {
[class^="mainTitle"] { font-size:1.07em;}
.main01_02 { margin-top:3%;}
.main01_02_con { width:48.5%;}

.board_list { width:71%; padding:5% 0;}
.board_list li a .text03 { display:none;}
.customer_wrap { width:27%;}

}

@media  (max-width: 1024px){
[class^="mainTitle"] { font-size:1.0em;}
.main01_02_con > dl { font-size:0.9em;}

.main_con04 .main_video {width:50%;}

.main_0201 { flex-wrap:wrap;}
.main_0201 > div  { width:50%;}
.main_0201 > div:nth-child(1), .main_0201 > div:nth-child(2) { border-bottom:1px solid rgba(255,255,255,0.15);}
.main_02_con .text { font-size:1.1em; line-height:1.3;}
.main_0202 { max-width:unset; width:120%; left:50%; transform:translateX(-50%);}

}

@media (max-width:920px) {
.board_list { width:66%; padding:5% 0;}
.customer_wrap { width:32%;}
}

@media  (max-width: 860px){
[class^="mainTitle"] .title .title02 { font-size:2.6em;}

.main01_02_con > dl { left:6%; bottom:7%;  font-size:0.8em;}
.main01_02_con > dl dt::before {height:2em;}

.main_0202 { width:130%;}
}

@media (max-width:768px) {
.main_con05 { flex-direction:column; align-items:flex-end;}
.board_list {max-width:500px; width:100%; margin:0 auto;}
.board_list li a .img { width:40%;}
.board_list li a .text01 { font-size:5px; letter-spacing:0;}
.board_list li a .text02 { font-size:1.25em;}
.customer_wrap { max-width:260px; width:100%;}
}


@media  (max-width: 700px){
[class^="mainTitle"] .title .title02 { font-size:2.6em;}
.mainTitle01 {flex-direction:column; align-items: stretch;}
[class^="mainTitle"] .text { font-size:1.15em;}
[class^="mainTitle"].mainTitle01 .text br { display:none;}

.main_con04 {  flex-direction:column;}
.main_con04 .main_video {width:100%; margin-top:2em;}

}

@media  (max-width: 560px){
.main01_02 { position:relative; flex-direction:column; padding-bottom:8em; }
.main01_02_con { width:70%;}
.main01_02_con.first {position:relative; z-index:3;}
.main01_02_con.first::before { position:absolute; content:""; width:0.6em; height:100%; background:#fff; right:-0.6em; bottom:0; opacity:0.6; z-index:-1;}
.main01_02_con.first::after { position:absolute; content:""; width:100%; height:0.6em; background:#fff; right:-0.6em; bottom:-0.6em; opacity:0.6; z-index:-1;}
.main01_02_con.second {position:absolute; right:0; bottom:0; z-index:1;  } 
.main01_02_con > dl { left:4%; bottom:5%;  font-size:0.7em;}
.main01_02_con.second > dl { left:auto; right:4%; text-align:right;}
.main01_02_con.second > dl dt::before { margin-left:99%;}

.main_02_con { letter-spacing:-0.04em;}
.main_02_con, .main_0201 > div.active .main_02_con, .main_0201 > div:hover .main_02_con { padding:6% 4%;}
.main_02_con .title { font-size:1.3em}
.main_02_con .text { /*display:none;*/}
.main_0202 { width:200%;}


.main_con03::before { right:30%;}
}


@media  (max-width:420px){
}


/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative; max-width:1200px; margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} 
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

@media  (max-width: 1024px){
.hd_pops {max-width:400px !important; width:90% !important; height:auto !important;}
}