@charset 'utf-8';

/* 변수 */
:root{
    --baseFont: 'Outfit', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #BF1E2E;
}

/* 공통 */
.w1760{ max-width: 1760px; width: 100%; margin: 0 auto; }
.w1715{ max-width: 1715px; width: 100%; margin: 0 auto; }
.w1700{ max-width: 1700px; width: 100%; margin: 0 auto; }
.w1450{ max-width: 1450px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1800px){
	.w1760{ padding: 0 20px; }
}
@media screen and (max-width: 1755px){
	.w1715{ padding: 0 20px; }
}
@media screen and (max-width: 1740px){
	.w1700{ padding: 0 20px; }
}
@media screen and (max-width: 1490px){
	.w1450{ 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; padding: 15px 0; transition: all 0.5s; }
#header::after{ content: ""; width: 100%; height: 1px; background: #eee; position: absolute; bottom: 0; left: 0; transform: scaleX(0); opacity: 0; transition: all 0.5s; transition-delay: unset; }
#header .bg{ width: 100%; height: 210px; background: #fff; position: absolute; top: 0; left: 0; z-index: -5; display: none; }
#header .flex-box{ display: flex; justify-content: space-between; align-items: center; position: relative; }
#header .logo{ display: inline-block; position: relative; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#header nav{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#header .depth01{ display: flex; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ display: inline-block; font-size: 2rem; font-weight: 600; color: #fff; padding: 33px 75px; transition: all 0.5s; }
#header .depth02{ width: 100%; position: absolute; text-align: center; padding-top: 20px; overflow: hidden; visibility: hidden; opacity: 0; transition: all 0.5s; transition-delay: unset; }
#header .depth02 > li > a{ display: inline-block; width: 100%; font-size: 1.8rem; font-weight: 300; color: #222; padding: 5px 0; transition: all 0.5s; }
#header .depth02 > li:hover a{ color: var(--mainColor); }

#header .flex{ display: flex; align-items: center; }

#header .lang{ display: flex; }
#header .lang li{ position: relative; }
#header .lang li::after{ content: ""; width: 2px; height: 10px; background: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; right: -1px; transform: translateY(-50%); transition: all 0.5s; }
#header .lang li:last-of-type::after{ display: none; }
#header .lang li a{ display: inline-block; font-size: 1.6rem; font-weight: 600; color: #fff; padding: 15px; transition: all 0.5s; }
#header .lang li.on a{ color: var(--mainColor); }

#header .open{ background: none; border: none; padding: 20px; margin-right: -20px; position: relative; }
#header .open img{ transition: all 0.5s; }
#header .open::after{ content: url("/img/common/menu_icon_scroll.svg"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }

/* header - color */
#header.color .depth01 > li > a{ color: #222; }
#header.color .lang li::after{ background: #888; opacity: 0.5; }
#header.color .lang li:not(.on) a{ color: #222; }
#header.color .open::after{ opacity: 1; }  
#header.color .open img{ opacity: 0; }

/* header - scroll */
#header.scroll::after{ transform: scaleX(1); opacity: 1; transition-delay: 0.5s; }
#header.scroll .depth01 > li > a{ color: #222; }
#header.scroll .depth02{  visibility: visible; opacity: 1; transition-delay: 0.2s; }
#header.scroll .lang li::after{ background: #888; opacity: 0.5; }
#header.scroll .lang li:not(.on) a{ color: #222; }
#header.scroll .open::after{ opacity: 1; }  
#header.scroll .open img{ opacity: 0; }

/* header - white */
#header.white{ background: #fff; }

@media screen and (max-height: 800px){
	#header.color{ background: #fff; }
}

@media screen and (max-width: 1600px){
	#header nav{ left: 53%; }
	#header .depth01 > li > a{ padding: 33px 50px; }
}

@media screen and (max-width: 1400px){
	#header{ padding: 15px 0; }
	#header nav{ display: none; }
	#header.scroll::after{ display: none; }
	#header.color{ background: #fff; }
}


/* 전체 메뉴 */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 200; overflow: hidden; display: none; }
#menu .blank{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; }
#menu .menu-box{ max-width: 550px; width: 100%; height: 100%; background: #fff; border-radius: 20px 0 0 20px; position: absolute; top: 0; right: 0; z-index: 50; transform: translateX(100%); padding: 0 80px; padding-top: 120px; transition: all 0.5s ease-in-out; }
#menu .right{ max-width: 1715px; width: 100%; margin: 0 auto; padding: 15px 0; text-align: right; position: relative; z-index: 100; }
#menu .close{ background: none; border: none; padding: 20px; margin-right: -20px; opacity: 0; transition: all 0.5s; }

