.center-margin { margin: 0 auto; }

.padding-top-30 { padding-top: 30px; }

.padding-bottom-30 { padding-bottom: 30px; }

.margin-top-30 { margin-top: 30px; }

.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-30 { margin-bottom: 30px; }
.margin-bottom-50 { margin-bottom: 50px; }
.margin-bottom-100 { margin-bottom: 100px; }
.margin-bottom-150 { margin-bottom: 150px; }

.container_font {font-family:'210Gothic020';}

/* navbar */
.nav-div { position: fixed; top:0; left:0; right:0; z-index:1030; padding-right:0; padding-left:0; height: 95px; background-color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); }
.nav-v2-brand { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: .5rem .3rem; margin: 0 50px; }
.nav-v2-brand .nav-logo { display: inline-block; padding-top: .3125rem; padding-bottom: .3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; }
.nav-v2 { width: 100%; background: #fff; padding: 0; margin: 0; height: 35px; position: relative; display: flex; justify-content: space-between; }

.nav-v2-l { background: #fff; list-style:none; padding:0 0 0 50px; margin: 0; height: 35px; }
.nav-v2-l li { display: inline-block; }
.nav-v2-l li a { font-family:'210Gothic020';color:#333333; display:block; padding:0px 55px 0 10px; text-decoration:none; float: left; height: 35px; line-height: 35px; }
.nav-v2-l li:hover > ul { display:block; }
.nav-v2-l ul { background: #fff; padding:0; text-align: left; display:none; width: 100%; position: absolute; top: 35px; left: 0px; transition: all 0.2s; }
.nav-v2-l .hl { height: 4px; width: 0; background: #000; position: absolute; bottom: 0; left: 0; }
.nav-v2-l .hl.animated { transition: all 0.2s; }

.nav-v2-r { background: #fff; list-style:none; padding:0 50px 0 0; margin: 0; height: 35px; }
.nav-v2-r li { display: inline-block; }
.nav-v2-r li a { font-family:'210Gothic020';color:#333333; display:block; padding:0px 10px 0 55px; text-decoration:none; float: right; height: 35px; line-height: 35px; }
.nav-v2-r li:hover > ul { display:block; }
.nav-v2-r ul { background: #fff; padding:0; text-align: right; display:none; width: 100%; position: absolute; top: 35px; right: 0px; transition: all 0.2s; }
.nav-v2-r .hl { height: 4px; width: 0; background: #000; position: absolute; bottom: 0; right: 0; }
.nav-v2-r .hl.animated { transition: all 0.2s; }

.m-menu a, .m-menu a.hover, .m-menu-r a, .m-menu-r a.hover { color: #000; }

.m-toggle { position: relative;float: right;padding: 9px 10px;margin: 0;background-color: transparent;background-image: none;border: 1px solid #aaa;border-radius: 4px;height: fit-content;display:none; }
.m-toggle .icon-bar { display: block;width: 22px;height: 2px;border-radius: 1px; }
.m-toggle .icon-bar+.icon-bar { margin-top: 4px; }
.m-toggle span { background: #aaa; }

.nav-m .nav-m-inner { position: fixed;top: 0;right: 0;background: rgba(0, 0, 0, 0.9);height: 100%;margin: 0;text-align: left;padding: 30px 3%;box-sizing: border-box;z-index: 10;width: 30%;margin-right: -30%; }
.nav-m .nav-m-close { width:20px;height:20px;color:#f1f1f1;font-family:'210Gothic050';font-size:15px;text-align:center;cursor:pointer;float: right; }
.nav-m .nav-m-inner ul { padding-left: 0;margin-top: 20px; }
.nav-m .nav-m-inner ul li { list-style-type:none;margin: 5px 0; }
.nav-m .nav-m-inner ul li ul { display: none;padding-left: 20px;margin-top: 0; }
.nav-m .nav-m-inner .nav-m-main { margin: 10px 0; }
.nav-m .nav-m-inner a { height:16px;color:#f1f1f1;font-family:'210Gothic030';font-size:15px;padding:0 10px 0 10px;text-decoration:none; }

/* header banner */
.header-banner { position:relative; overflow:hidden; justify-content:space-between; height: 0px; font-family: '210Gothic020'; font-size: 13px; text-align:center; color: #fff; }
.header-banner .info { font-family: '210Gothic020'; font-size: 18px; color: #222; margin-right: 10px; padding-top:20px; }
.header-banner .more { font-family: '210Gothic020'; font-size: 15px; color: #222; line-height: 26px; opacity: 0.7; cursor:pointer; }
.header-banner .banner-close-btn { opacity: 0.7; cursor:pointer; }

/* footer */
.footer-box { display: flex; flex-direction: row; justify-content: space-around; padding: 70px 0; border-top: 4px solid #000; }
.footer-box-m { margin:0;padding: 50px 0; background-color: #eee; font-size: 14px; }
.footer-box-inner { width: 20%; line-height: 1.4;}
.footer-box-inner-m { line-height: 1.4;}
.footer-box-inner ul, .footer-box-inner li, .footer-box-inner-m ul, .footer-box-inner-m li { border: none;box-shadow: none; } 
.footer-box-title { font-family: '210Gothic050'; font-weight: normal; font-size: 16px; color: #58595b; }
.footer-box-sub { font-family: '210Gothic020'; font-weight: bold; font-size: 14px; color: #58595b; }

/* contents */
/* .body-contents { min-width: 1180px; } */
/* .body-contents-center { min-width: 1170px; } */

.body-title { margin:70px auto;text-align:center; }
.body-title .body-title-main { font-family:'210Gothic030';font-size:40px;color:#222;margin-bottom:15px; }
.body-title .body-title-sub { font-family:'210Gothic020';font-size:20px;color:#222; }

/* main slide */
.carousel-fill { width: 100%; height: 100%; background-position: center; background-size: cover; }

/* main contents */
.main-contents-box { display: flex; flex-direction: row; justify-content: space-around; height: fit-content; }
.main-contents-box1 { background-position: center; background-size: cover; margin: 50px 10px; height: 804px; width: calc(50% - 20px); min-width: 605px; max-width: 880px; }
.main-box-line { display:none; position: relative; border: 1px solid #fff; margin: 60px 65px; padding: 90px 65px; height: 684px; }
.main-contents-box1-title { display:none; font-family: '210Gothic030'; font-weight: normal; font-size: 50px; color: #fff; margin-bottom: 50px; }
.main-contents-box1-sub { display:none; font-family: '210Gothic030'; font-weight: normal; font-size: 25px; color: #fff; }
.main-contents-box1-go { display:none; position: absolute; right: 0; bottom: 70px; width: 290px; padding: 10px 25px; border-bottom: 1px solid #fff; font-family: '210Gothic020'; font-weight: normal; font-size: 18px; color: #fff; }
.main-contents-box1-1 { background-image:url('/cloud/resources/image/renew/main_go_fontcube.png'); }
.main-contents-box1-2 { background-image:url('/cloud/resources/image/renew/main_go_trial.png'); }

.main-contents-box2 { position: relative; background-position: center; background-size: cover; margin: 100px 10px; height: 587px; width: calc(25% - 20px); min-width: 292px; max-width: 424px; text-align: center; }
.main-contents-box2-main-title { text-align: center; margin-top: 100px; }
.main-contents-box2-title { display:none; position: absolute; top: 300px; width: 100%; padding: 0 10px; font-family: '210Gothic030'; font-weight: normal; font-size: 30px; color: #fff; }
.main-contents-box2-sub { display:none; position: absolute; bottom: 120px; width: 100%; padding: 0 10px; font-family: '210Gothic020'; font-weight: bold; font-size: 18px; color: #fff; }
.main-contents-box2-title p, .main-contents-box2-sub p { margin-bottom: 0; }

/* item search */
.search_box { background: transparent; border: none; border-bottom: 2px solid #000000; outline:none; box-shadow:none; width : 140px; height : 33.5px; margin-right : 10px;font-family:'210Gothic020'; }
#preview_font_btn{ background: url('/cloud/resources/image/renew/font_change.png'); background-repeat: no-repeat; background-size: 20px 20px; background-position: right center; }

/* item category */
.item-list-title-box { margin-top: 50px; margin-bottom: 50px; }
.item-list-sort { display: flex; flex-direction: column; justify-content: space-around; }
.item-list-box { display: flex; flex-direction: row; justify-content: space-between; height: fit-content; width: 100%; margin-bottom: 30px; padding: 0 10px; }
.item-list-box-out { position: relative; margin: 0 5px; width: 272px; min-width: 190px; height: 480px; text-align: center; }
.item-list-box-inner { width: 100%; font-family: '210Gothic030'; font-weight: normal; font-size: 30px; color: #fff; margin-top: 155px; }
.item-list-box-list { margin-top: 120px; }
.item-list-box-preview { margin-top:10px; }
.item-line { border: none; border-left: 1px solid #fff; height: 150px; position: absolute; left: 50%; }
.item-all-box { height: 100px; margin-bottom: 25px; padding: 0; }
.item-all-bg { height: 191px; margin-bottom: 20px; }
.item-all-bg hr { float:left; width: 70px; margin: 95px 0; border-color: #fff; }
.item-all-bg .all-title { float:left; width: 190px; margin: 72px 0 0 30px; font-family: '210Gothic030'; font-weight: normal; font-size: 30px; color: #fff; }
.item-all-bg .all-btn-box { position: absolute; right: 50px; top: 40px; }
.item-all-bg .all-btn { width: 180px; margin-bottom: 5px; }

.item-all-bg .all-btn-box-1 { position: absolute; right: 50px; top: 70px; }

/* item */
.item-list-sub-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; height: fit-content; }
.item-list-sub-box-out { position: relative; background-position: center; background-size: cover; margin: 40px 5px; height: 294px; width: 360px; }
.item-list-sub-box-bg { position: absolute; width: 100%; height: 100%; opacity:0; background-color:rgba(0,0,0,0.5); -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; }
.item-list-sub-box-layer { font-family: '210Gothic030'; font-weight: normal; color: #fff; text-align: center; width: 100%; height: 100%; opacity:0; background-color:rgba(0,0,0,0.5); -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; }
.item-list-sub-box-title { position: absolute; top: 100px; width: 100%; padding: 0 50px; font-size: 30px; opacity:0; }
.item-list-sub-box-sub { position: absolute; top: 200px; left: calc(50% - 100px); width: 200px; font-size: 21px; border: 1px solid #ffffff; text-decoration: none; padding: 7px 14px; background-color:transparent; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; }
.item-list-sub-box-sub:hover { box-shadow:0 0 5px #fff; }
.item-list-sub-box-out:hover .item-list-sub-box-bg,
.item-list-sub-box-out:hover .item-list-sub-box-layer { opacity:1; filter:alpha(opacity=100); }
.item-list-sub-box-out:hover .item-list-sub-box-title { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); -webkit-transition-delay:.1s; transition-delay:.1s; }
.item-list-sub-box-out:hover .item-list-sub-box-sub { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); -webkit-transition-delay:.1s; transition-delay:.1s; }

.item-list-sub-page { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; height: fit-content; }

/* item preview */
.item-preview-box { display: flex; flex-direction: row; flex-wrap: wrap; height: fit-content; }
.item-preview-box-out { position: relative; background-position: center; background-size: cover; margin: 40px 5px; height: 351px; width: 360px; border: 1px solid #aaa;font-family:'210Gothic020'; }
.item-preview-box-out .inner-box { display: flex; justify-content: space-between; height: 62px; padding: 0 20px; border-bottom: 1px solid #aaa; background-color: #f9f9f9; }
.item-preview-box-inner { padding: 20px; overflow:hidden; height: 289px; font-weight:normal; color: #000; overflow-wrap: break-word; }
.item_preview_renew_nav { background: transparent;border: none;border-bottom: 2px solid #000000;outline:none;box-shadow:none;margin-bottom : 10px; padding : 10px;font-family:'210Gothic020';}
.item_preview_renew_nav_l{ background: transparent;border: none;border-right: 1px solid #000000;outline:none;box-shadow:none;}
.item_preview_renew_nav_r{ background: transparent;border: none;border-bottom: 1px solid #000000;outline:none;box-shadow:none;margin-bottom : 10px; padding : 10px; display:flex;list-style:none;	}
.item_privew_write{ background: transparent; border: none;border-bottom: 1px solid #000000;outline:none;box-shadow:none;margin-bottom : 10px; padding : 10px; display:flex;list-style:none;font-family: '210Gothic030';font-weight: normal;	font-size: 24px;}
#custom-handle { width: 10px;height: 10px;top: 50%;margin-top: -.3em;text-align: center;line-height: 0.5em;}
#slider { width:200px;height:1px;}
.item-preview-box-input { display: flex; flex-direction: column; justify-content: space-around; height: fit-content; width: auto; background-color: #f9f9f9; padding: 30px 50px; margin-bottom: 50px;font-family:'210Gothic020'; }
.item-preview-weight_box { height: 29px; margin-top: 12px; border-bottom: 1px solid #000; }
.item-preview-weight_box select { background: transparent; border: none; outline:none; box-shadow:none; width : 140px; height : 33.5px; }

.item-preview-box-page { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; height: fit-content; }

/* item detail */
.item-contents-box { display: flex; flex-direction: row; justify-content: space-around; height: fit-content; padding: 0; }
.item-contents-box1-1 { width: 60%; height: 726px; background-size: contain; background-repeat:no-repeat; background-color:#fafafa; background-position: center; margin: 50px 10px 50px 0; }
.item-contents-box1-3 { background-position: center; background-size: cover; margin: 50px 10px; }
.item-contents-box1-4 { width: 40%; }

.item-contents-box2 { position: relative; background-position: center; background-size: cover; margin: 50px 10px 100px 10px; height: 400px; width: calc(45% - 20px); min-width: 292px; max-width: 585px; }
.item-contents-box2-main-title { text-align: center; margin-top: 50px; }
.item-contents-box2-title { position: absolute; top: 50px; width: 100%; padding: 0 10px 0 30px; font-family: '210Gothic030'; font-weight: normal; font-size: 25px; color: #fff; }
.item-contents-box2-sub { position: absolute; top: 120px; width: 100%; padding: 0 30px 0 10px; font-family: '210Gothic030'; font-weight: normal; font-size: 16px; color: #fff; }
.item-contents-box2-sub ul li { margin: 5px 0; }
.item-contents-box2-title p, .item-contents-box2-sub p { margin-bottom: 0; }
.item-contents-box2-btn { position: absolute; bottom: 30px; right: 30px; }

.item-contents-box3 { position: relative; background-position: center; background-size: cover; margin: 50px 10px 100px 10px; height: 270px; width: calc(70% - 20px); min-width: 292px; max-width: 900px; }
.item-contents-box3-main-title { text-align: center; margin-top: 50px; }
.item-contents-box3-title { position: absolute; top: 50px; width: 100%; padding: 0 10px 0 30px; font-family: '210Gothic030'; font-weight: normal; font-size: 25px; color: #fff; }
.item-contents-box3-sub { position: absolute; top: 120px; width: 100%; padding: 0 30px 0 10px; font-family: '210Gothic030'; font-weight: normal; font-size: 16px; color: #fff; }
.item-contents-box3-sub ul li { margin: 5px 0; }
.item-contents-box3-title p, .item-contents-box2-sub p { margin-bottom: 0; }
.item-contents-box3-btn { position: absolute; bottom: calc(50% - 25px); right: 30px; }

.item-buy-box-title { font-family: '210Gothic030'; font-weight: normal; font-size: 25px; color: #000; margin: 420px 0 50px 0; padding-bottom: 50px; border-bottom: 1px solid #000; }
.item-buy-box-title-new { font-family: '210Gothic030'; font-weight: normal; font-size: 25px; color: #000; margin: 200px 0 50px 0; padding-bottom: 50px; border-bottom: 1px solid #000; }
.item-buy-box { font-family: '210Gothic030'; font-weight: normal; font-size: 16px; color: #000; text-align: left; }
.item-buy-box table { margin-rigth: 10%; }
.item-buy-box table tr { height: 40px; }
.item-buy-box table tr td:first-child { color: #727272; }
.item-buy-box table tr td:last-child {  }

/* magazine */
.magazine-style-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; height: fit-content; }
.magazine-style-box-out { position: relative; background-position: center; background-size: cover; width:100%; height: 100%; }
.magazine-style-box-bg { position: absolute; background-color:rgba(0,0,0,0.5); width: 100%; height: 100%; }
.magazine-style-box-layer { width: 100%; height: 100%; background-color:rgba(0,0,0,0.5); text-align: center; font-family: '210Gothic030'; font-weight: normal; color: #fff; }
.magazine-style-box-title { position: absolute; bottom: 50px; left: 20px; font-size: 20px; text-align: left; }
.magazine-style-box-sub { position: absolute; bottom: 10px; left: 20px; font-size: 15px; }
.magazine-style-box-line { position: absolute; bottom: 45px; left: 20px; width: 30px; border-bottom: 2px solid #fff; }

/* scroll quick menu */
.scroll-menu { position: absolute; top: calc(100% - 170px); right: 20px; z-index: 1000; }

/* font letter */
.letter-reg-title-1 {font-family:'210Gothic030';font-size:40px;color:#222;margin-bottom:15px;}
.letter-reg-title-2 {font-family:'210Gothic020';font-size:20px;color:#222;}
.letter-box-1 { margin: 30px auto; padding: 15px 30px; background-color: #f5f5f5; }
.letter-box-text { padding: 10px 0 10px 10px; }
.letter-box-input { width: 100%; height: 42px; border: none; border-bottom: 1px solid #000;padding:0 15px; }
.letter-box-btn { background-color: #bfd730; padding: 10px 0; font-family: '210Gothic020'; font-weight: bold; font-size: 14px; color: #58595b; width: 100%; margin: 0 auto; text-align: center; }

/* modal */
.close-btn-modal { cursor:pointer; float:right; margin: 20px 20px 0 20px; }

/* modal - demo */
.modal-dialog-demo { width: 80%; min-width: 800px; max-width: 1140px; }
.modal-container-demo { width: 650px; }
.modal-content-demo { border-radius: 20px; background-color: #15181D; border: 4px solid #999999; color: #bbbbbb; }
.modal-header-demo { border-bottom: 0; }
.modal-body-demo { padding-bottom: 70px; }
.modal-demo-title-1 { text-align: center; font-size: 35px; color:#bfd730; font-family:'210Gothic030'; font-weight: normal; }
.modal-demo-detail-1 { font-family: '210Gothic020'; font-size: 17px; font-weight: normal; color: #bcbec0; line-height: 30px; }
.modal-demo-detail-2 { font-family: '210Gothic020'; font-size: 17px; font-weight: normal; color: #ffffff; line-height: 30px; }
.modal-demo-detail-3 { font-family: '210Gothic020'; font-size: 20px; font-weight: bold; color: #bcbec0; line-height: 30px; }
.modal-demo-detail-4 { font-family: '210Gothic020'; font-size: 14px; font-weight: bold; color: #bcbec0; line-height: 30px; }
.modal-demo-detail-5 { font-family: '210Gothic020'; font-size: 14px; font-weight: bold; color: #bcbec0; }
.modal-demo-detail-6 { font-family: '210Gothic010'; font-size: 11px; font-weight: bold; color: #ffffff; }
.modal-demo-input-text-1 { float: left; width: 30%; height: 35px; background-color: #15181D; }
.modal-demo-input-text-2 { float: left; width: 20%; height: 35px; background-color: #15181D; }
.modal-demo-input-text-3 { float: left; width: 15%; height: 35px; background-color: #15181D; }
.modal-demo-alert-text { font-size: 13px; line-height: 30px; }
.modal-demo-alert-btn-1 { font-family: '210Gothic020'; font-weight: bold; font-size: 14px; color: #fff; width: 150px; padding: 10px 0; background-color: #bfd730; }
.modal-demo-alert-btn-2 { font-family: '210Gothic020'; font-weight: bold; font-size: 14px; color: #fff; width: 150px; padding: 10px 0; background-color: #bcbec0; }
.modal-demo-alert-btn-3 { font-family: '210Gothic020'; font-weight: bold; font-size: 14px; color: #000; width: 150px; padding: 10px 0; background-color: #888; }

/* modal - 무료폰트 */
.modal-content-free { border-radius: 20px;background-color: #15181D;border: 4px solid #999999;color: #bbbbbb; }
.modal-content-free .modal-header { border-bottom: 0; }
.modal-content-free .modal-body { padding-bottom: 70px; }
.modal-content-free .modal-title-1 { text-align: center;font-size: 24px;color:#bfd730; }