@charset "utf-8";

/* Typhographic */
.en{letter-spacing:0;}
h1,h2,h3,h4,h5{font-weight:600;color:#000;}
h2{font-size:44px;}
h3{font-size:26px;}
h4{font-size:18px;}
.c_pr{color:#04b3bc;}
.c_rd{color:#ff3300;}
.c_bk{color:#333;}
.c_gray{color:#666;}
.dot_list li{position:relative;margin-top:12px;padding-left:8px;font-size:16px;font-weight:300;color:#666;}
.dot_list li:first-child{margin-top:25px;}
.dot_list li::after{content:'';position:absolute;top:5px;left:0;width:3px;height:3px;background-color:#999}
.dot_list li.no_dot{padding-left:0;}
.dot_list li.no_dot::after{content:none;}
.dot_list li.star::after{content:'*';top:2px;left:-2px;color:#999;width:auto;height:auto;background:none;}
.dot_list li .bar{color:#ddd;margin:0 5px;}
.txt_hide{overflow:hidden;text-indent:-9999px}

/* layout */
#tv{overflow-x:hidden}
#tv.onSrch::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color: rgba(0,0,0,.5);z-index:1;}
.container{position:relative;width:100%;max-width:1360px;padding:0 40px;margin:0 auto;}
main{position:relative;z-index:1}
@media screen and (max-width: 1380px){ 
    .container{padding:0 30px;}
}
@media screen and (max-width: 860px){ 
    .container{padding:0 20px;}
}

/* button */
.btn_more{display:flex;gap:10px;font-size:15px;font-weight:500;color:#000;align-items:center;}
.btn_more .icon{display:block;width:25px;height:25px;border-radius:25px;background: #f8f8f8 url(../../images/common/btn_link.png) no-repeat 50% 50%;}

/* header */
.tv_header{position:relative;padding:35px 0;background-color: #fff;}
.onAllmenu .tv_header,
.onSrch .tv_header{z-index:100}
.tv_header .header{display:flex;align-items:center;}
.tv_header .logo a{display:block;width:216px;height:50px;background: url(../../images/logo.png) no-repeat 0 0;}
.tv_header .btn_allmenu{width:50px;height:50px;margin-left:37px;background: url(../../images/common/btn_all.png) no-repeat 50% 50%;}
.onAllmenu .tv_header .btn_allmenu{background-image: url(../../images/common/btn_close.png)}
.tv_header .gnb{margin-left:30px;}
.tv_header .gnb > ul{display:flex;gap:64px;align-items:center}
.tv_header .gnb .gmenu{position:relative; display: flex;justify-content: center;}
.tv_header .gnb .gmenu > a{display:block;padding:15px 0;font-size:18px;font-weight:500;color:#000} 
.tv_header .gnb .submenu{position:absolute;top:25px;left:auto;display:flex;flex-direction:column;gap:20px;padding:30px 35px;background-color:#fff;border:1px solid #000;;border-radius:15px;opacity:0;z-index:-1;}
.tv_header .gnb .submenu a{display:block;font-size:16px;text-align:center;white-space:nowrap;}
.tv_header .gnb .active .submenu{top:48px;opacity:1;z-index:10;transition:.5s;}
.tv_header .btn_srch{width:50px;height:50px;margin-left:auto;background: url(../../images/common/btn_srch.png) no-repeat 50% 50%;}
.onSrch .tv_header .btn_srch{background-image: url(../../images/common/btn_close.png) ;}
.tv_header .btn_login{display:flex;height:42px;padding:0 25px;margin-left:25px;border:1px solid #ddd;border-radius:25px;align-items:center;font-size:15px;font-weight:500;}
.tv_header .btn_login i{display:block;width:19px;height:20px;margin-right:13px;background: url(../../images/common/ico_mem.png) no-repeat 0 0;}

.allmenu_wrap{position:absolute;top:20px;left:40px;width:calc(100% - 80px);display:flex;padding:40px 45px;background-color: #fff;border:1px solid #000;border-radius:15px;gap:50px;opacity:0;z-index:-1;}
.allmenu_wrap ul{display:flex;flex-direction:column;width:25%;gap:15px;}
.allmenu_wrap ul:not(:last-child){border-right:1px solid #ddd;}
.allmenu_wrap ul li a{font-size:15px;color:#333;}
.allmenu_wrap ul li:first-child{margin-bottom:10px;}
.allmenu_wrap ul li:first-child a{font-size:18px;font-weight:500;}
.allmenu_wrap .login_box{display:none;}
.allmenu_wrap .login_box p{font-size:15px;color:#999;}
.allmenu_wrap .login_box p span{font-weight:500;color:#333}
.allmenu_wrap .login_box .btn_login{display:flex;margin-left:auto;background-color: #04b3bc;border-radius:8px;font-size:15px;font-weight:500;color:#fff;justify-content: center;align-items:center;}
.onAllmenu .allmenu_wrap{top:70px;opacity:1;z-index:1;transition:.5s;}

.srch_box{display:none;position:absolute;top:86px;left:0;width:100%;padding:50px 0;background-color: #fff;}
.onSrch .srch_box{display:block;}
.srch_box .container{display:flex;justify-content: center;align-items:center;gap:20px;}
.srch_box .input{width:60%;height:70px;padding:20px 30px;border:1px solid #000;border-radius:35px;font-size:15px;}
.srch_box .srch{width:70px;height:70px;border-radius:100%;background:#000 url(../../images/common/btn_srch_wh.png) no-repeat 50% 50%;}


.footer_menu_wrap{background-color: #262626;}
.footer_menu_wrap .footer_menu{display:flex;gap:20px;padding:25px 0;align-items:center;}
.footer_menu_wrap .footer_menu a{font-size:16px;color:rgba(255,255,255,.65)}
.footer_menu_wrap .footer_menu a.menu_light{color:#fff}
.footer_menu_wrap .footer_menu .dot{width:4px;height:4px;background-color: rgba(255,255,255,.65);border-radius:4px;}
.footer .footer_inner{display:flex;gap:40px;padding:45px 0 50px;align-items:center;}
.footer .footer_brand{width:99px;height:57px;background: url(../../images/logo_foot.png) no-repeat 50% 50%;}
.footer .footer_info_wrap{width:calc(100% - 139px)}
.footer .footer_info{display:flex;flex-wrap:wrap}
.footer .footer_info > div{width:100%;margin-top:5px;}
.footer .footer_info > div:first-child{margin-top:0;margin-bottom:10px}
.footer .footer_info .row{display:flex;flex-wrap:wrap}
.footer .footer_info span{display:block;padding-right:10px;margin-right:10px;font-size:15px;color:#7C7C7C;border-right:1px solid rgba(0,0,0,.2)}
.footer .footer_info span:last-child{margin-right:0;padding-right:0;border-right:none}
.footer .footer_meta{margin-top:10px;font-size:14px;font-weight:300;color:#7c7c7c}
.footer .footer_meta span{font-weight:400;color:#000}

.pagination{text-align:center}
.paging{display:inline-block;}
.paging .btn_p,
.paging > a{min-width:30px;height:30px;padding:0;text-decoration:none;margin:0 2px;line-height:40px;font-size:16px;font-weight:400;color:#333;text-align:center;line-height: 30px;float:left;cursor:pointer;transition: .3s;}

.paging > a.on{background-color: #04b3bc;border-radius: 100%;font-weight:600;color:#fff;}
.paging .btn_p{position:relative;margin:0 0 0 -1px;}
.paging .btn_p > a{position:absolute;top:0;left:0;width:100%;height:100%;}
.paging .p_first{background:url(../../images/common/paging_first.png) no-repeat 50% 50%;}
.paging .p_prev{margin-right:5px;background:url(../../images/common/paging_prev.png) no-repeat 50% 50%;}
.paging .p_next{margin-left:5px;background:url(../../images/common/paging_next.png) no-repeat 50% 50%;}
.paging .p_last{background:url(../../images/common/paging_last.png) no-repeat 50% 50%;}

/* contents */
.star{position:relative;display:block;width:124px;height:24px;background: url(../../images/common/star_bg.png) no-repeat 0 0;}
.star::after{content:'5';position:absolute;top:0;left:0;width:100%;height:100%;background:url(../../images/common/star.png) no-repeat 0 0;text-indent:-9999px;overflow: hidden;}
.star.s9::after{content:'4.5';width:112.5px}
.star.s8::after{content:'4';width:100px}
.star.s7::after{content:'3.5';width:88px}
.star.s6::after{content:'3';width:75px}
.star.s5::after{content:'2.5';width:63px}
.star.s4::after{content:'2';width:50px}
.star.s3::after{content:'1.5';width:38.5px}
.star.s2::after{content:'1';width:23px}
.star.s1::after{content:'.5';width:12px}

.badge{position:absolute;top:0;left:0;display:flex;justify-content: center;align-items:center;color:#fff;}
.badge.best{width:189px;height:80px;background: url(../../images/common/best.png);font-size: 17px;font-weight:500;}
.badge.recommended{width:130px;height:36px;background-color:#4C66CE;border-radius:16px 0 16px 0;font-size: 15px;font-weight:500;z-index:10}

.hash{display:inline-block;padding:10px 25px;background-color: #F4FBFB;border:1px solid #9CD4D8;border-radius:30px;font-size:15px;font-weight:300;color:#000}

@media screen and (max-width: 1380px){
    .allmenu_wrap{left:30px;width:calc(100% - 60px)}
    .tv_header .gnb > ul{gap:50px;}
    .tv_header .gnb .gmenu > a{font-size:17px;}
    .tv_header .gnb .submenu{padding:30px;}
    .tv_header .gnb .submenu a{font-size:15px;}
    
}
@media screen and (max-width: 1180px){
    h3{font-size:21px;}
    h4{font-size:17px;}
    .tv_header{padding:25px 0}
    .tv_header .btn_login{order:1;}
    .tv_header .gnb{display:none}
    .tv_header .btn_allmenu{order:1;margin-left:10px;}
    .allmenu_wrap{left:25px;width:calc(100% - 50px)}
    .onAllmenu .allmenu_wrap{padding:40px 30px;}
    .srch_box{top:70px;padding:30px 0;}
    .srch_box .input{height:60px;padding:15px 30px;}
    .srch_box .srch{width:60px;height:60px;}
    .footer .footer_inner{padding:30px 0 40px;gap:20px;flex-direction: column;align-items: flex-start;}
    .footer .footer_info{flex-direction: column;font-size:14px;}
    .footer .footer_info > div{gap:10px;margin-top:0;}
    .footer .footer_info span{padding-right:0;margin-right:0;border-right:none}
    .footer .footer_meta{margin-top:20px;}

}
@media screen and (max-width: 860px){
    h3{font-size:19px;}
    h4{font-size:16px;}

    .btn_more{font-size:14px;}
    .hash{padding:8px 20px;font-size:14px;}

    .tv_header{padding:20px 0}
    .tv_header .logo a{width:179px;height:40px;background-size: 100% auto;}
    .tv_header .btn_login{display:none;}
    .tv_header .btn_allmenu{margin-left:0;}
    .allmenu_wrap{position:fixed;left:0;right:0;;top:70px;bottom:0;display:block;width:100%;padding:20px;border:none;overflow-y:auto;overflow-x:hidden}
    .onAllmenu .tv_header{position:fixed;width:100%;}
    .onAllmenu .allmenu_wrap{padding:20px;}
    .allmenu_wrap .login_box{display:flex;width:calc(100% + 40px);margin-left:-20px;padding:0 20px 20px;border-bottom:4px solid #e8e8e8;align-items:center;}
    .allmenu_wrap .login_box .btn_login{height:40px;border:none}
    .allmenu_wrap ul{width:100%;padding:20px 0;border-bottom:1px solid #eee}
    .allmenu_wrap ul:not(:last-child){border-right:none}
    .allmenu_wrap ul li:first-child{margin-bottom:0}
    .allmenu_wrap ul li:first-child a{font-size:17px}

    .star{width:100px;height:20px;background: url(../../images/common/star_bg.png) no-repeat 0 0 / 100px auto;}
    .star::after{background:url(../../images/common/star.png) no-repeat 0 0 / 100px auto;}
    .star.s9::after{width:90.1px}
    .star.s8::after{width:80px}
    .star.s7::after{width:70.5px}
    .star.s6::after{width:60px}
    .star.s5::after{width:50.5px}
    .star.s4::after{width:40px}
    .star.s3::after{width:30.8px}
    .star.s2::after{width:18.4px}
    .star.s1::after{;width:9.6px}

    .srch_box .container{gap:10px;}
    .srch_box .input{width:calc(100% - 60px);height:50px;padding:15px 20px;}
    .srch_box .srch{width:50px;height:50px;}

    .footer .footer_info_wrap{width:100%}
    .footer_menu_wrap .footer_menu{padding:20px 0;flex-wrap:wrap}
    .footer_menu_wrap .footer_menu a{font-size:15px;}
    .footer{padding:30px 0 60px;}
    .footer .footer_info span{font-size:14px;}
    .footer .footer_meta{font-size:13px;}

    .badge.recommended{height:34px;font-size:14px;}



}
@media screen and (max-width: 640px){
    h3{font-size:18px;}
    h4{font-size:15px;}

    .hash{padding:5px 15px;font-size:13px;}
    .badge.recommended{width:120px;height:32px;font-size:13px;}
}
@media screen and (max-width: 480px){
    h3{font-size:17px;}
    h4{font-size:14px;}
    .tv_header{padding:10px 0}
    .tv_header .logo a{width:150px;height:33px;}
    .onAllmenu .allmenu_wrap{transition:none}
    .tv_header .btn_allmenu,
    .tv_header .btn_srch{width:40px;height:40px;}
    .allmenu_wrap,
    .onAllmenu .allmenu_wrap{top:55px}
    .srch_box{top:55px;padding:20px 0;}
    .srch_box .input{height:40px;padding:10px 20px}
    .srch_box .srch{width:40px;height:40px;background-size: 50% auto;}

    .footer .footer_brand{width:80px;height:54px;background-size: 100% auto;}
    .footer_menu_wrap .footer_menu{gap:10px;}
    .footer_menu_wrap .footer_menu a{font-size:14px}
    .footer_menu_wrap .footer_menu .dot{width:3px;height:3px;}

    .footer .footer_inner{padding:20px 0 35px;gap:10px}
    .footer .footer_info{gap:5px;}
    .footer .footer_info span{font-size:13px;}
    .footer .footer_meta{font-size:12px;}
}
@media screen and (max-width: 375px){
    h3{font-size:16px;}
    h4{font-size:13px;}
    .tv_header .logo a{width:130px;height:28px;}
    .footer_menu_wrap .footer_menu{gap:5px;}
    .badge.recommended{font-size:12px;}
}






@media (hover: hover) and (pointer: fine) {
    .tv_header .gnb .gmenu > a:hover,
    .tv_header .gnb .submenu a:hover,
    .allmenu_wrap ul li a:hover{color:#04b3bc}
    .tv_header .btn_login:hover{border-color:#000;background-color: #000;color:#fff;;}
    .tv_header .btn_login:hover i{background-image: url(../../images/common/ico_mem_wh.png);}
    .srch_box .srch:hover{background-color: #04b3bc;}

    .btn_more:hover{color:#04b3bc}
    .btn_more:hover .icon{background: #04b3bc url(../../images/common/btn_link_wh.png) no-repeat 50% 50%;}
    .footer_menu_wrap .footer_menu a:hover{color:#04b3bc}
    
    .paging > a:hover{color: #04b3bc;}
    .paging > a.on:hover{background-color:#15d1db;color:#fff;}
}