/*================================================================================================
    top - 기본설정
================================================================================================*/
.top{
	width: 100%;
	height: 5.789rem;
	z-index: 222222222;
	position: fixed;
	transition: all .2s ease-in-out;
	top: 0;
}
.top .top_logo{
	width: 16%;
	float: left;
	padding: 2.105rem 0 0 0;
}
.top .top_menu{
	width: 68%;
	float: left;
}
.top .top_right{
	width: 16%;
	float: left;
	text-align: right;
}

@media (max-width: 1599px){
	.top .top_logo{
		width: 15%;
		float: left;
		padding: 2.105rem 0 0 0;
	}
	.top .top_menu{
		width: 70%;
		float: left;
	}
	.top .top_right{
		width: 15%;
		float: left;
		text-align: right;
	}
}
@media (max-width: 1499px){
	.top .top_logo{
		width: 14%;
		float: left;
		padding: 2.105rem 0 0 0;
	}
	.top .top_menu{
		width: 69%;
		float: left;
	}
	.top .top_right{
		width: 17%;
		float: left;
		text-align: right;
	}
}


/*================================================================================================
    top - 로고
================================================================================================*/
.top .top_logo img{
	width: 8.421rem;
}

@media (max-width: 1599px){
	.top .top_logo img{
		width: 7.632rem;
	}
}

/*================================================================================================
    top - 메뉴
================================================================================================*/
#header{
	width: 100%;
}
#header.on .top{
	height: 5.789rem;
	background: #FFFFFF;
	border-bottom: 1px solid #dcdcdc;
}
#header .wrap{
	overflow: visible;
}
#header .header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
#header .top_logo .logo01{
	display: inline-block;
}
#header .top_logo .logo02{
	display: none;
}
#header.on .top_logo .logo01{
	display: none;
}
#header.on .top_logo .logo02{
	display: inline-block;
}
#header .header-gnb{	
	width: 100%;
	height: 5.789rem;
	flex-shrink: 1;
}
#header.scroll,
#header.on,
#header.open{
	background-color: #fff;
}
#header .gnb-menu_list{	
	width: 100%;
	height: 100%;	
	justify-content: space-between;
	display: flex;	
}
#header .gnb-menu_item{
	height: 100%;
	position: relative;
	flex-grow: 1;
} 
#header .gnb-menu_link{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;	
}
#header .gnb-menu_link:after{
	transition: opacity .1s, width .5s; content: '';
	display: block;
	height: 2px;
	width: 0;
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 0;
}
#header .gnb-menu_item:hover .gnb-menu_link:after{
	opacity: 1;
	width: 100%;
	transition: opacity .1s, width .5s;
}
#header.on .gnb-menu_item:hover .gnb-menu_link > span{
	color: #2d87db;
	transition: color .2s;
}
#header .gnb-menu_link > span{
	transition: color .2s .2s;
	position: relative;
	font-family: 'Gyeonggi_Title_Medium';
	color: #FFFFFF;
	font-weight: 500;
	font-size: 1.158rem;
	line-height: 1.368rem;	
}
#header.on .gnb-menu_link > span,
#header .changed .gnb-menu_link > span,
.popup-opened .top .gnb-menu_link > span{
	color: #000000 !important;
}
#header .gnb-menu_link.active > span{
	color: #FFFFFF !important;
}
#header .snb-menu{
	width: 100%;
	height: 19.474rem;
	opacity: 0;
	position: absolute;
	top: 5.789rem;
	left: 0;
	padding: 1.053rem 0 0 0;
	pointer-events: none;
}
#header .snb-menu_item{
	text-align: center;
}
#header .snb-menu_item a{
	cursor: pointer;
}
#header .snb-menu_link{
	font-weight: 500;
	font-size: 0.842rem;	 
	line-height: 1.053rem;
	color: #8b8b8b;
	padding: 7px 0;
	display:block;
}
#header .snb-menu_link:hover{
	color: #2d87db;
}
#header.on .snb-menu{
	opacity: 1;
	z-index: 1;
	pointer-events: visible;
}
#header .snb-menu-bg{
	width:100%;
	top: 5.789rem;
	right: 50%;
	transform: translateX(50%);
	height: 0px;
	background-color: rgba(255, 255, 255, 1.0);
	position: absolute;
	transition: height .5s;
	/*box-shadow: 0 12px 15px rgba(0,0,0,.05);*/
}
#header.on .snb-menu-bg{
	height: 19.474rem;
	transition: height .5s;
}

