@charset 'utf-8';

/* 공통 */
:root{
	--baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Montserrat: 'Montserrat', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Poppins: 'Poppins', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Amita: 'Amita', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #00264B;
}

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1730{ max-width: 1730px; width: 100%; margin: 0 auto; }
.w1700{ max-width: 1700px; width: 100%; margin: 0 auto; }
.w1610{ max-width: 1610px; width: 100%; margin: 0 auto; }
.w1500{ max-width: 1500px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1770px){
	.w1730{ padding: 0 20px; }
}

@media screen and (max-width: 1740px){
	.w1700{ padding: 0 20px; }
}

@media screen and (max-width: 1650px){
	.w1610{ padding: 0 20px; }
}

@media screen and (max-width: 1540px){
	.w1500{ padding: 0 20px; }
}

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:15px;	line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }


/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.5s; }
#header .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#header .logo{ display: inline-block; position: relative; padding: 32px 50px; }
#header .logo{ opacity: 1; transition: all 0.5s; }
#header .logo::after{ content: url("https://binishop.iwinv.net/sample/17/img/common/logo2.png"); position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header .right{ display: flex; }
#header .depth01{ display: flex; margin-right: 15px; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ display: inline-block; font-size: 1.8rem; font-weight: 600; color: #fff; padding: 40px 42.5px; transition: all 0.5s; }

#header .depth02{ width: 100%; height: max-content; position: absolute; top: calc(100% - 20px); z-index: 10; padding: 22.5px 0; opacity: 0; visibility: hidden; transition: all 0.5s; }
#header .depth02::before{ content: ""; width: 100%; height: 100%; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); transform: scaleY(0); transform-origin: top; visibility: hidden; transition: all 0.5s; position: absolute; top: 0; left: 0; z-index: -1; }
#header .depth02 > li > a{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 400; color: #555; padding: 7.5px; letter-spacing: -0.02em; text-align: center; }

#header .depth01 > li:hover .depth02{ visibility: visible; opacity: 1; }
#header .depth01 > li:hover .depth02::before{ visibility: visible; transform: scaleY(1); }

#header .blog{ width: 195px; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; border-left: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.5s; }
#header .blog span{ font-size: 1.6rem; font-weight: 600; color: #fff; transition: all 0.5s; }
#header .blog span::after{ content:"\e980"; font-family:'xeicon'; font-weight: normal; font-style: normal; margin-left: 10px; }
#header .blog a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#header .open{ width: 66px; height: 66px; background: none; border: none; border-left: 1px solid rgba(255, 255, 255, 0.2); outline: none; display: none; }
#header .open span{ display: inline-block; position: relative; top: -3px; width: 20px; height: 2px; background: #fff; transition: all 0.5s; cursor: pointer; }
#header .open span::before, #header .open span::after{ content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 0; transition: all 0.5s; }
#header .open span::before{ top: -5px; }
#header .open span::after{ bottom: -5px; }

/* #header - scroll */
#header.scroll .logo img{ opacity: 0; }
#header.scroll .logo::after{ opacity: 1; }
#header.scroll{ border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
#header.scroll .depth01 > li > a{ color: #000; }
#header.scroll .blog{ border-left: 1px solid rgba(0, 0, 0, 0.06); }
#header.scroll .blog span{ color: #000; }
#header.scroll .open{ border-left: 1px solid rgba(0, 0, 0, 0.06); }
#header.scroll .open span{ background: #000; }
#header.scroll .open span::before, #header.scroll .open span::after{ background: #000; }

/* #header - half */
#header.half .logo img{ opacity: 0; }
#header.half .logo::after{ opacity: 1; }

/* #header - back */
#header.back{ background: #fff; }
#header.back .logo img{ opacity: 0; }
#header.back .logo::after{ opacity: 1; }
#header.back{ border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
#header.back .depth01 > li > a{ color: #000; }
#header.back .blog{ border-left: 1px solid rgba(0, 0, 0, 0.06); }
#header.back .blog span{ color: #000; }
#header.back .open{ border-left: 1px solid rgba(0, 0, 0, 0.06); }
#header.back .open span{ background: #000; }
#header.back .open span::before, #header.back .open span::after{ background: #000; }


@media screen and (max-width: 1600px){
	#header .logo{ padding: 31px 30px; }
	#header .depth01 > li > a{ padding: 35px; }
	#header .blog{ width: 130px; }
}

@media screen and (max-width: 1250px){
	#header .depth01 > li > a{ padding: 30px; }
}

@media screen and (max-width: 1100px){
	#header .logo{ padding: 25px 20px; }
	#header nav{ display: none; }
	#header .blog{ display: none; }
	#header .open{ display: block; }
}


/* footer */
#footer{ background: #000; /* padding: 110px 0 50px; */ padding: 50px 0; position: relative; color: #fff; }
#footer .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; }
#footer .logo{ display: inline-block; position: relative; }
#footer .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#footer .line01 .flex-box > div{ width: 50%; }
#footer .line01 .text-box{ /* width: 50%; */ padding-right: 50px; }

