/*** 공통 시작 ***/
.inner{width: 100%; height: 100%; /*max-width: 1914px;*/ max-width: 1870px; padding: 0px 70px; margin: 0 auto;}
#wrapper{position:relative;}
body.body_hidden{overflow:hidden;}
html.scroll_hidden{overflow:hidden;}

    /* 미디어쿼리 시작 */
    @media (max-width: 1920px){
        .inner{padding: 0 60px; max-width: 100%;}
    }
    @media (max-width: 1600px){
        .inner{padding: 0 50px;}
    }
    @media (max-width: 1440px){
        .inner{padding: 0 40px;}
    }
    @media (max-width: 1024px){
        .inner{padding: 0 30px;}
    }
    @media (max-width: 768px){
        .inner{padding: 0 20px;}
    }
    @media (max-width: 425px){
        .inner{padding: 0 16px;}
    }
    /* 미디어쿼리 끝 */

/*** 공통 끝 ***/

/* 스킵네비게이션 시작 */ 
#skip_navi{position: absolute; top: 0; left: 0; width:100%; font-size:0; z-index:9999; transition: top 0.3s;} 
#skip_navi a{display:block; height:0; width:100%; overflow:hidden; text-align:center; color:#fff; white-space:nowrap; font-size:1.8rem; line-height:1; font-weight:300; background:#019c88;} 
#skip_navi a:focus-visible, 
#skip_navi a:active {top: 0; display:flex; align-items:center; justify-content:center; width:100%; height:4.5rem; line-height:4.5rem; background:#019c88; outline: 2px solid red; outline-offset: -2px;}
/* 스킵네비게이션 끝 */ 

