/* 공통 css*/
:root{
    --mw--1400:1400px;
    --mw--1280:1280px;
    --mw--1000:1000px;
    /* color */
    --col--yel:#FFD645;
    --col--ybg:#FFEF95;
    /* font-size */
    --ft--17:1.7rem;
    --ft--18:1.8rem;
    --ft--20:2rem;
    --ft--22:2.2rem;
    --ft--25:2.5rem;
    --ft--28:2.8rem;
    --ft--30:3.0rem;
    --ft--32:3.2rem;
    --ft--36:3.6rem;
    --ft--38:3.8rem;
    --ft--40:4.0rem;
    --ft--45:4.5rem;
    --ft--48:4.8rem;
    --ft--50:5.0rem;
    --ft--56: 5.6rem;
    --ft--60: 6.0rem;
}
@media screen and (max-width: 1400px) {
    :root{
        --mw--1400:95%;
    }
}
@media screen and (max-width: 1280px) {
    :root{
        --mw--1280:95%;
    }
}
@media screen and (max-width: 1000px) {
    :root{
        --mw--1000:95%;
    }
}
@media screen and (max-width: 760px) {
    :root{
        --ft--17:1.5rem;
        --ft--18:1.6rem;
        --ft--20:1.7rem;
        --ft--22:1.8rem;
        --ft--25:2.0rem;
        --ft--28:2.3rem;
        --ft--30:2.5rem;
        --ft--32:2.8rem;
        --ft--36:3.0rem;
        --ft--38:3.2rem;
        --ft--40:3.5rem;
        --ft--45:4.0rem;
        --ft--48:4.3rem;
        --ft--50:4.5rem;
        --ft--56: 5.0rem;
        --ft--60: 5.6rem;
    }
}
html{font-size: 62.5%;}
body{font-size:1.6rem; color:#333;}
#skipNav{
    position:absolute; left:0; top:-1000px; width:100%; height: 0px; z-index:10000; line-height:0px; font-size:0px;
}
#skipNav a{display:block; text-align:center; width: 100%; line-height:0px;	font-size:0px}
#skipNav a:focus,
#skipNav a:hover,
#skipNav a:active{position:absolute; left:0px; top:1000px; padding: 8px 0; display:block; height:34px; background:#20262c; font-size:12px; font-weight:bold; line-height:16px; color:#fff;  outline:2px dotted; outline-offset:-1px;}

#wrap{width: 100%; position: relative; line-height: 1.2;}
.inner{max-width: var(--mw--1400); margin:0 auto;}
/* header */
#header{width: 100%; position: absolute; left:0; top:0; z-index: 9999;  font-family:'Pretendard',sans-serif;     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); }
#header a{color:#333;}

#header > .inner{display: flex; align-items: center;}
#header .link-wrap{display: flex; align-items: center}
/* topBox */
#header .topBox {padding:8px 0; background-color: var(--col--yel);  }
#header .topBox .top-left{width: 45%; float: left;}
#header .top-left ul{margin-top:5px;}
#header .top-left ul a{padding:10px 10px 0;}
#header .top-left ul li:nth-child(1){position: relative;}
#header .top-left ul li:nth-child(1) a{ font-weight: 700; position: relative; z-index: 10;}
#header .top-left ul li:nth-child(1)::after{
    content:"";
    display: inline-block;
    width: 105%;
    height: 45px;
    position: absolute;
    left:-5px;
    bottom:-8px;
    background-image: url("../images/topHd.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 1;
}


#header .topBox .top-right{width: 55%; float: right; display: flex; gap: 10px; justify-content: space-between; align-items: center;}
#header .search_panel{width: 300px;}
#header .search_panel .search_input{background-color: #fff; border-radius: 40px; padding:0 20px 0 10px; overflow: hidden; height: 33px;}
#header .search_panel button,
#header .search_panel input{border:0; float:left;}
#header .search_panel .search_keyword{width: calc(100% - 21px); height: 34px; text-indent: 16px;float: right;}
#header .search_panel .search_submit > input[type="submit"]{
    display: block;
    width: 16px;
    height: 34px;
    background:url('../images/searchIcon.png') center no-repeat;
    margin-right:5px;
    font-size: 0;
    float: left;
}

