@charset "utf-8";

.lay_header, .lay_body, .lay_footer{display: flex;flex: 1 0 auto;flex-direction:row;min-width: 250px;overflow: hidden;}
.lay_header{background-color: #ffffff;border-bottom: solid 1px #f1f1f1;}
.lay_header.fixed{position: fixed; top: 0px; width: 100%; z-index: 102;}
.lay_footer{background-color: #605657;}

/* 헤더 */
.header_wrap{display: flex;flex-direction:column;box-sizing: border-box;align-items: center;position: relative;width: 100%;}
.top_wrap{display: flex;width: 100%;max-width: 1264px;margin: 0 auto;padding: 2rem;box-sizing: border-box;align-items: flex-end;gap: 5rem;}

.header_wrap .logo{display: flex;max-width: 14rem;box-sizing: border-box;width: 100%;padding-bottom: 0.5rem;}
.header_wrap .logo img{max-width: 100%;max-height: 100%;min-width: 100px;}

.scroll_menu{display: none;}

.nav_wrap{display: flex; flex-direction: column; gap: 2.5rem; width: 100%;transition: left .2s ease;}
.header_wrap .nav{display: flex;align-items: center;width: 100%;height: 100%;box-sizing: border-box;justify-content: space-between;}
.header_wrap .nav .menu{display: flex;align-content: center;}
.header_wrap .nav .menu ul{display: flex;align-items: center;gap: 4rem;}
.header_wrap .nav .menu ul li{font-weight: 700;color: #3b3b3b;}
.header_wrap .nav .menu ul li a{transition: color .2s ease;}
.header_wrap .nav .menu ul li a:hover{color: #ff7400;}
.header_wrap .nav .menu ul li a.active{color: #ff7400;}
.header_wrap .nav .menu ul li a.mo_menu{display: none;}
.header_wrap .nav .menu ul li a.pc_menu{display: flex;}
.header_wrap .nav .menu ul li ul{display: none;}
.header_wrap .top_info{display: flex;width: 100%;}
.header_wrap .top_info .info{display: flex;width: 100%;max-width: 1264px;margin: 0 auto;align-items: center;flex-direction: row-reverse;box-sizing: border-box;}
.header_wrap .top_search{display: flex;align-content: center;width: 30rem;border: solid 1px #ff7400;border-radius: 40px;overflow: hidden;}
.header_wrap .top_search input[type=text]{border: 0;width: 100%; font-size: 1.2rem;padding:0 1.5rem;}
.header_wrap .top_search input[type=text]::placeholder{color: #ff7900; font-size: 1.2rem;}
.header_wrap .top_search .search_btn{width: 5rem;height: 3.2rem;text-align: center;font-size: 1.5rem;color: #ff7900;}
.header_wrap .top_info .info_menu{display: flex;align-items: center;}
.header_wrap .top_info .info_menu a{margin-left: 2.6rem;position: relative;font-size: 1.2rem;color: #767676;flex-grow: 1;}
.header_wrap .top_info .info_menu a:hover{text-decoration: underline;}
.header_wrap .top_info .info_menu a:first-of-type{margin-left: 0;border-left-width: 0;}
.header_wrap .top_info .info_menu a::before{content: '';width: 1px;height: 1rem;background-color: #767676;position: absolute;top: 50%;left: -1.3rem;transform: translateY(-50%);}
.header_wrap .top_info .info_menu a:first-of-type::before{display: none;}

.header_wrap .top_wrap .top_btn, .header_wrap .top_info .user_info, .header_wrap .top_info .menu_close{display: none;}

/* 푸터 */
.footer_wrap{display: block;box-sizing: border-box;padding: 5rem 2rem;align-items: center;position: relative;color: #fff;width: 100%;max-width: 1264px;margin: 0 auto;}
.footer_wrap a{color: #fff;}
.footer_wrap a.ch_talk{background:url("../../../../../images/com/raraclass/www/user/chtalk.svg") left center no-repeat; padding-left: 1.5rem;}

.footer_wrap .footer_site{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;}

.footer_wrap .footer_text{display: flex; flex-direction: column;}
.footer_wrap .footer_text p{margin-top: 2rem;line-height: 1.4;font-size: 1.2rem;color: #f1f1f1;}

.footer_wrap .footer_top {display: flex; justify-content: space-between; align-items: flex-start; width: 100%;}

.footer_wrap .footer_top .logo {display: inline-flex; max-width: 15rem;}
.footer_wrap .footer_top .footer_enterprise{display: flex; gap: 2rem; align-items: center; padding: 1.5rem 3.5rem; border-radius: 2rem; background-color: #ffffff; margin-top: 2rem; box-sizing: border-box;}
.footer_wrap .footer_top .footer_enterprise span {display: inline-flex; max-width: 100%; height: 3rem;}

.footer_wrap .footer_top .link_wrap{display: flex;justify-content: flex-end;flex-wrap: wrap;}
.footer_wrap .footer_top .link_wrap a{margin-left: 3rem;font-size: 1.3rem;font-weight: 700;}
.footer_wrap .footer_top .link_wrap a:hover{text-decoration: underline;}
.footer_wrap .footer_top .link_wrap a:first-of-type{margin-left: 0;}

.footer_wrap .footer_info{display: flex;flex-direction: column; width: 100%;}

.footer_wrap .footer_info .info_text{display: flex;flex-direction: column;margin-top: -5.5rem;flex-wrap: wrap; gap: 0.5rem;}
.footer_wrap .footer_info .info_text h3 {display: flex; justify-content: flex-end; margin-bottom: 0.5rem; color: #d1d1d1;}
.footer_wrap .footer_info .info_text .text_wrap{display: flex;justify-content: flex-end;flex-wrap: wrap;}
.footer_wrap .footer_info .info_text .text_wrap span{margin-left: 2rem;position: relative;font-size: 1.2rem;line-height: 1.4;word-break: keep-all;color: #d1d1d1;}
.footer_wrap .footer_info .info_text .text_wrap span b{color: #868686;margin-right: 1rem;font-weight: 500;}
.footer_wrap .footer_info .info_text .text_wrap span::before{content: '';width: 1px;height: 10px;display: block;position: absolute;top: 0.2rem;left: -1rem;background-color: #cfcfcf;}
.footer_wrap .footer_info .info_text .text_wrap + .text_wrap span + span + span::before{display: none;}
.footer_wrap .footer_info .info_text .text_wrap span:first-of-type{margin-left: 0;}
.footer_wrap .footer_info .info_text .text_wrap span:first-of-type::before{display: none;}
.footer_wrap .footer_info .info_text .text_wrap + .text_wrap span span{margin: 0;}
.footer_wrap .footer_info .info_text .text_wrap + .text_wrap span span:before{display:none;}

.footer_wrap .footer_social{display: flex;align-items: flex-end;justify-content: space-between;flex-wrap: wrap;}

.footer_wrap .footer_social .social_wrap{display: flex;flex-direction: column;flex-wrap: wrap;}

.footer_wrap .footer_social .social_wrap .social{display: flex;align-items: center;margin-bottom: 1rem;gap: 1.5rem;}
.footer_wrap .footer_social .social_wrap .social a{display: flex;width: 2rem;height: 2rem;background-position: center center;background-repeat: no-repeat;}
.footer_wrap .footer_social .social_wrap .social a.sns_naver{background-image: url(../../../../../images/com/raraclass/www/user/sns_naver.png);background-size: 2rem auto;}
.footer_wrap .footer_social .social_wrap .social a.sns_instagram{background-image: url(../../../../../images/com/raraclass/www/user/sns_instagram.png);background-size: 2rem auto;}
.footer_wrap .footer_social .social_wrap .social a.sns_facebook{background-image: url(../../../../../images/com/raraclass/www/user/sns_facebook.png);background-size: auto 2rem;width: 1.5rem;}
.footer_wrap .footer_social .social_wrap .social a.sns_youtube{background-image: url(../../../../../images/com/raraclass/www/user/sns_youtube.png);background-size: 2rem auto;}

.footer_wrap .footer_social .social_wrap .copyright{font-size: 1.1rem; color: rgba(255,255,255,0.4); line-height: 1.5;}

.footer_wrap .footer_social .info_terms{display: flex; justify-content: flex-end; font-size: 1.3rem;}
.footer_wrap .footer_social .info_terms a{text-decoration: underline; margin-left: 2rem;position: relative; color: #868686;}
.footer_wrap .footer_social .info_terms a::before{content: ''; width: 0.2rem; height: 0.2rem; border-radius: 4rem; background-color: #cfcfcf; position: absolute; top: 50%; left: -1rem; transform: translateY(-50%);}
.footer_wrap .footer_social .info_terms a:first-of-type{margin-left: 0;}
.footer_wrap .footer_social .info_terms a:first-of-type::before{display: none;}
.footer_wrap .footer_social .info_terms a:hover{color: #fff;}

.content_wrap{display: block; width: 100%;}

/* PC 마이페이지 버튼 숨기기 */
.pc_hidden {display: none;}

@media screen and (max-width:1264px) {
	.header_wrap .top_wrap{display: flex; justify-content: space-between; flex-grow: 1; align-items: center;padding-bottom: 1rem;}
	.header_wrap .top_wrap .top_btn{display: flex; align-items: center;}
	.header_wrap .top_wrap .top_btn button{width: 2rem;height: 2rem;display: flex;font-size: 2rem;margin-left: 1.5rem;color: #858585;}
	
	.scroll_menu{display: flex;width: 100%;margin-top: 0.15rem;padding: 0 2rem;}
	.scroll_menu ul{display: block;gap: 1rem;border-top: solid 1px #f1f1f1;width: 100%;white-space: nowrap;overflow: hidden;overflow-x: scroll;padding: 0 2rem; text-align: center;}
	.scroll_menu ul{-ms-overflow-style: none; scrollbar-width: none;}
	.scroll_menu ul::-webkit-scrollbar {display: none;}
	.scroll_menu ul li{display: inline-block; margin-left: 1rem;}
	.scroll_menu ul li:first-of-type{margin-left: 0;}
	.scroll_menu ul li a{font-size: 1.2rem;padding: 1rem;font-weight: 500;color: #555;display: flex;}
	.scroll_menu ul li a.active{color:#e6b35a; font-weight: 700;}
	
	.header_wrap .nav_wrap{position: fixed;top: 0;left: -200vw;width: 85vw;min-width: 250px;max-width: 352px;height: 100%;background: #fff;align-items: flex-start;z-index: 1000;flex-direction: column;padding: 0;justify-content: unset;box-shadow: 5px 5px 5px rgb(0 0 0 / 30%);gap: 0;}
	.header_wrap .nav_wrap:before{position: fixed;top:0;left: -200vw;width: 100%;height: 100%;content: '';z-index: -1;background: rgba(0,0,0,.3);}
	.header_wrap .nav_wrap.on{left: 0;}
	.header_wrap .nav_wrap.on:before{left: 0;}
	.header_wrap .top_info{flex-direction: column;background-color: rgb(255, 204, 63);z-index: 1;width: 100%;}
	.header_wrap .top_info .user_info{display: flex;flex-grow: 1;width: 100%;justify-content: center;padding: 2rem 0;flex-direction: column;text-align: center;}
	.header_wrap .top_info .user_info .user_img{display: flex;width: 10rem;height: 10rem;margin: 0 auto;border-radius: 5rem;overflow: hidden;}
	.header_wrap .top_info .user_info .user_img img {width: 100%; height: 100%; object-fit: cover;}
	.header_wrap .top_info .user_info .user_name{color: #fff; font-weight: 700; margin-top: 2rem;}
	.header_wrap .top_info .menu_close{position: absolute;display: block;top: 2rem;right: -3.9rem;width: 4rem;height: 4rem;z-index: 9999;font-size: 2.4rem;color: #fff;background-color: rgb(255, 204, 63);border-radius: 0 4px 4px 0;box-shadow: 5px 5px 5px rgb(0 0 0 / 30%);}
	.header_wrap .top_info .info_menu{flex-wrap: wrap;width: 100%;min-width: 250px;max-width: 350px;background-color: rgb(255 187 0);}
	.header_wrap .top_info .info{flex-direction: column;}

	.header_wrap .top_info .info_menu a{display: flex;align-items: center;justify-content: center;padding: 1em;margin: 0;color: #fff;font-weight: 700;border-left: solid 1px rgb(255, 204, 63);border-top: solid 1px rgb(255, 204, 63);width: 25%;}
	.header_wrap .top_info .info_menu a:before{display: none;}
	.header_wrap .top_search_wrap{position: fixed;top: 2.6rem;right: 200vw;z-index: 100;transition: right .2s ease;}
	.header_wrap .top_search_wrap.on{right: 8.5rem;flex-grow: 1;}
	.header_wrap .top_search{width: 70vw;max-width: 500px;min-width: 215px;margin: 0;background-color: #fff;box-sizing: border-box;box-shadow: 5px 5px 5px rgba(0,0,0,.3);}
	
	.header_wrap .nav .menu{flex-grow: 1; width: 100%; height: 100%; background-color: #fff;}
	.header_wrap .nav .menu ul{flex-direction: column;align-items: flex-start;flex-grow: 1;padding: 1rem 1.5rem;gap: 0;}
	.header_wrap .nav .menu ul li{width: 100%;margin: 0;border-bottom: solid 1px #f5f5f5;}
	.header_wrap .nav .menu ul li a{width: 100%;padding: 1rem;display: flex;box-sizing: border-box;}
	
	.footer_wrap{padding: 4rem 2rem;}
	.footer_wrap .footer_site{flex-direction: column;}
	
	.footer_wrap .footer_top {flex-direction: column; gap: 4rem;}
	
	.footer_wrap .footer_top .link_wrap{justify-content: flex-start;flex-direction: column;gap: 1.5rem;}
	.footer_wrap .footer_top .link_wrap a{margin: 0;font-size: 1.6rem; font-weight: 500;}
	
	.footer_wrap .footer_info .info_text{margin-top: 4rem;}
	.footer_wrap .footer_info .info_text h3 {justify-content: flex-start; font-size: 1.2rem; font-weight: 500; margin-bottom: 0;}
	.footer_wrap .footer_info .info_text .text_wrap{justify-content: flex-start;flex-direction: column; gap: 0.5rem;}
	.footer_wrap .footer_info .info_text .text_wrap span::before{display: none;}
	.footer_wrap .footer_info .info_text .text_wrap span{margin-left: 0;}
	.footer_wrap .footer_info .info_text .text_wrap + .text_wrap span{position: relative; padding-left: 5.5rem;}
	.footer_wrap .footer_info .info_text .text_wrap + .text_wrap span b{position: absolute;top:0;left:0;}
	.footer_wrap .footer_info .info_text .text_wrap + .text_wrap span span{display: block;padding:0;}
	
	.footer_wrap .footer_social{align-items: flex-start;flex-direction: column-reverse;gap: 2rem;}
	.footer_wrap .footer_social .info_terms{flex-direction: column;margin: 2rem 0;gap: 1rem;}
	.footer_wrap .footer_social .info_terms a{font-size: 1.4rem;margin: 0;}
	.footer_wrap .footer_social .info_terms a::before{display: none;}
	.footer_wrap .footer_social .social_wrap .social a{width: 2.2rem;height: 2.2rem;}
	.footer_wrap .footer_social .social_wrap .social a.sns_naver{background-size: 2.2rem auto;}
	.footer_wrap .footer_social .social_wrap .social a.sns_instagram{background-size: 2.2rem auto;}
	.footer_wrap .footer_social .social_wrap .social a.sns_facebook{background-size: auto 2.2rem;}
	.footer_wrap .footer_social .social_wrap .social a.sns_youtube{background-size: 2.2rem auto;}
	
	/* 모바일 메뉴 추가 */
	.header_wrap .top_info{position: absolute; top: 0; left: 0;}
	.header_wrap .nav{overflow-y: auto; background-color: #fff;}
	.header_wrap .nav .menu ul li a.pc_menu{display: none;}
	.header_wrap .nav .menu ul li a.mo_menu{display: flex;}
	.header_wrap .nav .menu ul li a:hover{color: #000;}
	.header_wrap .nav .menu ul li a.on{color: #ff7400 !important;}
	.header_wrap .nav .menu ul li a.on + ul{display: flex;}
	.header_wrap .nav .menu ul li ul{padding: 0; padding-left: 1.5rem;}
	.header_wrap .nav .menu ul li li{position: relative; border-bottom: none;}
	.header_wrap .nav .menu ul li li a{padding-left: 1.5rem;}
	.header_wrap .nav .menu ul li li a:before{content: ''; position: absolute; left: 0; top: 1.5rem; width: 0.7rem; height: 2px; background-color: #000; transform: translateY(50%); border-radius: 10rem;}
	.header_wrap .nav .menu ul li li a:after{content: ''; position: absolute; left: 0.25rem; top: 1rem; width: 2px; height: 0.7rem; background-color: #000; transform: translateY(50%); border-radius: 10rem;}
	.header_wrap .nav .menu ul li li a:hover{color: #000;}
	.header_wrap .nav .menu ul li li li a, .header_wrap .nav .menu ul li li li a:hover{color: rgb(124, 124, 124);}
	.header_wrap .nav .menu ul li li li a:before, .header_wrap .nav .menu ul li li li a:after{background-color: rgb(124, 124, 124);}
	.header_wrap .nav .menu ul li li a.on:before, .header_wrap .nav .menu ul li li li a.on:before,
	.header_wrap .nav .menu ul li li a.on:after, .header_wrap .nav .menu ul li li li a.on:after{background-color: #ff7400;}
	.header_wrap .nav .menu ul li li a.act:after, .header_wrap .nav .menu ul li li li a:after{display:none;}
	.header_wrap .nav .menu ul li li a.non:before, .header_wrap .nav .menu ul li li a.non:after{display: none;}
	
	/* 모바일 마이페이지 버튼 추가 */
	.pc_hidden {display: block;}
}

@media screen and (max-width:767px) {
	.footer_wrap .footer_top .footer_enterprise {width: 100%;}
	.footer_wrap .footer_top .footer_enterprise span{height: auto; width: 25%;}
}

/* 로딩 */
.loading_dim{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3); z-index: 9998;}
.loading_wrap{z-index: 9999; display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:#ffffff; border-radius:10px; overflow: hidden; display: inline-block; box-sizing:border-box; padding:20px;  box-shadow: 3px 3px 3px 0 rgba(0,0,0,.3);}

/* 탑버튼 */
.move_top, .ch_talk_btn {display: flex;position:fixed;bottom: 9rem;right: 3rem;z-index:999;outline:none;background-color: rgba(255,255,255,0.7);color:#333;cursor:pointer;font-size: 1.2rem;font-weight: 700;border-radius: 5rem;flex-direction: column;justify-content: center;align-items: center;gap: 0.5rem;width: 100%;height: 100%;max-width: 5rem;max-height: 5rem;box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1);}
.move_top span{font-size: 1.1rem; font-weight: 700;}
.ch_talk_btn{bottom:3rem;background: url(../../../../../images/com/raraclass/www/user/chtalk.png) left center no-repeat;background-size: auto 100%; border-radius: 0; box-shadow: none; opacity: 0.7;}
.ch_talk_btn:hover{opacity: 1;}