/* 헤더 시작 */
#header{position: fixed; top: 0; left: 0; width: 100%;  z-index: 1000; transition: all 800ms; transition-delay:0s; overflow-x: clip;}
#header.sub{border-bottom:1px rgba(255,255,255,0.2) solid;}
#header.hide{transform: translateY(-143px); transition-delay: 0.1s;}
#header .inner{max-width: 1914px;}
#header .top_field{width:100%; height:51px; padding-bottom:1px; border-bottom: 1px rgb(255 255 255 / 30%) solid;}
#header .top_field .inner{display:flex; align-items:center; justify-content: space-between;}
#header .top_field a{color:white;}
#header .top_field .ht_sitelink{display:inline-flex;}
#header .top_field .ht_sitelink > li{position:relative; display:inline-flex; align-items:center; height:100%; padding:0 10px; white-space: nowrap;}
#header .top_field .ht_sitelink > li:before{
    content: '';
	position:absolute;
	display: inline-block;
	top:calc(50% + 1px);
	right:0;
	transform:translate(0, -50%);
	width:1px; 
	height:12px;
	background:#d9d9d9;
	opacity:0.2;
}
#header .top_field .ht_sitelink > li:first-child{padding-left:0;}
#header .top_field .ht_sitelink > li:last-child:before{display:none;}
#header .top_field .ht_sitelink a span{font-size:1.5rem; font-weight:300; letter-spacing:-0.075rem; transition:color 0.3s;}
#header .top_field .ht_sitelink a:hover span{color:#5BD75B;}
#header .top_field .h_program_category{display:inline-flex; align-items: center; font-size:1.5rem; color:white; font-weight:300; margin-right:10px;}
#header .top_field .h_program_category > span{position:relative; font-weight:600; line-height:1.2; color:#ffe556; display:inline-block; margin-left: 3px; padding-left:22px;}
#header .top_field .h_program_category > span:before{
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    background: url(../images/layout/icon_flower.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
#header .top_field .ht_program_wrap{display: flex; align-items: center;}
#header .top_field .ht_program_list{max-width:350px; display: flex; align-items: center; justify-content: center; overflow:hidden; height: 1.9rem;}
#header .top_field .ht_program_list .h_program_swiper{width:100%;}
#header .top_field .ht_program_list .h_program_swiper .swiper-slide{display: flex; justify-content: flex-start; align-items: center; line-height: 1.2; box-sizing: border-box;} 
#header .top_field .ht_program_list .h_program_swiper .swiper-slide a{display:inline-flex; align-items:center; width:100%; line-height:0; font-size:0; padding-left:2px; padding-right:4px;}
#header .top_field .ht_program_list .h_program_swiper .swiper-slide a:focus-visible{outline: 2px solid red; outline-offset: -2px;}
#header .top_field .ht_program_list .h_program_swiper .swiper-slide .htp_title{display:inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:1.5rem; line-height:1.2; font-weight:300; transition:color 0.3s;}
#header .top_field .ht_program_list .h_program_swiper .swiper-slide .htp_title:hover{color:#5BD75B;}
#header .top_field .ht_program_list_btn{display:inline-flex; align-items: center; margin-left:5px;}
#header .top_field .ht_program_list_btn i{font-size: 2rem; color: white; transition: color 0.3s;}
#header .top_field .ht_program_list_btn .slide_nav{display:inline-flex; align-items: center; padding-top:1px;}
#header .top_field .ht_program_list_btn .slide_nav > button{display:inline-flex; align-items: center;}
#header .top_field .ht_program_list_btn .slide_nav > button:hover i{color:white;}
#header .top_field .ht_program_list_btn .slide_nav > button.h_program_swiper_prev i{width: 0; height: 0; border-style: solid; border-width: 6px 5.9px 0px 5.9px; border-color: #ffffff transparent transparent transparent;}
#header .top_field .ht_program_list_btn .slide_nav > button.h_program_swiper_next{margin-right:9px;}
#header .top_field .ht_program_list_btn .slide_nav > button.h_program_swiper_next i{width: 0; height: 0; border-style: solid; border-width: 0px 5.9px 6px 5.9px; border-color: transparent transparent #FFFFFF transparent;}
#header .top_field .ht_program_list_btn .slide_control{display:inline-flex; align-items: center; margin-left:11px;}
#header .top_field .ht_program_list_btn .slide_control button{position:relative; width:20px; height:20px; overflow:hidden; border:1px rgb(255 255 255 / 30%) solid; border-radius:100%; box-shadow: 5px 5px 10px rgb(0 0 0 / 15%);}
#header .top_field .ht_program_list_btn .slide_control button:before{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgb(255 255 255 / 10%);
	backdrop-filter: blur(8px); 
	-webkit-backdrop-filter: blur(8px);
	z-index:-1;
}
#header .top_field .ht_program_list_btn .slide_control button:focus-visible{outline: 2px solid red; outline-offset: -2px;}
#header .top_field .ht_program_list_btn .slide_control button.h_program_swiper_pause i{position:relative; display:inline-block; width:6px; height:6px;}
#header .top_field .ht_program_list_btn .slide_control button.h_program_swiper_pause i:before{
    content: '';
    display: inline-block;
    width: 2px;
    height: 6px;
	background-color:white;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
#header .top_field .ht_program_list_btn .slide_control button.h_program_swiper_pause i:after{
    content: '';
    display: inline-block;
    width: 2px;
    height: 6px;
	background-color:white;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}
#header .top_field .ht_program_list_btn .slide_control button.h_program_swiper_play i{position:relative; display:inline-block; width:6px; height:8px;}
#header .top_field .ht_program_list_btn .slide_control button.h_program_swiper_play i:before{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.5px 0px 4.5px 6px;
    border-color: transparent transparent transparent white;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: calc(50% + 1px);
    transform: translate(-50%, -50%);
}

#header .top_field .ht_program_list_btn .slide_nav > button:hover i{color:white;}
#header .top_field .ht_program_list_btn .h_program_swiper_toggle{display:inline-flex; align-items: center; margin-right: 6px;}
#header .top_field .ht_program_list_btn .h_program_swiper_toggle .h_program_swiper_play{display:none;}
#header .top_field .ht_program_list_btn .h_program_swiper_toggle.on .h_program_swiper_play{display:inline-flex; align-items: center; justify-content: center;}
#header .top_field .ht_program_list_btn .h_program_swiper_toggle .h_program_swiper_pause{display:inline-flex; align-items: center; justify-content: center;}
#header .top_field .ht_program_list_btn .h_program_swiper_toggle.on .h_program_swiper_pause{display:none;}
#header .top_field .ht_program_list_btn .h_program_swiper_toggle > button:hover i{color:white;}
#header .top_field .ht_program_list_btn .h_program_swiper_more{display:inline-flex; align-items: center; justify-content: center; margin-left: 1px;}
#header .top_field .ht_program_list_btn .h_program_swiper_more i{position:relative; width:8px; height:8px; transition: .3s;}
#header .top_field .ht_program_list_btn .h_program_swiper_more i:before{
	content: '';
    display: inline-block;
    width: 2px;
    height: 8px;
	background-color:white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#header .top_field .ht_program_list_btn .h_program_swiper_more i:after{
	content: '';
    display: inline-block;
    width: 8px;
    height: 2px;
	background-color:white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#header .top_field .ht_program_list_btn .h_program_swiper_more:hover i{transform: rotate(180deg);}
