@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

.title-wrapper > h1 {
    position: absolute;
    top: 20px;
    left: 25px;
    width: 160px;
    height: 35px;
    background-image: url(/res/img/common/logo_ginpre-8c62d23b662bbe098a33b7498a08f47a.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -5000rem;
    z-index: 20;
}
.title-wrapper {
	display:flex;
    background: url(/res/img/component/back_pattern_01-cd15822780f36a61792517e8df75d94e.png);
    padding-left: 20px;
    padding-right: 20px;
}
.title-wrapper > h1 {
    position: absolute;
    top: 20px;
    left: 25px;
    width: 160px;
    height: 35px;
    background-image: url(/res/img/common/logo_ginpre-8c62d23b662bbe098a33b7498a08f47a.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -5000rem;
    z-index: 20;
    cursor: pointer;
}
.title-wrapper > .title {
    display: flex;
    align-items: center;
    width: 470px;
    min-height: 150px;
    margin: 0 auto;
}
.title-wrapper > .title > h2 {
    color: #111;
    font-size: 46px;
    line-height: 50px;
    font-weight: 200;
    letter-spacing: -2px;
}
.title-wrapper > .title > p {
    position: relative;
    height: 42px;
    color: #555;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -0.2px;
    padding-left: 80px;
}
.title-wrapper > .title > p:before {
    position: absolute;
    bottom: 0;
    left: 25px;
    display: block;
    content: '';
    width: 30px;
    height: 2px;
    background: #333;
}
.title-wrapper > .button-area {
    position:absolute;top:20px;right:20px;
}
.title-wrapper > .button-area > .login-btn {
    display: block;
    width: 150px;
    height: 30px;
    font-size: 17px;
    font-weight: 500;
    background-size: 200%;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    border-radius: 25px;
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
    margin: 0 auto;
}

.contents-wrapper {
    background: #f9f9f9;
}
.contents-wrapper > .tab-box {
    height: 55px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
}
.tab-box > .tab-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
    margin: 0 auto;
}
.tab-box > .tab-list > li {
    width: calc(20% + 1px);
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    margin-left: -1px;
}
.tab-box > .tab-list > li > a {
    position: relative;
    display: block;
    width: 100%;
    min-height: 53px;
    font-size: 18px;
    line-height: 53px;
    color: #111;
    text-align: center;
}
.tab-box > .tab-list > li > a.active {
    font-weight: 500;
}
.tab-box > .tab-list > li > a.active:before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 3px;
    background: #8f55e2;
}
.tab-contents {
    padding: 30px 20px;
}
.tab-contents .tab-page {
    display: none;
    max-width: 1440px;
    min-height: 500px;
    margin: 0 auto;
}
.tab-contents .tab-page.active {
    display: block;
}

/* my-status */
.my-status {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #dcdcdc;
    margin-bottom: 30px;
}
.my-status > .info {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    background-color: #eeeff3;
    border-bottom: 1px solid #dcdcdc;
}
.my-status > .info > .i1 {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.4px;
}
.my-status > .info > .i2 {
    line-height: 20px;
    font-size: 15px;
    color: #777;
    padding-left: 14px;
    border-left: 1px solid #dcdcdc;
    margin-left: 14px;
}
.my-status > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.my-status > ul > li {
    display: flex;
    flex-direction: column;
    width: 33.333333%;
    min-height: 70px;
    color: #333;
    letter-spacing: -0.2px;
    padding: 23px 30px;
    border-right: 1px solid #dcdcdc;
}
.my-status > ul > li:last-child {
    border-right: none;
}
.my-status > ul > li > .label {
    line-height: 24px;
    color: #333;
    font-weight: 400;
}
.my-status > ul > li > strong {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    font-family: 'Muli', sans-serif;
}
.my-status > ul > li > strong > i {
    /* font-size: 15px;
    margin-left: 5px; */
    font-style: normal;
}
/* tab-title */
.tab-title {
    margin-bottom: 20px;
}
.tab-title > h3 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -1.2px;
}
h3.bullet-purple:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_purple_svg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