@media (max-width: 1599px){
	#header .gnb-menu_link > span{
		transition: color .2s .2s;
		position: relative;
		font-family: 'Gyeonggi_Title_Medium';
		color: #FFFFFF;
		font-weight: 500;
		font-size: 1.053rem;
		line-height: 1.368rem;	
	}
}
@media (max-width: 1499px){
	#header .gnb-menu_link > span{
		transition: color .2s .2s;
		position: relative;
		font-family: 'Gyeonggi_Title_Medium';
		color: #FFFFFF;
		font-weight: 500;
		font-size: 1rem;
		line-height: 1.211rem;	
	}
	#header .snb-menu_link{
		font-weight: 500;
		font-size: 0.789rem;	 
		line-height: 1.053rem;
		color: #8b8b8b;
		padding: 7px 0;
		display:block;
	}
}
@media (max-width: 1399px){
	#header .gnb-menu_link > span{
		transition: color .2s .2s;
		position: relative;
		font-family: 'Gyeonggi_Title_Medium';
		color: #FFFFFF;
		font-weight: 500;
		font-size: 1rem;
		line-height: 1.211rem;
	}
	#header .snb-menu_link{
		font-weight: 500;
		font-size: 0.789rem;	 
		line-height: 1.053rem;
		color: #8b8b8b;
		padding: 7px 0;
		display:block;
	}
}

/*================================================================================================
    top - 스크롤시
================================================================================================*/
.changed,
.popup-opened .top{
	height: 5.789rem;
	background: #FFFFFF;
	border-bottom: 1px solid #dcdcdc;
}
#header.on .changed,
.popup-opened .top{
	height: 5.789rem;
	border-bottom: 1px solid #dcdcdc;
}
.changed .top_logo,
.popup-opened .top .top_logo{
	padding: 2.105rem 0 0 0;
}
#header .changed .top_logo .logo01,
.popup-opened .top .top_logo .logo01{
	display: none !important;
}
#header .changed .top_logo .logo02,
.popup-opened .top .top_logo .logo02{
	display: inline-block !important;
}
#header .changed .header-gnb,
.popup-opened .top .header-gnb{
	height: 5.789rem;
}
#header .changed .snb-menu,
.popup-opened .top .snb-menu{
	height: 7.368rem;
	top: 5.789rem;
	padding: 1.053rem 0 0 0;
}
#header .changed .snb-menu-bg,
.popup-opened .top .snb-menu-bg{
	top: 5.789rem;
}

/*================================================================================================
    top - 오른쪽 메뉴 - 기본 레이아웃
================================================================================================*/
.top_right > ul{
	display: inline-block;
}
.top_right > ul > li{
	line-height: 5.526rem;
	float: left;
}
.top_right > ul > li > a{
	font-size: 0.842rem;
	color: #FFFFFF;
}
.changed .top_right > ul > li > a,
.on .top_right > ul > li > a,
.popup-opened .top .top_right > ul > li > a{
	color: #000000;
}

@media (max-width: 1399px){
	.top_right > ul > li > a{
		font-size: 0.737rem;
		color: #FFFFFF;
	}
}

/*================================================================================================
    top - 오른쪽 메뉴 - 회원가입
================================================================================================*/
.top_right .top_right_join{
	padding: 0 0 0 1.263rem;
}

@media (max-width: 1599px){
	.top_right .top_right_join{
		padding: 0 0 0 0.632rem;
	}
}

/*================================================================================================
    top - 오른쪽 메뉴 - 검색 - 아이콘
================================================================================================*/
.top_right .top_right_search{
	padding: 0 0.316rem 0 1.053rem;
}
.top_right .top_right_search a{
	display: block;
}
.top_right .top_right_search img{
	width: 0.842rem;
	cursor: pointer;
	vertical-align: middle;
	margin: -0.158rem 0 0 0;
}
.top_right_search .icon_search01{
	display: inline-block;	
}
.top_right_search .icon_search02{	
	display: none;
}
.changed .top_right_search .icon_search01,
.on .top_right_search .icon_search01,
.popup-opened .top .top_right_search .icon_search01{
	display: none;
}
.changed .top_right_search .icon_search02,
.on .top_right_search .icon_search02,
.popup-opened .top .top_right_search .icon_search02{	
	display: inline-block;
}