#menu .menu-box .depth01 > li{ margin-bottom: 70px; opacity: 0; transform: translateY(-50px); transition: all 0.5s; }
#menu .menu-box .depth01 > li > a{ display: inline-block; font-size: 3.2rem; font-weight: 500; color: rgba(102, 102, 102, 0.8); transition: all 0.5s; }
#menu .menu-box .depth02{ display: flex; flex-wrap: wrap; align-items: center; margin-left: -17.5px; }
#menu .menu-box .depth02 > li > a{ display: inline-block; font-size: 1.6rem; font-weight: 400; color: rgba(102, 102, 102, 0.8); padding: 10px 17.5px; transition: all 0.5s; }

#menu .menu-box .depth01 > li:hover > a{ color: #222; }
#menu .menu-box .depth02 > li:hover > a{ color: var(--mainColor); }

#menu.active .close{ opacity: 1; transition-delay: 1s; }
#menu.active .menu-box{ transform: translateX(0); transition-delay: 0.5s; }
#menu.active .menu-box .depth01 > li{ opacity: 1; transform: translateY(0); }

@media screen and (max-width: 1755px){
	#menu .right{ padding: 28px 20px; } 
}

@media screen and (max-width: 1200px){
	#menu .right{ padding: 15px 20px; }
	#menu .menu-box{ padding-top: 100px; }
}

@media screen and (max-width: 900px){
	#menu.active .menu-box{ max-width: 85%; padding: 0 50px; padding-top: 100px; }
	#menu .menu-box .depth01 > li > a{ font-size: 3rem; }
}

@media screen and (max-width: 650px){
	#menu .menu-box .depth01 > li{ margin-bottom: 40px; }
}


/* footer */
#footer{ position: relative; }
#footer::before{ content: ""; width: 100%; height: calc(100% - 125px); background: #000; position: absolute; bottom: 0; left: 0; z-index: -10; }
#footer .footer-box{ background: #1A1A1A; border-radius: 10px; padding: 40px 80px; }
#footer .logo{ display: inline-block; position: relative; }
#footer .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#footer .line{ display: flex; justify-content: space-between; }

#footer .line01{ align-items: flex-end; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#footer .line01 ul{ display: flex; margin-right: -10px; }
#footer .line01 ul li a{ display: inline-block; font-size: 1.6rem; font-weight: 300; color: #fff; opacity: 0.7; padding: 10px; margin-bottom: -10px; }
#footer .line01 ul li a.bold{ font-weight: 500; opacity: 1; }

#footer .line02{ align-items: flex-start; padding-top: 30px; }
#footer .line02 dl{ display: flex; font-size: 1.6rem; color: #fff; }
#footer .line02 dl:not(:last-of-type){ margin-bottom: 10px; }  
#footer .line02 dt{ width: 110px; font-weight: 400; }
#footer .line02 dt img{ margin-right: 10px; }
#footer .line02 dd{ font-weight: 300; opacity: 0.7; }
#footer .line02 ul{ display: flex; margin-top: 5px; }
#footer .line02 ul li{ position: relative; }
#footer .line02 ul li:not(:last-of-type){ margin-right: 15px; }
#footer .line02 ul li::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }
#footer .line02 ul li:nth-of-type(1)::after{ background: url("/img/common/sns_hover01.svg") no-repeat center center / auto; }
#footer .line02 ul li:nth-of-type(2)::after{ background: url("/img/common/sns_hover02.svg") no-repeat center center / auto; }
#footer .line02 ul li span{ display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #fff; font-size: 2rem; color: #fff; transition: all 0.5s; }
#footer .line02 ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#footer .line02 ul li:hover span{ border: 1px solid var(--mainColor); color: var(--mainColor); }

#footer .copyright{ font-size: 1.6rem; font-weight: 500; color: #fff; opacity: 0.6; text-align: center; padding: 30px 0; }

@media screen and (max-width: 1200px){
	#footer .footer-box{ padding: 40px; }
}

@media screen and (max-width: 900px){
	#footer::before{ height: calc(100% - 133px); }
	#footer .footer-box{ padding: 20px 40px; }

	#footer .line01{ flex-direction: column; align-items: center; padding-bottom: 20px; }
	#footer .line01 ul{ margin-top: 10px; }

	#footer .line02{ flex-direction: column; align-items: center; padding-top: 20px; }
	#footer .line02 dd{ width: calc(100% - 110px); word-break: break-all; }
	#footer .line02 ul{ margin-top: 10px; }
}


/* top 버튼 */
#top{ background: none; border: none; position: absolute; right: -20px; top: -95px; font-family: var(--baseFont); font-size: 1.4rem; font-weight: 500; color: #222; display: flex; flex-direction: column; align-items: center; padding: 20px; }
#top img{ margin-bottom: 12px; }

@media screen and (max-width: 1740px){
	#top{ right: 0; top: -80px; }
}