@charset "utf-8";
/* 
	common.css : 헤더, 푸터, 레이아웃 정의
*/

/******************************************************************************
 header { ******************************************************************************* */
	.header{position:fixed; top:0; left:0; width:100%; padding:36px 0; z-index:9999; transition: all .5s;}
	.header__main__box{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;}
	.logo__wr{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
	.logo__wr .logo{width:140px;}
	.header .right__btn__ul{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-end; justify-content: center; align-items: flex-end; gap: 24px;}
	.header .right__btn__ul li p{display:flex; align-items:center; gap:8px; font-size:14px; font-weight: 400; color:#fff; cursor: pointer; }
	.hd__lang__btn {position:relative; padding: 8px 16px; border-radius:100px; border:1px solid rgba(255,255,255,0.3); font-family:'Pretendard';}
	.hd__lang__btn .lan__menu__wr{ opacity: 0; visibility: hidden; position:absolute; top:100%; left:50%; width:100%; padding:8px 16px; width:70px; transform: translateX(-50%); transition:0.3s ease; z-index: 99; text-align:center;}
	.hd__lang__btn .lan__menu__wr a{display:block; padding:3px 0; margin:2px 0;}
	.hd__lang__btn .lan__arrow__icon{width:10px;}
	.hd__lang__btn.active .lan__menu__wr{opacity: 1; visibility: visible;}
	.hd__sound{cursor:pointer; padding-bottom: 6px; position: absolute; right: 100px; bottom: 0;}
	.hd__sound .volume__box{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 2px;}
	.hd__sound .volume__bar{display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1px;}
	.hd__sound .volume__stack{background:#fff; border-radius:1px; width: 4px; height: 2px; transition: opacity 0.2s ease;}
	.hd__sound.on .volume__stack { opacity: 1; }
	.hd__sound:not(.on) .volume__stack { opacity: 0.3; }
	@media (pointer: fine) {
		.hd__lang__btn:hover .lan__menu__wr{display:block; opacity: 1; visibility: visible;}
		.hd__lang__btn .lan__menu__wr a:hover{text-decoration:underline;}
	}


	@media (min-width: 2560px) {
		.header { padding: 68px 0; }
		.header .right__btn__ul li p { font-size: 16px; gap: 12px; }
		.logo__wr .logo { width: 180px; }
	}
	@media (min-width: 3840px) {
		.header { padding: 86px 0; }
		.header .right__btn__ul li p { font-size: 30px; gap: 16px; }
		.hd__lang__btn { padding: 15px 30px; }
		.hd__lang__btn .lan__arrow__icon { width: 18px; }
		.logo__wr .logo { width: 300px; }
		.hd__sound{padding-bottom:15px; right:200px;}
		.hd__sound .volume__box { gap: 5px; }
		.hd__sound .volume__bar{gap: 3px;}
		.hd__sound .volume__stack {width: 8px; height: 4px;}
	}
	@media (max-width: 1440px) {
		.header { padding: 32px 0; }
		.header .right__btn__ul li p { font-size: 15px; gap: 8px; }
		.logo__wr .logo { width: 130px; }
		.hd__lang__btn { padding: 6px 15px; }
		.hd__sound{right: 95px; padding-bottom: 8px;}
	}
	@media (max-width: 1024px) {
		.header { padding: 28px 0; }
		.header .right__btn__ul li p { font-size: 15px; gap: 8px; }
		.logo__wr .logo { width: 130px; }
		.hd__lang__btn { padding: 6px 15px; }
		.hd__sound{right: 95px; padding-bottom: 8px;}
	}
	@media (max-width: 768px) {
		.header { padding: 30px 0; }
		.header .right__btn__ul li p { font-size: 15px; gap: 8px; }
		.logo__wr .logo { width: 120px; }
		.hd__lang__btn { padding: 6px 14px; border-radius: 20px; }
		.hd__lang__btn .lan__menu__wr { width: 60px; }
		.hd__lang__btn .lan__arrow__icon { width: 8px; }
		.hd__sound{right: 90px; padding-bottom: 8px;}
	}
	@media (max-width: 570px) {
		.header .right__btn__ul li p { font-size: 14px; gap: 7px; }
		.logo__wr .logo { width: 90px; }
		.hd__lang__btn { padding: 5px 12px; }
		.hd__sound{right: 80px; padding-bottom: 8px;}
		.hd__sound .volume__stack {width: 3px; height:1px;}
	}
	@media (max-width: 375px) {
		.header .right__btn__ul li p { font-size: 12px; gap: 5px; }
		.logo__wr .logo { width: 80px; }
		.hd__lang__btn { padding: 4px 10px; }
		.hd__lang__btn .lan__arrow__icon { width: 7px; }
		.hd__sound{right: 67px; padding-bottom: 10px;}
	}
/* } header *****************************************************************************
***************************************************************************************/



/******************************************************************************
side menu { ******************************************************************************* */
	/* 햄버거 메뉴 */

/* } side menu *****************************************************************************
***************************************************************************************/




/******************************************************************************
footer { ******************************************************************************* */
	.footer {position: fixed; bottom: 0; left: 0; width: 100%; background: #111111; padding: 120px 0; font-family: 'Pretendard', dotum, sans-serif; z-index:1; pointer-events: auto;}
	.footer__inner {display: flex; justify-content: space-between; align-items: flex-end; max-width: 1200px; width: 90%; margin: 0 auto;}

	/* 왼쪽 */
	.footer__left {display: flex; flex-direction: column; gap: 40px;}
	.footer__info__item {}
	.footer__label {font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 12px;}
	.footer__text {font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.6);}
	.footer__sns__box {display: flex; gap: 40px;}
	.footer__sns {font-size: 16px; font-weight: 500; color: #fff; text-decoration: none; transition: opacity 0.2s;}

	/* 오른쪽 */
	.footer__right {display: flex; flex-direction: column; align-items: flex-end; gap: 80px;}
	.footer__top__btn {display: flex; justify-content: flex-end;}
	
	.footer__top__a {display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; position: relative;}
	.footer__top__a .btn__top__iconbox{position:relative;}
	.footer__top__a img.btn__top {width: 120px; transition: all .2s;}
	.footer__top__a img.btn__top__off {}
	.footer__top__a img.btn__top__on {position:absolute; top:0; left:0; opacity:0;}
	.footer__top__a img.bg__topbtn01 {position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); width: 170px; opacity: 0.6; mix-blend-mode: soft-light; transition: all .2s;}
	.footer__top__a span {font-size: 18px; font-weight: 400; color: #FFE4B5;}
	.footer__copy__box {text-align: right;}
	.footer__corp {font-size: 16px; color: rgba(255,255,255,0.4); margin-bottom: 6px;}
	.footer__copy {font-size: 16px; color: rgba(255,255,255,0.3);}

	/* 마우스 디바이스 전용 hover */
	@media (pointer: fine) {
		.footer__top__a:hover img.btn__top { transform: rotateZ(10deg); }
		.footer__top__a:hover img.btn__top__off {opacity:0;}
		.footer__top__a:hover img.btn__top__on {opacity:1;}
		.footer__top__a:hover img.bg__topbtn01 { opacity: 1; }
		.footer__sns:hover { opacity: 0.7; }
	}
	@media (min-width: 2560px) {
		.footer { padding: 150px 0; }
		.footer__inner { max-width: 1600px; }
		.footer__left { gap: 52px; }
		.footer__right { gap: 110px; }
		.footer__label, .footer__text { font-size: 18px; }
		.footer__label { margin-bottom: 16px; }
		.footer__sns { font-size: 18px; }
		.footer__sns__box { gap: 52px; }
		.footer__top__a {gap:20px;}
		.footer__top__a img.btn__top { width: 150px; }
		.footer__top__a img.bg__topbtn01 { width: 200px; }
		.footer__top__a span { font-size: 20px; }
		.footer__corp, .footer__copy { font-size: 18px; }
	}
	@media (min-width: 3840px) {
		.footer { padding: 260px 0; }
		.footer__inner { max-width: 2200px; }
		.footer__left { gap: 72px; }
		.footer__right { gap: 150px; }
		.footer__label, .footer__text { font-size: 30px; }
		.footer__label { margin-bottom: 20px; }
		.footer__sns { font-size: 30px; }
		.footer__sns__box { gap: 72px; }
		.footer__top__a {gap:30px;}
		.footer__top__a img.btn__top { width: 220px; }
		.footer__top__a img.bg__topbtn01 { width: 320px; }
		.footer__top__a span { font-size: 34px; }
		.footer__corp, .footer__copy { font-size: 30px; }
		.footer__corp { margin-bottom: 10px; }
	}
	@media (max-width: 1440px) {
		.footer { padding: 100px 0; }
		.footer__inner { max-width: 1000px; }
		.footer__left { gap: 32px; }
		.footer__right { gap: 64px; }
		.footer__label, .footer__text { font-size: 15px; }
		.footer__sns { font-size: 15px; }
		.footer__sns__box { gap: 32px; }
		.footer__top__a img.btn__top { width: 100px; }
		.footer__top__a img.bg__topbtn01 { width: 140px; }
		.footer__top__a span { font-size: 14px; }
		.footer__corp, .footer__copy { font-size: 15px; }
	}
	@media (max-width: 1024px) {
		.footer { padding: 80px 0; }
		.footer__inner { width: 88%; }
		.footer__left { gap: 28px; }
		.footer__right { gap: 48px; }
		.footer__top__a img.btn__top { width: 100px; }
		.footer__top__a img.bg__topbtn01 { width: 120px; }
	}
	@media (max-width: 768px) {
		.footer { padding: 60px 0; }
		.footer__inner { flex-direction: column; align-items: flex-start; gap: 48px; position:relative;}
		.footer__right { align-items: flex-start; gap: 40px; width: 100%;}
		.footer__top__btn { justify-content: flex-start; position: absolute; right: 0; bottom: 0;}
		.footer__copy__box { text-align: left; }
		.footer__left { gap: 28px; }
		.footer__sns__box { gap: 24px; }
		.footer__label, .footer__text { font-size: 14px; }
		.footer__corp, .footer__copy { font-size: 14px; }
		.footer__top__a img.btn__top { width: 90px; }
		.footer__top__a img.btn__top__on{opacity:1;}
		.footer__top__a img.btn__top__off{opacity:0;}
		.footer__top__a span { font-size: 14px; }
		.footer__corp, .footer__copy { font-size: 14px; }
	}
	@media (max-width: 570px) {
		.footer { padding: 48px 0; }
		.footer__inner { gap: 36px; }
		.footer__left { gap: 24px; }
		.footer__right { gap: 32px; }
		.footer__sns__box { gap: 20px; }
		.footer__label { margin-bottom: 8px; }
		.footer__label, .footer__text { font-size: 12px; }
		.footer__sns { font-size: 13px; }
		.footer__corp, .footer__copy { font-size: 12px; }
		.footer__top__btn{bottom: initial; top: 0;}
		.footer__top__a img.btn__top { width: 80px; }
		.footer__top__a img.bg__topbtn01 { width: 100px; }
		.footer__top__a span { font-size: 12px; }
	}
	@media (max-width: 375px) {
		.footer { padding: 40px 0; }
		.footer__inner { width: 90%; gap: 28px; }
		.footer__left { gap: 20px; }
		.footer__right { gap: 28px; }
		.footer__sns__box { gap: 16px; }
		.footer__label, .footer__text { font-size: 11px; }
		.footer__sns { font-size: 11px; }
		.footer__corp, .footer__copy { font-size: 11px; }
		.footer__top__a img.btn__top { width: 70px; }
		.footer__top__a img.bg__topbtn01 { width: 90px; }
		.footer__top__a span { font-size: 11px; }
	}
/* } footer *****************************************************************************
***************************************************************************************/