@media (max-width: 1499px){
	.top_right .top_right_search{
		padding: 0 0.316rem 0 0.789rem;
	}
}

/*================================================================================================
    top - 오른쪽 검색 - 내용
================================================================================================*/
.popup_search{
	width: 100%;
	height: 5.263rem;
	position: fixed;
	top: 5.789rem;
	z-index: 11111111111;
	background: #FFFFFF;
}
.popup_search .popup__container{
	width: 100%;
	font-size: 1rem;
	padding: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: rgba(0, 0, 0, .25) 0 0px 0px, rgba(0, 0, 0, .22) 0 0px 0px;
}
.popup_search .wrap > dl{
	width: 100%;
	overflow: hidden;
	border-bottom: 2px solid #000000;
	padding: 0.263rem 0 0 0;
}
.popup_search .popup_search_input{
	width: 95%;
	float: left;
}
.popup_search .popup_search_icon{
	width: 5%;
	float: left;
	text-align: right;	
	line-height: 0rem;
}
.popup_search .popup_search_input input{
	width: 100%;
	height: 4rem;
	border: 0;
}
.popup_search .popup_search_icon .button_search{
    width: 4rem;
    height: 4rem;
    background: url(../images/icon/icon_search02.svg) center no-repeat;
    background-size: 2.4rem;
	border: 0;
}
.popup_search .popup_search_icon .sr-only{
    position: absolute;
    left: 0;
    top: 0;
    width: .1rem;
    height: .1rem;
    font-size: .1rem;
    clip: rect(.1rem, .1rem, .1rem, .1rem);
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1499px){
	.popup_search .popup_search_input{
		width: 90%;
		float: left;
	}
	.popup_search .popup_search_icon{
		width: 10%;
		float: left;
		text-align: right;	
		line-height: 0rem;
	}
}

/*================================================================================================
    top - 전체메뉴보기 - 아이콘
================================================================================================*/
.moble_navbar{
	width: 1.895rem;
	padding: 2.368rem 0 0 0;
}
.moble_navbar > a{
	width: 100%;
	height: 0.842rem;
	position: relative;
	display: flex;
	cursor: pointer;
	justify-content: center;
	flex-direction: column;
}
.moble_navbar > a > span{
	width: 100%;
	height: 0.105rem;
	position: absolute;
	display: block;
	background-color: #FFFFFF;
	transition: all 0.5s;
}
.changed .moble_navbar > a > span,
.on .moble_navbar > a > span,
.popup-opened .top .moble_navbar > a > span{
	background-color: #000;
}

.moble_navbar > a > span:nth-child(1){
	top: 0;
	left: 0;
}
.moble_navbar > a > span:nth-child(2){
	top: calc(50% - 0.053rem);
	left: 0;
}
.moble_navbar > a > span:nth-child(3){
	bottom: 0;
	right: 0;
}

@media (max-width: 1499px){
	.moble_navbar{
		width: 1.579rem;
		padding: 2.368rem 0 0 0;
	}
}

/*================================================================================================
    top - 전체메뉴보기 - 내용
================================================================================================*/
.popup_all_menu .popup__container{
	width: 100%;
	height: 100vh;
	margin: 0;
	border-radius: 0;
}
.popup_all_menu .popup__content > ul{
	width: 100%;
	overflow: hidden;
	padding: 2.632rem 0 0 0;
}
.popup_all_menu .popup__content > ul > li{
	width: 25%;
	float: left;
	padding: 0 0 3.158rem 0;
	border-left: 1px solid #eeeeee;
}
.popup_all_menu .popup__content > ul > li > dl{
	width: 100%;
	overflow: hidden;	
	padding: 0 1.579rem;
}
.popup_all_menu .popup__content > ul > li > dl > dt{
	width: 100%;
	overflow: hidden;
}
.popup_all_menu .popup__content > ul > li > dl > dt > a{
	font-weight: 700;
	font-size: 1.316rem;
	color: #000000;
	line-height: 1.579rem;
	display: block;
	transition: all .2s ease-in-out;
}
.popup_all_menu .popup__content > ul > li > dl > dt > a:hover,
.popup_all_menu .popup__content > ul > li > dl > dt > a:focus,
.popup_all_menu .popup__content > ul > li > dl > dt > a:active{
	color: #2d87db;
}
.popup_all_menu .popup__content > ul > li > dl > dd{
	width: 100%;
	overflow: hidden;
}
.popup_all_menu .popup__content > ul > li > dl > dd > ul{
	width: 100%;
	overflow: hidden;
	padding: 1.053rem 0 0 0;
}
.popup_all_menu .popup__content > ul > li > dl > dd > ul > li{
	padding: 0.105rem 0 0 0;
}
.popup_all_menu .popup__content > ul > li > dl > dd > ul > li > a{
	font-size: 1rem;
	color: #454545;
	transition: all .2s ease-in-out;
}
.popup_all_menu .popup__content > ul > li > dl > dd > ul > li > a:hover,
.popup_all_menu .popup__content > ul > li > dl > dd > ul > li > a:focus,
.popup_all_menu .popup__content > ul > li > dl > dd > ul > li > a:active{
	color: #000000;
}

