@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) HEADER
 * 3) FOOTER
 * 4) SCROLL TOP
 * 5) CONTAINER
 */



/* **************************************** *
* CSS Variables
* **************************************** */
:root {
    --color-primary: #e60012;
    --color-secondary: #d20a1a;
    --font-primary: 'Binggrae', sans-serif;
    --font-secondary: 'NotoSansKR', sans-serif;
}



/* **************************************** *
 * GLOBAL
 * **************************************** */
html, body {height: 100%;}
body {font-size: 15px;font-family: var(--font-primary);}
a {font-size: 15px;color: var(--color-primary);text-decoration: none;word-break: break-all;}

/* LIST FLOAT CLEAR */
ol:after, ul:after {content: '';clear: both;display: table;}

/* WRAP */
.wrap {max-width: 1200px;margin: 0 auto;position: relative;}
.wrap:after {content: '';display: table;clear: both;}



/* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;height: 100px;position: fixed;top: 0;left: 0;background: #fff;z-index: 500;}
.header_inner {max-width: 1903px;/*max-width: 1697px;*/padding:0 103px;height: 100%;margin: 0 auto;position: relative;}

/* LOGO */
#logo {width: 118px;height: 28px;position: absolute;left: 103px;top: 36px;transition: top 400ms;}
#logo a {display: block;}
#logo a svg {display: block;width: 100%;height: 100%;}

/* MENU */
.menu_container {display: block;width: 594px;position: absolute;top: 29px;left: 50%;transform: translateX(-50%);z-index: 550;transition: top 400ms;}
#menu {display: block;width: 100%;}
#menu li {float:left;}
#menu a {display: block;padding: 12px 28px;font-size: 16px;line-height: 1.7;font-weight: 600;color: #333;-webkit-transition: color 300ms;transition: color 300ms;}
#menu a span {position: relative;}
#menu a span:after {content: '';display: block;width: 19px;height: 8px;position: absolute;top: -12px;left: 50%;margin-left: -9.5px;background: url(../images/icon/icon-identity-primary.png) no-repeat center center;opacity: 0;transition: opacity 300ms;}
#menu a.active, #menu a:hover {color: var(--color-primary);}
#menu a.active span:after, #menu a:hover span:after {opacity: 1;}

/* SUB MENU */
.sub_menu_container {position: absolute;top: 49px;right: 240px;transition: top 400ms;}
#sub_menu {display: block;}
#sub_menu li {float: left;}
#sub_menu a {display: block;padding: 0 11px;position: relative;font-size: 12px;font-weight: 600;line-height: 1;color: #333;}
#sub_menu li.event a {color: var(--color-primary);}
#sub_menu li.event a:after {content: '';display: block;width: 1px;height: 10px;position: absolute;right: 0;top: 50%;margin-top: -5px;background: #ddd;}

/* SEARCH */
.search_container {width: 20px;height: 20px;position: absolute;top: 44px;right: 208px;background: url(../images/icon/icon-search.svg) no-repeat center center;cursor: pointer;}

