@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body { font-family: "Noto Sans KR","Roboto", sans-serif;}
#ft { padding-bottom: 80px;}
.hidden { display: none !important;}
.hd_line_banner { border:2px solid #e51937;}
 /* 로그인 가리기*/
 .btn_login .btn_ol { display: none;}

 /* 우측바  */
 .pc_right_bt { position:fixed; right:15px; top:50%; transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%);}
 .pc_right_bt .ft_to_top { width: 40px;height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 5px #d0d0d0; display: flex; align-items: center; justify-content: center;}
 .pc_right_bt .right_kakao { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f2d401 url(../img/ch_icon.svg) no-repeat center/50%;  border-radius:50%; margin-bottom: 10px; cursor: pointer; box-shadow: 0 0 5px 5px #d0d0d0;}
 .pc_right_bt .right_kakao a { width: 100%; height: 100%;}
 
 /* b2b 버튼*/
 #hd_btn { display: flex; align-items: center; top: 50%; transform:translateY(-50%);}
 #hd_btn a { width: auto; color: #e51937; font-size: 18px; line-height: 1; padding: 16px 39px; border:1px solid #e51937; border-radius:50px; font-weight: 600;}
 #hd_btn a.login_btn { color: #e51937; font-size: 16px; border:none; border-radius:0; padding: 0 10px; position:relative; }
 #hd_btn a.login_btn::after {content:''; display: inline-block; width: 1px; height: 14px; background: #0168b2c2; position: absolute; right:0; top: 50%; transform:translateY(-50%); }
 #hd_btn a.join_btn {color: #e51937; font-size: 16px; border:none; border-radius:0; padding: 0 10px;}
.hidden-xs {display:block !important;}
.hidden-lg { display: none !important;}
/* header */

#hd { box-shadow: none; border-bottom:1px solid #000; }
.sub_ct_toggle.ct_op { display: none;}
#hd_wr { max-width: 1200px; padding: 0; display: flex; height: 90px; box-sizing:border-box;}
#logo { margin: 0; float: none; display: flex; align-items: center; margin-right: 30px;}
.menu_wr ul.cate > li { height: 100%; display: flex; align-items: center;}
.menu_wr ul.cate > li > a { font-size: 18px; font-weight: 600; line-height: 1;}
.sub_bg { width: 100%; position:fixed; top:92px; left: 0; height: 400px; background: #fff; border-top:1px solid #000; border-bottom: 2px solid #000; display: none;}
.menu_wr li:hover .sub_cate1 { width: 1200px; box-shadow: none; background:transparent; position:absolute; left:50%; transform:translateX(-50%); display:flex; padding-top: 30px;}
.menu_wr li:hover .sub_cate1 > li > a { font-size: 18px; color: #000; font-weight: 600;}
.menu_wr li:hover .sub_cate2 {display: block;}
.menu_wr li:hover .sub_cate2 > li { padding: 0;}
.menu_wr li:hover .sub_cate2 > li > a { font-size: 18px; color: #646464; font-weight: 500; transition:0.3s ease;}
.menu_wr li:hover .sub_cate2 > li > a:hover { color: #e51937; font-weight: 600; transition:0.3s ease; }
.menu {}
.cate { display: flex; align-items: center; height: 100%; }
.menu_wr { height: 100%; font-family: 'Noto Sans KR';}
.sub_cate1 li:hover { background:none;}
.sub_cate1 .cate_title { width: 170px; color: #000; font-size: 20px; font-weight: 700;}


/* b2b 버튼*/
#hd_btn { display: flex; align-items: center; top: 50%; transform:translateY(-50%);}
#hd_btn a { width: auto; color: #e51937; font-size: 18px; line-height: 1; padding: 16px 39px; border:1px solid #e51937; border-radius:50px; font-weight: 600;}
#hd_btn a.login_btn { color: #e51937; font-size: 16px; border:none; border-radius:0; padding: 0 10px; position:relative; }
#hd_btn a.login_btn::after {content:''; display: inline-block; width: 1px; height: 14px; background: #0168b2c2; position: absolute; right:0; top: 50%; transform:translateY(-50%); }
#hd_btn a.join_btn {color: #e51937; font-size: 16px; border:none; border-radius:0; padding: 0 10px;}

.hd_admin { bottom:100px;}
.normal_sub { position:fixed; bottom:0; left:0; z-index: 999; width: 100%; background: #e51937; padding: 15px 0;}
#fwrite_normal { display: flex; justify-content: center; position: relative; max-width:1200px; margin:0 auto;}
#fwrite_normal input { width: 220px; height: 50px; border:1px solid #dfdfdf; margin:0 7.5px; padding:0 15px; border-radius:5px;}
#fwrite_normal p.privacy { color: #fff; display: flex; align-items: center;}
#fwrite_normal p.privacy a { color: #fff; text-decoration: underline; margin-left: 5px; font-weight: 600;}
#fwrite_normal input[type="checkbox"] { width: 20px;height: 20px;}
#fwrite_normal button { width: 150px; height: 50px; background: #fff; color: #000; font-size: 18px; font-weight: 600; border:none; margin-left:7.5px; border-radius:5px;}

.nn_count { position: absolute; top: -100%; left: 0; background: #000; color: #fff; padding: 5px 10px; border-radius:10px;}
.nn_count::after { content:''; display: block; position:absolute; top:100%; right: 10px; width: 20px;height: 20px;border-bottom: 10px solid transparent; border-top: 10px solid #000;    border-left: 10px solid transparent;    border-right: 10px solid transparent;}
.nn_count .nn_num { color: #ff0;}
.mobile_nomal_btn { width: 50px; height: 50px; position: fixed; bottom: 60px; right: 5px; background: #000; border-radius: 50%; color: #fff; text-align: center; z-index:999; cursor: pointer; font-size: 12px; display: flex; align-items:center; justify-content: center; font-weight: 600; display: none;}

/* footer  */
.cert_img { text-align: center;}
#ft { margin-top: 30px; }
.ft_wr { padding: 20px 0; max-width:1200px; display: flex;}
.ft_wr .ft_box h2 {}
.ft_wr .ft_box h2 img { height: 30px; mix-blend-mode: luminosity; color: #fff;}
#ft_company { max-width:1200px;}
.ft_wr .ft_info { padding:0;}

/* 패키지메뉴 가리기 */
.sub_cate1 .ca_1050, .sub_cate1 .ca_1060, .ca_1050, .ca_1060 { display: none;}
.sct_ct ul li.ca_1040::after { display: none;}
/* 패키지상품 이미지 */
.top_img { margin-bottom: 30px;}


@media(max-width:1200px){
    .ft_wr { max-width: 980px;}
    #fwrite_normal { max-width: 980px;}
    #fwrite_normal input { width: 150px; height: 40px;}
    #fwrite_normal button { width: 100px; height: 40px; font-size: 14px;}
    #fwrite_normal input[type="checkbox"] { width: 16px;height: 16px;}
    .sub_ct_toggle.ct_op { display: none;}
    #hd_wr { max-width: 980px; padding: 0; display: flex; height: 90px; box-sizing:border-box;}
    #logo { margin: 0; float: none; display: flex; align-items: center; margin-right: 30px;}
    .menu_wr ul.cate > li { height: 100%; display: flex; align-items: center;}
    .menu_wr ul.cate > li > a { font-size: 18px; font-weight: 600; line-height: 1;}
    .sub_bg { width: 100%; position:fixed; top:92px; left: 0; height: 400px; background: #fff; border-top:1px solid #000; border-bottom: 2px solid #000; display: none;}
    .menu_wr li:hover .sub_cate1 { width: 980px; box-shadow: none; background:transparent; position:absolute; left:50%; transform:translateX(-50%); display:flex; padding-top: 30px;}
    .menu_wr li:hover .sub_cate1 > li > a { font-size: 14px; color: #000; font-weight: 600;}
    .menu_wr li:hover .sub_cate1 > li { padding: 0 10px;}
    .menu_wr li:hover .sub_cate2 {display: block;}
    .menu_wr li:hover .sub_cate2 > li { padding: 0;}
    .menu_wr li:hover .sub_cate2 > li > a { font-size: 12px; color: #646464; font-weight: 500; transition:0.3s ease;}
    .menu_wr li:hover .sub_cate2 > li > a:hover { color: #e51937; font-weight: 600; transition:0.3s ease; }
    .menu {}
    .cate { display: flex; align-items: center; height: 100%; }
    .menu_wr { height: 100%; font-family: 'Noto Sans KR';}
    .sub_cate1 li:hover { background:none;}
}
@media (max-width:980px) {
    #logo { margin-left: 15px;}
    #ft { padding-bottom: 0px;} 
    .hidden-xs {display:none !important;}
    .hidden-lg { display: block !important;}
    #hd_btn a { padding: 8px 20px; font-size: 14px;}
    #hd_wr { height: 60px;}
    #hd { z-index: 9999;}
    .cate { flex-direction: column; justify-content: flex-start; position: relative; overflow-y:scroll; height: 80vh;}
    .menu_wr { margin: 0; padding: 0; overflow-y: hidden;}
    .sub_bg { position: relative; top: 0; border:none; left: 0;  width: 100%; overflow:visible !important; height: auto !important;}
    /* 스크롤바의 폭 너비 */
    .sub_bg::-webkit-scrollbar {
    width: 6px;  
    }

    .sub_bg::-webkit-scrollbar-thumb {
        background: #e51937; /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 둥근 테두리 */
    }

    .sub_bg::-webkit-scrollbar-track {
        background: rgba(20, 67, 220, 0.1);  /*스크롤바 뒷 배경 색상*/
    }
    .menu_wr ul.cate > li { flex-direction: column; justify-content: center; width: 100%; height: auto; padding: 10px 0; align-items: flex-start; border-bottom:2px solid #f5f5f5; position:relative;}
    .menu_wr ul.cate > li > .more_cate { position:absolute; right:15px; top: 12px; text-indent: -999999px; width: 15px; height: 15px; background: url('../img/plus_btn.svg') no-repeat center/cover; cursor: pointer;}
    .menu_wr ul.cate > li > .more_cate.on { position:absolute; right:15px; top: 12px; text-indent: -999999px; width: 15px; height: 15px; background: url('../img/minus_btn.svg') no-repeat center/cover; cursor: pointer;}
    .menu_wr li .sub_cate1 > li { position: relative;}
    .menu_wr .sub_cate1 > li > .more_cate { position:absolute; right:15px; top: 14px; text-indent: -999999px; width: 10px; height: 10px; background: url('../img/plus_btn.svg') no-repeat center/cover; cursor: pointer;}
    .menu_wr .sub_cate1 > li > .more_cate.on { position:absolute; right:15px; top: 14px; text-indent: -999999px; width: 10px; height: 10px; background: url('../img/minus_btn.svg') no-repeat center/cover; cursor: pointer;}
    .menu_wr ul.cate > li:hover { background: #fff;}
    .menu_wr ul.cate > li > a { color: #000;}
    .menu_wr ul.cate li { line-height: 1;}
    .menu_wr li .sub_cate1 { flex-direction: column; width: 100%; border:none; margin: 0; padding: 0; position:relative; display: flex; padding-top: 15px; border-top: 3px solid #f5f5f5; margin-top: 20px;}
    .menu_wr li .sub_cate1 > li { margin:0; padding:10px 0 !important;}
    .menu_wr li:hover .sub_cate1 { position:relative; left: 0; top: 0; transform:none; padding-top:15px; width: 100%;}
    .menu_wr li .sub_cate1 > li > a { font-size: 16px; color: #000; font-weight: 600; display: inline-block;} 
    .menu_wr li .sub_cate2 { display: none; margin-top: 20px;}
    .menu_wr li .sub_cate2 > li > a { font-size: 16px;} 
    .menu_wr li:hover .sub_cate1 > li > a { font-size: 16px; color: #000; font-weight: 600;} 
    .menu_wr li:hover .sub_cate2 { display: none;}
    .menu_wr li:hover .sub_cate2 > li > a { font-size: 16px;} 
    .sub_cate a { padding:0 0 0 20px ; text-align: left; height: auto; }
    .sub_cate1 > li { margin: 10px 0;}
    #fwrite_normal { flex-flow:row wrap; }
    .normal_sub { bottom:50%; width: 80%; left:50%; transform:translate(-50%,50%); border-radius:5px;}
    .normal_sub .rc_box { width: 80%; margin-bottom: 10px;}
    #fwrite_normal .rc_box input { width: 100%;}
    #fwrite_normal .privacy { width: 100%; justify-content: center; margin-bottom: 10px;}
    #fwrite_normal button { width: 80%;}
    .mobile_nomal_btn { display: flex;}
    .nn_count { top:-54px;}
    .normal_sub { display: none;}
    .login_box { display: flex; margin-top: 30px;  border-bottom:8px solid #f0f0f0; border-top:8px solid #f0f0f0}
    .login_box a { color: #e51937 !important; font-weight: 600; width: 50%; text-align: center; height: 50px; line-height: 50px; font-size: 16px; position: relative;}
    .login_box a:first-child::after { content:''; display: block; width: 2px;height: 15px; position: absolute; right: 0; top: 50%; transform:translateY(-50%); background: #000;}
    .menu { width: 90%;}
    .menu .menu_close { width: 20px; height: 20px;}
    .ns_mo_close { width: 20px; height: 20px; display: block; position:absolute; top:-23px; right: 0; background: url('../img/close_btn.png') center/cover no-repeat; cursor: pointer;}

    .menu_wr li .sub_cate2 li a { font-size: 14px; padding: 5px 0 5px 30px;}
 }
 
@media(max-width:720px){
	.ft_wr { display: flex; flex-flow:column wrap;}
	.ft_wr ul { margin-bottom: 10px;}
}

 #ol_after { display: none !important;}

  
  /* 스크롤바의 폭 너비 */
  body::-webkit-scrollbar {
      width: 6px;  
  }
  
  body::-webkit-scrollbar-thumb {
      background: #e51937; /* 스크롤바 색상 */
      border-radius: 10px; /* 스크롤바 둥근 테두리 */
  }
  
  body::-webkit-scrollbar-track {
      background: rgba(20, 67, 220, 0.1);  /*스크롤바 뒷 배경 색상*/
  }