@charset "euc-kr";

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
@import url(//cdnjs.cloudflare.com/ajax/libs/spoqa-han-sans/3.1.0/css/SpoqaHanSansNeo.min.css); /* À§ CDN(½ºÆ÷Ä«³»ºÎÀÇ CDN) ¿À·ù½Ã »ç¿ë */

@import url(//fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp);
@import url(//fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
/*
Created : 2011-01-24, irang
Edited : 2023-04-12, irang, Moved on to new server from menu server
*/

/* from basic.css  ---------------------------------- */
:root {
	--font-basic : "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
}
html,
body {
    height:100%;
}
/* RESET --------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, select, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	/*font-family:inherit;*/
	vertical-align:baseline; /*  */
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}

a img, :link img, :visited img, img, fieldset, table, th, td { border: none; }
table {border-collapse:collapse;border-spacing:0;}
caption, th, td { font-weight:normal; }
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

hr { display: none; }

/* typography.css */
body {background-color: #FFF;font-family:var(--font-basic);font-size:0.75em;*font-size: 12px;}
h1, h2, h3, h4, h5, h6 {font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
/*p {margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}*/
a {color: #369;text-decoration: none;}
a:focus, a:hover {color: blue;text-decoration: underline;}
strong {font-weight:bold;}
dfn {font-style:italic;font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {cursor: help;}
address {margin:0 0 1.5em;font-style:normal;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
ol, ul { list-style:none; }
.small {font-size:.916em;line-height:1.6em;}
.large {font-size:1.166em;line-height:1.6em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.border {border-right:1px solid #dbdbdb;}
.top {margin-top:0;padding-top:0;}
.clear {clear:both;}
hr.clear { display:block;visibility:hidden;margin:0;padding:0;height:1px;}
.en {font-family:var(--font-basic);font-size:11px;}
.en2 {font-family:var(--font-basic);}
.ko {font-family:var(--font-basic);}

/* forms.css */
label {font-weight:bold;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {border:1px solid #bbb;font-family:var(--font-basic);}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

.d-none {
    display:none !important;
}
/* table.css */
table {width:100%;}
tr.alt td,
.over2 tr.alt td,
.alt { background: #F7F7F7; } /* Light Gray */
.over1 tr.over td,
.over2 tr.over td,
.over { background: #fffacc; } /* Light Yellow */
.bottom {margin-bottom:0;padding-bottom:0;}
.over1 td, .over2 td {border-bottom: 1px solid #D6D6D6;}

/* .showgrid {background:url(blueprint/grid.980.png);} */

/*  */
.cm {
	font-family:var(--font-basic);
	font-size: 10px;
	letter-spacing:0.106em;
	margin-right: .5em;
	margin-left:.5em;
}
.cm a:hover {text-decoration: underline;}

.al {float:left;}
.ar {float:right;}
.acover {display:block!important;display:inline-block;overflow:hidden;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	font-size:1px;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/* // from basic.css--------- */

/* Grid */
body {background-color:#FFF;color:#333;min-width:360px;display: flex;flex-direction: column;}
body * {font-family: var(--font-basic);line-height:1.4;}
.container {padding: 0;}
.head-inner,
.container,
.foot-inner{width:1130px;margin:0 auto;padding:0 30px;}
.column-div {float:left;margin-right:20px;margin-bottom:30px;position:relative;}
#columnLeft {width:200px;}
#columnCenter {width:910px;margin-right:0;}

/*Head*/
#head {border-bottom:5px solid #CB0017;}
.head-inner {position:relative;}
.head-inner:after {content:'';display:table;clear:both;}
.head-logo {margin:2em 2em 2em 0;float:left;}
.head-logo img {width:100px;}
.head-nav {font-size:18px;position:absolute;left:250px;top:34px;}
.head-nav li {display:inline-block;margin-right:2em;position:relative;}
.head-nav li a {color:#333;text-decoration: none;}
.head-nav li.active a {font-weight:bold;}
.head-nav li.active a:after {content:'';display:block;margin:8px auto 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #CB0017;}
.head-nav li a:hover {opacity:.7;}
.head-nav li:last-of-type {margin-right:0;}
.head-link {position:absolute;right:0;top:34px;}
.head-link li {display:inline-block;}
.head-link li.stockwatch {
    filter:saturate(0);
    -webkit-filter:saturate(0);
    -webkit-filter:saturate(0);
    border-left: 1px solid #dadada;
}
.head-link li.stockwatch img {
    opacity: .5;
    height: 24px;
    margin: 0 20px;
}

/*Foot*/
#foot {background:#F9FAFB;border-top:1px solid #E4E8EB;margin-top:auto;}
.foot-inner {padding-top:20px;padding-bottom:40px;position:relative;}
#foot a {color:#333;}
#foot a:hover {color:#369;}
#foot .network:after,
#foot .fnb:after,
#foot .contact:after,
#foot .newspaper:after,
#foot .company:after{content:'';display:table;clear:both;}
#foot .fnb,
#foot .contact,
#foot .newspaper,
#foot .company {margin-right:200px;}

#foot .network {position:absolute;right:30px;top:50px;font-size:14px;border-left:1px solid #E4E8EB;padding-left:34px;}
#foot .network h3 {margin-bottom:20px;color:#CB0017;}
#foot .network li {margin-bottom:10px;}
#foot .network li:last-of-type {margin-bottom:0;}
#foot .network a:hover {color:#CB0017;}
    
#foot .fnb {border-bottom:1px solid #E4E8EB;padding-bottom:16px;margin-bottom:20px;}
#foot .fnb * {display:inline-block;vertical-align:middle;}
#foot .fnb img {margin-right:20px;}
#foot .fnb li {font-size:14px;margin-right:14px;}

#foot .contact {border-bottom:1px solid #E4E8EB;margin-bottom:20px;}
#foot .contact .item {display:inline-block;margin-right:40px;margin-bottom:20px;}
#foot .contact .item h4 {margin-bottom:6px;}
#foot .contact .item i {font-style: normal;font-weight:bold;margin-left:15px;}
#foot .contact .item i:first-of-type {margin-left:0;}

#foot .newspaper {margin-bottom:10px;}
#foot .newspaper * {display:inline-block;}
#foot .newspaper h4 {margin-right:31px;}
#foot .newspaper li {margin-right:31px;}
#foot .newspaper li:last-of-type {margin-right:0;}

#foot .company * {display:inline-block;}
#foot .company h4 {margin-right:31px;}
#foot .company li {margin-right:31px;}
#foot .company li:last-of-type {margin-right:0;}

/*LEFT*/
#lnb h2 {color:#999;font-size:12px;margin:2em 0;}
#lnb li {font-size:16px;margin:1em 0;}
#lnb li a {color:#333;border-bottom:1px solid #DEE2E5;text-decoration:none;}
#lnb li.active a {color:#CB0017;border-color:#CB0017;}
#lnb li a:hover {opacity:.7;}


/* Center */
#columnCenter {padding: 0 0 4em 0;}
#columnCenter .center-head {}
#columnCenter .center-foot {}
#columnCenter .center-body {}

h2.page-title {font-size:24px;color:#CB0017;margin:2em 0;}
h3.mid-title {margin-bottom:2em;}

#columnCenter p,
#columnCenter li,
#columnCenter th,
#columnCenter td {font-size:16px;word-break: keep-all;}
#columnCenter a {color:#333;}
#columnCenter a:hover {color:#369;}

@media screen and (max-width : 990px) { 
    /* .gnb-area, */
    #head .head-link,
    #lnb h2,
    #foot .network {display:none;}
    
    .head-inner {width:100%;padding:0;}
    .container {width:100%;padding:0;}
    .foot-inner {width:calc(100% - 40px);padding:20px 20px 40px;}
    .column-div {float:none;margin-right:0;}
    #columnLeft {width:100%;}
    #columnCenter {width:calc(100% - 40px);padding:0 20px 40px;}
    .head-logo {float:none;text-align:center;margin:2em 0 .5em;}
    .head-logo img {width:80px;}
    .head-nav {position:relative;left:auto;top:auto;padding-top:16px;font-size:16px;text-align:center;margin:0 0 1em;}
    .head-nav ul {}
    .head-nav li {margin-right:1em;}
    .head-nav li.active a:after {display:inline-block;margin:0 0 0 6px;}
    #lnb {background:#F0F2F4;padding-top:10px;padding-bottom:10px;}
    #lnb ul {text-align:center;display:flex;gap:12px;
        overflow-x:auto;
        -ms-overflow-style: none;  scrollbar-width: none;
        padding-left:8px;
        padding-right:8px;
        &::-webkit-scrollbar { display: none; }
    }
    #lnb li {font-size:14px;margin:0;white-space: nowrap;}
    #lnb li:first-of-type {margin-left:auto;}
    #lnb li:last-of-type {margin-right:auto;}
    #lnb li:not(.active) a {border:none;}
    #foot .fnb,
    #foot .contact,
    #foot .newspaper,
    #foot .company {margin-right:0;} 
    
    #foot .fnb li {font-size:12px;}
    #foot .contact h4,
    #foot .newspaper h4 {display:block;} 
    
    
    #columnCenter p,
    #columnCenter li,
    #columnCenter th,
    #columnCenter td {font-size:14px;}
    #columnCenter img {width:100%;}
    
}
@media screen and (max-width : 410px) { 
    #foot .fnb img {display:block;margin-bottom:16px;}
}

/* º»¹® ------------------------- */


/* Index */
.page-intro .s01 {margin-bottom:40px}
.page-intro .s01 p,
.page-intro .s01 li {font-size:18px;margin-bottom:4px;}
.page-intro h3 {font-size:34px;margin-bottom:30px;font-weight:normal;}
.page-intro h3 span {display:block;font-size:24px;font-weight:400;opacity:.3;}
.page-intro li:before {content:'- ';}
.page-intro table {border-top:1px solid #DEE2E5;}
.page-intro th,
.page-intro td {border-bottom:1px solid #DEE2E5;padding:12px;}
.page-intro th {background:#F0F2F4;color:#333;opacity:.6;text-align:right;}
.page-intro td p {display:inline-block;margin-right:5px;}
.page-intro img {margin-bottom:3em;width:100%;}
@media screen and (max-width : 990px) { 
    .page-intro h3 {font-size:28px;}
    .page-intro h3 span  {font-size:20px;}
    .page-intro .s01 p,
    .page-intro .s01 li {font-size:16px;}
}


/*  */
.page-greeting {}
.page-greeting p {margin-bottom:1em;}
.page-greeting .s01 {padding-bottom:4em;margin-bottom:4em;border-bottom:1px solid #DEE2E5;}
.page-greeting .s01 img {width:100%;margin-bottom:2em;}
.page-greeting .s01 p {text-align:justify}
.page-greeting .s02:after {content:'';display:table;clear:both;}
.page-greeting .s02 img {float:right;max-width:200px;}
.page-greeting .s02 h3 {font-size:24px;margin-bottom:1em;}
.page-greeting .s02 h3 span {font-size:18px;font-weight:normal;}
.page-greeting .s02 li {margin:.2em 0;}
.page-greeting .s02 li:before {content:'';display:inline-block;background:#CB0017;width:4px;height:1px;margin:0 4px 4px 0;}
.page-greeting .s02 li ul {margin-left:3em;}
@media screen and (max-width : 990px) {
    .page-greeting .s02 img {float:none;display:block;width:200px;margin:0 auto 2em;}
}

/* È¸»ç¿¬Çõ */
.page-history {}
.page-history .history-div:after {content:'';display:table;clear:both;}
.page-history .history-div {border-bottom:1px solid #CB0017;padding-bottom:4em;margin-bottom:4em; }
.page-history h3 {color:#CB0017;font-size:24px;float:left;width:20%;font-weight:normal;}
.page-history h3 {}
.page-history table {float:left;width:80%;}
.page-history th,
.page-history td {padding:12px;border-bottom:1px solid #DEE2E5;vertical-align:top;}
.page-history th {width:80px;text-align:left;}
.page-history tr:last-of-type th,
.page-history tr:last-of-type td {border:none;}
.page-history td li {margin:.2em 0;text-indent:-10px;margin-left:10px;}
.page-history td li:before {content:'- ';opacity:.5;}
.page-history td li:first-of-type {margin-top:0;}
.page-history td li:last-of-type {margin-bottom:0;}
.page-history td a {color:#369 !important;}
@media screen and (max-width : 990px) {
    .page-history h3 ,
    .page-history table {float:none;width:100%;}
    .page-history h3 {font-size:18px;}
    .page-history th {width:10%;}
}

/* ÁÖ¿ä »ç¾÷ºÎ¹® */
.page-business {}
.page-business .s01 {position:relative; }
.page-business .s01 img {
    
}

.biz-graph { position:relative;max-width:800px;margin:0 auto;}
.biz-graph ul {
    padding-top:200px;
    padding-bottom:200px;
}
.biz-graph li {display:block;max-width:320px;}
.biz-graph li img {display:block;margin:0 auto;max-width:100%;}

.biz-graph li.home {
    margin:-60px auto;
    max-width: 100%;
    width:250px;
    border: 2px dashed #D71920;
    padding: 70px 140px;
}
.biz-graph li:not(.home) {
    position:absolute;
}
.biz-graph li.itooza {top:0;left:0}
.biz-graph li.bookon {top:0;right:0;}
.biz-graph li.stockwatch {bottom:0;left:0;}
.biz-graph li.b2b {bottom:0;right:0;}
@media screen and (max-width : 765px) { 
    .biz-graph ul {
        padding:10px;
        display:flex;
        flex-direction: column;
    }
    .biz-graph li {
        max-width:400px;
    }
    .biz-graph li.home  {
        margin:0 auto;
        border:none;
        padding:0;
        order:1;
    }
    .biz-graph li:not(.home) {
        position:relative;
        margin:0 auto;
    }
    .biz-graph li.itooza {order:2;}
    .biz-graph li.stockwatch {order:3;}
    .biz-graph li.bookon {order:5;}
    .biz-graph li.b2b {order:4;}
}
/* .page-business .s01 {position:relative; width:373px;height:373px;margin:100px auto 80px;}
.page-business .s01 .card_bg { display:block; margin:auto; }
.page-business .s01 .card { position:absolute;}
.page-business .s01 .card.itooza { top: -22px; left: -64px;}
.page-business .s01 .card.bookon { top: 55px;right: -106px;}
.page-business .s01 .card.stockwatch { bottom: -43px;left: 19px;} */

/* ¿¬¶ôÃ³ */
.page-contact {}
.page-contact .s01 {margin-bottom:4em;float:left;width:42%;}
.page-contact .s02 {margin-bottom:4em;float:right;width:56%;}
.page-contact .s03 {clear:both;}
.page-contact h3 {font-size:24px;margin-bottom:.4em;}
.page-contact .root_daum_roughmap {width:100%;margin-bottom:1em;margin-top:1em;}
.page-contact table {border-top:1px solid #DEE2E5;}
.page-contact th,
.page-contact td {border-bottom:1px solid #DEE2E5;padding:12px;}
.page-contact th {background:#F0F2F4;color:#333;opacity:.6;text-align:right;}
.page-contact td p {display:inline-block;margin-right:5px;}
@media screen and (max-width : 990px) {
    .page-contact h3 {font-size:18px;}
    .page-contact .s01,
    .page-contact .s02 {float:none;width:100%;}
    .page-business .s01 img {
        width:auto;
    }
}
@media screen and (max-width : 560px) {
    /* .page-business .s01 {zoom:.7;} */
}
@media screen and (max-width : 420px) {
    /* .page-business .s01 {zoom:.6;} */
}


/*¿Â¶óÀÎ ±¤°í ¾È³»*/
.page-coor01 {}

.page-coor01 table {border-top:1px solid #DEE2E5;margin-bottom:1em;}
.page-coor01 th,
.page-coor01 td {border-bottom:1px solid #DEE2E5;padding:12px;}
.page-coor01 th {background:#F0F2F4;color:#333;opacity:.6;text-align:right;}
.page-coor01 td p {display:inline-block;margin-right:5px;}

.page-coor01 table:nth-child(1) {float:left;width:48%;}
.page-coor01 table:nth-child(2) {float:right;width:48%;}
.page-coor01 .s01:after,
.page-coor01 .s02:after {content:'';display:table;clear:both;}
.page-coor01 .s01 {margin-bottom:4em;}
.page-coor01 .apply {text-align:center;margin-bottom:4em;}
.page-coor01 .apply a { clear:both;float:none;display:inline-block;margin:0 auto;font-size:18px;background:#CB0017;color:#FFF !important;border:none;text-align:center;padding:1em 2em;border-radius:4px;}
.page-coor01 .apply a:hover {opacity:.7;text-decoration: none;}

.page-coor01 h3 {font-size:24px;margin-bottom:2em;}
.graph-div {float:left;width:50%;margin-bottom:2em;}
.graph-div img {width:100%;}
.page-coor01 .s02 h4 span {background:#CB0017;padding:.5em 1em;display:inline-block;text-align:center;border-radius:3px;color:#FFF;}

@media screen and (max-width : 990px) {
    .page-coor01 h3 {font-size:18px;}
    .page-coor01 table:nth-child(1),
    .page-coor01 table:nth-child(2),
    .page-coor01 table:nth-child(3),
    .graph-div {float:none;width:100%;}
    .page-coor01 .apply a {font-size:16px;padding:.5em 1em;}
    
}
/*Á¦ÈÞ ¾È³»*/
.page-coor02 {}
.page-coor02 .s01 {margin-bottom:4em;}

.tab-menu #tabs-2,
.tab-menu #tabs-3 {display:none;}
.tab-menu {background:#CB0017;text-align:center;width:100%;margin-bottom:2em;}
.tab-menu ul,
.tab-menu li {margin:0;padding:0;white-space: nowrap;}
.tab-menu ul {display:flex;}
.tab-menu li {flex:1;font-size:16px;letter-spacing:-0.05em;border:3px solid transparent;border-right:1px solid rgba(255,255,255,.3);}
.tab-menu li a {color:#FFF !important;display:block;padding:18px 0 16px;outline:0;text-decoration: none;}
.tab-menu li a:after {}
.tab-menu li.ui-tabs-active {background:#FFF;font-weight:bold;border-color:#b9272f;border-width:3px;}
.tab-menu li.ui-tabs-active a {color:#CB0017 !important;}
.tab-menu li.ui-tabs-active a:after {}
.tab-menu li:last-child a {border-right:0;}

.tab-content:after,
.tab-content .item-wrap:after {content:'';display:table;clear:both;}
.tab-content p.first {margin-bottom:2em;}



.tab-content .apply {clear:both;float:none;text-align:center;margin:4em 0;}
.tab-content .apply a { clear:both;float:none;display:inline-block;margin:0 auto;font-size:18px;background:#CB0017;color:#FFF !important;border:none;text-align:center;padding:1em 2em;border-radius:4px;}
.tab-content .apply a:hover {opacity:.7;text-decoration: none;}

#tabs-1 .item {text-align:center;}
#tabs-1 .item:last-of-type {margin-bottom:2em;}

#tabs-2 .item {float:left;width:48%;height:120px;border-bottom:1px solid #DEE2E5;padding-bottom:2em;margin-bottom:2em; background-repeat:no-repeat;background-position: right 10px bottom 10px;background-size:88px;}
#tabs-2 .item:nth-child(even) {float:right;width:48%;}
#tabs-2 .item:nth-child(1) {background-image:url(./img/content/img_coor_02_01@2x.png);}
#tabs-2 .item:nth-child(2) {background-image:url(./img/content/img_coor_02_02@2x.png);}
#tabs-2 .item:nth-child(3) {background-image:url(./img/content/img_coor_02_03@2x.png);}
#tabs-2 .item:nth-child(4) {background-image:url(./img/content/img_coor_02_04@2x.png);}
#tabs-2 .item h4 {color:#CB0017;font-size:20px;margin-bottom:1em;}
#tabs-2 .item h4 span {color:#FFF;background:#CB0017;text-align:center;display:inline-block;border-radius:20px;width:20px;height:20px;vertical-align:3px;font-weight:normal;font-size:14px;}

#tabs-3 .post {float:left;margin:0 1.4em 4em;width:140px;min-height:260px;text-align:center;}
#tabs-3 .post img {width:100%;border:1px solid #CCC;margin-bottom:1em;}

@media screen and (max-width : 990px) {
    #tabs-2 .item {float:none !important;width:100% !important;}
}

/*Á¦ÈÞ»ç*/

.page-partner {}
.page-partner h3 {font-size:24px;}

.kind-div {padding-bottom:4em;margin-bottom:4em;border-bottom:1px solid #DEE2E5;}
.kind-div:after {content:'';display:table;clear:both;}
.kind-div h3 {float:left;width:20%;word-break:keep-all;}
.kind-div ul {float:right;width:78%;display:flex;flex-wrap:wrap;gap:20px;}
.kind-div ul:after {content:'';display:table;clear:both;}
.kind-div li {padding-bottom:1em;}
.kind-div li:last-of-type {margin-right:0;}

@media screen and (max-width : 990px) {
    .page-partner h3 {font-size:18px;margin-bottom:2em;}
    .kind-div h3,
    .kind-div ul {float:none;width:100%;}
    
}



/* °ø°í Modal */

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background: white;
    border: 1px solid gray;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size:15px;
    /* word-break:keep-all; */
    text-align:center;
    line-height:1.6;
    padding:16px;
    min-width:calc(360px - 32px);
    h4 {
        font-size:24px;
        letter-spacing:.3rem;
        margin-bottom:14px;
        text-align:center;
    }
    p {
        margin-bottom:14px;
        line-height:1.6;
    }
    p.date {
        text-align:right;
        color:gray;
        font-size:12px;
        margin-top:24px;
        margin-bottom: 0;
        margin-right: -12px;
    }
    ul {
        text-align:center;
        line-height:1.6;
    }
}
.modal .text-start {
    text-align:left;
}
.modal .inner {
    position: relative;
    padding: 34px 28px 10px;
    border:1px solid black;
}
.modal .close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    cursor: pointer;
    display: block;
    opacity: 1;
    font-size: 0;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M1.41602 1.41663L10.9993 11L20.5827 1.41663" stroke="%23858DA2" stroke-width="1.91667"/><path d="M20.583 20.5833L10.9997 11L1.41634 20.5833" stroke="%23858DA2" stroke-width="1.91667"/></svg>') no-repeat center;
    animation: fadeOut 0.1s ease-in-out;
    -webkit-animation: fadeOut 0.1s ease-in-out;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}
@media screen and (max-width: 572px) {
    .modal {
        width:calc(100% - 32px);
        font-size:14px;
        h4 {
            font-size:22px;
        }
        p {}
        .inner {
            padding-left:16px;
            padding-right:16px;
        }
    }

}