@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); 
 
* { margin:0; padding:0; text-decoration: none; list-style-type: none; font-family: 'Noto Sans KR', 'Mulish', 'Spoqa Han Sans', Times, sans-serif; scroll-behavior:smooth; }
*, *:before, *:after { box-sizing: border-box; }
html,body { width:100%; position:relative; }
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background: transparent; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C""\201D""\2018""\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0 }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-wrap: break-word; overflow-y: scroll; }
body { font-family: Karla, sans-serif; font-size: 13px; font-weight: normal; line-height: 1.5; letter-spacing: 0; margin: 0; padding: 0; scroll-behavior: smooth; } 
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; margin: 0; }
b { font-weight: inherit; }
i { font-style: inherit } 
a:hover, a:active { outline: 0 }
a { text-decoration: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { border: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
path, circle { fill: currentColor; }
path { fill: currentColor; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
 
/* CKEditor */
#cke_17, #cke_24, #cke_32, #cke_37,
#cke_49, #cke_50, #cke_51, #cke_52,
#cke_53, #cke_54, #cke_55, #cke_57,
#cke_59, #cke_60, #cke_61, #cke_62,
#cke_67, #cke_68, #cke_69, #cke_70,
#cke_74, #cke_87, #cke_90 { display:none; }
.cke_toolbar_separator { display:none; }
 
 
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: white; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-thumb:hover { background: #333; }
 
 
/* input type checkbox customising */
input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
input[type="checkbox"] + label:before { content: ' '; display: inline-block; width: 20px; height: 20px; line-height: 20px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: white; border: 1px solid #cacece; }
input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
input[type="checkbox"]:checked + label:before { content: '\2714'; color: #333; text-shadow: 1px 1px #FFF; background: white; border-color: #adb8c0; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); }
 
 
/* input type checkbox customising */
.radio-container { display: inline-block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.radio-container input { position: absolute; opacity: 0; cursor: pointer; }
.radio-checkmark { position: absolute; top: 3px; left: 10px; height: 20px; width: 20px; border:1px solid #ddd; border-radius: 100%; }
.radio-container:hover input ~ .radio-checkmark { background-color: #eee; }
.radio-container input:checked ~ .radio-checkmark { background-color: #eee; }
.radio-checkmark:after { content: ""; position: absolute; display: none; }
.radio-container input:checked ~ .radio-checkmark:after { display: block; }
.radio-container .radio-checkmark:after { top: 5px; left: 5px; width: 10px; height: 10px; border-radius: 100%; background: #333; }
 
 
/* Popup */
#mask { position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.5); z-index:1000; -webkit-transition:opacity 0.2s linear; transition:opacity 0.2s linear; }
.hide { display:none !important; }
.hide-opacity { opacity: 0; pointer-events: none; }
.hide-opacity2 { opacity: 0; }
.ellipsis { text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; }
 
 
/* Swiper overide */
.swiper-slide { text-align:center; display:flex; align-items:center; justify-content:center; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left:20px; background:rgba(0,0,0,.6); width:40px; height:40px; border-radius:50%; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:20px; background:rgba(0,0,0,.6); width:40px; height:40px; border-radius:50%; }
.swiper-button-next i, .swiper-button-prev i { color:#FFF; font-size:20px; }
 
 
/* Layouts */
.clear::after { content:""; clear:both; display:block; }
.max-width { max-width:1140px; position:relative; margin:100px auto; clear:both; }


/* Contents */
.Logo { position: fixed; left: 46px; top: 25px; width: 137px; height: 67px; background-image: url('/images/logo.png'); background-repeat: no-repeat; background-size: contain; }
.Logo__text { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }
.StandardLayout { padding-right: 46px; }
.Main { overflow: hidden; padding-left: 10%; padding-right: 10%; max-width: 1028px; box-sizing: content-box; margin-left: auto; margin-right: auto; }
.Main__bd { margin-top: 6em; margin-bottom: 6em; }
.IndexPage { padding-right: 60px; background-color: #fbfaf9; }


.Grid { font-size: 0.1px; text-align: justify; }
.Grid:after { content: ''; display: inline-block; line-height: 0; width: 100%; }
.Grid__unit { font-size: 13px; display: inline-block; width: 100%; margin-bottom: 30px; vertical-align: top; }
.Grid__unit--spacer { line-height: 0; margin-bottom: 0 !important; }


.Preview { -webkit-transform: translateZ(0); transform: translateZ(0); display: block; font-size: 12px; cursor: pointer; }
.Preview__meta { margin: 10px 0; }
.Preview__meta:after { content: ""; display: table; clear: both; }
.Preview__title { float: left; }
.Preview__fig { position: relative; overflow: hidden; }
.Preview .Imgset { transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.Preview:hover .Imgset { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); transition-duration: 1s; }


[data-component="Browser"] { padding: 2em; }
.Browser { border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.07); font-size: 11px; }
.Browser__title { color: #fff; padding: 4px 48px 3px 48px; line-height: 1.5; font-size: 12px; display: block; text-align: center; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.Imgset { display: block; position: relative; padding: 0; padding-bottom: 133.25%; overflow: hidden; margin-left: 0 !important; margin-right: 0 !important; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.Imgset__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: opacity 0.5s; }


[data-component="Ticker"] { height: 100vh; }
.Ticker { z-index: 8; position: fixed; overflow: hidden; top: 0; right: 0; bottom: 0; height: 100%; width: 80px; background-color: #fff; border-left: 1px solid #EBEBEB; text-align: left; }
.Ticker__bd { height: 100%; overflow: visible; position: relative; transition: -webkit-transform 0.25s; transition: transform 0.25s; padding: calc(50vh - (72px / 2)) 0; }
.Ticker__box { width:100%; height:50px; position:absolute; top:0; left:0; z-index:500; background-color:#FFF; }
.Ticker__subscribe { display:inline-block; margin:20px 4px; padding: 3px 5px; border-radius: 3px; color: #593386; border: 1px solid #593386; background-color: #FFF; transition: 0.2s all; }
.Ticker__subscribe:hover { background-color: #593386; color: #FFF; }
.Ticker__highlight { position: absolute; z-index: 1; top: calc(50% - 2px); right: 0; height: 3px; width: 16px; background-color: #FF5600; }
.TickerToken { font-family: Karla, sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: uppercase; letter-spacing: 0.1536em; font-weight: normal; font-size: 10px; line-height: 1; height: 72px; display: block; position: relative; color: rgba(0, 0, 0, 0.9); cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; background-image: url('/images/bg.svg'); background-size: 15px 73px; background-repeat: no-repeat; background-position: right top; }
.TickerToken:first-child { background-position: right 36px; }
.TickerToken:last-child { background-position: right -36px; }
.TickerToken__year { position: absolute; top: 0; left: 12px; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 9px; letter-spacing: 0.10222222em; }
.TickerToken__month { position: absolute; top: 32px; left: 9px; }
.TickerToken:hover { background-color: #E4F4FF; }
.TickerToken:focus { outline: none; }



/* Popup */
#popup { width:1200px; height:800px; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10005; background-color:#FFF; }
#popup .swiper-slide .left, #popup .swiper-slide .right { width:50%; height:100%; }
#popup .swiper-slide .left { background-position:top center; background-size:cover; background-repeat:no-repeat; }
#popup .swiper-slide .right { text-align:left; align-items:baseline; font-family:"Noto Sans KR"; padding:30px; }
#popup .swiper-slide .right h1.title { margin-top:50px; font-size:36px; color:#593386; font-weight:700; }
#popup .swiper-slide .right p { margin-top:150px; font-size:16px; }
#popup .swiper-slide span { width:100%; height:100%; background-position:top center; background-size:cover; background-repeat:no-repeat; }
 
/* Admin - Content */
.admin { width:1170px; margin:auto; padding:200px 0; }
.admin .title { color:#593386; }
.admin .body { margin-top:30px; }
.admin .btns { margin-top:30px; display:flex; flex-direction:row-reverse; }
.admin .btn { display:inline-block; padding:3px 10px; border:1px solid #593386; border-radius:5px; cursor:pointer; transition:0.2s all; }
.admin .btn:hover { background-color:#593386; color:#FFF; }
.admin .table { width:100%; margin-top:10px; border-collapse:collapse; }
.admin .table thead tr { background-color:#F3F3F3; }
.admin .table thead tr td { text-align:center; border:1px solid #AAA; font-size:14px; font-weight:700; padding:7px 5px; }
.admin .table tbody tr:nth-of-type(2n-1) { background-color:#EBE7F0; }
.admin .table tbody tr:nth-of-type(2n) { background-color:#F3F3F3; }
.admin .table tbody tr th { min-width:120px; text-align:center; border:1px solid #AAA; font-size:14px; font-weight:700; padding:7px 5px; }
.admin .table tbody tr td { border:1px solid #AAA; font-size:14px; font-weight:400; padding:7px 5px; text-align:center; }
.admin .table input[type="text"] { padding:3px 10px; }
.admin .table select { min-width:100px; padding:0 10px; }
.admin .table #thumbnail-img { width:300px; height:398px; border:1px solid #AAA; }
.admin .table .added-imgs { display:flex; flex-wrap:wrap; justify-content:left; align-items:center; }
.admin .table .added-imgs>div { margin:5px; display:inline-block; height:100px; width:100px; background-size:cover; background-position:center; }
.admin .table .product-added-image-remove { width:100%; height:100%; color:white; background-color:rgba(0,0,0,0.5); text-align:center; font-size:65px; display:block; cursor:pointer; }
 
/* Footer */
#footer { width:100%; border-top:2px solid #593386; font-family:"Noto Sans KR"; font-size:16px; text-align:center; letter-spacing:-0.3px; font-weight:300; }
#footer .logo { padding-top:53px; padding-bottom:22px; }
#footer .logo img { width:180px; }
#footer .company_copy { padding-top:21px; padding-bottom:40px; }
 
 
.top-arrow-btn { width:50px; height:50px; position:fixed; bottom:50px; right:2%; border:2px solid #593386; color:#593386; border-radius:27px; font-size:30px; text-align:center; line-height:55px; cursor:pointer; z-index:3; display:none; }
.top-arrow-btn i { position:absolute; top:20%; right:50%; transform:translateX(50%); }
 
/* Pagination */
.pagination { margin-top:30px; text-align:center; }
.pagination li { display:inline-block } 
.pagination li.active { background-color:#593386; color:#FFF; }
.pagination li a { width:30px; height:30px; text-align:center; line-height:30px; display:block; }
.pagination li span { width:30px; height:30px; text-align:center; line-height:30px; display:block; }

@media (max-width:1200px) {
    
    /* Popup */
    #popup { width:900px; height:600px; }
    #popup .swiper-slide .right { padding:20px; }
    #popup .swiper-slide .right h1.title { margin-top:30px; font-size:28px; }
    #popup .swiper-slide .right p { margin-top:100px; font-size:14px; }

    #footer { font-size:14px; }
    #footer .logo { padding-top:33px; padding-bottom:12px; }
    #footer .logo img { width:140px; }
    #footer .company_copy { padding-top:11px; padding-bottom:30px; }

    .top-arrow-btn { width:30px; height:30px; border-radius:17px; font-size:20px; line-height:33px; }
}

@media (max-width:1024px) {
    
    /* Popup */
    #popup { width:768px; height:512px; }
    #popup .swiper-slide .right { padding:15px; }
    #popup .swiper-slide .right h1.title { margin-top:20px; font-size:23px; }
    #popup .swiper-slide .right p { margin-top:80px; font-size:13px; }

}

@media (max-width:768px) {
    
    /* Popup */
    #popup { width:588px; height:392px; }
    #popup .swiper-slide .right { padding:12px; }
    #popup .swiper-slide .right h1.title { margin-top:15px; font-size:20px; }
    #popup .swiper-slide .right p { margin-top:50px; font-size:12px; }

    #footer { font-size:12px; }
    #footer .logo { padding-top:25px; padding-bottom:2px; }
    #footer .logo img { width:110px; }
    #footer .company_infos span { display:block; margin-top:10px; }
    #footer .company_copy { padding-top:10px; padding-bottom:25px; }

    .top-arrow-btn { width:20px; height:20px; bottom:50px; right:2%; border-radius:12px; font-size:16px; line-height:22px; }
}

@media (max-width:620px) {
    
    /* Popup */
    #popup { width:360px; height:240px; }
    #popup .swiper-slide .right { padding:10px; }
    #popup .swiper-slide .right h1.title { margin-top:12px; font-size:15px; }
    #popup .swiper-slide .right p { margin-top:30px; font-size:11px; }

}

@media screen and (min-width: 30em) {

    .Grid__unit {
        width: calc(50% - 15px);
    }
}
@media screen and (min-width: 64em) {
 
    .Grid__unit {
        width: calc(29.183%);
        margin-bottom: 60px;
    }
}