@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);	/* 노트산스 Noto Sans KR */
/* 프리텐다드 */
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src: local('Pretendard Bold'), url(../images/fonts/Pretendard-Bold.woff2) format('woff2'), url(../images/fonts/Pretendard-Bold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	src: local('Pretendard SemiBold'), url(../images/fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../images/fonts/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src: local('Pretendard Medium'), url(../images/fonts/Pretendard-Medium.woff2) format('woff2'), url(../images/fonts/Pretendard-Medium.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src: local('Pretendard Regular'), url(../images/fonts/Pretendard-Regular.woff2) format('woff2'), url(../images/fonts/Pretendard-Regular.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	src: local('Pretendard Light'), url(../images/fonts/Pretendard-Light.woff2) format('woff2'), url(../images/fonts/Pretendard-Light.woff) format('woff');
}


* { margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; height: 100%; margin: 0; padding: 0;}
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-y: scroll; word-break: keep-all; }
body,div,span,button,a,td,th,select,textarea,input,dl,dt,dd { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; } 
em { font-style: normal; }
h1,h2,h3,h4,h5 { margin: 0; padding: 0; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-weight: 400; }
a { text-decoration: none; color: #000; }
a:hover { cursor: pointer; }
button { appearance: none; -webkit-appearance: none; margin: 0; border: 0; box-sizing: border-box; background: transparent; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dt, dd { margin: 0; padding: 0; }
p { margin: 0; padding: 0; line-height: 1.8; }
u { display: inline-block; text-decoration: none; line-height: 1.8; }
img { border: 0; width: 100%;}
.inner { max-width: 1200px; margin: 0 auto; position: relative; padding: 0 20px; }
input { border: none; outline: none; }
input:focus { background-color: transparent; }
@media screen and (min-width:1000px){
	p { line-height: 2; }
}
@media screen and (min-width:1440px){
	.inner { padding: 0; }
}


/* 헤더 */
.header { position: relative; top: 0; left: 0; width: 100%; z-index: 100; transition: background 0.4s, border-bottom 0.3s; }
.header .dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; }
.header.on .dim { display: block; }
.header .inner { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 60px; padding: 0; }
.header .logo a { display: block; width: 250px; height: 60px; background: url(../images/logo.svg) left center no-repeat; background-size: auto 100%; font-size: 0; line-height: 0; text-indent: -9999px; color: transparent; }
.header .openNavBtn { display: flex; justify-content: center; align-items: center; position: relative; width: 60px; height: 60px; line-height: 0; text-indent: -9999px; color: transparent; z-index: 11; }
.header.on .openNavBtn { animation: opacity2 0.3s linear both 0s; }
.header .openNavBtn > div { position: relative; width: 24px; height: 16px; }
.header .openNavBtn span { position: absolute; display: block;  width: 24px; height: 2px; background-color: #031e36; transition: transform 0.5s, width 0.2s, opacity 0.2s, background-color 0.5s; }
.header .openNavBtn span:nth-child(1) { top: 0; transform-origin: top left;}
.header .openNavBtn span:nth-child(2) { top: 50%; }
.header .openNavBtn span:nth-child(3) { top: 100%; transform-origin: bottom left;}
.header.on .openNavBtn span:nth-child(1) { transform: rotate(45deg); }
.header.on .openNavBtn span:nth-child(2) { opacity: 0; }
.header.on .openNavBtn span:nth-child(3) { transform: rotate(-45deg); }
.header .navBox { display: none; position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background: #fff; z-index: 10; }
.header .navBox ul { padding-top: 60px; }
.header .navBox ul li { border-bottom: 1px solid #e7e7e7; }
.header .navBox ul li:first-child { border-top: 1px solid #e7e7e7; }
.header .navBox ul li a { display: block; padding: 15px; font-size: 15px; color: #000; transition: all 0.3s; }
.header .navBox ul li a:hover {font-weight:500;}


@media screen and (min-width:1000px){
	.header .dim { display: none; }
	.header {border-bottom: 1px solid #ccc;}
	.header .inner { align-items: stretch; height: 100px;}
	.header .logo { display: flex; align-items: center; }
	.header .openNavBtn { display: none; }
	.header .navBox { display: block; position: relative; right: auto; height: auto; width: auto; background: transparent; }
	.header .navBox nav { height: 100%; }
	.header .navBox ul { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 100%; padding-top: 0; }
	.header .navBox ul li { height: 100%; border-bottom: none; }
	.header .navBox ul li:first-child { border-top: none; }
	.header .navBox ul li a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 20px; font-size: 18px; }
   
}
main h2 { line-height: 0; text-indent: -9999px; }
.home main section { position:relative; background: url(/images/home-bg.png) no-repeat center/cover;}
main .themeBox { min-height: 70vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
main .themeBox .textBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: 100%;}
main .themeBox .textBox strong {font-size: 28px; font-weight: bold;  margin-bottom: 20px; text-align:center; }
main .themeBox .textBox span { display: none; font-size: 18px;}
main .themeBox .textBox span.slideUp { display: block; opacity: 0; animation: slideUp 2s ease-out forwards;}
main .themeBox .imgBox { width: 100%;  background-size: contain;}
main .themeBox .imgBox img {width: 100%;}

.product main section .productBox{width:100%; position:relative; background: url(/images/product-bg.png) no-repeat center/cover; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; height: 70vh;}
.product main section .imgBox {display: flex;align-items: center;justify-content: center; max-width:500px;}
.product main section .imgBox img {width:100%;}

.contact .load { margin-bottom: 30px; }
.contact .load div span {font-size:16px;}
.contact .load h3 { padding:20px 0; font-size:30px; font-weight:500;}
.contact .load .map { width: 100%; height: 50vw; max-height: 570px; margin-bottom: 15px; background-color: #ccc; border-radius:20px; }
.contact .load .txtBox { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding: 20px 0;}
.contact .load .txtBox .tit {position: absolute; top: -2px;  left: 0; width: auto; margin-bottom:5px; font-weight:600;}
.contact .load .txtBox span {font-size:16px; font-weight:400; color: #505050; width: 100%; text-align: right;}
.contact .load .arrival {display: flex; justify-content: space-between;}
.contact .load .addr {display: flex; justify-content: space-between;}
@media screen and (min-width:1000px) {
	.contact .load .txtBox .tit {top: 20px; }
	.contact .load .txtBox span {font-size:20px;}
}

/* warrenty */
.warrenty * { box-sizing: border-box; }
.warrenty .search { background: #000 url(/images/warrenty/search_bg_m.jpg) center no-repeat; background-size: 100% auto; padding: 190px 20px 180px; color: #fff; text-align: center; user-select: none;}
.warrenty .search.rslt { padding: 130px 20px 30px; }
.warrenty .search form { max-width: 500px; margin: 0 auto;}
.warrenty .search h3 { margin-bottom: 10px; font-size:25px; font-weight:bold;}
.warrenty .search .searchBox { background: rgba(141,141,141,.2); border-radius: 16px; padding: 20px 25px 40px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; }
.warrenty .search .searchBox em { margin-bottom: 30px; font-style: normal; color: #E0E0E0; font-size:18px;}
.warrenty .search .searchBox .radioBox {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; border-radius: 5px; overflow: hidden; margin-bottom: 15px;font-size:16px;  }
.warrenty .search .searchBox .radioBox label { width: 33.33%; padding: 10px 0; position: relative; cursor: pointer; }
.warrenty .search .searchBox .radioBox label:before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 15px; background: rgba(255,255,255,0.2); transform: translateY(-50%); }
.warrenty .search .searchBox .radioBox label:last-child:before { display: none; }
.warrenty .search .searchBox .radioBox label.on { background: #020916; width: calc(33.33% + 2px); margin-left: -1px; z-index: 2; border-radius:5px;}
.warrenty .search .searchBox .radioBox label.on span {color:#fff;}
.warrenty .search .searchBox .radioBox label.on:before { display: none; }
.warrenty .search .searchBox .radioBox label input { display: none; }
.warrenty .search .searchBox .radioBox label span { color: #cfcfcf; font-size:16px;}
.warrenty .search .searchBox input[type="text"] { width: 100%; margin-bottom: 15px; border-radius: 8px; border: 1px solid #020916; background: #020916; padding: 0 15px; height: 50px; color: #fff; font-size:16px;}
.warrenty .search .searchBox button { width: 100%; border-radius: 8px; border: 1px solid #d2e8ff; background: #d2e8ff; color: #020916; height: 60px; font-weight: bold; transition: all 0.3s; font-size:18px;}
.warrenty .search .searchBox button:hover {background:#020916; border-color:#020916; color:#fff;}
.warrenty .result { padding: 30px 0 50px; max-width: 1120px; margin: 0 auto; }
.warrenty .result .none { text-align: center; border-top: 1px solid #b0b0b0; padding: 20px 0; margin: 30px 0; }
.warrenty .result .none span { font-size: 16px; color: #8C8E8F; }

@media screen and (min-width:1000px) {
	.warrenty .search { padding: 280px 0 300px; background: #000 url(/images/warrenty/search_bg_w.jpg) center no-repeat; background-size: cover;}
	.warrenty .search.rslt { padding: 170px 20px 80px; }
	.warrenty .search h3 { margin-bottom: 15px; font-size:30px;}
	.warrenty .search .searchBox { padding: 40px 90px 40px; }
	.warrenty .search .searchBox em { font-size: 20px; margin-bottom:30px; }
	.warrenty .search .searchBox button { font-size: 18px; }
	.warrenty .result { padding: 50px 0 70px; }
	.warrenty .result .none { padding: 30px 0; margin: 40px 0 120px; }
}


/* 푸터 */
.footer { background: #fff; padding: 40px 0 60px; border-top: 1px solid #E5E5E5; }
.footer .inner { padding-top: 0; padding-bottom: 0; }
.footer .logo { width: 100%; height: 60px; margin-bottom: 20px; background: url(../images/logo.svg) no-repeat center; background-size: auto 100%;}
.footer .info > div span { position: relative; display:inline-block; }

.footer .info .name { display: block; }
.footer .info .privacy a { font-weight: 700; }
.footer .info .tel { font-weight: 700; }
.footer .info .tel a { font-weight: 700; text-decoration: underline; }

@media screen and (min-width:800px){
	main .themeBox .textBox { width: 50%; padding-left:20px;}
	main .themeBox .imgBox { width: 50%; max-width:500px; padding-right:20px;}
	main .themeBox .textBox strong {font-size: 32px; font-weight: bold; margin-bottom: 30px; text-align:left; letter-spacing:1px;}
	main .themeBox .textBox span {font-size: 22px; }
	.footer .info > div span:not(:first-child)::before { content: "|"; padding-right: 3px; font-weight: 400; }
	.footer .inner { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
	.footer .logo { width: 120px; height: 60px; margin-bottom: 0; }
	.footer .info { width: calc(100% - 150px); }
}
@media screen and (min-width:1600px){
	.footer .info span { font-size: 18px; }
	.footer .info .privacy a { font-size: 18px; }
	.footer .info .tel a { font-size: 18px; }
	.footer .info .mail a { font-size: 18px; }
}

@keyframes slideUp {
    0% {
        opacity: 0;      
        transform: translateY(100%); 
    }
    100% {
        opacity: 1;      
        transform: translateY(0); 
    }
}