/*================================================================================================
    카피라이터 - 기본레이아웃
================================================================================================*/
.copyright{
	width: 100%;
	overflow: hidden;
	background: #232526;
}

/*================================================================================================
    카피라이터 - 메뉴, sns - 기본레이아웃
================================================================================================*/
.copyright .copyright_top{
	width: 100%;
	height: 3.684rem;
	border-bottom: 1px solid #505050;
}
.copyright .copyright_top .copyright_menu{
	width: 50%;
	float: left;
}
.copyright .copyright_top .copyright_sns{
	width: 50%;
	float: left;
	text-align: right;
}

/*================================================================================================
    카피라이터 - 메뉴
================================================================================================*/
.copyright .copyright_top .copyright_menu > ul > li{
	float: left;
}
.copyright .copyright_top .copyright_menu > ul > li > a{
	font-size: 0.842rem;
	color: #9a9a9a;
	line-height: 3.684rem;
}
.copyright .copyright_top .copyright_menu > ul > .copyright_menu_line span{
	width: 1px;
	height: 0.526rem;
	background: #505050;
	line-height: 3.684rem;
	display: block;
	margin: 1.579rem 0.895rem 0 0.895rem;
}
.copyright .copyright_top .copyright_menu > ul{
	width: 100%;
	overflow: hidden;
}
.copyright .copyright_top .copyright_menu > ul > li{
	float: left;
}

/*================================================================================================
    카피라이터 - sns
================================================================================================*/
.copyright .copyright_top .copyright_sns{
	padding: 0.789rem 0 0 0;
}
.copyright .copyright_top .copyright_sns a > img{
	width: 2.105rem;
	height: 2.105rem;
	margin: 0 0 0 0.263rem;
}

/*================================================================================================
    카피라이터 - 로고, 정보 - 기본레이아웃
================================================================================================*/
.copyright .copyright_bottom{
	width: 100%;
	overflow: hidden;
	padding: 1.579rem 0 2.632rem 0;
}
.copyright .copyright_bottom .copyright_bottom_logo{
	width: 17%;
	float: left;
}
.copyright .copyright_bottom .copyright_bottom_info{
	width: 83%;
	float: left;
}

@media (max-width: 1599px){
	.copyright .copyright_bottom .copyright_bottom_logo{
		width: 20%;
		float: left;
	}
	.copyright .copyright_bottom .copyright_bottom_info{
		width: 80%;
		float: left;
	}
}

/*================================================================================================
    카피라이터 - 로고, 정보 - 로고
================================================================================================*/
.copyright .copyright_bottom .copyright_bottom_logo > img{
	width: 8.421rem;
}

/*================================================================================================
    카피라이터 - 정보
================================================================================================*/
.copyright .copyright_bottom .copyright_bottom_info > ul{
	width: 100%;
	overflow: hidden;
}
.copyright .copyright_bottom .copyright_bottom_info > ul > li{
	font-size: 0.842rem;
	color: #9a9a9a;
	line-height: 1.474rem;	
	float: left;
	padding: 0 1.316rem 0 0;
}
.copyright .copyright_bottom .copyright_bottom_info > ul > li > a{
	color: #9a9a9a;
}
.copyright .copyright_bottom .copyright_bottom_info > ul > li > span{
	width: 1.158rem;
	display: inline-block;
}
.copyright .copyright_bottom .copyright_bottom_info > ul > li .main_br2{
	display: none;
}
.copyright .copyright_bottom .copyright_bottom_info > ul > li .main_br3{
	display: none;
}
.copyright .copyright_bottom .copyright_bottom_info > .cbi_rights > li{
	font-size: 0.789rem;
	color: #7d7d7d;
	padding: 0.789rem 0 0 0;
}