@charset 'utf-8';
#wrap {width:100%;}

.clip {position:absolute; clip:rect(0,0,0,0); width:1px; height:1px; overflow:hidden;}
.header{background:rgba(0,0,0,0.5); position:fixed; top: 0; left: 0; display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box; padding: 0 100px; z-index: 500000; transition:0.4s}
.header .logo{position:relative; background:url('../image/common/head_logo01.png') no-repeat; background-size:100%; width:264px; height:60px; transition:0.4s; z-index: 10;}
.header .logo a{position:absolute; top: 0; left: 0; right: 0; bottom: 0;}
.header .gnb{}
.header .gnb > ul{display:flex;}
.header .gnb > ul > li{display:flex; align-items:center; justify-content:center; height:100px;}
.header .gnb > ul > li > a{position:relative; display:inline-block; vertical-align: top; font-weight:500; font-size:1.25em; color: #fff; padding: 0 45px; box-sizing:border-box; line-height: 1; transition:0.4s;}

.header .header_ui{display:flex; align-items:center; width:50px;}
.header .header_ui .lobtn {position:relative; z-index: 10;}
.header .header_ui .lobtn a {display:inline-block; vertical-align: top; text-align: right; color:#fff; padding:0 10px;}
.header .header_ui .m_btn{position:relative; margin-left:20px; width: 30px; height: 30px; text-align: right; cursor: pointer;  z-index: 10}
.header .header_ui .m_btn span:not(.clip){position:relative; display:inline-block; vertical-align: top; width:20px; height: 2px; margin: 14px 0;}
.header .header_ui .m_btn span:not(.clip)::after{content:''; position:absolute; top: -4px; left:0; width: 100%; height: 100%; background: #fff; transition:0.3s}
.header .header_ui .m_btn span:not(.clip)::before{content:''; position:absolute; top: 4px; left:0; width: 100%; height: 100%; background: #fff; transition:0.3s}
.header .header_ui .all_gnb{display:flex; flex-wrap:wrap; position:fixed; top: 0; left: 0; width: 100%; height: 0; background: #fff; transition:0.8s; overflow: hidden;}
.header .header_ui .all_gnb .info_box{position:relative; display:flex; flex-direction:column; justify-content:flex-end; width: calc(100% - 66.66%); background: #201d1c; padding: 0 0 50px 100px; box-sizing:border-box;}
.header .header_ui .all_gnb .info_box::after{content:''; position:absolute; width:450px; height:450px; bottom:0; left:100px; background:url('../image/common/logo_bg01.png') no-repeat; background-size:50%; opacity: 0.05;}
.header .header_ui .all_gnb .info_box .txt{opacity: 0.3;}
.header .header_ui .all_gnb .info_box .txt p{font-size:1.25em; color: #fff;}
.header .header_ui .all_gnb .info_box .txt .add{margin-bottom:14px;}
.header .header_ui .all_gnb .info_box .txt .num{display:flex;}
.header .header_ui .all_gnb .info_box .txt .num p{position:relative; margin-right: 20px;}
.header .header_ui .all_gnb .info_box .txt .num p::after{content:''; position:absolute; top: 5px; right: -12px; width: 1px; height: 10px; background: #fff;}
.header .header_ui .all_gnb .info_box .txt .num p:last-of-type{margin-right: 0;}
.header .header_ui .all_gnb .info_box .txt .num p:last-of-type::after{display:none; }
.header .header_ui .all_gnb nav{display:flex; align-items:center;position:relative; width: 66.66%;}
.header .header_ui .all_gnb nav::after{content:''; position:absolute; width: 50%; top: 0; right: 0; bottom: 0; background: #fff; z-index: -1;}
.header .header_ui .all_gnb nav > ul{position:relative; width: 100%;}
.header .header_ui .all_gnb nav > ul > li{width: 50%;}
.header .header_ui .all_gnb nav > ul > li > a{position:relative; display:inline-block; width: 100%; vertical-align: top; font-size:36px; color: #222; padding: 40px 80px; transition:color 0.4s; box-sizing:border-box;}


/* on&hover */
.header.scroll,
.header.on{background:rgba(0,0,0,0.5) }
.header.scroll .logo,
.header.c .logo,
.header.on .logo{background:url('../image/common/logo_bg02.png') no-repeat; background-size:100%;  width:264px; height:60px;}
.header.scroll .gnb > ul > li > a, .header.c .gnb > ul > li > a, .header.on .gnb > ul > li > a{color: #fff;}
.header.scroll .header_ui .lobtn a, .header.c .header_ui .lobtn a, .header.on .header_ui .lobtn a {color: #fff;}
.header.scroll .header_ui .m_btn span:not(.clip)::before, .header.scroll .header_ui .m_btn span:not(.clip)::after, .header.c .header_ui .m_btn span:not(.clip)::before, .header.c .header_ui .m_btn span:not(.clip)::after, .header.on .header_ui .m_btn span:not(.clip)::before, .header.on .header_ui .m_btn span:not(.clip)::after{background: #fff;}

.header.open .logo{background:url('../image/common/logo_bg02.png') no-repeat; background-size:100%;  width:264px; height:60px; }
.header.open .gnb > ul > li > a {color: #222222;}
.header.open .header_ui .lobtn a {color: #222;}
.header.open .header_ui .m_btn span:not(.clip)::before,
.header.open .header_ui .m_btn span:not(.clip)::after{background: #222;}

.header .gnb > ul > li:hover > a{color: #66ffff;}

.header .header_ui .m_btn.on span:not(.clip)::after{top: 0; transform:rotate(45deg);}
.header .header_ui .m_btn.on span:not(.clip)::before{top: 0; transform:rotate(-45deg);}

/* all */
.header .header_ui .all_gnb.on{ height: 100%;}
.header .header_ui .all_gnb nav > ul > li:hover > a::after{animation:moveArrow 1.5s infinite alternate; font-weight:400;}
.header .header_ui .all_gnb nav > ul > li:hover > a::before{opacity: 1;}

/* 추가 */
.header .gnb > ul > li > .sub_depth > li > .right > ul > li{position:relative; }
.header .gnb > ul > li > .sub_depth > li > .right > ul > li::after{content:""; position:absolute; top: 10px; right: 0; width: 1px; height: 120px; background: #eee;}
.header .gnb > ul > li > .sub_depth02 > li > .right > ul > li::after{height: 200px;}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li:nth-of-type(3n)::after{display:none; }
.header .gnb > ul > li > .sub_depth > li > .right > ul > li:last-of-type::after{display:none; }
.header .gnb > ul > li > .sub_depth > li > .right > ul > li > a{border:none; line-height: 40px; font-size:20px; font-weight: 500; color: #222;}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li:hover > a{color: #f37321;}

@keyframes moveArrow{
	0%{opacity: 0; right: 110px;}
	100%{opacity: 1; right: 96px;}
}

/* footer */
#footer {width:100%; background:#1b1b1b;}
#footer article {padding:70px 100px;}
.footer_area {width:100%; position:relative;}
.footer_area .ft_logo {position:absolute; top:-5px; left:0; width:121px; height:121px; margin-left:0; text-align: center;}
.footer_area .ft_logo::after {content:''; position:absolute; top: 0; left: 0; right: 0; bottom: 0; background:url('../image/common/ft_logo01.png') 50% 50% no-repeat; animation:rotateTxt 5s infinite linear}
.footer_area .ft_logo span {display:block; margin-top:30px;:}
.footer_area .ft_logo_m {display:none;}
.footer_area .ft_txt {padding-left:170px; color:#999;}
.ft_txt strong {display:block; margin-bottom:40px;}
.ft_txt strong img {max-width:200px; height:auto;}
.ft_txt p {font-size:0.875em; line-height:1; margin-top:25px;}
.ft_txt p span {padding:0 15px;}
.ft_txt p br {display:none;}
.ft_txt a {position:absolute; top:0; right:0; color:#999;}
@keyframes rotateTxt{
	0%{transform:rotate(0);}
	100%{transform:rotate(360deg);}
}

.btn-top {transition:all .4s ease; display:block; position:fixed; right:50px; bottom:50px; width:50px; height:50px; text-align:center; color:#fff; line-height:50px; background:#10487a; border-radius:50px; font-size:0.875em;}
.btn-top .end {bottom:240px;}