@charset "utf-8";



html, body { 
    width:100%; 
    height:100%;
    padding: 0; 
    margin: 0 auto; 
    font-size:10px;
    text-align:center; 
    font-family: 'NanumBarunGothicR'; 
    color: #333; 
    -webkit-overflow-scrolling: touch;
}
a, img, button { border:none; selector-dummy:expression(this.hideFocus=true); }
select { -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; background: #fff; }
.select_box { float: left; border: 1px #ccc solid; padding-left: 10px; }
a[href^=tel] { color: inherit; text-decoration: none; }
/*select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand{ display: none; }*/
img { vertical-align: top; }
/*button { color: #fff; }*/
a:link, a:visited, a:active { text-decoration:none; color: #333; }
ul { margin:0; padding:0; list-style:none; }
li { margin:0; padding:0; }
a:focus { text-decoration: underline; }
/*a img:focus { outline: 1px #006899 solid;}*/
strong { font-weight: normal;}
#wrap { width: 100%; height: auto; overflow-x: hidden; }
#skipnav { width: 200px; height: 35px; line-height: 35px; position: absolute; left: 0; top: 0; z-index: 110; font-size: 1.3rem; overflow: hidden; }
#skipnav a { width: 100%; height: 100%; background: #333; display: block; color: #fff; position: absolute; left: 0; top: -35px; transition-duration: 1s; }
#skipnav a:focus { top: 0;}

/* quick_menu */
.quick_menu { width: 70px; position:fixed; margin: -176px 0 0 630px; z-index: 100; top: 50%; left: 50%; background: #f5f5f5; border: 1px #ccc solid; display: none; }
.quick_menu li a { padding: 55px 0 10px;  font-size: 1.3rem; border-bottom: 1px #ccc dashed; display:block; font-family: 'NanumBarunGothicR'; }
.quick_menu li:nth-child(1) { background: url('../img/common/quick_01.png') no-repeat center 10px; }
.quick_menu li:nth-child(2) { background: url('../img/common/quick_02.png') no-repeat center 10px; }
.quick_menu li:nth-child(3) { background: url('../img/common/quick_03.png') no-repeat center 10px; }
.quick_menu li:nth-child(4) { background: url('../img/common/quick_04.png') no-repeat center 10px; }

.quick_menu button { padding: 10px 0; font-size: 1.4rem; }
.quick_menu button::after { content: "\f106"; margin-left: 5px; font-family:'FontAwesome'; }

/* gnb */
header { width: 100%; height: 125px; position: relative; z-index: 100; }

header a { width: 100%; height: 100%; display: block; }

header > h1 { display: none; }

header .burger { display: none; }

.gnb { width: 100%; height: 125px; margin: 0 auto; }

.gnb .area_top { width: 100%; height: 35px; background: #f1f1f1; font-size: 1.3rem; }
.gnb .area_top ul { width: 1200px; height: 100%; margin: 0 auto; text-align: right; }
.gnb .area_top ul li { display: inline-block; text-align: center; line-height: 35px; }
.gnb .area_top ul li::after { content:"·"; margin: 0 5px; display: inline-block; }
.gnb .area_top ul li:last-child::after { content:""; margin: 0 0 0 0; font-size: 1.3rem; }
.gnb .area_top ul li a { color:#333; display: inline; }

.gnb .area_main_nav { width: 1200px; height: 90px; margin: 0 auto; position: relative; }

.gnb .area_main_nav nav a { color: #666; }
.gnb .area_main_nav nav a:focus, .gnb .area_main_nav nav a:active { color: #006899; text-decoration: none; }
.gnb .area_main_nav h1 { width: 300px; height: 100%; margin: 0 75px 0 0; padding: 0 0 0 0; float: left; text-indent: -101%; font-size: 0; background: url('/theme/hansarang/img/logo.png?0828888') left center no-repeat; overflow: hidden; }
.gnb .area_main_nav nav { height: 100%; }
.gnb .area_main_nav nav > ul {height: 100%; float:right;}
.gnb .area_main_nav nav > ul > li {  float: left; font-size: 2rem; font-family: 'NanumBarunGothicR'; position: relative; }
.gnb .area_main_nav nav > ul > li > a { width:160px; color: #444; display: block; padding:30px 0; }

.gnb .area_main_nav nav > ul:hover > li > a, .gnb .area_main_nav nav > ul > li.on > a { color: #f27b91;  }
.gnb .area_main_nav nav > ul > li:hover > a::after, .gnb .area_main_nav nav > ul > li.on > a::after { content:""; position: absolute; width:70%; height: 2px; background: #f27b91; left: 15%; bottom: 20px; }

.gnb .area_main_nav nav .menu_list { width: 100%; height: auto; position: absolute; top:100px; left: 0; display: none; }
.gnb .area_main_nav nav .menu_list > li { width: 100%; height: auto; font-size: 1.6rem; line-height: 24px; font-family: 'NanumBarunGothicR'; position: relative; }
.gnb .area_main_nav nav .menu_list a { display: block; padding:6px 0; }
.gnb .area_main_nav nav .menu_list li:hover, .gnb .area_main_nav nav .menu_list li.on { background: #f27b91; }
.gnb .area_main_nav nav .menu_list li a:hover, .gnb .area_main_nav nav .menu_list li.on a { color: #eef3f5; }

.gnb .area_main_nav nav .btn_close { width: 30px; height: 30px; position: absolute; font-size: 1.1rem; color: #fff; right: -30px; top: 30px; background: #666; display: none; }

header > .bg { width: 100%; height: 265px; background: #fff8f9; position: absolute; z-index: -1; top: 125px; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; display: none; }


footer { width: 100%; padding: 30px 0 30px ; background: #5d6467; text-align: left; color: #b3b8ba; font-size: 1.3rem; line-height: 18px; }
footer a { width: 100%; height: 100%; display: block; }
footer .content { width: 1100px; padding-left: 275px; box-sizing: border-box; height: auto; margin: 0 auto; background: url('../img/logo_tail.png') left center no-repeat; background-position: 0px; }

footer .area_link { margin-bottom: 15px; }

footer .link_pri { height: 28px; float: left; }
footer .link_pri li { height: 28px; float: left; display: table; font-size: 1.4rem; }
footer .link_pri li a { height: 100%; padding-right: 5px; display: table-cell; vertical-align: middle; color: #fff; line-height: 1; }
footer .link_pri li a::before { content:"|"; padding-right: 5px; color: #7f8587; }
footer .link_pri li:nth-child(2) a::before { display: none; }
footer .link_pri li:first-child { display: none; }

footer .link_sns { margin-left: 10px; float: left; }
footer .link_sns li { width: 28px; margin: 0 5px; height: 28px; float: left; }
/*
footer .link_sns li:nth-child(1) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; }
footer .link_sns li:nth-child(2) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; background-position: -38px; }
footer .link_sns li:nth-child(3) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; background-position: -76px; }
footer .link_sns li:nth-child(4) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; background-position: -114px; }
footer .link_sns li:nth-child(5) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; background-position: -152px; }
footer .link_sns li:nth-child(6) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; background-position: -190px; }
footer .link_sns li:nth-child(7) { background: url('http://www.xi.co.kr/img/common/icon_sns.png') left center no-repeat; background-position: -228px; }
*/

footer .link_family { float: right; color: #fff; position: relative; }
footer .link_family select { width: 166px; height: 30px; padding-left: 10px; box-sizing: border-box; background: #4a5053; border: 1px #43484a solid; float: left; }
footer .link_family a { width: 28px; height: 30px; box-sizing: border-box; background: #4a5053; border: 1px #43484a solid; float: left; line-height: 28px; color: #fff; position: absolute; top:0; right:0; text-align: center; }

footer address { font-size: 1.2rem; }
footer address dl dt { float: left; }
footer address dl dd { float: left; }
footer address dl dd::after { content:"|"; margin: 0 5px; }
footer address dl dd:last-child::after { content:""; margin: 0 0; }
footer address .tel > a { display: inline; color: #f9ff91; }
footer .copyright { margin-top:10px ; }

/* gnb tablet */
@media only screen and (max-width:1024px) {

  html, body { min-width:320px; }

  #skipnav { display: none; }
  
  header { width: 100%; height: 60px; position: relative; z-index: 100; background: rgba(255, 255, 255, 1); }

  header .burger { width: 30px; height: 19px; display: block; position: absolute; left: 10px; top: 20px; z-index: 1; }
  header .burger span { width: 30px; height: 3px; border-radius: 3px; display: block; background: #000; position: relative; }
  header .burger span:nth-child(2) { margin-top: 5px; }
  header .burger span:nth-child(3) { margin-top: 5px; }

  header  > h1 { width: 110px; height: 30px; margin: 0 0 0 -55px; background: url('../img/logo.png') left center no-repeat; text-indent: -101%; font-size: 0; background-size: cover; position: absolute; z-index: 1; top: 15px; left: 50%; display: block; }

  .gnb { width: 100%; height: 100%; position: fixed; z-index: 2; overflow-x: hidden; background: #31343e; overflow: hidden; overflow-y: auto; left: -100%; }

  .gnb .area_main_nav { width: 100%; height: auto; }

  .gnb .btn_close { width: 30px; height: 30px; position: absolute; top: 20px; right: 20px; background: url('http://www.xi.co.kr/img/common/btn_close.png') left center no-repeat; background-size: cover; display: block; text-indent: -201%; font-size: 0; z-index: 10; }

  .gnb .area_top { width: 100%; height:auto; padding: 50px 20px 20px; box-sizing: border-box; background: transparent; border-bottom: 1px #4e515a solid ; }
  .gnb .area_top .btn_login span { width: 40px; height: 40px; }
  .gnb .area_top ul { width: 100%; margin: 0 auto; text-align: right; }
  .gnb .area_top ul::after { content:""; display: block; clear: both; }
  .gnb .area_top ul li { width: 50%; outline: 1px #31343e solid; height: 40px; display: block; float: left; text-align: center; line-height: 40px; background: #909193; }
  .gnb .area_top ul li:first-child { width: 100%; margin-bottom: 10px; background: transparent; text-align: left; }
  .gnb .area_top ul li a { width: 100%; height: 100%; display: block; color: #fff; font-size: 1.5rem; line-height: 40px; }
  .gnb .area_top ul li:first-child a { padding-left: 40px; box-sizing: border-box; background: url('http://www.xi.co.kr/img/common/btn_lock.png') left center no-repeat; background-size: 30px; }
  .gnb .area_top ul li::after { content:""; margin: 0; }

  .gnb a { width: 100%; height: 100%; box-sizing: border-box; display: block; }
  .gnb .area_main_nav nav a { color: #666; }
  .gnb .area_main_nav nav a:focus { color: #a39787; text-decoration: none; }
  .gnb .area_main_nav h1 { width: 110px; height: 30px; margin-left: -55px; background-size: cover; position: absolute; z-index: 1; top: 15px; left: 50%; }
  .gnb .area_main_nav nav { width: 100%; }
  .gnb .area_main_nav nav > ul { width: 100%; text-align: left; }
  .gnb .area_main_nav nav > ul > li { width: 100%; height: auto; font-size: 1.6rem; display: block; border-left: 3px #a39787 solid; border-bottom: 1px #4e515a solid ; }
  .gnb .area_main_nav nav > ul > li a { color: #a39787; height: 40px; padding: 0 20px; display: block; line-height: 40px; }
  .gnb .area_main_nav nav > ul > li a:hover { color: #a39787; text-decoration: none; }
  .gnb .area_main_nav nav > ul:hover > li > a { color: #a39787; text-decoration: none; }
  .gnb .area_main_nav nav .menu_list { width: 100%; height: auto; position: static; background: #434a5d; }
  .gnb .area_main_nav nav .menu_list::after { content:""; display: block; clear: both; }
  .gnb .area_main_nav nav .menu_list::before { content: ""; width:100%; height: 0px; position: absolute; bottom: 0; border-top: 2px #5b637a solid; }
  .gnb .area_main_nav nav .menu_list li { width: 50%; height: auto; font-size: 1.4rem; line-height: 35px; float: left; border-bottom: 1px solid #5b637a; }
  .gnb .area_main_nav nav .menu_list li:hover, .gnb .area_main_nav nav .menu_list li.on { background: transparent; }
  
  .gnb .area_main_nav nav > ul:hover > li > a, .gnb .area_main_nav nav > ul > li.on > a { color: #a39787; }
  .gnb .area_main_nav nav > ul > li:hover > a::after, .gnb .area_main_nav nav > ul > li.on > a::after { display: none; }

  .gnb .area_main_nav nav .menu_list a { padding: 0 20px; display: block; color: #fff; }

  header > .bg { display: none; }

  footer a { width: 100%; height: 100%; display: block; }
  footer .content { width: 100%; height: auto; margin: 0 auto; padding: 0 5%; box-sizing: border-box; box-sizing: border-box; background: none; }

  footer .area_link { margin-bottom: 15px;  }

  footer .link_pri { height: auto; float: none; text-align: center; }
  footer .link_pri li { width: 48.5%; height: 28px; margin-bottom: 10px; background: #555b5d; display: table; font-size: 1rem; outline: 1px #9da1a2 solid; }
  footer .link_pri li:nth-child(2) { float: right; }
  footer .link_pri li:nth-child(4) { float: right; }
  footer .link_pri li a { height: 100%; padding-right: 0; display: table-cell; vertical-align: middle; color: #fff; font-size:1.4rem; letter-spacing:-0.5px;}
  footer .link_pri li a::before { display: none; }
  footer .link_pri li:first-child { display: table; }

  footer .link_sns { display: none; }

  footer .link_family { float: right; color: #fff; display: none; }
  footer .link_family select { width: 138px; height: 28px; background: #4a5053; border: 1px #43484a solid; float: left; }

  footer .link_family button { width: 28px; height: 28px; background: #4a5053; float: left; }

  footer address { font-size: 1.1rem; }
  footer address .company, footer address .ceo, footer address .tel { display: none; }
  footer address dl { text-align: center; }
  footer address dl dt, footer address dl dd { display: inline-block; float: none; font-size: 1.2rem; letter-spacing: -1px; }
  footer address dl dd::after { display: none; }
  footer address > a { display: inline; color: #f9ff91; }
  footer address.agency { display: none; }
  footer p.caution { display: none; }
  footer .copyright { text-align: center; font-size: 1.1rem; }

}
@media only screen and (max-width:640px) {
    footer .link_pri li a {font-size: 1.2rem;}
}
/* gnb mobile iphone5 해상도용 */
@media only screen and (max-width:360px) {

  footer .link_pri li { width: 100%; height: 40px; margin: 0 0 10px; float: none; }

}

/* utill*/
.clf::after { content:""; display: block; clear: both; }
.blind { overflow: hidden!important; position: absolute!important; clip: rect(0 0 0 0)!important; width: 1px!important; height: 1px!important; margin: -1px!important; }

.mt0 { margin-top:0; }
.mt5 { margin-top:5px; margin-top:0.5rem; }
.mt10 { margin-top:10px; margin-top:1rem; }
.mt14 { margin-top:14px; margin-top:1.4rem; }
.mt15 { margin-top:15px; margin-top:1.5rem; }
.mt20 { margin-top:20px; margin-top:2rem; }
.mt30 { margin-top:20px; margin-top:2rem; }
.mt25 { margin-top:25px; margin-top:2.5rem; }
.mt40 { margin-top:40px; margin-top:4rem; }
.mt50 { margin-top:50px; margin-top:5rem; }
.mb0 { margin-bottom:0 !important; }
.mb5 { margin-bottom:5px; margin-bottom:.5rem !important; }
.mb10 { margin-bottom:10px; margin-bottom:1rem; }
.mb15 { margin-bottom:15px; margin-bottom:1.5rem; }
.mb20 { margin-bottom:20px; margin-bottom:2rem; }
.mb25 { margin-bottom:25px; margin-bottom:2.5rem; }
.mb30 { margin-bottom:30px !important; margin-bottom:3rem !important; }
.mb35 { margin-bottom:35px; margin-bottom:3.5rem; }
.mb40 { margin-bottom:40px; margin-bottom:4.0rem; }
.mb45 { margin-bottom:45px; margin-bottom:4.5rem; }
.mb50 {margin-bottom: 50px !important; margin-bottom:5rem;}