@charset "utf-8";

.inner{position: relative; max-width: 1480px; margin: 0 auto; box-sizing: border-box;}
.inner.wide{max-width: 1800px;}
.inner:after{content: ""; display: block; clear: both;}
@media all and (max-width: 1860px){
    .inner.wide{width: 100%; padding: 0 20px;}
}
@media all and (max-width: 1600px){
    .inner{width: 100%; padding: 0 20px !important;}
}
@media all and (max-width: 1280px){
    .inner{padding: 0 15px !important;}
}
@media all and (max-width: 768px){
    .inner{padding: 0 10px !important;}
}

/* 본문바로가기 */
#skip-navigation{position: absolute; z-index: 9999; left: 0; top: 0;}
#skip-navigation *{list-style: none; margin: 0; padding: 0;}
#skip-navigation a{display: block; width: 1px; height: 1px; overflow: hidden; color: #fff; white-space: nowrap;}
#skip-navigation a:focus,
#skip-navigation a:active{width: 100px; height: auto; background: #000;}

/* 헤더영역 */
#header{position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 92px; color: #111111;}
/*#header:before{content: ""; position: absolute; top: 100%; left: 0; display: block; width: 100%; height: 0; background: #fff; transition: height 0.2s;}*/
#header .bg_for_header{position: absolute; top: 100%; left: 0; display: block; width: 100%; height: 0; background: #fff; transition: height 0.2s;}
#header:after{content: ""; position: absolute; z-index: -1; top: 100%; left: 0; display: block; width: 100%; height: 1px; background: rgba(0,0,0,0.10); transition: height 0.2s;}
#header .logo{position: absolute; z-index: 1; top: 23px; left: 0;}
/* #header .logo .color{display: none;} */
#header .logo .white{display: none;}
#header .logo .color{display: block;}
#header .logo a{position: relative; display: block;}
#header .logo a .c_name{position: absolute; bottom: 0; left: 100%; margin: 0 0 -1px 1px; font-weight: 700; font-size: 18.5px; line-height: 100%; letter-spacing: 0.5px; white-space: pre; color: #b01e46;}

#header .lnb{width: 100%;}
#header .lnb > ul{display: flex; justify-content: center; line-height: 92px; text-align: center;}
#header .lnb > ul:after{content: ""; display: block; clear: both;}
#header .lnb > ul > li{float: left; position: relative; display: block;}
#header .lnb > ul > li:hover,
#header .lnb > ul > li.current{background: #b01e46; color: #fff;}
#header .lnb > ul > li:hover .submenu,
#header .lnb > ul > li.current .submenu{background: #b01e46; color: #fff;}
/*#header .lnb > ul > li:before{content: ""; position: absolute; z-index: 1; right: 0; top: 0; display: block; width: 1px; height: 0; background: #e9e9e9;}*/
/*#header .lnb > ul > li:first-child:after{content: ""; position: absolute; z-index: 1; left: 0; top: 0; display: block; width: 1px; height: 0; background: #e9e9e9;}*/
#header .lnb > ul > li > a{display: block; padding: 0 60px; box-sizing: border-box; border-left: 1px solid transparent; font-weight:400;}
#header .lnb > ul > li:last-child > a{border-right: 1px solid transparent;}
#header .lnb > ul > li .submenu{overflow: hidden; transition: height 0.2s; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 0; color: #222; line-height: 180%; /*line-height: 28px;*/ background: #fff; box-sizing: border-box; border-left: 1px solid transparent;}
#header .lnb > ul > li:last-child .submenu{border-right: 1px solid transparent;}
#header .lnb > ul > li .submenu li a{display: block; box-sizing: border-box; padding: 0 10px; font-size: 14px;}