/* card-box */
.card-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 30px;
}
.pricing-card {
    width: 240px;
    margin: 0 20px 20px 20px;
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(31,30,47,.1);
    transition: .3s;
}
.pricing-card:hover {
    border: 0;
    transform: translateY(-3px);
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.pricing-card > .head {
    position: relative;
    height: 200px;
    background-color: #fff;
}
.pricing-card > .head > .title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    line-height: 24px;
    padding-top: 22px;
    z-index: 1;
}
.pricing-card > .head > .title > span {
    min-width: 80px;
    font-size: 15px;
    line-height: 26px;
    border: 1px solid #fff;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 0 10px;
}
.pricing-card > .head > .price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 24px;
    color: #333;
    text-align: center;
    padding-top: 60px;
    font-family: 'Verdana', sans-serif;
}
.pricing-card > .head > .price > .currency {
    font-size: 26px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -1px;
}
.pricing-card > .head > .price > .won {
    font-size: 20px;
    margin-left: 4px;
}
.pricing-card .feature-list p {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: #ff4081;
    font-size: 15px;
}
.pricing-card .feature-list p .icon-point {
    display: inline-block;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Muli', sans-serif;
    border: 1px solid #712cce;
    border-radius: 4px;
    padding: 0 4px 4px 2px;
    margin-right: 6px;
}
.pricing-card .button-area {
    padding: 30px 0;
}
.pricing-card .button-area > .price-btn {
    display: block;
    width: 60%;
    height: 50px;
    font-size: 17px;
    font-weight: 500;
    background-size: 200%;
    color: #7c3df1;
    text-align: center;
    outline: none;
    cursor: pointer;
    border: 1px solid #7c3df1;
    border-radius: 25px;
    margin: 0 auto;
}
.pricing-card .button-area > .price-btn.etc {
    color: #4467f080;
    border: 1px solid #4467f080;
}
.pricing-card.active .button-area > .price-btn.etc ,
.pricing-card:hover .button-area > .price-btn.etc  {
    color: #4467f0;
    border: 1px solid #4467f0;
}
.pricing-card.active{transform:translateY(-3px);box-shadow:0 5px 10px 0 rgba(0,0,0,.2);}
.pricing-card.active .button-area > .price-btn,
.pricing-card:hover .button-area > .price-btn {
    display: block;
    width: 60%;
    height: 50px;
    font-size: 17px;
    font-weight: 500;
    border: none;
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
    background-size: 200%;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    border-radius: 25px;
    margin: 0 auto;
}
.card-box .info {
    color: #777;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -0.4px;
}
.head-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-style: solid;
    border-width: 90px 1411px 23px 399px;
    position: absolute;
    border-color: #b096e9 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #b096e9;
    color: #fff;
}
.pricing-card.active .head-bg,
.pricing-card:hover .head-bg {
    border-color: #8f55e2 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #8f55e2;
}