#footer .info-box{ margin-top: 70px; }
#footer .info-box ul{ display: flex; flex-wrap: wrap; gap: 15px 20px; }
#footer .info-box ul:not(:last-of-type){ margin-bottom: 15px; }
#footer .info-box ul li{ font-size: 1.6rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); letter-spacing: -0.02em; padding-right: 20px; position: relative; }
#footer .info-box ul li:first-of-type{ padding-left: 0; }
#footer .info-box ul li::after{ content: ""; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.4); position: absolute; top: 46%; right: 0; transform: translateY(-50%); }
#footer .info-box ul li:last-of-type::after{ display: none; }

/* #footer .link-box{ margin-top: 65px; } */
#footer .link-box ul{ display: flex; justify-content: space-between; }
#footer .link-box ul li{ display: flex; justify-content: space-between; width: calc((100% - 30px) / 4); background: #111; padding: 15px 20px; font-size: 1.4rem; font-weight: 400; position: relative; }
#footer .link-box ul li::after{ display: inline-block; content:"\e980"; font-family:'xeicon'; font-weight: normal; font-style: normal; padding-left: 10px; }
#footer .link-box ul li.download::after{ content:"\eb7c"; }
#footer .link-box ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#footer .dl-box{ width: calc(50% - 60px); }
#footer .dl-box ul, #footer .dl-box ul li{ height: 100%; }
#footer .dl-box ul{ display: flex; justify-content: space-between; text-align: center; }
#footer .dl-box ul li{ width: calc((100% - 40px) / 3); display: flex; justify-content: center; align-items: center; clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px); background: #777; position: relative; z-index: 10; padding: 20px; }
#footer .dl-box ul li::before{ content: ""; width: calc(100% - 2px); height: calc(100% - 2px); background: #000; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px); }

#footer .dl-box dl dt{ font-size: 2.2rem; font-weight: 700; margin-bottom: 45px; }
#footer .dl-box dl dd{ font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; }
#footer .dl-box dl dd p{ color: #666; margin-top: 25px; }

#footer .line02{ padding-top: 40px; }
#footer .line02 .flex-box{ align-items: center; }
#footer .line02 p{ font-family: var(--Montserrat); font-size: 1.4rem; font-weight: 500; color: rgba(255, 255, 255, 0.4); }
#footer .line02 ul{ display: flex; }
#footer .line02 ul li{ display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; background: #222; border-radius: 50%; position: relative; }
#footer .line02 ul li:not(:last-of-type){ margin-right: 10px; }
#footer .line02 ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1695px){
	#footer .info-box ul:last-of-type li:nth-of-type(3)::after{ display: none; }
}

@media screen and (max-width: 1600px){
	#footer .dl-box dl dt{ font-size: 2rem; margin-bottom: 30px; }
}

/* @media screen and (max-width: 1595px){
	#footer .line01 .text-box{ width: 500px; padding-top: 0; }
	#footer .dl-box{ width: calc((100% - 550px)); }

	#footer .info-box{ margin-top: 30px; }
	#footer .info-box ul{ display: block; }
	#footer .info-box ul li{ padding: 0; }
	#footer .info-box ul li::after{ display: none; }

	#footer .link-box{ margin-top: 30px; } 
	#footer .link-box ul{ max-width: 420px; flex-wrap: wrap; margin-bottom: -20px; }
	#footer .link-box ul li{ width: calc((100% - 10px) / 2);  margin-bottom: 10px;}
} */

@media screen and (max-width: 1373px){
	#footer .info-box ul:last-of-type li:nth-of-type(2)::after{ display: none; }
	#footer .info-box ul:last-of-type li:nth-of-type(3)::after{ display: block; }

	#footer .link-box ul{ flex-wrap: wrap; margin-bottom: -10px; }
	#footer .link-box ul li{ width: calc((100% - 10px) / 2);  margin-bottom: 10px;}
}

@media screen and (max-width: 1350px){
	#footer .info-box{ margin-top: 50px; }
	#footer .dl-box{ width: calc((100% - 500px)); }
}

@media screen and (max-width: 1200px){
	/* #footer .flex-box{ align-items: center; } */
	#footer .dl-box ul{ flex-direction: column; margin-bottom: -20px; }
	#footer .dl-box ul li{ width: 100%; margin-bottom: 20px; padding: 25px 40px; }
	#footer .dl-box ul li dl{ width: 100%; display: flex; align-items: center; text-align: left; } 
	#footer .dl-box dl dt{ margin-bottom: 0; width: 150px; }
	#footer .dl-box dl dd{ width: calc(100% - 150px); padding-left: 15px; }
	#footer .dl-box dl dd p{ margin-top: 20px; }
}

