@charset "utf-8";

/* 공통 */
.inner{max-width:1480px; width: 100%; height: 100%; box-sizing: border-box; margin: 0 auto; padding:0 40px}

#header{position: absolute; top: 0; width: 100%; left:0; z-index: 10;}
#header *{transition: all .3s;}
#header .inn{position: relative;width: 100%; height: 106px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
#header h1 a{width: 128px; display: block;}
#header h1 a img{width: 100%;}
#header nav .gnb > li{padding-left:93px; position: relative; height: 106px; ;}
#header nav .gnb > li > a{width: 100%; height: 100%; display: block; line-height: 106px;}

#header .btn_menu{display:none;}
#header .btn_menu{position:absolute; top:0; right:0; z-index:9999; width:60px; height:60px; font-size:0px; transition:all 0.3s ease 0s; display: none; align-items: center; justify-content: center;}
#header .btn_menu .bb{width: 26px; height: 18px; position: relative;}
#header .btn_menu .bb span{display:block; position:absolute; left:0px; width:100%; height:2px; background:#222}
#header .btn_menu .bb span:nth-of-type(1){top:0;}
#header .btn_menu .bb span:nth-of-type(2){top:50%; margin-top:-1px; transition:background 0.3s ease 0s;}
#header .btn_menu .bb span:nth-of-type(3){bottom:0;}
#header .btn_menu .bb span:nth-of-type(1),
#header .btn_menu .bb span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform;}
#header .btn_menu.active{position:fixed}
#header .btn_menu.active .bb> span:nth-of-type(1){top:3px; transform:rotate(-45deg);}
/* #header .btn_menu.active > span:nth-of-type(2){background:transparent;} */
#header .btn_menu.active .bb> span:nth-of-type(3){bottom:3px; transform:rotate(45deg);}
#header .btn_menu.active .bb> span:nth-of-type(1),
#header .btn_menu.active .bb> span:nth-of-type(3){ width: 13px;}
#header .btn_close{position:fixed; opacity:0; visibility:hidden; top:0px; left:0px; z-index:99; width:-webkit-calc(100% - 320px); width:100%; height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
.active #header .btn_close{opacity:0.4; visibility:visible;}

#footer{background-color: #262626;}
#footer *{box-sizing: border-box;}
.ft_box + .ft_box{border-top: 1px solid #3c3c3c;}
.ft_top{padding: 42px 0;}
.ft_top ul li{font-size: 1rem; display: inline-block; margin-bottom: 16px;}
.ft_top ul li + li{margin-left: 30px;}
.ft_top ul li span{color: #636363;}
.ft_top ul li em,.ft_top ul li a{opacity: .68; color: #fff;}
.ft_top ul li em,.ft_top ul li a{margin-left: 6px;}
.ft_top ul li a.f_company{opacity: 1; margin-left: 0;}
.ft_top ul li:nth-of-type(n + 5){margin-bottom: 0;}

.ft_bottom p.copyright{font-size: 14px;}
.ft_bottom {padding:30px 0}
.ft_bottom .inner{display: flex; align-items: center; justify-content: space-between;}
.ft_bottom .info *{display: inline-block; vertical-align: middle;}
.ft_bottom .info p.copyright{margin-left: 38px; }
.ft_bottom .logo{width:92px; opacity: 0.32;}
.ft_bottom .logo img{width: 100%;}
.ft_bottom .privacy a{font-size: 14px; display: inline-block;}
.ft_bottom .privacy a + a{margin-left: 20px;}

@media all and (min-width:1921px){
    #header .inn{ padding-left: 8.3333%;  padding-right: 8.33333%;}
    .inner{}
}

@media all and (min-width:1025px){

    #header nav .gnb{display: flex;}
	#header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:95px; left: 50%; transform: translateX(-50%); width:100%; padding:8px 17px; background:#fff; border:1px solid #444; box-shadow:15px 20px 29px 0px rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}
    #header nav .gnb > li > a{font-size: 18px; word-break: keep-all; font-weight: 400;}
	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:85px; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10px 0px; background:#fff; border-top:1px solid #e1e1e1; font-size:15px; color:#404040; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{opacity:0.5;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}
	#header nav .gnb > li:nth-child(2) ul{width: 120%;}
}

@media all and (max-width:1920px){
    #header .inn{ max-width: 1680px;   padding:0 40px;}
}
@media all and (max-width:1240px){
    #header nav .gnb > li{padding-left: 50px;}
}
@media all and (max-width:1024px){
	#header .btn_menu{display: flex;}
	#header .btn_close{display:block;}

    #header .inn{height: 60px; padding:0 20px}
    #header h1 a{width: 90px; position: relative; z-index: 999999;}

    #header nav{right: 0; top: 0; width: 50%; background-color: #fff; height: 100%; right: -100%; position: fixed; z-index: 900; box-shadow: -5px 0px 15px rgb(0 0 0 / 10%); box-sizing: border-box; padding:90px 0;}
    #header nav.active{right: 0;}
    #header nav .gnb > li{padding-left: 0; height: auto;}
    #header nav .gnb > li > a{color: #222; height: auto; line-height:initial; padding:12px 20px; box-sizing: border-box; font-weight: 600; display: block; font-size: 17px; border-bottom: 1px solid #eee; position: relative; }
    #header nav .gnb > li > a::before{position: absolute; content: ""; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid #222; border-bottom: 2px solid #222; transition: all .3s; }
    #header nav .gnb > li > a.active::before{transform: translateY(-50%) rotate(225deg);}
    #header nav .gnb > li > ul{background-color: #f5f5f5; padding: 6px 30px; box-sizing: border-box; display: none; transition: none;}
    #header nav .gnb > li > ul a{display: block; padding:6px 0; font-size:16px}
    #header nav::before{content: ""; width: 126px; height: 188px; background: url(/images/content/img_icon.svg) no-repeat; position: absolute; right: 0; bottom: 0; opacity: 0.2;}

    .ft_bottom .privacy{display: none;}
    .ft_top ul br{display: none;}

}
@media all and (max-width:640px){
    #header nav{width: 100%;}

    .ft_top ul li:nth-child(1), .ft_top ul li:nth-child(2){display: block; padding-left: 0;}
    .ft_top ul li + li:nth-child(2),.ft_top ul li + li:nth-child(3){margin-left: 0;}
}

@media all and (max-width:480px){
    .ft_top ul li{display: block;}
    .ft_top ul li + li{margin-left: 0;}
    .ft_top ul li:nth-of-type(n + 5){margin-bottom: 16px;}
    .ft_top ul li:nth-last-of-type(6){margin-bottom: 0;}

    .ft_bottom .info p.copyright{margin-left: 0; margin-top: 12px;}
}