/* LANG */
.lang_container {width: 84px;height: 30px;padding-left: 13px;position: absolute;top: 40px;right: 103px;border: 2px solid #ddd;border-radius: 5px;background: url(../images/icon/icon-direction-down-primary.svg) no-repeat 61px center;cursor: pointer;}
.lang_container span {font-size: 11px;line-height: 28px;font-weight: 600;color: var(--color-primary);}

#header.minimize {box-shadow: 0 1px 3px rgba(0, 0, 0, .12);}

/* 50 */
.anniversary_50 #header {position: absolute;background: none;}
.anniversary_50 #header.minimize {box-shadow: none;}

.anniversary_50 #logo {top: 41px;left: 50%;transform: translateX(-50%);}

.anniversary_50 .sub_menu_container {right: 303px;top: 52px;}
#sub_menu li.intro a:after {content: '';display: block;width: 1px;height: 10px;position: absolute;right: 0;top: 50%;margin-top: -5px;background: #ddd;}

.header_social_menu {position: absolute;right: 103px;top: 37px;transition: top 400ms;}
.header_social_menu.social_menu a {border-color: var(--color-primary);}
.header_social_menu.social_menu li.bing a {background-image: url(../images/sns/sns-bing-primary.svg);}
.header_social_menu.social_menu li.youtube a {background-image: url(../images/sns/sns-youtube-primary.svg);}
.header_social_menu.social_menu li.facebook a {background-image: url(../images/sns/sns-facebook-primary.svg);}
.header_social_menu.social_menu li.insta a {background-image: url(../images/sns/sns-insta-primary.svg);}
.header_social_menu.social_menu li:hover a {background-color: var(--color-primary);}
.header_social_menu.social_menu li.bing:hover a {background-image: url(../images/sns/sns-bing-secondary.svg);}
.header_social_menu.social_menu li.youtube:hover a {background-image: url(../images/sns/sns-youtube-secondary.svg);}
.header_social_menu.social_menu li.facebook:hover a {background-image: url(../images/sns/sns-facebook-secondary.svg);}
.header_social_menu.social_menu li.insta:hover a {background-image: url(../images/sns/sns-insta-secondary.svg);}



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width: 100%;padding: 77px 0 90px;position: relative;background: #d20a1a url(../images/layout/footer-layer.jpg) repeat;}
.footer_inner {max-width: 1200px;margin: 0 auto;position: relative;}

.footer_info {position: relative;}

.footer_center * {font-weight: 600;letter-spacing: -0.025em;}
.footer_center b {font-size: 16px;color: #fff;}
.footer_center p {padding: 10px 0;}
.footer_center p a {display: inline-block;vertical-align: middle;font-size: 40px;color: #fff694;}
.footer_center p span {display: inline-block;vertical-align: middle;font-size: 12px;letter-spacing: 0;color: #fff;line-height: 1.8;padding-left: 20px;}

.footer_menu {font-size: 0;line-height: 1;}
.footer_menu li {display: inline-block;margin-right: 4px;}
.footer_menu a {display: block;padding: 0 16px;font-size: 12px;font-weight: 600;letter-spacing: -0.025em;line-height: 28px;color: #fff;background: #8f0b16;border-radius: 5px;transition: background 300ms;}
.footer_menu li.private_point a {background: #571d21;}
.footer_menu li.private_point a:hover, .footer_menu a:hover {background: #000;}

.footer_social_menu {position: absolute;top: -15px;right: 0;}
.social_menu li {float: left;width: 40px;height: 40px;margin-right: 10px;}
.social_menu li:last-child {margin-right: 0;}
.social_menu a {display: block;width: 100%;height: 100%;font-size: 0;border: 1px solid #fff;border-radius: 50%;background: no-repeat center center;transition: background 400ms;}
.social_menu li.bing a {background-image: url(../images/sns/sns-bing-secondary.svg);background-size: 10px auto;}
.social_menu li.youtube a {background-image: url(../images/sns/sns-youtube-secondary.svg);background-size: 18px auto;}
.social_menu li.facebook a {background-image: url(../images/sns/sns-facebook-secondary.svg);background-size: 7px auto;}
.social_menu li.insta a {background-image: url(../images/sns/sns-insta-secondary.svg);background-size: 14px auto;}
.social_menu li:hover a {background-color: #fff;}
.social_menu li.bing:hover a {background-image: url(../images/sns/sns-bing-primary.svg);}
.social_menu li.youtube:hover a {background-image: url(../images/sns/sns-youtube-primary.svg);}
.social_menu li.facebook:hover a {background-image: url(../images/sns/sns-facebook-primary.svg);}
.social_menu li.insta:hover a {background-image: url(../images/sns/sns-insta-primary.svg);}

.buy_system {width: 159px;height: 38px;padding-left: 20px;position: absolute;right: 0;bottom: 0;border: 1px solid rgba(255,255,255,0.16);border-radius: 5px;background: url(../images/layout/arrow.png) no-repeat 132px center;}
.buy_system span {font-size: 12px;font-weight: 600;letter-spacing: -0.025em;line-height: 36px;color: #fff;}

.footer_copy {margin-top: 25px;padding-top: 25px;border-top: 1px solid rgba(255,255,255,0.1);}
.footer_copy p {font-size: 11px;font-weight: 600;color: rgba(255,255,255,0.22);}



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.scroll_top {display: block;height: 60px;width: 60px;position: absolute;top: -43px;left: 50%;margin-left: -30px;font-size: 0;background: #222;z-index: 1;transform: translateY(0);transition: transform 150ms ease-out;}
.scroll_top span {display: block;width: 100%;height: 100%;background: url(../images/icon/icon-arrow-right-secondary.svg) no-repeat center center;transform: rotate(270deg);}
.scroll_top:hover {transform: translateY(15px);}



/* **************************************** *
 * MAIN CONTAINER
 * **************************************** */
.main_container {max-width: 1903px;margin: 0 auto;padding-top: 100px;overflow: hidden;}

/* 50 */
.anniversary_50 .main_container {padding-top: 0;}