#header .top_quick{position: absolute; top: 30px; right: 0; font-size: 12.5px;}
#header .top_quick:after{content: ""; display: block; clear: both;}
#header .top_quick li{float: left; position: relative; padding: 0 13px;}
#header .top_quick li:not(:last-child):before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: block; width: 1px; height: 22px; background: rgba(0, 0, 0, 0.05);}
#header .top_quick li a:before{content: ""; display: inline-block; vertical-align: top; margin: 3px 5px 0 0; width: 23px; height: 21px; background-repeat: no-repeat; /*background-position: bottom center;*/ background-position: top center;}
#header .top_quick li:nth-child(1) a:before{background-image: url(../img/common/top_quick_search.png);}
#header .top_quick li:nth-child(2) a:before{background-image: url(../img/common/top_quick_qna.png);}
#header .top_quick li:nth-child(3) a:before{background-image: url(../img/common/top_quick_location.png);}

#header.fixed{background: #fff; color: #111;}
#header.fixed:after{background: #e9e9e9;}
#header.fixed .logo .white{display: none;}
#header.fixed .logo .color{display: block;}
#header.fixed .logo a .c_name{color: #b01e46;}
#header.fixed .top_quick li a:before{background-position: top center;}
#header.fixed .top_quick li:not(:last-child):before{background: #ddd;}
#header.fixed #btn_m_open .bar{background: #111;}

#header.on{background: #fff; color: #111;}
#header.on:before{/*height: 241px;*/ height: 256px; background: #fff; border-bottom: 1px solid #e9e9e9; box-sizing: border-box;}
#header.on .bg_for_header{/*height: 241px;*/ /*height: 256px;*/ background: #fff; border-bottom: 1px solid #e9e9e9; box-sizing: border-box;}
#header.on:after{display: none;}
#header.on .logo .white{display: none;}
#header.on .logo .color{display: block;}
#header.on .logo a .c_name{color: #b01e46;}
#header.on .lnb > ul > li > a{border-left: 1px solid #e9e9e9;}
#header.on .lnb > ul > li:last-child > a{border-right: 1px solid #e9e9e9;}
#header.on .lnb > ul > li .submenu{border-left: 1px solid #e9e9e9;}
#header.on .lnb > ul > li:last-child .submenu{border-right: 1px solid #e9e9e9;}
#header.on .lnb > ul > li:before{height: 332px; height: 347px; /* #header 높이 + #header.on:before 높이 - 1px */ transition: height 0.2s;}
#header.on .lnb > ul > li:first-child:after{height: 332px; height: 347px; /* #header 높이 + #header.on:before 높이 - 1px */ transition: height 0.2s;}
#header.on .top_quick li:not(:last-child):before{background: #ddd;}
#header.on .top_quick li a:before{background-position: top center;}

body.sub #header {color: #fff;}
body.sub #header:after {background:rgba(255,255,255,0.15);}
body.sub #header .logo .color{display: none;}
body.sub #header .logo .white{display: block;}
body.sub #header .logo a .c_name{color: #fff;}

body.sub #header .top_quick li a:before {background-position:bottom center;}
body.sub #header .top_quick li:not(:last-child):before {background: rgba(255, 255, 255, 0.2);}

body.sub #header.fixed{background: #fff; color: #111;}
body.sub #header.fixed:after{background: #e9e9e9;}
body.sub #header.fixed .logo .color{display: block;}
body.sub #header.fixed .logo .white{display: none;}
body.sub #header.fixed .logo a .c_name{color: #b01e46;}
body.sub #header.fixed .top_quick li a:before {background-position:top center;}
body.sub #header.fixed .top_quick li:not(:last-child):before {background: rgba(0, 0, 0, 0.05);}

body.sub #header.on{background: #fff; color: #111;}
body.sub #header.on:after{background: #e9e9e9;}
body.sub #header.on .logo .color{display: block;}
body.sub #header.on .logo .white{display: none;}
body.sub #header.on .logo a .c_name{color: #b01e46;}
body.sub #header.on .top_quick li a:before {background-position:top center;}
body.sub #header.on .top_quick li:not(:last-child):before {background: rgba(0, 0, 0, 0.05);}

#btn_m_open{display: none;  position: absolute; z-index: 2; right: 15px; top: 22px; width: 26px; height: 20px; font-size: 0;}
#btn_m_open .bar{position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: 2px; background: #111;}
#btn_m_open .bar1{top: 0;}
#btn_m_open .bar2{top: 50%; transform: translateY(-50%);}
#btn_m_open .bar3{bottom: 0;}

