@charset "UTF-8";

@font-face {
    font-family:'notoThin';
    font-style: normal;
    font-weight: normal;
    src: url(../../fonts/notokr-thin.eot);
    src: url(../../fonts/notokr-thin.eot?#iefix) format('embedded-opentype'),
         url(../../fonts/notokr-thin.woff) format('woff')}
@font-face {
    font-family:'notoLight';
    font-style: normal;
    font-weight: normal;
    src: url(../../fonts/notokr-light.eot);
    src: url(../../fonts/notokr-light.eot?#iefix) format('embedded-opentype'),
         url(../../fonts/notokr-light.woff) format('woff')}
@font-face {
    font-family:'notoRegular';
    font-style: normal;
    font-weight: normal;
    src: url(../../fonts/notokr-regular.eot);
    src: url(../../fonts/notokr-regular.eot?#iefix) format('embedded-opentype'),
         url(../../fonts/notokr-regular.woff) format('woff')}
@font-face {
    font-family:'notoMedium';
    font-style: normal;
    font-weight: normal;
    src: url(../../fonts/notokr-medium.eot);
    src: url(../../fonts/notokr-medium.eot?#iefix) format('embedded-opentype'),
         url(../../fonts/notokr-medium.woff) format('woff')}

body {margin:0;padding:0;width:100%;height:100%;font-family:'notoRegular';color:#000;}
h1,h2,h3,h4,h5,h6,p {margin:0;padding:0;font-weight:normal;}
ul,ol {margin:0;padding:0;}
li {list-style:none}
strong {font-weight:normal;}
i,em,address {font-style:normal;}
a {color:#000;text-decoration:none;}
button {border:0;}
img {border:0;vertical-align:top;}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/* 게이트 */
.intro_wrap li > img {display:block; width:100%}
.intro_wrap li {position:relative; height:50%; opacity:1!important}
.intro_wrap li a {display:block; position:absolute; top:50%; left:19.2%; right:19.2%; margin-top:-13.3333%; width:61.6%}
.intro_wrap li a img {display:block; width:100%}

/* common */
.tab-holder {position:fixed; top:0; left:0; width:100%; z-index:100}
.tab-holder a {display:block; width:50%; height:50px; float:left; font:2.5rem/50px 'notoLight'; text-align:center; color:#888; background:#fff}
.tab-holder a:first-child {background:#ff6700; color:#fff}

.content-wrap {margin-top:50px; padding:4% 0 13.3333%; background:#111}
.kv-area {padding:0 4% 10%;}
.kv-area img {display:block; width:100%}
.kv-area .txt-holder {margin-top:10.6667%}
.kv-area .txt-holder h1 {font:5.125rem/1 'notoThin'; color:#ff6700; text-align:center}
.kv-area .txt-holder p {margin-top:9.53%; font:2rem/1.3 'notoLight'; color:#ff6700;}
.kv-area .txt-holder p span {display:block; text-align:center}
.kv-area .txt-holder p span:last-child {margin-top:4%}
.kv-area .txt-holder a {display:block; margin:8% auto 0; width:48.2667%}
.kv-area .txt-holder ul {margin-top:4%}
.kv-area .txt-holder ul li {position:relative; padding:4.26% 0; font:2.5rem/1 'notoThin'; color:#fff; text-align:center}
.kv-area .txt-holder ul li:after {display:block; content:''; position:absolute; bottom:0; left:50%; width:0.3rem; height:0.3rem; background:#ff6700; border-radius:0.15rem}
.kv-area .txt-holder ul li:last-child:after {display:none}


.swiper-container img {display:block; width:100%;}
.swiper-container li {background:#111;}
.swiper-container p {margin-top:10%; font:2rem/1.3 'notoLight'; color:#888}
.swiper-container p span {display:block; text-align:center}
.swiper-container a {display:block; margin: 4.6666% auto 13.333%; width:30.13%}
.swiper-container.wider a {width:64.9333%}
.swiper-pagination-fraction, 
.swiper-pagination-custom, 
.swiper-container-horizontal > .swiper-pagination-bullets {top:0; bottom:auto; margin-top:80%; transition:none; font-size:0;}
.swiper-pagination-bullet {width:26%; height:0; padding-bottom:1.3%; box-sizing:border-box; border-radius:0; opacity:1; background:#fff}
.swiper-pagination-bullet-active {background:#ff6700;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 0.6667%}

.info {position:relative;}
.info .bg-holder img {display:block; width:100%;}
.info .txt-holder {position:absolute; top:0; left:0; width:100%; padding:12% 0; z-index:2}
.info .txt-holder h2 {margin-bottom:8.53%; font:2.625rem/1.6 'notoMedium'; color:#fff; text-align:center}
.info .txt-holder h2 span {display:block;}
.info .txt-holder h2 span:last-child {color:#ff6700}
.info .txt-holder p {margin-top:5.2%; font:2rem/1.3 'notoLight'; color: #fff}
.info .txt-holder p span {display:block; text-align: center}
.info .txt-holder a {display:block; margin:5.2% auto 0; width:64.8%}
.info .txt-holder a img {display:block; width:100%}

.location  {padding-top:13.0666%}
.location h3 {font:2.625rem/1.6 'notoMedium'; color:#fff; text-align:center}
.location h3 span {display:block;}
.location h3 span:last-child {color:#ff6700}
.location p {margin-top:7.2%; font:2rem/1.65 'notoLight'; color: #888}
.location p span {display:block; text-align:center}
.location p span em {display:inline}
.location a {display:block; width: 100%;}
.location > a {display:block; margin:8% auto 0; width:48.2667%}
.location a img {display:block; width:100%}
.location .branch_map,
.location .branch_map >div {height:24rem}
.location .branch_map {margin:5.2% auto 0; width:92%}

.footer .top-area {position:relative}
.footer .top-area a {position:absolute; bottom:0; right: 4%; display:block; width:9.6%;}
.footer .top-area img {display:block; width:100%}
.footer .sns-area {width:92%; margin: 6.8% auto 0}
.footer .sns-area li {float:left; width:9.6%; margin-left:6.533%}
.footer .sns-area li:first-child {margin-left:0}
.footer .sns-area li a {display:block}
.footer .sns-area li a img {display:block; width:100%}
.footer .btn-area {margin:4% auto 0; width:92%}
.footer .btn-area li {position:relative; font:2.5rem/1 'notoRegular'; border-top:1px solid #bfbfbf}
.footer .btn-area li:last-child {border-bottom:1px solid #bfbfbf}
.footer .btn-area li a {display:block; padding: 4% 0; background:url('../images/ico_ft.png') 100% 50% no-repeat; background-size: 6.4% auto}
.footer .contact {margin:6.2% auto 0; width:92%}
.footer .contact li:first-child {float:left; display:inline-block}
.footer .contact li:last-child {float:right; display:inline-block}
.footer .contact li span {font:1.625rem/1 'notoRegular'; color:#888}
.footer .contact li a {display:block; margin-top:0.9rem; font:2rem/1 'notoRegular'}
.footer > span {display:block; margin:7.06% 0 13.333% 4%; font:1.5rem/1 'notoMedium'; color:#888}

/* white */
.white .tab-holder a {background:#cc5482; color:#fff}
.white .tab-holder a:first-child {background:#fff; color:#888}

.white .content-wrap {background:#e6e6e6}
.white .kv-area .txt-holder h1 {color:#cc5482;}
.white .kv-area .txt-holder p {color:#cc5482;}
.white .kv-area .txt-holder p span:last-child {margin-top:0}
.white .kv-area .txt-holder p span.has-mt {margin-top:4%}
.white .kv-area .txt-holder b {display:block; position:relative; margin-top:7.0666%; padding:7.066% 0; font:2.625rem/1.333 'notoRegular'; color:#cc5482; text-align:center}
.white .kv-area .txt-holder b:after {display:block; position:absolute; top:0; left:43.3335%; content:''; width:13.3333%; height:1px; background:#aaaaaa}
.white .kv-area .txt-holder b span {display:block}
.white .kv-area .txt-holder ul li {color:#333}
.white .kv-area .txt-holder ul li:after {background:#cc5482}

.white .swiper-pagination-bullet-active {background:#cc5482}
.white .swiper-container li{background:#e6e6e6}
.white .swiper-container li b {display:block; margin-top: 10%; font:2.625rem/1 'notoMedium'; color:#cc5482; text-align:center}
.white .swiper-container li p {margin-top: 4%; color:#333}
.white .swiper-container.wider a.detail {width:30.13%}
.white .swiper-2 .swiper-pagination-bullet {width:21%}
.white .info .txt-holder h2 span:last-child {color:#cc5482}
.white .location h3 {color:#333}
.white .location h3 span:last-child {color:#cc5482}

/* 가변형 텍스트 */
@media only screen and (min-width:640px) and  (max-width:767px){
    html, body{font-size: 0.938em;}
}

@media only screen and (min-width:600px) and  (max-width:639px){
    html, body{font-size: 0.875em;}
}

@media only screen and (min-width:560px) and  (max-width:599px){
    html, body{font-size: 0.813em;}
}

@media only screen and (min-width:520px) and  (max-width:559px){
    html, body{font-size: 0.75em;}
}

@media only screen and (min-width:480px) and  (max-width:519px){
    html, body{font-size: 0.688em;}
}

@media only screen and (min-width:440px) and  (max-width:479px){
    html, body{font-size: 0.625em;}
}

@media only screen and (min-width:400px) and  (max-width:439px){
    html, body{font-size: 0.563em;}
}

@media only screen and (min-width:360px) and  (max-width:399px){
    html, body{font-size: 0.5em;}
}

@media only screen and (max-width:359px) {
    html, body{font-size: 0.436em;}
}