@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary, select,
time, mark, audio, video, textarea, input, button{font-family: 'Noto Sans KR', sans-serif}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

/* 팝업레이어 */
#hd_pop {z-index:99999;position:relative;margin:0 auto;width:1160px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute; background:#fff}
.hd_pops_con {line-height:0;}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* reset */
/*overflow:hidden;*/
*{margin:0; padding:0;}
body{width:100%; min-width:320px;margin:0px auto; position:relative; padding:0px; color:#5c5c5c;  font-size:12px; background-color:#fff; }
img,fieldset{border:0 none; margin:0; padding:0;}
dl,ul,ol,li, dt, dd{margin:0px; padding:0px; list-style:none;}
table{border-collapse:collapse;}
h1, h2, h3, h4, h5, h6, p{margin:0px; padding:0px;}
nav, header, footer, section, aside, article{display:block;}
input[type=text], input[type=button], select{color:#454545;}
input[type=submit]{cursor:pointer;}
input{vertical-align:middle; }
a{text-decoration:none; color:#5c5c5c; transition-duration:0.3s;}
textarea, select{}
.plugin.chrome.webkit.win.x1.Locale_ko_KR{margin:0 !important;}



.header{height:80px; display:flex; padding:0 40px; justify-content: space-between; align-items:center; border-bottom:1px solid #ddd; background:#fff; position:absolute; top:0; left:0; right:0; z-index:100;}
.logo img{width:165px;}
.ambient_button{display:block; padding:0 20px; height:50px; line-height:50px; background:#9d2224; color:#fff; font-size:15px; font-weight:500; border-radius:4px;}
.ambient_button:hover{background:#252525;}

.ambient_color_list{margin-top:50px;}
.ambient_color_list ul{font-size:0;}
.ambient_color_list ul li{display:inline-block; vertical-align:middle;}
.ambient_color_list ul li + li{margin-left:6px;}
.ambient_color_list button{border:0; width:32px; height:32px; border-radius:50%; cursor:pointer;}
.ambient_color_list li.active button{border:1px solid #333;}

.ambient_color_list.black .black{background:url('/images/black_black.png') center center no-repeat;}
.ambient_color_list.black .gray{background:url('/images/black_gray.png') center center no-repeat;}
.ambient_color_list.black .blue{background:url('/images/black_blue.png') center center no-repeat;}
.ambient_color_list.black .red{background:url('/images/black_red.png') center center no-repeat;}
.ambient_color_list.black .brown{background:url('/images/black_brown.png') center center no-repeat;}
.ambient_color_list.black .purple{background:url('/images/black_purple.png') center center no-repeat;}
.ambient_color_list.black .beige{background:url('/images/black_beige.png') center center no-repeat;}

.ambient_color_list.brown .black{background:url('/images/brown_black.png') center center no-repeat;}
.ambient_color_list.brown .gray{background:url('/images/brown_gray.png') center center no-repeat;}
.ambient_color_list.brown .blue{background:url('/images/brown_blue.png') center center no-repeat;}
.ambient_color_list.brown .red{background:url('/images/brown_red.png') center center no-repeat;}
.ambient_color_list.brown .brown{background:url('/images/brown_brown.png') center center no-repeat;}
.ambient_color_list.brown .purple{background:url('/images/brown_purple.png') center center no-repeat;}
.ambient_color_list.brown .beige{background:url('/images/brown_beige.png') center center no-repeat;}

.ambient_color_list.gray .black{background:url('/images/gray_black.png') center center no-repeat;}
.ambient_color_list.gray .gray{background:url('/images/gray_gray.png') center center no-repeat;}
.ambient_color_list.gray .blue{background:url('/images/gray_blue.png') center center no-repeat;}
.ambient_color_list.gray .red{background:url('/images/gray_red.png') center center no-repeat;}
.ambient_color_list.gray .brown{background:url('/images/gray_brown.png') center center no-repeat;}
.ambient_color_list.gray .purple{background:url('/images/gray_purple.png') center center no-repeat;}
.ambient_color_list.gray .beige{background:url('/images/gray_beige.png') center center no-repeat;}

.fp-section {background:linear-gradient(31deg, rgba(33,33,33,1) 0%, rgba(81,81,81,81) 100%); padding-top:81px; box-sizing:border-box;}

.abiment_title{font-size:50px; color:#000; font-weight:900; line-height:50px;}
.abiment_title span{color:#acacac; font-size:30px; display:block;}
.abimnet_wrap{max-width:1400px; margin:0 auto;}

.abimnet_wrap > div{display:flex; align-items:center; width:100%; justify-content:space-between;}
.abiment_thum_wrap{width:336px;}
.abiment_thum{display:flex; flex-wrap:wrap; width:100%; justify-content:space-between;}
.abiment_thum:hover li{ opacity:0.5;}
.abiment_thum > li{margin-top:13px; transition-duration:0.3s;}
.abiment_thum > li:hover{opacity:1;}

.abiment_thum_section{}
.abiment_thum_section > div{width:160px; background:#fff; border-radius:8px; padding:13px; box-sizing:border-box; cursor:pointer; position:relative;}
.abiment_thum_section > span{display:block; text-align:center; font-size:14px; margin-top:4px; color:#fff;}

.abiment_thum_section img{display:block; width:100%;}
.abiment_thum_section > div:before{display:block; content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:3px solid #9d2224; border-radius:7px; opacity:0;}
.abiment_thum > li.active .abiment_thum_section > div:before{opacity:1;}

div.swiper-slide{opacity:0 !important;}
div.swiper-slide.swiper-slide-active{opacity:1 !important;}

.abiment_img_wrap{position:relative;}
.abiment_img_wrap li{display:none;}
.abiment_img_wrap li.active{display:block;}
.abiment_img_wrap li img{display:block;}

@media screen and (max-width:1400px){
.header{padding-left:20px; padding-right:20px;}
.fp-section > div{padding-left:20px; padding-right:20px;}

.abiment_img_wrap li img{width:640px;}
}

@media screen and (max-width:1024px){
.abiment_img_wrap li img{width:600px; }
.abiment_thum_wrap{width:auto;}
.abiment_thum_wrap{width:270px;}
.abiment_thum li{width:calc(50% - 4px);}
.abiment_thum_section > div{width:auto; padding:8px;}
}

@media screen and (max-width:860px){
.fp-section{display:block; padding-top:80px; height:100%; box-sizing:border-box;}
.fp-section > div{height:100%; display:flex; align-items:center;}

.abimnet_wrap > div{display:block;}
.abiment_thum_wrap{width:100%; box-sizing:border-box;}
.abiment_img_wrap li img{width:90%; display:block; margin:0 auto;}
.abiment_thum_wrap{position:absolute; bottom:30px; left:20px; right:20px; width:auto;}
.abimnet_wrap{}
.abiment_thum li{width:12.5%;}
.abiment_thum_section > span{letter-spacing:-0.03em; font-size:12px; white-space:nowrap;}

}

@media screen and (max-width:640px){
.abiment_thum_wrap{position:static;}
.abiment_thum{justify-content: flex-start; width:auto; margin-left:-10px; margin-right:-10px;}
.abiment_thum li{width:calc(25% - 8px); margin-left:4px; margin-right:4px;}

#fp-nav{top:20px; }
#fp-nav ul li a:before{font-size:20px;}
.header{height:65px; padding-left:15px; padding-right:15px;}
.logo img{width:120px;}
.ambient_button{font-size:13px; padding:0 10px; height:40px; line-height:40px; letter-spacing:-0.05em;}


}