#header .mobile_lnb{display: none; overflow-y: auto; position: fixed; z-index: 3; left: 100%; top: 0; width: 100%; height: 100%; box-sizing: border-box; transition: left 0.25s ease-in-out; background: #fff; font-size: 15px; color: #111;}
#header .mobile_lnb.on{left: 0;}
#header .mobile_lnb .mobile_lnb_header{position: relative; padding: 60px 0 0;}
#header .mobile_lnb .mobile_lnb_header #btn_m_close{position: absolute; z-index: 2; right: 15px; top: 22px; width: 26px; height: 20px; font-size: 0;}
#header .mobile_lnb .mobile_lnb_header #btn_m_close .bar{position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: 2px; background: #fff;background: #111;}
#header .mobile_lnb .mobile_lnb_header #btn_m_close .bar1{top: 50%; transform: translateY(-50%) rotate(45deg);}
#header .mobile_lnb .mobile_lnb_header #btn_m_close .bar2{top: 50%; transform: translateY(-50%) rotate(-45deg);}

#header .mobile_lnb .mobile_lnb_header ul{display: flex; justify-content: space-between; background: #4a4a4a; color: #fff;}
#header .mobile_lnb .mobile_lnb_header ul li{width: 50%;}
#header .mobile_lnb .mobile_lnb_header ul li a{display: block; text-align: center; padding: 15px 0;}
#header .mobile_lnb .mobile_lnb_header ul li a span:before{content: ""; display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; width: 23px; height: 21px; background: url(../img/common/top_quick_qna.png) no-repeat center bottom;}
#header .mobile_lnb .mobile_lnb_header ul li:nth-child(2) a span:before{background-image: url(../img/common/top_quick_location.png); margin: -2px 3px 0 0;}
#header .mobile_lnb > ul > li > a{position: relative; display: block; padding: 15px 20px; border-bottom: 1px solid #e9e9e9;}
#header .mobile_lnb > ul > li > a:after{content: ""; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); right: 20px; display: block; width: 10px; height: 10px; margin: -4px 0 0; border: 1px solid #777; border-top-color: transparent; border-left-color: transparent;}
#header .mobile_lnb > ul > li > a.on:after{transform: translateY(-50%) rotate(-135deg); margin: 4px 0 0;}
#header .mobile_lnb > ul > li .submenu{display: none;}
#header .mobile_lnb > ul > li > a.on + .submenu{display: block;}
#header .mobile_lnb > ul > li .submenu{padding: 15px 20px; background: #f8f8f8;}
#header .mobile_lnb > ul > li .submenu li a{display: block; padding: 5px 0; font-size: 14px;}

#search{position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 0; opacity: 0; visibility: hidden; overflow: hidden; box-sizing: border-box; padding: 50px 0 57px; background: #fff; }
#search.on{visibility: visible; opacity: 1; width: 100%; overflow: visible; transition: all 0.3s ease-in-out;}
#search .search_box{position: relative; max-width: 682px; margin: 0 auto; box-sizing: border-box;}
#search .search_box input{width: 100%; box-sizing: border-box;  padding: 17px 10px; border: none; border-bottom: 2px solid #111; background: #fff; font-size: 20px; font-weight: 300; color: #111; background: transparent url("../img/common/btn_search.png") no-repeat top 50% right 10px;}
#search .search_box input::placeholder{color: #111 !important;}
#search .search_box button{position: absolute; top: 0; right: 0; display: block; width: 58px; height: 58px; box-sizing: border-box; padding: 0; border: none; background: transparent; font-size: 0; cursor: pointer;}
#search .sw_list{left: 50%; transform: translateX(-50%); width: 0; opacity: 0; visibility: hidden; overflow: hidden; position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: 682px; margin: 19px auto 0; font-size: 0; transition: all 0.3s ease-in-out;}
#search.on .sw_list{width: 100%; opacity: 1; visibility: visible; left: auto; transform: none;}
#search .sw_list li{margin: 0 5px 5px 0;}
#search .sw_list li a{display: block; padding: 5px 18px 6px; border-radius: 37px; font-size: 14px; color: #fff; background: #b01e46;}
#search #btn_s_close{position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: block; width: 40px; height: 39px; margin: 28px 0 0; background: transparent; font-size: 0; text-indent: -9999px;}
#search #btn_s_close:before,
#search #btn_s_close:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); display: block; width: 130%; height: 2px; background: #f6f6f6;}
#search #btn_s_close:after{transform: translate(-50%, -50%) rotate(-45deg);}

