@charset "utf-8";

/*layout*/
.wow { 	visibility: hidden;}
body.overflow { overflow: hidden;}


/*header*/
.header { top:0; transition: .3s ease; box-sizing: border-box; position: fixed; z-index: 2; width: 100%;}
.logo {  display: inline-block; margin-top: 17px;}
.logo a {width:227px; height: 44px; text-indent: -99999px; display: block; background: url("/resources/img/logo_new.png?ver=260708_22") center/contain no-repeat;}

.header_top {  background: #fff;  height: 80px; box-sizing: border-box; border-bottom: 1px solid #eee;}
.header_right { float:right; margin-top: 18px;}
.header_right .hr_btn_box { vertical-align: middle; display: inline-block;}
.header_right .hr_btn_box a { display: inline-block; padding:5px 0; color: #777; padding-left: 27px; margin-left: 20px; background: url("/resources/img/common/login_ico.png") no-repeat 0 center; transition:.3s ease;}
.header_right .hr_btn_box a.join_btn { background: url("/resources/img/common/join_ico.png") no-repeat 0 center; }
.header_right .hr_btn_box a.mypage_btn { background: url("/resources/img/common/mypage_ico.png") no-repeat 0 center; }
.header_right .hr_btn_box a.logout_btn { background: url("/resources/img/common/logout_ico.png") no-repeat 0 center; }
.header_right .hr_btn_box a:hover {text-decoration: underline; color: #333;}
.header_right .ham_btn {margin-left: 38px; vertical-align: middle; padding: 11px; text-align: center; cursor: pointer; display: inline-block; width: 44px; height: 44px;box-sizing: border-box; border: none; transition: .3s ease; background: #2979cb;}
.header_right .ham_btn .txt { text-indent: -99999px; display: inline-block; }
.header_right .ham_btn i { width: 22px; height: 3px; display: block; background: #fff; margin-top: 6px;}
.header_right .ham_btn i:first-child {margin-top: 0;}
.header_right .ham_btn:hover { background: #193777;}

.header_bottom { background: #fff;  box-sizing: border-box; border-bottom: 2px solid #193777; position: relative;}
.header_bottom::before { content: ''; display: inline-block; position: absolute; left: 0; top:47px; border-top:2px solid #193777; width: 100%; z-index:2;}
.header_bottom .gnb { position: relative; border-right:1px solid #f5f5f5; }
.header_bottom .gnb > ul { font-size: 0;}
.header_bottom .gnb > ul > li {text-align: center; display: inline-block; font-size: 17px; width: 20%; vertical-align: top;}
.header_bottom .gnb > ul > li::before { content: ''; display:inline-block; position: absolute; width: 20%; height: 100%; bottom: 0; background: #f9f9f9; transform: translate3d(-50%, 0, 0);  -ms-transform: none; transition: .3s ease; opacity: 0;}
.header_bottom .gnb > ul > li:hover::before {opacity: 1;}
.header_bottom .gnb > ul > li > a { background: #fff; border-right:1px solid #eee; font-size: 18px; font-weight: 500; padding: 11px 0; display: block;  position: relative; z-index: 1;}
.header_bottom .gnb > ul > li:first-child > a { border-left:1px solid #eee;}
.header_bottom .gnb > ul > li > ul { display: none; text-align: left;  padding: 10px 0 20px; position: relative;}
.header_bottom .gnb > ul > li > ul::before { content: ''; display: inline-block; border-left:1px solid #f5f5f5; top: 0; height: 100%; position: absolute; margin-left: -1px;}
.header_bottom .gnb > ul > li > ul > li { text-align: center; letter-spacing: -1px; }
.header_bottom .gnb > ul > li > ul > li > a { padding: 10px; box-sizing: border-box; display: block; font-size: 16px;transition: .3s ease; color: #555; }
.header_bottom .gnb > ul > li > ul > li > a.pt_color { color: #f78a9d; }
.header_bottom .gnb > ul > li > ul > li:hover { background: #2979cb;}
.header_bottom .gnb > ul > li > ul > li:hover a { color:#fff; }


.header_bottom .gnb > ul > li > ul > li > a.deps-2 { background:#fafafa !important; color:#333 !important; border-bottom:solid 1px #2fb2ce; }
.header_bottom .gnb > ul > li:hover > ul > li > a.deps-2 { background: #f0f0f0  !important; }
.header_bottom .gnb > ul > li > ul > li > a.deps-2.pointer { cursor: pointer; }
.header_bottom .gnb > ul > li > ul > li > a.deps-3 { padding:8px; border-bottom:solid 1px #f5f5f5; font-size: 14px; }
.header_bottom .gnb > ul > li:hover > ul > li > a.deps-3 { border-bottom: solid 1px #f0f0f0; }
.header_bottom .gnb > ul > li > ul > li:last-child > a { border-bottom: none; }

.header_bottom .gnb > ul > li:last-child {display: none;}  /* 210203 이용안내 */





/*  mobilemenu */
.mobile_menu { position: fixed; width: 100%; height: 100vh;left:0; top: -120%;  z-index: 100; transition: .7s ease; background: rgba(0,0,0,.4);}
.mobile_menu.open { top:0}
.mobile_menu .hr_btn_box {display: none;}
.mobile_menu .menu_box {background: #fff; margin-top: 10vh; }
.mobile_top { position:relative; height: 67px; background: #193777; box-sizing: border-box; padding: 20px 22px;text-align: center}
.mobile_top > a {transition: .3s ease; position: absolute; left:22px; top: 50%; transform: translateY(-50%); height: 36px; width: 36px; background:rgba(255,255,225,.15) url("/resources/img/common/home_btn.png") center no-repeat; display: inline-block; float: left; text-indent: -99999px;border-radius: 50px;}
.mobile_top > a:hover { background-color: rgba(255,255,225,.35);}
.mobile_top > .txt {position: absolute; left:50%; top: 50%;transform: translate3d(-50%, -50%, 0);  display: inline-block; color: #fff; font-size: 20px; font-weight: 500;}
.mobile_top > .close_btn { display: inline-block; }
.mobile_menu .gnb { position: relative; border-right:1px solid #f5f5f5;max-height: 80vh; overflow-y: auto; }
.mobile_menu .gnb > ul { font-size: 0; padding-bottom: 107px;}
.mobile_menu .gnb > ul > li {text-align: center; display: inline-block; font-size: 17px; width: 20%; vertical-align: top;}
.mobile_menu .gnb > ul > li > a { border-bottom: 1px solid #ddd; border-right:1px solid #ddd; font-size: 18px; font-weight: 500; padding: 14px 0; display: block;  position: relative; z-index: 1;}
.mobile_menu .gnb > ul > li:first-child > a { border-left:1px solid #eee;}
.mobile_menu .gnb > ul > li > ul {text-align: left;}
.mobile_menu .gnb > ul > li > ul::before { content: ''; display: inline-block; border-left:1px solid #eee; top: 0; height: 100%; position: absolute; margin-left: -1px;}
.mobile_menu .gnb > ul > li > ul > li { text-align: center; letter-spacing: -1px;}
.mobile_menu .gnb > ul > li > ul > li > a { padding: 10px; box-sizing: border-box; display: block; font-size: 14px; transition: .3s ease; color: #555; }
.mobile_menu .gnb > ul > li > ul > li > a.deps-2 { background:#fafafa !important; border-bottom: solid 1px #2fb2ce; cursor: default; }
.mobile_menu .gnb > ul > li > ul > li > a.deps-3 { padding: 8px; font-size: 12px; border-bottom:solid 1px #f5f5f5 }
.mobile_menu .gnb > ul > li > ul > li > a.pt_color { color: #f78a9d; }
.mobile_menu .gnb > ul > li > ul > li:hover > a { background: #eee;}
.mobile_menu.mobileOn .gnb > ul > li > ul { display: none;}

.mobile_menu .gnb > ul > li:last-child {display: none;} /* 210203 이용안내 */


.mobile_menu .close_btn { border: none; cursor: pointer; outline: none; transition: .3s ease; position: absolute; right: 30px;  width: 24px; height:24px; display: inline-block; background: none;  text-indent: -99999px; transform: rotate(45deg);}
.mobile_menu .close_btn::before { content: ''; display: inline-block; width: 21px; height: 2px; background: #fff; transform: translate3d(-50%, -50%, 0); position: absolute;left: 50%; top: 50%;}
.mobile_menu .close_btn::after { content: ''; display: inline-block; width: 2px; height: 21px; background: #fff; transform: translate3d(-50%, -50%, 0); position: absolute;left: 50%; top: 50%;}
.mobile_menu .close_btn:hover {transform: rotate(180deg) ;}

.mobile_menu .product_list .item .hover{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; color: #fff; opacity: 0; transition: all .3s ease-in-out; font-size: 17px; transform: skew(-0.03deg);}
.mobile_menu .product_list .item:hover .hover {opacity: 1;}

.mobile_menu .right {position: relative; box-sizing: border-box; padding: 50px 70px; float: right; width: 55%; height: 100%; background: #fff; overflow: hidden;}
/*.mobile_menu .right .gnb { position: relative; z-index: 1; height: 80vh;overflow-y: auto;}*/
.mobile_menu .right .gnb { position: absolute; z-index: 1; overflow-y: auto; top: 50%; transform: translateY(-50%);}
.mobile_menu .right .mobile_logo { width:154px; height: 22px; text-indent: -99999px;  background: url("/resources/img/logo.png") no-repeat;display: inline-block; margin-bottom: 100px; }
.mobile_menu .right .gnb > ul > li { font-size: 0; margin-bottom: 50px;}
.mobile_menu .right .gnb > ul > li::after { content:'';display: block; clear: both;}
.mobile_menu .right .gnb > ul > li > a {float:left;  min-width: 140px; transition: .3s ease; display: inline-block; vertical-align: top; font-size: 38px; font-weight: 500; width: 27%; word-break: keep-all;}
.mobile_menu .right .gnb > ul > li > ul {display: none; margin-top:15px; display: inline-block; float:left; vertical-align: top; font-size: 0; width: 73%; max-width:73%;}
.mobile_menu .right .gnb > ul > li > ul > li { margin-bottom: 20px; font-size:17px; margin-right: 20px; display: inline-block; font-size: 17px;}
.mobile_menu .right .gnb > ul > li > ul > li > a { padding-left: 23px;  }
.mobile_menu .right .gnb > ul > li:hover > a { color:#005282}
.mobile_menu .right .gnb > ul > li > ul > li:hover > a {background: url("/resources/img/common/mobile_hover.png") 2px 4px no-repeat; text-decoration: underline;}

.mobile_menu .right .right_img { position:absolute; animation: rotate 120s infinite linear; bottom:-203px; right:-340px;  display: inline-block; width:955px; height:931px;  background: url('/resources/img/main/sec02_left.png?ver=201030') no-repeat; background-size:cover; }

/* mobile ul hide */
.mobileOn .right .gnb > ul > li > ul { display:none}


/*footer*/

#footer {background: #052d46}
.footer_top { padding: 20px 0; border-bottom: 1px solid #2a4c62;}
.footer_top .f_pry li { display: inline-block;  position: relative; vertical-align: middle;}
.footer_top .f_pry li::before { display: inline-block; vertical-align: middle; width:2px; height: 2px; background: #fff; border-radius: 5px; margin: 0 9px; content: '';}
.footer_top .f_pry li:first-child::before {display: none;}
.footer_top .f_pry li a {color: #fff; font-size: 14px; vertical-align: middle;}
.footer_top .f_pry li a:hover {text-decoration: underline;}
.footer_top .f_logo { width:154px; height: 22px; display: inline-block; text-indent: -99999px; background: url("/resources/img/logo_w.png") no-repeat;}
.footer_bottom {position:relative; padding: 35px 0 55px; color: #fff; font-size: 14px; line-height:23px;display: inline-block; width: 100%; transform: skew(-0.03deg);}
.foot_txt { margin-bottom: 20px}
.foot_txt p { display: inline-block; margin-left: 28px;}
.foot_txt p:first-child { margin-left: 0}
.foot_txt p .tit { font-weight: 500; margin-right: 6px;}
.foot_txt p .txt {}
.footer_bottom .copy { color: #aaa; }
.footer_bottom .top_btn { position: absolute; right: 0; top: 0; padding:20px 20px 15px; padding-top: 23px; border:1px solid #ddd; box-sizing: border-box; color:#fff; background: url("/resources/img/common/top_btn.png") no-repeat center 15px; transition: .3s ease;}
.footer_bottom .top_btn:hover { border:1px dashed #fff; background-color: #2979cb; background-position: center 11px;}


/*푸터 개인정보 처리방침 레이어팝업*/
.footer_pu {display: none;}
.footer_pu {position: fixed; background-color: rgba(0,0,0,0.3); width: 100%; height: 100vh; top: 0px; left: 0; z-index: 9999;}
.footer_pu .cont_wrap {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background-color: #fff; max-height: 80%; height: 100%;}
.footer_pu .cont_wrap .tit_box {background-color: #343651; line-height: 60px; box-sizing: border-box; color: #fff; font-size: 25px; color: #fff; font-weight: 600; height: 60px; padding: 0 15px;}
.footer_pu .cont{background-color: #fff; padding: 30px 3%; line-height: 150%; overflow-y: auto; box-sizing: border-box; height: calc(100% - 60px); word-break: keep-all;}

.footer_pu .close {width: 60px; height: 60px; position: absolute; right: 0; top: 0; background-color: #caa064; cursor: pointer; transition: all .3s ease-in-out;}
.footer_pu .close:hover{background-color: #af8d61;}
.footer_pu .close p {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 20px; height: 20px;}
.footer_pu .close span {position: absolute; width: 25px; height: 2px; background-color: #fff; transform: rotate(-45deg); top: 9px; left: -3px;}
.footer_pu .close span:last-child {transform: rotate(45deg);}



@media screen and (max-width:1700px){
    .sns_box a {margin-left: 0;}
    .header .right_wrap .lang {margin-left: 15px;}
    .header .right_wrap {right: 115px;}

}

@media screen and (max-width:1600px){
    .header .right_wrap .sns_box {display: none;}
    .header .gnb_wrap {left: 53%;}
    
    .mobile_menu .right .gnb > ul > li > ul > li > a {padding-left: 18px;}
    .mobile_menu .right .gnb > ul > li > a {font-size: 30px;}
    .mobile_menu .right .gnb > ul > li > ul {margin-top: 10px;}
}

@media screen and (max-width:1400px){
    .header .gnb_wrap { display: none;}
    .header .right_wrap .sns_box {display: inline-block;}
    
    .header .right_wrap {transform: translateY(-50%);}

}
@media screen and (max-width:1300px){
    
    .mobile_menu .left { width: 100%; display: none;}
     .mobile_menu .right { width: 100%; padding: 50px 40px;}
    .mobile_menu .right .mobile_logo { margin-bottom: 40px;}
    .mobile_menu .right .right_img {width: 500px; height: 500px; bottom: -10%; right: -10%;}
    .mobile_menu .right .gnb {position: absolute; top: 50%; transform: translateY(-50%); height: auto;}
    .header .logo {left: 4%;}
    .mobile_menu .right .gnb > ul > li > a {font-size: 38px;}
    .mobile_menu .right .gnb > ul > li > ul {margin-top: 0px;}
}



@media screen and (max-width:1100px){
    .header {}
/*    .main .ham_btn.main, .sub .ham_bt {height: 100px;}*/
    /* .mobile_menu {overflow-y: auto;} */
   
    

    .sitemap { display: none;}
    
    .cyber_pu .cont_wrap {max-height: 90%; height: 90%;}
    #footer .cyber_pu .cont_inner {padding: 0 5%;}
    .cyber_pu .cont_wrap .if_box1{padding-left: 5%; width: 40%;}
    .cyber_pu .cont_wrap .if_box2 {padding-right: 5%; width: 60%;}
    .cyber_pu .cont_wrap .cont_box {height: 100%; overflow-y: auto;}
    
      
}

@media screen and (max-width:1024px){
    
    .cyber_pu .cont_wrap .if_wrap {display: block;}
    .cyber_pu .cont_wrap .if_box {width: 100%; padding: 15px 5% 10px;}
    .cyber_pu .cont_wrap .if_box .if_txt {margin-top: 5px;}
    #footer .cyber_pu .cont_wrap .if_box2 .if {width: 100%;}
 
}


@media screen and (max-width:768px){
    .header, .header.drop, .header.scroll { height: 70px;}
/*    .ham_btn, .main .ham_btn.main, .sub .ham_btn { width:60px;  height: 70px; min-height: 70px;}*/

    .header .right_wrap { right:75px;}
    .header_right .hr_btn_box {display: none;}
    .header_right .ham_btn {margin-left: 0;}
    .mobile_menu .hr_btn_box {display: inline-block;    float: left;
    margin-left: 40px;}
    .mobile_menu .hr_btn_box a {font-size: 15px; display: inline-block;
    padding: 5px 0;
    color: #fff;
    margin-left: 15px;
    transition: .3s ease;}

    .header_bottom {display: none;}
    .mobile_top > .txt {display: none;}
    .mobile_menu .right {background:rgba(255,255,255,0.95)}
    
    .mobile_menu .right .gnb {position: static; top: 0; transform: inherit;}
    .mobile_menu .right .gnb > ul > li { margin-bottom: 30px;}
    .mobile_menu .right .gnb > ul > li > a {padding-left: 0; font-size: 30px;width:100%; margin-bottom: 15px; box-sizing: border-box;}
    .mobile_menu .right .gnb > ul > li > ul { width: 100%;}
    .mobile_menu .right .gnb > ul > li > ul > li { display: block; width: 100%; margin-right:0; margin-bottom: 10px;}
    .mobile_menu .right .gnb > ul > li > ul > li a { background: url("/resources/img/common/mobile_hover2.png") 2px 4px no-repeat; }
    .mobile_menu .right .right_img {width: 300px; height: 300px;}
    #footer {padding: 0px 0 30px;}
    #footer .foot_right_logo { position: relative; margin-top: 15px; display: block;}
    .f_top .right { width: 100%; margin:0 0 20px;}
    #footer .familysite { float:right;}
    .f_top .f_logo { display: none;;}
    #footer .sns_box { margin-right:0;}
    
    .mobile_menu .close_btn { right: 20px; width: 40px; height: 40px;     transform:rotate(45deg); top: 15px; }
    .mobile_menu .close_btn:hover { transform: rotate(45deg);}
    
    .cyber_pu .cont_wrap .ct2 .txt_wrap {display: block; padding: 8px 0; text-align: center; box-sizing: border-box;}
    .cyber_pu .cont_wrap .ct2 .txt_wrap .txt_box {margin-top: 5px;}
    .cyber_pu .cont_wrap .ct2 .txt_wrap .txt_box:first-child{margin-top: 0;}

    .cyber_pu .cont_wrap .cont {padding: 30px 3%;}
    #footer .cyber_pu .cont_inner {padding: 0 3%;}
    .cyber_pu .cont_wrap .if_box {padding: 15px 3% 10px;}
    .cyber_pu .cont_wrap .ct1 .tit {font-size: 22px;}
    .cyber_pu .cont_wrap .tit_box p {font-size: 60px;}
    .cyber_pu .cont_wrap .tit_box .sm {font-size: 40px;}
    .cyber_pu .cont_wrap .ct2 .tit {font-size: 18px;}
    .cyber_pu .cont_wrap .tit_box{padding-top: 60px;}
    
    .cyber_pu .close {width: 60px; height: 60px;}
    .cyber_pu .close span {top: 17px; left: 30px;}
    
    
    .mobile_menu .inner {width: 100%;}
    .mobile_menu .menu_box {margin: 0;}
    .mobile_menu .gnb {max-height: none; height: calc(100vh - 67px);}
    .mobile_menu .gnb > ul > li { width: 100%; text-align: left;}
    .mobile_menu .gnb > ul > li > a {border-right: 0; padding: 16px 30px; box-sizing: border-box;}
    .mobile_menu .gnb > ul > li > a.open {color: #0088d0;}
    .mobile_menu .gnb > ul > li:first-child > a {border-left:0; border-top: 0;}
    .mobile_menu .gnb > ul > li > ul {background:#f9f9f9; border-bottom: 2px solid #ddd; display: none;}
    .mobile_menu .gnb > ul > li > ul > li {margin-top: 0;}
    .mobile_menu .gnb > ul > li > ul > li > a.deps-3 { padding: 8px 40px; background: #efefef; border-bottom:1px solid #e2e2e2; }
    .mobile_menu .gnb > ul > li > ul > li > a {padding: 10px 30px; font-size: 16px; box-sizing: border-box; text-align: left; border-bottom: 1px dashed #e2e2e2;}
    .mobile_menu .gnb > ul > li > ul > li:last-child > a {border-bottom: 0;}
    .mobile_menu .gnb > ul > li > a::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #ddd;position: absolute; right: 20px; top: 50%; transform: translate3d(0, -50%, 0);}
    .mobile_menu .gnb > ul > li > a.open::before { border-bottom: 10px solid #0088d0; border-top:0;}


    .foot_txt p { display: block; margin-left: 0; margin-bottom: 7px;}
    .footer_top .f_pry li {margin-right: 7px;}
    .footer_top .f_pry li::before { display: none;}
}


@media screen and (max-width:650px){
    .cyber_pu .cont_wrap .if_box {display: block;}
    .cyber_pu .cont_wrap .if_box .mail {margin-top: 10px;}
    .cyber_pu .cont_wrap .ct1 .txt1 {font-size: 18px;}
   
}

@media screen and (max-width:500px){
    
    /* .logo {width: 200px;} */
    .logo {margin-top: 19px;}
.header .right_wrap .sns_box { display: none;}


}