@charset "utf-8";
/* CSS Document */

/* CSS Reset */
:root{
	--color-main: #1c1c1c;
	--color-gray: #e4e8ec;
	--color-green: #c8dd76;
}

* {margin: 0; padding: 0; box-sizing: border-box; font-family: "Noto Sans KR"; color: var(--color-main); word-break: keep-all;} 
li {list-style: none;}
a {text-decoration: none; color: inherit;}
em, i, address {font-style: normal;}
button {border: none; background: none; cursor: pointer;}
p {word-break: keep-all;}
.white{text-shadow: 0 0 5px #333; color: #fff;}
.eng{font-family: "Lexend Deca", san-serif;}
.clearfix::after {content: ''; display: block; clear: both;}
.hidden{display: none;}

@keyframes blink {
	0%{opacity: 1;}
	100%{opacity: 0;}
}

@keyframes menu_ani {
	0%{transform: rotate(0) translate(0);}
	50%{transform: rotate(-5deg) translateX(-3px); transform-origin: center bottom;}
	100%{transform: rotate(0);}
}

@keyframes horizon_move {
	0%{right: -15px;}
	100%{right: 0px;}
}
	

/* --------------------- 헤더 ----------------------- */
#header{position: fixed; z-index: 1000; width: 100%;}
#header .sub_bg{position: absolute; top: 95px; width: 100%; height: 0px; border: 1px solid rgba(0,0,0,0); background: #fff; transition: all 0.5s;}
#header #header_bg{position: relative; width: 100%; height: 100px; box-shadow: 0 0 0 rgba(0,0,0,0); background: #fff; transition: all 0.3s;}
#header #header_bg.active{box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
#header #header_wrap{position: relative; width: 1300px; height: 100px; margin: 0 auto;}
#header #header_wrap h1{position: absolute; left: 50%; margin-left: -120px;}
#header #header_wrap h1 a{display: flex; justify-content: center; align-items: center;  width: 200px; height: 100px; text-align: center;}
#header #header_wrap h1 a img{width: 60px; height: 80px;}

#header #header_wrap .gnb{float: left; width: calc(100% - 180px); height: 100%;}
#header #header_wrap .gnb>ul{height: 100%;}
#header #header_wrap .gnb>ul>li{position: relative; display: flex; align-items: center; height: 100%; margin: 0 20px;}
#header #header_wrap .gnb>ul>li::before{content: ''; display: block; position: absolute; bottom: 35px; width: 0; height: 10px; background: var(--color-gray); transition: width 0.5s;}
#header #header_wrap .gnb>ul>li:nth-of-type(1){float: left; margin: 0 20px 0 0;}
#header #header_wrap .gnb>ul>li:nth-of-type(2){float: left;}
#header #header_wrap .gnb>ul>li:nth-of-type(3){float: left;}
#header #header_wrap .gnb>ul>li:nth-of-type(4){float: right;}
#header #header_wrap .gnb>ul>li:nth-of-type(5){float: right;}
#header #header_wrap .gnb>ul>li>a{font-family: "Lexend Deca"; font-size: 22px; font-weight: 500; transition: all 0.5s;}
#header #header_wrap .gnb>ul>li>ul{position: absolute; left: 0; top: 80px; z-index: 1; width: 120%; height: 0; padding-top: 20px; overflow: hidden; transition: all 0.5s;}
#header #header_wrap .gnb>ul>li:nth-of-type(2)>ul{width: 170%;}
#header #header_wrap .gnb>ul>li>ul>li{padding: 10px 0;}
#header #header_wrap .gnb>ul>li>ul>li>a{display: inline-block; font-weight: 500; transition: 0.3s;}
#header #header_wrap .gnb>ul>li>ul>li>a::before{content: ''; display: block; position: relative; left: 0; top: 30px; width: 0; height: 2px; background: var(--color-main); transition: 0.3s;}

/* 헤더 hover 이벤트 */
#header:hover #header_bg{box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
#header:hover .sub_bg{height: 280px; border-bottom: 1px solid #ccc;}
#header:hover #header_wrap .gnb>ul>li>ul{top: 100px; height: 280px;}
#header #header_wrap .gnb>ul>li:hover::before{width: 100%;}
#header #header_wrap .gnb>ul>li:hover>a{opacity: 0.5;}
#header #header_wrap .gnb>ul>li>ul>li:hover>a{opacity: 0.5;}
#header #header_wrap .gnb>ul>li>ul>li:hover>a::before{width: 100%; opacity: 0.5;}

/* 우측 sns 버튼 */
#header #header_wrap .sns{float: right; width: 160px; height: 100%;}
#header #header_wrap .sns ul{display: flex; justify-content: flex-end; align-items: center; height: 100%;}
#header #header_wrap .sns ul li{width: 30px;}
#header #header_wrap .sns ul li a{display: block; padding: 0 5px;}
#header #header_wrap .sns ul li:nth-of-type(1) a img{width: 18px; height: 18px;}
#header #header_wrap .sns ul li:nth-of-type(2) a img{width: 18px; height: 18px;}
#header #header_wrap .sns ul li:nth-of-type(3) a img{width: 30px; height: 20px;}
#header #header_wrap .sns ul li:nth-of-type(4) a img{width: 30px; height: 26px;}
#header #header_wrap .sns ul li:nth-of-type(5) a img{width: 22px; height: 22px;}

/* 오른쪽 고정 메뉴 */
#fixed_menu{position: fixed; right: 0.5vw; top: 50%; z-index: -1; width: 70px; height: 240px; transform: translateY(-50%); opacity: 0; transition: 0.3s;}
#fixed_menu.active{z-index: 999; opacity: 1;}
#fixed_menu ul{display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
#fixed_menu ul li{position: relative;}
#fixed_menu ul li .inner{float: right; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70px; height: 70px;}
#fixed_menu ul li .inner .icon{width: 23px; height: 23px;}
#fixed_menu ul li .inner span.eng{font-size: 14px; color: #fff;}

#fixed_menu ul li a{position: absolute; right: 0; top: 0; display: block; width: 70px; height: 70px; border-radius: 35px; background: #c0c0c0; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); transition: width 0.3s;}
#fixed_menu ul li a span.text{position: absolute; right: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; color: #fff; opacity: 0; transition: 0.2s;}
#fixed_menu ul li a .inner .icon img{width: 23px; height: 23px;}
#fixed_menu ul li:nth-of-type(1) a .inner .icon img{transform: scale(1.5);}

#fixed_menu ul li button{display: block; width: 70px; height: 70px; border-radius: 35px; background: #c0c0c0; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);}
#fixed_menu ul li button .inner .icon{position: relative;}
#fixed_menu ul li button .inner .icon .line{position: absolute; left: 50%; top: 50%; display: block; width: 50%; height: 1px; background: #fff;}
#fixed_menu ul li button .inner .icon .line1{transform: translateX(-2px) rotate(45deg);}
#fixed_menu ul li button .inner .icon .line2{transform: translateX(-10px) rotate(-45deg);}
#fixed_menu ul li button .inner span.eng{}

/* 고정메뉴 hover */
#fixed_menu ul li a:hover{width: 180px;}
#fixed_menu ul li a:hover span.text{opacity: 1;}

/* 섹션 소제목 (h2) 공통속성 */
h2{font-size: 60px; font-weight: 500; text-align: center; letter-spacing: -0.03em;}

/* more 버튼 (arrow) */
a.arrow_more{display: flex; justify-content: center; align-items: center; width: 80px; letter-spacing: 0;}
a>span{transition: 0.3s;}
a.arrow_more .circle{position: relative; display: inline-block; width: 20px; height: 20px; margin-left: 15px; border-radius: 20px; background: rgba(220,220,220,0.8);}
a.arrow_more .arrow{position: absolute; left: -24px; top: -15px; transition: 0.3s;}
a.arrow_more .arrow img{width: 50px;}
a.arrow_more:hover>span.eng{color: rgba(200,200,200,1);}
a.arrow_more:hover .arrow{left: -5px;}

/* more 버튼 (bubble ani) */
a.more_btn{display: block; position: relative; width: 170px; height: 45px; margin: 0 auto; border: 2px solid #1c1c1c; border-radius: 23px; line-height: 41px; color: #1c1c1c; text-align: center; overflow: hidden; transition: 0.45s;}
a.more_btn .btn_bubble_inner{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
a.more_btn .btn_bubble_inner .btn_bubble_itembox{position: relative; display: block; height: 100%; filter: url(#bubble-start);}
a.more_btn .btn_bubble_inner .btn_bubble_itembox .btn_bubble_item{position: absolute; top: 0; width: 25%; height: 100%; background: #1c1c1c; border-radius: 100%; transform: translate3d(0, 150%, 0) scale(1); transition: transform 0.45s;}
a.more_btn .btn_bubble_inner .btn_bubble_itembox .btn_bubble_item:nth-of-type(1){left: 0%; transition-delay: 0s;}
a.more_btn .btn_bubble_inner .btn_bubble_itembox .btn_bubble_item:nth-of-type(2){left: 25%; transition-delay: 0.08s;}
a.more_btn .btn_bubble_inner .btn_bubble_itembox .btn_bubble_item:nth-of-type(3){left: 50%; transition-delay: 0.16s;}
a.more_btn .btn_bubble_inner .btn_bubble_itembox .btn_bubble_item:nth-of-type(4){left: 75%; transition-delay: 0.24s;}
a.more_btn .more_text{position: relative; z-index: 1;}

a.more_btn:hover .more_text {color: #fff;} 
a.more_btn:hover .btn_bubble_inner .btn_bubble_itembox .btn_bubble_item{transform: translate3d(0,0,0) scale(1.4);}

/* --------------------- 푸터 ----------------------- */
#footer{background: #f4f5f6;}
#footer .inner{width: 1300px; margin: 0 auto; padding: 40px 0;}
#footer h2{float: left; width: 150px;}
#footer h2 a{display: flex;}
#footer h2 a img{width: 100%;}
#footer .company{float: left; margin-left: 70px;}
#footer .company ul{}
#footer .company ul li{display: flex; margin-bottom: 15px;}
#footer .company ul li h4{position: relative; margin-right: 10px;}
#footer .company ul li h4::after{content: ''; position: absolute; right: -10px; top: 6px; width: 1px; height: 50%; border-right: 1px solid #7b7b7b;}
#footer .company ul li p{margin-left: 10px;}
#footer .company ul li a{margin-left: 10px;}
#footer .contact{float: right; text-align: right;}
#footer .contact .top{margin-bottom: 25px;}
#footer .contact .top>a{display: flex; justify-content: space-between; align-items: center; width: 210px; margin-left: auto; margin-bottom: 15px; padding: 10px 30px; border-radius: 30px; background: #1b1b1b;}
#footer .contact .top>a span{color: #fff;}
#footer .contact .top>a i{position: relative; right: 0; display: block; width: 12px; height: 12px; background: url("../img/right_arrow_footer.png") center center no-repeat; background-size: cover; animation: horizon_move 1s infinite;}
#footer .contact .top h3{padding-bottom: 10px; font-size: 28px; letter-spacing: -1px;}
#footer .contact .top ul{display: flex; justify-content: flex-end; align-items: center;}
#footer .contact .top ul li{display: flex; justify-content: center; align-items: center; width: 30px; height: 26px;}
#footer .contact .top ul li a {}
#footer .contact .top ul li:nth-of-type(1) a img{width: 18px; height: 18px;}
#footer .contact .top ul li:nth-of-type(2) a img{width: 18px; height: 18px;}
#footer .contact .top ul li:nth-of-type(3) a img{width: 30px; height: 20px;}
#footer .contact .top ul li:nth-of-type(4) a img{width: 30px; height: 26px;}
#footer .contact .top ul li:nth-of-type(5) a img{width: 22px; height: 22px;}
#footer .contact .bottom{}
#footer .contact .bottom h3{padding-bottom: 10px; font-size: 28px; letter-spacing: -1px;}
#footer .contact .bottom a{display: flex; align-items: center;}
#footer .contact .bottom a i{display: block; width: 24px; height: 16px; background: url("../img/contact_icon.svg") center center no-repeat; background-size: 24px 16px; margin: 3px 3px 0 0;}
#footer .contact .bottom a span{}
#footer p.copy{text-align: center; padding: 22px 2.5%; border-top: 1px solid #c2c2c3; font-size: 15px;}