#header .bottom_field .inner{display:flex; align-items: center; justify-content: space-between; height:92px; padding-top:5px; padding-bottom:5px;}
#header .bottom_field h1 a{width:222px; height:50px; display:inline-flex; align-items: center;  color:white; font-size:0; background: url(../images/layout/h1_logo.svg) center no-repeat; background-size: cover; margin-top:-3px;}
#header .bottom_field h1 span{font-size:2.5rem; line-height:1; font-weight: 500; letter-spacing:-0.025rem;}
#header .bottom_field .util_member_list{display:inline-flex; gap:0 17px; margin-top: 11px;}
#header .bottom_field .util_member_list .roundbox_btn span{z-index:1;}
#header .bottom_field .util_member_list .txt_btn{color:white; font-size:1.5rem; letter-spacing:-0.025rem;}
#header .bottom_field .util_member_list button.txt_btn{position:relative; margin-left:14px;}
#header .bottom_field .util_member_list button.txt_btn:before{
	content: '';
	display: inline-block;
	width: 1px;
	height: 10px;
	position: absolute;
	top: 50%;
	left: -14px;
	transform:translate(0, -50%);
	background-color: rgb(255 255 255 / 50%);
	z-index:0;
}
#header nav .mobile_only{border-bottom:1px white solid; transition: border 0.2s;}
#header nav .mobile_only.bor_plus{border-bottom:1px #e5e5e5 solid;}
#header nav .mobile_only:before{
    content: "";
    width: 1px;
    height: 12px;
    background: #e2e2e2;
    position: absolute;
    top: 30px;
    right: 74px;
}
#header nav .mobile_only .mobile_mypage_btn{padding: 7px 20px 6px 20px; border: 1px #111 solid; border-radius: 30px; font-size: 1.5rem; line-height: 1; font-weight: 500; color: white; background-color: #111;}
#header nav .mobile_only .mobile_login_btn{padding: 7px 20px 6px 20px; border: 1px #bfbfbf solid; border-radius: 30px; font-size: 1.5rem; line-height: 1; font-weight: 700; color: #7e7e7e; background-color: white; margin-right:5px;}
#header .h_mobile_menu_btn{display:none;}
#header .h_mobile_menu_btn{z-index:9999;font-size:0rem;transition:all 0.3s ease 0s;width: 2.7rem; height: 1.8rem; position: relative;}
#header .h_mobile_menu_btn > span{display:block; position:absolute; left:0rem; width:100%; height:0.2rem; background:#fff;}
#header.open_m .h_mobile_menu_btn > span{background:black;}
#header .h_mobile_menu_btn > span:nth-of-type(1){top:0;}
#header .h_mobile_menu_btn > span:nth-of-type(2){top:50%; transition:background 0.3s ease 0s;}
#header .h_mobile_menu_btn > span:nth-of-type(3){top:1.7rem;}
#header .h_mobile_menu_btn > span:nth-of-type(1),
#header .h_mobile_menu_btn > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .h_mobile_menu_btn.active{position:fixed; transform:rotate(180deg); top: 28px; margin-left: 5px; right: 20px;}
#header .h_mobile_menu_btn.active > span:nth-of-type(1){top:1.0rem; transform:rotate(-45deg);}
#header .h_mobile_menu_btn.active > span:nth-of-type(2){background:transparent;}
#header .h_mobile_menu_btn.active > span:nth-of-type(3){top:1.0rem; transform:rotate(45deg);}
#header .h_mobile_menu_btn.active > span:nth-of-type(1),
#header .h_mobile_menu_btn.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}


