@charset "UTF-8";    
  
/* font */  
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); /* notosanskr */  
@font-face {  
    font-family: "HappinessR";  
    src: url("./font/Happiness-Sans-Regular.ttf") format("truetype"); /* embedded-opentype, woff, truetype */  
    font-weight: normal;  
}  
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');  
  
.Noto * {font-family: 'Noto Sans KR' ,serif;}  
  
/* common */  
.wrap{width: 1300px; margin: 0 auto;}  
.hidden{display: none !important;}  
.flex_wrap{display: flex; justify-content: space-between; align-items: center;}  
.mo_only{display: none !important;}  
.mark,.mark *{  
    color:#D91E26;  
}  
.mt-0{
    margin-top: 0 !important;
}
.ml-10{
    margin-left: 10px;
}
.red_bg{
    background:#D91E26 !important;
}
.white_bg{
    background:#fff !important;
}
input::placeholder{  
    color: #999999;  
}  
  
/* header */ 
header {position: relative;} 
header .header_top{  
    background: #F5F5F5;  
}  
header .header_top .wrap{
    display: flex;  
    align-items: center;  
    justify-content: right; 

}
header .header_top .wrap ul {
    display: flex;
}
header .header_top .wrap ul li{
    margin-left: 1rem;
}
header .header_top .wrap ul li a{  
    height: 2.1875rem;  
    line-height: 2.1875rem;  
    color: #999999;  
    font-size: 0.875rem;  
    display: flex;  
    align-items: center;  
    justify-content: right;  
}  
header .header_top .wrap ul li a i{  
    margin-left: 0.1875rem;  
}  
  
header .header_bottom {  
    border-bottom: 1px solid #E8E8E8;  
}  
header .header_bottom .wrap{  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
}  
  
header .header_bottom .wrap .header_right{  
    display: flex;  
}  
  
header .header_bottom .wrap .header_right ul.lnb{  
    display: flex;  
    align-items: center;  
    margin-right: 4.8125rem; 
}  
header .header_bottom .wrap .header_right ul.lnb > li{  
    font-size: 0.875rem;  
    vertical-align: sub;  
    position: relative;
}  
header .header_bottom .wrap .header_right ul.lnb > li > a{  
    font-size: 1.125rem;   
    padding: 1.6875rem 0;  
    display: inline-block;
}  
header .header_bottom .wrap .header_right ul.lnb > li:nth-child(2n){  
    position: relative;  
    top: -0.0625rem;  
    color: #DDDDDD;  
}  
header .header_bottom .wrap .header_right ul.lnb > li:nth-child(2n-1){  
    padding: 0 1.875rem;  
}  
header .header_bottom .wrap .header_right ul.lnb > li > ul.depth_2{
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-top: 1px;
    padding: 1.625rem 0;
}
header .header_bottom .wrap .header_right ul.lnb > li > ul.depth_2 li a{
    display: inline-block;
    width: 100%;
    padding: 0.625rem 0;
    font-size: 1rem;
    font-weight: 400;
}
header .header_bottom .wrap .header_right ul.lnb > li > ul.depth_2 li a:hover{
    color: #DC1D25;
    font-weight: 700;
}
  
header .search{  
    display: flex;  
    align-items: center;  
    position: relative;  
}  
header .search input{  
    font-size: 0.875rem;  
    width: 14.375rem;  
    height: 2.5rem;  
    border: none;  
    border-bottom: 0.125rem solid #DC1D25;  
}  
header .search button{  
    position: absolute;  
    right: 0;  
    top: 50%;
    transform: translateY(-50%);    
}  
header .header_bottom .wrap .menu_btn{
    cursor: pointer;
    display: none;
}