@media screen and (max-width: 1115px){
	#footer .line01 .flex-box{ flex-direction: column; }
	#footer .line01 .flex-box > div{ width: 100%; }
	#footer .line01 .text-box{ padding-right: 0; padding-bottom: 20px; }
	#footer .link-box ul li{ width: calc((100% - 30px) / 4); }
	#footer .info-box ul:last-of-type li:nth-of-type(2)::after{ display: block; }
}

@media screen and (max-width: 1000px){
	#footer .line01 .text-box, #footer .dl-box{ width: calc((100% - 50px) / 2); }
}

@media screen and (max-width: 900px){
	/* #footer{ padding: 50px 0 20px; } */

	#footer .line01 .text-box, #footer .dl-box{ width: 100%; }

	#footer .info-box ul{ gap: 10px 20px; }
	#footer .info-box ul:not(:last-of-type){ margin-bottom: 10px; }

	#footer .link-box ul li{ padding: 13px 15px; }

	#footer .dl-box ul li{ padding: 20px 40px; }
	#footer .dl-box dl dd p{ margin-top: 10px; }

	#footer .line02{ padding-top: 15px; }
}

@media screen and (max-width: 834px){
	#footer .info-box ul:last-of-type li:nth-of-type(3)::after{ display: none; }
}

@media screen and (max-width: 673px){
	#footer{ text-align: center; }
	#footer .info-box ul{ justify-content: center; margin-right: -20px; } 
	#footer .info-box ul:first-of-type li:nth-of-type(1)::after{ display: none; }
	#footer .info-box ul:last-of-type li:nth-of-type(2)::after{ display: none; }
	#footer .info-box ul:last-of-type li:nth-of-type(3)::after{ display: block; }
	#footer .link-box ul li{ width: calc((100% - 10px) / 2); }

	#footer .line02 .flex-box{ flex-direction: column; align-items: center; }
	#footer .line02 .flex-box ul{ margin-top: 15px; }
}


/* top */
#top{ background: none; border: none; position: absolute; top: 50px; right: 10px;  font-family: var(--Montserrat); font-size: 1.3rem; font-weight: 700; color: #fff; letter-spacing: 5%; transform: rotate(90deg); padding: 20px; padding-left: 25px; outline: none; }
#top::before{ display: inline-block; content:"\e909"; font-family:'xeicon'; font-weight: normal; font-style: normal; font-size: 2rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(-90deg); }


/* floating */
#floating{ width: 80px; height: 80px; position: fixed; bottom: 0; right: 0; z-index: 100; background: var(--mainColor); border: none; outline: none; opacity: 1; transition: all 0.3s; }
#floating a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } 

#floating.opacity{ opacity: 0; visibility: hidden; }

@media screen and (max-width: 1770px){
	#top{ top: 40px; right: -10px; }
}

@media screen and (max-width: 1250px){
	#floating{ width: 70px; height: 70px; }
}

@media screen and (max-width: 1000px){
	#floating{ width: 65px; height: 65px; }
}


/* menu */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 300; background: rgba(0, 0, 0, 0.5); display: none; }
#menu .blank{ width: 100%; height: 100%; }
#menu .inner{ max-width: 500px; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; right: 0; z-index: 20; transform: translateX(100%); opacity: 0; transition: all 0.8s; }
#menu .inner .right{ display: flex; justify-content: flex-end; text-align: right; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

#menu .blog{ width: 110px; height: 66px; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; border-left: 1px solid rgba(0, 0, 0, 0.06); }
#menu .blog span{ font-size: 1.6rem; font-weight: 600; color: #000; transition: all 0.5s; }
#menu .blog span::after{ content:"\e980"; font-family:'xeicon'; font-weight: normal; font-style: normal; margin-left: 10px; }
#menu .blog a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#menu .inner .close{ width: 66px; height: 66px; background: none; border: none; border-left: 1px solid rgba(0, 0, 0, 0.06); }
#menu .inner .close span{ display: inline-block; width: 20px; height: 2px; background: #000; transform: rotate(45deg); position: relative; top: -2px; }
#menu .inner .close span::before{ content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

#menu .depth01 > li{ position: relative; }
#menu .depth01 > li:not(.none)::after{ content: ""; width: 100%; height: 61px; position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; }
#menu .depth01 > li > a{ display: inline-block; width: 100%; padding: 20px; font-size: 2rem; font-weight: 600; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.06); position: relative; }
#menu .depth01 > li:not(.none) > a::after{ content:"\e941"; font-family: 'xeicon'; font-size: 1.6rem; font-weight: normal; font-style: normal; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: all 0.5s; }

#menu .depth01 > li.on > a::after{ transform: translateY(-50%) rotate(-180deg); }

#menu .depth02{ border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: none; padding: 10px 0; }
#menu .depth02 > li > a{ display: inline-block; padding: 10px 20px; font-size: 1.8rem; font-weight: 400; color: #666; }

body.lock{ overflow: hidden; }
body.lock #menu .inner{ transform: translateX(0); opacity: 1; transition-delay: 0.5s; }