#header .loginUserInfo{float:left; margin-right:20px;}
#header .loginUserInfo .userName{font-weight: 700; vertical-align: top;}
#header .loginUserInfo .userName::before{
    content:"";
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-right:10px;
    background:url('../images/userIcon.png') center no-repeat;
    vertical-align: middle;
}
#header .m-user-wrap > .link-wrap{float: left;}
#header .m-user-wrap > .link-wrap > li{padding:0 10px; position: relative;}
#header .m-user-wrap > .link-wrap > li a{height: 100%;}
#header .m-user-wrap > .link-wrap > li::before{
    content:'';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color:rgba(0,0,0,0.5);
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
#header .language button{color:#333;}
#header .language button::after{
    content:"";
    display: inline-block;
    width: 10px;
    height: 8px;
    background-image: url("../images/selectIcon01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left:5px;
    vertical-align: middle;
}

#header .language .lang-list{display: none; width: 100%; position: absolute; left:0; top:30px; border:2px solid var(--col--yel); background-color: #fff; border-radius: 10px; padding:5px 0; z-index: 99;}
#header .language .lang-list li{ padding:5px; text-align: center; }

#header .topBox > .inner::after{
    content:"";
    display: block;
    clear: both;
}
/* botBox */
#header .botBox{background-color: #fff;border-bottom: 1px solid #E5E5E5;padding-top:15px;/* padding: 15px 0; */}
#header .botBox > .inner{display: flex;align-items: center;}
#header h1{width: 100px; padding-bottom: 15px;}


#gnb{flex-grow: 3;position: relative;}
#gnb >ul{display: flex; height: 100%; align-items: center; justify-content: flex-end; font-size: 2.2rem;  font-weight: 500;}
#gnb .gnb_top li{width: 168px; margin-right:10px;  position: relative;}
#gnb .gnb_top .depth1_text{
    padding: 55px 10px 36px;
    position: relative;
}

#gnb .gnb_top .depth1_text:after{
    content:"";
    display: inline-block;
    width: 100%;
    height: 3px;
    background-color: var(--col--yel);
    position: absolute;
    left: 0;
    bottom: -1px;
    transform: scale(0);
    transform-origin: 50% 50%;
    transition: transform 0.3s;
}
#gnb .gnb_top a.depth1_text:hover:after,
#gnb .gnb_top a.depth1_text:focus:after{width: 100%; transform: scale(1);}
/* depth2 */
#gnb .gnb_menu{height: 0;position: absolute;left:0;top: 119px;opacity:0;overflow: hidden;}
#gnb .gnb_menu .gnb_menu_cont {padding:25px 0;}
#gnb .gnb_menu .depth2_text{ padding: 10px; font-size:1.8rem; position: relative; z-index: 10; margin-left:2px;}
#gnb .gnb_menu .depth2_text::before{
    content:"";
    display: inline-block;
    width: 0;
    height: 25%;
    border-radius: 40px;
    background-color: rgba(255, 214, 69,0.3);
    position: absolute;
    left:0;
    bottom:10px;
    z-index: -1;
    transition: width 0.5s;
}
#gnb .gnb_menu .depth2_text:hover::before,
#gnb .gnb_menu .depth2_text:focus::before{width: 100%;}
.botBox.on #gnb .gnb_menu{display: block; height: 300px; opacity: 1; transition: height 0.5s; }
.botBox::before{
    content:"";
    display: block;
    width: 100%;
    height: 0;
    background-color: #fff;
    position: absolute;
    left: 0px;
    top: 184px;
    transition: height 0.5s;
}
.botBox.on::before{
    height: 320px;
    border-bottom:1px solid #eaeaea;

}
#header .allMenu{flex-grow: 1; display: flex;  align-items: center; justify-content: flex-end}
.hamburger {
    font: inherit;
    display: inline-block;
    overflow: visible;
    margin: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent
}
.hamburger-box {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 24px
}

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px
}

