@import "../vender/nanumsquare/css/nanumsquare.css";
@import "../vender/fontawesome/css/fontawesome.min.css";

.article-container * { padding: 0; margin: 0; font-family: 'NanumSquare'; }
.article-container .fa, .article-container .fas, .article-container .far { font-family: "Font Awesome 5 Free"; }
.article-container .fab { font-family: "Font Awesome 5 Brands"; }
.article-container p { font-size: 12pt; }
.article-container h1, .article-container h2, .article-container h3, .article-container h4, .article-container h5, .article-container h6 { font-size: 14pt; }
.article-container img { border-radius: 5pt; object-fit: cover; object-position: center; flex-shrink: 0; }
.article-container table { width: 100%; height: 100%; border-collapse: collapse; border-style: hidden; }
.article-container th, .article-container td { padding: 6px 10px !important; text-align: center; border: 1px solid rgba(55,53,47,.16); font-size: 12pt !important; color: #646363; }
.article-container th { background-color: #F5F5F5; }
.article-container ul { list-style: none; margin:0px; padding:0px; }
.article-container ul li { color: #656565; margin-left: 0em; position: relative; padding-left: 1.0em; line-height: 20pt; font-size: 12pt; }
.article-container ul li:before { content:"\25CF"; font-size: 5pt; position: absolute; top: 0; left: 0; }
.article-container a { text-decoration: none; }

.article-container { width: 660px; padding: 20px; text-align: left; }

.article-image-container { width: 100%; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative; }
.article-image-container > * { display: inline-block; position: absolute; }
.article-image-container > p { font-size: 11pt; text-align: center; }
.article-image-container > .article-box > p { font-size: 11pt; color: #404040; }

.article-product-menu { color: #5A5A5A; font-size: 13pt; }
.article-product-menu.white { color: white; padding: 0 20px; }

.article-title > * { display: inline-block; margin: 30px 0 15px; }
.article-title > h1 { color: #3C3C3C; font-size: 18pt; font-weight: 900; margin-right: 5px; }
.article-title > p { color: #9A9A9A; font-size: 11pt; }
.article-title.white { padding: 0 20px; }
.article-title.white > * { margin-top: 7px; }
.article-title.white > h1 { color: white; }
.article-title.white > p { color: white; }

.article-section-with-icon { margin: 25px 0; display: flex; }
.article-section-with-icon > p { color: #656565; margin-left: 10px; line-height: 18pt; }

.article-section { margin-top: 30px; }
.article-section-title { display: flex; }
.article-section-title > i { color: #3C3C3C; padding-top: 2px; }
.article-section-title > h3 { color: #3C3C3C; margin-left: 10px; margin-bottom: 10px; }
.article-section > p { color: #656565; line-height: 20pt; }

.article-table { border-top: 2px solid rgba(55, 53, 47, .16); border-bottom: 3px solid rgba(55, 53, 47, .16); }

.article-box { padding: 15px 20px; background-color: #F5F5F5; border-radius: 5pt; }
.article-box > h3 { font-size: 12pt; color: #3C3C3C; line-height: 18pt; margin-bottom: 5px; }
.article-box > p { font-size: 12pt; color: #656565; line-height: 18pt; }

.article-image-box { background-color: #F5F5F5; border-radius: 5pt; text-align: center; }
.article-image-box > img { width: 100%; height: 160px; }
.article-image-box > p { color: #656565; padding: 8px 0; }

.article-quote { padding-left: 20px; border-left: 3px solid #999; color: #999; }

.article-reference-section { background-color: #F5F5F5; padding: 15px 20px; }
.article-reference-section > div > p { color: #656565; padding-top: 5px; }

.article-round-button { color: white; font-size: 10pt; padding: 8px; background-color: rgb(85, 160, 243); border-radius: 20px; }
.article-round-gray-button { color: #656565; font-size: 10pt; padding: 8px; background-color: #F5F5F5; border-radius: 20px; }

.aritcle-blue-circle-icon { padding: 12px; background-color: rgb(85, 160, 243); height: fit-content; display: table; border-radius: 100px; color: white; font-size: 15pt; }

.article-data-using-description { font-size: 8.5pt !important; text-align: center; color: #909090; }

.article-spacer-10 { width: 0; height: 10px; }
.article-spacer-20 { width: 0; height: 20px; }
.article-spacer-30 { width: 0; height: 30px; }
.article-spacer-with-line-16 { width: 100%; height: 1px; background-color: #ddd; margin: 8px 0; }