@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;700&display=swap');

/* Webfonts */
@-webkit-keyframes fa-spin 
{0%    {-webkit-transform: rotate(0deg); transform: rotate(0deg) } 
    100% {-webkit-transform: rotate(359deg); transform: rotate(359deg) }}
@keyframes fa-spin 
{0% {-webkit-transform: rotate(0deg); transform: rotate(0deg) } 
100% {-webkit-transform: rotate(359deg); transform: rotate(359deg) }}

html {overflow-y: scroll;}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
select,
button,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
tr,
textarea {margin: 0; padding: 0;}
body,
td,
form,
select,
input,
button,
textarea,
div,
option,
pre,
p,
span,
blockquote,
li,
dt,
dd,
legend,
label,
h1,
h2,
h3,
h4,
h5,
h6 {font-family: 'Noto sans KR', Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
fieldset,
img {border: none;}
.main {display: block;}
dl,
ul,
ol,
menu,
li {list-style: none;}
blockquote,
q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {display: block; content: '';}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
fieldset,
legend {display: block; margin: 0; padding: 0;}
img {-ms-interpolation-mode: bicubic !important; border: none; vertical-align: middle;}
a,
input,
select,
textarea,
button,
label {vertical-align: top; outline: none;}
input,
select,
textarea {box-sizing: border-box;}
label,
button,
input[type=button],
input[type=submit],
input[type=image] {cursor: pointer;}
label img {pointer-events: none;}
h1,
h2,
h3,
h4,
h5,
h6, 
p {margin: 0; padding: 0;}
table {border-collapse: collapse; border-spacing: 0;}
::-moz-selection {background-color: rgba(0, 0, 0, 0.4); color: #fff;}
::selection {background-color: rgba(0, 0, 0, 0.4); color: #fff;}
::-webkit-input-placeholder {color: #98908b;}
:-moz-placeholder {color: #98908b;}
::-moz-placeholder {color: #98908b;}
:-ms-input-placeholder {color: #98908b;}
a:link {text-decoration: none; color: #666666;}
a:visited {text-decoration: none; color: #666666;}
a:active {text-decoration: none; color: #666666;}
a:hover {text-decoration: none; color: #000000;}

.fp-tableCell{
    height: 100%;}
/* Reset Webkit Browsers */
* {-webkit-text-size-adjust: none; -webkit-border-radius: 0; -webkit-overflow-scrolling: touch;}
button,
input[type=button],
input[type=submit],
input[type=image] {-webkit-appearance: none; outline: none; border: 0;}

.hide {display: none;}
.max-768 {display: none;}
.min-768 {display: block;}
.only-1200 {display: block;}
@media screen and (max-width: 1200px) {
	.only-1200 {display: none;}
}
@media screen and (max-width : 768px) {
    .max-768 {display: block;}
    .min-768 {display: none;}
}

#header {position: absolute; top: 0; left: 0; z-index: 90; width: 100%; transition: all 1s ease-in;}
#header .inner {position: relative; width: 100%; height: 95px; margin: 0 auto;}
#header .inner .logo {position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 150px;}
#header .inner .logo a {display: block;}
#header .inner .logo a img {display: block; width: 100%;}
#slide-close {position: absolute; top: 32px; right: 30px; width: 31px; height: 30px; }

#gnb {position: absolute; top: 0; right: -100%; padding-top: 100px; box-sizing: border-box; width: 360px; height: 100vh; background: #fff; z-index: 201; overflow-y: auto; transition: all 0.3s cubic-bezier(0.930, 0.635, 0.650, 0.970); z-index: 9;}
#gnb.open {right: 0;}
#gnb.open + #slide-btn {position: fixed;}
#gnb>li {border-bottom: 1px solid #e1e1e1;}
#gnb>li>a {display: block; line-height: 70px; padding: 0 35px; font-size: 18px; font-weight: 200; letter-spacing: -1px; color: #333; text-decoration: none;}
#gnb>li>ul {padding: 10px 10px 10px 35px; border-top: 1px solid #e1e1e1; background: #f7f7f7; display: none;}
#gnb>li>ul li a {line-height: 30px; font-size: 15px; font-weight: 200; color: #666; text-decoration: none;}
#gnb>li.hidden-gnb {display: none;}
#hd-lan {position: absolute; width: 40px; top: 50%; left: 80px; transform: translate(0, -50%);}
#hd-lan a {display: block; width: 30px; height: 25px; padding-left: 25px; background: url('/images/layout/hd-lan-ico.png')no-repeat;}

@media screen and (max-width: 850px){
    #gnb {width: 100vw;}
}
.fp-viewing-Section1 #hd-lan a,
.fp-viewing-Section2-0 #hd-lan a,
.fp-viewing-Section4 #hd-lan a,
.fp-viewing-Section5 #hd-lan a {background: url('/images/layout/hd-lan-ico_w.png')no-repeat; transition: all 0.3s;}
.fp-viewing-Section1 #hd-lan a,
.fp-viewing-Section2-0 #hd-lan a,
.fp-viewing-Section4 #hd-lan a,
.fp-viewing-Section5 #hd-lan a {color: #fff;}
.section.foot {height: 191px !important;}
.section.foot .fp-tableCell {height: 191px !important;}

.fp-viewing-Bottom #header {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#footer {background: #222222;}
#footer .ftWrap {position: relative; width: 100%; max-width: 1300px; padding: 43px 20px; margin: 0 auto; box-sizing: border-box; height: 230px}
#footer .ftWrap strong {font-size: 16px; color: #ddd; font-weight: 300; display: block; width: 100%; line-height: 0; padding-bottom: 10px;}
#footer .ftWrap p {display: block; width: 100%; box-sizing: border-box; padding-right: 30%; position: relative; font-size: 16px; color: #999; text-align: left;}
#footer .ftWrap p span {display: inline-block; padding-right: 20px; line-height: 24px; font-size: 16px; color: #999;}
#footer .ftWrap p span.copyright {position: absolute; right: 0; bottom: 0; width: 30%; text-align: right; font-size: 14px; font-weight: normal; color: #666; line-height: 24px;}
#footer .ftWrap p span.copyright b {font-size: 14px; font-weight: normal; color: #999;}
.en #footer .ftWrap {}
.en #footer .ftWrap p {padding-right: 0;}
.en #footer .ftWrap p span {font-size: 14px; }
.en #footer .ftWrap p span.copyright {position: relative; width: 100%; text-align: left;}
#slide-btn {text-indent: -999em; width: 30px; height: 20px; position: absolute; top: 37px; right: 80px; z-index: 10;}
#slide-btn button {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: none; cursor: pointer; outline: none; transition: all 1s ease-in;}
#slide-btn button span,
#slide-btn button:before,
#slide-btn button:after {border-radius: 2px; overflow: hidden; position: absolute; left: 0; width: 100%; height: 2px; background: #222;}
#slide-btn button span {display: block; top: 50%; margin-left: 10px; margin-top: -1px; opacity: 1; transition: all 0.3s; width: 20px;}
#slide-btn button:before {content: ''; display: block; top: 0; transition: all 0.3s;}
#slide-btn button:after {content: ''; display: block; bottom: 0; transition: all 0.3s;}

#slide-btn-black {text-indent: -999em; width: 30px; height: 20px; position: absolute; top: 37px; right: 80px; z-index: 1000;}
#slide-btn-black button {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: none; cursor: pointer; outline: none; transition: all 1s ease-in;}
#slide-btn-black button span,
#slide-btn-black button:before,
#slide-btn-black button:after {border-radius: 2px; overflow: hidden; position: absolute; left: 0; width: 100%; height: 2px; background: #222;}
#slide-btn-black button span {display: block; top: 50%; margin-left: 10px; margin-top: -1px; opacity: 1; transition: all 0.3s; width: 20px;}
#slide-btn-black button:before {content: ''; display: block; top: 0; transition: all 0.3s;}
#slide-btn-black button:after {content: ''; display: block; bottom: 0; transition: all 0.3s;}
.fp-viewing-Section1 #slide-btn button span,
.fp-viewing-Section1 #slide-btn button:before,
.fp-viewing-Section1 #slide-btn button:after,
.fp-viewing-Section2-0 #slide-btn button span,
.fp-viewing-Section2-0 #slide-btn button:before,
.fp-viewing-Section2-0 #slide-btn button:after,
.fp-viewing-Section4 #slide-btn button span,
.fp-viewing-Section4 #slide-btn button:before,
.fp-viewing-Section4 #slide-btn button:after,
.fp-viewing-Section5 #slide-btn button span,
.fp-viewing-Section5 #slide-btn button:before,
.fp-viewing-Section5 #slide-btn button:after {background: #fff;}

@media screen and (max-width: 850px){
    #hd-lan {position: absolute;
        width: 30px;
        top: 50%;
        left: 15px;
        transform: translate(0, -50%);}
    #slide-btn {position: absolute; right: 15px; top: 37px;}
    #slide-btn-black {position: absolute; right: 15px; top: 37px;}
}