/* dl-table-chubby */
.dl-table-chubby {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-top: 2px solid #333;
}
.dl-table-chubby > dt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 200px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.6px;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-top: 0;
    border-left: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
}
.dl-table-chubby > dd {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 200px);
    color: #444;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding: 20px;
    background-color: #fff;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
}
.dl-table-chubby > dd > em {
    display: flex;
    align-items: center;
    color: #8934fa;
    font-weight: 600;
    margin-right: 10px;
}
.dl-table-chubby > dd > em > span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    border: 1px solid #8934fa;
    padding: 0 10px;
    border-radius: 15px;
    margin-right: 6px;
}
.dl-table-chubby > dd > strong {
    font-size: 17px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -1px;
    margin-right: 4px;
}
.dl-table-chubby > dd > strong.price {
    font-family: 'Verdana';
}
.dl-table-chubby > dd > input {
    max-width: 120px;
    height: 38px;
    font-size: 17px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-right: 6px;
}
.dl-table-chubby > dd > strong.total-price {
    font-family: 'Verdana';
    font-size: 26px;
}
.dl-table-chubby > dd > .btn-point {
    display: inline-block;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 400;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    margin-left: 14px;
    color: #9ca1a5;
    background: #e4e7e9;
    outline: none;
}
/*.dl-table-chubby > dd > .btn-point > span {
    background: url(../img/component/icon_change_off.png) no-repeat 0 50%;
    padding-left: 27px;
}*/
.dl-table-chubby > dd > .info {
    margin-right: 6px;
    color: #777;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -0.4px;
    margin-left: 10px;
}
.payment-info .button-area {
    padding: 30px 0;
}
.payment-info .button-area > .price-btn,.payment-info .button-area > .coupon-btn {
    display: block;
    width: 220px;
    height: 50px;
    font-size: 17px;
    font-weight: 500;
    background-size: 200%;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    border-radius: 25px;
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
    margin: 0 auto;
}
.payment-info .button-area>.coupon-btn{background:linear-gradient(120deg,#ff7f40,#ff4081);}

/* dropdown */
.dropdown {
    display: inline-block;
    height: 38px;
    transition: all .5s ease;
    position: relative;
    letter-spacing: -0.6px;
    text-align: left;
    border: 1px solid #dadce0;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border .2s ease-in-out;
}
.dropdown label {
    position: absolute;
    top: -9px;
    left: 7px;
    font-size: 13px;
    font-weight: 400;
    font-size: 13px;
    background: #fff;
    padding: 0 5px;
    margin-right: 0;
}
.dropdown > .dropdown-select {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    height: 36px;
    font-weight: 400;
    padding: 0 24px 0 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: border .3s ease-in-out;
}
.dropdown > .dropdown-select > span {
    font-size: 15px;
    color: #4c4c4c;
    font-weight: 500;
}
.dropdown:focus {
    outline: none;
}
.dropdown.active:hover,
.dropdown.active {
    border: 1px solid #8934fa;
}
.dropdown.active:hover label,
.dropdown.active label {
    color: #8934fa;
}
.dropdown.active:hover > .dropdown-select,
.dropdown.active .dropdown-select {
    border-color: #8934fa;
}
.dropdown > .dropdown-select:after {
    border-bottom: 2px solid #9e9e9e;
    border-right: 2px solid #9e9e9e;
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
}
.dropdown.active > .dropdown-select:after {
    border-color: #8934fa;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.dropdown > .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: calc(100% + 2px);
    max-height: 240px;
    left: -1px;
    margin-top: 2px;
    color: #444;
    font-size: 15px;
    overflow: hidden;
    display: none;
    overflow-y: auto;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    z-index: 9;
}
.dropdown > .dropdown-menu {
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
}
.dropdown > .dropdown-menu > li {
    color: #444;
    padding: 12px 10px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.dropdown > .dropdown-menu > li:hover {
    background-color: #f7f7f7;
}
.dropdown >.dropdown-menu > li:active {
    color: #8934fa;
    background-color: #eae8ff;
}
.dropdown-multi > .dropdown-menu {
    position: absolute;
    display: none;
    flex-direction: row;
    background-color: #fff;
    width: 144px;
    max-height: 240px;
    left: -1px;
    margin-top: 2px;
    color: #444;
    font-size: 15px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    z-index: 9;
}
.dropdown > .dropdown-menu::-webkit-scrollbar {
    width: 5px;
    height: 1px;
}
.dropdown > .dropdown-menu::-webkit-scrollbar-thumb {
    background: #712cce;
    border: 0px none #ffffff;
}
.dropdown > .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 4px;
}
/* info-context */
.info-context {
    padding-left: 5px;
    font-size: 15px;
    color: #777777;
    line-height: 27px;
    margin-bottom: 50px;
    letter-spacing: -0.3px;
    padding: 20px;
    background: #fff;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
}

/* checking-set */
.payment-info .checking-set {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 20px;
}
.payment-info .checking {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    height: 34px;
    cursor: pointer;
    color: #444;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: -0.5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.payment-info .checking input,
.payment-info .selecting input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.payment-info .checking .checkmark {
    position: relative;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid #ccd2eb;
    border-radius: 15px;
    margin-right: 5px;
    transition-duration: 300ms;
}
.payment-info .checking .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.payment-info .checking:hover input ~ .checkmark {
    background-color: #ccd2eb;
}
.payment-info .checking-set .checkmark:after {
    left: 8px;
    top: 3px;
    width: 7px;
    height: 13px;
    border: solid #6b22a1;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.payment-info .checking input:checked ~ .checkmark:after {
    display: block;
}
.payment-info .checking input:checked ~ .checkmark {
    background-color: #fff;
    border: 2px solid #6b22a1;
}
.payment-info .checking-set .text {
    color: #000;
}

/* footer-in-wrap */
.footer-in-wrap {
    padding: 20px;
    background: #eeeff3;
}
.footer-in-wrap > .copyright {
    max-width: 1440px;
    font-size: 13px;
    line-height: 22px;
    margin: 0 auto;
}
.footer-in-wrap > address {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
    font-size: 13px;
    line-height: 22px;
    margin: 0 auto;
}
.footer-in-wrap > address > p {
    position: relative;
    padding-right: 6px;
    margin-right: 6px;
}
.footer-in-wrap > address > p:after {
    position: absolute;
    top: 6px;
    right: 0;
    display: block;
    content: '';
    width: 1px;
    height: 12px;
    background: #bfbfbf;
}
.footer-in-wrap > address > p:last-child:after {
    display: none;
}

/* 20200511~ 배이화 추가 */
.payment-completion{position:relative;overflow:hidden;width:100%;height:470px;padding:50px 0;border:solid 1px #eaeaea;border-radius:20px;background-color:#fff;z-index:0;}
.payment-completion::before,.payment-completion::after,.completion-info::before,.completion-info::after{content:"";display:block;position:absolute;width:167px;background-color:#673ab7;transform:rotate(45deg);z-index:-1;}
.payment-completion::before{top:-145px;left:0;height:500px;opacity:.1;}
.payment-completion::after{bottom:-145px;left:100px;height:300px;border-radius:300px;opacity:.2;}
.completion-info{z-index:2;}
.completion-info::before{top:-200px;right:120px;height:500px;border-radius:300px;opacity:.15;}
.completion-info::after{bottom:-143px;right:15px;height:500px;opacity:.35;}
.completion-info *{text-align:center;}
.completion-info h3{margin:20px 0;padding-top:230px;color:#333;font-size:40px;font-weight:200;line-height:100%;letter-spacing:-2px;justify-content:center;background:url(/res/img/component/img_reserv-5fa09e81149bcf5b207c3f12c3d0e041.png) 50% 0/auto 200px no-repeat;}
.completion-info h3::before{content:"";display:inline-block;width:44px;height:44px;margin-right:5px;vertical-align:-9px;background-color:#8934fa;-webkit-mask-image:url(/res/img/component/icon_reserv_check-42bdd06d08e912781788247b88d3ba2b.svg);mask-image:url(/res/img/component/icon_reserv_check-42bdd06d08e912781788247b88d3ba2b.svg);}
.completion-info h3 strong{font-weight:500;}
.completion-info h3 span{margin-left:5px;font-weight:500;}
.completion-info p{color:#444;font-size:20px;letter-spacing:-1px;line-height:100%;}
.completion-info p+p{margin-top:10px;}
.completion-info p strong{color:#222;}
.completion-info p .pink{padding:0 5px;color:#fff;background-color:#ff4081;}
.completion-info .purple{color:#8934fa;font-weight:bold;}
.dl-table-chubby>dd>input+span{margin-left:14px;}
.dl-table-chubby>dd>small{margin-left:10px;color:#777;font-size:15px;line-height:18px;letter-spacing:-0.4px;}
.button-area a{color:#111;}
.button-area>*{position:relative;padding:0 10px;border-radius:5px;font-size:14px;line-height:30px;font-weight:500;transition:color .3s;cursor:pointer;}
.button-area>*+*::after{content:"";position:absolute;top:50%;left:-2px;width:1px;height:10px;background-color:#bbb;transform:translateY(-50%);}
.button-area button:hover,.button-area a:hover{color:#8f55e2;}
.button-area .btn-gin:hover,.button-area .btn-gin:active{color:#0b99ac;}
.btn-gin::before{content:"";display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-3px;background:url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin.svg) 50%/contain no-repeat;}
.btn-pre::before{content:"";display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-3px;background:url(https://aptgin.com/cdn/res/icon/common/svg/symbol_pre.svg) 50%/contain no-repeat;}

/* 크롬 권장 페이지 */
.use-chrome{position:relative;overflow:hidden;width:100%;height:100vh;z-index:0;}
.use-chrome::before,.use-chrome::after,.plz-chrome::before,.plz-chrome::after{content:"";display:block;position:absolute;width:200px;height:1000px;border-radius:200px;background-color:#673ab7;transform:rotate(45deg);z-index:-1;}
.use-chrome::before{top:-300px;left:80px;opacity:.1;}
.use-chrome::after{bottom:-600px;left:-100px;opacity:.2;}
.plz-chrome{z-index:2;}
.plz-chrome::before{top:-500px;right:50px;opacity:.15;}
.plz-chrome::after{bottom:-320px;right:130px;opacity:.35;}
.plz-text{position:absolute;top:50%;left:50%;width:500px;text-align:center;transform:translate(-50%,-50%);}
.plz-text::before{content:"";display:block;margin:0 auto 30px auto;width:180px;height:180px;background:url(/res/img/common/img_chrome_logo-0b8d9e6bfcf30824747a5f6b066f4716.png) 50%/contain no-repeat;}
.plz-text h1,.plz-text h2{margin-bottom:30px;color:#673ab7;line-height:100%;letter-spacing:-2px;}
.plz-text h1{font-size:40px;line-height:50px;font-weight:200;}
.plz-text h1 span{font-weight:bold;}
.plz-text h1 strong{display:inline-block;padding:0 5px;border-radius:3px;color:#fff;line-height:46px;background-color:#673ab7;}
.plz-text button,.plz-text a{display:inline-block;margin-top:20px;line-height:60px;padding:0 20px;border-radius:10px;color:#fff;font-size:24px;background:linear-gradient(120deg,#6f21a2,#4436a0);transition:.5s;}
.plz-text button:hover,.plz-text a:hover{box-shadow:0 0 10px #6f21a2;background:linear-gradient(120deg,#4436a0,#6f21a2);}

/* 쿠폰 추가 */
.pricing-card.coupon .head-bg{border-color:rgba(255,64,129,.5);}
.pricing-card.coupon .price-btn{border-color:#ff4081;color:#ff4081;}
.pricing-card.coupon.active .head-bg,.pricing-card.coupon:hover .head-bg{border-color:rgba(255,64,129,1);}
.pricing-card.coupon.active .price-btn,.pricing-card.coupon:hover .price-btn{background:linear-gradient(120deg,#ff7f40,#ff4081);}

.dl-table-chubby.coupon>dd>input{max-width:190px;margin-right:0;}
.dl-table-chubby.coupon>dd>span{margin:0 5px;}
.dl-table-chubby.coupon>dd .confirm-btn{height:38px;margin-left:10px;padding:0 10px;border-radius:5px;color:#fff;background-color:#ff6c9e;transition:.3s;}
.dl-table-chubby.coupon>dd p{margin-left:10px;color:#ff4081;}
.dl-table-chubby.coupon>dd .confirm-btn:hover,.dl-table-chubby.coupon>dd .confirm-btn:active{background-color:#ff4081;}

/* 기업회원 추가 */
.pricing-card.biz:hover,.pricing-card.biz.active{border-color:rgba(240,133,68,1);}
.pricing-card.biz .title::before{content:"";display:block;position:absolute;top:6px;left:50%;transform:translate(-50%);width:20px;height:20px;
	background:url(/res/img/component/icon_crown-8733619eff3aebfc512e729903bbc00c.svg) 50%/contain no-repeat;}
.pricing-card.biz .head-bg{border-color:rgba(240,133,68,.5) rgba(0,0,0,0) rgba(0,0,0,0) rgba(240,133,68,.5);}
.pricing-card.biz .head-bg.etc {border-color: #4467f080 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #4467f080;}
.pricing-card.biz.active .head-bg.etc,.pricing-card.biz:hover .head-bg.etc {border-color: #4467f0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #4467f0;}

.pricing-card.biz.active .head-bg,.pricing-card.biz:hover .head-bg{border-color:#f08544 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #f08544;}
.pricing-card.biz>.head sup{background-color:#ac480b;}
.pricing-card.biz .price-btn{border-color:#ffa126;color:#ffa126;}
.pricing-card.biz.active .price-btn,.pricing-card.biz:hover .price-btn{background:linear-gradient(120deg,#f08544,#ffa126);}
.pricing-card.biz .price-btn.etc{border-color:#4467f0;color:#4467f0;}
.pricing-card.biz.active .price-btn.etc,.pricing-card.biz:hover .price-btn.etc{color:white; background:linear-gradient(120deg,#4467f0,#4467f0);}

.pricing-card.biz .feature-list p{color:#fe3b0b;}
.pricing-card.biz .feature-list.etc p{color:#191af3;}

.dl-table-chubby.biz>dd>input{max-width:190px;margin-right:0;}
.dl-table-chubby.biz>dd>span{margin:0 5px;}
.dl-table-chubby.biz>dd .confirm-btn{height:38px;margin-left:10px;padding:0 10px;border-radius:5px;color:#fff;background-color:#ff6c9e;transition:.3s;}
.dl-table-chubby.biz>dd p{margin-left:10px;color:#ff4081;}
.dl-table-chubby.biz>dd .confirm-btn:hover,.dl-table-chubby.biz>dd .confirm-btn:active{background-color:#ff4081;}

/* 추가 사용일 */
.tab-title>p{margin-top:10px;margin-bottom:30px;padding-left:20px;line-height:130%;}
.tab-title>p.membership{margin-bottom:15px;margin-left:20px;font-size:18px;font-weight:500;padding-left:0;}
.pricing-card>.head sup{display:flex;align-items:center;justify-content:center;position:absolute;top:5px;right:5px;width:50px;height:50px;border-radius:100%;box-shadow:3px 3px 5px rgba(0,0,0,.3);
	color:#ff0;font-size:14px;background-color:#4436a0;opacity:.3;}
.pricing-card:hover>.head sup,.pricing-card.active>.head sup{opacity:1;}
.text-pink{color:#ff4081!important;}

/* 교육 신청 */
.modal .my-status .mail{height:80px;}
.modal .my-status .mail .label{font-size:16px;}
.modal .my-status .mail>input[type=text]{height:50px;padding:0 10px;border:1px solid #dadce0;border-radius:3px;vertical-align:middle;font-size:20px;text-indent:0;letter-spacing:0;outline:none;transition:.3s;}
.modal .my-status .mail>span,.mail>strong{display:inline-block;margin:0 5px;font-size:20px;line-height:130%;}
.modal .my-status .mail p{margin-left:20px;}
.modal .my-status .mail.certify{border-bottom:dashed 1px #dcdcdc;}

.info-context p{color:#000;}
.info-context .bold{color:#f45666;font-weight:500;}

.tab-box>.tab-list>li>.btn{display:flex;align-items:center;justify-content:center;color:#ce1312;font-size:14px;line-height:120%;text-align:center;}
.icon-youtube-red::before{content:"";display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-2px;background:url(/res/img/component/icon_youtube_red-bc48d989fa5d7c5eb3a8e4a12a4f72dd.svg) 50%/contain no-repeat;}

/* 서비스 혜택 */
.benefit{display:flex;margin-bottom:40px;margin-left:20px;}
.benefit>li{flex:1;padding:20px 30px;border:solid 1px #8f55e2;border-right-color:#ddd;letter-spacing:-1px;text-align:center;background-color:#fff;}
.benefit>li:last-child{border-right-color:#8f55e2;}
.benefit>li::before{content:"";display:block;margin:10px auto;width:50px;height:50px;background:url(/res/img/component/icon_present-febd62b2caae5d14ff6cda8af24d99e6.svg) 50%/contain no-repeat;}
.benefit>li+li{border-left:0;}
.benefit>li>.title{margin-bottom:30px;color:#8f55e2;font-size:20px;line-height:130%;font-weight:bold;}
.benefit>li>.title+p{text-align:left;}
.benefit>li>p{margin-bottom:10px;}
.benefit>li>sup{display:block;margin-bottom:30px;color:#333;font-size:20px;font-weight:100;text-align:center;letter-spacing:10px;line-height:160%;}
.benefit>li>small{display:block;margin-top:20px;color:#999;font-size:13px;text-align: left;margin-left: 5px;}
.benefit>li li{position:relative;padding-left:20px;color:#666;font-size:16px;font-weight:normal;text-align:left;line-height:160%;}
.benefit>li li::before{content:"";display:block;position:absolute;top:9px;left:5px;width:5px;height:5px;background-color:#8f55e2;transform:rotate(45deg);}
.benefit>li li strong{display:block;}
.benefit>li li+li{margin-top:10px;}

.benefit.company>li{position:relative;border-color:#f08544;border-width:2px;border-right-color:#ddd;border-right-width:1px;}
.benefit.company>li:last-child{border-right-width:2px;}
.benefit.company li .point{position:absolute;top:15px;left:15px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;width:70px;height:70px;padding-top:5px;
	color:#fff;font-size:14px;background:linear-gradient(45deg,#f08544,#ffa126);
	mask:url(/res/img/component/icon_octagon-473f38d9b209f42368e450f9bd265e7c.svg) 50%/contain no-repeat;-webkit-mask:url(/res/img/component/icon_octagon-473f38d9b209f42368e450f9bd265e7c.svg) 50%/contain no-repeat;}
.benefit.company li .point b{display:block;font-size:18px;font-weight:bold;}
.benefit.company>li li::before{background-color:#f08544;}
.benefit.company>li>.title{color:#f08544;}
.text-orange{color:#f08544!important;}
.text-ruby{color:#fe3b0b!important;}

.benefit .quarter{max-width:25%;}
.benefit .quarter:last-child{border-right-color:#f08544;}

.tab-title h4{margin-left:20px;margin-bottom:15px;}

.dl-table-chubby dd>div{width:100%;}
.dl-table-chubby dd>div>strong{display:block;margin-bottom:10px;font-size:18px;}
.dl-table-chubby dd>div>strong b{font-family:Verdana;}
.dl-table-chubby dd>div>p{margin-bottom:10px;}
.event-area{padding-top:15px;border-top:dashed 1px #ddd;}
.event-area input{width:300px;height:38px;margin:10px 0;padding:0;border:1px solid #dbdbdb;border-radius:4px;color:#585858;background-color:#fff;}
.event-area button{width:80px;height:38px;margin-left:5px;border-radius:4px;color:#fff;transition:.3s;}
.event-area .btn-purple{background-color:#673ab7;}
.event-area .btn-purple:hover,.event-area .btn-purple:active{background-color:#6f21a2;}
.event-area .btn-blue{background-color:#39359f;}
.event-area .btn-blue:disabled{background-color:grey;}
.event-area .btn-blue:hover,.event-area .btn-blue:active{background-color:#333;}
#eventCompleteArea{padding:20px;text-align:center;background-color:rgba(137,52,250,.05);}
.event-target-p{margin-bottom:10px;}
.event-target-strong{padding: 0 5px;border: 1px solid;font-size: 18px;margin-bottom:10px;}
.cancel {
    position: relative;
    padding-bottom: 18px;
}
.cancel::before{
    content: "";
    display: block;
    position: absolute;
    top: 78px;
    left: 44px;
    width: 148px;
    right: 0;
    height: 2px;
    background-color: #ff002b;
}

@media only all and (max-width:1199px){
	.title-wrapper>.title{width:auto;flex-direction:column;padding:70px 0 20px 0;}
	.title-wrapper>.title>h2{font-size:32px;font-weight:500;}
	.title-wrapper>.title>p{height:auto;text-align:center;padding-top:30px;padding-left:0;padding-bottom:20px;}
	.title-wrapper>.title>p::before{top:14px;left:calc(50% - 15px);}
	.payment-completion{height:auto; padding:0 0 2em 0;}
	.completion-info *{word-break:keep-all;}
	.completion-info::before,.payment-completion::after{display:none;}
	.completion-info h3{padding:150px 30px 0 30px;font-size:2rem;background-size:auto 130px;}
	.completion-info h3::before{width:34px;height:34px;}
	.completion-info p{padding:0 30px;font-size:1rem;line-height:1.5rem;}

	.my-status li>div .label,.my-status .mail .label{font-size:.9rem;}
	.my-status li>div{flex-flow:row wrap!important;}
	.my-status .mail.certify{height:auto;}
	.my-status .mail p{margin:1em 0;font-size:.8rem;line-height:130%;}
	.tab-box>.tab-list>li{width:calc(50% + 1px);}

	.modal .my-status .mail{height:auto!important;}
	.modal .my-status li>div+div{margin-top:1em;}
}

@media only all and (max-width:998px){
	.benefit{flex-flow:column nowrap;}
	.benefit>li{padding:1em 1em 2em 1em;border-right-color:#8f55e2;border-bottom-color:#ddd;}
	.benefit>li::before{width:30px;height:30px;}
	.benefit>li+li{border-top:0;border-left:solid 1px #8f55e2;}
	.benefit>li:last-child{border-bottom:solid 1px #8f55e2;}
	.benefit>li>sup{margin-bottom:1em;font-size:.8rem;}
	.benefit>li>.title{font-size:1.1rem;}
	.benefit>li br{display:inline;content:" ";}
	.benefit>li br::after{content:" ";}
	.benefit .quarter{max-width:100%;}
	.benefit.company>li{border-right-color:#f08544;border-right-width:2px;border-bottom-color:#ddd;border-bottom-width:1px;}
	.benefit.company>li+li{border-top:0;}
	.benefit.company>li:last-child{border-bottom:solid 2px #f08544;}
	.event-area input{width:100%;}
	.event-area button+p{margin-top:1em;}
}

@media only all and (max-width:840px){
	.my-status>.info{flex-direction:column;justify-content:center;min-height:60px;}
	.my-status>.info>.i1{margin-bottom:.2em;}
	.my-status>.info>.i2{margin-left:0;border-left:0;padding-left:0;}
	.my-status>ul>li{align-items:center;padding:1em 0;width:auto;flex:1;}
	.my-status>ul>li:nth-child(2){flex:2;}
	.my-status>ul>li>.label{margin-bottom:.2em;font-size:.9rem;}
	.my-status>ul>li>strong{font-size:1rem;text-align:center;font-weight:bold;line-height:1.2rem;}
	.dl-table-chubby>dt{width:30%;padding:1em .5em;}
	.dl-table-chubby>dd{flex-wrap:wrap;width:70%;padding:1em;}
	.dl-table-chubby>dd>em{margin-bottom:.3em;}
	.dl-table-chubby>dd>*+*:not(small){margin-top:.5em}
	.dl-table-chubby>dd>small{margin-left:.5em;}
	.dl-table-chubby>dd>input+span,.dl-table-chubby>dd>.info{margin-left:0;}

	.contents-wrapper.edu .my-status>ul>li{align-items:flex-start;padding:1em;}
	.contents-wrapper.edu .my-status>ul>li small{margin-top:1em;}
	.my-status li>div{display:block;width:100%;}
	.my-status li>div input{width:calc(100% - 125px);height:40px;font-size:.9em;}
	.my-status li>div input+button{width:90px;height:40px;margin-left:5px;padding:0;text-align:center;font-size:.9em;}
	.my-status li>div .timeout{width:100%;margin:1em 0 0 0;text-align:center;}
	.my-status li>div .label{display:block;width:100%;margin:0;margin-bottom:.5em;}
	.my-status .mail{height:auto;}
	.my-status .mail>.btn{width:100%;height:50px;margin:0;margin-top:1em;font-size:1em;}
	.my-status .result-box{width:100%;text-align:center;}
	.my-status .btn+.btn{margin-left:0;margin-top:.5em;}
}

@media only all and (max-width:599px){
	.title-wrapper{position:relative;display:block;width:100%;}
	.title-wrapper>.title{padding-top:140px;}
	.title-wrapper>.button-area{top:60px;}
	#modal_edu_payment .title-wrapper>.title{width:auto;padding-top:20px;}
	.button-area{display:block;padding-top:0;text-align:center;}
	.my-status li>div input{width:calc(100% - 102px);}
	.my-status .mail>input[type=text]{width:100%;height:40px;font-size:1em;}
	.my-status .mail>span{font-size:1em;}
	.result-box p{font-size:.9rem;}
	.tab-box>.tab-list>li>.btn{flex-flow:column wrap;padding:0 10px;word-break:keep-all;}
	.icon-youtube-red::before{display:inline-block;}
}