#header.scrolled{background-color:white; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.10);}
#header.scrolled .top_field{background-color:#222; border-bottom: 1px rgb(0 0 0 / 30%) solid;}
#header.scrolled .bottom_field h1 a{background: url(../images/layout/h1_logo_black.svg) center no-repeat; background-size: cover;}
#header.scrolled .bottom_field .util_member_list .txt_btn{color:black; transition: color 0.3s ease;}
#header.scrolled .bottom_field .util_member_list button.txt_btn:before{background-color: rgb(0 0 0 / 50%);}
#header.scrolled nav .gnb > li > a{color:black; transition: color 0.3s ease;}
#header.scrolled .h_mobile_menu_btn > span{background:black; transition: background 0.3s ease;}


	/* 미디어쿼리 시작 */
	@media all and (min-width:1281px){
		#header .bottom_field .util_member_list .roundbox_btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:80px; height:28px; overflow:hidden; color:white; border-radius:30px; font-size:1.5rem; font-weight:300; letter-spacing:-0.025rem; border:1px rgb(255 255 255 / 0%) solid; box-shadow: 5px 5px 10px rgb(0 0 0 / 40%);}
		#header .bottom_field .util_member_list .roundbox_btn:before{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgb(0 0 0 / 80%);
			backdrop-filter: blur(8px); 
			-webkit-backdrop-filter: blur(8px);
			z-index:0;
		}
		#header.scrolled .bottom_field .util_member_list .roundbox_btn{box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);}
		#header.scrolled .bottom_field .util_member_list .roundbox_btn:before{background-color:#222;}
		#header nav{height:100%;}
		#header nav .gnb_in{height:100%;}
		#header nav .gnb{display:flex; height:100%;}
		#header nav .gnb > li{position:relative; padding:6px 45px 0 45px;}
		#header nav .gnb > li > a{display:inline-flex; align-items:center; height:100%; font-size:1.9rem; font-weight:500; color:white; letter-spacing:-0.025rem;}
		#header nav .gnb > li > a:focus-visible{outline: none;}
		#header nav .gnb > li > a:focus-visible span{outline: 2px solid red;}
		#header nav .gnb > li:last-child{margin-right:0;}
		#header nav .gnb > li ul{position:absolute; top:50px; left:50%; transform:translate(-50%, 0); min-width:100%; padding: 15px 40px; background:#fff; border-radius:15px; box-shadow:15px 20px 29px rgba(0,0,0,0.13); opacity:0; visibility:hidden; pointer-events:none; transition:all 0.4s ease-out; transition-property:opacity, top; border: 1px rgb(0 0 0 / 10%) solid;}
		#header nav .gnb > li.active ul{opacity:1; visibility:visible; pointer-events:auto; top:70px; z-index:10;}
		#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10px 0px; border-top: 0; text-align: center; transition:all 0.3s ease 0s; font-size: 1.7rem; font-weight:300; transition:none; white-space: nowrap;}
		#header nav .gnb > li ul > li > a:focus-visible{outline: none;}
		#header nav .gnb > li ul > li > a:focus-visible span{outline: 2px solid red;}
		#header nav .gnb > li ul > li > a:hover{color: #09847F;}
		#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}
		#header nav .mobile_only{display:none;}
	}
	@media all and (max-width:1535px){
		#header nav .gnb > li{padding: 6px 30px 0 30px;}
	}
	@media (min-width:1281px) and (max-width:1440px){
		#header nav .gnb > li{padding: 6px 28px 0 28px;}
	}
    @media (max-width: 1280px) {
		#header .top_field{position:absolute; opacity: 0; pointer-events: none; user-select: none;}
		#header .bottom_field h1 a{margin-top:0; width:182px; height:41px;}
		#header .bottom_field .inner{height: 70px; padding-top: 0; padding-bottom: 0;}
		#header .bottom_field .util_member_list{margin-top: 10px; margin-right: 50px;}
		#header .bottom_field .util_member_list .roundbox_btn{color: white; font-size: 1.5rem; letter-spacing: -0.025rem;}
		#header.scrolled .bottom_field .util_member_list .roundbox_btn{color: black; transition: color 0.3s ease;}
		#header .h_mobile_menu_btn{display:inline-block; position:fixed; top:28px; right:40px;}
        #header nav{position: fixed; display: block; top: 0; right: -320px; width: 320px; height: 100%; background: #fff; z-index: 110; transition: right 0.3s ease;}
		#header.open_m nav{right:0; transition: right 0.3s ease;}
        #header nav .gnb_in {width:100%; min-width: auto; height: calc(100% - 70px); overflow: auto; padding-bottom: 10px; overflow-y:scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; overflow-x: hidden; /* Firefox */ padding-left: 0; padding-right:0;}
        #header nav .gnb_in::-webkit-scrollbar{display: block; /* Chrome, Safari, Opera*/}
        #header nav .gnb_in::-webkit-scrollbar{width: 4px; height: 6px;}
        #header nav .gnb_in::-webkit-scrollbar-track{background-color: #eee;}
        #header nav .gnb_in::-webkit-scrollbar-thumb{border-radius: 3px; background-color:#9f9f9f;}
        #header nav .gnb_in::-webkit-scrollbar-button{width: 0; height: 0;}
        #header nav .mobile_only{width: 100%; height: 70px; display: flex; align-items: center; position:relative; padding: 0 20px;}
        #header nav .mobile_only .close_btn{width: 30px; height: 30px; position: absolute; top: 20px; right: 25px; font-size:0; line-height:0;}
        #header nav .gnb{height: auto; flex-wrap: wrap; padding: 0 20px 50px 20px;}
        #header nav .gnb li.depth-1 {width: 100%; height: auto; padding: 0; justify-content: flex-start; flex-wrap: wrap; position: relative;}
        #header nav .gnb li.depth-1.on > a {height: 60px; border-bottom: none; color:black; font-weight: 600; padding-top:5px;}
        #header nav .gnb li.depth-1 > a{display: flex; align-items: center; position:relative; width: 100%; height: 65px; width: 100%; opacity: 1; visibility: visible; padding: 0 25px 0 10px; font-size: 1.9rem; color: #333; border-bottom: 1px solid #e5e5e5;  pointer-events: none;}
        #header nav .gnb li.depth-1 > a:before {
            content: "";
            position: absolute;
            z-index: 2;
            top: 0;
            bottom: 0;
            margin: auto;
            border: none;
            transform: none;
            -webkit-transform: none;
            right: 10px;
            width: 12px;
            height: 2px;
            background: #c2c2c2;
        }
        #header nav .gnb li.depth-1.on > a:before{background: #09847F;}
        #header nav .gnb li.depth-1 > a:after {
            content: "";
            position: absolute;
            z-index: 2;
            top: 0;
            bottom: 0;
            margin: auto;
            border: none;
            transform: none;
            -webkit-transform: none;
            right: 15px;
            width: 2px;
            height: 12px;
            background: #c2c2c2;
        }
        #header nav .gnb li.depth-1.on > a:after{display:none;}
        #header nav .gnb li.depth-1:first-child .depth-2{border-left:none;}
        #header nav .gnb .depth-2{height:0; position: relative; top: auto; left: auto; opacity: 1; visibility: visible; border:none; display: block; width: 100%; padding: 0 25px; background: #f7f7f7; overflow:hidden; transition: all ease .2s;}
        #header nav .gnb .depth-2.on{height: auto; transition: all ease .2s; padding: 15px 25px; border-radius: 10px; }
        #header nav .gnb .depth-2 li{padding: 10px 0; -webkit-transform: translateY(0px); transform: translateY(0px);}
        #header nav .gnb .depth-2 > li > a{font-weight: 500; position: relative; padding-left: 15px; color: #111; font-size:1.6rem;}
        #header nav .gnb .depth-2 > li > a:after{
            content: "";
            height: 1px;
            width: 5px;
            background: #9d9d9d;
            position: absolute;
            top: 13px;
            left: 0px;
        }
        #header nav .gnb li{text-align: left;}
        #header.open_m .mask{
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.75;
            transition: all 0.3s linear;
        }
	}
	@media (max-width: 1024px){
		#header .h_mobile_menu_btn{right:30px;}
	}
	@media (max-width: 768px){
		#header .h_mobile_menu_btn{right:20px;}
	}
	@media (max-width: 500px){
		#header .bottom_field .inner{height:60px;}
		#header .bottom_field h1 a{width: 162px; height: 36px; margin-top: 0;}
		#header .bottom_field .util_member_list{display:none;}
		#header .h_mobile_menu_btn{width: 2.2rem; height: 1.6rem; top:22px;}
		#header .h_mobile_menu_btn > span:nth-of-type(3){top:1.6rem;}
		#header .h_mobile_menu_btn.active{width: 2.7rem; height: 1.8rem; top: 28px;}
	}
	@media (max-width: 425px){
		#header .h_mobile_menu_btn{right:16px;}
	}
	/* 미디어쿼리 끝 */