.hamburger-inner,.hamburger-inner:after,
.hamburger-inner:before {
    position: absolute;
    width: 30px;
    height: 3px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    border-radius: 10px;
    background-color: #333;
}
.hamburger-inner:after{width: 20px; transition: width 0.3s;}
.hamburger-inner:after,.hamburger-inner:before {
    display: block;
    content: ""
}

.hamburger-inner:before {
    top: -10px
}

.hamburger-inner:after {
    bottom: -10px
}

.allMenu >a:hover .hamburger-inner:after,
.allMenu >a:focus .hamburger-inner:after{width: 30px;}

.allMenu_wrap{display: none; position: fixed; left:0; top:0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.45); z-index: 10000;}
.allMenu_panel{width: var(--mw--1400); position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.allMenu_content .top_box{font-family: 'ONE-Mobile-Title', sans-serif; font-size: var(--ft--36); text-align: center; padding:45px 0 30px; position: relative;}
.allMenu_content .top_box span{font-size:var(--ft--25); opacity: 0.7;}
.allMenu_content .top_box::before{
    content:"";
    display: block;
    width: 88%;
    height: 478px;
    background: rgb(255,214,70);
    background: linear-gradient(90deg, rgba(255,214,70,1) 0%, rgba(241,171,19,1) 100%);
    border-radius: 150px 50px 50px 50px;
    position: absolute;
    left:218px;
    top:0;
    z-index: -1;
}
.allMenu_content .top_box::after{
    content:'';
    display: inline-block;
    width: 70px;
    height: 71px;
    background-image: url("../images/allMenuBg1.png");
    background-repeat: no-repeat;
    position: absolute;
    left:30%;
    top:-35px;
}
/* 20240614 _추가 s */

.allMenu_content .mob_link{display: flex; background-color: #fff; border-radius: 15px 0 0 15px; overflow: hidden; margin-bottom: 10px; gap: 5px;}
.allMenu_content .mob_link li{flex: 1 1 0; position: relative;}
.allMenu_content .mob_link li a{display: block; width: 100%; padding:15px 5px; text-align: center; font-size: var(--ft--18); font-weight: 700;}
.allMenu_content .mob_link li:not(:last-child):after{
    content:"";
    display: inline-block;
    width: 1px;
    height: 8px;
    background-color: #eaeaea;
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
@media screen and (min-width : 760px){
    .allMenu_content .mob_link{display: none;}
}
/* 20240614 _추가 e */

.allMenu_content .bottom_box{width: 100%; border-radius: 50px; background-color: #fff; padding:86px 100px 40px; font-family: 'Pretendard', sans-serif; position: relative;}
.allMneu_list{display: flex; justify-content: space-between;}
.allMneu_list >div{width: 200px;}
.allMneu_list .depth1{display: block; font-weight: 700; font-size:var(--ft--22); border:2px solid #FFD646; padding:10px; box-shadow: 7.778px 7.778px 13px 0px rgba(150, 150, 150, 0.1); border-radius: 10px; text-align: center;}
.allMneu_list .depth2{padding:50px 0 20px 16px; }
.allMneu_list .depth2 li{margin-bottom: 35px;}
.allMneu_list .depth2 a{color:#5D3F3F !important; font-size: var(--ft--20);}
.allMneu_list .depth2 a:hover{text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;}
.allMneu_list .depth2 a::before{
    content: '';
    display: inline-block;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    background-color: #D3D3D3;
    vertical-align: middle;
    margin-right: 9px;
}
.allMenu_content .bottom_box::before{
    content:'';
    display: inline-block;
    width: 206px;
    height: 267px;
    background-image: url("../images/allMenuBg2.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 255px;
    top: -197px;

}
.allMenu_content .bottom_box::after{
    content:'';
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url("../images/allMenuBg3.png");
    background-repeat: no-repeat;
    position: absolute;
    right:100px;
    top:-55px;
}

.allMenu_hide{
    width: 62px;
    height: 62px;
    background-image: url("../images/allMenu_hide.png");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right:0;
    top:50px;
}
@media screen and (max-width : 1720px){
    .inner{width: 95%;}
    #header > .inner{max-width: 95%;}

}
@media screen and (max-width : 1400px){
    #header .topBox .top-left{width: 450px;}
    #header .topBox .top-right{width: calc(100% - 450px); justify-content: flex-end; }
    #header .search_panel {width: 230px;}
    #header .botBox > .inner{flex-wrap: wrap;}
    #gnb .gnb_menu {top: 124px;}
    .botBox::before{top: 184px;}
}
@media screen and (max-width : 1280px){
    .allMenu_content .bottom_box{ padding: 86px 30px 40px;}
    .allMneu_list >div{
        width: calc(100% / 5 - 10px);
    }
    .allMneu_list .depth1{font-size: 2.0rem;}
    .allMneu_list .depth2 a{font-size: 1.8rem;}
    .allMenu_content .bottom_box::before{display: none;}
}
@media screen and (max-width : 1200px){
    #header .topBox {display: none;}
    #header h1{order:1;}
    #gnb{order:3; width: 100%;}
    #gnb .gnb_top .depth1_text{ padding: 25px 10px 25px; }
    #gnb .gnb_menu {top: 78px;}
    .botBox::before {top: 209px;}
    #header .allMenu{order:2;}
}

@media screen and (max-width : 1024px){
    #gnb{display: none;}
    .botBox::before {display: none;}
}
@media screen and (max-width : 760px){
    .allMenu_panel{width: 320px; left: auto; right:0; transform: translateY(-50%);}
    .allMenu_content .bottom_box{height: calc(100vh - 206px); border-radius: 30px 30px 0 0; padding:40px 30px; overflow-y: scroll;}
    .allMneu_list{flex-direction: column; gap: 10px;}
    .allMneu_list >div{width: 100%;     border: 2px solid #FFD646; border-radius: 10px;}
    .allMneu_list .depth1{border:0; box-shadow: none; border-radius: 0; }
    .allMneu_list .depth2{max-height: 0; padding: 0 16px; overflow: hidden; transition: max-height 0.5s;}
    .allMneu_list .depth2 li {margin:17px 0;} /*20240617 _수정*/
    /* active */
    .allMneu_list >div.active .depth1{border-bottom:1px solid #eaeaea;}
    .allMneu_list >div.active .depth2{ max-height: 300px;;}
    .allMenu_content .top_box::before {width: calc(100% + 35px); height: 800px; left:-35px; border-radius:150px 0px 0px 30px;}
    .allMenu_content .top_box::after{display: none;}
    .allMenu_content .bottom_box::after {display: none;}
    .allMenu_hide{width: 40px; height: 40px; background-size: 100% 100%; right: 6px; top: 15px;}
}
@media screen and (max-width : 480px){
    .inner{width: 90%;}
    #header > .inner{max-width: 95%;}
    #header h1 .imgs {width: 60px;}
    #header h1 .txt > b{font-size: 1.8rem;}
}

/* footer */
#footer{background-color: #3c4250; text-align: center; font-family:'Pretendard',sans-serif; font-size: 1.8rem; color:#fff; padding:65px 0 88px;}
#footer .adr_box{padding:10px 0 15px;}
#footer .adr_box > span{display: inline-block; padding:0 14px; margin-top:5px; position: relative;}
#footer .adr_box > span:not(:last-child):after{
    content:'';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}

#quick_menu{position: fixed; left: 50%; top:50%; transform: translateY(-50%); margin-left: 780px; z-index: 999;}
#quick_menu .box{
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    font-family:'Pretendard', sans-serif; font-size: 1.4rem;
    box-shadow: 10px 10px 20px 0px rgba(32, 32, 32, 0.2);
    overflow: hidden;
}
#quick_menu .top_cont{ padding:5px 10px;}
#quick_menu .top_cont a{margin-bottom:10px; display: flex; flex-direction: column; align-items: center; color:#333; }
#quick_menu .top_cont .img_box{ border-radius: 50%; display: flex; justify-content: center ; align-items: center; padding:15px 15px 0 15px;}

#quick_menu .top_cont .txt{padding-top:10px; text-align: center;}
#quick_menu .go_to_top{ width: 100%; background-color: #333; color:#fff; text-align: center;  padding:10px 5px;}
@media screen and (max-width : 1760px){
    #quick_menu{margin-left:0; left:90%; }
}
@media screen and (max-width : 1400px){
    #quick_menu{top:60%; }
}
@media screen and (max-width : 1024px){
    /* quick_menu */
    #quick_menu{display: none;}
}
@media screen and (max-width : 480px){
    #footer .adr_box > span{display: block;}
    #footer .adr_box > span:not(:last-child):after{display: none;}
}

/**************************************** 로그인 ************************************************/
.login .box .box_wrap p{color: #333; font-family:'Pretendard', sans-serif;}
.login .box .box_wrap > p{font-size: var(--ft--20); font-weight: 700;text-align: center; line-height: 1.5; color:#333;}
.login .box .box_wrap .textpoint{font-size: var(--ft--18); font-weight: 400; color: #333; padding-top: 60px;}
.login .box .box_wrap .textpoint >p {margin-bottom: 5px;}

.login .login_middle{font-family:'Pretendard', sans-serif; display: flex; align-items: stretch; gap: 20px;}

.login .login_middle .familylogin{border-radius: 30px; overflow: hidden; box-shadow: 2px 6px 20px rgba(0,0,0,0.18);}
.login .login_middle .familylogin .Sortation ul li{width: 100%; float: none; }
.login .login_middle .familylogin .Sortation ul li .flogin_content{min-height: auto;}
/* 20240621 s */
.login .login_middle .familylogin .Sortation ul li.active .familybutton{background-color: var(--col--yel);   }
.login .login_middle .familylogin .Sortation ul li .familybutton span{ color:#333; font-size: var(--ft--25); font-weight: 700;}
.login .login_middle .familylogin .Sortation ul li.active .familybutton:focus,
.login .login_middle .familylogin .Sortation ul li.active .familybutton:hover,
.login .login_middle .familylogin .Sortation ul li.active .familybutton:focus span,
.login .login_middle .familylogin .Sortation ul li.active .familybutton:hover span{text-decoration: none; }
.login .login_middle .familylogin .Sortation ul li.active .familybutton span:before{filter: brightness(0) saturate(100%) invert(14%) sepia(53%) saturate(19%) hue-rotate(6deg) brightness(103%) contrast(89%);}
.login .login_middle .familylogin .Sortation ul li.active .familybutton:after{display: none;}


.login .login_middle .familylogin .Sortation ul li .flogin_content{position: static; border:0; padding:40px; }
.login .login_middle .familylogin .Sortation ul li .flogin_content p{display: block;}
.login .login_middle .familylogin .Sortation ul li .flogin_content p.strong{margin-top: 20px;}

.login_agree .p-agree h3{line-height: 1.5; margin-bottom: 20px;}
.login_agree .p-agree h3:before{top: 50%;}
.login_agree .p-agree{margin:0;}
.login_agree .p-agree__condents{
    width: 50%;
    max-height: 270px;
    float: left;
    border:1px solid #E5E5E5;
    border-radius: 10px;
    padding:20px 10px 20px 20px;
    overflow: hidden;
}
.login_agree .p-agree__inner{
    max-height: 206px;
    overflow-y: scroll;
    padding-right:40px;
    padding-bottom: 20px;
}
.login_agree .p-agree__inner::-webkit-scrollbar{
    width: 10px;  

}
.login_agree .p-agree__inner::-webkit-scrollbar-thumb {
    background:var(--col--yel); 
    border-radius: 10px;
}

.login_agree .p-agree__inner::-webkit-scrollbar-track {
    background: #EFEFEF; 
    border-radius: 10px; 
}
.login_agree .p-agree ul.margin_t_5{
    float: left;
    width: calc(50% - 40px);
    margin-bottom: 10px;
    margin-left:26px;
    text-align: center;
}
.login .login_middle .familylogin .Sortation ul li .flogin_content p.textpoint{padding-left: 0; font-size: var(--ft--17); }
.login_agree .agree_cont li{margin-bottom: 20px;}
.login_agree .agree_cont .p-form-radio label{color:#333;}

.login .login_middle .familylogin .Sortation ul li .flogin_content a{border-color: #e7e7e7; border-radius: 40px; background-color: #fff; padding: 24px 10px 24px 10px;}
.login .login_middle .familylogin .Sortation ul li .flogin_content a.gry{background-color: #F3F3F3;}

/* 간편로그인 */
.login .login_middle .easylogin{margin-right: 0; border-radius: 30px; box-shadow: 2px 6px 20px rgba(0,0,0,0.18); overflow: hidden;}
.login .login_middle .easylogin .familybutton{background-color: #434343; color:#fff;}
.login .login_middle .easylogin .familybutton span{ font-size: var(--ft--25); font-weight: 700;}
.login .login_middle .easylogin .familybutton:focus,
.login .login_middle .easylogin .familybutton:hover,
.login .login_middle .easylogin .familybutton:focus span,
.login .login_middle .easylogin .familybutton:hover span{text-decoration: none;}
/* 20240621 e */

.login .login_middle .easylogin .flogin_content{border: 0; text-align: center; display: flex; flex-direction: column; justify-content: center;}
.login .login_middle .easylogin .flogin_content p{font-weight: 700; margin-bottom: 30px; color:#333; padding-left: 0; }
.login .login_middle .easylogin .flogin_content p >b{color:#00C63B;}
.login .login_middle .easylogin .flogin_content a{width: 100%; padding:20px; text-align: center;  background-color: #00C63B; color:#fff;font-weight: 700; font-size: var(--ft--22); border-radius: 40px; margin-top:0;}
.login .login_middle .easylogin .flogin_content a > span{display: inline-block; position: relative; padding-left:32px}
.login .login_middle .easylogin .flogin_content a > span::before{
    content:"";
    display: inline-block;
    width: 25px;
    height: 23px;
    background-image: url("../images/sub/naverIcon.png");
    background-repeat: no-repeat;
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
    .login_agree{margin:0;}
    .login .login_middle{flex-direction: column;}
    .login .login_middle .familylogin{width: 100%; padding-bottom: 0;}
    .login .login_middle .easylogin{width: 100%;}
    .login .login_middle .easylogin .flogin_content{padding:5% 10%;}
}
@media screen and (max-width: 670px) {
    .login_agree .p-agree__condents{float: none; width: 100%;}
    .login_agree .p-agree ul.margin_t_5{float: none; width: 100%; margin-top: 10px; margin-left: 0;}
    .login .login_middle .familylogin .Sortation ul li .flogin_content a{display: block; margin:5px auto; width: 100%; max-width: 320px;}
}
@media screen and (max-width: 480px) {
    .login .login_middle .familylogin .Sortation ul li.active .flogin_content{padding:25px;}
}