/* 풋터 영역 */
#footer{clear: both; width: 100%;}
#footer .ft_menu{background: #f5f5f5; box-shadow: inset 0 -3px 5px -3px rgba(0, 0, 0, 0.2);}
#footer .ft_menu .link{float: left; line-height: 82px;}
#footer .ft_menu .link li{float: left;}
#footer .ft_menu .link li a{display: block; padding: 0 15px 0 0;}
#footer .ft_menu .link li:not(:first-child) a:before{content: ""; display: inline-block; vertical-align: middle; margin: -3px 15px 0 0; width: 2px; height: 2px; background: #555;}

#footer .ft_menu .sns{float: right; padding: 19px 0 0;}
#footer .ft_menu .sns li{float: left; margin: 0 0 0 16px;}
#footer .ft_menu .sns li a{display: block; width: 44px; height: 44px; border-radius: 50%; font-size: 0; text-indent: -9999px; background: #ddd;}
#footer .ft_menu .sns li a.in{background: url("../img/common/ft_sns_in.png") no-repeat center;}
#footer .ft_menu .sns li a.fb{background: url("../img/common/ft_sns_fb.png") no-repeat center;}
#footer .ft_menu .sns li a.nb{background: url("../img/common/ft_sns_nb.png") no-repeat center;}
#footer .ft_menu .sns li a.yt{background: url("../img/common/ft_sns_yt.png") no-repeat center;}

#footer .ft_body{padding: 50px 0 40px;}
#footer .ft_body .ft_logo{float: left; width:auto; /*width: 232px;*/ padding: 0 50px 0 0;}
#footer .ft_body .ft_logo .txt_wrap{position: relative; display: inline-block;}
#footer .ft_body .ft_logo .c_name{vertical-align:bottom; /*position: absolute; bottom: 0; left: 100%;*/ margin: 0 0 -1px 1px; font-weight: 700; font-size: 18.5px; line-height: 100%; letter-spacing: -0.5px; white-space: pre; color: #8a8a8a;}

#footer .ft_body .ft_info{float: left; /*width: calc(100% - 282px);*/ box-sizing: border-box; /*padding: 0 303px 0 0;*/ font-size: 13px; line-height: 160%;}
#footer .ft_body .ft_info .c_info:after{content: ""; display: block; clear: both;}
#footer .ft_body .ft_info .c_info li{float: left;}
#footer .ft_body .ft_info .c_info li:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 12px 0 12px; width: 2px; height: 2px; background: #555;}
#footer .ft_body .ft_info .c_info li.last:after{display: none;}
#footer .ft_body .ft_info .c_info li.last + li{clear: both;}
#footer .ft_body .ft_info .copyright{padding: 15px 0 0; font-size: 11px; font-weight: 200; letter-spacing: 0.5px;}
#footer .ft_body .sitelink{position: absolute; top: 0; right: 0;}
#footer .ft_body .sitelink:after{content: ""; display: block; clear: both;}
#footer .ft_body .sitelink li{float: left; margin: 0 0 0 7px;}
#footer .ft_body .sitelink li a{display: block; height: 70px; box-sizing: border-box; margin: 2px; padding: 6px 20px; border: 1px solid #bdbdbd; border-radius: 4px; text-align: center; background: #fff; box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);}
#footer .ft_body .sitelink li p{font-weight: 700; font-size: 15px; color: #6d6e71;}
#footer .ft_body .sitelink li span{display: block; line-height: 19px; border-radius: 19px; font-size: 12px; color: #fef9fa; background: #ca0743; padding: 0 10px 0; margin: 6px 0 0;}
#footer .ft_body .sitelink li:nth-child(2) span{letter-spacing: 0.5px; font-weight: 500;}
#footer .ft_body .sitelink li:nth-child(1) span:after{content: ""; display: inline-block; vertical-align: middle; margin: -1px 0 0 2px; width: 3px; height: 3px; border: 1px solid #fff; border-top-color: transparent; border-left-color: transparent; transform: rotate(-45deg);}
#footer .ft_body .sitelink li:nth-child(2) span:after{content: ""; display: inline-block; vertical-align: middle; margin: 4px 0 0 6px; width: 5px; height: 5px; border: 2px solid #fff; border-top-color: transparent; border-left-color: transparent; transform: rotate(-135deg);}
#footer .ft_body .sitelink .to_top .btn_top{display: block; line-height: 100%; padding-top: 46px; font-size: 12px; font-weight: 700; background: #e9e9e9 url("../img/common/btn_top.png") no-repeat top 12px center;}
#footer .ft_body .sitelink li.lg_b2b a{margin: 0; padding: 0; box-shadow: none; border: none; height: 74px;}
#footer .ft_body .sitelink li.lg_b2b a img{height: 100%; width: auto;}
#footer .ft_body .sitelink li.lg_family{position: relative;}
#footer .ft_body .sitelink li.lg_family .family_site{position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin: 0 auto -2px; padding: 6px 0; display: block; width: 150px; border-radius: 4px; border: 1px solid #bdbdbd; background: #fff; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 3px 0 rgb(0,0,0,0.2); display: none; }
#footer .ft_body .sitelink li.lg_family .family_site li{float: none; margin: 0; }
#footer .ft_body .sitelink li.lg_family .family_site li a{display: block; height: auto; margin: 0; padding: 1px 10px; box-sizing: border-box; border: none; border-radius: 0; text-align: center; box-shadow: none; font-size: 13px;}