.menu{
    width: 340px;
    height: 100%;
    position: fixed;
    z-index: 11;
    right: -350px;
    top: 0;
    background: #fff;
    padding: 50px 20px;
    box-sizing: border-box;
    box-shadow: -0.2rem 0rem 0.625rem rgb(0 0 0 / 8%);
    transition: .3s;
    overflow-y: scroll;
}
.menu.on{
    right: 0;
}
.menu .menu_close{
    position: absolute;
    top: 55px;
    right: 20px;
    cursor: pointer;
}
.menu .search{
    margin-top: 20px;
}
.menu .search input{
    width: 100%;
}
.menu .menu_list {
    margin-top: 20px;
}
.menu .menu_list ul li{
    border-bottom: 1px solid #dddddd;
    position: relative;
}
.menu .menu_list ul li a{
    padding: 20px 10px;
    display: inline-block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
}
.menu .menu_list ul li i{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

header .detpth_2_bg{
    position: absolute;
    z-index: 10;
    top: 113.19px;
    width: 100%;
    height: 540px;
    background: #fff;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.08);
} 

.que{
    position: relative;
    padding: 17px 0;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #dddddd;
    
  }
    
  .que::after{
    display: inline-block;
    content: '';
    font-size: 14px;
    margin-right: 5px;
    position: absolute;
    right: 0;
    background: url(../assets/arrow_down.png) no-repeat center center; width: 20px; height: 12px;
  }
  
  .que.on::after{
      content: '';
      background: url(../assets/arrow_up.png) no-repeat center center; width: 20px; height: 12px;
    }
    
  
  .que.on>span{
    font-weight: bold;
    color: #D91E26; 
  }
    
  .anw {
    display: none;
      overflow: hidden;
    padding: 20px 20px;
  }
  .anw span{
      display: inline-block;
        width: 100%;
        font-size: 13px;
        padding: 10px 0;
    }
    
  .anw span::before {
    display: inline-block;
    content: '·';
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-right: 5px;
  }
  








  
/* footer */  
footer .footer_top{  
    border-bottom: 0.0625rem solid #dddddd;  
}  
footer .footer_top .wrap ul{  
    display: flex;  
    align-items: center;  
    height: 3.125rem;  
}  
footer .footer_top .wrap ul li{  
    line-height: 3.125rem;  
    color: #999999;  
    font-size: 0.875rem;  
}  
footer .footer_top .wrap ul li:nth-child(2n){  
    padding: 0 1.25rem;  
}  
footer .footer_top .wrap ul li a{  
    color: #999999;  
    font-size: 0.875rem;  
}  
footer .footer_top .wrap ul li:hover a{  
    color: #333333;  
}  
footer .footer_bottom{  
    padding: 1.875rem 0 3.4375rem;  
}  
footer .footer_bottom .wrap{  
    display: flex;  
    justify-content: space-between;  
}  
footer .footer_bottom .wrap .footer_info_left .footer_txt p{  
    line-height: 1.75rem;  
    color: #666666;  
    font-size: 0.9375rem;  
}  
footer .footer_bottom .wrap .footer_info_left .footer_txt .copyright{  
    margin-top: 0.875rem;  
    color: #999999;  
    font-size: 0.8125rem;  
}  
footer .footer_bottom .wrap .footer_info_right ul{  
    display: flex;  
}  
footer .footer_bottom .wrap .footer_info_right ul li{  
    border-right: 0.0625rem solid #eeeeee;  
}  
footer .footer_bottom .wrap .footer_info_right ul li:first-child{  
    padding-right: 4.125rem;  
}  
footer .footer_bottom .wrap .footer_info_right ul li:last-child{  
    border-right: none;  
    padding-left: 4.125rem;  
}  
footer .footer_bottom .wrap .footer_info_right ul li .account_img{  
    height: 1.461875rem;  
}  
footer .footer_bottom .wrap > div h5{  
    font-family: 'Roboto', sans-serif;  
    color: #666666;  
    font-size: 1.125rem;  
}  
footer .footer_bottom .wrap > div h4{  
    font-weight: 700;  
    font-size: 1.5625rem;  
    margin-top: 0.9375rem;  
}  
footer .footer_bottom .wrap > div p{  
    margin-top: 1.1875rem;  
}  
  
/* fixed_content */  
.fixed_con{  
    position: fixed;  
    right: 0;  
    top: 50%;  
    z-index: 10;  
    transform: translateY(-50%);  
}  
.fixed_con .top_btn{  
    text-align: center;  
    margin-top: 1.25rem;  
}  
.fixed_con ul{  
    padding: 0.625rem 0;  
    background: #fff;  
    border-radius: 0.9375rem 0.0rem 0.0rem 0.9375rem;  
    box-shadow: 0.0rem 0.0rem 0.375rem rgba(0, 0, 0, 0.15);  
}  
  
.fixed_con ul li{  
    padding: 0 1.0rem;  
}  
.fixed_con ul li a{  
    text-align: center;  
    width: 100%;  
    height: 100%;  
    display: inline-block;  
    padding: 1.0rem 0;  
    border-bottom: 0.0625rem solid #eeeeee; 
}  
.fixed_con ul li:last-child a{ 
    border-bottom: none; 
} 
.fixed_con ul li a p{ 
    margin-top: 0.3125rem; 
    font-weight: 500; 
    font-size: 0.8125rem;
} 
.fixed_con ul li a img{
    height: 1.725rem;
}


/* benefit */  
.content .benefit{  
    padding: 3.125rem 0;  
    background: #F1F1F1;  
}  
.content .benefit ul{  
    display: flex;  
    justify-content: space-between ;  
}  
.content .benefit ul li{  
    background: #fff;  
    width: 25%;  
    margin-right: 2.0rem;  
    text-align: center;  
    padding: 2.3125rem 0;  
}  
.content .benefit ul li img{
    width: 3.625rem;
}
.content .benefit ul li p{  
    margin-top: 1.25rem;  
    font-weight: 700;  
    font-size: 1.25rem;  
}  
.content .benefit ul li:last-child{  
    margin-right: 0;  
}  

/* 라디오 */
input[type=radio] { display: none; } 
input[type=radio] + label.radio_style1 { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 22px; 
    font-size: 16px; 
} 
input[type=radio]+ label.radio_style1:before { 
    content: ""; 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    margin-right: 5px; 
    position: absolute; 
    left: 0; 
    bottom: 2px; 
    background-color: #fff; 
    border-radius: 2px; 
    background: url("../images/i_circle.png"); 
} 
input[type=radio]:checked + label.radio_style1:before { 
    content: ""; 
    width: 16px; 
    height: 16px; 
    background: url("../images/i_circle_on.png"); 
} 


input[type=checkbox] { display: none; } 
input[type=checkbox] + label.chk_style1 { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 30px; 
    font-size: 17px; 
} 
input[type=checkbox]+ label.chk_style1:before { 
    content: ""; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    margin-right: 5px; 
    position: absolute; 
    left: 0; 
    bottom: 1px; 
    background-color: #fff; 
    border-radius: 2px; 
    background: url("../images/i_chk.png"); 
} 
input[type=checkbox]:checked + label.chk_style1:before { 
    content: ""; 
    width: 20px; 
    height: 20px; 
    background: url("../images/i_chk_on.png"); 
}
  
/* modal */  
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 100; justify-content: center; align-items: center; }   
.modal_open { cursor:pointer; }   
.modal_overlay { background-color: rgba(0, 0, 0, 0.5); width:100%; height: 100%; position: absolute; z-index: 24; }   
.modal_content { background-color: white; text-align: left; position: relative; z-index: 25; border-radius: 1.125rem; box-shadow: 0.125rem 0.125rem 1.25rem 0.25rem rgb(0 0 0 / 20%); }   
.modal_content .modalContWrap { font-size: 0.9375rem;}   
.modal .modal_close{position: absolute; z-index: 50; right: 1.0625rem; top: 1.0625rem; cursor: pointer;}  
.modal .modal_close img{width: 1.8125rem;}  
.modal_content .modalContWrap{font-size: 1.125rem; color: #000;}  
.modal_content .modalContWrapTab { text-align: left; }   
.modal_content .modal_scroll { height: 31.25rem; overflow-y: scroll; }  
.modal_md { width: 46.25rem; max-height: 40.625rem; box-sizing: border-box;}   
  
@media screen and (max-width: 1700px){
  
}  
  
@media screen and (max-width: 1330px){
    /* header */ 
    header .header_bottom .wrap .header_right ul.lnb{ 
        margin-right: 1.875rem; 
    } 
    header .header_bottom .wrap .header_right ul.lnb > li:nth-child(2n-1){ 
        padding: 0 1.0rem 
    }     

    header .header_bottom .wrap .header_right ul.lnb > li{ 
        font-size: 0.875rem; 
    } 
 
    header .header_bottom .wrap .header_right ul.lnb > li > a{ 
        font-size: 0.875rem; 
    }     
    header .header_bottom .wrap .header_right ul.lnb > li > ul.depth_2 li a{
        font-size: 0.875rem;
    }
    header .detpth_2_bg{
        top: 108px;
        height: 396px;
    }     
    .wrap{ 
        width: 100%;  
        margin: 0 auto; 
        padding-left: 20px !important; 
        padding-right: 20px !important; 
        box-sizing: border-box; 
    }  

    /* content */
    .content .benefit ul li p{
        font-size: 0.875rem;
    }      
      
    /* footer */ 

    footer .footer_bottom .wrap .footer_info_right ul li:first-child{
        padding-right: 2rem;
    }
    footer .footer_bottom .wrap .footer_info_right ul li:last-child{
        padding-left: 2rem;
    }
    footer .footer_bottom .wrap > div h4{
        font-size: 1.2rem;
    }
    footer .footer_bottom .wrap .footer_info_left .footer_txt p{
        font-size: 0.75rem;
    }     

    .fixed_con ul li{
        padding: 0 0.6rem;
        box-sizing: border-box;
    }
    .fixed_con ul li a{
        padding: 0.9rem 0;
    }
    .fixed_con ul li a p{
        font-size: 0.625rem;
    }
    .fixed_con ul li a img{
        height: 1.725rem;
    }
    .fixed_con{
        top: unset;
        bottom: 2rem;
        right: 0;
        transform: unset;
    }      

    .fixed_con ul{padding: 0;}
    /* .fixed_con .top_btn{
        margin-left: 1.5rem;
    } */
    .fixed_con .top_btn img{
        width: 2.625rem;
    }
  
}  
  
@media screen and (max-width: 1060px){
    /* header */ 

    /* footer */ 
    footer .footer_bottom .wrap{
        flex-direction: column-reverse;
    }
} 

@media screen and (max-width: 960px){
    /* header */ 
    header .header_bottom{
        padding: 1.0625rem 0;  
    }
    header .header_bottom .wrap .header_right{ 
        display: none; 
    } 
    header .header_bottom .wrap .menu_btn{
        display: block;
    }
    .detpth_2_bg{
        display: none;
    }
} 
  
@media screen and (max-width: 750px){
    html{ 
        font-size: 14px;
    }     
    .mo_only{display: block !important;}  
    .pc_only{display: none !important;}  

    /* content */
    .content .benefit ul li{margin-right: 1rem;}    
    .fixed_con{
        top: unset;
        bottom: 0;
        right: 0;
        transform: unset;
    }  
    .fixed_con{
        width: 100%;
    }
    .fixed_con ul{
        display: flex;
        justify-content: space-between;
        border-radius: 0;
    }
    .fixed_con ul li{
        padding: 0px 0.5rem;
        width: 14.28%;
    }
    .fixed_con ul li:first-child{
        border-left: none;
    }
    .fixed_con ul li a{
        border-bottom: none;
    }
    .fixed_con ul li a p{
    }
    .fixed_con .top_btn{
        position: absolute;
        z-index: 12;
        top: -4.625rem;
        right: 0.625rem;
    }
    footer .footer_bottom {
        padding: 1.875rem 0 6.4375rem;
    }
}  
@media screen and (max-width: 600px){
    .content .benefit ul {
        flex-wrap: wrap;
    }
    .content .benefit ul li{
        width: 47%;
    }
    .content .benefit ul li{
        margin-right: 0;
    }
    .content .benefit ul li:nth-child(n+3){
        margin-top: 20px;
    }

}
@media screen and (max-width: 420px){
    /* footer */ 
    footer .footer_bottom .wrap .footer_info_right ul li{
        width: 50%;
    }
    footer .footer_bottom .wrap .footer_info_right ul li:first-child{
        padding-right: 1rem;
    }
    footer .footer_bottom .wrap .footer_info_right ul li:last-child{
        padding-left: 1rem;
    }   
    footer .footer_bottom .wrap > div h4{
        font-size: 1.1rem;
    }
    footer .footer_bottom .wrap > div p{
        font-size: 0.8rem;
    }   
}