/* 헤더 끝 */


/* 푸터 시작 */
#footer{width:100%; background-color:#34383f; z-index: 500; min-height: 265px;}
#footer > .inner{position:relative; width:100%; height:100%; display:flex; justify-content: space-between;}
#footer .left_align_wrap{display:inline-flex; flex-wrap:wrap; margin-top:76px;}
#footer .f_logo{width:200px; height:45px; background: url(../images/layout/h1_logo_white.svg) center no-repeat; background-size:contain;}
#footer .center_info{width:100%; margin-top:24px; display:flex; gap:0 8px;}
#footer .center_info dl.f_item{display:inline-flex; align-items:center;}
#footer .center_info dl.f_item dt, #footer .center_info dl.f_item dd{color:rgb(255,255,255,0.7); font-size:1.6rem; line-height:1.4;}
#footer .copyright{width:100%; color:rgb(255,255,255,0.7); font-size:1.6rem; margin-top:10px; line-height:1.4;}
#footer .right-align_wrap{display: inline-flex; flex-wrap: wrap; justify-content: flex-end; padding-top:75px; max-width:580px;}
#footer .f_menu{display:inline-flex; flex-wrap:wrap; align-items: center;}
#footer .f_menu > li{position:relative; margin-left:15px; margin-right:11px; line-height:0;}
#footer .f_menu > li:before{
	content: '';
    display: block;
    position:absolute;
    top: 50%;
    right: -15px;
    transform: translate(0, -50%);
    width: 4px;
    height: 4px;
	border-radius:100%;
    background-color:#52565c;
}
#footer .f_menu > li:first-child{margin-left:0;}
#footer .f_menu > li:last-child{margin-right:0;}
#footer .f_menu > li:last-child:before{display:none;}
#footer .f_menu > li > a{display:inline-block; font-size:1.6rem; line-height:1; color:#ffffff; transition:color ease 0.3s;}
#footer .f_menu > li > a:hover{color: #5ed0ff;}
#footer .f_etc{display:flex; align-items:center; gap:0 25px; margin-top:40px;}
#footer .f_sns{display: inline-flex; gap:0 10px; margin-top:1px;}
#footer .f_sns > li{position:relative; display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:10px; background-color:#52565c;}
#footer .f_sns > li > a{display:inline-block; width:100%; height:100%;}
#footer .f_sns > li.instagram:before{
	content: '';
    display: block;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
	background: url(../images/layout/icon_instagram.svg) no-repeat center;
	background-size:contain;
	pointer-events: none;
}
#footer .f_sns > li.facebook:before{
	content: '';
    display: block;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 18px;
	background: url(../images/layout/icon_facebook.svg) no-repeat center;
	background-size:contain;
	pointer-events: none;
}
#footer .family_link{width: 210px; height: 50px; border:1px rgba(255,255,255,0.2) solid; position: relative; z-index: 100; background-color:#212225; border-radius:5px; pointer-events:auto;}
#footer .family_link::before{
    content: "";
    position: absolute;
    top: calc(50% + 1px);
    right: 13px;
    transform: translate(0, -50%);
    width: 22px;
    height: 22px;
    background: url(../images/layout/arrow_down.svg) center no-repeat;
    background-size: contain;
    transition: 0.3s;
    opacity: 0.7;
}
#footer .family_link.active::before{transform: translate(0, -50%) rotate(180deg);}
#footer .family_link .family_link_list_default{position:relative; font-size: 1.6rem; color: #fff; display: inline-flex; align-items: center; width: 100%; height: 100%; padding: 0 20px; z-index:2;}
#footer .family_link .family_link_list_default > i{font-size: 1.9rem; margin-top:4px; margin-right:6px;}
#footer .family_link .family_link_list{display:none; position: absolute; width: 100%; left: 0; bottom: 49px; background: #111; overflow: auto; max-height: 229px;}
#footer .family_link .family_link_list li{border-bottom: 1px solid rgba(255,255,255,0.15);}
#footer .family_link .family_link_list li a{position: relative; display: block; height: 45px; line-height: 45px; padding: 0 16px; font-size: 14px; color: #bbb; text-align: left; transition: 0.3s;}
#footer .family_link .family_link_list li a:focus-visible{outline: 2px solid red; outline-offset: -2px;}
#footer .family_link .family_link_list li a:hover{color:white;}
#footer .family_link .family_link_list{overflow-y:scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; overflow-x: hidden; /* Firefox */}
#footer .family_link .family_link_list::-webkit-scrollbar{display: block; /* Chrome, Safari, Opera*/}
#footer .family_link .family_link_list::-webkit-scrollbar{width: 4px; height: 6px;}
#footer .family_link .family_link_list::-webkit-scrollbar-track{background-color: #eee;}
#footer .family_link .family_link_list::-webkit-scrollbar-thumb{border-radius: 3px; background-color:#9f9f9f;}
#footer .family_link .family_link_list::-webkit-scrollbar-button{width: 0; height: 0;}


