@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Sen:400,700&display=swap&subset=korean,latin-ext');

 /* Element Reset */
*{-webkit-text-size-adjust:none ; outline:none; color:inherit; letter-spacing: -0.5px;}
html, body {min-height:100%;}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select {margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; font-weight: normal; font-size: 20px;}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0); overflow-x:hidden;}
a{text-decoration:none; letter-spacing: -0.5px;}
a[href^="tel"]{ font-style:normal}
address, caption, em, var {font-style:normal;font-weight:normal}
p {line-height: 1.6; letter-spacing: -0.5px;}
i {display: inline-block;}
video, audio, object{ width:100%; height:auto}
ol, ul, dl, li{list-style:none}
fieldset, img{border:0}
legend, caption, hr{display:none}
table{border-collapse:collapse;border-spacing:0}
input {box-sizing: border-box; padding: 0 10px; border: 1px solid #dbdbdb; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input::-webkit-input-placeholder {color: #999;}
input:-ms-input-placeholder {color: #999;}
input::placeholder {color: #999; opacity: 1;}
button {box-sizing: border-box; border: 0; background-color: transparent; cursor: pointer;}
textarea {box-sizing: border-box; width: 100%; padding:10px; border: 1px solid #dbdbdb; resize: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select {box-sizing: border-box; border: 1px solid #dbdbdb; cursor: pointer; -webkit-border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;}


/* 전체 */
html.fix {position: fixed; left: 0; right: 0; margin: 0 auto;}
#A_Wrap {position: relative; overflow: hidden; width: 100%; max-width: 640px; min-width: 640px; margin:0 auto;}
#A_Container {box-sizing: border-box; position: relative; width: 100%; min-height: 100vh; padding: 90px 0 0 0;}
#A_Container_Wrap {position: relative;}
#A_Container_Wrap:after {display: block; clear: both; *zoom: 1; content: '';}
.inner {box-sizing: border-box; width: 580px; margin: 0 auto;}


/* header */
#A_Header {position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; z-index: 80;}
#A_Header .inner {height: 90px; padding: 0 20px;}
#A_Header .logo {position: relative; float: left; padding: 24px 0 0 0; z-index: 2;}
#A_Header .logo a {display: block; width: 180px; height: 34px;}
#A_Header .logo a svg {display: block;}
#A_Header .logo a svg g > * {fill: #fff;}

#A_Header .lang {position: relative; float: right; margin: 0 60px 0 0; box-sizing: border-box; width: 34px; height: 80px; padding: 28px 0 0 0; z-index: 2;}
#A_Header .lang svg {display: block; float: left; width: 34px; height: 34px; cursor: pointer;}
#A_Header .lang svg g > * {stroke: #fff;}
#A_Header .lang ul {display: none; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 120px; padding: 15px 0; background-color: #fff; box-shadow: 3px 3px 10px rgba(0,0,0,0.5); z-index: 1;}
#A_Header .lang ul li a {display: block; line-height: 1.6; font-family: 'Sen'; font-size: 18px; font-weight: 500; color: #666; text-align: center;}
#A_Header .lang ul li a:hover {color: #111;}

.menubar {position: absolute; top: 50%; transform: translateY(-50%); right: 50px; width: 30px; height: 22px; cursor: pointer; z-index: 2;}
.menubar li {position: absolute; left: 0; right: 0; margin: 0 auto; width: 100%; height: 2px; background-color: #fff;}
.menubar li:nth-child(1) {top: 0; }
.menubar li:nth-child(2) {top: 10px;}
.menubar li:nth-child(3) {top: 20px;}
.menu_wrap {display: none; position: fixed; top: 90px; right: 0; bottom: 0; overflow-y: scroll; margin: 0 auto; box-sizing: border-box; width: 100%; max-width: 640px; height: calc(100vh - 90px); background-color: #fff; z-index: 1;}
.menu_wrap .true_l {position: relative; display: block; box-sizing: border-box; width: 100%; height: 120px; line-height: 120px; padding: 0 50px; font-size: 26px; color: #fff; background: url(../images/common/true_bg.jpg) no-repeat 0 0;}
.menu_wrap .true_l:before {display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 50px; width: 9px; height: 16px; background: url(../images/common/true_arrow.png) no-repeat 0 0; content: '';}
.menu_wrap .true_l i {display: inline-block; margin: 0 20px 0 0; width: 60px; height: 59px; background: url(../images/common/true_logo.jpg) no-repeat 0 0; vertical-align: middle;}

.gnb .gnb_tit {display: block; padding: 0 50px; height: 80px; line-height: 80px; font-size: 26px; color: #666; cursor: pointer; border-bottom: 1px solid #ddd; background-image: url(../images/common/arrow_down.png); background-repeat: no-repeat; background-position: 570px center;}
.gnb .lnb {display: none; padding: 20px 50px; background-color: #f6f6f6;}
.gnb .lnb li {margin: 20px 0 0 0;}
.gnb .lnb li:first-child {margin: 0;}
.gnb .lnb li a {display: block; color: #666;}
.gnb li.open .gnb_tit {color: #333; border-bottom: 1px solid #34558b; background-image: url(../images/common/arrow_up.png);}

#A_Header.on {background-color: #fff; border-bottom: 1px solid #ddd;}
#A_Header.on:before {visibility: visible; opacity: 1;}
#A_Header.on .logo a svg g path {fill: #caa26e;}
#A_Header.on .logo a svg g polygon {fill: #caa26e;}
#A_Header.on .logo a svg g > g path {fill: #caa26e;}
#A_Header.on .lang svg g > * {stroke: #333;}
#A_Header.on .menubar li {background-color: #333;}

#A_Header.active {background-color: #fff; border-bottom: 1px solid #ddd;}
#A_Header.active:before {visibility: visible; opacity: 1;}
#A_Header.active .logo a svg g path {fill: #caa26e;}
#A_Header.active .logo a svg g polygon {fill: #caa26e;}
#A_Header.active .logo a svg g > g path {fill: #caa26e;}
#A_Header.active .lang svg g > * {stroke: #333;}
#A_Header.active .menubar li {background-color: #333;}

/* footer */
#A_Footer {width:100%; overflow: hidden; position:relative; background-color: #333;}
#A_Footer .ft_links .inner:after {display: block; clear: both; *zoom: 1; content: '';}
#A_Footer .ft_links .page_link {display: block; float: left; line-height: 80px; color: #999;}
#A_Footer .ft_links .sns_links {float: right;}
#A_Footer .ft_links .sns_links li {float: left; width: 80px; height: 80px; margin: 0 0 0 1px;}
#A_Footer .ft_links .sns_links li a {display: block; width: 100%; height: 100%; text-indent: -9999px; background-color: #383838; background-image: url(../images/common/sns_icons.png); background-repeat: no-repeat; transition: background-color 0.3s ease-in-out;}
#A_Footer .ft_links .sns_links li:nth-child(1) a {background-position: 0 0;}
#A_Footer .ft_links .sns_links li:nth-child(2) a {background-position: -90px 0;}
#A_Footer .ft_links .sns_links li:nth-child(3) a {background-position: -180px 0;}
#A_Footer .ft_links .sns_links li a:hover {background-color: #2a2a2a;}
#A_Footer .ft_links .sns_links li:nth-child(1) a:hover {background-position: 0 -90px;}
#A_Footer .ft_links .sns_links li:nth-child(2) a:hover {background-position: -90px -90px;}
#A_Footer .ft_links .sns_links li:nth-child(3) a:hover {background-position: -180px -90px;}

#A_Footer .ft_txt {padding: 25px 0; border-top: 1px solid #444;}
#A_Footer .ft_txt .inner li {margin: 10px 0 0 0;}
#A_Footer .ft_txt .inner li:first-child {margin: 0;}
#A_Footer .ft_txt .inner li:after {display: block; clear: both; *zoom: 1; content: '';}
#A_Footer .ft_txt .inner li strong {display: block; float: left; width: 150px; height: 34px; line-height: 34px; color: #666; letter-spacing: -1px;}
#A_Footer .ft_txt .inner li p {display: block; float: left; width: calc(100% - 150px); line-height: 34px; color: #666; letter-spacing: -1px;}
#A_Footer .ft_txt .inner li span {display: inline-block; margin: 0 15px 0 0; line-height: 34px; color: #666; vertical-align: top; letter-spacing: -1px;}
#A_Footer .ft_txt .inner p.copy {margin: 20px 0 0 0; line-height: 34px; font-size: 17px; color: #666; letter-spacing: -1px;}