@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }

html { font-size: 10px; }

@media only screen and (max-width:400px) {
  html { font-size: 9.411764705882353px; }
}

html, body { height: 100%; }
body { background: #121212; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; font-size: 1.7rem; font-style: normal; font-weight: normal; line-height: 1.8; color: rgba(255, 255, 255, 0.3); margin: 0; padding: 0; letter-spacing: -0.07rem; word-break: keep-all !important; }

/* ------------------------------------------------------------------- 
 * ## links
 * ------------------------------------------------------------------- */
a { color: #000; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
a:hover, a:active { color: #999; outline: 0; }
::selection { background-color: #4679ED; color: #000; }


/* ===================================================================
 * # typography & general theme styles
 * ------------------------------------------------------------------- */
h1, .h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h1, h2, h3, h4 { color: #fff; }

@media only screen and (max-width:600px) {
  h1, .h1 { font-size: 3.3rem; letter-spacing: -.07rem; }
}

h2, .h2 { font-size: 3rem; line-height: 1.3; }
h3, .h3 { font-size: 2.4rem; line-height: 1.25; }
h4, .h4 { font-size: 2.1rem; line-height: 1.286; }
h5, .h5 { font-size: 1.8rem; line-height: 1.333; }
h6, .h6 { font-size: 1.6rem; line-height: 1.3125; text-transform: uppercase; letter-spacing: .16rem; }

p img { margin: 0; }
p.lead { font-weight: 300; font-size: 2.4rem; line-height: 1.625; margin-bottom: 3.6rem; color: rgba(255, 255, 255, 0.2); }

@media only screen and (max-width:1200px) {
  p.lead { font-size: 2.2rem; }
}
@media only screen and (max-width:1000px) {
  p.lead { font-size: 2.1rem; }
}
@media only screen and (max-width:800px) {
  p.lead { font-size: 2rem; }
}

em, i, strong, b { font-size: inherit; line-height: inherit; }
em, i { font-style: italic; }
strong, b { font-weight: 700; }
small { font-size: 1.2rem; line-height: inherit; }

blockquote { margin: 3.9rem 0; padding-left: 4.5rem; position: relative; }
blockquote:before { content: "\201C"; font-size: 10rem; line-height: 0px; margin: 0; color: rgba(255, 255, 255, 0.15); font-family: arial, sans-serif; position: absolute; top: 3.6rem; left: 0; }
blockquote p { padding: 0; font-size: 2.1rem; line-height: 1.857; color: rgba(255, 255, 255, 0.7); }
blockquote cite { display: block; font-size: 1.4rem; font-style: normal; line-height: 1.5; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited { color: rgba(255, 255, 255, 0.3); border: none; }

abbr { font-weight: 700; font-variant: small-caps; text-transform: lowercase; letter-spacing: .05rem; color: rgba(255, 255, 255, 0.2); } 
pre { padding: 2.4rem 3rem 3rem; background: #F1F1F1; overflow-x: auto; }
code { font-size: 1.4rem; margin: 0 .2rem; padding: .3rem .6rem; white-space: nowrap; background: #1f1f1f; border: 1px solid #252525; color: rgba(255, 255, 255, 0.7); border-radius: 3px; }
pre > code { display: block; white-space: pre; line-height: 2; padding: 0; margin: 0; }
pre.prettyprint > code { border: none; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; text-decoration: none; }
mark { background: #ffd900; color: #000000; }
hr { border: solid rgba(255, 255, 255, 0.05); border-width: 1px 0 0; clear: both; margin: 2.4rem 0 1.5rem; height: 0; }

/* ------------------------------------------------------------------- 
 * ## Lists
 * ------------------------------------------------------------------- */
ol { list-style: decimal; }
ul { list-style: disc; }
li { display: list-item; }

ul ul, ul ol, ol ol, ol ul { margin: .6rem 0 .6rem 1.7rem; }

ul.disc li { display: list-item; list-style: none; padding: 0 0 0 .8rem; position: relative; }
ul.disc li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4679ED; position: absolute; left: -17px; top: 11px; vertical-align: middle; }

/* ------------------------------------------------------------------- 
 * ## responsive video container
 * ------------------------------------------------------------------- */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, 
.video-container object, 
.video-container embed, 
.video-container video { position: absolute; top: 0; left: 0; width: 100%;height: 100%; }

/* ------------------------------------------------------------------- 
 * ## floated image
 * ------------------------------------------------------------------- */
img.pull-right { margin: 1.5rem 0 0 3rem; }
img.pull-left { margin: 1.5rem 3rem 0 0; }

/* ------------------------------------------------------------------- 
 * ## tables
 * ------------------------------------------------------------------- */
table { border-width: 0; width: 100%; max-width: 100%; border-collapse: collapse; }

th, td { padding: 1.5rem 3rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
th { color: #FFFFFF; font-weight: 700; }
td { line-height: 1.5; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ===================================================================
 * # preloader - (_preloader-dots.scss)
 *
 * ------------------------------------------------------------------- */
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #151515; z-index: 800; height: 100vh; width: 100%; overflow: hidden; }

.no-js #preloader, .oldie #preloader { display: none; }

#loader { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; padding: 0; display: inline-block; -webkit-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

#loader > div { content: ""; background: #FFFFFF; width: 6px; height: 6px; position: absolute; top: 0; left: 0; border-radius: 50%; }
#loader > div:nth-of-type(1) { left: 15px; }
#loader > div:nth-of-type(3) { left: -15px; }

/* dots jump */
.dots-jump > div { -webkit-animation: dots-jump 1.2s infinite ease; animation: dots-jump 1.2s infinite ease; animation-delay: 0.2s; }
.dots-jump > div:nth-of-type(1) { animation-delay: 0.4s; }
.dots-jump > div:nth-of-type(3) { animation-delay: 0s; }

@-webkit-keyframes dots-jump {
  0% { top: 0; }
  40% { top: -6px; }
  80% { top: 0; }
}

@keyframes dots-jump {
  0% { top: 0; }
  40% { top: -6px; }
  80% { top: 0; }
}

/* dots fade */
.dots-fade > div { -webkit-animation: dots-fade 1.6s infinite ease; animation: dots-fade 1.6s infinite ease; animation-delay: 0.4s; }
.dots-fade > div:nth-of-type(1) { animation-delay: 0.8s; }
.dots-fade > div:nth-of-type(3) { animation-delay: 0s; }

@-webkit-keyframes dots-fade {
  0% { opacity: 1; }
  40% { opacity: 0.2; }
  80% { opacity: 1; }
}

@keyframes dots-fade {
  0% { opacity: 1; }
  40% { opacity: 0.2; }
  80% { opacity: 1; }
}

/* dots pulse */
.dots-pulse > div { -webkit-animation: dots-pulse 1.2s infinite ease; animation: dots-pulse 1.2s infinite ease; animation-delay: 0.2s; }
.dots-pulse > div:nth-of-type(1) { animation-delay: 0.4s; }
.dots-pulse > div:nth-of-type(3) { animation-delay: 0s; }

@-webkit-keyframes dots-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes dots-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}


/* ===================================================================
 * # forms
 *
 * ------------------------------------------------------------------- */
fieldset { border: none; }

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select { display: block; height: 6rem; padding: 1.5rem 2.4rem; border: 0; outline: none; color: rgba(255, 255, 255, 0.7); font-size: 1.5rem;line-height: 3rem; max-width: 100%; background: rgba(255, 255, 255, 0.05); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}

.ss-custom-select { position: relative; padding: 0; }
.ss-custom-select select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; margin: 0; line-height: 3rem; vertical-align: middle; }
.ss-custom-select select option { padding-left: 2rem; padding-right: 2rem; color: #666666; background: #FFFFFF; }
.ss-custom-select select::-ms-expand { display: none; }
.ss-custom-select::after { border-bottom: 2px solid rgba(255, 255, 255, 0.5); border-right: 2px solid rgba(255, 255, 255, 0.5); content: ''; display: block; height: 8px; width: 8px; margin-top: -7px; pointer-events: none; position: absolute; right: 2.4rem; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }

/* IE9 and below */
.oldie .cl-custom-select::after { display: none; }
textarea { min-height: 25rem; }

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus { color: #FFFFFF; }

label, legend { font-weight: 700; font-size: 1.4rem; margin-bottom: .9rem; line-height: 1.714; color: #FFFFFF; display: block; }
input[type="checkbox"], input[type="radio"] { display: inline; }
label > .label-text { display: inline-block; margin-left: 1rem; font-weight: normal; line-height: inherit; }
label > input[type="checkbox"], label > input[type="radio"] { margin: 0; position: relative; top: .15rem; }

/* ------------------------------------------------------------------- 
 * ## Style Placeholder Text
 * ------------------------------------------------------------------- */
::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.4); }
:-moz-placeholder { color: rgba(255, 255, 255, 0.4); opacity: 1; }
::-moz-placeholder { color: rgba(255, 255, 255, 0.4); opacity: 1; }
:-ms-input-placeholder { color: rgba(255, 255, 255, 0.4); }
::-ms-input-placeholder { color: rgba(255, 255, 255, 0.4); }
::placeholder { color: rgba(255, 255, 255, 0.4); }
.placeholder { color: rgba(255, 255, 255, 0.4) !important; }

/* ------------------------------------------------------------------- 
 * ## Change Autocomplete styles in Chrome
 * ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { -webkit-text-fill-color: #4679ED; transition: background-color 5000s ease-in-out 0s; }


/* ===================================================================
 * # buttons
 *
 * ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] { display: inline-block; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; height: 5.4rem;line-height: 5rem; padding: 0 3rem; margin: 0 .3rem 1.2rem 0; color: #000000; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #c5c5c5; border: .2rem solid #c5c5c5; }

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus { background-color: #b8b8b8; border-color: #b8b8b8; color: #000000; outline: 0; }

/* button primary
 * ------------------------------------------------- */
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary { background: transparent; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 0; border-bottom: 1px solid #fff; color: #FFFFFF; }

.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus { background: #4679ED; border-left: 1px solid #4679ED; border-top: 1px solid #4679ED; border-right: 0; border-bottom: 1px solid #4679ED; }

/* button modifiers
 * ------------------------------------------------- */
.btn.full-width, button.full-width { width: 100%; margin-right: 0; }
.btn--medium, button.btn--medium { height: 5.7rem !important; line-height: 5.3rem !important; }
.btn--large, button.btn--large { height: 6rem !important; line-height: 5.6rem !important; }
.btn--stroke, button.btn--stroke { background: transparent !important; border: 0.2rem solid #FFFFFF; color: #FFFFFF; }
.btn--stroke:hover, button.btn--stroke:hover { background: #FFFFFF !important; border: 0.2rem solid #FFFFFF; color: #000000; }
.btn--pill, button.btn--pill { padding-left: 3rem !important; padding-right: 3rem !important; border-radius: 1000px !important; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* ------------------------------------------------------------------- 
 * ## alert box - (_alert-box.scss)
 * ------------------------------------------------------------------- */
.alert-box { padding: 2.1rem 4rem 2.1rem 3rem; position: relative; margin-bottom: 3rem; border-radius: 3px; font-weight: 600; font-size: 1.5rem;line-height: 1.6; }
.alert-box__close { position: absolute; right: 1.8rem; top: 1.8rem; cursor: pointer; }
.alert-box__close.fa { font-size: 12px; }
.alert-box--error { background-color: #ffd1d2; color: #e65153; }
.alert-box--success { background-color: #c8e675; color: #758c36; }
.alert-box--info { background-color: #d7ecfb; color: #4a95cc; }
.alert-box--notice { background-color: #fff099; color: #bba31b; }

/* ------------------------------------------------------------------- 
 * ## additional typo styles - (_additional-typo.scss)
 * ------------------------------------------------------------------- */

/* drop cap 
 * ----------------------------------------------- */
.drop-cap:first-letter { float: left; margin: 0; padding: 1.5rem .6rem 0 0; font-weight: 700; font-size: 8.4rem; line-height: 6rem;text-indent: 0; background: transparent; color: rgba(255, 255, 255, 0.7); }

/* line definition style 
 * ----------------------------------------------- */
.lining dt, .lining dd { display: inline; margin: 0; }
.lining dt + dt:before, .lining dd + dt:before { content: "\A"; white-space: pre; }
.lining dd + dd:before { content: ", "; }
.lining dd + dd:before { content: ", "; }
.lining dd:before { content: ": "; margin-left: -0.2em; }

/* dictionary definition style 
 * ----------------------------------------------- */
.dictionary-style dt { display: inline; counter-reset: definitions; }
.dictionary-style dt + dt:before { content: ", "; margin-left: -0.2em; }
.dictionary-style dd { display: block; counter-increment: definitions; }
.dictionary-style dd:before { content: counter(definitions, decimal) ". "; }

.pull-quote { position: relative; padding: 2.1rem 3rem 2.1rem 0px; }
.pull-quote:before, .pull-quote:after { height: 1em; position: absolute; font-size: 10rem; font-family: Arial, Sans-Serif; color: rgba(255, 255, 255, 0.15); }
.pull-quote:before { content: "\201C"; top: -3.6rem; left: 0; }
.pull-quote:after { content: '\201D'; bottom: 3.6rem; right: 0; }
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote:before { content: none; }

.stats-tabs { padding: 0; margin: 3rem 0;}
.stats-tabs li { display: inline-block; margin: 0 1.5rem 3rem 0; padding: 0 1.5rem 0 0; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.stats-tabs li:last-child { margin: 0; padding: 0; border: none; }
.stats-tabs li a { display: inline-block; font-size: 2.5rem; font-weight: 700; border: none; color: #FFFFFF; }
.stats-tabs li a:hover { color: #4679ED; }
.stats-tabs li a em { display: block; margin: .6rem 0 0 0; font-size: 1.4rem; font-weight: normal; font-style: normal; }

/* ------------------------------------------------------------------- 
 * ## skillbars  - (_skillbars.scss)
 * ------------------------------------------------------------------- */
.skill-bars { list-style: none; margin: 6rem 0 3rem; }
.skill-bars li { height: .6rem; background: rgba(255, 255, 255, 0.1); width: 100%; margin-bottom: 6.9rem; padding: 0; position: relative; }
.skill-bars li strong { position: absolute; left: 0; top: -3rem; font-weight: 700; color: #FFFFFF; text-transform: uppercase;letter-spacing: .2rem; font-size: 1.4rem; line-height: 2.4rem; }
.skill-bars li .progress { background: #4679ED; position: relative; height: 100%; }
.skill-bars li .progress span { position: absolute; right: 0; top: -3.6rem; display: block; color: #FFFFFF; font-size: 1.1rem;line-height: 1; background: #4679ED; padding: .6rem .6rem; border-radius: 3px; }
.skill-bars li .progress span::after { position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #4679ED; content: ""; }

.skill-bars li .percent5 { width: 5%; }
.skill-bars li .percent10 { width: 10%; }
.skill-bars li .percent15 { width: 15%; }
.skill-bars li .percent20 { width: 20%; }
.skill-bars li .percent25 { width: 25%; }
.skill-bars li .percent30 { width: 30%; }
.skill-bars li .percent35 { width: 35%; }
.skill-bars li .percent40 { width: 40%; }
.skill-bars li .percent45 { width: 45%; }
.skill-bars li .percent50 { width: 50%; }
.skill-bars li .percent55 { width: 55%; }
.skill-bars li .percent60 { width: 60%; }
.skill-bars li .percent65 { width: 65%; }
.skill-bars li .percent70 { width: 70%; }
.skill-bars li .percent75 { width: 75%; }
.skill-bars li .percent80 { width: 80%; }
.skill-bars li .percent85 { width: 85%; }
.skill-bars li .percent90 { width: 90%; }
.skill-bars li .percent95 { width: 95%; }
.skill-bars li .percent100 { width: 100%; }

/* ===================================================================
 * # reusable and common theme styles
 *
 * ------------------------------------------------------------------- */
body.menu-is-open { overflow: hidden; }

.wide { max-width: 1400px; }
.narrow { max-width: 1000px; }
.bit-narrow { max-width: 1200px; }
.darker { background-color: #0f0f0f; }

/* ------------------------------------------------------------------- 
 * ## display headings
 * ------------------------------------------------------------------- */
.display-1 { font-weight: 600; font-size: 4.5rem; line-height: 1.5; margin-top: 0; margin-bottom: 4.8rem; }
.display-1 .mo { display: none; }

.subhead { font-weight: 600; font-size: 1.8rem; line-height: 1.333; text-transform: uppercase; color: #4679ED; margin-top: 0; margin-bottom: 3rem; position: relative; }
.subhead::after { position: absolute; top: 50%; content: ""; height: 1px; width: 20%; margin-left: 20px; background: #4679ED; transition: .5s;}
.item-title { font-size: 32px; line-height: 1.5; margin-top: 0; margin-bottom: 2.4rem; }

/* ------------------------------------------------------------------- 
 * ## section header
 * ------------------------------------------------------------------- */
.section-header.has-bottom-sep { padding-bottom: 1.5rem; position: relative; text-align: left; }

/* ------------------------------------------------------------------- 
 * ## grid overlay
 * ------------------------------------------------------------------- */
.grid-overlay { display: block; content: ""; position: absolute; top: 0; bottom: 0; right: 0; max-width: 1200px; width: 89%; height: 100%; opacity: .5; border-right: 1px solid rgba(255, 255, 255, 0.04); border-left: 1px solid rgba(255, 255, 255, 0.04); -webkit-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }

.grid-overlay > div, 
.grid-overlay::before, 
.grid-overlay::after { background-color: rgba(255, 255, 255, 0.04); position: absolute; top: 0; bottom: 0; height: 100%; width: 1px; }
.grid-overlay::before { content: ""; left: 25%; }
.grid-overlay::after { content: ""; right: 25%; }
.grid-overlay > div { left: 50%; }

/* ------------------------------------------------------------------- 
 * responsive:
 * reusable and common theme styles
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1600px) {
  /* .grid-overlay { border-right: none !important; border-left: none !important; } */
  /* .grid-overlay::before { left: 22.5%; }
  .grid-overlay::after { right: 22.5%; } */
}

@media only screen and (max-width:1200px) {
  .display-1 { font-size: 4.5rem; }
  .display-1 br { display: none; }
}

@media only screen and (max-width:1100px) {
  .display-1 { font-size: 4.2rem; }
}

@media only screen and (max-width:1000px) {
  .display-1 { font-size: 4rem; }
}

@media only screen and (max-width:800px) {
  .display-1 { font-size: 3.6rem; margin-bottom: 4.5rem; }
  .subhead { font-size: 1.6rem; }
  .section-header.has-bottom-sep::before { width: 300px; }
}

@media only screen and (max-width:700px) {
  .display-1 { font-size: 3.2rem; text-align: left; }
  .display-1 .mo { display: block; }
  .subhead { font-size: 1.5rem; }
}

@media only screen and (max-width:600px) {
  .display-1 { margin-bottom: 4.2rem; line-height: 1.6; font-size: 24px; font-weight: 600; }
}

@media only screen and (max-width:500px) {
  .section-header.has-bottom-sep::before { width: 200px; }
}

@media only screen and (max-width:400px) {
  .subhead { font-size: 1.4rem; }
  .item-title { font-size: 2.1rem; }
  .grid-overlay > div, .grid-overlay::before, .grid-overlay::after { display: none; }
}

/* ===================================================================
 * # header styles
 *
 * ------------------------------------------------------------------- */
.s-header { z-index: 500; width: 100%; height: 78px; background-color: transparent; position: absolute; top: 21px; }

/* -------------------------------------------------------------------
 * ## header logo
 * ------------------------------------------------------------------- */
.header-logo { z-index: 501; display: inline-block; margin: 0; padding: 0; position: absolute; left: 7.5rem; top: 50%;-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.header-logo a { display: block; padding: 0; outline: 0; border: none; }
.header-logo img { width: 36px; height: 36px; }

/* ------------------------------------------------------------------- 
 * ## main navigation 
 * ------------------------------------------------------------------- */
.header-nav { z-index: 600; font-size: 1.6rem; line-height: 1.875; padding: 3.6rem 3rem 3.6rem 6rem; height: 100%; width: 50%; background: #0C0C0C; color: rgba(255, 255, 255, 0.25); overflow-y: auto; overflow-x: hidden; position: fixed; right: 0; top: 0; -webkit-transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1); transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transform: translate3d(100%, 0, 0);-ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: hidden; }

.header-nav a, .header-nav a:visited { color: rgba(255, 255, 255, 0.5); }
.header-nav a:hover, 
.header-nav a:focus, 
.header-nav a:active { color: white; }
.header-nav h3 { display: inline-block; font-weight: 700; font-size: 12px; line-height: 1.25; text-transform: uppercase; letter-spacing: .4rem; margin-bottom: 2rem; margin-top: 1.2rem; padding-right: 140px; color: #4679ED; position: relative; }
.header-nav h3::after { content: ""; display: block; height: 1px; width: 110px; background-color: #4679ED; position: absolute; top: 50%; right: 0; }
.header-nav p { margin-bottom: 2.7rem; }
.header-nav__content, .header-nav h3 { left: 100px; opacity: 0; visibility: hidden; -webkit-transform: translateZ(0);-webkit-backface-visibility: hidden; }
.header-nav__content { position: relative; max-width: 300px; }

.header-nav__list { margin: 0 0 6rem 0; padding: 0; font-weight: 600; font-size: 32px; line-height: 1.286; list-style: none; counter-reset: ctr; }
.header-nav__list li { padding: 1rem 0; }
.header-nav__list a { display: block; color: #FFFFFF; position: relative; }
.header-nav__list a::before { display: inline-block; position: relative; content: counter(ctr, decimal-leading-zero) ""; counter-increment: ctr; margin-right: 1.5rem; margin-bottom: 2px; font-size: 1.6rem; color: rgba(255, 255, 255, 0.25); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; vertical-align: middle; }
.header-nav__list a:hover::before { color: #4679ED; }
.header-nav__list .current a::before { color: #4679ED; }

.header-nav__social { list-style: none; display: inline-block; font-size: 2.4rem; margin: 0; }
.header-nav__social li { display: inline-block; margin-right: 12px; padding-left: 0; }
.header-nav__social li a { color: rgba(255, 255, 255, 0.15); }
.header-nav__social li a:hover, 
.header-nav__social li a:focus { color: white; }
.header-nav__social li:last-child { margin: 0; }

.header-nav__familySite { margin: 0 0 2rem 0; }
.header-nav__familySite li { display: block; margin-bottom: 1rem; font-size: 20px; }
.header-nav__familySite li:last-child { margin-bottom: 0; }
.header-nav__familySite li:hover,
.header-nav__familySite li:focus { transition: .5s; }
.header-nav__familySite li a { color: #fff; text-decoration: none; }
.header-nav__familySite li:hover a,
.header-nav__familySite li:focus a { color: #999; }
.header-nav__familySite li a i { margin-left: 1.6rem; vertical-align: middle; opacity: 0.7; }
.header-nav__familySite li:hover a i,
.header-nav__familySite li:focus a i { opacity: 1; }

.header-nav__close { z-index: 601; display: block; height: 30px; width: 30px; position: absolute; top: 39px; right: 30px;font: 0/0 a; text-shadow: none; color: transparent; }
.header-nav__close span::before, 
.header-nav__close span::after { content: ""; display: block; height: 2px; width: 16px;background-color: #FFFFFF; position: absolute; top: 50%; left: 7px; margin-top: -1px; }
.header-nav__close span::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.header-nav__close span::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* menu is open * ----------------------------------------------- */
.menu-is-open .header-nav { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; -webkit-overflow-scrolling: touch; }
.menu-is-open .header-nav .header-nav__content, .menu-is-open .header-nav h3 { opacity: 1; visibility: visible;-webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1s; transition-duration: 1s;-webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0.5s;transition-delay: 0.5s; left: 0; }

/* ------------------------------------------------------------------- 
 * ## mobile menu toggle 
 * ------------------------------------------------------------------- */
.header-menu-toggle { width: 48px; height: 48px; line-height: 48px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .5rem; color: #FFFFFF; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: fixed; right: 8rem; top: 30px; }
.header-menu-toggle.opaque { background-color: #000000; }

.header-menu-icon { display: block; width: 26px; height: 2px; margin-top: -1px; right: auto; bottom: auto; background-color: white; position: absolute; left: 11px; top: 50%; }
.header-menu-icon::before, .header-menu-icon::after { content: ''; width: 100%; height: 100%; background-color: inherit;position: absolute; left: 0; }
.header-menu-icon::before { top: -9px; }
.header-menu-icon::after { bottom: -9px; }

/* ------------------------------------------------------------------- 
 * responsive:
 * header
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
  .header-logo { left: 60px; }
  .header-menu-toggle { right: 60px; }
}

@media only screen and (max-width:900px) {
  .header-nav h3 { padding-right: 0; }
  .header-nav h3::after { display: none; }
  .header-nav__content { max-width: 280px; }
  .header-nav__list { font-size: 2.5rem; }
  .header-nav__list li { padding: 1.1rem 0; }
}

@media only screen and (max-width:800px) {
  .header-logo { left: 40px; }
  .header-nav { width: calc(100% - 80px); padding: 3.6rem 3rem 3.6rem 5rem; }
  .header-nav h3 { margin-bottom: 3rem; }
  .header-menu-toggle { right: 40px; }
}

@media only screen and (max-width:650px) {
  .s-header { height: 90px; top: 12px; }
  .header-nav { padding: 3.6rem 3rem 3.6rem 4rem; }
  .header-nav h3 { margin-bottom: 4rem; }
  .header-nav__list { margin-bottom: 4rem; font-size: 24px; font-weight: 600; }
  .header-nav__familySite li { font-size: 16px; }
  .header-menu-toggle { top: 27px; right: 25px; }
}

@media only screen and (max-width:400px) {
  .s-header { top: 6px; }
  .header-logo { left: 30px; }
  .header-nav { width: calc(100% - 40px); }
  .header-nav__list { margin-bottom: 8rem; font-size: 2.2rem; }
  .header-menu-toggle { top: 21px; right: 20px; }
  .header-nav__social { font-size: 2.2rem; }
}

/* ===================================================================
 * # home
 * ------------------------------------------------------------------- */
.s-home { width: 100%; height: 100vh; min-height: 786px; background-color: transparent; position: relative; display: table; }
.s-home::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #111111; opacity: .7;z-index: 2; }
.s-home::after { display: block; content: ""; width: 50%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: .5; z-index: 3; position: absolute; top: 0; left: 50%; bottom: 0; right: 0; }
.s-home .grid-overlay > div { display: none; }

.s-home .video_container { position: absolute; height: 100vh; width: 100%; overflow: hidden; }
.s-home .video_container video { max-width: 100vw; height: 100vh; transform: scale(2); }

.no-js .s-home { background: #000000; }

.join_btn { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 4rem auto 0; width: 250px; height: 65px; line-height: 65px; border-radius: 100px; font-size: 2rem; font-weight: 600; color: #fff; border: 1px solid #fff; z-index: 999999; }
.join_btn:hover { background: #fff; transition: 0.3s; color: #000; }
.join_btn .arrow_container { width: 18px; height: 18px; transform: rotate(90deg); }
.join_btn .arrow_container .arrow_head { width: 10px; height: 10px; border: solid; border-width: 2px 0 0 2px; border-color: #fff; }
.join_btn .arrow_container .arrow_tail { width: 18px; height: 2px; background: #fff; position: absolute; left: 1px; top: 0; transform: rotate(45deg); transform-origin: left; }
.join_btn:hover .arrow_container .arrow_head { border-color: #000; }
.join_btn:hover .arrow_container .arrow_tail { background: #000; }

/* ------------------------------------------------------------------- 
 * ## home content
 * ------------------------------------------------------------------- */
.home-content { display: table-cell; vertical-align: middle; padding-top: 6.6rem; width: 100%; overflow: hidden; position: relative; z-index: 4; }
.home-content h1 { font-weight: 700; font-size: 11rem; line-height: 1; letter-spacing: -.02em; color: #FFFFFF; margin-top: 0; margin-bottom: 0; }
.home-content h3 { margin-top: 3rem; font-weight: 400; font-size: 3.8rem; line-height: 1.342; font-style: normal; color: #fff; }
.home-content__main { position: relative; text-align: center; }

/* ------------------------------------------------------------------- 
 * ## home buttons
 * ------------------------------------------------------------------- */
.home-content__button { margin-top: 5rem; display: flex; justify-content: center; }
.home-content__button .btn { display: table; width: 30rem; height: 7.2rem !important; line-height: 6.8rem !important; margin-bottom: 0; margin-right: 0; font-size: 1.7rem; }
.home-content__button .btn:not(.btn--primary) { background-color: transparent; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; color: #FFFFFF; }
.home-content__button .btn:not(.btn--primary):hover, 
.home-content__button .btn:not(.btn--primary):focus { background-color: #4679ED; border-left: 1px solid #4679ED; border-top: 1px solid #4679ED; border-right: 1px solid #4679ED; border-bottom: 1px solid #4679ED; color: #FFFFFF; }

.home-content__button .btn_tit { z-index: 1; position: relative; display: table-cell; vertical-align: middle; color: #fff; font-size: 2rem; font-weight: 600; letter-spacing: 0; text-transform: capitalize; }
.home-content__button .btn_tit .store_icon { display: inline-block; margin-right: 1rem; }
.home-content__button .btn_tit .store_icon.ios { background: url(../images/icons/icon_ios.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 25px; height: 25px; vertical-align: text-bottom; }
.home-content__button .btn_tit .store_icon.aos { background: url(../images/icons/icon_aos.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 25px; height: 25px; vertical-align: text-bottom; }
.home-content__button .button.stroke::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: .7rem; transform: translate3d(-50%,-50%,0) scale3d(0,0,0); transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1); background-color: #fff; opacity: 0; }

/* button Slider */
.button { position: relative; display: inline-block; text-decoration: none; font-size: 1.5rem; font-weight: 700; color: var(--gray); z-index: 1; transition: all .2s; }
.button::after { position: absolute; content: ""; bottom: 0; left: 0; right: 0; opacity: 1; transition: all .15s; z-index: -1; }
.button.slide { overflow: hidden; }
.button.slide span { display: inline-block; transition: all .5s; }
.button.slide span::after { position: absolute; left: 0; height: 100%; content: attr(btn-text); color: var(--pink); vertical-align: middle; }
.button.slide.top span::after { transform: translateY(100%); }
.button.slide.top:focus span, .button.slide.top:hover span { transform: translateY(-100%); }

/* ------------------------------------------------------------------- 
 * ## home scroll
 * ------------------------------------------------------------------- */
.home-content__scroll .scroll-down { position: absolute; bottom: 50px; left: 50%; width: 75px; height: 80px; text-align: center; text-decoration: none; cursor: pointer; bottom: 5%; transform: translateX(-50%); }
.home-content__scroll .scroll-down>label { pointer-events: none; font-weight: 600; font-size: 1.1rem; color: #fff; }
.home-content__scroll .scroll-down { height: 100px; }
.home-content__scroll .scroll-down span { position: relative; display: inline-block; width: 30px; height: 60px; border: 1px solid #fff; border-radius: 50px; top: 5px; }
.home-content__scroll .scroll-down span::after { position: absolute; content: ""; top: 10px; left: 0; right: 0; margin: 0 auto; width: 2px; height: 20px; border-radius: 2px; background: #fff; animation: animateMouseScrollBar 1.5s infinite linear;
}
@keyframes  animateMouseScrollBar {
  0% { height: 20px; top: 10px; }
  50% { height: 0; top: 30px; }
  50.01% { top: 10px; }
  100% { height: 20px; }
}

/* ------------------------------------------------------------------- 
 * ## home social
 * ------------------------------------------------------------------- */
.home-social { list-style: none; margin: 0; position: absolute; bottom: 3.6rem; left: 8rem; z-index: 5; }
.home-social a { color: white; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.home-social li { position: relative; padding: .6rem 0; }
.home-social li a { display: block; width: 30px; height: 30px; line-height: 30px; }
.home-social i, .home-social span { position: absolute; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.home-social i { display: inline-block; font-size: 15px; text-align: center; vertical-align: middle; width: 30px; height: 30px; line-height: 30px; top: 3px; left: 0; }
.home-social span { background-color: #000000; color: #FFFFFF; font-size: 1.2rem; line-height: 30px; top: 0; left: 50px; padding: 0 15px; margin: 3px 0; border-radius: 3px; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; }
.home-social span::after { display: block; content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #000000; position: absolute; top: 50%; left: -6px; margin-top: -6px; }

.home-social li:hover span { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

/* animate .home-content__main
 * ------------------------------------------------------------------- */
html.ss-preload .home-content__main { opacity: 0; }
html.ss-loaded .home-content__main { animation-duration: 2s; -webkit-animation-name: fadeIn; animation-name: fadeIn; margin-bottom: 10rem; }
html.no-csstransitions .home-content__main { opacity: 1; }

/* ------------------------------------------------------------------- 
 * ## home animations
 * ------------------------------------------------------------------- */

/* fade in */
@-webkit-keyframes fadeIn {
  from { opacity: 0; -webkit-transform: translate3d(0, 150%, 0); -ms-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
  from { opacity: 0; -webkit-transform: translate3d(0, 150%, 0); -ms-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* fade out */
@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, -150%, 0); -ms-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, -150%, 0); -ms-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); }
}

/* ------------------------------------------------------------------- 
 * responsive:
 * home
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1600px) {
  .home-content h1 { font-size: 10rem; }
  .home-content h3 { font-size: 3.5rem; }
}

@media only screen and (max-width:1400px) {
  .home-content h1 { font-size: 9rem; }
  .home-content h3 { font-size: 3.5rem; }
  .home-content__video .video-icon { height: 8.4rem; width: 8.4rem; background-size: 22px 24px; }
}

@media only screen and (max-width:1200px) {
  .home-content { padding-top: 4.5rem; }
  .home-content h3 { font-size: 3.2rem; }
  .home-content__video { height: 6.6rem; line-height: 6.6rem; vertical-align: middle; }
  .home-content__video .video-link { padding-left: 9rem; width: auto; }
  .home-content__video .video-icon { height: 6.6rem; width: 6.6rem; background-size: 12px 13px; position: absolute; top: 0; left: 0; }
  .home-content__button { margin-top: 7.2rem; }
  .home-content__button .btn { font-size: 11px; width: 28rem; height: 6.6rem !important; line-height: 6.2rem !important; }
  .home-content__scroll { right: 7rem; }
  .home-content__scroll .scroll-link { font-size: 1.1rem; }
  .home-social { left: 5.5rem; }
}

@media only screen and (max-width:1000px) {
  .home-content h1 { font-size: 9rem; }
  .home-content h3 { font-size: 3rem; }
  .home-content__button .btn { width: 24rem; }
  .home-content__scroll { right: 6rem; }
  .home-social { left: 4.5rem; }
}

@media only screen and (max-width:900px) {
  .home-content h1 { font-size: 8rem; }
  .home-content h3 { font-size: 2.7rem; }
  .home-social { display: none; }
}

@media only screen and (max-width:800px) {
  .home-content h1 { font-size: 8rem; }
  .home-content h3 { font-size: 2.6rem; }
  .home-content__video { margin-top: 3.6rem; }
  .home-content__video .video-link { padding-left: 8rem; }
  .home-content__video .video-icon { height: 6rem; width: 6rem; }
  .home-content__video .video-text { top: -6px; font-size: 1.2rem; line-height: 6rem; }
  .home-content__button { margin-top: 6.6rem; }
  .home-content__button .btn { width: 22rem; }
}

@media only screen and (max-width:700px) {
  .home-content h1 { font-size: 7rem; }
  .home-content h3 { font-size: 2.4rem; }
  .home-content__scroll { right: 5rem; bottom: 8.8rem; }
  .home-content__scroll::after { display: none; }
}

@media only screen and (max-width:650px) {
  .s-home .video_container { position: absolute; }
  .s-home .video_container video { height: 100vh; max-height: 100vh; transform: scale(4) translate(-40px, 0px); }

  .home-content { padding-top: 6rem; }
  .home-content h1 { font-size: 7rem; }
  .home-content h3 { font-size: 2.1rem; }
  .home-content__main { padding: 0 35px; }
  .home-content__video { margin-top: 3rem; }
  .home-content__button { margin-top: 4.8rem; }
  .home-content__button .btn { position: static; display: block; height: 6rem !important; line-height: 5.6rem !important; width: 100%; max-width: 32rem; padding: 0; margin-left: auto; margin-right: auto; border: 1px solid #fff; }
  .home-content__button .btn_tit { display: inline-block; font-size: 1.6rem; }
  .home-content__button .btn_tit .store_icon { margin-top: 14px; }
  
  .home-content__scroll .scroll-link { bottom: 13%; }
}

@media only screen and (max-width:500px) {
  .home-content h1 { font-size: 5rem; }
  .home-content h3 { font-size: 1.8rem; color: #fff; }
  .join_btn { height: 60px; line-height: 60px; font-size: 1.8rem; }
}

@media only screen and (max-width:400px) {
  .s-home .video_container video { height: 100vh; max-height: 100vh; transform: scale(4) translate(-40px, 0px); }
  .home-content h1 { font-size: 5rem; }
  .home-content__main { padding: 0 25px; }
  .home-content__video .video-link { padding-left: 7.5rem; }
  .home-content__video .video-icon { height: 5.4rem; width: 5.4rem; }
  .home-content__video .video-text { line-height: 5.4rem; font-size: 1.1rem; }
  .home-content__button { margin-top: 3.6rem; }
}

@media only screen and (max-width:350px) {
  .home-content h1 { font-size: 2rem; }
}


/* ===================================================================
 * # about
 *
 * ------------------------------------------------------------------- */
.s-about { padding-top: 18rem; padding-bottom: 18rem; background-color: #121212; position: relative; }
.s-about .section-header h1 br { display: block; }
.s-about .section-header h1 br.mo { display: none; }
.s-about .section-header h1 .impact { color: #6292ff; }
.s-about .section-header h1 .block { display: block; height: 3rem; }

.process { position: relative; margin-top: 20rem; }

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateZ(0);
            transform: rotateX(0) rotateZ(0);
  }
  20% {
    -webkit-transform: rotateX(60deg) rotateZ(0);
            transform: rotateX(60deg) rotateZ(0);
  }
  40% {
    -webkit-transform: rotateX(60deg) rotateZ(60deg);
            transform: rotateX(60deg) rotateZ(60deg);
  }
  60% {
    -webkit-transform: rotateX(60deg) rotateZ(60deg) rotateX(90deg);
            transform: rotateX(60deg) rotateZ(60deg) rotateX(90deg);
  }
  80% {
    -webkit-transform: rotateY(120deg) rotateX(120deg) rotateZ(30deg);
            transform: rotateY(120deg) rotateX(120deg) rotateZ(30deg);
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0) rotateZ(0);
            transform: rotateY(0) rotateX(0) rotateZ(0);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateZ(0);
            transform: rotateX(0) rotateZ(0);
  }
  20% {
    -webkit-transform: rotateX(60deg) rotateZ(0);
            transform: rotateX(60deg) rotateZ(0);
  }
  40% {
    -webkit-transform: rotateX(60deg) rotateZ(60deg);
            transform: rotateX(60deg) rotateZ(60deg);
  }
  60% {
    -webkit-transform: rotateX(60deg) rotateZ(60deg) rotateX(90deg);
            transform: rotateX(60deg) rotateZ(60deg) rotateX(90deg);
  }
  80% {
    -webkit-transform: rotateY(120deg) rotateX(120deg) rotateZ(30deg);
            transform: rotateY(120deg) rotateX(120deg) rotateZ(30deg);
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0) rotateZ(0);
            transform: rotateY(0) rotateX(0) rotateZ(0);
  }
}

/* 레이어 팝업 */
.popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 3rem; color: #191919; overflow-y: scroll; z-index: 10000; }

/* 팝업박스 */
.popup_box { width: 1100px; margin: 0 auto; z-index: 1002; box-sizing: border-box; box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35); -moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35); border-radius: 5px; overflow: hidden; font-size: 1.5rem; }
.popup_box br.mo { display: none; }
.popup_box .popup_cont { padding: 3rem; background: #fff; }
.popup_box .popup_cont h2 { padding-bottom: 1rem; margin-bottom: 3rem; border-bottom: 1px solid #666; color: #000; }
.popup_box .popup_cont span.red { color: #ff0000; font-weight: 500; }
.popup_box .popup_cont .cont_wrap .cont_inner { margin-top: 3rem; }
.popup_box .popup_cont .cont_wrap .cont_inner:last-child { margin-bottom: 0; }
.popup_box .popup_cont .cont_wrap .cont_inner h5 { margin-bottom: 1rem; }
.popup_box .popup_cont .cont_wrap .cont_inner h5 i { display: inline-block; margin-right: 1rem; font-size: 2rem; }
.popup_box .popup_cont .cont_wrap .cont_inner ul { padding: 2rem; background: #f9f9f9; border-radius: 5px; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li { margin-left: 12px; margin-bottom: 5px; line-height: 1.6; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li:last-child { margin-bottom: 0; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li p {  }
.popup_box .popup_cont .cont_wrap .cont_inner ul li dl { }
.popup_box .popup_cont .cont_wrap .cont_inner ul li dl dd { margin-bottom: 5px; list-style: disc; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li dl dd:last-child { margin-bottom: 0; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li .linkto { margin-left: 7px; font-weight: 600; color: #4679ED; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li .linkto:hover { color: #1a3c8d; }
.popup_box .popup_cont .cont_wrap .cont_inner ul li .linkto i { font-size: 16px; }

.popup_close_btn { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 65px; line-height: 65px; background: #5d5d5d; word-break: break-word; }
.popup_close_btn button { width: 100%; flex: 1; height: 100%; line-height: initial; margin: 0; border: none; font-size: 1.6rem; text-align: center; background: #ccc; }
.popup_close_btn button.onecase { background: #102c5c; color: #fff; }
.popup_overlay { position: fixed; top: 0px; right: 0; left: 0; bottom: 0; z-index: 1001; background: rgba(0,0,0,0.5); }

@media screen and (max-width: 1200px) {
  .popup { padding: 3rem; }
  .popup_box { width: 100%; overflow-y: scroll; }
}
@media screen and (max-width: 683px) {
  .popup { padding: 2rem; }
  .popup_box { font-size: 80%; }
  .popup_box br.mo { display: block; }
  .popup_box .popup_cont { padding: 2rem; }
  .popup_box .popup_cont h2 { padding-bottom: 1rem; margin-bottom: 2rem; font-size: 2rem; }
  .popup_box .popup_cont .cont_wrap { overflow-y: scroll; }
  .popup_box .popup_cont .cont_wrap .cont_inner {  }
  .popup_box .popup_cont .cont_wrap .cont_inner h5 { font-size: 1.6rem; }
  .popup_box .popup_cont .cont_wrap .cont_inner ul { padding: 1.5rem; }
  .popup_box .popup_cont .cont_wrap .cont_inner ul li { margin-bottom: 1rem; }
  .popup_box .popup_cont .cont_wrap .cont_inner ul li dl dd { margin-left: 0; }
  .popup_box .popup_cont .cont_wrap .cont_inner ul li .linkto { display: block; margin-left: 0; }
  .popup_box .popup_cont .cont_wrap .cont_inner ul li .linkto i { font-size: 14px; }

  .popup_close_btn { height: 60px; line-height: 60px; }
}
@media screen and (max-width: 400px) {
}



.frame { position: absolute; top: 0; left: 5%; width: 400px; height: 400px;border-radius: 2px; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); overflow: hidden;-webkit-perspective: 1000px; perspective: 1000px; }
.center { position: absolute; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
div.circle { width: 300px; height: 300px; transform-style: preserve-3d;-webkit-transform-style: preserve-3d; -webkit-animation: rotate 5s infinite; animation: rotate 5s infinite; -webkit-transform-origin: center center; transform-origin: center center; }
div.side { background: rgba(255, 255, 255, 0.3); width: 300px; height: 300px;-webkit-transform: rotateX(0deg); transform: rotateX(0deg); border-radius: 50%; position: absolute; background: rgba(98,146,255,0.2); }
div.side:nth-child(2) { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); }
div.side:nth-child(3) { -webkit-transform: rotateX(60deg); transform: rotateX(60deg); }
div.side:nth-child(4) { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
div.side:nth-child(5) { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); }
div.side:nth-child(6) { -webkit-transform: rotateX(150deg); transform: rotateX(150deg); }

.process h4 { margin-bottom: 3rem; font-size: 4.5rem; font-weight: 600; }
.process .item-subtit { position: relative; margin-left: 0; color: #fff; list-style: none; }
.process .item-subtit::before { position: absolute; left: 0; top: -5px; content: ""; display: block; height: 48px; width: 48px; }
.process p { position: relative; color: #fff; }
.process p::before { position: absolute; left: 0; top: -5px; content: ""; display: block; height: 48px; width: 48px; }

.item-process { position: relative; width: 50% !important; min-height: 24.6rem; margin-bottom: 3rem; float: right; font-size: 24px; font-weight: 400; }
.item-process .item-process__text p br.mo { display: none; }
.item-process .item-process__text p strong { color: #fff; }
.item-process .item-bg-txt { position: absolute; top: -45%; right: 0; font-size: 20rem; font-weight: 500; color: rgba(255,255,255,0.03); }

.about-count { width: 50%; margin-top: 10rem; float: right; }
.about-count .item-count { width: 100%; }
.about-count .item-count .counting_wrap { }
.about-count .item-count .counting_wrap h3 { font-size: 4.5rem; }
.about-count .item-count .counting_wrap p { margin-bottom: 0; font-size: 12rem; font-weight: 600; color: #fff; }
.about-count .item-count .counting_wrap .count_tit { font-style: normal; font-size: 24px; color: #a1a1a1; font-weight: 400; }

/* ------------------------------------------------------------------- 
 * responsive:
 * about
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
  .item-process:nth-child(2n+1) { padding-right: 25px; }
  .item-process:nth-child(2n+2) { padding-left: 25px; }
}

@media only screen and (max-width:1000px) {
  .s-about { padding-top: 15rem; padding-bottom: 15rem; }
  .item-process:nth-child(n) { padding: 0 15px; min-height: 0; }
}

@media only screen and (max-width:650px) {
  .s-about { padding-top: 15rem; padding-bottom: 15rem; }
  .s-about .section-header h1 br.pc { display: none; }
  .s-about .section-header h1 br.mo { display: block; }
 
  .process { margin-top: 27rem; }
  .process h4 { padding-left: 0; font-size: 2.6rem; margin-bottom: 2rem; }
  .process h4::before { font-size: 1.8rem; height: 35px; width: 35px; line-height: 42px; top: -60px; }
  .process .item-subtit { padding-left: 0; margin-left: 0; margin-bottom: 2rem; font-size: 16px; font-weight: 600; }
  .process p { padding-left: 0; font-size: 16px; }
  .process p br { display: block; }
  .item-process { width: 100% !important; }
  .item-process:nth-child(n) { padding: 0; }
  .item-process .item-process__text p {  }
  .item-process .item-process__text p br.mo { display: block; }
  .item-process .item-process__text p strong { display: initial; padding: 0; background-color: transparent; font-weight: 600; }
  .item-process .item-process__text p strong::before { display: none; }
  .item-process .item-bg-txt { top: 200px; left: 0; font-size: 155px; }

  .about-count { width: 100%; }
  .about-count .item-count .counting_wrap h3 { font-size: 24px; }
  .about-count .item-count .counting_wrap p { font-size: 76px; line-height: 1.5; }
  .about-count .item-count .counting_wrap .count_tit { font-size: 20px; }

  .frame { top: -100%; left: 7%; width: 300px; height: 300px; }
  div.circle { width: 200px; height: 200px; }
  div.side { width: 200px; height: 200px; }
  .center { left: 40%; }
}

@media only screen and (max-width:400px) {
  .item-process:nth-child(n) { padding: 0; margin-bottom: 1.5rem; }
}


.s-services { padding-top: 18rem; padding-bottom: 8rem; position: relative; }

.services { margin-top: 9rem; }
.services .item-service { width: 50%; height: 300px; position: relative; padding-top: 4rem; border-right: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.1); }
.services .item-service:nth-child(2n) { border-right: none; padding-left: 4rem; }
.services .item-service:nth-child(3),
.services .item-service:nth-child(4) { border-bottom: 1px solid rgba(255,255,255,0.1); }
.services .item-service .item-service__text { display: table-cell; width: 100%; vertical-align: middle; }
.services .item-service .item-service__text h3 { margin-top: 0; margin-bottom: 3rem; }
.services .item-service .item-service__text .item-subtit { margin-bottom: 1rem; font-size: 2.5rem; color: #fff; font-weight: 500; }
.services .item-service .item-service__text .item-desc { font-size: 22px; color: #fff; font-weight: 400; }
.services .item-service .item-service__text .item-desc .mo { display: none; }
.services .item-service .item-service__text .item-desc .pc { display: block; }

.services .item-service .item-service__text button { position: absolute; bottom: 10%; right: 7%; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; }
.services .item-service .item-service__text button.sub_link_btn { height: auto; }
.services .item-service .item-service__text button.sub_link_btn .circle { display: block; margin: 0; width: 5rem; height: 5rem; background-color: rgba(255,255,255,0.2); background-image: url(../images/icons/icon_plus.png); background-size: 25px 25px; background-position: center; background-repeat: no-repeat; }
.services .item-service .item-service__text button.sub_link_btn .circle:hover { background-color: #4679ED;transition-duration: .3s; }

/* The Modal */
.services div.modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0,0.8); transition: opacity 250ms 700ms ease; }
.services .modal-content { display: table; position: relative; width: 100%; height: 100%; top: 0; padding: 10rem 50rem; margin: auto; background-color: rgba(0,0,0,.6); }

.services .modal-content .modal-inner { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 4rem; background: #f5f5f5; border-radius: 10px; }
.services .modal-content .modal-inner .modal-inner-head { margin: 0 auto; text-align: left; }
.services .modal-content .modal-inner .modal-inner-head h1 { display: inline-block; margin: 0 0 1rem 0; font-size: 30px; font-weight: 600; color: #000; }
.services .modal-content .modal-inner .modal-inner-head h1 br.mo { display: none; }
.services .modal-content .modal-inner .modal-inner-head p { margin: 0; padding: 0 0 4rem; color: #000; font-size: 18px; }
.services .modal-content .modal-inner .modal-inner-head p br.mo { display: none; }

.services .modal-content .modal-inner .modal-inner-con { width: 100%; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt { width: 100%; display: block; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(0,0,0,0.2); }
.services .modal-content .modal-inner .modal-inner-con .inner-txt:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt p { margin-bottom: 1rem; font-size: 20px; font-weight: 600; color: #000; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt p br { display: none; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt p span { display: inline-block; width: fit-content; padding: .5rem 1rem .2rem 1rem; margin-right: 1rem; border-radius: 50px; background: #4679ED; color: #fff; text-align: center; font-size: 2rem; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt ul { width: 100%; margin-bottom: 0; font-size: 18px; color: #000; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt ul li { margin: 0; list-style: disc; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt ul li::marker { font-size: 16px; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt ul li br.mo { display: none; }
.services .modal-content .modal-inner .modal-inner-con .inner-txt .inner_sub { display: block; margin-top: 1rem; font-size: 15px; }

.close { position: absolute; top: 10px; right: 20px; color: #000; font-size: 3rem; font-weight: 400; border-radius: 50px; text-align: center; cursor: pointer; }

/* ------------------------------------------------------------------- 
 * responsive:
 * services
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
  .services { max-width: 1000px; }
}

@media only screen and (max-width:1000px) {
  .s-services { padding-top: 15rem; padding-bottom: 15rem; }
  .item-service__text { margin-left: 0; }
  .item-service__icon { float: none; margin-top: 0; font-size: 4.2rem; }
}

@media only screen and (max-width:800px) {
  .services { margin-top: 4.2rem; }
  .services .service-icon { font-size: 4.2rem; float: none; margin-top: 0; }
}

@media only screen and (max-width:650px) {
  .s-services { padding-top: 15rem; }
  .services { display: block; }
  .services .item-service { width: 100%; height: 100%; padding: 4rem 0; border-right: none; }
  .services .item-service:nth-child(2n) { padding-left: 0; }
  .services .item-service:nth-child(3),
  .services .item-service:nth-child(4) { border-bottom: none; }
  .services .item-service .item-service__text { display: block; width: 100%; }
  .services .item-service .item-service__text h3 { font-size: 20px; margin-bottom: 1rem; }
  .services .item-service .item-service__text .item-subtit { font-size: 24px; font-weight: 600; color: #a1a1a1; }
  .services .item-service .item-service__text .item-desc { margin-bottom: 0; font-size: 16px; }
  .services .item-service .item-service__text .item-desc .pc { display: none; }
  .services .item-service .item-service__text .item-desc .mo { display: block; }
  .services .item-service .item-service__text button { position: unset; margin: 2rem 0 0 0; }
  .services .item-service .item-service__text button.sub_link_btn .circle { width: 4rem; height: 4rem; background-size: 17px 17px; }
  .services .item-service .item-service__text button.sub_link_btn .button-text { left: 30px; font-size: 16px; line-height: 4rem; }
  .services .item-service .item-service__text button.sub_link_btn .circle .icon.arrow { width: 10px; height: 0px; }
  .services .item-service .item-service__text button.sub_link_btn .circle .icon.arrow::before { width: 10px; height: 10px; right: 5px; }

  .services div.modal { overflow: scroll; }
  .services .modal-content { top: 50%; transform: translateY(-50%); width: 90%; height: fit-content; padding: 0; }
  .services .modal-content .modal-inner { top: unset; left: unset; transform: unset; padding: 2rem; }
  .services .modal-content .modal-inner .modal-inner-head h1 { font-size: 24px; line-height: 1.4; }
  .services .modal-content .modal-inner .modal-inner-head p { margin: 0; padding: 0 0 3rem; font-size: 15px; }
  .services .modal-content .modal-inner .modal-inner-head p br.mo { display: block; }

  .services .modal-content .modal-inner .modal-inner-con { display: block; padding: 0; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt { display: block; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt:last-child { border-bottom: none; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt p { float: unset; width: 100%; line-height: 1.6; font-size: 18px; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt p br.mo { display: block; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt p span { font-size: 1.8rem; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt ul { float: unset; width: 100%; font-size: 16px; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt ul:nth-child(2) { width: 100%; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt ul li { padding: 0; list-style: disc; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt ul li:last-child { margin-bottom: 0; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt ul li br.mo { display: block; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt .inner_sub { margin-left: -1.7rem; font-size: 14px; }
  .services .modal-content .modal-inner .modal-inner-con .inner-txt .inner_sub br.mo { display: block; }

  .close { top: 10px; right: 15px; font-size: 25px; }
}

@media only screen and (max-width:400px) {
  .services .item-service .item-service_wrap .item-service__icon { height: 270px; }

  .services .item-service:nth-child(n) { padding-right: 0; padding-left: 0; }
  .services div.modal { padding-top: 110px; }
}

/* ===================================================================
 * # works
 * ------------------------------------------------------------------- */
.s-works { padding-top: 18rem; padding-bottom: 18rem; position: relative; background-color: #121212; }
.s-works .section-header h1 br.mo { display: none; }

/* ------------------------------------------------------------------- 
 * ## bricks/masonry
 * ------------------------------------------------------------------- */
.masonry-wrap { margin-top: 7.2rem; position: relative; overflow: hidden; }
.masonry-wrap:after { content: ""; display: table; clear: both; }
.masonry:after { content: ""; display: table; clear: both; }
.masonry .grid-sizer,
.masonry__brick { width: 50%; }
.masonry__brick { float: left; padding: 0; }

.masonry-wrap .masonry-inner { display: block; position: relative; }
.masonry-wrap .masonry-inner .masonry__brick { width: 100%; height: 100%; }
.masonry-wrap .masonry-inner .masonry__brick:nth-child(1) {  }
.masonry-wrap .masonry-inner .masonry__brick:nth-child(2) { display: inline-block; width: 50%; }
.masonry-wrap .masonry-inner .masonry__brick:nth-child(3) { display: inline-block; width: 50%; }

.item-folio { width: 100%; height: 100%; }
.item-folio .item-folio__thumb { display: table; width: 100%; height: 100%; }
.item-folio .item-folio__thumb .thumb-link { display: table; margin: 0 auto; z-index: -2; border-radius: 100%; }
.item-folio .item-folio__thumb .thumb-link .item-folio_img { display: block; width: 400px; height: 400px; }
.item-folio .item-folio__thumb .thumb-link .folio_img_01 { background: url(../images/portfolio/whycall_01.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.item-folio .item-folio__thumb .thumb-link .folio_img_02 { background: url(../images/portfolio/whycall_02.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.item-folio .item-folio__thumb .thumb-link .folio_img_03 { background: url(../images/portfolio/whycall_03.png); background-position: center; background-size: cover; background-repeat: no-repeat; }

.item-folio .item-folio__thumb .item-folio__text { display: table; margin: 0 auto; vertical-align: middle; text-align: center; }
.item-folio .item-folio__thumb .item-folio__text .item-folio__title { margin: 0 0 1rem 0; font-size: 32px; font-weight: 600; line-height: 1.286; color: #FFFFFF; text-transform: uppercase; }
.item-folio .item-folio__thumb .item-folio__text .item-folio__cat { color: #fff; font-size: 22px; font-weight: 400; margin-bottom: 0; }
.item-folio__caption { display: none; }

/* loading animate PC */
.masonry-wrap .loading_mo { display: none; }
.masonry-wrap .loading_pc { width: 600px; height: 600px; margin: 30px auto; }
.masonry-wrap .loading_pc .outer-shadow,
.masonry-wrap .loading_pc .inner-shadow, 
.masonry-wrap .loading_pc .timer { z-index: 6; width: 100%; height: 100%; border-radius: 100%; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); }
.masonry-wrap .loading_pc .inner-shadow { width: 100%; height: 100%; margin: 0 auto; border-radius: 100%; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

.masonry-wrap .loading_pc .timer { z-index: 1; box-shadow: none; }
.masonry-wrap .loading_pc .timer .hold { position: absolute; width: 100%; height: 100%; clip: rect(0px, 580px, 580px, 0px); -webkit-border-radius: 100%; }
.masonry-wrap .loading_pc .timer .hold .pie,
.masonry-wrap .loading_pc .timer .dot span { background-color: #4679ED; }
.masonry-wrap .loading_pc .timer .hold .pie { position: absolute; width: 100%; height: 100%; -webkit-border-radius: 100%; clip: rect(0px, 50px, 100px, 0px); }
.masonry-wrap .loading_pc .timer #left .pie { z-index: 1; -webkit-animation: left 4s linear both; animation-iteration-count: infinite; }

@-webkit-keyframes left {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); }
}

.masonry-wrap .loading_pc .timer #right { z-index: 3; -webkit-transform: rotate(180deg); }
.masonry-wrap .loading_pc .timer #right .pie { -webkit-animation: right 4s linear both; -webkit-animation-delay: 4s; animation-iteration-count: infinite; }

@-webkit-keyframes right {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); }
}

.masonry-wrap .loading_pc .timer .dot { z-index: 2; position: absolute; left: 50%; top: 50%; width: 40%; height: 10%; margin-top: -5px; -webkit-animation: dot 8s linear both; -webkit-transform-origin: 0% 50%; animation-iteration-count: infinite; }
.masonry-wrap .loading_pc .timer .dot span { position: absolute; right: 0; width: 20px; height: 20px; border-radius: 100%; }

@-webkit-keyframes dot {
  0% { -webkit-transform: rotate(-90deg); }
  50% { -webkit-transform: rotate(90deg); z-index: 4; }
  100% { -webkit-transform: rotate(270deg); z-index: 4; }
}

/* ------------------------------------------------------------------- 
 * responsive:
 * works
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
  .s-works { padding-top: 15rem; padding-bottom: 15rem; }
}

@media only screen and (max-width:800px) {
  .item-folio__title, .item-folio__cat { font-size: 1.3rem; }
}

@media only screen and (max-width:650px) {
  .s-works .section-header h1 br.mo { display: block; }
  .s-works .section-header h1 br.pc { display: none; }
  .s-works .section-header h1 br:first-child { display: block; }

  .masonry-wrap { margin-top: 3rem; }
  .masonry-wrap .masonry-inner { z-index: 1; }
  .masonry-wrap .masonry-inner .masonry__brick { float: none; width: 100%; margin-bottom: 10rem; }
  .masonry-wrap .masonry-inner .masonry__brick:nth-child(2),
  .masonry-wrap .masonry-inner .masonry__brick:nth-child(3) { width: 100%; }
  .masonry-wrap .loading_pc { display: none; }

  .item-folio .item-folio__thumb .thumb-link { position: unset; }
  .item-folio .item-folio__thumb .thumb-link .item-folio_img { width: 300px; height: 300px; }
  .item-folio .item-folio__thumb .thumb-link .folio_img_02 { background-size: 120%; }
  .item-folio .item-folio__thumb .item-folio__text .item-folio__title { font-size: 20px; }
  .item-folio .item-folio__thumb .item-folio__text .item-folio__cat { font-size: 16px; }

  /* loading animate Mobile */
  .loading_mo { position: absolute; top: 100%; left: 45%; height: 40px; width: 40px; display: block; content: ""; background-color: #4679ED; border-radius: 50%; animation: loadingMobile 5s; animation-delay: 5s; animation-iteration-count: infinite; animation-direction: alternate; opacity: 0; }
  .loading_mo.loading_mo_fun { animation-timing-function: ease-in-out; }

  @-webkit-keyframes loadingMobile {
    from { opacity: 0; top: 20%; }
    50% { opacity: 1; top: 50%; }
    to { opacity: 0; bottom: 50%; }
  }
  
  @keyframes loadingMobile {
    from { opacity: 0; top: 20%; }
    50% { opacity: 1; top: 50%; }
    to { opacity: 0; bottom: 50%; }
  }
}


/* ===================================================================
 * # clients
 * ------------------------------------------------------------------- */
 .s-values { padding-top: 15rem; padding-bottom: 15rem; position: relative; }

 .s-values .value_inner { } 
 .s-values .value_inner .inner_wrap { display: grid; grid-template-columns: repeat(2, 10fr); grid-template-columns: 50% 50%; padding: 5rem 0; border-top: 1px solid rgba(255,255,255,0.1); } 
 .s-values .value_inner .inner_wrap .inner_num { display: table; height: 100%; text-align: left; } 
 .s-values .value_inner .inner_wrap .inner_num div { position: relative; display: table-cell; vertical-align: middle; } 
 .s-values .value_inner .inner_wrap .inner_num div h3 { margin: 0; font-size: 32px; line-height: 1.6; } 
 .s-values .value_inner .inner_wrap .inner_num div p { display: inline-block; margin: 0; font-size: 22px; font-weight: 400; color: #a1a1a1; } 

 .s-values .value_inner .inner_wrap .inner_txt {  } 
 .s-values .value_inner .inner_wrap:last-child .inner_txt {  }
 .s-values .value_inner .inner_wrap .inner_txt ul { margin-bottom: 0; font-size: 22px; font-weight: 400; color: #Fff; } 
 .s-values .value_inner .inner_wrap .inner_txt ul li { list-style: disc; } 
 .s-values .value_inner .inner_wrap .inner_txt ul li::marker { font-size: 1.6rem; } 
 .s-values .value_inner .inner_wrap .inner_txt ul li br.mo { display: none; }
 .s-values .value_inner .inner_wrap .inner_txt ul li br.pc { display: block; }

 @media only screen and (max-width:650px) {
  .s-values .value_inner .inner_wrap { grid-template-columns: 100%; margin: 0; padding: 4rem 0; }
  .s-values .value_inner .inner_wrap .inner_num { padding: 0; margin-bottom: 3rem; }
  .s-values .value_inner .inner_wrap .inner_num div { display: block; }
  .s-values .value_inner .inner_wrap .inner_num div h3 { margin: 0; font-size: 24px; }
  .s-values .value_inner .inner_wrap .inner_num div p { margin: 0; font-size: 14px; }

  .s-values .value_inner .inner_wrap .inner_txt { padding: 0; border-top: 0; }
  .s-values .value_inner .inner_wrap .inner_txt h3 { margin-bottom: 2rem; font-size: 20px; line-height: 1.6; }
  .s-values .value_inner .inner_wrap .inner_txt ul { margin-left: 0; font-size: 16px; }
  .s-values .value_inner .inner_wrap .inner_txt ul li { margin-bottom: .3rem; line-height: 1.7; list-style: none; }
  .s-values .value_inner .inner_wrap .inner_txt ul li br.mo { display: none; } 
  .s-values .value_inner .inner_wrap .inner_txt ul li br.pc { display: none; }
}


/* ===================================================================
 * # clients
 * ------------------------------------------------------------------- */
.s-clients { padding-top: 15rem; padding-bottom: 15rem; position: relative; }
.s-clients .section-header h1 br.mo { display: none; }

.s-clients .grid-overlay > div, 
.s-clients .grid-overlay::before, 
.s-clients .grid-overlay::after { background-color: rgba(255, 255, 255, 0.05); }
.section-header, 
.clients-wrap { position: relative; }
.clients-wrap { margin-top: 7.2rem; }
.clients-wrap .naccs { display: block; min-height: 650px; }
.clients-wrap .naccs .grid { list-style: none; }
.clients-wrap .naccs .grid .gc { box-sizing: border-box; display: inline-block; margin-right: -.25em; min-height: 1px; vertical-align: top; }
.clients-wrap .naccs .grid .gc--1-of-3 { width: 30%; }
.clients-wrap .naccs .grid .gc--2-of-3 { width: 70%; padding: 0 0 0 10rem; }
.clients-wrap .naccs .menu div { padding: 15px 20px 15px 40px; margin-bottom: 10px; color: #555; background: #222; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; position: relative; vertical-align: middle; font-weight: 700;transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 2rem; text-transform: uppercase; }
.clients-wrap .naccs .menu div:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.clients-wrap .naccs .menu div.active { background-color: #4679ED; color: #fff; padding: 15px 20px 15px 20px; }
.clients-wrap .naccs .menu div span.dis { height: 33px; line-height: 35px; float: right; padding: 0 1.5rem; border-radius: 100px; font-size: 16px; background-color: rgba(255,255,255,0.2); color: #fff; }

.clients-wrap .nacc { position: relative; list-style: none; margin: 0; padding: 0; transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1); }
.clients-wrap .nacc .nacc_list { width: 100%; opacity: 0; transform: translateX(50px); position: absolute; list-style: none; transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); }
.clients-wrap .nacc .nacc_list.active { min-height: 650px; transition-delay: .3s; z-index: 2; opacity: 1; transform: translateX(0px); }
.clients-wrap .nacc .nacc_list .list_intro { margin-bottom: 6rem; line-height: 1.6; font-size: 32px; font-weight: 600; color: #fff; }
.clients-wrap .nacc .nacc_list .list_intro br.mo { display: none; }

.clients-wrap .nacc .nacc_list table { font-size: 22px; font-weight: 400; color: #fff; }
.clients-wrap .nacc .nacc_list table tr {  }
.clients-wrap .nacc .nacc_list table tr td { padding: 2rem; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.clients-wrap .nacc .nacc_list table tr td:first-child { padding-left: 0; color: #fff; border-bottom: none; }
.clients-wrap .nacc .nacc_list table tr td:last-child { border-bottom: none; }
.clients-wrap .nacc .nacc_list table tr:last-child { border-top: 1px solid rgba(255,255,255,0.1); }
.clients-wrap .nacc .nacc_list table tr td.tit { width: 30%; font-weight: 600; }
.clients-wrap .nacc .nacc_list table tr td .callee { display: block; font-size: 16px; opacity: .7; }
.clients-wrap .nacc .nacc_list table tr td dl { margin-bottom: 0; }
.clients-wrap .nacc .nacc_list table tr td dl dt { color: #fff; line-height: 1.9; }
.clients-wrap .nacc .nacc_list table tr td dl dt.strong { font-weight: 600; color: #4679ED; }

.clients-wrap .nacc .nacc_list table tr td.discount_tit { position: relative; }
.clients-wrap .nacc .nacc_list table tr td.discount_tit::after { position: absolute; content: ''; width: 45%; height: 3px; top: 32px; left: 16px; background: #ff0000; }
.clients-wrap .nacc .nacc_list table tr td span.discount_cost { margin-left: 1rem; color: #ff0000; font-weight: 600; font-size: 24px; }
.clients-wrap .nacc .nacc_list table tr td dl.discount { position: unset; margin-bottom: 0; margin-top: 1rem; }
.clients-wrap .nacc .nacc_list table tr td dl.discount dt { color: #f00; font-weight: 600; line-height: 1.8; }
.clients-wrap .nacc .nacc_list table tr td dl.discount dt:last-child { font-size: 16px; }
.clients-wrap .nacc .nacc_list table tr td dl.discount dt:last-child br.mo { display: none; }

.clients-wrap .nacc .nacc_list .btn_goto { margin-top: 4rem; }
.clients-wrap .nacc .nacc_list .btn_goto.btn_goto_mo { display: none; }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft { width: 300px; height: 7.2rem; line-height: 7.2rem; overflow: hidden; padding: 0 25px; border: 1px solid #fff; color: #fff; position: relative; font-size: 20px; font-weight: 600; border-radius: 3px; }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft a { color: #fff; }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft span { display: inline-block; transition: transform .3s cubic-bezier(.455,.03,.515,.955); }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft svg { position: absolute;top: 50%; right: 15%; fill: #fff; opacity: 0; transform: translate(-15px, -50%); transition: opacity .3s .05s cubic-bezier(.455,.03,.515,.955), transform .3s .05s cubic-bezier(.455,.03,.515,.955); }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft:hover { cursor: pointer; }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft:hover span { transform: translateX(15px); }
.clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft:hover svg { opacity: 1; transform: translate(15px, -50%); }


/* ------------------------------------------------------------------- 
 * responsive:
 * clients
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
  .s-clients { padding-top: 15rem; }
  .clients { font-size: 4.2rem; }
}

@media only screen and (max-width:900px) {
  .clients { font-size: 4rem; }
}

@media only screen and (max-width:800px) {
  .clients-wrap { margin-top: 3.6rem; }
  .clients { font-size: 3.4rem; }
}

@media only screen and (max-width:650px) {
  .s-clients { padding-top: 15rem; padding-bottom: 15rem; }
  .s-clients .section-header h1 br.mo { display: block; }
  .s-clients .section-header h1 br { display: block; }
  .clients { font-size: 3rem; }
  .clients h1 br:nth-child(2) { display: block; }

  .clients-wrap .naccs { min-height: 1000px; }
  .clients-wrap .naccs .menu div { font-size: 20px; }
  .clients-wrap .naccs .grid .gc--1-of-3 { width: 100%; }
  .clients-wrap .naccs .grid .gc--2-of-3 { width: 100%; padding: 0; }

  .clients-wrap .nacc .nacc_list { transform: translateX(0px); }
  .clients-wrap .nacc .nacc_list .list_intro { font-size: 24px; margin-bottom: 4rem; margin-top: 4rem; }
  .clients-wrap .nacc .nacc_list .list_intro br.mo { display: block; }
  .clients-wrap .nacc .nacc_list .list_intro br.pc { display: none; }
  .clients-wrap .nacc .nacc_list .list_intro.free_intro,
  .clients-wrap .nacc .nacc_list .list_intro.enter_intro { word-break: keep-all; }

  .clients-wrap .nacc .nacc_list table { font-size: 16px; }
  .clients-wrap .nacc .nacc_list table tr td.tit { width: 30%; }
  .clients-wrap .nacc .nacc_list table tr td { padding: 1.5rem 2rem; }
  .clients-wrap .nacc .nacc_list table tr td.discount_tit::after { width: 68%; top: 12%; }
  .clients-wrap .nacc .nacc_list table tr td span.discount_cost { display: block; margin-left: 0; font-size: 20px; }
  .clients-wrap .nacc .nacc_list table tr td dl.discount dt:last-child { font-size: 14px; }
  .clients-wrap .nacc .nacc_list table tr td dl.discount dt:last-child br.mo { display: block; }
  .clients-wrap .nacc .nacc_list table tr td .callee { font-size: 14px; }
  .clients-wrap .nacc .nacc_list .btn_goto { display: none; }
  .clients-wrap .nacc .nacc_list .btn_goto.btn_goto_mo { display: block; }
  .clients-wrap .nacc .nacc_list .btn_goto .arrowFromLeft { width: 100%; font-size: 16px; }
}

@media only screen and (max-width:500px) {
  .clients-wrap { margin-top: 1.5rem; }
  .clients { font-size: 2.4rem; }
  .clients li { padding: 0 1rem; }
}

@media only screen and (max-width:400px) {
  .clients { font-size: 2.1rem; }
  .clients li { padding: 0 .6rem; }
}


/* ===================================================================
 * # testimonials
 * ------------------------------------------------------------------- */
.testimonials { padding-top: 16.2rem; padding-bottom: 21rem; text-align: center; position: relative; }
.testimonials::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .9; background-color: #111111; z-index: -1; }
.testimonials .grid-overlay { width: 1200px; }
.testimonials .testimonials__icon_left { position: absolute; top: -30%; left: 2%; height: 4.5rem; width: 4.5rem; margin-left: -1rem; background-color: transparent; background-image: url(../images/icons/icon-quote.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; }

.testimonials .section-header { padding-top: 0; text-align: left; }
.testimonials .section-header h1 { }
.testimonials .section-header h1 br { }

.testimonials .about-how-content { display: table; margin-top: 7.2rem; margin-left: auto; margin-right: auto; clear: both; z-index: 3; }
.testimonials .about-how-content .about-how-steps { display: table-cell; margin: 0 auto; }
.testimonials .about-how-content .about-how-steps .guide_step {  }
.testimonials .about-how-content .about-how-steps .guide-step:after { content: ""; clear: both; display: block; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner { position: relative; display: table; width: 330px; height: 330px; float: left; border: 1px solid #ccc; border-radius: 100%; color: #fff; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner:nth-child(2) { margin-right: 15rem; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner:nth-child(2)::after { position: absolute; content: ''; clear: both; top: 50%; right: -24%; display: inline-block; padding: 3px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: linear 0.5s; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner:last-child { background-color: #4679ED; border: none; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner:last-child h3,
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner:last-child p { color: #fff; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner .guide_inner_con { display: table-cell; text-align: center; padding: 4rem; margin: 0 auto; vertical-align: middle; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner .guide_inner_con h3 { font-size: 32px; margin: 0 0 2rem 0; }
.testimonials .about-how-content .about-how-steps .guide_step .guide_inner .guide_inner_con p { font-size: 22px; margin: 0; line-height: 1.7; }

/* ------------------------------------------------------------------- 
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
  .testimonials .about-how-content { max-width: 800px; }
}

@media only screen and (max-width:1000px) {
  .s-testimonials { padding-top: 15rem; padding-bottom: 19.2rem; }
  .testimonials .about-how-content { max-width: 700px; }
}

@media only screen and (max-width:900px) {
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner { float: unset; margin-right: unset; margin-bottom: 5rem; }
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner:nth-child(2)::after { top: unset; bottom: -3rem; right: 49%; display: block; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
}

@media only screen and (max-width:800px) {
  .testimonials .about-how-content { max-width: 550px; }
  .testimonials .about-how-content::after { display: none; }
  .testimonials .about-how-content .step { width: 100% !important; float: none !important; clear: both !important; margin-left: 0;margin-right: 0; padding-right: 18px; min-height: auto; padding: 0 40px .9rem 60px; }
}

@media only screen and (max-width:700px) {
  .testimonials .grid-overlay { width: 100%; }
  .testimonials .testimonials__icon_left { top: -50%; left: 11%; }
  .testimonials .display-1 br { display: block; }

  .testimonials .about-how-content::before { left: 30px; }
  .testimonials .about-how-content .step { padding: 0 10px 0 80px; }
  .testimonials .about-how-content .step::before { font-size: 1.6rem; height: 45px; width: 45px; line-height: 45px; top: -9px; left: 7.5px; }
}

@media only screen and (max-width:650px) {
  .testimonials { padding-bottom: 15rem; }
  .testimonials .about-how-content .about-how-steps .guide_step { display: grid; }
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner { margin: 0; width: 300px; height: 300px; }
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner:nth-child(2) { margin-right: 0; margin-bottom: 5rem; }
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner:nth-child(2)::after { right: 50%; top: unset; bottom: -8%; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner .guide_inner_con h3 { font-size: 24px; }
  .testimonials .about-how-content .about-how-steps .guide_step .guide_inner .guide_inner_con p { font-size: 16px; color: #fff; }
}

@media only screen and (max-width:400px) {
  .testimonials .about-how-content { text-align: center; }
  .testimonials .about-how-content::before { display: none; }
  .testimonials .about-how-content .step { padding: 60px 0 0 0; }
  .testimonials .about-how-content .step::before { top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
}


/* ===================================================================
 * # contact
 *
 * ------------------------------------------------------------------- */
.s-contact { position: relative; padding-top: 16.2rem; padding-bottom: 21rem; background-color: #111; color: rgba(255, 255, 255, 0.6); text-align: center; }
.s-contact .section-header h1 .mo { display: none; }
.s-contact .section-header .col-full { text-align: left; }
.s-contact a { color: #FFFFFF; }

.s-contact .section-header,
.s-contact .contact-main { position: relative; }

.contact-main { font-size: 3.3rem; line-height: 1.636; margin-top: 9rem; }
.contact-main [class*="contact-"] { margin-bottom: 0; }
.contact-main .appDown_wrap.pc { display: block; }
.contact-main .appDown_mo { display: none; }

.contact-main .appDown_wrap ul { margin: 0; display: flex; justify-content: end; align-items: center; }
.contact-main .appDown_wrap ul li { list-style: none; width: 100%; display: flex; justify-content: end; align-items: center; }
.contact-main .appDown_wrap ul li:last-child { margin-right: 0; }
.contact-main .appDown_wrap ul li .store_icon { width: 50px; height: 50px; margin-right: 16px; display: inline-block; }
.contact-main .appDown_wrap ul li .store_icon.appStore_icon { background: no-repeat center url(../images/icons/icon_ios.png); background-size: contain; }
.contact-main .appDown_wrap ul li .store_icon.googlePlay_icon { background: no-repeat center url(../images/icons/icon_aos.png); background-size: contain; }
.contact-main .appDown_wrap ul li .store_tit { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: 4rem; }
.contact-main .appDown_wrap ul li .store_tit strong { color: #fff; }

.contact-main .appDown_wrap ul li .app_btn { float: right; width: 200px; padding: 11px 0 12px; border-radius: 3px; font-size: 20px; font-weight: 600; color: #fff; border: 1px solid #fff; text-align: center; }
.contact-main .appDown_wrap ul li .app_btn:hover { background: #fff; color: #222; }
.contact-main .appDown_wrap ul li .app_btn:before { display: inline-block; content: ''; width: 25px; height: 25px; margin: 2px 15px 0 0; background: no-repeat center url(../images/icons/icon_down-arrow.png); background-size: contain; vertical-align: top; }
.contact-main .appDown_wrap ul li .app_btn:hover:before { background: no-repeat center url(../images/icons/icon_down-arrow_ho.png); background-size: contain; }

.contact-main .contact-email { margin-bottom: 3.6rem; }
.contact-email a { font-size: 9rem; font-weight: 700; line-height: 1.2; color: #FFFFFF; border-bottom: 3px solid rgba(0, 0, 0, 0.2); }
.contact-email a:hover,
.contact-email a:focus { border-bottom: 3px solid rgba(255, 255, 255, 0.2); }

.contact_modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 15rem; margin: auto; z-index: 99999; overflow: scroll; background-color: #fefefe; }
.contact_modal .form_greeting { text-align: left; border-bottom: 1px solid #ddd; }
.contact_modal .form_greeting h1 { margin: 0; line-height: 1.4; color: #222; }
.contact_modal .form_greeting h1 br.mo { display: none; }
.contact_modal .form_greeting p { margin: 3rem 0 5rem; font-size: 2rem; line-height: 1.7; color: #222; }
.contact_modal .form_greeting p br.mo { display: none; }

/* contact form */
.contact_modal form { margin-top: 5rem; margin-bottom: 0; }
.contact_modal form .form_bg { margin-bottom: 3rem; border-radius: 5px; }
.contact_modal form .form_bg .form_box { width: calc(100% / 2.042); display: inline-block; }
.contact_modal form .form_bg .form_box:first-child { margin-right: 2rem; }

.contact_modal form .form_bg .form-field { position: relative; }
.contact_modal form .form_bg .form-field:before, .contact-main form .form-field:after { content: ""; display: table; }
.contact_modal form .form_bg .form-field:after { clear: both; }
.contact_modal form .form_bg .form-field label { font-size: 1.6rem; position: absolute; bottom: 3.3rem; right: 2rem; text-transform: uppercase; color: #ff0000; }
.contact_modal form ::-webkit-input-placeholder { color: #555; }
.contact_modal form :-moz-placeholder { color: #555; }
.contact_modal form ::-moz-placeholder { color: #555; }
.contact_modal form :-ms-input-placeholder { color:#555; }
.contact_modal form .placeholder { color: #555 !important; }
.contact_modal form .row .tab-full { width: 100%; }
.contact_modal form .row .tab-full .paddingNo { padding: 0; }

.contact_modal input[type="text"],
.contact_modal input[type="password"],
.contact_modal input[type="email"],
.contact_modal input[type="tel"] { width: 100%; height: 6rem; color: #999; margin-bottom: 3.0rem; background: #f9f9f9; font-size: 1.8rem; border-radius: 5px; border: 1px solid #ccc; }

.contact_modal input[type="text"]:focus,
.contact_modal input[type="password"]:focus,
.contact_modal input[type="email"]:focus,
.contact_modal input[type="tel"]:focus { color: #333; }

.contact_modal textarea { width: 100%; height: 5rem; min-height: 21rem; padding: 1.8rem 2rem; color: #111; background: #f9f9f9; font-size: 1.8rem; border-radius: 5px; border: 1px solid #ccc; }
.contact_modal textarea:focus { color: #333; }

.contact_modal button { display: inline-block; width: 30%; height: 7rem; line-height: 7rem; padding: 0 3rem; margin: 3rem 1rem 0; background: #4679ED; border-radius: 5px; font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; border: none; color: #fff; }
.contact_modal button.contactClose { background-color: #ccc; color: #fff; }
.contact_modal button.contactClose:hover, 
.contact_modal button.contactClose:focus { background-color: #999; }
.contact_modal button.btn:hover, 
.contact_modal button.btn:focus { background-color: #1d5cbb; color: #fff; border: none; }

.contact_modal .checkBox, 
.contact_modal .checkBox ul { margin-inline-start: unset; margin-bottom: 20px; letter-spacing: -0.05rem; text-align: left; }
.contact_modal .checkBox input[type="checkbox"] { background: transparent !important; border: 1px solid #fff !important; }
.contact_modal .checkBox li { display: inline-block; list-style: none; }
.contact_modal .checkBox li.checkBtn { padding: 0; vertical-align: top; }
.contact_modal .checkBox li.checkBtn input { width: 25px; height: 25px; margin-bottom: 0; }
.contact_modal .checkBox li.checkTxt { display: inline-block; margin-left: 10px; padding: 0; color: #222; font-weight: 600; font-size: 1.6rem; vertical-align: middle; }
.contact_modal .checkBox li.checkSub { font-size: 1.6rem; vertical-align: middle; color: #222; }
.contact_modal .checkBox li.checkSub br.mo { display: none; }

#message-warning, #message-success { display: none; background: rgba(255,255,255,0.1); padding: 4rem; width: 100%; text-align: center; border-radius: 5px; }
#message-warning { color: #ff0000; }
#message-success { color: #4679ED; text-align: center; }
#message-success i { display: inline-block; padding: 20px; border: 1px solid #4679ED; border-radius: 50px; font-size: 30px; margin-bottom: 30px; color: #4679ED; }
#message-success .message_txt { margin-bottom: 0; font-size: 20px; }

/* form loader */
#submit-loader { display: none; position: relative; left: 0; top: 1.8rem; width: 100%; text-align: center; margin-bottom: 4.2rem; }
#submit-loader .text-loader { display: none; font-size: 1.4rem; color: #FFFFFF; text-transform: uppercase; }
.oldie #submit-loader .s-loader { display: none; }
.oldie #submit-loader .text-loader { display: block; }

/* contact info */
.contact-main .contact-info { display: inline-block; width: 100%; padding: 0; margin-top: 7rem; }
.contact-main .contact-info .contactWay_wrap {  }
.contact-main .contact-info .contactWay_wrap h3 { margin: 0; font-size: 32px; font-weight: 600; color: #fff; text-align: left; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner { padding: 4rem; margin-top: 4rem; border: 1px solid rgba(255,255,255,0.3); }
.contact-main .contact-info .contactWay_wrap .contactWay_inner ul { margin: 0; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner ul li { margin-bottom: 3rem; padding-bottom: 2rem; padding-left: 0; border-bottom: 1px solid rgba(255,255,255,0.3); text-align: left; list-style: none; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner ul li .inner_txt { display: inline-block; text-align: left; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner ul li .inner_txt h3 { margin: 0 0 1rem 0; font-size: 24px; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner ul li .inner_txt p { margin: 0; font-size: 20px; color: #fff; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner button { float: right; background: transparent; border: 1px solid #fff; border-radius: 100px; font-size: 20px; font-weight: 600; color: #fff; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner button:hover { background-color: #fff; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner button:hover span,
.contact-main .contact-info .contactWay_wrap .contactWay_inner button:hover a { color: #222; }

.contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn { display: block; float: right; font-size: 20px; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn .bt_btn { display: block; text-align: right; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn .bt_btn:last-child { padding-top: 2rem; }
.contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn .bt_btn::after { display: inline-block; content: ''; width: 20px; height: 20px; margin: 0 0 5px 15px; background: url(../images/icons/icon_docu_down.png) no-repeat center; background-size: contain; vertical-align: middle; }


/* ------------------------------------------------------------------- 
 * responsive:
 * contact
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
  .contact-main { font-size: 3.1rem; }
  .contact-email a { font-size: 7.6rem; }
  .contact-main form .form_bg .form_box { width: calc(100% / 2.06); }
}

@media only screen and (max-width:1000px) {
  .s-contact { padding-top: 15rem; padding-bottom: 19.8rem; }
  .contact-main { font-size: 3rem; }
  .contact-email a { font-size: 7.2rem; }
}

@media only screen and (max-width:900px) {
  .contact-main { font-size: 2.8rem; }
  .contact-main .contact-info { width: 38%; }
  .contact-main .contact-info .cinfo .bt_btn { width: 45%; }
  /* .contact-main form { padding: 0 30px; } */
  .contact-main form .form_bg .form_box { width: 100%; }
  .contact-main button.btn { width: 50%; }
}

@media only screen and (max-width:800px) {
  .contact-main { font-size: 2.6rem; }
  .contact-main .contact-info { width: 100%; margin-top: 7rem; }
  .contact-main form .form-field { text-align: left; }
}

@media only screen and (max-width:700px) {
  .contact-main { font-size: 2.4rem; }
  .contact-email a { font-size: 3.8rem; }
  .contact-social { font-size: 3.2rem; }
}

@media only screen and (max-width:650px) {
  .s-contact { padding-top: 15rem; padding-bottom: 15rem; }
  .s-contact .section-header h1 br,
  .s-contact .section-header h1 br.mo { display: block; }
  .s-contact .section-header h1 br.pc { display: none; }

  .contact-main .appDown_wrap.pc { display: none; }
  .contact-main .appDown_mo { display: block; }
  .contact-main .appDown_mo ul { margin: 0; }
  .contact-main .appDown_mo ul li { list-style: none; margin-bottom: 2rem; }
  .contact-main .appDown_mo ul li .app_btn { display: block; width: 100%; padding: 2rem; border-radius: 3px; font-size: 20px; font-weight: 600; color: #fff; border: 1px solid #fff; text-align: center; }
  .contact-main .appDown_mo ul li .app_btn:hover { background: #fff; color: #222; }
  .contact-main .appDown_mo ul li .app_btn.appStore_btn::before { display: inline-block; content: ''; width: 30px; height: 30px; margin-right: 2rem; background: url(../images/icons/icon_ios.png) no-repeat center; background-size: contain; vertical-align: middle; }
  .contact-main .appDown_mo ul li .app_btn.googlePlay_btn::before { display: inline-block; content: ''; width: 30px; height: 30px; margin-right: 2rem; background: url(../images/icons/icon_aos.png) no-repeat center; background-size: contain; vertical-align: middle; }

  .contact-main .contact-info .contactWay_wrap h3 { font-size: 24px; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner { padding: 3rem; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner ul li { padding-bottom: 2rem; margin-bottom: 3rem; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner ul li .inner_txt h3 { font-size: 20px; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner ul li .inner_txt p { font-size: 16px; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner button { float: unset; display: block; width: 100%; margin-top: 3rem; font-size: 16px; font-weight: 600; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn { float: unset; margin-top: 3rem; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn .bt_btn { font-size: 16px; font-weight: 600; text-align: left; }
  .contact-main .contact-info .contactWay_wrap .contactWay_inner li.document .docu_btn .bt_btn:last-child { padding-top: 1rem; }

  .contact-main { font-size: 2.1rem; margin-top: 4.2rem; }
  .contact-main button.btn { width: 70%; }
  .contact-main form .form-field button.btn { width: 100%; }
  .contact-main form .form_bg .form_box { width: 100%; }
  .contact-main .contact-info .cinfo .bt_btn { width: 100%; margin-right: 0; margin-bottom: 2rem; }
  .contact-main .contact-info .cinfo .bt_btn:last-child { margin-bottom: 0; }
  .contact-main .contact-info .cinfo.document { display: block; margin-bottom: 2rem; }

  .contact_modal { padding: 5rem 3rem 3rem 3rem; }
  .contact_modal .form_greeting h1 { font-size: 24px; }
  .contact_modal .form_greeting h1 br.mo { display: block; }
  .contact_modal .form_greeting p { margin: 3rem 0; font-size: 16px; font-weight: 600; color: #a1a1a1; }
  .contact_modal .form_greeting p br.mo { display: block; }
  .contact_modal form { margin-top: 3rem; }
  .contact_modal form .form_bg .form_box { width: 100%; }
  .contact_modal form .form_bg .form_box:first-child { margin-right: 0; }
  .contact_modal input[type="text"],
  .contact_modal input[type="password"], 
  .contact_modal input[type="email"], 
  .contact_modal input[type="tel"] { margin-bottom: 2rem; }
  .contact_modal .form_buttons { display: flex; }
  .contact_modal button { width: 50%; height: 6rem; margin: 2rem 10px 2rem 0; line-height: 6rem; }
  .contact_modal button:last-child { margin-right: 0; }
  .contact_modal .checkBox li.checkSub br.mo { display: block; }
}

@media only screen and (max-width:500px) {
  .contact-main { font-size: 1.8rem; }
  .contact-email a { font-size: 3rem; }
  .contact-main .contact-info { width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0;padding: 0; }
  .contact-main form .row .tab-full .paddingNo { padding: 0; }
}


/* ===================================================================
 * # footer
 *
 * ------------------------------------------------------------------- */
 footer { padding: 0; font-size: 1.5rem; list-style: none; font-weight: 500; }
 footer a, footer a:hover { color: #999; }
 .footer-main { margin: 0 auto; padding: 6rem 0; box-sizing: border-box; }
 .footer-main .area_call {}
 .footer-main .area_call .call_logo { float: left; width: 50px; height: 50px; margin: 0; background: url(../images/home_logo.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
 .footer-main .area_call .list-links { float: right; }
 .footer-main .area_call .list-links li { display: inline-block; margin-right: 20px; font-size: 22px; }
 .footer-main .area_call .list-links li a { color: #fff; }
 .footer-main .area_call .list-links li:last-child { margin-right: 0; }
 
 .footer-main .area_menu { position: relative; margin-top: 13rem; }
 .footer-main .area_menu .list_info { display: flex; margin: 0; }
 .footer-main .area_menu .list_info .link_info { margin-right: 2rem; padding-left: 0; font-size: 2rem; font-weight: 500; list-style: none; }
 .footer-main .area_menu .list_info .link_info a { color: #f5f5f5; }
 .footer-main .area_menu .list_info .link_info a:hover { color: #ccc; }
 .footer-main .area_menu .list_info .link_info a.privacy { font-weight: 800; }
 
 .footer-main .area_menu .modal { display: none; position: fixed; z-index: 1; left: 50%; top: 50%; width: 76%; height: 800px; transform: translate(-50%, -50%); overflow: auto; box-shadow: 0 0 30px 10px rgb(0 0 0 / 80%); }
 .footer-main .area_menu .modal::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); }
 .footer-main .area_menu .modal .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; }
 .footer-main .area_menu .modal .modal-content h2 { position: relative; display: inline-block; margin: 1rem 0 2rem 0; font-size: 2.5rem; font-weight: 600; color: #222; }
 .footer-main .area_menu .modal .modal-content h2::after { position: absolute; bottom: -21px; left: 0; display: inline-block; content: ''; width: 100%; height: 3px; background-color: #4079D1; }
 .footer-main .area_menu .modal .modal-content .mfp-iframe { display: block; width: 100%; height: 90%; border: 1px solid #eee; }
 .footer-main .area_menu .modal .modal-content .mfp-iframe .ct-agree-layout { background-color: #fff !important; }
 .footer-main .area_menu .modal .modal-content .close { margin-top: 10px; color: #aaaaaa; float: right; font-size: 40px; font-weight: 300; }
 .footer-main .area_menu .modal .modal-content .close:hover, .footer-main .area_menu .modal .modal-content .close:focus { color: #000; text-decoration: none; cursor: pointer; }
 
 .footer-main .area_menu .wrap_social { position: absolute; bottom: 0; right: 0; }
 .footer-main .area_menu .wrap_social .social_list li { float: left; margin-right: 15px; list-style: none; }
 .footer-main .area_menu .wrap_social .social_list li:last-child { margin-right: 0; }
 .footer-main .area_menu .wrap_social .social_list li a .fa-facebook-square { color: #999; font-size: 2.5rem; }
 .footer-main .area_menu .wrap_social .social_list li a .fa-facebook-square:hover { color: #222; }
 .footer-main .area_menu .wrap_social .social_list li a .fa-instagram { color: #999; font-size: 2.5rem; }
 .footer-main .area_menu .wrap_social .social_list li a .fa-instagram:hover { color: #222; }
 
 .footer-main .area_menu .wrap_address { height: 100%; margin: .5rem 0 .5rem; font-style: normal; }
 .footer-main .area_menu .wrap_address .list_address { display: flex; margin: 0; align-items: center; color: #aeaeae; font-size: 1.6rem; }
 .footer-main .area_menu .wrap_address .list_address dt { display: inline-block; margin-right: 5px; font-weight: 400; color: #aeaeae; }
 .footer-main .area_menu .wrap_address .list_address dd { margin-left: 0; letter-spacing: 0; }
 
 .footer-main .area_menu .txt_copyright { display: block; color: #aeaeae; font-size: 1.6rem; letter-spacing: 0.02rem; }
 .footer-main .area_menu .wrap_address .list_address .address_01 { display: flex; margin-right: 10px; }
 .footer-main .area_menu .wrap_address .list_address .address_02 { display: flex; }
 .footer-main .area_menu .wrap_address .list_address .address_02 dt::before { display: inline-block; width: 1px; height: 10px; margin: 0 10px 0 0; background: #aeaeae; content: ""; }
 .footer-main .area_menu .wrap_address .list_address .address_03 p { margin-bottom: 0; }
 
/* ------------------------------------------------------------------- 
 * responsive:
 * footer 
 * ------------------------------------------------------------------- */

 @media only screen and (max-width: 768px) {
  footer h4.h05 { padding-bottom: 3rem; margin-bottom: 3rem; }
  footer h4.h05::after { left: 50%; margin-left: -50px; }
  footer h4.call_logo { margin: 0 auto 3rem; }
  .footer-main { width: 100%; height: 100%; padding: 6rem 3rem; text-align: center; }
  .footer-main [class*="col-"] { width: 100%; }
  .footer-main .area_call .call_logo { float: none; text-align: center; }
  .footer-main .area_call .list-links { float: none; margin: 5rem 0 5rem; }
  .footer-main .area_call .list-links li { display: block; margin-right: 0; margin-bottom: 10px; text-align: left; padding-left: 0; font-size: 2rem; font-weight: 600; }
  .footer-main .area_menu { position: unset; margin-top: 6rem; }
  .footer-main .area_menu .list_info { display: block; margin-bottom: 3rem; }
  .footer-main .area_menu .list_info li { margin-bottom: 10px; margin-right: 0; }
  .footer-main .area_menu .list_info li:last-child { margin-right: 0; }
  .footer-main .area_menu .list_info li .link_info { margin-bottom: 2rem; font-size: 1.4rem; }
  .footer-main .area_menu .list_info .link_info { display: block; margin-bottom: 1.5rem; margin-right: 0; line-height: 20px; text-align: left; font-size: 16px; font-weight: 600; }
  .footer-main .area_menu .list_info .link_info a { color: #a1a1a1; }

  .footer-main .area_menu .wrap_address { height: unset; padding-top: 3rem; margin-bottom: 3rem; border-top: 1px solid rgba(255,255,255,0.2); text-align: left; }
  .footer-main .area_menu .wrap_address .list_address { display: inline-block; margin-top: 0; line-height: 25px; }
  .footer-main .area_menu .wrap_address .list_address div { margin-bottom: .5rem;  }
  .footer-main .area_menu .wrap_address .list_address dd { display: inline; }
  .footer-main .area_menu .wrap_address .list_address .address_02 dt::before { display: none; }
  .footer-main .area_menu .wrap_address .list_address .address_03 p { margin-left: 0 !important; margin-bottom: 0; }
  .footer-main .area_menu .wrap_social { position: unset; display: flex; }
  .footer-main .area_menu .wrap_social .social_list { margin: 0; }
  .footer-main .area_menu .txt_copyright { text-align: left; }
  .footer-main .footer-menu { margin: 40px 0; }
  .footer-main .footer-menu ul li { display: block; margin: 0; }
  .footer-main .footer-social { width: 100%; }
  .footer-main .footer-social .social-list { display: table; width: 100%; }

  .footer-main .area_menu .modal { width: 100%; padding: 2rem; }
  .footer-main .area_menu .modal .modal-content h2 { float: left; font-size: 2.2rem; }
  .footer-main .area_menu .modal .modal-content .close { margin-top: 15px; }
  .footer-main .area_menu .modal .modal-content .mfp-iframe { height: 88.5%; }

  #app_down { bottom: 20px; }
  #app_down a { margin-right: 0; width: 60px; height: 60px; line-height: 60px; }
  #app_down a:hover { background-color: transparent; }
  #app_down a span { width: 35px; height: 35px; margin-bottom: 10px; }
  #app_down .android .google { margin-left: 0; }
  #app_down a:hover .down_tit { top: 8px; right: 75px; }
}

@media only screen and (max-width: 500px) {
  .footer-main .area_menu .list_info {  }
  .footer-main .area_menu .list_info .link_info { display: block; margin-right: 0; }
  .footer-main .area_menu .modal .modal-content h2 { float: left; margin: 1rem 0 1rem 0; font-size: 1.8rem; }
  .footer-main .area_menu .modal .modal-content h2::after { bottom: -11px; font-size: 40px; }
  .footer-main .area_menu .modal .modal-content .close { margin-top: -2px; font-size: 35px; }
  .footer-main .area_menu .modal .modal-content .mfp-iframe { height: 93%; }

  #app_down a:after { border: none; }
  #app_down a:hover .down_tit { top: 11px; right: 60px; height: 38px; line-height: 38px; font-size: 1.6rem; }
}

/* ------------------------------------------------------------------- 
* responsive: * 일괄
* ------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  .footer-bottom { padding-bottom: .6rem; }
  .footer-bottom .copyright span { display: block; }
  .footer-bottom .copyright span::after { display: none; }
}

@media only screen and (max-width: 768px) {
  /* section { padding: 12rem 0 12rem !important; } */
  .section-intro.with-bottom-sep { padding-bottom: 0 !important; }
}

/*# sourceMappingURL=main.css.map */