#footer .top_btn{position:absolute; right:82px; bottom:100px; width:47px; height:47px; background-color:#070707; border:1px #393939 solid; color:white; font-size:24px;}
#footer .top_btn > i{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#footer .sns_list{display: inline-flex; margin-top: 57px;}
#footer .sns_list > li{padding:0 5px;}
#footer .sns_list > li:first-child{padding-left:0;}
#footer .sns_list > li:last-child{padding-right:0;}
#footer .sns_list > li > a{color:white; font-size:25px; transition:color ease 0.3s;}
#footer .sns_list > li > a.youtube:hover{color:#ff1a47;}
#footer .sns_list > li > a.facebook:hover{color:#2b88ff;}
#footer .sns_list > li > a.instagram:hover{color:#ff36a7;}

    /* 미디어쿼리 시작 */
	@media (max-width: 1280px){
		#footer{padding-bottom:50px;}
		#footer > .inner{flex-wrap:wrap;}
		#footer .left_align_wrap{width:100%; order: 2; margin-top: 0;}
		#footer .right-align_wrap{width: 100%; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-top: 30px; max-width:none;}
		#footer .f_etc{margin-top:0;}
	}
    @media (max-width: 1100px){
    	#footer .family_link{margin-top:0;}
    }
	@media (max-width: 768px){
		#footer .f_etc{gap: 0 20px;}
		#footer .family_link{width:180px;}
		#footer .center_info{flex-wrap:wrap; gap: 8px 8px; margin-top:20px; padding-right:20px;}
	}
    @media (max-width: 650px){
		#footer .f_etc{width:100%; margin-top: 25px;}
    	#footer .family_link{width: calc(100% - 100px);}
    }
	@media (max-width: 500px){
		#footer .center_info{gap: 5px 0px;}
		#footer .center_info dl.f_item dt, #footer .center_info dl.f_item dd{font-size:1.5rem;}
	}
	@media (max-width: 390px){
		#footer{padding-bottom:40px;}
		#footer .right-align_wrap{margin-bottom:25px;}
		#footer .f_menu > li > a{font-size:1.5rem;}
		#footer .family_link{height: 47px;}
		#footer .family_link .family_link_list{bottom: 45px;}
		#footer .family_link .family_link_list_default{font-size:1.5rem; padding: 0 15px;}
		#footer .family_link .family_link_list_default > i{margin-top: 2px;}
		#footer .family_link::before{right:10px;}
		#footer .center_info dl.f_item dt, #footer .center_info dl.f_item dd{font-size:1.4rem;}
		#footer .copyright{font-size:1.5rem;}
		#footer .f_sns{gap: 0 8px;}
		#footer .f_etc{margin-top:20px;}
	}
    /* 미디어쿼리 끝 */
/* 푸터 끝 */