/* 우측 고정 메뉴 */
.floating_menu{position: fixed; z-index: 2; bottom: 20px; right: 20px;}
.floating_menu .tit{float: right; width: 132px; height: 132px; margin: 0 0 23px; border: 6px solid #fff; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.35);}
.floating_menu ul{clear: both;}
.floating_menu ul li{position: relative; height: 58px; line-height: 58px; margin: 10px 0 0; text-align: center;}
.floating_menu ul li a{float: right; display: block; margin: 0 42px 0 0; border-radius: 58px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.35);}
.floating_menu ul li.naver_talktalk a{background: #00c63b; color: #fff;}
.floating_menu ul li.kakao a{background: #fae100; color: #111;}
.floating_menu ul li.ars{display: none;}
.floating_menu ul li.ars a{background: #b01e46; color: #fff;}
.floating_menu ul li.inquiry a{background: #111; color: #fff;}
.floating_menu ul li a span{position: relative; display: block; padding: 0 0 0 58px; font-size: 0; text-align: left;}
.floating_menu ul li a:hover span,
.floating_menu ul li a:focus span{font-size: inherit; width: 122px;}
.floating_menu ul li a span:before{content: ""; position: absolute; top: 0; left: 0; display: block; width: 58px; height: 58px; border-radius: 50%; background-size: contain; background-position: center; background-repeat: no-repeat;}
.floating_menu ul li a:hover span:before,
.floating_menu ul li a:focus span:before{border-radius: 50% 0 0 50%;}
.floating_menu ul li.naver_talktalk a span:before{background-image: url("../img/common/floating_menu01.png");}
.floating_menu ul li.kakao a span:before{background-image: url("../img/common/floating_menu02.png");}
.floating_menu ul li.ars a span:before{background-image: url("../img/common/floating_menu04.png");}
.floating_menu ul li.inquiry a span:before{background-image: url("../img/common/floating_menu03.png");}

.dim{display: none; position: fixed; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}

@media all and (max-width: 1860px){
    #header .logo{float: left; position: relative; padding: 23px 0 0; top: auto; left: auto;}
    #header .lnb > ul{position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; padding: 0 300px 0 260px;}
    #header .top_quick{float: right; position: static; padding: 30px 0 0; top: auto; right: auto;}
}
@media all and (max-width: 1600px){
    #footer .ft_body .sitelink{right: 40px;}
    #footer .ft_body .ft_info{padding: 0 393px 0 0;}
}
@media all and (max-width: 1280px){
    #header .logo{padding: 27px 0 0;}
    #header .logo a img{width: 90px;}
    #header .logo a .c_name{font-size: 15px; font-weight: 500;}
    #header .lnb > ul{padding: 0 300px 0 230px;}
    #header .lnb > ul > li > a{padding: 0 45px; font-size: 15px;}
    #header .top_quick{padding: 34px 0 0; font-size: 11px;}

    #footer .ft_menu .link{line-height: 60px;}
    #footer .ft_menu .sns{padding: 7px 0 0;}
    #footer .ft_body .ft_logo{width: auto; padding: 0 120px 0 0;}
    #footer .ft_body .ft_logo img{width: 80px;}
    #footer .ft_body .ft_logo .c_name{font-size: 14px; font-weight: 500;}
    #footer .ft_body .sitelink{right: 20px;}
    #footer .ft_body .ft_info{width: calc(100% - 200px); padding: 0 373px 0 0;}
}
@media all and (max-width: 1200px){
    #header{/*position: static;*/ height: 60px;}
    #header .lnb{display: none;}
    #header .logo{padding: 13px 0 0;}
    #header .logo a img{width: 80px;}
    #header .logo a .c_name{font-size: 14px;}
    #header .top_quick{padding: 18px 40px 0 0;}
    #header .top_quick li{display: none;}
    #header .top_quick li:before{display: none !important;}
    #header .top_quick li.quick_search{display: block; padding: 0;}
    #header .top_quick li.quick_search a{font-size: 0; text-indent: -9999px;}

    #btn_m_open{display: block;}
    #header .mobile_lnb{display: block;}

    #search .search_box{padding: 20px 0 0;}
    #search .sw_list li a{padding: 2px 10px; font-size: 13px;}

    #footer .ft_body{padding: 25px 0;}
    #footer .ft_body .ft_logo{float: none; width: 100%; padding: 0;}
    #footer .ft_body .sitelink{position: static; float: none; right: auto; padding: 5px 0 0;}
    #footer .ft_body .sitelink li:first-child{margin-left: 0;}
    #footer .ft_body .ft_info{clear: both; float: none; width: 100%; padding: 20px 0 0;}
    #footer .ft_body .ft_info .copyright{padding: 5px 0 0;}

    .floating_menu .tit{width: 58px; height: 58px; border-width: 2px; margin: 0 0 10px;}
    .floating_menu ul li a{margin: 0;}
}
@media all and (max-width: 1024px){
    #search .search_box input{padding: 10px 10px; font-size: 16px;}

    #footer .ft_body{padding: 30px 0;}
    #footer .ft_body .ft_info .c_name{padding: 0 0 10px;}
    #footer .ft_body .ft_info .c_info li:after{margin: 0 6px 0;}
    #footer .ft_body .sitelink li{margin: 0 0 0 3px;}
    #footer .ft_body .sitelink li.lg_family a{padding: 6px 10px;}
    #footer .ft_body .sitelink li.lg_family .family_site{width: 132px;}
}
@media all and (max-width: 768px){
    #footer .ft_menu{padding: 20px 0; font-size: 12px; background: none;}
    #footer .ft_menu .link{float: none; position: relative; text-align: center; line-height: inherit; padding: 10px 0;}
    #footer .ft_menu .link:before{content: ""; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); display: block; width: calc(100% + 20px); height: 100%; background: #f5f5f5;}
    #footer .ft_menu .link li{float: none; display: inline-block;}
    #footer .ft_menu .link li a{padding: 0 5px 0 0;}
    #footer .ft_menu .link li:not(:first-child) a:before{margin: 0 5px 0 0; width: 1px; height: 8px; background: #bdbdbd;}
    #footer .ft_menu .sns{float: none; overflow: hidden; text-align: center;}
    #footer .ft_menu .sns li{float: none; display: inline-block;}
    #footer .ft_menu .sns li a{width: 37px; height: 37px; background-size: contain !important;}
    #footer .ft_body .ft_info .c_info li:nth-child(4):after{display: none;}
    #footer .ft_body .ft_info .c_info li:nth-child(5){clear: both;}

    .floating_menu ul li.ars{display: block;}
}
@media all and (max-width: 568px){
    #header .logo a .c_name{font-size: 12px;}

    #footer .ft_body .ft_logo{float: none; padding: 0;}
    #footer .ft_body .sitelink{float: none; padding: 20px 0 0;}
    #footer .ft_body .sitelink li:first-child{margin: 0;}
    #footer .ft_body .sitelink li a{height: 60px; padding: 0 15px;}
    #footer .ft_body .sitelink li.lg_b2b a{height: 64px;}
    #footer .ft_body .sitelink li.lg_family a{padding: 9px 10px;}
    #footer .ft_body .sitelink li.lg_family .family_site{width: 119px;}
    #footer .ft_body .sitelink li.lg_family .family_site li a{padding: 0 5px; font-size: 11px;}
    #footer .ft_body .sitelink li p{line-height: 100%;}
    #footer .ft_body .sitelink li p img{height: 13px;}
    #footer .ft_body .sitelink li span{line-height: 16px; border-radius: 16px; margin: 9px 0 0; font-size: 10px;}
    #footer .ft_body .sitelink .to_top .btn_top{background-size: 15px; padding-top: 37px;}
    #footer .ft_body .ft_info{padding: 10px 0 0; font-size: 11px;}
    #footer .ft_body .ft_info .c_name{padding: 0 0 5px;}
}
@media all and (max-width: 400px){
    #header .mobile_lnb{font-size: 14px;}
    #header .mobile_lnb .mobile_lnb_header ul li a{padding: 10px 0;}
    #header .mobile_lnb > ul > li > a{padding: 10px 10px;}
    #header .mobile_lnb > ul > li .submenu{padding: 10px 15px;}
    #header .mobile_lnb > ul > li .submenu li a{padding: 3px 0; font-size: 13px; border-bottom: 1px dashed #ddd;}
}
@media all and (max-width: 380px){
    #footer .ft_body .ft_info .c_info li:nth-child(4){clear: both;}
    #footer .ft_body .ft_info .c_info li:nth-child(5){clear: none;}
    #footer .ft_body .ft_info .c_info li:nth-child(8){clear: both}
    #footer .ft_body .ft_info .c_info li:nth-child(3):after{display: none;}
    #footer .ft_body .ft_info .c_info li:nth-child(7):after{display: none;}
}
.bg_bar{position: absolute; z-index: 0; top: 0; left: 0; display: block; width: 100%; height: 50%; background: rgba(49, 73, 113, 0.63); transition: 0.3s;}

#sitemapBG,
#sitemapNAV{display: none;}







/****서브레이아웃 스타일공통****/

.sub_visual {height:314px; position:relative; box-sizing:border-box; padding:92px 0 0 0; overflow:hidden;}
.sub_visual .text {}
.sub_visual .text h2 {line-height:100%; padding:76px 0 0; font-size:40px; font-weight:500; text-align:center; color:#fff;}
.sub_visual .visual_img {display:block; position:absolute; z-index:-1; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); background-repeat:no-repeat; background-position:center; background-size:cover;}

.subdepth {margin:-40px 0 0; text-align:center;}
.subdepth .inner {}
.subdepth .nav-link {text-align:center; font-size:0; background:#fff; display:inline-block; padding:0 30px; border-radius:0 0 40px 0; box-shadow:2px 2px 12px 5px rgba(0,0,0,.04);}
.subdepth .nav-link span {display:inline-block; font-size:16px; color:#111; position:relative;}
.subdepth .nav-link span::after {content:'|'; display:block; position: absolute; right:0; top:50%; transform:translateY(-50%); color:#eee;}
.subdepth .nav-link span:nth-child(2),
.subdepth .nav-link span:nth-child(3) {margin:0 0 0 -1px;}
.subdepth .nav-link span:last-child::after {content:none;}
.subdepth .nav-link span a {display:block; line-height:80px; padding:0 40px; word-break:keep-all; white-space:nowrap;}
.subdepth .nav-link span a.on {font-weight:700; color:#a50034;}


.sub_container {min-height:250px; padding:80px 0;}

.subtitle {text-align:center;}
.subtitle h3 {font-size:30px; padding:0 0 50px 0;}


@media all and (max-width: 1300px){
  .sub_visual {height:250px;}
  .sub_visual .text h2 {padding: 50px 0 0; font-size: 32px;}

  .subdepth {margin:0; height:60px; position:relative; border-bottom:1px solid #ddd; text-align:left; background:#fff; box-sizing:border-box;}
  .subdepth .inner {}
  .subdepth .nav-link {background:none; box-shadow:none; border-radius:0; padding:10px 0; overflow:hidden; display:flex; align-items:flex-start; overflow-x:scroll;}
  .subdepth .nav-link span {margin-left:15px;}
  .subdepth .nav-link span:nth-child(2), .subdepth .nav-link span:nth-child(3) {margin-left:10px;}
  .subdepth .nav-link span:first-child {margin-left:0;}
  .subdepth .nav-link span::after {content:none;}
  .subdepth .nav-link span a {line-height:40px; padding:0 15px;}
  .subdepth .nav-link span a.on {background:#a50034; color:#fff; border-radius:30px; display:inline-block;}
}

@media all and (max-width: 1024px) {
  .sub_container {padding:60px 0;}
  .subtitle h3 {font-size:24px; padding:0 0 40px 0;}
}

@media all and (max-width: 768px) {
  .sub_visual .text h2{font-size: 25px;}
  .sub_container {padding:40px 0;}
  .subtitle h3 {font-size:20px; padding:0 0 30px 0;}
}




/**/
.sub_tit {}
.sub_tit .title {text-align:center; line-height:1; position: relative;}
.sub_tit .title strong {display:inline-block; font-size:2.5rem; font-weight:500; letter-spacing:-2px;}
.sub_tit .title small {display:none; margin-left:15px; font-size:1.1rem; color:#969696; font-weight:600; letter-spacing:0.5px; vertical-align: bottom;}
.sub_tit .navi_text {display:none; float:right; margin:2rem 0.5rem 0 0;}
.sub_tit .navi_text > * {vertical-align: middle;}
.sub_tit .navi_text span {display:inline-block; font-size:0.95rem; color:#444; font-weight:300;}
.sub_tit .navi_text img {margin: 0 5px;}

@media screen and (max-width:768px){
  .sub_tit .title {padding-bottom:1.2rem;}
  .sub_tit .title strong {font-size:2.6rem;}
  .sub_tit .title small {margin-left:8px;}
  .sub_tit .navi_text {margin: 1.5rem 0.5rem 0 0;}
}

@media screen and (max-width:640px){
  .sub_tit .title strong {font-size:2.4rem;}
  .sub_tit .title small {margin-left:5px; font-size: 0.9rem;}
}

@media screen and (max-width:520px){
  .sub_tit .navi_text {display:none;}
}





/**/
.sec_tit {position:relative; z-index:1;}
.sec_tit span {display:inline-block; position:relative; color:#fff; font-size:1.3rem; line-height:1; font-weight:600; padding:0.9rem 1.6rem;  text-indent:-2.5px; letter-spacing:-0.5px;}
.sec_tit span::after {content:''; display:block; position:absolute; z-index:-1;  top:0; left:0; width:100%; height:100%;  background #283890; transform:skew(-12deg);}
.sec_tit.gray span {color:#222; font-weight:400;}
.sec_tit.gray span::after {background:#ececec;}

@media screen and (max-width:1024px){
  .sec_tit span {padding:0.75rem 1.5rem;}
}

.sec_tit_chk {position:relative; z-index:1;}
.sec_tit_chk span {display:inline-block; position:relative; vertical-align:middle; color:#222; font-size:1.2rem; line-height:1; padding:0.9rem 1.6rem; text-indent:-2.5px; letter-spacing:-0.5px; white-space: nowrap;}
.sec_tit_chk span::before {content:''; display:inline-block; vertical-align:middle; width:24px; height:24px; margin-right:10px; background:url('../img/contents/sec_tit_chk_ic.png') no-repeat;}
.sec_tit_chk span::after {content:''; display:block; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; background:#ececec; transform:skew(-12deg);}

@media screen and (max-width:1024px){
  .sec_tit_chk span {padding: 0.75rem 1.5rem;}
}