@charset "utf-8";

/* **********************************
 * reset
 * *********************************/
 legend, caption {
	display: none !important
}

/* **********************************
 * container
 * *********************************/
.container-xl {max-width: 1230px}

/* **********************************
 * footer
 * *********************************/
#footer .corp_info {position: relative}
#footer .corp_info .admin-button {position: absolute; top: 25px; right: 0; font-size: 0; z-index: 10}
#footer .corp_info .admin-button > a {display: inline-block; font-size: 14px; color: #fff; letter-spacing: -0.03em; padding: 8px 20px; border: 1px solid #fff}
#footer .corp_info .admin-button > a + a {margin-left: 8px}

/* **********************************
 * main (2022-08-25)
 * *********************************/
/*#intro-workers {overflow: hidden}*/
/* #intro-workers .background-video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: -1; object-fit: cover; pointer-events: none} */
/* hero */
.hero {position: relative; height: 100vh; overflow: hidden}
.hero .intro {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background-color: #fff; transition: transform .6s}
.hero .intro.hide {transform: translateX(100%)}
.hero .intro .content {padding-left: 20px; padding-right: 20px; text-align: center}
.hero .intro .content h2 {font-size: 64px; font-weight: 700; color: #000; letter-spacing: -0.02em; line-height: 1.38}
.hero .intro .content strong {display: inline-block; font-weight: 700; background-image: linear-gradient(120deg, rgb(29,111,194) 35%, rgb(71,208,185) 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent}
.hero .hero-swiper .swiper-slide {position: relative; height: 100%; overflow: hidden}
.hero .hero-swiper .swiper-slide .bg, .hero .hero-swiper .swiper-slide .object {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center; background-repeat: no-repeat}
.hero .hero-swiper .swiper-slide .bg {background-color: #fff; transform: scale(1.1); transition: transform 5s; z-index: 5}
.hero .hero-swiper .swiper-slide .object {z-index: 10; pointer-events: none}
.hero .hero-swiper .swiper-slide .caption-outer {position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 20}
.hero .hero-swiper .swiper-slide .caption-inner h2 {font-size: 120px; font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1}
.hero .hero-swiper .swiper-slide .caption-inner h2.intro-text {font-size: 64px; font-weight: 700; color: #000; text-align: center; line-height: 1.38}
.hero .hero-swiper .swiper-slide .caption-inner h2.intro-text strong {display: inline-block; font-weight: 700; background-image: linear-gradient(120deg, #01abcd 35%, #01abcd 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent}
.hero .hero-swiper .swiper-slide .caption-inner h2 > .hero-animate-span:nth-child(2) {margin-left: 1.08em}
.hero .hero-swiper .swiper-slide .caption-inner h2 > .hero-animate-span:nth-child(2) > span {transition-delay: 600ms}
.hero .hero-swiper .swiper-slide .caption-inner h2 > .hero-animate-span:nth-child(3) {margin-left: 0.66em}
.hero .hero-swiper .swiper-slide .caption-inner h2 > .hero-animate-span:nth-child(3) > span {transition-delay: 600ms}
.hero .hero-swiper .swiper-slide .caption-inner p {font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.25; text-align: right; margin-top: 8px; padding-right: 48px}
/* .hero .hero-swiper .swiper-slide .caption-inner p > .hero-animate-span:nth-child(1) {margin-right: 3.88em} */
.hero .hero-swiper .swiper-slide .caption-inner p > .hero-animate-span:nth-child(1) > span {transition-delay: 700ms}
.hero .hero-swiper .swiper-slide .caption-inner p > .hero-animate-span:nth-child(2) > span {transition-delay: 800ms}
.hero .hero-swiper .swiper-slide .caption-inner .hero-animate-span {position: relative; display: block; overflow: hidden}
.hero .hero-swiper .swiper-slide .caption-inner .hero-animate-span > span {display: block; transform: translate(-100%,0); transition: transform .7s cubic-bezier(.17,1.02,.53,.98)}
/* .hero .hero-swiper .swiper-slide .caption-inner .hero-animate-span:nth-child(2) > span {transition-delay: 600ms} */
/* .hero .hero-swiper .swiper-slide .caption-inner .hero-animate-span:nth-child(3) > span {transition-delay: 700ms} */
.hero .hero-swiper .swiper-slide-active .bg {transform: scale(1)}
.hero .hero-swiper .swiper-slide-active .object {animation: upAndDown 5s forwards ease-in-out}
.hero .hero-swiper .swiper-slide-active .caption-inner h2.intro-text > .animate-line > span {transform: translate(0,0)}
.hero .hero-swiper .swiper-slide-active .caption-inner .hero-animate-span > span {transform: translate(0,0); transition-delay: 500ms}
.hero .hero-swiper .swiper-pagination {bottom: 50px}
.hero .hero-swiper .swiper-pagination-bullet {width: 140px; margin: 0 8px; border-radius: 0; opacity: 1; background-color: transparent}
.hero .hero-swiper .swiper-pagination-bullet .pagination-bar {position: relative; display: block; width: 100%; height: 4px; background-color: rgba(255,255,255,.3); transition: height .3s, background-color .3s; overflow: hidden}
.hero .hero-swiper .swiper-pagination-bullet .pagination-bar b {position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 0; background-color: #fff; z-index: 5}
.hero .hero-swiper .swiper-pagination-bullet-active .pagination-bar b {animation: heroProgressBar 5s ease-out forwards}
@keyframes upAndDown {
    0% {transform: translateY(-1px) rotate(1deg)}
  25% {transform: translateY(1px) rotate(-1deg)}
  50% {transform: translateY(-1px) rotate(1deg)}
  75% {transform: translateY(1px) rotate(-1deg)}
  100% {transform: translateY(0px) rotate(0deg)}
}
@keyframes heroProgressBar {
    0% {width: 0}
    100% {width: 100%}
}

/* main section common */
.main-section {padding-top: 120px; padding-bottom: 120px}
.main-section .section-header {text-align: center; margin-bottom: 80px}
.main-section .section-header h2 {font-size: 48px; font-weight: 600; color: #000; letter-spacing: -0.02em}

/* service */
.main-section.service {z-index: 5; background-image: url(../img/sub_bg_00.png); background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-image .6s}
.main-section.service .col-service-item:nth-child(2) {margin-top: 60px}
.main-section.service .col-service-item:nth-child(3) {margin-top: -60px}
.main-section.service .col-service-item a {display: block; box-shadow: 8px 8px 36px -2px rgba(0,0,0,.32)}
.main-section.service .col-service-item figure {position: relative; margin-bottom: 0; padding-bottom: 66.67%; overflow: hidden}
.main-section.service .col-service-item figure::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgba(230,149,143,.7) 0%, rgba(185,80,74,.7) 50%, rgba(76,32,30,.7) 100%); opacity: 0; z-index: 2; transition: opacity .45s ease-out}
.main-section.service .col-service-item figure img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out}
.main-section.service .col-service-item figure figcaption {position: absolute; bottom: 40px; left: 40px; z-index: 5; transform: translateY(120px); transition: transform .45s cubic-bezier(.27,.99,.53,1)}
.main-section.service .col-service-item figure figcaption h5 {font-size: 30px; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.16}
.main-section.service .col-service-item figure figcaption h5::after {content: ''; display: block; width: 40px; height: 2px; margin-top: 16px; margin-bottom: 24px; background-color: #fff; transition: width .45s cubic-bezier(.27,.99,.53,1)}
.main-section.service .col-service-item figure figcaption p, .main-section.service .col-service-item figure figcaption .icon {opacity: 0; transition: opacity .45s cubic-bezier(.27,.99,.53,1)}
.main-section.service .col-service-item figure figcaption p {font-size: 17px; color: #fff; letter-spacing: -0.02em; line-height: 1.6; max-width: 300px}
.main-section.service .col-service-item figure figcaption .icon {display: block; font-size: 28px; color: #fff; margin-top: 24px}
.main-section.service .col-service-item a:hover figure::before {opacity: .4}
.main-section.service .col-service-item a:hover figure img {transform: scale(1.1)}
.main-section.service .col-service-item a:hover figure figcaption {transform: translateY(0)}
.main-section.service .col-service-item a:hover figure figcaption h5::after {width: 300px}
.main-section.service .col-service-item a:hover figure figcaption p, .main-section.service .col-service-item a:hover figure figcaption .icon {opacity: 1}
/* .main-section.service .rotating-text {position: absolute; top: 100px; left: 100px; display: flex; width: 600px; height: 600px; align-items: center; justify-content: center; z-index: 100} */
/* .main-section.service .rotating-text p {position: absolute; top: 0; left: 0; font-size: 20px; font-weight: 300; color: rgba(0,0,0,.23)} */
/* .main-section.service .rotating-text span {position: absolute; display: inline-block} */
/* .main-section.service .rotating-text {position: absolute; top: 100px; left: 100px; z-index: 100} */
.main-section.service .rotating-text {position: absolute; top: -240px; left: -840px; display: flex; width: 1680px; height: 1680px; align-items: center; justify-content: center; z-index: -1}
.main-section.service .rotating-text text {fill: #ccc; font-size: 10px; font-weight: 300; animation: rotatingText 25s linear infinite; transform-origin: 250px 250px}
@keyframes rotatingText {
    to {transform: rotate(360deg)}
}

/* news */
.main-section.news .col-tour-items {width: 100%}
.main-section.news .col-news-articles {width: 100%}
.main-section.news .col-tour-items .tour-swiper .swiper-slide a {display: block}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure {position: relative; margin-bottom: 0; overflow: hidden}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure img {display: block; width: 100%; height: auto !important; transition: transform .6s}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption {position: absolute; top: 64px; left: 48px; color: #fff; z-index: 10}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption h4 {font-size: 30px; font-weight: 600; line-height: 1.16; letter-spacing: -0.02em}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption h4::after {content: ''; display: block; width: 140px; height: 2px; margin-top: 20px; margin-bottom: 24px; background-color: #fff}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption p {font-size: 17px; line-height: 1.6; letter-spacing: -0.02em}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption .view-more {position: relative; display: inline-block; font-size: 16px; margin-top: 24px}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption .view-more > span {display: inline-block; opacity: 0; transform: translateX(-80px); transition: opacity .3s ease-out, transform .3s ease-out}
.main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption .view-more::after {content: '\F138'; display: inline-block; font-family: 'bootstrap-icons'; font-size: 1.5em; margin-left: 8px; vertical-align: middle; transform: translateX(-80px); transition: transform .3s ease-out}
.main-section.news .col-tour-items .tour-swiper .swiper-slide a:hover figure img {transform: scale(1.05)}
.main-section.news .col-tour-items .tour-swiper .swiper-slide a:hover figure figcaption .view-more > span {opacity: 1; transform: translateX(0)}
.main-section.news .col-tour-items .tour-swiper .swiper-slide a:hover figure figcaption .view-more::after {transform: translateX(0)}
.main-section.news .col-tour-items .tour-swiper .swiper-pagination {text-align: left; padding-left: 48px; padding-right: 48px; bottom: 32px}
.main-section.news .col-tour-items .tour-swiper .swiper-pagination .swiper-pagination-bullet {background-color: #fff}
.main-section.news .col-news-articles {background-color: #f7f7f7}
.main-section.news .col-news-articles .article-wrapper {display: flex; width: 100%; height: 100%; max-width: 960px; padding-left: 100px; padding-right: 60px; align-items: center}
.main-section.news .col-news-articles .article-contents {width: 100%}
.main-section.news .col-news-articles .news-header {padding-bottom: 20px; border-bottom: 1px solid #d9d9d9}
.main-section.news .col-news-articles .news-header .col-title h3 {font-size: 30px; font-weight: 600; color: #212529; letter-spacing: -0.015em}
.main-section.news .col-news-articles .news-header .col-button .button-detail {position: relative; display: inline-flex; font-size: 16px; color: #495057; height: 46px; padding: 0 24px; border: 1px solid #d9d9d9; border-radius: 30px; align-items: center; justify-content: center; background-image: none; transition: color .3s, border-color .3s; z-index: 5; overflow: hidden}
.main-section.news .col-news-articles .news-header .col-button .button-detail::before {content: ''; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(120deg, rgb(29,111,194) 35%, rgb(71,208,185) 70%); opacity: 0; transition: opacity .3s; z-index: -1}
.main-section.news .col-news-articles .news-header .col-button .button-detail:hover {color: #fff; border-color: transparent}
.main-section.news .col-news-articles .news-header .col-button .button-detail:hover::before {opacity: 1}
.main-section.news .col-news-articles .news-content > ul > li {font-size: 0; padding: 20px 0; border-bottom: 1px solid #d9d9d9}
.main-section.news .col-news-articles .news-content > ul > li > p, .main-section.news .col-news-articles .news-content > ul > li > .date {display: inline-block; font-size: 18px; line-height: 1.4; vertical-align: middle}
.main-section.news .col-news-articles .news-content > ul > li > p {font-size: 0 !important; width: calc(100% - 120px)}
.main-section.news .col-news-articles .news-content > ul > li > p a {display: inline-block; max-width: 100%; font-size: 18px; color: #343a40; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.main-section.news .col-news-articles .news-content > ul > li > p a:hover {color: #0044cf}
.main-section.news .col-news-articles .news-content > ul > li > .date {width: 120px; font-weight: 300; color: #aaa; letter-spacing: -0.02em; text-align: right}

/* cdmo */
.main-section.cdmo {padding-bottom: 70px; background-color: #F8E8E7}
.main-section.cdmo .cdmo-swiper {padding-top: 60px; padding-bottom: 60px}
.main-section.cdmo .cdmo-swiper .swiper-slide {display: flex; width: 560px; height: 370px; align-items: center}
.main-section.cdmo .cdmo-swiper .swiper-slide a {position: relative; display: flex; width: 100%; height: 250px; color: #fff; background-color: #f3f3f3; box-shadow: 4px 12px 42px 0 rgba(0,0,0,.24); transition: .3s ease-out}
.main-section.cdmo .cdmo-swiper .swiper-slide a::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; border: 5px solid transparent; z-index: 5; transition: border-color .3s ease-out}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-text {position: relative; width: 100%; padding: 42px; z-index: 20}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-text h4 {color: #4C201E;position: relative; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; transition: transform .3s ease-out; transform: translateY(130px)}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-text .info-list {color:#4C201E; position: absolute; bottom: 0; left: 0; right: 0; padding: 42px; opacity: 0; z-index: 5; transition: opacity .3s ease-out}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-text .info-list li {position: relative; font-size: 16px; letter-spacing: -0.02em; line-height: 1.6; padding-left: 12px}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-text .info-list li::before {content: '-'; position: absolute; top: 0; left: 0; opacity: .4}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-bg {position: absolute; top: 50%; left: 0; width: 100%; height: 100%; transform: translateY(-50%); overflow: hidden}
.main-section.cdmo .cdmo-swiper .swiper-slide .slide-bg img {display: block; width: 100%; margin-top: -60px; transition: margin .3s ease-out}
.main-section.cdmo .cdmo-swiper .swiper-slide a:hover {height: 100%}
.main-section.cdmo .cdmo-swiper .swiper-slide a:hover::before {border-color: #ecf9fe}
.main-section.cdmo .cdmo-swiper .swiper-slide a:hover .slide-text h4 {transform: translateY(0)}
.main-section.cdmo .cdmo-swiper .swiper-slide a:hover .slide-text .info-list {opacity: 1}
.main-section.cdmo .cdmo-swiper .swiper-slide a:hover .slide-bg img {margin-top: 0}
.main-section.cdmo .cdmo-swiper .pagination-wrapper {font-size: 0; text-align: center; padding-top: 48px}
.main-section.cdmo .cdmo-swiper .swiper-pagination {position: static; display: inline-block; vertical-align: middle}
.main-section.cdmo .cdmo-swiper .swiper-pagination .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 5px; border: 1px solid #DD7F78; background-color: transparent; opacity: 1}
.main-section.cdmo .cdmo-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: #DD7F78}
.main-section.cdmo .cdmo-swiper .swiper-toggle-controller {font-weight: 700; color: #DD7F78; line-height: 1; padding: 0; border: 0; background-color: transparent; vertical-align: middle; outline: 0}

/* people */
.main-section.people .people-content {max-width: 800px; margin: auto}
/* .main-section.people .people-content .col-people-item {margin-bottom: 64px} */
.main-section.people .people-content .col-people-item:nth-child(2n) {margin-top: 100px}
.main-section.people .people-content .col-people-item a {display: block}
.main-section.people .people-content .col-people-item figure {position: relative; margin-bottom: 24px; overflow: hidden; transition: transform .6s}
.main-section.people .people-content .col-people-item figure img {display: block; width: 100%; transition: transform .6s}
.main-section.people .people-content .col-people-item h4 {font-size: 27px; font-weight: 600; color: #212529; letter-spacing: -0.02em; margin-bottom: 8px}
.main-section.people .people-content .col-people-item p {color: #666; letter-spacing: -0.02em}
.main-section.people .people-content .col-people-item p .team {display: inline-block; font-size: 80%; color: #fff; margin-right: 16px; padding: 6px 16px; background-color: #01abcd}
.main-section.people .people-content .col-people-item a:hover figure {transform: scale(0.92)}
.main-section.people .people-content .col-people-item a:hover figure img {transform: scale(1.08)}

/* **********************************
 * CMO (2022-06-25)
 * *********************************/
#cmo {padding-top: 60px; padding-bottom: 160px; background-color: #fff}
#cmo .col-list-items .header {position: relative; margin-bottom: 48px; z-index: 10}
#cmo .col-list-items .header p {font-size: 20px; font-weight: normal; color: #212529; line-height: 1; margin-bottom: 16px}
#cmo .col-list-items .header h2 {font-family: 'Pretendard', 'sans-serif'; font-size: 0; font-style: /*italic*/; line-height: 1.12}
#cmo .col-list-items .header h2 span {display: inline-block; font-size: 56px; background-image: linear-gradient(120deg, rgb(29,111,194) 35%, rgb(71,208,185) 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent}
#cmo .col-list-items .header h2 span:last-child {margin-left: 150px}
#cmo .col-list-items .swiper-controller > a {position: relative; display: flex; width: 100%; height: 62px; padding: 0 20px; align-items: center; border-bottom: 2px solid #e9e9e9; border-radius: 0; background-color: transparent; opacity: 1; z-index: 5}
#cmo .col-list-items .swiper-controller > a::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: -80px; z-index: -1; background-image: linear-gradient(90deg, rgb(28,110,194,1) 0%, rgb(46,190,181,1) 100%); box-shadow: 8px 12px 24px 0 rgba(0,0,0,.32); opacity: 0; visibility: hidden}
#cmo .col-list-items .swiper-controller > a span {display: inline-block; width: 40px; font-size: 15px; font-weight: 500; color: #7a7a7a}
#cmo .col-list-items .swiper-controller > a p {font-size: 17px; font-weight: 600; color: #212529; letter-spacing: -0.02em}
#cmo .col-list-items .swiper-controller > a.swiper-pagination-bullet-active span, #cmo .col-list-items .swiper-controller > a.swiper-pagination-bullet-active p, #cmo .col-list-items .swiper-controller > a:hover span, #cmo .col-list-items .swiper-controller > a:hover p {color: #fff}
#cmo .col-list-items .swiper-controller > a.swiper-pagination-bullet-active::before, #cmo .col-list-items .swiper-controller > a:hover::before {opacity: 1; visibility: visible}
#cmo .col-swiper-items {padding-top: 110px}
#cmo .col-swiper-items .cmo-swiper .slide-grid {display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; align-items: center}
#cmo .col-swiper-items .cmo-swiper .slide-grid > div {padding-left: 25px; padding-right: 25px}
#cmo .col-swiper-items .cmo-swiper .slide-grid .grid-img {width: 70%}
#cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text {width: 30%}
#cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text h3 {font-size: 32px; font-weight: normal; color: #212529; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 24px}
#cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text p {font-size: 17px; font-weight: 300; color: #7a7a7a; letter-spacing: -0.02em}
#cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text .button-link {display: inline-block; font-size: 16px; color: #212529; margin-top: 36px; padding: 14px 36px; border: 1px solid #212529; transition: .2s}
#cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text .button-link:hover {box-shadow: 4px 8px 16px 0 rgba(0,0,0,.19)}

/* **********************************
 * board
 * *********************************/
/* common */
.board-category {margin-bottom:60px}
.board-category table {display:none}
.board-category ul {font-size:0; text-align:center; border:0; text-align:center}
.board-category ul li {display:inline-block; font-size:15px; margin:0 6px}
.board-category ul li a {display:inline-block; color:#777; padding:8px 18px; border-radius:20px; background-color:#f7f7f7}
.board-category ul li a:hover {background-color:#f2f2f2}
.board-category ul li a#bo_cate_on {color:#fff; background-color:#0044cf}

.board-button-row {text-align: right}
/* .board-button-row.top {padding-bottom: 2.5rem} */
/* .board-button-row.bottom {padding-top: 2.5rem} */
.board-button-row ul li {position: relative; display: inline-block}
.btn_bo_user {display: inline-block; float: none}

.pg_wrap {float: none; display: block; padding-top: 3.75rem; font-size: 0; text-align: center}
.pg_page, .pg_current {display: inline-block; font-size: 0.9375rem; font-weight: 500; color: #495057; text-align: center; line-height: 2.25rem; width: 2.25rem; height: 2.25rem; margin: 0 3px; border: 0; border-radius: 50%; background-color: #fff}
.pg_page:hover {background-color: #f1f3f5}
.pg_current {color: #212529; background-color: #e9ecef}

.paging {font-size: 0; text-align: center}
.paging > b, .paging > a {display: inline-block; font-size: 15px; color: #666; text-align: center; line-height: 43px; width: 45px; height: 45px; margin: 0 4px; border: 1px solid #d9d9d9}
.paging > b, .paging > .current-page {color: #fff; border-color: #333; background-color: #333}
.paging > a:hover {border-color: #b4b4b4}

.bo_v_option {font-size: 0}
.bo_v_option li {display: inline-block; margin-right: 1rem}
.btn_cke_sc {height: auto !important; padding: 0.375rem 0.75rem; font-size: 0.875rem; color: #666; border: 1px solid #d9d9d9; background-color: #fff}
.bo_notice {background-color: #fff6fa}
.bo_notice td {background-color: inherit !important}

.table-solid {border-top: 3px solid #222}
.table-solid thead th, .table-solid tbody td {padding: 18px 15px; border-top:none; border-bottom:1px solid #e5e5e5; vertical-align:middle !important}
.table-solid thead th {position:relative; font-size:16px; font-weight:500; color:#383838; text-align:center; border-bottom-width:1px !important; background-color: #f7f7f7}
.table-solid tbody td {font-size:15px; color:#777}
.table-solid tbody td a {color:#333}
.table-solid tbody td a:hover {color:#0044cf}

.list-common-top {margin-bottom: 2.625rem}
.list-common-top .total-count {font-size: 1.125rem; font-weight: 500; color: #343a40}
.list-common-top .total-count span {font-weight: 700; color: #5c4229}
.list-common-top .col-search {font-size: 0}
.list-common-top .col-search .selectric-wrapper, .list-common-top .col-search .search-box {display: inline-block; vertical-align: middle}
.list-common-top .col-search .selectric-wrapper {width: 8.75rem; margin-right: 0.5rem}
.list-common-top .col-search .search-box {position: relative; width: 16.25rem; height: 3.75rem; padding: 0.625rem 0.75rem; border: 1px solid #dee2e6; border-radius: 0; background-color: #fff}
.list-common-top .col-search .search-box input[type=text] {display: block; width: calc(100% - 2.25rem); height: 100%; font-size: 1rem; letter-spacing: -0.03em; padding: 0; border: 0; background-color: #fff; outline: 0}
.list-common-top .col-search .search-box .button-search {position: absolute; top: 0; right: 0; bottom: 0; padding: 0 0.75rem; font-size: 1.25rem; font-weight: 700; color: #212529; border: 0; background-color: transparent; outline: 0}

.list-common-top .col-search .selectric {text-align: left !important; border: 1px solid #dee2e6 !important; border-radius: 0; background-color: #fff !important}
.list-common-top .col-search .selectric .label {font-size: 1rem; font-weight: 500; color: #333; line-height: 3.5rem; height: 3.5rem; margin: 0 2.375rem 0 1rem}
.list-common-top .col-search .selectric .button {height: 3.5rem; color: #333 !important; line-height: 3.5rem; background-color: transparent}
.list-common-top .col-search .selectric .button:after {content: '\e942'; font-family: 'xeicon'; font-size: 1.25rem; width: auto; height: auto; border: 0; transition: transform .3s}
.list-common-top .col-search .selectric-open .selectric {border-color: #333 !important}
.list-common-top .col-search .selectric-open .selectric .button:after {transform: rotate(180deg)}
.list-common-top .col-search .selectric-items {margin-top: -1px; border-color: #333; border-radius: 0; background-color: #fff; box-shadow: none}
.list-common-top .col-search .selectric-above .selectric-items {margin-top: auto; margin-bottom: -1px}
.list-common-top .col-search .selectric-items ul {text-align: left !important; padding-top: 0.375rem; padding-bottom: 0.375rem}
.list-common-top .col-search .selectric-items ul, .list-common-top .col-search .selectric-items li {font-size: 0.9375rem}
.list-common-top .col-search .selectric-items li {padding: 0.625rem 1rem; color: #888; background-color: #fff !important}
.list-common-top .col-search .selectric-items li.highlighted, .list-common-top .col-search .selectric-items li.selected, .list-common-top .col-search .selectric-items li:hover {color: #000 !important}

.cell-num {width: 3.75rem}
.cell-status {width: 5rem}
.cell-status .status {display: inline-block; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.02em; text-align: center; min-width: 5.125rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem}
.cell-status .status.status-01 {color: #495057; background-color: #f1f3f5}
.cell-status .status.status-02 {color: #4c6ef5; background-color: #dbe4ff}
.cell-status .status.status-03 {color: #fff; background-color: #343a40}
.cell-status .status.status-04 {color: #fff; background-color: #e03131}
.cell-title {padding-left: 2.5rem}
.cell-title a {color: #333}
.cell-date {width: 9.375rem}
.cell-writer {width: 8.75rem}
.cell-read {width: 4.375rem}
.sch_word {color: #1c6aba !important; background-color: #ebe9fc !important}
.article-view .view-container .header {padding: 3.125rem 2rem 2.5rem; border-top: 2px solid #333; border-bottom: 1px solid #e9e9e9}
.article-view .view-container .header h3 {font-size: 1.5rem; font-weight: 500; color: #212529; letter-spacing: -0.03em}
.article-view .view-container .header .grid-date {font-size: 0}
.article-view .view-container .header .grid-date span {display: inline-block; font-size: 1rem; color: #888}
.article-view .view-container .header .grid-date span + span::before {content: '|'; font-size: 0.75rem; color: #ccc; margin: 0 0.75rem; vertical-align: 1px}
.article-view .view-container .header .date {display: block; color: #888}
.article-view .view-container .header .divider {font-style: normal; color: #ccc; padding: 0 8px}
.article-view .view-container .body {padding: 3.75rem 0}
.article-view .view-container .body .post-inner {color: #666; line-height: 1.75}
.article-view .view-container .tail {margin-top: 3.75rem; border-top: 1px solid #333}
.article-view .view-container .tail .article-control li {font-size: 0; line-height: 3.75rem; border-bottom: 1px solid #e9e9e9}
.article-view .view-container .tail .article-control li b, .article-view .view-container .tail .article-control li a {display: inline-block; font-size: 15px; vertical-align: top}
.article-view .view-container .tail .article-control li b {position: relative; padding-left: 2.5rem; width: 9.375rem; font-weight: 500; color: #555}
.article-view .view-container .tail .article-control li b:after {content: ''; position: absolute; top: 50%; right: 1.75rem; width: 1px; height: 1.125rem; margin-top: -0.5625rem; background-color: #d9d9d9}
.article-view .view-container .tail .article-control li a {width: calc(100% - 9.375rem); font-weight: 500; color: #343a40; text-overflow: ellipsis; white-space: nowrap; padding-right: 2.5rem; overflow: hidden}
.article-write .write-desc {padding: 2.25rem; background-color: #f7f7f7}
.article-write .write-desc h4 {font-size: 1.1875rem; font-weight: 500; color: #212529; margin-bottom: 1.125rem}
.article-write .write-desc p {color: #666; line-height: 1.75}

/* photo */
.product-section .type-a-row .col-photo {margin-bottom:40px}
.product-section .adm-check-box {position:relative}
.product-section .adm-check-box .px-check-form {position:absolute; top:10px; left:10px; z-index:500}
.product-section .type-a-row .col-photo figure {position:relative; height:270px; margin-bottom: 0; overflow:hidden}
.product-section .type-a-row .col-photo figure a {display:block; height:100%}
.product-section .type-a-row .col-photo figure a img {display:block; width:100%; height:100%; transition:transform 0.3s ease-out; object-fit:cover; font-family:'object-fit: cover;'}
.product-section .type-a-row .col-photo:hover figure a img {transform:scale(1.1)}
.product-section .type-a-row .col-photo .article-info {text-align:center; padding-top:20px}
.product-section .type-a-row .col-photo .article-info h4 {font-size:17px; font-weight:normal; color:#333; margin-bottom:5px}
.product-section .type-a-row .col-photo .article-info h4 a {color:#333}
.product-section .type-a-row .col-photo .article-info .category {font-size:14px; color:#8a8a8a}

/* **********************************
 * buttons
 * *********************************/
.button {display: inline-block; font-size: 14px; color: #495057; letter-spacing: -0.04em; line-height: 1.44; padding: 14px 20px; border-radius: 0; border: 1px solid transparent; background-color: transparent; outline: 0 !important; vertical-align: top;}
.button.button-default {color: #495057 !important; border: 1px solid #ced4da; background-color: #fff}
.button.button-default:hover {background-color: #f8f9fa; color:#fff}
.button.button-primary {color: #fff !important; background-color: #1c6aba; transition:0.3s}
.button.button-primary:hover {background-color: #125699}
.button.button-primary-outline {color: #1c6aba !important; border-color: #1c6aba; background-color: transparent}
.button.button-primary-outline:hover {color: #fff !important; background-color: #125699}
.button.button-primary-outline:hover .arrow-primary {background-image: url(../img/button_arrow_light.svg)}
.button.button-secondary {color: #fff !important; background-color: #a48a67}
.button.button-secondary:hover {background-color: #977d5b}
.button.button-secondary-outline {color: #a48a67 !important; border-color: #a48a67; background-color: transparent}
.button.button-secondary-outline:hover {color: #fff !important; background-color: #a48a67}
.button.button-secondary-outline:hover .arrow-secondary {background-image: url(../img/button_arrow_light.svg)}
.button.button-light {color: #1c6aba !important; background-color: #faf7f2}
.button.button-grey {color: #fff !important; background-color: #a4afbb}
.button.button-grey:hover {background-color: #99a5b3}
.button.button-dark {color: #fff !important; background-color: #343a40}
.button.button-dark:hover {background-color: #212529}

.button-tooltip {font-size: 1.125rem; color: #ced4da; margin-left: 4px; padding: 0; border: 0; background-color: transparent; outline: 0 !important; vertical-align: middle}
.button-tooltip svg {vertical-align: 2px}

.button.button-sm {font-size: 14px; padding: 12px 18px}
.button.button-lg {font-size: 16px; padding: 15px 22px}
.button.button-xl {font-size: 18px; padding: 17px 26px}
.button.button-block {display: block; width: 100%; text-align: center}
.button.size-1 {min-width: 60px}
.button.size-2 {min-width: 72px}
.button.size-3 {min-width: 84px}
.button.size-4 {min-width: 100px}
.button.size-5 {min-width: 112px}
.button.size-6 {min-width: 124px}
.button.size-7 {min-width: 140px}
.button.size-8 {min-width: 160px}
.button.size-9 {min-width: 180px}
.button.size-10 {min-width: 200px}

.radius {border-radius: 6px !important}
.radius-lg {border-radius: 10px !important}
.radius-xl {border-radius: 30px !important}

/* **********************************
 * forms
 * *********************************/
.label-heading {font-size: 15px; font-weight: 700; color: #495057; letter-spacing: -0.03em; margin-bottom: 12px}
.label-heading .button-tooltip, .px-check-form .button-tooltip {position: relative; top: -1px}
.form-sm {max-width: 400px; margin-left: auto; margin-right: auto}
.form-input {display: block; width: 100%; height: 48px; font-size: 14px; color: #495057; letter-spacing: -0.03em; line-height: 1.5; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 0; background-color: #f1f3f5; transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0}
.form-input.input-lg {font-size: 0.9375rem; height: 55px; padding: 0.625rem 1.125rem}
.form-input.input-xl {font-size: 1rem; height: 60px; padding: 0.75rem 1.25rem}
select.form-input.input-lg {padding-right: 2.125rem}
select.form-input.input-xl {padding-right: 2.25rem}
.form-input:focus, .form-input.focus {border-color: #396cee; box-shadow: 0 0 1px 1px #1f4199}
textarea.form-input {height: auto !important; padding: 1rem; resize: none}
textarea.form-input.input-lg {padding: 1.125rem}
textarea.form-input.input-xl {padding: 1.25rem}
select.form-input {padding-right: 1.875rem; background-image: url(../img/select_arrow_down.svg); background-size: 1.25rem 1.25rem; background-position: right 15px center; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; height:100%}
select.form-input::-ms-expand {display: none}
.input-group > .form-input, .input-group > .form-input-plaintext, .input-group > .custom-select, .input-group > .custom-file {position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0}
.input-group-text {font-size: 14px}
.px-check-form {position: relative}
.px-check-form input[type='checkbox'], .px-check-form input[type='radio'] {position: absolute; top: -1px; left: -1px; opacity: 0; visibility: hidden}
.px-check-form input[type='checkbox'] + label, .px-check-form input[type='radio'] + label {position: relative; display: inline-block; font-size: 0.9375rem; font-weight: 500; color: #666; letter-spacing: -0.02em; margin-bottom: 0; vertical-align: 0; cursor: pointer}
.px-check-form input[type='checkbox'] + label:before, .px-check-form input[type='radio'] + label:before {content: ''; display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border: 2px solid #dee2e6; border-radius: 6px; background-color: transparent; vertical-align: middle}
.px-check-form input[type='checkbox'] + label:after, .px-check-form input[type='radio'] + label:after {content: '\e928'; position: absolute; top: 1px; left: 0.3125rem; font-family: 'xeicon'; color: transparent}
.px-check-form input[type='checkbox']:checked + label:before, .px-check-form input[type='radio']:checked + label:before {border-color: #000; background-color: #000}
.px-check-form input[type='checkbox']:checked + label:after, .px-check-form input[type='radio']:checked + label:after {color: #fff}
.px-check-form label a {display: inline-block; color: #000; border-bottom: 1px solid #000; vertical-align: middle}
.px-custom-file {position: relative; display: block; width: 100%}
.px-custom-file input[type='file'] {position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; opacity: 0; visibility: hidden}
.px-custom-file input[type='text'] {width: calc(100% - 7.125rem) !important}
.px-custom-file input[type='file'] ~ label {position: absolute; top: 0; right: 0; display: inline-block; font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: -0.04em; line-height: 53px; text-align: center; width: 6.625rem; height: 55px; margin-bottom: 0; border-radius: 8px; background-color: #353535; cursor: pointer}
.custom-file-label {margin-bottom: 0}
.custom-file-label::after {content: '���� ����'}

/* **********************************
 * membership
 * *********************************/
/* login */
.login-form {padding-top: 6.25rem; padding-bottom: 8.75rem}
.login-form .login-header {font-size: 1.375rem; font-weight: 700; color: #212529; letter-spacing: -0.04em; text-align: center}
.login-form .login-header-desc {font-size: 0.875rem; color: #343a40; letter-spacing: -0.04em; line-height: 1.7}
.login-form .form-tail-link {font-size: 0.9375rem; font-weight: 500; color: #868e96 !important; letter-spacing: -0.04em; padding: 0 !important; border: 0 !important; border-radius: 0}
.login-form .form-tail-link:hover {text-decoration: underline !important}
.login-form .form-sm + .form-sm {margin-top: 6.25rem}
.login-form .login-form-card {padding: 2.25rem; border: 1px solid #dee2e6; border-radius: 16px}
.login-form .guest-privacy-term {height: 10rem; padding: 1.75rem; font-size: 0.9375rem; color: #495057; letter-spacing: -0.03em; line-height: 1.6; border: 1px solid #dee2e6; border-radius: 12px; background-color: #f7f8fa; overflow-y: auto}
.login-form .order-info {margin-top: 2.25rem; padding: 1.75rem; border-radius: 0.75rem; background-color: #f7f7f7}
.login-form .order-info p {font-size: 14px; color: #495057; letter-spacing: -0.03em; line-height: 1.6}
.login-form .order-info p strong {font-weight: 700; color: #212529}
.login-form .login-warning {position: relative; padding: 1.75rem 1.75rem 1.75rem 5.75rem; border-radius: 0.375rem; background-color: #f7f7f7}
.login-form .login-warning i {position: absolute; top: 1.75rem; left: 1.75rem; font-size: 3.125rem; color: #ccc; line-height: 1}
.login-form .login-warning p {font-size: 0.9375rem; color: #888; line-height: 1.6}
.login-form .login-warning p strong {font-weight: 500; color: #000}

/* register */
.register-form {padding-top: 12.5rem; padding-bottom: 8.75rem}
.register-form .register-form-group {border: 1px solid #dee2e6; border-radius: 1rem; overflow: hidden}
.register-form .register-form-group .group-header {padding: 1.5rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(1rem - 1px); border-top-right-radius: calc(1rem - 1px)}
.register-form .register-form-group .group-header h2 {font-size: 1.1875rem; font-weight: 700; color: #343a40; letter-spacing: -0.04em}
.register-form .register-form-group .group-content {padding: 1.75rem 1.5rem}
.register-form .register-form-group .group-footer {padding: 1.5rem; border-top: 1px solid #dee2e6; border-bottom-left-radius: calc(1rem - 1px); border-bottom-right-radius: calc(1rem - 1px)}
.register-form .register-form-group + .register-form-group {margin-top: 2rem}
.register-agreement .register-form-group .group-content .table th, .register-agreement .register-form-group .group-content .table td {font-size: 13px; letter-spacing: -0.03em}
.register-agreement .register-form-group .group-content .table thead th {border-bottom-width: 1px}
.register-form .register-process-button {margin-top: 4rem}
.register-form .register-form-group .small-desc {font-size: 13px; font-weight: 500; color: #666; letter-spacing: -0.03em; line-height: 1.5}
.register-form .register-form-group .small-desc.desc-exclamation {position: relative; padding-left: 18px}
.register-form .register-form-group .small-desc.desc-exclamation .bi {position: absolute; left: 0}
.register-form .register-result-wrap h3 {font-size: 1.1875rem; font-weight: 700; color: #343a40; letter-spacing: -0.04em; line-height: 1.5; margin-bottom: 1.5rem}
.register-form .register-result-wrap h3 strong {position: relative; color: #5c4229; z-index: 5}
.register-form .register-result-wrap h3 strong::after {content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 0.5rem; background-color: #fab34a; opacity: .4; z-index: -1}
.register-form .register-result-wrap .result-info-list {padding: 1rem 1.75rem; border-radius: 1rem; background-color: #f8f9fa}
.register-form .register-result-wrap .result-info-list li {font-size: 0}
.register-form .register-result-wrap .result-info-list li + li {margin-top: 0.625rem}
.register-form .register-result-wrap .result-info-list li > b, .register-form .register-result-wrap .result-info-list li > p {display: inline-block; font-size: 0.9375rem; line-height: 1.6; vertical-align: top}
.register-form .register-result-wrap .result-info-list li > b {font-weight: 500; color: #495057; letter-spacing: -0.04em; width: 5rem}
.register-form .register-result-wrap .result-info-list li > p {font-weight: 700; color: #212529; width: calc(100% - 5rem)}
.register-form .register-result-wrap p {font-size: 0.9375rem; color: #666; letter-spacing: -0.04em; line-height: 1.68}
.register-form .register-result-wrap p + p {margin-top: 1.25rem}

/* **********************************
 * modals
 * *********************************/
.modal-backdrop {background-color: #000}
.modal-backdrop.show {opacity: .6}
.modal-content {border: 0; border-radius: 0}
.modal-header {padding: 3rem 2.75rem 1.75rem; border-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0}
.modal-title {font-size: 1.5rem; font-weight: 900; color: #1b1b1b; letter-spacing: -0.04em}
.modal-header .close {width: 3.5rem; height: 3.5rem; font-size: 1.5rem; color: #fff; margin: -0.625rem 0 auto; padding: 0; border-radius: 50%; background-color: #1c6aba; opacity: 1 !important; outline: 0}
.modal-body {padding: 1.75rem 3rem 3rem}
.modal-body .term-wrapper {padding:25px 30px; background-color:#f9f9f9}
.modal-body p {line-height: 1.6}
.modal-body .term-wrapper p {color: #666; letter-spacing: -0.5px; line-height: 1.8}
.modal-body .term-wrapper p + p {margin-top: 1rem}
.modal .modal-footer .button-footer-full {display: block; width: 100%; font-size: 1.0625rem; color: #333; margin: 0; padding: 1.375rem 1rem; border: 0; border-bottom-left-radius: calc(.3rem - 1px); border-bottom-right-radius: calc(.3rem - 1px); background-color: #fff; outline: 0 !important}
.modal .modal-footer .button-footer-full:hover {background-color: #f8f8f8}
.swal2-container {overflow-x: visible !important; overflow-y: auto !important}
.swal2-popup {padding: 0 !important; border-radius: 1rem !important; box-shadow: 0 2.5rem 5rem -1rem rgba(0,0,0,.16)}
.swal2-header {padding: 2.25rem 1.25rem 1rem}
.swal2-close {outline: 0 !important}
.swal2-close:hover {color: #5b5bcc !important}
.swal2-title {font-size: 1.3125rem !important; font-weight: 700; color: #2b2b2b !important; margin: 0 !important}
.swal2-content {font-size: 1rem !important; letter-spacing: -0.7px; line-height: 1.6; padding: 0 1.25rem !important}
.swal2-content .modal-textarea {display: block; width: 100%; height: auto; margin: 2.25rem 0; padding: 1.75rem; font-size: 14px; color: #868e96; line-height: 1.85; border: 1px solid #ced4da; border-radius: 3px; outline: 0}
.swal2-actions {margin: 2.125rem auto 0 !important; padding: 1.375rem 15px 1.5rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; background-color: #f8f9fa}
.swal2-styled.swal2-confirm {font-size: 0.9375rem !important; font-weight: normal; color: #fff; padding: 0.875rem 2.5rem; border-radius: 0.5rem !important; background-color: #212529 !important; box-shadow: 0 0.25rem 0.625rem 0 rgba(33,33,33,.4) !important}
.swal2-close {font-family: sans-serif !important; font-weight: 100}

/* **********************************
 * tooltips
 * *********************************/
.tooltip {font-family: inherit}
.tooltip.show {opacity: 1}
.tooltip-inner {font-size: 13px; color: #333; text-align: left; padding: 16px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0,0,0,.1)}
.tooltip-inner .process-tooltip-header {font-size: 15px; font-weight: 700; color: #343a40; letter-spacing: -0.03em; margin-bottom: 8px}
.tooltip .arrow::after {content: ''; position: absolute; border-color: transparent; border-style: solid}
.bs-tooltip-auto[x-placement^=top] .arrow, .bs-tooltip-top .arrow {bottom: 1px}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-top-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-width: 8px 8px 0 8px}
.bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-top .arrow::after {border-width: 8px 8px 0 8px; border-top-color: #fff}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-bottom-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-width: 0 8px 8px 8px}
.bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-bottom .arrow::after {border-width: 0 8px 8px 8px; border-bottom-color: #fff}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {border-width: 8px 8px 8px 0}
.bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-right .arrow::after {border-width: 8px 8px 8px 0; border-right-color: #fff}

.bs-tooltip-right .arrow::before {border-right-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-left-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-width: 8px 0 8px 8px}
.bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-left .arrow::after {border-width: 8px 0 8px 8px; border-left-color: #fff}

/* **********************************
 * animations
 * *********************************/
[data-aos=fade-up-medium] {transform:translate3d(0, 60px ,0)}
[data-aos=fade-down-medium] {transform:translate3d(0, -60px ,0)}
[data-aos=fade-left-medium] {transform:translate3d(60px, 0 ,0)}
[data-aos=fade-right-medium] {transform:translate3d(-60px, 0 ,0)}
[data-aos=fade-up-short] {transform:translate3d(0, 30px ,0)}
[data-aos=fade-down-short] {transform:translate3d(0, -30px ,0)}
[data-aos=fade-left-short] {transform:translate3d(30px, 0 ,0)}
[data-aos=fade-right-short] {transform:translate3d(-30px, 0 ,0)}

@keyframes fadeInUpShort {
    from {opacity: 0; transform: translate3d(0, 30px, 0)}
    to {opacity: 1; transform: translate3d(0, 0, 0)}
}

.fadeInUpShort {animation-name: fadeInUpShort}

@keyframes fadeInDownShort {
    from {opacity: 0; transform: translate3d(0, -30px, 0)}
    to {opacity: 1; transform: translate3d(0, 0, 0)}
}

.fadeInDownShort {animation-name: fadeInDownShort}

@keyframes fadeOutUpShort {
    from {opacity: 1; transform: translate3d(0, 0, 0)}
    to {opacity: 0; transform: translate3d(0, -30px, 0)}
}

.fadeOutUpShort {animation-name: fadeOutUpShort}

@keyframes fadeOutDownShort {
    from {opacity: 1; transform: translate3d(0, 0, 0)}
    to {opacity: 0; transform: translate3d(0, 30px, 0)}
}

.fadeOutDownShort {animation-name: fadeOutDownShort}

.animate-line {display: block; overflow: hidden}
.animate-line span {display: block; transform: translate(0,100%); transition: transform .9s cubic-bezier(.17,1.02,.53,.98)}
.animate-line.animated span {transform: translate(0,0)}



/* **********************************
 * media queries
 * *********************************/
@media (min-width: 992px) {
    /* .main-section.news .col-tour-items {width: 56%}
    .main-section.news .col-news-articles {width: 44%} */
    /* #cmo .col-list-items {-ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%} */
    /* #cmo .col-swiper-items {-ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%} */
}

@media (max-width: 1512px) {
    .main-section.news .col-news-articles .article-wrapper {padding-left: 60px}
}

@media (max-width: 1480px) {
    .main-section.news .col-news-articles .news-content > ul > li {padding: 14px 0}
    .main-section.cdmo .cdmo-swiper .swiper-slide {width: 500px; height: 300px}
}

@media (max-width: 1024px) {
    #main section {padding-left: 0 !important; padding-right: 0 !important}
}

@media (max-width: 991px) {
    .hero .intro .content h2 {font-size: 52px}
    .hero .hero-swiper .swiper-slide .caption-inner h2 {font-size: 96px}
    .hero .hero-swiper .swiper-slide .caption-inner h2.intro-text {font-size: 52px}

    .main-section {padding-top: 100px; padding-bottom: 100px}
    .main-section .section-header h2 {font-size: 38px}

    .main-section.service .rotating-text {top: -160px; left: -640px; width: 1280px; height: 1280px}
    .main-section.service .col-service-item figure figcaption {bottom: 28px; left: 28px}
    .main-section.service .col-service-item figure figcaption h5 {font-size: 27px}
    .main-section.service .col-service-item a:hover figure figcaption h5::after {width: 280px}
    .main-section.service .col-service-item figure figcaption p {font-size: 16px; max-width: 280px} 

    .main-section.news .col-news-articles .article-wrapper {padding: 48px 32px 56px}
    .main-section.news .col-news-articles .news-header .col-title h3 {font-size: 24px}
    .main-section.news .col-news-articles .news-header .col-button .button-detail {font-size: 14px; height: 42px; padding: 0 20px}
    .main-section.news .col-news-articles .news-content > ul > li > p, .main-section.news .col-news-articles .news-content > ul > li > .date {font-size: 16px}
    .main-section.news .col-news-articles .news-content > ul > li > p a {font-size: 16px}

    .main-section.cdmo {padding-bottom: 48px}
    .main-section.cdmo .cdmo-swiper .swiper-slide {width: 420px; height: 280px}
    .main-section.cdmo .cdmo-swiper .swiper-slide a {height: 220px}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text {padding: 28px}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text h4 {font-size: 24px; transform: translateY(136px)}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text .info-list {padding: 24px}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-bg img {margin-top: -24px}

    .main-section.people .people-content .col-people-item:nth-child(2n) {margin-top: 80px}
    .main-section.people .people-content .col-people-item h4 {font-size: 22px}
    .main-section.people .people-content .col-people-item p {font-size: 17px}
    .main-section.people .people-content .col-people-item p .team {margin-right: 12px; padding: 5px 10px}

    .product-section .type-a-row .col-photo figure {height:auto}

    /* #cmo .col-list-items .header {position: relative; margin-bottom: 48px; z-index: 10} */
    #cmo {padding-top: 80px; padding-bottom: 0px}
    #cmo .col-list-items .header p {font-size: 16px}
    #cmo .col-list-items .header h2 span {font-size: 38px}
    #cmo .col-list-items .header h2 span:last-child {margin-left: 12px}
    #cmo .col-list-items .swiper-controller {white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch}
    #cmo .col-list-items .swiper-controller::-webkit-scrollbar {height: 6px}
    #cmo .col-list-items .swiper-controller::-webkit-scrollbar-thumb {border-radius: 2px}
    #cmo .col-list-items .swiper-controller::-webkit-scrollbar-track {border-radius: 2px; box-shadow: inset 0px 0px 2px white}
    #cmo .col-list-items .swiper-controller > a {display: inline-flex; width: auto; height: 48px; margin-right: 8px; border-bottom: 0}
    #cmo .col-list-items .swiper-controller > a::before {right: 0; box-shadow: none}
    #cmo .col-list-items .swiper-controller > a span {display: none}
    #cmo .col-list-items .swiper-controller > a p {font-size: 15px}
    #cmo .col-swiper-items {padding-top: 28px}
    #cmo .col-swiper-items .cmo-swiper .slide-grid {position: relative}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-img {width: 100%}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text {position: absolute; bottom: 12px; left: 36px; right: 36px; width: auto; padding: 20px; border-radius: 4px; background-color: rgba(0,0,0,.6); z-index: 10}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text h3 {font-weight: 700; color: #fff}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text li {color:#fff}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text p {color: rgba(255,255,255,.7)}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text .button-link {color: #fff; border-color: rgba(255,255,255,.75); border-radius: 4px}
}

@media (max-width: 767px) {
    .login-form {padding-top: 3.75rem; padding-bottom: 5rem}
    .register-form {padding-top: 7.5rem; padding-bottom: 5rem}

    .hero .intro .content h2 {font-size: 36px}
    .hero .hero-swiper .swiper-slide .caption-inner h2 {font-size: 64px}
    .hero .hero-swiper .swiper-slide .caption-inner h2.intro-text {font-size: 36px}
    .hero .hero-swiper .swiper-slide .caption-inner p {font-size: 16px; padding-right: 28px}
    .hero .hero-swiper .swiper-pagination {bottom: 32px}
    .hero .hero-swiper .swiper-pagination-bullet {width: 70px; margin: 0 6px}

    .main-section {padding-top: 64px; padding-bottom: 64px}
    .main-section .section-header {margin-bottom: 56px}
    .main-section .section-header h2 {font-size: 28px}

    .main-section.service .rotating-text {top: -60px; left: -390px; width: 780px; height: 780px}
    .main-section.service .col-service-item figure figcaption {bottom: 24px; left: 24px}
    .main-section.service .col-service-item figure figcaption h5 {font-size: 22px}
    .main-section.service .col-service-item figure figcaption h5::after {width: 30px; margin-top: 12px; margin-bottom: 20px}
    .main-section.service .col-service-item a:hover figure figcaption h5::after {width: 220px}
    .main-section.service .col-service-item figure figcaption p {font-size: 14px; max-width: 90%}
    .main-section.service .col-service-item figure figcaption .icon {font-size: 20px; margin-top: 16px}

    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption {top: 28px; left: 28px}
    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption h4 {font-size: 21px}
    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption h4::after {width: 70px; margin-top: 16px; margin-bottom: 20px}
    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption p {font-size: 15px}
    .main-section.news .col-tour-items .tour-swiper .swiper-pagination {padding-left: 28px; padding-right: 28px; bottom: 28px}
    .main-section.news .col-news-articles .article-wrapper {padding: 36px 28px 40px}
    .main-section.news .col-news-articles .news-header {padding-bottom: 16px}
    .main-section.news .col-news-articles .news-header .col-title h3 {font-size: 21px}
    .main-section.news .col-news-articles .news-header .col-button .button-detail {height: 38px}
    .main-section.news .col-news-articles .news-content > ul > li > p, .main-section.news .col-news-articles .news-content > ul > li > .date {font-size: 14px}
    .main-section.news .col-news-articles .news-content > ul > li > p {width: calc(100% - 90px)}
    .main-section.news .col-news-articles .news-content > ul > li > p a {font-size: 14px}
    .main-section.news .col-news-articles .news-content > ul > li > .date {width: 90px}

    .main-section.cdmo {padding-bottom: 24px}
    .main-section.cdmo .cdmo-swiper {padding-top: 48px; padding-bottom: 48px}
    .main-section.cdmo .cdmo-swiper .swiper-slide {width: 280px; height: 180px}
    .main-section.cdmo .cdmo-swiper .swiper-slide a {height: 180px}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text {padding: 20px}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text h4 {font-size: 21px; transform: translateY(86px)}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text .info-list {padding: 20px}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-text .info-list li {font-size: 10px; line-height: 1.5}
    .main-section.cdmo .cdmo-swiper .swiper-slide .slide-bg img {margin-top: 0}

    .main-section.people .people-content .col-people-item figure {margin-bottom: 16px}
    .main-section.people .people-content .col-people-item h4 {font-size: 19px}
    .main-section.people .people-content .col-people-item p {font-size: 15px}
    .main-section.people .people-content .col-people-item p .team {font-size: 90%; margin-right: 0}
    .main-section.people .people-content .col-people-item p span:last-child {display: block; margin-top: 6px}

    #cmo .col-list-items .header {margin-bottom: 28px}
    #cmo .col-list-items .header p {position: relative; display: inline-block; font-size: 14px; z-index: 5}
    #cmo .col-list-items .header p::before {content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 6px; background-color: #d5c6be; opacity: .4; z-index: -1}
    #cmo .col-list-items .header h2 span {font-size: 28px}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text h3 {font-size: 18px; margin-bottom: 12px}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text p {font-size: 14px}
    #cmo .col-swiper-items .cmo-swiper .slide-grid .grid-text .button-link {position: absolute; bottom: 12px; right: 16px; font-size: 17px; margin-top: 0; padding: 4px; border: 0; border-radius: 0}
}

@media (max-width:575px) {
    .hero .intro .content h2 {font-size: 32px}
    .hero .hero-swiper .swiper-slide .caption-inner h2 {font-size: 60px}
    .hero .hero-swiper .swiper-slide .caption-inner h2.intro-text {font-size: 32px}
    
    .main-section.service .rotating-text {left: -280px; width: 560px; height: 560px}
    .main-section.service .rotating-text text {font-size: 12px}
    .main-section.service .col-service-item:nth-child(2) {margin-top: 0}
    .main-section.service .col-service-item + .col-service-item {margin-top: 24px}
    .main-section.service .col-service-item figure figcaption {transform: translateY(106px)}

    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption {top: 24px; left: 24px}
    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption h4::after {margin-top: 12px; margin-bottom: 16px}
    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption .view-more {font-size: 14px; margin-top: 12px}
    .main-section.news .col-tour-items .tour-swiper .swiper-slide figure figcaption .view-more::after {transform: translateX(-72px)}
    .main-section.news .col-tour-items .tour-swiper .swiper-pagination {bottom: 16px; padding-left: 24px; padding-right: 24px}
    /* .main-section.people .people-content .col-people-item:nth-child(2n) {margin-top: 0} */
    /* .main-section.people .people-content .col-people-item + .col-people-item {margin-top: 40px} */

    #footer .corp_info .admin-button {position: static; top: auto; right: auto; margin-top: 32px}

    .list-common-top .col-search .selectric-wrapper {width:7rem; margin-right:0.5rem}
    .article-list .list-common-top .col-search .search-box {width:calc(100% - 7.5rem)}

    .cell-status {margin-bottom: 0.375rem}
    .article-list .table-solid {display: block}
    .article-list .table-solid thead {display: none}
    .article-list .table-solid tbody, .article-list .table-solid tr, .article-list .table-solid td {display: block; width: 100%; text-align: left !important}
    .article-list .table-solid tr {padding: 1rem 0; border-bottom: 1px solid #eaeaea}
    .article-list .table-solid td {padding: 0 15px; border-bottom: 0}
    .article-list .cell-num {padding-bottom: 0.75rem !important}
    .article-list .cell-title {padding-left: 0; padding-bottom: 0.625rem !important}
    .article-list .cell-writer, .article-list .cell-date, .article-list .cell-read {font-size: 0.875rem; color: #666; padding-bottom: 2px !important}
    .article-view .view-container .tail .article-control li b {width: 5.625rem; padding-left: 1.5rem}
    .article-view .view-container .tail .article-control li b::after {display: none}
    .article-view .view-container .tail .article-control li a {width: calc(100% - 5.625rem); padding-right: 1.5rem}

    .modal-header {padding: 2rem 1.75rem 1.5rem; border-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0}
    .modal-title {font-size: 1.25rem; font-weight: 900; color: #1b1b1b; letter-spacing: -0.04em}
    .modal-header .close {width: 2.625rem; height: 2.625rem; font-size: 1.3125rem; color: #fff; margin: -0.5rem 0 auto; padding: 0; border-radius: 50%; background-color: #1c6aba; opacity: 1 !important; outline: 0}
    .modal-body {padding: 1.5rem 2rem 2rem}
	#cmo .col-list-items .header h2 span:last-child{font-size:25px;}
}