@charset "utf-8";
.scrollLock { overflow: hidden; } 

/* 하단 푸터영역 */
footer { width:100%; padding-top:60px; background: #222; color: rgba(255, 255, 255, 0.7); box-sizing: border-box; z-index: 10000;} 

footer .inner{font-size:0;}
.footer_topWrap{border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:40px;}
.footer_left_wrap {display:inline-block; width:calc(100% - 400px); vertical-align: bottom;} 
.footer_left_wrap .footer_logo{margin-bottom:50px;}
.footer_left_wrap .footer_link{}
.footer_left_wrap .footer_link span{display: inline-block; margin-right: 40px;}
.footer_left_wrap .footer_link span:last-child{ margin-right: 0;}
.footer_left_wrap .footer_link span a{font-size:16px; color:#fff; font-weight:600;}
.footer_left_wrap .footer_link span.color a{ color: #6eb0f5; font-weight:800;}

.footer_right_wrap {display:inline-block; width:400px; text-align: right; vertical-align: bottom;} 
.goFamilySite, .goBlog_btn {position: relative; display:inline-block; width: 200px; text-align:left; vertical-align: bottom; margin-left:10px;} 
.goFamilySite > a, .goBlog_btn > a { display: inline-block; color:#fff; font-size: 14px; height:100%; width:100%; box-sizing: border-box; padding-bottom:20px; border-bottom:2px solid #fff;} 
.goFamilySite a p, .goBlog_btn a p{ display: inline-block; line-height:1; width:100%;} 
.goFamilySite.active .familysite_list { display: block; } 
.goFamilySite a span{position: absolute; top:-3px; right:0;}
.goFamilySite .arrow_drop_up { display: none; } 
.goFamilySite.active .arrow_drop_up { display: block; } 
.goFamilySite.active .arrow_drop_down { display: none; } 
.familysite_list { display: none; position:absolute; top:38px; left:0; width:200px; box-sizing: border-box; background-color:#111; z-index: 999;} 
.familysite_list li a { display: block; color:#fff; font-size: 14px; padding:20px 0; text-align: center; transition:all 0.3s; } 
.familysite_list li:hover a { background-color:#333; transition:all 0.3s; }

.footer_right_wrap .snsBtn{display: inline-block; vertical-align: top;}
.footer_right_wrap .snsBtn li{ display: inline-block; vertical-align: middle;}
.footer_right_wrap .snsBtn li a.blogBtn{display: block; width:25px; height:25px; background: url(../img/main/blog_icon_w.png) no-repeat top center; background-size: auto 100%; margin-right:30px;}
.footer_right_wrap .snsBtn li a.youtubeBtn{display: block; width:25px; height:25px; background: url(../img/main/youtube_icon_w.png) no-repeat 20% center; background-size: 100%;}
/* .goBlog_btn a::after{position:absolute; display: block; width:21px; height:8px; content:""; background: url(../img/main/footer_arrow_w.png) no-repeat; background-size: 21px; top:4px; right:0; transition: all 0.3s;}
.goBlog_btn a:hover::after{animation: arrowRight .6s ease-in-out infinite; transition: all 0.3s;} */

.footer_bottomWrap{padding:40px 0;}
.footer_bottomWrap .company_info span{display: inline-block; font-size:15px; color:#888; line-height:1; vertical-align: middle;}
.footer_bottomWrap .company_info span::after{display:inline-block; width:1px; height:10px; background:#888; content:""; margin:0 10px; vertical-align: middle;}
.footer_bottomWrap .copyright span{display: inline-block; font-size:15px; color:#888; line-height:1; vertical-align: middle;}
.footer_bottomWrap .company_info span:last-child::after{display:none;}


.footerPopup{display: none; width:100%; height:100%; position:fixed; background-color: rgba(0,0,0,0.5); z-index: 200; left:0; top:0;}
.footerPopup>div{position:absolute; width:600px; height:280px; left:50%; top:50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 4px; padding:1.3rem; box-sizing: border-box; word-break: keep-all;}
.footerPopup .popup-title{display: flex; justify-content: space-between; padding:1rem 1rem 0; font-size: 1.5rem; font-weight: 600;}
.footerPopup .popup-title .close{ cursor: pointer; }
.footerPopup .popup-title .close span{ font-size: 1.5rem;font-weight: 600;}
.footerPopup .popup-txt{font-size: 1.2rem; line-height: 1.5; padding:1rem;}


@media screen and (max-width:1300px) { 
    .footer_left_wrap {width:calc(100% - 460px);} 
    .footer_left_wrap .company_info span{display: block !important; margin-bottom:10px;}
    .footer_left_wrap .company_info span:last-child{margin-bottom:0;}
    .footer_left_wrap .company_info span::after{display: none !important;}

    .footer_right_wrap {width:460px;} 
}

@media screen and (max-width:1024px) { 
    footer {padding-top:40px;} 
    .footer_topWrap{padding-bottom:30px;}
    .footer_left_wrap {width:calc(100% - 305px);} 
    .footer_left_wrap .footer_logo{ margin-bottom:50px;}
    .footer_left_wrap .footer_logo img{height:30px;}
    .footer_left_wrap .footer_link span{display: inline-block; margin-right: 30px;}

    .footer_right_wrap {width:305px;} 
    .goFamilySite, .goBlog_btn {display:inline-block; width: 200px; margin-left:0; margin-top:0; vertical-align: middle;} 
    
    .footer_bottomWrap {padding:30px 0;} 
    .footer_bottomWrap .footer_left_wrap {display:block; width:100%; margin-bottom:20px;} 
    .footer_bottomWrap .footer_right_wrap {display:block; width:100%; text-align:left; } 

    .footer_right_wrap .snsBtn{display:inline-block; vertical-align: middle !important;}    
    .footer_right_wrap .snsBtn li a.blogBtn{width:22px; height:22px; margin-right:20px !important;}
    .footer_right_wrap .snsBtn li a.youtubeBtn{width:22px; height:22px;}
    
    .footer_left_wrap .company_info span{line-height:1.5; margin-bottom:0;}
    
    .footerPopup>div{position:absolute; width:90%; height:auto !important; border-radius: 4px; padding:30px;}
    .footerPopup .popup-title{font-size:20px;}
    .footerPopup .popup-title .close span{ font-size: 16px;}
    .footerPopup .popup-txt{font-size: 16px;}
}

@media screen and (max-width:768px) { 
    footer {padding-top:30px;} 
    .footer_left_wrap {display:block; width:100%; margin-bottom:10px;} 
    .footer_left_wrap .footer_logo{ margin-bottom:40px;}
    .footer_left_wrap .footer_logo img{height:25px;}
    .footer_left_wrap .footer_link span{display: inline-block; margin-right: 20px;}
    .footer_left_wrap .footer_link span a{font-size:14px; color:#fff; font-weight:600;}

    .footer_right_wrap {display:block; width:100%; text-align:left; } 
    .goFamilySite, .goBlog_btn {display: inline-block; width: 180px; margin-left:0; margin-right: 20px; margin-top:12px;} 
    .goBlog_btn {margin-right: 0;} 
    .goFamilySite > a, .goBlog_btn > a {font-size: 13px; padding-bottom:15px; border-bottom:2px solid #fff;} 

    .familysite_list {width: 180px; top:32px;} 
    .familysite_list li a {font-size: 13px; padding:15px 0; text-align: center; transition:all 0.3s; } 

    .footer_bottomWrap {padding:25px 0;} 
    .footer_bottomWrap .footer_left_wrap {display:block; width:100%; margin-bottom:10px;} 
    .footer_bottomWrap .footer_right_wrap {display:block; width:100%; text-align:left; } 
    .footer_bottomWrap .company_info span{font-size:14px; word-break: keep-all;}
    .footer_bottomWrap .copyright span{font-size:14px;}
    .footer_right_wrap .snsBtn{margin-right:20px !important;}
    .footer_right_wrap .snsBtn li a.blogBtn{width:20px; height:20px; margin-right:15px !important;}
    .footer_right_wrap .snsBtn li a.youtubeBtn{width:20px; height:20px;}
    
    .footerPopup>div{position:absolute; width:90%; height:auto !important; border-radius: 4px; padding:15px;}
    .footerPopup .popup-title{font-size:18px;}
    .footerPopup .popup-title .close span{ font-size: 14px;}
    .footerPopup .popup-txt{font-size: 14px;}
 }

 @media screen and (max-width:420px) { 
    .footer_left_wrap .footer_logo{ margin-bottom:35px;}
    .footer_left_wrap .footer_logo img{height:20px;}
    .footer_left_wrap .footer_link span{display: inline-block; margin-right: 15px;}
    .footer_left_wrap .footer_link span a{font-size:13px;}
    
    .goFamilySite, .goBlog_btn {display: inline-block; width:calc(50% - 6px); margin-right:12px; margin-top:12px;} 
    .goBlog_btn {text-align:center; margin-right: 0;} 
    .goFamilySite > a, .goBlog_btn > a {font-size: 13px; padding-bottom:10px; border-bottom:2px solid #fff;}
    .goBlog_btn a::after{display: none;} 
    
    .familysite_list { width:100%; top:27px;} 
    .familysite_list li a {font-size: 12px; padding:15px 0;} 

    .footer_bottomWrap .company_info span{font-size:12px;}
    .footer_bottomWrap .copyright span{font-size:12px;}
    
    
    .footerPopup>div{position:absolute; width:90%; height:auto !important; border-radius: 4px; padding:8px;}
    .footerPopup .popup-title{font-size:15px;}
    .footerPopup .popup-title .close span{ font-size: 13px;}
    .footerPopup .popup-txt{font-size: 13px;}
 }