@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; min-width: 1903px;}
body.on{overflow: hidden; touch-action:none;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1.6rem; }
.inner {	width:1360px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.point-inner {	width:1000px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1280px) {	
    body{min-width: 1280px;}
    .inner {width:94%;}
    .s-inner {width:94%;}
}
@media all and (max-width:999px){
	.point-inner{width: 94%;}
}
@media all and (max-width:976px){
    body{width: 100%; min-width: 0;}
}


/* header */
#header{}
#header .h_top{border-bottom: 1px solid #e4e4e4;}
#header .h_top .inner{display: flex; justify-content: space-between;}
#header .h_top .inner .l_cont{display: flex;}
#header .h_top .inner .l_cont li{margin-right: 25px;}
#header .h_top .inner .l_cont li a{font-size: 1.5rem; font-weight: 500; color: #888888; display:block; line-height:44px;}
#header .h_top .inner .r_cont{display: flex;}
#header .h_top .inner .r_cont > li{margin-left: 22px;}
#header .h_top .inner .r_cont > li a{font-size: 1.5rem; font-weight: 500; color: #888888; display:block; line-height:44px;}
#header .h_top .inner .r_cont > .list_box{position: relative; width: 122px; margin-left: 22px; z-index: 99;}
#header .h_top .inner .r_cont > .list_box div{color: #fff; padding: 0 24px; cursor: pointer; background: #6c6c6c url(/images/common/list_arrow.png) no-repeat right 20px center;}
#header .h_top .inner .r_cont > .list_box div span{font-size: 1.5rem; font-weight: 500; line-height: 44px;}
#header .h_top .inner .r_cont > .list_box .list{position: absolute;background: #fff; border: 1px solid #ddd; width: 100%; display: none;}
#header .h_top .inner .r_cont > .list_box .list li{text-align: center;border-bottom: 1px solid #ddd;}
#header .h_top .inner .r_cont > .list_box .list li:last-child{border-bottom: 0;}
#header .h_top .inner .r_cont > .list_box .list li a{display: block; width: 100%; line-height: 30px; font-size: 1.5rem; font-weight: 500; color: #333; transform: rotate(0.1deg);}
#header .h_mid{height: 120px; border-bottom: 1px solid #e4e4e4;}
#header .h_mid .inner{height: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .h_mid .inner .l_cont{display: flex;}
#header .h_mid .inner .l_cont li{text-align: center; margin-right: 30px;}
#header .h_mid .inner .l_cont li a{display: block; width: 100%;}
#header .h_mid .inner .l_cont li a img{max-width: 100%; margin-right: -7px;}
#header .h_mid .inner .l_cont li a p{font-size: 1.6rem; color: #222222; font-weight: 500; margin-top: 10px;}
#header .h_mid .inner #logo{position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);}
#header .h_mid .inner #logo a{display: block; width: 218px; height: 60px; background: url(/images/common/logo.png) no-repeat center center / cover;}
#header .h_mid .inner .r_cont{position: relative;}
@keyframes opacityrank {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
#header .h_mid .inner .rank{position: absolute; top: 50%; transform: translateY(-50%); right: 280px; width: 100%; max-width: 200px; z-index: 9; animation: opacityrank .5s .5s forwards; opacity: 0;}
#header .h_mid .inner .r_cont input{width: 250px; height: 50px; padding: 15px 20px; padding-right: 60px; font-family: 'Pretendard', sans-serif; font-size: 1.5rem; color: #a7b1c4; border: 0px; background-color: #f6f7f9; border-radius: 40px; outline: none;}
#header .h_mid .inner .r_cont input::placeholder{font-family: 'Pretendard', sans-serif; font-size: 1.5rem; color: #a7b1c4;}
#header .h_mid .inner .r_cont button#sch_submit{width: 34px; height: 34px; background: url(/images/common/search_icon.png); display: block; position: absolute; z-index: 2; right: 10px; top: 50%; transform:translateY(-50%);}
#header .h_mid .inner .rr_cont{display: none;}
#header .h_mid .inner .rr_cont .search > a{width: 34px; height: 34px; background: url(/images/common/search_icon.png); display: block; position: absolute; z-index: 2; right: 42px; top: 50%; transform:translateY(-50%);}
#header .h_mid .inner .rr_cont .search button{width: 34px; height: 34px; background: url(/images/common/search_icon.png); display: block; position: absolute; z-index: 2; right: 10px; top: 50%; transform:translateY(-50%);}
#header .h_mid .inner .rr_cont .search .search_box{display: none;}
#header .h_mid .inner .rr_cont .menutoggle{position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer;}
#header .h_mid .inner .rr_cont .menutoggle span{font-size: 3rem;}
#header .h_bot{border-bottom: 1px solid #e4e4e4;}
#header .h_bot .inner{height: 100%;}
#header .h_bot .inner .menutoggle{position: absolute; left: 16px; top: 50%; transform: translateY(-50%); cursor: pointer;}
#header .h_bot .inner .menutoggle span{font-size: 3rem;}
#header .h_bot .inner .menu{}
#header .h_bot .inner .menu .menu1_box{display: flex; justify-content: center;}
#header .h_bot .inner .menu .menu1_box .menu1{margin: 0 20px;}
#header .h_bot .inner .menu .menu1_box .menu1 > div{}
#header .h_bot .inner .menu .menu1_box .menu1 > div > a{display: block; line-height: 56px; font-size: 1.8rem; font-weight: 500; color: #222222; font-family: 'Cafe24Dangdanghae';}

@media all and (max-width:976px){
	#header .h_mid .inner .rank{right: 90px; max-width: 160px}
    #header .h_top{display: none;}
    #header .h_bot{display: none;}
    #header .h_mid{height: 70px;}
    #header .h_mid .inner .l_cont{display: none;}
    #header .h_mid .inner #logo{left: 0; transform: translate(0, -50%)}
    #header .h_mid .inner #logo a{width: 150px; background-size: 100%;}
    #header .h_mid .inner .r_cont{display: none;}
    #header .h_mid .inner .rr_cont{display: block;}
}
@media all and (max-width:640px){
    #header .h_mid{height: 60px;}
    #header .h_mid .inner #logo a{width: 130px;}
	#header .h_mid .inner .rank{max-width: 100px;}
}

#footer{}
#footer .top{background-color: #f6f7f9;  height: 70px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-top: 1px solid #dedede;}
#footer .top li{margin: 0 24px;}
#footer .top li a{font-size: 1.7rem; font-weight: 500; color: #a1a7b3; display: block;} 
#footer .bottom{background-color: #323742; text-align: center; padding: 60px 0;}
#footer .bottom .f_logo{}
#footer .bottom .f_logo img{max-width: 100%; opacity: 0.4; filter: grayscale(1) invert(1) brightness(3);}
#footer .bottom .info{margin-top: 30px;}
#footer .bottom .info span{display: inline-block; font-size: 1.5rem; font-weight: 500; color: #656a74; margin: 0 10px;}
#footer .bottom .info .txt{width: 60%; display: inline-block; font-size: 1.3rem; font-weight: 500; color: #656a74; margin: 0 10px;}
#footer .bottom .copy{font-size: 1.5rem; color: #656a74; font-weight: 500; opacity: 0.7; margin-top: 15px;}

@media all and (max-width:976px){
    #footer .top li{margin: 0 14px;}
    #footer .top li a{ }
    #footer .bottom{padding: 40px 0;}
    #footer .bottom .f_logo img{max-width: 170px;}
    #footer .bottom .info{margin-top: 20px;}
    #footer .bottom .info span{line-height: 1.8em;}
    #footer .bottom .info .txt{width: 90%;}
    #footer .bottom .copy{margin-top: 10px;}
}
@media all and (max-width:640px){
    #footer .top{flex-wrap: wrap; gap: 6px 0; padding:1em 0; height: auto;}
	#header .h_mid .inner .rank{display: none;}
    #footer .top li{margin: 0 4px;}
    #footer .top li a{font-size: 1.6rem;}
}

.mo_menu{position: fixed; left: -100%; width: 60%; top: 0; height: 100%; z-index: 999; background-color: #fff; max-width: 360px; min-width: 360px; transition: .3s ease-in-out; min-height: 70%; overflow: auto}
.mo_menu.on{left: 0;}
.mo_menu .top_box{background: linear-gradient(45deg, #4264d9, #2cacae); position: relative; padding: 30px 20px;}
.mo_menu .top_box .top{}
.mo_menu .top_box .top .flex{display: flex; justify-content: space-between; align-items: center;}
.mo_menu .top_box .top .flex .l_cont{display: flex;}
.mo_menu .top_box .top .flex .l_cont li{margin-right: 15px;}
.mo_menu .top_box .top .flex .l_cont li a{color: #fff; font-size: 1.6rem; font-weight: 600;}
.mo_menu .top_box .top .flex .r_cont{}
.mo_menu .top_box .top .flex .r_cont a{}
.mo_menu .top_box .top .flex .r_cont a span{color: #fff;}
.mo_menu .top_box .top .search{ margin-top: 20px;}
.mo_menu .top_box .top .search .search_box{position: relative;}
.mo_menu .top_box .top .search .search_box input{width: 100%; border: 0px; font-size: 1.5rem; padding: 15px 20px; border-radius: 30px; outline: none; font-family: 'Pretendard';}
.mo_menu .top_box .top .search .search_box input::placeholder{font-size: 1.5rem; color: #999;  font-family: 'Pretendard';}
.mo_menu .top_box .top .search .search_box button{width: 34px; height: 34px; background: url(/images/common/search_icon.png) no-repeat; display: block; position: absolute; z-index: 2; right: 10px; top: 50%; transform:translateY(-50%);}
.mo_menu .mid_box{}
.mo_menu .mid_box ul{display: flex; border-bottom: 1px solid #ddd;}
.mo_menu .mid_box ul li{ width: 100%; text-align: center;border-right: 1px solid #ddd;}
.mo_menu .mid_box ul li:last-child{border-right: 0;}
.mo_menu .mid_box ul li a{display: block; width: 100%; height: 100%; padding: 10px;}
.mo_menu .mid_box ul li a img{margin-right: -8px;}
.mo_menu .mid_box ul li a p{margin-top: 8px; font-size: 1.4rem; color: #555; font-weight: 500;}
.mo_menu .bot_box{border-top: 16px solid #eee;}
.mo_menu .bot_box .tabs{display: flex; background-color: #f3f3f3;}
.mo_menu .bot_box .tabs li{background-color: #f3f3f3; width: 50%; cursor: pointer; line-height: 42px; text-align: center; font-size: 1.6rem; font-weight: 400;}
.mo_menu .bot_box .tabs li.on{background-color: #fff; color: #000;}
.mo_menu .bot_box .tabcontent1{display: none;}
.mo_menu .bot_box .tabcontent1.on{display: block;}
.mo_menu .bot_box .tabcontent1 > ul{overflow: auto}
.mo_menu .bot_box .tabcontent1 > ul > li{}
.mo_menu .bot_box .tabcontent1 > ul > li > div{border-bottom: 1px solid #eee; cursor: pointer}
.mo_menu .bot_box .tabcontent1 > ul > li > div a{font-size: 1.6rem; font-weight: 600; display: block; width: 100%; line-height: 48px; padding: 0 20px;}
.mo_menu .bot_box .tabcontent1 > ul > li > div a.active{pointer-events: none; background: #fff url('/images/common/select_arrow.png') no-repeat 98% 50% / 20px;}
.mo_menu .bot_box .tabcontent1 > ul > li > ul{display: none;}
.mo_menu .bot_box .tabcontent1 > ul > li > ul > li{background-color: #f5f5f3; border-bottom: 1px solid #dedede;}
.mo_menu .bot_box .tabcontent1 > ul > li > ul > li > a{display: block; width: 100%; line-height: 40px; padding: 0 30px; font-size: 1.6rem;}

.mo_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: -22; opacity: 0; transition: .3s ease-in-out;}
.mo_bg.on{z-index: 998; opacity: 1;}

@media all and (max-width:976px){
    .mo_menu{left: auto; right:-100%;}
    .mo_menu.on{left: auto; right: 0;}
}