@import url('font.css');

:root {
    --default-normal: #005dab;
    --default-light: #aed6ff;
    --manufacture-normal: #00abab;
    --manufacture-light: #32fafa;
    --gmp-normal: #ffa700;
    --gmp-light: #ffd482;
    --mr-normal: #2d689e;
    --mr-light: #abd0f2;
    --marketing-normal: #8420e2;
    --marketing-light: #cfa4ff;
    --etc-normal: #f13183;
    --etc-light: #ffa4cb;
}

html {
    font-size: 14px;
    scroll-padding-top: 100px;
}
body {
    font-family: 'notokr', sans-serif;
    color: #333;
    overflow-x: hidden;
    letter-spacing: -.05em;
    box-sizing: border-box;
    line-height: 1.5;
    word-break: keep-all;
}

a {
    color: #333;
}
a:hover {
    color: #005dab;
    text-decoration: none;
}
a.default, .default a { color: #005dab;}
a.manufacture, .manufacture a { color: #00abab;}
a.gmpedu, .gmpedu a { color: #ffa700;}
a.mr, .mr a { color: #2d689e;}
a.marketing, .marketing a { color: #8420e2;}
a.etc, .etc a { color: #f13183;}


/*header*/

header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px #e1e1e1 solid;
    background-color: #fff;
    z-index: 99;
    transition: all .3s;
    font-size: 1.28rem;
}

body.scrolled header {
    padding: 5px 0;
}

.header-search input[type="search"] {
    outline: none;
    font-size: .9em;
    border: 2px #aaa solid;
    width: 100%;
    transition: all .3s;
    background-color: #fafafa;
    border-radius: 99rem;
    font-weight: 700;
    color: #005dab;
    padding: .1em 1em .1em 2em;
    position: relative;
}

.header-search input[type="search"] ~ i {
    position: absolute;
    left: 2rem;
    top: .6em;
    color: #aaa;
    font-size: 14px;
    transition: all .3s;
}

.header-search input[type="search"]:focus, .header-search input[type="search"]:active {
    border-color: #005dab;
    background-color: #fff;
}

.header-search input[type="search"]:focus ~ i, .header-search input[type="search"]:active ~ i {
    color: #005dab;
}

.header-btn {
    display: inline-block;
    font-size: .9em;
    font-weight: 700;
    color: #fff;
    background-color: #698196;
    padding: .1em 1em;
    border-radius: 99em;
    transition: all .3s;
}

.header-btn:hover {
    background-color: #005dab;
    color: #fff;
}

.header-btn:not(:last-child) {
    margin-right: 1em;
}

.header-btn.gradient {
    background: linear-gradient(
-45deg
, #0062cc, #0062cc, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: btngradient 15s ease infinite;
}

/*nav*/

nav {
    position: fixed;
    top: 65px;
    width: 100%;
    background-color: #fff;
    z-index: 98;
    border-bottom: 1px #e1e1e1 solid;
    transition: all .3s;
    font-size: 1.28rem;
}

body.scrolled nav {
    top: 55px;
    box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);
}

ul.top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

ul.top-menu li a {
    display: block;
    padding: 4px 16px 3px;
    margin: 8px 0;
    border-radius: 100px;
    color: #333;
    font-weight: 700;
    transition: all .3s;
}

body.scrolled nav ul.top-menu li a {
    padding: 6px 16px 4px;
}

ul.top-menu li.default a:hover,
ul.top-menu li.default a.active { color: #fff; background:#005dab;}
ul.top-menu li.manufacture a:hover,
ul.top-menu li.manufacture a.active { color: #fff; background:#00abab;}
ul.top-menu li.gmpedu a:hover,
ul.top-menu li.gmpedu a.active { color: #fff; background:#ffa700;}
ul.top-menu li.mr a:hover,
ul.top-menu li.mr a.active { color: #fff; background:#2d689e;}
ul.top-menu li.marketing a:hover,
ul.top-menu li.marketing a.active { color: #fff; background:#8420e2;}
ul.top-menu li.etc a:hover,
ul.top-menu li.etc a.active { color: #fff; background:#f13183;}

/*main*/
main.main-page {
    padding-top: 117px;
}

.main-title {
    background-image: url('../img/main-background-01.jpg');
    background-position: 0px 0px;
    background-size: cover;
    height: 700px;
    padding-top: 180px;
    position: relative;
}

.main-title h1 {
    color: #fff;
    font-size: 3.33rem;
    font-weight: 700;
}

.main-title h1 small {
    color: #00e1ff;
    font-size: 1.33rem;
    font-weight: 700;
}

.main-title h1 ~ p {
    color: #fff;
    margin: 0;
}

.check-result-link {
    text-align: center;
    background: linear-gradient(-45deg, #0062cc, #0062cc, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: btngradient 15s ease infinite;
    border-radius: 99em;
    border: 2px #fff solid;
}

@keyframes btngradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.check-result-link a {
    display: block;
    padding: 1.5em 2em;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
}

.main-schedule {
    position: relative;
    width: 100%;
    /* margin-top: -300px; */
    margin-top: -540px;
    padding-bottom: 27px;
}

.main-schedule-box {
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 15px 30px 0 rgba(0,0,0,.3);
}

.main-schedule-left, 
.main-schedule-right {
    padding-top: 30px;
    padding-bottom: 30px;
}

.main-schedule-left {
    background-color: #fff;
}

.main-schedule-right {
    background-color: #005dab;
    padding-right: 30px;
    padding-left: 20px;
    font-size: 1.28rem;
}

.main-schedule-right .title {
    color: #fff;
    font-weight: 700;
    font-size: 1.333em;
    margin-bottom: 1em;
}

.main-schedule-right ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-schedule-right .categories-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: .25em .5em;
    background-color: #fff;
    margin-bottom: 1em;
    font-weight: 700;
    border-radius: 99em;
    color: #005dab;
}

.main-schedule-right ul li a.categories-toggle {
    display: block;
    max-width: 240px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: .5em;
    /* margin-bottom: 1em; */
    font-weight: 700;
    color: #005dab;
    letter-spacing: -.05em;
}

.main-schedule-right ul li a.categories-toggle::before {
    content: '';
    display: block;
    position: absolute;
    width: .6em;
    height: .6em;
    background-color: #ccc;
    border-radius: 99em;
    left: 0;
    top: 0;
    border: 2px #fff solid;
}

.main-schedule-right ul li a.categories-link {
    font-size: .8em;
    padding: 0 .5em;
    background-color: #aaa;
    border-radius: 99em;
    color: #fff;
}

.main-schedule-right ul li.manufacture a.categories-toggle {color: #00abab;}
.main-schedule-right ul li.gmpedu a.categories-toggle { color: #ffa700;}
.main-schedule-right ul li.mr a.categories-toggle { color: #2d689e;}
.main-schedule-right ul li.marketing a.categories-toggle { color: #8420e2;}
.main-schedule-right ul li.etc a.categories-toggle { color: #f13183;}
.main-schedule-right ul li.manufacture a.categories-toggle.active::before { background-color: #00abab;}
.main-schedule-right ul li.gmpedu a.categories-toggle.active::before { background-color: #ffa700;}
.main-schedule-right ul li.mr a.categories-toggle.active::before { background-color: #2d689e;}
.main-schedule-right ul li.marketing a.categories-toggle.active::before { background-color: #8420e2;}
.main-schedule-right ul li.etc a.categories-toggle.active::before { background-color: #f13183;}
.main-schedule-right ul li.manufacture a.categories-link { background-color: #00abab;}
.main-schedule-right ul li.gmpedu a.categories-link { background-color: #ffa700;}
.main-schedule-right ul li.mr a.categories-link { background-color: #2d689e;}
.main-schedule-right ul li.marketing a.categories-link { background-color: #8420e2;}
.main-schedule-right ul li.etc a.categories-link { background-color: #f13183;}

.main-schedule-right .desctiption {
    font-size: 1rem;
    color: #fff;
}

.main-schedule-right .desctiption a {
    font-weight: 700;
    color: #fff;
    border-bottom: 1px #fff dashed;
}

.main-schedule-right .desctiption a:hover {
    color: #0ff;
    border-color: #0ff;
}

.main-info {
    position: relative;
    padding: 50px 0;
    background-color: #fafafa;
}

.main-info-board-title,
.main-info-board-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-info-board-title {
    color: #333;
    font-weight: 700;
}

.main-info-board-content {
    color: #aaa;
    font-size: 0.778rem;
}

.main-info-board ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-info-board ul li {
    padding: 1em;
    cursor: pointer;
    transition: all .3s;
    border-bottom: 1px #e1e1e1 dashed;
}

.main-info-board ul li:hover {
    background-color: #fff;
}

.main-info-board-badge {
    text-align: center;
    border-radius: 99rem;
    color: #fff;
    font-weight: 700;
    font-size: .667rem;
    padding: .25em 1em;
}

.main-info-board h2 {
    font-weight: 700;
    font-size: 1.333rem;
    border-bottom: 1px #e1e1e1 solid;
    padding: 0 0 1em;
    margin-bottom: 0;
}

.main-info-board h2 i {
    margin-right: .5em;
    color: #666;
}


.main-sponsor {
    position: relative;
    border-top: 1px #e1e1e1 solid;
}

.main-info-banner {
    display: block;
    background-color: #666;
    color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-info-banner {
    background-position: 25% center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
}

.main-info-banner.manufacture {
    background-image: url('/assets/img/sub-introduce-manufacture.png');
}
.main-info-banner.gmpedu {
    background-image: url('/assets/img/sub-introduce-gmp.png');
}
.main-info-banner.mr {
    background-image: url('/assets/img/sub-introduce-mr.png');
}
.main-info-banner.marketing {
    background-image: url('/assets/img/sub-introduce-marketing.png');
}

.main-info-banner.lecturer {
    background-image: url('/assets/img/lecturer-banner.png');
}

.main-info-banner h2 {
    color: #fff;
    margin: 0;
}

.main-info-banner .admin {
    flex-basis: 280px;
    text-align: right;
    padding-right: 15px;
}

.main-info-banner .admin label {
    margin: 0;
    margin-right: .5em;
}

.main-info-banner .customer {
    width: 100%;
}

.main-info-banner .customer a {
    display: block;
    width: 100%;
    padding: 20px 15px;
}

.main-info-banner.default { background-color: #005dab;}
.main-info-banner.manufacture { background-color: #00abab;}
.main-info-banner.gmpedu { background-color: #ffa700;}
.main-info-banner.mr { background-color: #2d689e;}
.main-info-banner.marketing { background-color: #8420e2;}
.main-info-banner.etc { background-color: #f13183;}

.main-info-banner:not(:last-child) {
    margin-bottom: 1em;
}

.main-info-banner h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.main-info-banner h3 {
    font-size: 1rem;
    font-weight: 700;
}

.main-info-banner h4 {
    font-size: 1rem;
}

.main-info-banner h5 {
    font-size: 0.778rem;
}

.main-info-banner h6 {
    font-size: 0.667rem;
}

.banner-name-list {
    display: none;
    position: absolute;
    background-color: #fafafa;
    color: #333;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
    padding: 1em;
    z-index: 1;
    border-radius: 10px;
    margin-top: .5em;
}

.banner-name-list.on {
    display: block;
}

.banner-name-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.banner-name-list ul li {
    cursor: pointer;
}

.banner-name-list ul li:hover {
    color: #005dab;
}

.banner-name-picker {
    display: inline-block;
    margin-right: 1em;
    cursor: pointer;
}




/*renew main*/
.main-header {
    background: #f0f0f0;
    /* height: 570px; */
    position: relative;
    overflow: hidden;
}


.main-header-background {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.main-header-background-a {
    position: relative;
    width: 590px;
    height: 612px;
}

.main-header-background-b {
    position: relative;
    width: 478px;
    height: 556px;
}

.main-header-background-a::before,
.main-header-background-b::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 1s ease;
}


.main-header-background-a::before {
    background-image: url(/assets/img/main-header-background-a00.png);
    left: -80px;
}

.main-header-background-b::before {
    background-image: url(/assets/img/main-header-background-b00.png);
    left: 80px;
}

.main-header-background-particle {
    position: absolute;
    animation: mainheaderbgp 180s linear infinite;
    transform-origin: center;
}

@keyframes mainheaderbgp {
    from {
        transform: rotate(360deg);
    }
}

.main-header-background-a .main-header-background-particle:nth-of-type(1) {
    background-image: url('/assets/img/main-header-background-a01.png');
    width: 242px;
    height: 242px;
    top: 280px;
    left: 80px;
}

.main-header-background-a .main-header-background-particle:nth-of-type(2) {
    background-image: url('/assets/img/main-header-background-a02.png');
    width: 131px;
    height: 131px;
    top: 440px;
    left: -65px;
}

.main-header-background-a .main-header-background-particle:nth-of-type(3) {
    background-image: url('/assets/img/main-header-background-a03.png');
    width: 95px;
    height: 95px;
    top: 180px;
    left: -30px;
}

.main-header-background-a .main-header-background-particle:nth-of-type(4) {
    background-image: url('/assets/img/main-header-background-a04.png');
    width: 62px;
    height: 62px;
    top: 40px;
    left: 240px;
}

.main-header-background-a .main-header-background-particle:nth-of-type(5) {
    background-image: url('/assets/img/main-header-background-a05.png');
    width: 40px;
    height: 36px;
    top: 200px;
    left: 210px;
}

.main-header-background-b .main-header-background-particle:nth-of-type(1) {
    background-image: url('/assets/img/main-header-background-b01.png');
    width: 170px;
    height: 190px;
    top: 30px;
    left: 310px;
}

.main-header-background-b .main-header-background-particle:nth-of-type(2) {
    background-image: url('/assets/img/main-header-background-b02.png');
    width: 131px;
    height: 131px;
    left: 400px;
    top: 260px;
}

.main-header-background-b .main-header-background-particle:nth-of-type(3) {
    background-image: url('/assets/img/main-header-background-b03.png');
    width: 108px;
    height: 105px;
    top: 300px;
    left: 160px;
}

.main-header-background-b .main-header-background-particle:nth-of-type(4) {
    background-image: url('/assets/img/main-header-background-b04.png');
    width: 35px;
    height: 40px;
    top: 220px;
    left: 270px;
}

.main-header-background-b .main-header-background-particle:nth-of-type(5) {
    background-image: url('/assets/img/main-header-background-b05.png');
    width: 21px;
    height: 21px;
    top: 20px;
    left: 160px;
}


.main-header-content {
    /* height: 450px; */
    margin: 60px 0;
}


.bn-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
    cursor: pointer;
}

.bn-content {
    height: 100%;
    background: #333;
    color: #fff;
    border-radius: 15px;
    overflow: hidden;
}

.bn-item_wrap {
    display: flex;
    /* width: 785px; */
    height: 450px;
    margin: 0;
    padding: 44px 40px;
    align-items: center;
    box-sizing: border-box;
    word-break: keep-all;
    line-height: 1.5;
}

.bn-item h2 {
    font-size: 36px;
    font-weight: 900;
}

.bn-item p {
    font-weight: 400;
    font-size: 18px;
}

.bn-item_wrap.bn-bgcolor_1 {background-color: #0062cc;}
.bn-item_wrap.bn-bgcolor_2 {background-color: #2007af;}
.bn-item_wrap.bn-bgcolor_3 {background-color: #810bff;}
.bn-item_wrap.bn-bgcolor_4 {background-color: #0096af;}
.bn-item_wrap.bn-bgcolor_5 {background-color: #00b354;}

.bn-item_wrap.bn-bgimg_1 { background-image: url('/assets/img/bn-background-01.png');}
.bn-item_wrap.bn-bgimg_2 { background-image: url('/assets/img/bn-background-02.png');}

.bn-navigation {
    position: absolute;
    left: 40px;
    bottom: 20px;
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    transition: all .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bn-navigation.main-banner-closed {
    bottom: 40px;
}

.bn-navigation > button {
    /* float: right; */
}

.bn-navigation .pause, .bn-navigation .play {
    border: 0;
    padding: 0;
    color: #fff;
    background: none;
    outline: none;
    min-width: 0px;
    line-height: 0;
    border-radius: 0;
}
.bn-navigation .play {
	display: none;
}

.bn-navigation .slick-dots {
    margin: 0;
    margin-right: 6px;
    padding: 0;
}

.bn-navigation .slick-dots li {
    display: block;
    float: left;
}

.bn-navigation .slick-dots li button {
    display: block;
    background-color: #aaa;
    font-size: 0px;
    padding: 0;
    margin-right: 10px;
    width: 12px;
    min-width: 0;
    height: 12px;
    border-radius: 6px;
    border: none;
    color: transparent;
    outline: none;
    transition: all .3s ease;
}

.bn-navigation .slick-dots li.slick-active button {
    position: relative;
    background-color: #aaa;
    width: 44px;
    overflow: hidden;
}
.bn-navigation .slick-dots li.slick-active button::after {content: '';position: absolute;display: block;background-color: #fff;width: 100%;height: 12px;border-radius: 6px;top: 0;left: 0;
    animation: mainRollingSlickDots 5500ms linear;
}
.bn-navigation .slick-dots li.slick-active.pause button::after {
    animation: none;
}
@keyframes mainRollingSlickDots {
    0% { 
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.bn-information {
    position: absolute;
    color: #fff;
    font-size: 12px;
    bottom: 20px;
    right: 40px;
}

.quick-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.quick-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    width: calc( 50% - 5px );
    background-color: #fff;
    margin-top: 10px;
    border-radius: 15px 15px 0 15px;
    box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
    padding: 15px;
    color: #333!important;
    cursor: pointer;
    transition: all .5s ease;
    z-index: 1;
}

.quick-btn:nth-of-type(2n-1) {
    margin-right: 10px;
}

.quick-btn:nth-of-type(1), .quick-btn:nth-of-type(2) {
    margin-top: 0;
}

.quick-btn small {
    display: block;
    text-align: right;
    
}

.quick-btn strong {
    display: block;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: -1.5px;
    
}

.quick-btn strong span {
    font-weight: 400;
}

.quick-btn::after {
    content: '';
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    background-color: #ccc;
    top: 100%;
    left: 100%;
    z-index: -1;
    transition: inherit;
}

.quick-btn.default::after {
    background-color: var(--default-normal);
}

.quick-btn.manufacture::after {
    background-color: var(--manufacture-normal);
}

.quick-btn.gmp::after {
    background-color: var(--gmp-normal);
}

.quick-btn.mr::after {
    background-color: var(--mr-normal);
}

.quick-btn.marketing::after {
    background-color: var(--marketing-normal);
}

.quick-btn.etc::after {
    background-color: var(--etc-normal);
}


.quick-btn:hover {
    box-shadow: none;
    color: #fff!important;
}

.quick-btn:hover::after {
    top: -110px;
    left: -40px;
}

.quick-btn.disable {
    background-color: #f0f0f0;
    color: #999!important;
    box-shadow: 0 8px 15px 0 rgba(0,0,0,.1);
    cursor: default;
}

.quick-btn.disable::after {
    display: none;
}


.main-info-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.main-info-btn {
    width: 100%;
    background-color: #aaa;
    margin-top: 15px;
    border-radius: 15px;
    overflow: hidden;
    min-height: 44px;
}

.main-info-btn:first-child {
    margin-top: 0;
}

.main-info-btn.link a {
    width: 100%;
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.main-info-btn.link a i {
    margin-left: 15px;
}

.main-info-download-popup {display: none;position: absolute;background: #fff;margin-bottom: 70px;padding: 15px;border-radius: 15px;box-shadow: 0 8px 15px 0 rgba(0,0,0,.3);bottom: 30px;}

.main-info-btn.down {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #333;
    position: relative;
    overflow: visible;
}

.main-info-btn.down p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.main-info-btn.down p i {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 44px;
    background: #666;
    margin-right: 5px;
}

.main-info-download-popup::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 20px solid #fff;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    left: 50%;
    margin-left: -15px;
    top: 100%;
}

.main-info-download-popup a {
    display: block;
    text-align: center;
    padding: 4px 8px;
    font-weight: 700;
}

.main-info-btn.down p.on {
    color: #fdc01e;
}

.main-info-btn.down p.on + .main-info-download-popup {
    display: block;
}

.main-info-btn.link {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.3);
    position: relative;
    z-index: 0;
}

.main-info-btn.link:nth-of-type(1) {
    background: #332c94;
}

.main-info-btn.link:nth-of-type(2) {
    background: #09a094
}

.main-info-btn.link::before {
    content: '';
    position: absolute;
    display: block;
    width: 400px;
    height: 400px;
    border-radius: 400px;
    background: #aaa;
    z-index: -1;
    left: 100%;
    top: 0;
    transition: all 1s ease-in;
}

.main-info-btn.link:hover::before {
    left: -5%;
    top: -150px;
    width: 110%;
}

.main-info-btn.link:nth-of-type(1)::before {
    background: #221b82;
}
.main-info-btn.link:nth-of-type(2)::before {
    background: #008379;
}

.main-info-btn.link::after {
    content: '';
    position: absolute;
    display: block;
    width: 230px;
    height: 160px;
    right: 0;
    top: -40%;
    animation: maininfobtnlink 3s ease;
    pointer-events: none;
}

@keyframes maininfobtnlink {
    0% {
        top: -20%;
    }
    50% {
        top: -50%;
    }
    100% {
        top: -40%;
    }
}

.main-info-btn.link:nth-of-type(1)::after {
    background-image: url('/assets/img/info-background-01.png');
}
        
.main-info-btn.link:nth-of-type(2)::after {
    background-image: url('/assets/img/info-background-02.png');
}



/*sub*/
/*layout*/
main.sub-page {
    /* background-color: #fafafa; */
}

.sub-title {
    position: relative;
    height: 180px;
    padding-top: 130px;
}

.sub-title h1 {
    font-weight: 700;
    color: #fff;
    font-size: 1.5rem;
}


.sub-title-background {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #005dab;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.sub-title-background-cube {
    position: absolute;
    top: 80%;
    left: 45%;
    width: 10px;
    height: 10px;
    border: solid 2px rgba(0,0,0,.2);
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: bgcube 12s ease-in forwards infinite;
}
.sub-title-background-cube:nth-child(2n) {
    border-color: rgba(255,255,255,.2);
}
.sub-title-background-cube:nth-child(2) {
    animation-delay: 2s;
    left: 25%;
    top: 40%;
}
.sub-title-background-cube:nth-child(3) {
    animation-delay: 4s;
    left: 75%;
    top: 50%;
}
.sub-title-background-cube:nth-child(4) {
    animation-delay: 6s;
    left: 90%;
    top: 10%;
}
.sub-title-background-cube:nth-child(5) {
    animation-delay: 8s;
    left: 10%;
    top: 85%;
}
.sub-title-background-cube:nth-child(6) {
    animation-delay: 10s;
    left: 50%;
    top: 10%;
}


.sub-sidemenu {
    background-color: #fafafa;
    padding: 1rem 0;
    /* transition: all .3s; */
    font-size: 1.125rem;
}

.sub-sidemenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-sidemenu .dep1 {
    display: flex;
    position: relative;
}
.sub-sidemenu .dep1 > li {
    margin-right: 1em;
}

.sub-sidemenu .dep1 > li.acc.on {
    padding-bottom: 3rem;
    /* transition: all .3s; */
}
.sub-sidemenu .dep2 {
    display: none;
    position: absolute;
    left: 0;
    margin-top: .75em;
    font-size: 14px;
    /* border-top: 1px #e1e1e1 dashed; */
}

.sub-sidemenu .dep2::before {content: '▶';color: #ccc;margin-right: 1em;line-height: 2;}

.sub-sidemenu .acc.on > .dep2 {
    display: flex;
}

/* .sub-sidemenu ul.dep1 > li:first-child > .dep2 {
    transform: none;
} */

.sub-sidemenu .dep2 > li {
    margin-right: .5em;
}

.sub-sidemenu a {
    display: block;
    padding: .25em 1.5em;
    background-color: #fff;
    border-radius: .5em;
    border: 1px #f0f0f0 solid;
    color: #333;
}

.sub-sidemenu a:hover {
    color: #005dab;
}

.sub-sidemenu a.active, .sub-sidemenu .acc.on > a {
    background-color: #005dab;
    color: #fff;
    /* border-color: #005dab; */
    cursor: default;
}

.sub-sidemenu .dep2 a {
    font-weight: 700;
    color: #666;
}

main.sub-page.default .sub-sidemenu .dep1 > li > a { border-color: #005dab;}
main.sub-page.manufacture .sub-sidemenu .dep1 > li > a { border-color: #00abab;}
main.sub-page.gmpedu .sub-sidemenu .dep1 > li > a { border-color: #ffa700;}
main.sub-page.mr .sub-sidemenu .dep1 > li > a { border-color: #2d689e;}
main.sub-page.marketing .sub-sidemenu .dep1 > li > a { border-color: #8420e2;}
main.sub-page.etc .sub-sidemenu .dep1 > li > a { border-color: #f13183;}

main.sub-page.default .sub-sidemenu a:hover { color: #005dab;}
main.sub-page.manufacture .sub-sidemenu a:hover { color: #00abab;}
main.sub-page.gmpedu .sub-sidemenu a:hover { color: #ffa700;}
main.sub-page.mr .sub-sidemenu a:hover { color: #2d689e;}
main.sub-page.marketing .sub-sidemenu a:hover { color: #8420e2;}
main.sub-page.etc .sub-sidemenu a:hover { color: #f13183;}

main.sub-page.default .sub-sidemenu a.active,
main.sub-page.default .sub-sidemenu .acc.on > a { 
    background-color: #005dab;
    /* border-color: #005dab; */
    color: #fff;
}
main.sub-page.manufacture .sub-sidemenu a.active,
main.sub-page.manufacture .sub-sidemenu .acc.on > a { 
    background-color: #00abab;
    /* border-color: #00abab; */
    color: #fff;
}
main.sub-page.gmpedu .sub-sidemenu a.active,
main.sub-page.gmpedu .sub-sidemenu .acc.on > a { 
    background-color: #ffa700;
    /* border-color: #ffa700; */
    color: #fff;
}
main.sub-page.mr .sub-sidemenu a.active,
main.sub-page.mr .sub-sidemenu .acc.on > a { 
    background-color: #2d689e;
    /* border-color: #2d689e; */
    color: #fff;
}
main.sub-page.marketing .sub-sidemenu a.active,
main.sub-page.marketing .sub-sidemenu .acc.on > a { 
    background-color: #8420e2;
    /* border-color: #8420e2; */
    color: #fff;
}
main.sub-page.etc .sub-sidemenu a.active,
main.sub-page.etc .sub-sidemenu .acc.on > a { 
    background-color: #f13183;
    /* border-color: #ffa700; */
    color: #fff;
}



.sub-content {
    margin: 30px 0 60px;
    border: 1px #fff solid;
    /* border-radius: 15px; */
    background-color: #fff;
    word-break: keep-all;
}

.sub-content-wrap {
    /* background-color: #fafafa; */
}


@keyframes bgcube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

main.sub-page.default .sub-title-background { background-color: #005dab!important;}
main.sub-page.manufacture .sub-title-background { background-color: #00abab!important;}
main.sub-page.gmpedu .sub-title-background { background-color: #ffa700!important;}
main.sub-page.mr .sub-title-background { background-color: #2d689e!important;}
main.sub-page.marketing .sub-title-background { background-color: #8420e2!important;}
main.sub-page.etc .sub-title-background { background-color: #f13183!important;}

h2.title-text-01 {
    font-size: 1.5rem;
    position: relative;
    padding-left: 1.2em;
}

h2.title-text-01::before {content: '■';position: absolute;font-size: 1rem;top: 0.25em;left: 0;color: #005dab;}

main.sub-page.default h2.title-text-01::before{ color: #005dab;}
main.sub-page.manufacture h2.title-text-01::before{ color: #00abab;}
main.sub-page.gmpedu h2.title-text-01::before{ color: #ffa700;}
main.sub-page.mr h2.title-text-01::before{ color: #2d689e;}
main.sub-page.marketing h2.title-text-01::before{ color: #8420e2;}
main.sub-page.etc h2.title-text-01::before{ color: #f13183;}

.sub-content > article {
    position: relative;
}

.plan-progress-wrap {position: relative;padding: 1rem 3rem;background-color: #005dab;border-radius: 99rem;color: #fff; overflow: hidden;}
.plan-progress-wrap::after {content: '\f10e';font-family: 'Font Awesome 5 Free';font-weight: 900;position: absolute;font-size: 4rem;z-index: 0;color: rgba(255,255,255,.1);bottom: -1.5rem;right: 1.5rem;}

main.sub-page.default .plan-progress-wrap{ background-color: #005dab;}
main.sub-page.manufacture .plan-progress-wrap{ background-color: #00abab;}
main.sub-page.gmpedu .plan-progress-wrap{ background-color: #ffa700;}
main.sub-page.mr .plan-progress-wrap{ background-color: #2d689e;}
main.sub-page.marketing .plan-progress-wrap{ background-color: #8420e2;}
main.sub-page.etc .plan-progress-wrap{ background-color: #f13183;}


.plan-progress-background {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: .5rem;
}

.plan-progress-background > i:not(.fas) {
    display: block;
    width: 6px;
    height: 6px;
    background-color: rgba(255,255,255,.5);
    border-radius: 6px;
    margin-right: 18px;
    animation: dotpopup .5s ease infinite alternate;
}

.plan-progress-background > i:nth-of-type(2) {
    animation-delay: .25s;
}
.plan-progress-background > i:nth-of-type(3) {
    animation-delay: .5s;
}
.plan-progress-background > i:nth-of-type(4) {
    animation-delay: .75s;
}

@keyframes dotpopup {
    0% {
        transform: scale(.9);
    }
}

.plan-progress-background > i.fas {
    color: rgba(255,255,255,.5);
    animation: dotrotate 5s linear infinite;
}

@keyframes dotrotate {
    0% {
        transform: rotate(360deg);
    }
}

.plan-progress {
    /* display: flex; */
    /* width: 100%; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    font-size: 1.2rem;
    font-weight: 200;
    line-height: 2;
}

.plan-progress i {
    margin: 0 1em;
    color: rgba(0,0,0,.33);
}

.plan-table tbody tr:hover {
    cursor: pointer;
}

.plan-table tr.exit {
    color: #787878;
    background: #fafafa;
}

.plan-table tr.exit:hover {
    text-decoration: none;
}

.collapse-card .card-body {
    position: relative;
    overflow: hidden;
    transition: all .3s;
}

.collapse-card.closed .card-body {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    pointer-events: none;
}

.collapse-card.closed .collapse-card-close {
    transform: rotate(180deg);
}

.section-select-radio {
    line-height: 1;
    padding-bottom: 1.5em;
}

.section-select-radio:not(:last-child) {
    margin-right: 2em;
}

.section-select-radio .form-check-input:checked ~ label::after {content: '▼';position: absolute;left: 50%;transform: translateX(-50%);bottom: 0px;color: #ccc;}

.customer_login-title {
    width: fit-content;
    margin: 0 auto;
    margin-top: 6vh;
    padding-bottom: 1rem;
    /* border-bottom: 1px #e1e1e1 solid; */
    position: relative;
}

.customer_login-form {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding-top: .5em;
}

.customer_login-form > input {
    display: block;
    position: relative;
    width: 100%;
    padding: .25em 1em;
    border: none;
    border-bottom: 2px #ccc solid;
    font-weight: 700;
    outline: none;
    margin-top: 2em;
    transition: all .3s;
}

.customer_login-form > input+label {
    display: block;
    position: absolute;
    font-weight: 700;
    color: #ccc;
    padding-left: 1em;
    transform: translateY(-2em);
    transition: all .3s;
}

.customer_login-form > input:focus {
    border-color: #005dab;
}

.customer_login-form > input:focus+label, .customer_login-form > input:valid+label {
    transform: translateY(-3.5em);
    padding-left: 0;
    color: #005dab;
    font-size: .9em;
    font-weight: 400;
}

.customer_login-form > button[type=submit] {
    display: block;
    margin-top: 2em;
    width: 100%;
    border: none;
    outline: none;
    padding: .5em 0;
    border-radius: 99em;
    font-size: 1.2em;
    transition: all .3s;
    color: #aaa;
}

.customer_login-form > input:valid ~ input:valid ~ button[type=submit] {
    background: linear-gradient( 
-45deg
 , #0062cc, #0062cc, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: btngradient 15s ease infinite;
    color: #fff;
}


/*footer*/
footer {
    background-color: #333;
    color: #fff;
}

.footer-info {
    border-bottom: 1px #666 solid;
    padding: 1em 0;
}

.footer-info a {
    color: #fff;
    margin-right: 4em;
}

.footer-info a:hover {
    color: #00ffff;
}

.footer-adress {
    padding: 2em;
}

.footer-adress p {
    margin: 0;
    color: #aaa;
}


/*color theme set*/

.color-default { color: #005dab!important;}
.color-manufacture { color: #00abab!important;}
.color-gmpedu { color: #ffa700!important;}
.color-mr { color: #2d689e!important;}
.color-marketing { color: #8420e2!important;}
.color-etc { color: #f13183!important;}

.color-default { color: var(--default-normal)!important;}
.color-manufacture { color: var(--manufacture-normal)!important;}
.color-gmpedu { color: var(--gmp-normal)!important;}
.color-mr { color: var(--mr-normal)!important;}
.color-marketing { color: var(--marketing-normal)!important;}
.color-etc { color: var(--etc-normal)!important;}

.bg-default { background-color: #005dab!important;}
.bg-manufacture { background-color: #00abab!important;}
.bg-gmpedu { background-color: #ffa700!important;}
.bg-mr { background-color: #2d689e!important;}
.bg-marketing { background-color: #8420e2!important;}
.bg-etc { background-color: #f13183!important;}

.bg-default { background-color: var(--default-normal)!important;}
.bg-manufacture { background-color: var(--manufacture-normal)!important;}
.bg-gmpedu { background-color: var(--gmp-normal)!important;}
.bg-mr { background-color: var(--mr-normal)!important;}
.bg-marketing { background-color: var(--marketing-normal)!important;}
.bg-etc { background-color: var(--etc-normal)!important;}


/*btn theme*/
.btn-default {
    color: #fff;
    background-color: #005dab;
    border-color: #005dab;
}

.btn-default:hover {
    color: #fff;
    background-color: #004d8d;
    border-color: #004177;
}

.btn-default:focus, .btn-default.focus {
    color: #fff;
    background-color: #004d8d;
    border-color: #004177;
    box-shadow: 0 0 0 0.2rem rgba(0, 139, 255, 0.5);
}

.btn-default.disabled, .btn-default:disabled {
    color: #fff;
    background-color: #005dab;
    border-color: #005dab;
}

.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active,
.show > .btn-default.dropdown-toggle {
    color: #fff;
    background-color: #004177;
    border-color: #013c6d;
}

.btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus,
.show > .btn-default.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 139, 255, 0.5);
}

.btn-manufacture {
    color: #fff;
    background-color: #00abab;
    border-color: #00abab;
}

.btn-manufacture:hover {
    color: #fff;
    background-color: #069f9f;
    border-color: #0a9191;
}

.btn-manufacture:focus, .btn-manufacture.focus {
    color: #fff;
    background-color: #069f9f;
    border-color: #0a9191;
    box-shadow: 0 0 0 0.2rem rgba(50, 250, 250, 0.5);
}

.btn-manufacture.disabled, .btn-manufacture:disabled {
    color: #fff;
    background-color: #00abab;
    border-color: #00abab;
}

.btn-manufacture:not(:disabled):not(.disabled):active, .btn-manufacture:not(:disabled):not(.disabled).active,
.show > .btn-manufacture.dropdown-toggle {
    color: #fff;
    background-color: #0a9191;
    border-color: #0a8383;
}

.btn-manufacture:not(:disabled):not(.disabled):active:focus, .btn-manufacture:not(:disabled):not(.disabled).active:focus,
.show > .btn-manufacture.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(50, 250, 250, 0.5);
}

.btn-gmpedu {
    color: #fff;
    background-color: #ffa700;
    border-color: #ffa700;
}

.btn-gmpedu:hover {
    color: #fff;
    background-color: #ffa700;
    border-color: #ffa700;
}

.btn-gmpedu:focus, .btn-gmpedu.focus {
    color: #fff;
    background-color: #ffa700;
    border-color: #ffa700;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 70, 0.5);
}

.btn-gmpedu.disabled, .btn-gmpedu:disabled {
    color: #fff;
    background-color: #ffa700;
    border-color: #ffa700;
}

.btn-gmpedu:not(:disabled):not(.disabled):active, .btn-gmpedu:not(:disabled):not(.disabled).active,
.show > .btn-gmpedu.dropdown-toggle {
    color: #fff;
    background-color: #ffa700;
    border-color: #ffa700;
}

.btn-gmpedu:not(:disabled):not(.disabled):active:focus, .btn-gmpedu:not(:disabled):not(.disabled).active:focus,
.show > .btn-gmpedu.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 70, 0.5);
}

.btn-marketing {
    color: #fff;
    background-color: #8420e2;
    border-color: #8420e2;
}

.btn-marketing:hover {
    color: #fff;
    background-color: #cfa4ff;
    border-color: #cfa4ff;
}

.btn-marketing:focus, .btn-marketing.focus {
    color: #fff;
    background-color: #cfa4ff;
    border-color: #cfa4ff;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 70, 0.5);
}

.btn-marketing.disabled, .btn-marketing:disabled {
    color: #fff;
    background-color: #8420e2;
    border-color: #8420e2;
}

.btn-marketing:not(:disabled):not(.disabled):active, .btn-marketing:not(:disabled):not(.disabled).active,
.show > .btn-marketing.dropdown-toggle {
    color: #fff;
    background-color: #cfa4ff;
    border-color: #cfa4ff;
}

.btn-marketing:not(:disabled):not(.disabled):active:focus, .btn-marketing:not(:disabled):not(.disabled).active:focus,
.show > .btn-marketing.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 70, 0.5);
}

.btn-mr {
    color: #fff;
    background-color: #2d689e;
    border-color: #2d689e;
}

.btn-mr:hover {
    color: #fff;
    background-color: #2b649a;
    border-color: #285f8e;
}

.btn-mr:focus, .btn-mr.focus {
    color: #fff;
    background-color: #2b649a;
    border-color: #285f8e;
    box-shadow: 0 0 0 0.2rem rgba(116, 134, 145, 0.5);
}

.btn-mr.disabled, .btn-mr:disabled {
    color: #fff;
    background-color: #2d689e;
    border-color: #2d689e;
}

.btn-mr:not(:disabled):not(.disabled):active, .btn-mr:not(:disabled):not(.disabled).active,
.show > .btn-mr.dropdown-toggle {
    color: #fff;
    background-color: #285f8e;
    border-color: #235b8b;
}

.btn-mr:not(:disabled):not(.disabled):active:focus, .btn-mr:not(:disabled):not(.disabled).active:focus,
.show > .btn-mr.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(116, 134, 145, 0.5);
}

.btn-marketing {
    color: #fff;
    background-color: #8420e2;
    border-color: #8420e2;
}

.btn-marketing:hover {
    color: #fff;
    background-color: #771eca;
    border-color: #771eca;
}

.btn-marketing:focus, .btn-marketing.focus {
    color: #fff;
    background-color: #771eca;
    border-color: #771eca;
    box-shadow: 0 0 0 0.2rem rgba(50, 250, 250, 0.5);
}

.btn-marketing.disabled, .btn-marketing:disabled {
    color: #fff;
    background-color: #8420e2;
    border-color: #8420e2;
}

.btn-marketing:not(:disabled):not(.disabled):active, .btn-marketing:not(:disabled):not(.disabled).active,
.show > .btn-marketing.dropdown-toggle {
    color: #fff;
    background-color: #771eca;
    border-color: #771eca;
}

.btn-marketing:not(:disabled):not(.disabled):active:focus, .btn-marketing:not(:disabled):not(.disabled).active:focus,
.show > .btn-marketing.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #771eca;
}

.btn-etc {
    color: #fff;
    background-color: #f13183;
    border-color: #f13183;
}

.btn-etc:hover {
    color: #fff;
    background-color: #f13183;
    border-color: #f13183;
}

.btn-etc:focus, .btn-etc.focus {
    color: #fff;
    background-color: #f13183;
    border-color: #f13183;
    box-shadow: 0 0 0 0.2rem rgba(116, 134, 145, 0.5);
}

.btn-etc.disabled, .btn-etc:disabled {
    color: #fff;
    background-color: #f13183;
    border-color: #f13183;
}

.btn-etc:not(:disabled):not(.disabled):active, .btn-etc:not(:disabled):not(.disabled).active,
.show > .btn-etc.dropdown-toggle {
    color: #fff;
    background-color: #d12d74;
    border-color: #d12d74;
}

.btn-etc:not(:disabled):not(.disabled):active:focus, .btn-etc:not(:disabled):not(.disabled).active:focus,
.show > .btn-etc.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(116, 134, 145, 0.5);
}



/**/
/* Toggle Button */

.cm-toggle {
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	border: 0;
	outline: 0;
	cursor: pointer;
}


/* To create surface of toggle button */

.cm-toggle:after {
	content: '';
	width: 30px;
	height: 14px;
	display: inline-block;
	background: rgba(196, 195, 195, 0.55);
	border-radius: 18px;
	clear: both;
}


/* Contents before checkbox to create toggle handle */

.cm-toggle:before {
	content: '';
	width: 16px;
	height: 16px;
	display: block;
	position: absolute;
	left: 0;
	top: 1px;
	border-radius: 50%;
	background: rgb(255, 255, 255);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}


/* Shift the handle to left on check event */

.cm-toggle:checked:before {
	left: 16px;
	box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.3);
}

.cm-toggle:checked:after {
	background: #fff;
}


/* Transition for smoothness */

.cm-toggle,
.cm-toggle:before,
.cm-toggle:after,
.cm-toggle:checked:before,
.cm-toggle:checked:after {
	transition: ease .3s;
	-webkit-transition: ease .3s;
	-moz-transition: ease .3s;
	-o-transition: ease .3s;
}


/* Custom Color */
/* .cm-toggle.default:checked:after { background-color: #005dab;}
.cm-toggle.manufacture:checked:after { background-color: #00abab;}
.cm-toggle.gmpedu:checked:after { background-color: #ffa700;}
.cm-toggle.mr:checked:after { background-color: #2d689e;}
.cm-toggle.marketing:checked:after { background-color: #8420e2;}
.cm-toggle.etc:checked:after { background-color: #f13183;} */




.blend-panel {
    background-color: #f5f9fa;
    padding: 2rem;
    border-radius: 4rem;
    text-align: center;
}

.blend-panel > img {
    mix-blend-mode: multiply;
}

.blend-panel .blend-title h3 {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 60px;
}

.blend-panel .blend-body {
    font-size: 16px;
    position: relative;
}

.blend-panel .blend-body .subcontents {
    font-size: 16px;
    position: relative;
    padding-left: 30px; 
    padding-bottom: 10px;
}

.non-panel {    
    border-radius: 4rem;
    text-align: center;
}
.non-panel .non-title h3 {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 60px;
}

.non-panel .non-body {
    font-size: 16px;
    position: relative;
}

.non-panel .non-body .subcontents {
    font-size: 16px;
    position: relative;
    padding-left: 30px; 
    padding-bottom: 10px;
}

.introduce-header {
    position: relative;
    display: flex;
    align-items: center;
    margin: 5px 0 0px;
}

.introduce-header .introduce-title h4 {
    font-size: 26px;
    font-weight: 700;
    position: relative;
    padding-left: 60px;
}

.introduce-header .introduce-title h4::before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    font-size: 44px;
    z-index: 0;
    left: 0;
    top: -10px;
}

.introduce-header .introduce-title p {
    font-size: 18px;
}

.introduce-header .introduce-image img {
    width: 290px;
}


main.manufacture .introduce-header .introduce-title h4::before { color:#32fafa}
main.gmpedu .introduce-header .introduce-title h4::before { color:#ffa700}
main.mr .introduce-header .introduce-title h4::before { color:#abd0f2}
main.marketing .introduce-header .introduce-title h4::before{ color:#cfa4ff;}

.subway_wrap {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px #f0f0f0 solid;
}

.subway_wrap li {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 1px #f0f0f0 solid;
}

.subway_wrap li .subway_txt {
    margin-left: 60px;
}

.subway_wrap li .subway_txt dt {
    font-size: 1.2em;
    margin-bottom: 15px;
}

.subway_wrap~p {
    font-size: 1.1em;
    font-weight: 700;
    padding: 15px 30px;
    border-bottom: 1px #f0f0f0 solid;
    margin: 0;
    color: #005dab;
}

.custom-file-label::after {
    content: '첨부';
}

/* 2024. 7. 18 */
.password-div {
    position: relative;
}
.form-control.password + .password-toggle {
    cursor: pointer;
    position: absolute;
    right: 25px;
    top: 10px;
}