.main .container {
    min-width: 1180px
}

.main .container .titWrap {
    text-align: center
}

.main .container .titWrap .tit {
    color: #222;
    font-size: 50px;
    font-weight: 500;
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s
}

.main .container .titWrap .txt {
    margin-top: 20px;
    color: #666;
    font-size: 20px;
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s .2s
}

.main .container .list {
    display: flex;
    margin: 100px -15px 0
}

.main .container .list li {
    width: 25%;
    transform: translateY(30%);
    transition: all 1s;
    opacity: 0
}

.main .container .list li:nth-of-type(1) {
    transition-delay: .1s
}

.main .container .list li:nth-of-type(2) {
    transition-delay: .2s
}

.main .container .list li:nth-of-type(3) {
    transition-delay: .3s
}

.main .container .list li:nth-of-type(4) {
    transition-delay: .4s
}

.main .container .list a {
    display: block;
    margin: 0 15px
}

.main .container .active .titWrap .tit, .main .container .active .titWrap .txt {
    transform: translateY(0);
    opacity: 1
}

.main .container .active .list li {
    transform: translateY(0);
    opacity: 1
}

.main .container .content {
    margin: 150px auto 155px
}

.main .container .keyVisual {
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    overflow: hidden
}

.main .container .keyVisual .str {
    position: relative;
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
    color: #fff
}

.main .container .keyVisual .vodWrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: 50% 0;
    transform: scale(1.2);
    transition: transform 10s
}

.main .container .keyVisual .str .txt1 {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -.4px
}

.main .container .keyVisual .str .txt2 {
    margin-bottom: 30px;
    font-size: 60px;
    font-weight: 500;
    line-height: 74px;
    letter-spacing: -.4px
}

.main .container .keyVisual .str span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 3s, opacity 3s
}

.main .container .keyVisual .str span:nth-of-type(2) {
    transition-delay: .4s
}

.main .container .keyVisual .str span:nth-of-type(3) {
    transition-delay: .6s
}

.main .container .keyVisual .str span:nth-of-type(4) {
    transition-delay: .8s
}

.main .container .keyVisual .str span:nth-of-type(5) {
    transition-delay: 1s
}

.main .container .keyVisual .str span:nth-of-type(6) {
    transition-delay: 1.2s
}

.main .container .keyVisual .str span:nth-of-type(7) {
    transition-delay: 1.4s
}

.main .container .keyVisual .str span:nth-of-type(8) {
    transition-delay: 1.6s
}

.main .container .keyVisual .str span:nth-of-type(9) {
    transition-delay: 1.8s
}

.main .container .keyVisual .str span:nth-of-type(10) {
    transition-delay: 2s
}

.main .container .keyVisual .str span:nth-of-type(11) {
    transition-delay: 2.2s
}

.main .container .keyVisual .str span:nth-of-type(12) {
    transition-delay: 2.4s
}

.main .container .keyVisual .str span:nth-of-type(13) {
    transition-delay: 2.6s
}

.main .container .keyVisual .str span:nth-of-type(14) {
    transition-delay: 2.8s
}

.main .container .keyVisual .str span:nth-of-type(15) {
    transition-delay: 3s
}

.main .container .keyVisual .str span:nth-of-type(16) {
    transition-delay: 3.2s
}

.main .container .keyVisual .str span:nth-of-type(17) {
    transition-delay: 3.4s
}

.main .container .keyVisual .str span:nth-of-type(18) {
    transition-delay: 3.6s
}

.main .container .keyVisual .str span:nth-of-type(19) {
    transition-delay: 3.8s
}

.main .container .keyVisual .str span:nth-of-type(20) {
    transition-delay: 4s
}

.main .container .keyVisual .str span:nth-of-type(21) {
    transition-delay: 4.2s
}

.main .container .keyVisual .str span:nth-of-type(22) {
    transition-delay: 4.4s
}

.main .container .keyVisual .str span:nth-of-type(23) {
    transition-delay: 4.6s
}

.main .container .keyVisual .str span:nth-of-type(24) {
    transition-delay: 4.8s
}

.main .container .keyVisual .str span:nth-of-type(25) {
    transition-delay: 5s
}

.main .container .keyVisual .str span:nth-of-type(26) {
    transition-delay: 5.2s
}

.main .container .keyVisual .str span:nth-of-type(27) {
    transition-delay: 5.4s
}

.main .container .keyVisual .str span:nth-of-type(28) {
    transition-delay: 5.6s
}

.main .container .keyVisual .str span:nth-of-type(29) {
    transition-delay: 5.8s
}

.main .container .keyVisual .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: 50% 0;
    transform: scale(1.2);
    transition: transform 10s
}

.main .container .keyVisual .scroll {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 40px;
    border-left: 1px solid #ccc
}

.main .container .keyVisual .scroll span {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 14px;
    color: #fff
}

.main .container .keyVisual.active .img {
    transform: scale(1)
}

.main .container .keyVisual.active .str span {
    opacity: 1;
    transform: translateY(0)
}

.main .container .mainSection1 {
    padding: 150px 0;
    background: #F5F5F5
}

.main .container .mainSection1 .content {
    margin: 0 auto
}

.main .container .mainSection1 .list li {
    margin: 0 15px
}

.main .container .mainSection1 .list .txt {
    margin-top: 30px;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -.4px;
    color: #222;
    text-align: center
}

/*  2022-06-09 프로그램안내 추가  */
.main .container .mainSection {
    padding: 150px 0;
    background: #2B2B2B;
}
.main .container .mainSection .content {
    margin: 0 auto
}
.main .container .mainSection .tit {
    margin-top: 20px;
    color: #fff;
    font-size: 50px;
    font-weight: 500;
    line-height: 60px
}
.main .container .mainSection .txt {
    margin-top: 20px;
    color: #fff;
    font-size: 24px;
    line-height: 34px
}
.main .container .mainSection .list {
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.main .container .mainSection .list li {
    position:relative;
    width:400px;
    margin:0 40px;
}
.main .container .mainSection .img {
    width:400px;
    height:400px;
    border-radius:8px;
    box-sizing:border-box;
    overflow:hidden;
}
.main .container .mainSection .ment {
    margin:20px auto;
    text-align:center;
    color:#fff;
    font-size:24px;
    line-height:26px;
}
.main .container .mainSection .ment .tit {
    margin:20px auto 10px;
    color:#ef4d7f;
    font-size:30px;
}
.main .container .mainSection .ment .txt {
    margin:0 auto;
    line-height:30px;
    font-size:22px;
    font-weight:200;
}
.main .container .mainSection .ment .btnBasic3 {
    margin:40px auto 0;
    background:none;
    border-color:#fff;
    width:160px;
}
/* //2022-06-09 프로그램안내 추가 */

/* 23-05-25 프로그램 안내 추가 ▼ */
.main .container .mainSection0 { padding: 150px 0; background: #2B2B2B; }
.main .container .mainSection0 .content { margin: 0 auto; }
.main .container .mainSection0 .tit { margin-top: 20px; color: #fff; font-size: 50px; font-weight: 500; line-height: 60px; }
.main .container .mainSection0 .txt { margin-top: 20px; color: #fff; font-size: 24px; line-height: 34px; }
.main .container .mainSection0 .list { display:flex; flex-direction:row; justify-content:center; }
.main .container .mainSection0 .list li {	position:relative; margin:0 20px; }
.main .container .mainSection0 .img { border-radius:8px; box-sizing:border-box; overflow:hidden; }
.main .container .mainSection0 .ment { margin:20px auto; text-align:center; color:#fff; font-size:24px; line-height:26px; }
.main .container .mainSection0 .ment .tit { margin:20px auto 10px; color:#ef4d7f; font-size:30px; }
.main .container .mainSection0 .ment .txt { margin:0 auto; line-height:30px; font-size:22px; font-weight:200; }
.main .container .mainSection0 .ment .btnBasic3 { margin:40px auto 0; background:none; border-color:#fff; width:160px; }
/* 23-05-25 프로그램 안내 추가 ▲ */

.main .container .mainSection2 {
    padding: 150px 0
}

.main .container .mainSection2 .slideContainer {
    margin-top: 100px
}

.main .container .mainSection2 .slideContainer .content {
    display: flex;
    margin: 0 auto
}

.main .container .mainSection2 .slideContainer .cont {
    width: 400px;
    opacity: 0;
    transform: translateX(-50%);
    transition: all 1s .5s
}

.main .container .mainSection2 .slideContainer .num {
    color: #ddd;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 80px;
    font-weight: 700;
    line-height: 1
}

.main .container .mainSection2 .slideContainer .tit {
    margin-top: 18px;
    color: #111;
    font-size: 40px;
    font-weight: 500;
    line-height: 1
}

.main .container .mainSection2 .slideContainer .txt {
    margin-top: 20px;
    color: #666;
    font-size: 20px
}

.main .container .mainSection2 .slideContainer .btnBasic2 {
    margin-top: 30px;
    font-size: 17px
}

.main .container .mainSection2 .slideContainer .img {
    margin-left: auto;
    opacity: 0;
    transform: translateX(50%);
    transition: all 1s .5s
}

.main .container .mainSection2 .slideContainer .btnNav {
    position: relative;
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1s 1s
}

.main .container .mainSection2 .slideContainer .btnNav .btnBasic1 {
    position: absolute;
    z-index: 2;
    bottom: 0
}

.main .container .mainSection2 .slideContainer .btnNav .btnNext {
    left: 120px
}

.main .container .mainSection2.active .btnNav {
    opacity: 1;
    transform: translateY(0)
}

.main .container .mainSection2.active .swiper-slide-active .cont, .main .container .mainSection2.active .swiper-slide-active .img {
    opacity: 1;
    transform: translateX(0)
}

.main .container .mainSection3 {
    position: relative;
    background: url("../images/main/bg_main4.jpg") no-repeat 100% 50%;
    background-size: cover
}

.main .container .mainSection3 .btnNav {
    position: relative;
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    margin: 0 auto;
    opacity: 0;
    transition: all 1s
}

.main .container .mainSection3 .btnNav .btnBasic1 {
    position: absolute;
    z-index: 2;
    top: 370px
}

.main .container .mainSection3 .btnNav .btnNext {
    right: -90px
}

.main .container .mainSection3 .btnNav .btnPrev {
    left: -90px
}

.main .container .mainSection3 .content {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 800px;
    margin: 0 auto;
    padding-left: 85px
}

.main .container .mainSection3 .txt1 {
    color: #222;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.4px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s .5s
}

.main .container .mainSection3 .txt2 {
    margin-top: 100px;
    color: #222;
    font-weight: 500;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -.4px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s .7s
}

.main .container .mainSection3 .txt3 {
    margin-top: 30px;
    color: #666;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -.2px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s .8s
}

.main .container .mainSection3 .btnBasic2 {
    margin-top: 60px;
    background: none;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s .9s
}

.main .container .mainSection3 figure {
    position: absolute;
    right: 50px;
    bottom: 0
}

.main .container .mainSection3 figure .img {
    opacity: 0;
    transition: all 1s 1s
}

.main .container .mainSection3 figure figcaption div {
    position: absolute;
    bottom: 55px;
    width: 155px;
    text-align: center;
    color: #666;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.4px;
    letter-spacing: 3px
}

.main .container .mainSection3 figure figcaption .val {
    display: block;
    font-size: 40px;
    letter-spacing: 0
}

.main .container .mainSection3 figure figcaption .val .num {
    font-size: 82px;
    font-weight: 500;
    line-height: 94px;
    letter-spacing: -.4px
}

.main .container .mainSection3 figure figcaption .before {
    left: 50px;
    transform: translateX(-50px);
    opacity: 0;
    transition: all 1s 1.1s
}

.main .container .mainSection3 figure figcaption .after {
    right: 50px;
    color: #FF6E91;
    transform: translateX(50px);
    opacity: 0;
    transition: all 1s 1.1s
}

.main .container .mainSection3.active .btnNav {
    opacity: 1
}

.main .container .mainSection3.active .swiper-slide-active .txt1, .main .container .mainSection3.active .swiper-slide-active .txt2, .main .container .mainSection3.active .swiper-slide-active .txt3, .main .container .mainSection3.active .swiper-slide-active .btnBasic2 {
    transform: translateX(0);
    opacity: 1
}

.main .container .mainSection3.active .swiper-slide-active figure .img {
    opacity: 1
}

.main .container .mainSection3.active .swiper-slide-active figure .before, .main .container .mainSection3.active .swiper-slide-active figure .after {
    transform: translateX(0);
    opacity: 1
}

.main .container .mainSection4 .slideContainer {
    margin: 80px -22px 0;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s .5s
}

.main .container .mainSection4 .boxBtnGroup {
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s .5s
}

.main .container .mainSection4.active .boxBtnGroup, .main .container .mainSection4.active .slideContainer {
    transform: translateY(0);
    opacity: 1
}

.main .container .mainSection4 .swiper-slide a {
    position: relative;
    display: block;
    margin: 0 22px
}

.main .container .mainSection4 .swiper-slide a .overlap {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #EF4D74
}

.main .container .mainSection4 .swiper-slide a .circle {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 20px;
    font-weight: 500
}

.main .container .mainSection4 .swiper-slide a .circle .num {
    font-size: 24px
}

.main .container .mainSection4 .swiper-slide .imgArea img {
    border: 1px solid #ddd
}

.main .container .mainSection4 .swiper-slide .txtArea {
    margin-top: 20px;
    color: #222;
    font-size: 22px;
    font-weight: 400
}

.main .container .mainSection4 .swiper-slide .etc {
    display: flex;
    margin-top: 20px
}

.main .container .mainSection4 .swiper-slide .etc span {
    line-height: 1;
    font-size: 17px;
    color: #666
}

.main .container .mainSection4 .swiper-slide .etc span ~ span {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #ddd
}

.main .container .mainSection4 .control {
    position: relative;
    margin: 80px 22px 30px
}

.main .container .mainSection4 .control .btnNav {
    position: absolute;
    bottom: -28px;
    left: 0
}

.main .container .mainSection4 .control .btnNav .btnNext {
    margin-left: 8px
}

.main .container .mainSection4 .control .slidePagination {
    margin-left: 165px
}

.main .container .mainSection5 {
    display: flex;
    min-width: 1180px;
    height: 540px;
    background: #373737;
    overflow: hidden
}

.main .container .mainSection5 > div {
    width: 50%;
    display: flex;
    box-sizing: border-box
}

.main .container .mainSection5 .img {
    justify-content: flex-end;
    background: none !important;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 1s
}

.main .container .mainSection5 .img .vodWrap {
    width: 960px
}

.main .container .mainSection5 .cont {
    width: 50%;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 160px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s
}

.main .container .mainSection5 .cont .tit {
    color: #EF4D74;
    font-size: 24px
}

.main .container .mainSection5 .cont .txt {
    margin-top: 20px;
    color: #fff;
    font-size: 50px;
    font-weight: 500;
    line-height: 60px
}

.main .container .mainSection5 .cont .txt2 {
    margin-top: 20px;
    color: #999;
    font-size: 20px;
    line-height: 32px
}

.main .container .mainSection5 .cont .btnBasic3 {
    margin-top: 40px;
    background: none;
    border-color: #fff
}

.main .container .mainSection5.active .img, .main .container .mainSection5.active .cont {
    transform: translate(0, 0);
    opacity: 1
}

.main .container .mainSection6 .title {
    color: #222;
    font-size: 40px;
    font-weight: 500;
    text-align: center;
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s
}

.main .container .mainSection6 .content ~ .content {
    margin-top: 185px
}

.main .container .mainSection6 .benefitList {
    display: flex;
    margin: 65px -15px 0
}

.main .container .mainSection6 .benefitList li {
    position: relative;
    width: 33.33%;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s
}

.main .container .mainSection6 .benefitList li:nth-of-type(2) {
    transition-delay: .2s
}

.main .container .mainSection6 .benefitList li:nth-of-type(3) {
    transition-delay: .4s
}

.main .container .mainSection6 .benefitList li:before {
    content: "";
    display: block;
    padding-top: 100%
}

.main .container .mainSection6 .benefitList li.item1 .txt {
    background: url("../images/main/img_main7_1.png") no-repeat 50% 0
}

.main .container .mainSection6 .benefitList li.item2 .txt {
    background: url("../images/main/img_main7_2.png") no-repeat 50% 0
}

.main .container .mainSection6 .benefitList li.item3 .txt {
    background: url("../images/main/img_main7_3.png") no-repeat 50% 0
}

.main .container .mainSection6 .benefitList .inner {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #ddd
}

.main .container .mainSection6 .benefitList .txt {
    padding-top: 152px
}

.main .container .mainSection6 .benefitList .txt span {
    font-size: 18px;
    color: #666
}

.main .container .mainSection6 .benefitList .txt strong {
    display: block;
    color: #222;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.2
}

.main .container .mainSection6 .benefitList .btn {
    margin-top: 30px
}

/* 23-05-23 혜택 부분 수정 추가 ▼ */
.main .container .mainSection6 .benefitList li.item1 .icon { background: url("../images/main/img_main7_1.png") no-repeat 50% 8%;background-size: 100px; }
.main .container .mainSection6 .benefitList li.item2 .icon { background: url("../images/main/img_main7_2.png") no-repeat 50% 8%; background-size: 100px; }
.main .container .mainSection6 .benefitList li.item3 .icon { background: url("../images/main/img_main7_3.png") no-repeat 50% 8%; background-size: 100px; }
.main .container .mainSection6 .benefitList li.item4 .icon { background: url("../images/main/img_main7_4.png") no-repeat 50% 8%; background-size: 100px; }
.main .container .mainSection6 .benefitList .icon { padding-top: 120px; }
.main .container .mainSection6 .benefitList .icon strong { font-size: 25px; }
.main .container .mainSection6 .benefitList .btnM { margin-top: 15px; }
/* 23-05-23 혜택 부분 수정 추가 ▲ */

.main .container .mainSection6 .benefitList .btnBasic2 {
    background: none
}

.main .container .mainSection6 .storeInfoWrap {
    margin-top: 60px
}

.main .container .mainSection6 .stroeMenuWrap {
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s .5s
}

.main .container .mainSection6 .stroeMenuWrap .boxTab {
    margin: 0
}

.main .container .mainSection6 .storeInfoCont {
    margin-top: 20px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s 1s
}

.main .container .mainSection6 .info {
    display: none;
    border: 1px solid #ddd
}

.main .container .mainSection6 .info .cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    flex-direction: column
}

.main .container .mainSection6 .info .cont .tit {
    color: #222;
    font-size: 34px;
    font-weight: 500
}

.main .container .mainSection6 .info .cont .txt {
    font-size: 18px;
    margin: 10px 0 40px
}

.main .container .mainSection6 .info .slideContainer {
    position: relative;
    width: 50%
}

.main .container .mainSection6 .info .slideContainer .slideNav {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0
}

.main .container .mainSection6 .info .slideContainer .slideNav button {
    position: absolute;
    transform: translateY(-50%)
}

.main .container .mainSection6 .info .slideContainer .slideNav .btnPrev {
    left: 0
}

.main .container .mainSection6 .info .slideContainer .slideNav .btnNext {
    right: 0
}

.main .container .mainSection6 .info .slideContainer.swiper-container-horizontal .slideNav {
    display: block
}

.main .container .mainSection6 .info .slideContainer .slidePagination {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 40px;
    left: 0;
    height: 0;
    text-align: center
}

.main .container .mainSection6 .info.active {
    display: flex
}

.main .container .mainSection6 .active .title, .main .container .mainSection6 .active .stroeMenuWrap, .main .container .mainSection6 .active .storeInfoCont {
    transform: translateY(0);
    opacity: 1
}

.main .container .mainSection6 .active .benefitList li {
    transform: translateX(0);
    opacity: 1
}

.main .container .mainSection7 {
    position: relative;
    height: 540px;
    overflow: hidden;
    background: #000
}

.main .container .mainSection7 .content {
    position: relative;
    height: 100%;
    margin: 0 auto;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #fff;
    text-align: center
}

.main .container .mainSection7 .txt {
    font-size: 40px;
    font-weight: 500;
    transform: translateY(100%);
    opacity: 0;
    transition: all 2s
}

.main .container .mainSection7 .btn {
    display: flex;
    margin-top: 60px
}

.main .container .mainSection7 .btn a {
    position: relative;
    display: inline-block;
    width: 350px; /* 22-11-29 수정 */
    height: 100px;
    margin: 0 10px;
    box-sizing: border-box;
    padding: 35px 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s
}

.main .container .mainSection7 .btn a span {font-size: 15px;} /* 22-11-29 추가 */

.main .container .mainSection7 .btn a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: #fff url("../images/main/bgLinkArrow.png") no-repeat 50% 50%;
    border-radius: 50%
}

.main .container .mainSection7 .btn a:nth-of-type(2) {
    transition-delay: .2s
}

.main .container .mainSection7 .btn a:nth-of-type(3) {
    transition-delay: .4s
}

.main .container .mainSection7 .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50% 0;
    background-size: cover;
    transform: scale(1.5);
    opacity: 0;
    transition: all 5s
}

.main .container .mainSection7.active .txt {
    transform: translateY(0);
    opacity: 1
}

.main .container .mainSection7.active .btn a {
    transform: translateX(0);
    opacity: 1
}

.main .container .mainSection7.active .img {
    transform: scale(1);
    opacity: 1
}

.graph.type1 {
    position: relative;
    margin-left: 30px;
    display: flex;
    height: 206px
}

.graph.type1 .bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.graph.type1 .bg div {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #eee
}

.graph.type1 .bg div span {
    position: absolute;
    top: 0;
    left: -60px;
    transform: translateY(-50%);
    width: 50px;
    font-size: 12px;
    color: #999;
    text-align: right
}

.graph.type1 .bg div:last-child {
    background: #999
}

.graph.type1 .bg .stan {
    height: auto;
    background: rgba(254, 220, 229, 0.3);
    z-index: 2
}

.graph.type1 .item {
    position: relative;
    z-index: 3;
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: flex-end;
    color: #999;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 20px
}

.graph.type1 .item ~ .item {
    background: rgba(55, 55, 55, 0.04);
    color: #FF6E91
}

.graph.type1 .item ~ .item .bar {
    background: #FF6E91
}

.graph.type1 .txt {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%)
}

.graph.type1 .bar {
    position: relative;
    width: 30px;
    height: 0;
    background: #999
}

.graph.type1 .num {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500
}

.graph.type2 {
    position: relative;
    width: 310px;
    margin: 0 auto
}

.graph.type2 .bg {
    position: absolute;
    z-index: 5;
    top: 0;
    left: -125px;
    width: 250px;
    height: 250px
}

.graph.type2 .bg > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%)
}

.graph.type2 .bg > div span {
    position: absolute;
    top: -8px;
    left: -35px;
    width: 30px;
    font-size: 12px;
    color: #999;
    text-align: right
}

.graph.type2 .bg > div > div {
    overflow: hidden
}

.graph.type2 .bg > div > div:after {
    content: "";
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 100%;
    border-radius: 50%;
    transform: translateX(-50%)
}

.graph.type2 .graphCircle {
    position: relative;
    width: 100%;
    border-left: 1px solid #999;
    overflow: hidden
}

.graph.type2 .graphCircle .circle {
    position: relative;
    width: 250px;
    height: 250px;
    margin-left: -125px;
    border-radius: 50%
}

.graph.type2 .graphCircle .circle .line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%
}

.graph.type2 .graphCircle .circle .line:after, .graph.type2 .graphCircle .circle .line:before, .graph.type2 .graphCircle .circle .line div {
    content: "";
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1)
}

.graph.type2 .graphCircle .circle .line:before {
    transform: rotate(-45deg)
}

.graph.type2 .graphCircle .circle .line:after {
    transform: rotate(45deg)
}

.graph.type2 .graphCircle .item ~ .item .bar {
    z-index: 3
}

.graph.type2 .graphCircle .item ~ .item .bar:after {
    background: #FF6E91
}

.graph.type2 .graphCircle .item ~ .item .bar .val {
    top: auto;
    bottom: 10%;
    color: #EF4D74
}

.graph.type2 .graphCircle .item ~ .item .bar .val:before {
    content: "";
    border-color: #EF4D74
}

.graph.type2 .graphCircle .bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.graph.type2 .graphCircle .bar .val {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 310px;
    white-space: nowrap;
    text-align: right;
    color: #999;
    letter-spacing: -.5px;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 20px
}

.graph.type2 .graphCircle .bar .val > span {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 140px;
    box-sizing: border-box;
    padding: 0 5px 0 10px;
    background: #fff;
    text-align: left
}

.graph.type2 .graphCircle .bar .val > span .num {
    font-weight: 500
}

.graph.type2 .graphCircle .bar .val:before {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #999;
    margin-top: 13px
}

.graph.type2 .graphCircle .bar:before {
    content: "";
    display: block;
    padding-top: 100%
}

.graph.type2 .graphCircle .bar:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 100%;
    padding-top: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ccc
}

.graph.type3 {
    position: relative;
    flex: 1;
    border: 1px solid #eee;
    height: 120px
}

.graph.type3 .bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.graph.type3 .bg > div {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #eee
}

.graph.type3 .bg > div:last-child {
    display: none
}

.graph.type3 .bg > div span {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 12px;
    color: #999
}

.graph.type3 .item {
    margin-top: 44px
}

.graph.type3 .item ~ .item {
    margin-top: 30px
}

.graph.type3 .item ~ .item .bar {
    background: #FF6E91;
    color: #FF6E91
}

.graph.type3 .bar {
    position: relative;
    z-index: 2;
    display: block;
    height: 10px;
    background: #999;
    color: #999
}

.graph.type3 .bar > span {
    position: absolute;
    top: -30px;
    right: 0;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 17px
}

.graph.type3 .bar > span .num {
    margin-left: 5px;
    font-size: 20px
}

.graph.fatMap {
    position: relative;
    width: 300px;
    height: 245px;
    margin: 0 auto;
    transform: translateX(25px);
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 20px
}

.graph.fatMap:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 365px;
    height: 269px;
    background: url("../images/story/bgGraph.png") no-repeat
}

.graph.fatMap [class*="item"] {
    position: absolute;
    padding-left: 25px;
    transform: translateY(50%)
}

.graph.fatMap [class*="item"] .num {
    font-weight: 500
}

.graph.fatMap .item1 {
    background: url("../images/story/iconFatPin1.png") no-repeat 0 50%;
    color: #999
}

.graph.fatMap .item2 {
    background: url("../images/story/iconFatPin2.png") no-repeat 0 50%;
    color: #FF6E91
}

.bannerBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

/*  2022-05-26 프로그램 소개 페이지 추가 */
.content_wide {width:100%; min-height:1180px;}
/*  상단  */
.program_topWrap {width:100%; height:500px; background:url("../images/program/juvis_program_main_bg.jpg") center repeat;} /* 22-09-06 수정 */
.program_topWrap .program_titleWrap {position:relative; width:1390px; margin:0 auto;}
.program_topWrap .program_titleWrap .program_tit {padding:40px 0 0 80px;}
.program_topWrap .program_titleWrap .program_img {
    position:absolute;
    left:400px; /* 22-09-06 수정 */
    top:20px;
    opacity:0;
    /* 애니메이션 이름 */
    animation-name: Mmodel;
    animation-delay:1.2s;
    animation-duration:2s;
    animation-duration: leaner;
    animation-direction:alternate;
    animation-fill-mode: forwards;
}
/* //상단 */
/* 애니메이션 */ /* 22-09-06 수정 ▼ */
@-webkit-keyframes Mmodel {
    0% {
        left:400px;
    }
    100% {
        left:650px;
        opacity:1;
    }
} /* 22-09-06 수정 ▲ */

/*  텝  */
.program_conWrap.NboxTab {width:100%;}
.program_conWrap.NboxTab .btnTabWrap {width:100%; background-color:#2b2b2b;}
.program_conWrap.NboxTab .btnTabWrap .NbtnTab {width:1390px; height:94px; margin:0 auto; display: flex; flex-direction: row; justify-content: center;}
.program_conWrap.NboxTab .btnTabWrap .NbtnTab .itemBtn {display:block; width:calc(100% / 3); }
.program_conWrap.NboxTab .btnTabWrap .NbtnTab .itemBtn button {position:relative; width:100%; height:94px; box-sizing:border-box; color: #fff; font-size:20px; font-weight:500; text-align: center; line-height:1; letter-spacing: -.4px; border-right:1px solid #808080;}
.program_conWrap.NboxTab .btnTabWrap .NbtnTab .itemBtn button.active {background-color:#ef4d7f;}
.program_conWrap.NboxTab .btnTabWrap .NbtnTab .itemBtn:last-child button {border-right:0;}
.program_conWrap.NboxTab .btnTabWrap .NbtnTab:after {display: none;}
/* //텝 */

/*  텝컨텐츠  */
.NtabContent .innerTab {}
.NtabContent .innerTab .boxTab {}
.NtabContent .innerTab .boxTab .boxTabWrap .SbtnTab {width:1390px; height:60px; margin:0 auto; display: flex; flex-direction: row; justify-content: center;}
.NtabContent .innerTab .boxTab .boxTabWrap .SbtnTab .itemBtn {width:calc(100% / 2);}
.NtabContent .innerTab .boxTab .boxTabWrap .SbtnTab:first-child .itemBtn {width:calc(100% / 4);}
.NtabContent .innerTab .boxTab .boxTabWrap .SbtnTab .itemBtn button {height:60px;}
/*  모델  */
.program_con_model_wrap {width:100%; min-height:800px;}
.program_con_model_title {width:1390px; margin:100px auto; text-align:center; color:#2b2b2b;}
.program_con_model_title .tit {font-size:54px; font-weight:700;}
.program_con_model_title .txt {margin-top:40px; font-size:24px; line-height:26px;}
.program_con_model_title .subtxt {margin-top:20px; font-size:16px; line-height:26px; color:#ef4d74;} /* 22-08-17 추가 */
.program_con_model_img {width:1390px; margin:0 auto 150px; background:url("../images/program/program_con_model_bg.png") no-repeat 0 40%; position:relative; text-align:center;}
.program_con_model_img .model_name {position:absolute; left:30px; top:225px;}
.program_con_model_img .model_name strong {font-weight:700;}
.program_con_model_img .model_tag .fadeinleft {opacity:0; margin-left:-300px;}
.program_con_model_img .model_tag .fadeinright {opacity:0; margin-right:-300px;}
.program_con_model_img .model_tag .tag {position:absolute; height:46px; padding:12px 22px 0; border:1px solid #ef4d7f; background-color:#fff; border-radius:46px; font-size:24px; color:#ef4d7f; text-align:center; box-shadow:0 10px 10px rgba(0,0,0,.2);}
.program_con_model_img .model_tag .tag.N01 {top:50px; left:460px; transform:translate(-100px, 0);}
.program_con_model_img .model_tag .tag.N02 {top:210px; right:400px; transform:translate(100px, 0);}
.program_con_model_img .model_tag .tag.N03 {top:300px; left:420px; transform:translate(-100px, 0);}
.program_con_model_img .model_tag .tag.N04 {top:400px; right:450px; transform:translate(100px, 0);}
.program_con_model_img .model_tag .tag.N05 {top:400px; right:380px; transform:translate(100px, 0);}
.program_con_model_img .model_tag .tag.N06 {top:50px; left:560px; transform:translate(-100px, 0);}
.program_con_model_img .model_tag .tag.N07 {top:210px; right:500px; transform:translate(100px, 0);}
.program_con_model_img .model_tag .tag.N08 {top:300px; left:520px; transform:translate(-100px, 0);}
.program_con_model_img .model_tag .tag.N09 {top:400px; right:550px; transform:translate(100px, 0);}
.program_con_model_img .model_tag .tag.N10 {top:50px; left:610px; transform:translate(-100px, 0);} /* 22-12-06 추가 ▼ */
.program_con_model_img .model_tag .tag.N11 {top:210px; right:600px; transform:translate(100px, 0);}
.program_con_model_img .model_tag .tag.N12 {top:300px; left:600px; transform:translate(-100px, 0);}
.program_con_model_img .model_tag .tag.N13 {top:400px; right:630px; transform:translate(100px, 0);} /* 22-12-06 추가 ▲ */
/* //모델 */
/*  고객  */
.program_con_customer_wrap {width:100%; min-height:1900px; background:url("../images/program/program_con_customer_bg.png") no-repeat center 0;}
.program_con_customer_box {display:flex; flex-direction:row; justify-content:center; width:1390px; margin:0 auto; padding:110px 0;}
.program_con_customer_img {}
.program_con_customer_con {margin-top:95px;}
.program_con_customer_title {color:#fff;}
.program_con_customer_title .tit {font-size:44px; font-weight:700; line-height:50px;}
.program_con_customer_title .txt {font-size:24px; font-weight:normal; margin:20px 0 60px;}
.program_con_customer_vod {width:849px; height:476px;}
.program_con_ba_box {width:1390px; margin:0 auto; padding-bottom:120px;}
.program_con_ba_title {text-align:center;}
.program_con_ba_title .tit {font-size:44px; font-weight:700; line-height:50px;}
.program_con_ba_title .txt {font-size:24px; font-weight:normal; line-height:30px; margin:20px 0 0;}
/* //고객 */
/*  프로그램 소개  */
.program_con_info_wrap {width:100%; padding:120px 0; background-color:#2b2b2b;}
.program_con_step_wrap {width:1390px; margin:0 auto;}
.program_con_info_title {color:#fff; text-align:center;}
.program_con_info_title .tit {font-size:44px; font-weight:700; line-height:50px;}
.program_con_info_title .txt {font-size:24px; font-weight:normal; line-height:30px; margin:20px 0 60px;}
.pc_note {text-align:center; font-size: 20px; font-weight: normal; line-height: 30px; margin-top: 50px; color:#fff;} /* 23-12-05 추가 */
.program_con_step_img {margin-bottom:160px; text-align:center;}
.program_con_form_wrap {width:1390px; min-height:946px; margin:0 auto; background:url("../images/program/program_con_form_bg.png") no-repeat 0 bottom;}
.program_con_form_con {display:flex; flex-direction:row; justify-content:center; width:975px; margin:0 auto;}
.program_con_form_con .form_con_center {width:644px; margin-top:40px; margin:0 auto;}
.program_con_form_con .form_con_left {display:table;}
.program_con_form_con .form_con_right {display:table;}
.form_con {display:table-cell; vertical-align:middle;}
.form_con .Mcon {width:150px; height:150px; border-radius:100%; border:1px solid #fff; background-color:#2b2b2b; color:#fff; text-align:center; font-size:24px; vertical-align:middle; line-height:150px; margin-bottom:10px;}
.form_con .Mcon:last-child {margin-bottom:0px;}
.form_con .Mcon.Active {border:1px solid #ef4d7f; color:#ef4d7f;}
.program_con_table_wrap {display:flex; flex-direction:row; justify-content:center; width:1390px; margin:0 auto;}
.program_con_table_box {width:800px;}
.food_con_table_box {width:560px; margin-left:28px;}
.program_title{font-size:24px; font-weight:700; color:#fff; margin:20px 0;}
.program_tbl {border-top:2px solid #555; border-bottom:2px solid #555; background-color:#c3c1c1; border-radius:10px; color:#000;}
.program_tbl .point {color:#ef4d7f;}
.program_tbl tr {font-size:20px;}
.program_tbl tr th {padding:20px 0; border-top:1px solid #555; }
.program_tbl tr td {padding:20px; border-top:1px solid #555; background-color:#2b2b2b; color:#fff;}
.program_tbl tr td.Twide {padding:32px 20px;}
/* //프로그램 소개 */
/*  솔루션  */
.program_con_solution_wrap {width:100%; padding:120px 0;}
.program_con_solution_box {}
.program_con_solution_con {display:flex; flex-direction:row; justify-content:center; width:1390px; margin:0 auto; padding-top:100px;}
.program_con_solution_con button {
    position: relative;
    display: block;
    width: 227.5px;  /* 22-08-05수정 */
    height: 320px;
    margin:0 5px;
    text-align: center;
    transition: .6s;
}
.program_con_solution_con button:hover {
    border-radius: 8px;
    background-color: #fff;
    border:1px solid #ccc;
    box-shadow: 0 10px 10px rgba(0,0,0,.2);
    transform: translate(0, -10%);
}
.program_con_solution_con .icon_num {font-size:18px; margin-bottom:10px;}
.program_con_solution_con .icon_stxt {font-size:16px; margin:15px 0 7px;} /* 22-08-05수정 */
.program_con_solution_con .icon_txt {font-size:18px; font-weight:700; line-height:20px;} /* 22-08-05수정 */
/* //솔루션 */
/* //텝컨텐츠 */
/* //2022-05-26 프로그램 소개 페이지 추가*/

.programInfoWrap figure {
    display: flex;
    background: #F5F5F5;
    border-radius: 8px;
    overflow: hidden
}

.programInfoWrap .img {
    width: 50%;
    overflow: hidden
}

.programInfoWrap .img img {
    width: 100%
}

.programInfoWrap figcaption {
    width: 50%;
    text-align: center;
    padding: 100px 0 0
}

.programInfoWrap figcaption .tit {
    color: #222;
    font-weight: 500;
    font-size: 46px;
    line-height: 62px;
    letter-spacing: -.4px
}

.programInfoWrap figcaption .txt {
    margin-top: 60px;
    color: #222;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -.4px
}

.programInfoWrap figcaption .txt > span {
    display: inline-block;
    position: relative;
    padding: 0 35px;
    line-height: 1.2
}

.programInfoWrap figcaption .txt > span:before, .programInfoWrap figcaption .txt > span:after {
    content: "";
    position: absolute;
    top: 0;
    width: 20px;
    height: 14px
}

.programInfoWrap figcaption .txt > span:before {
    left: 0;
    background: url("../images/common/iconLdquo.png") no-repeat
}

.programInfoWrap figcaption .txt > span:after {
    right: 0;
    background: url("../images/common/iconRdquo.png") no-repeat
}

.programInfoWrap figcaption .txt2 {
    margin: 28px 100px 0;
    color: #666;
    font-size: 17px;
    line-height: 28px;
    letter-spacing: -.2px
}

.programInfoWrap .innerTab {
    position: relative
}

.programInfoWrap .innerTab .btnTab {
    position: absolute;
    top: 60px;
    right: 0;
    width: 50%;
    display: inline-block;
    text-align: center;
    border: 0;
    margin: 0
}

.programInfoWrap .innerTab .btnTab:after {
    display: none
}

.programInfoWrap .innerTab .btnTab .itemBtn {
    display: inline-block;
    margin: 0 20px
}

.programInfoWrap .innerTab .btnTab .itemBtn button {
    display: inline-block;
    height: auto;
    background: none;
    color: #ccc;
    font-size: 20px;
    font-weight: 400
}

.programInfoWrap .innerTab .btnTab .itemBtn button.active {
    color: #EF4D74
}

.programInfoWrap .innerTab .btnTab .itemBtn button.active:after {
    height: 2px
}

.programInfoWrap .innerTab figcaption {
    padding-top: 170px
}

.starStoryhtmlWrap {
    position: relative;
    min-height: 100vh
}

.starStoryhtmlWrap .starStoryTop .inner {
    transition: all 1s
}

.starStoryhtmlWrap[data-state="removeNext"] .starStoryTop .inner {
    transform: translateX(-500px);
    opacity: 0
}

.starStoryhtmlWrap[data-state="removePrev"] .starStoryTop .inner {
    transform: translateX(500px);
    opacity: 0
}

.starStoryhtmlWrap[data-state="addNext"] .starStoryTop .inner {
    transform: translateX(500px);
    transition: none;
    opacity: 0
}

.starStoryhtmlWrap[data-state="addPrev"] .starStoryTop .inner {
    transform: translateX(-500px);
    transition: none;
    opacity: 0
}

.starStoryhtmlWrap.com .starStoryTop .inner {
    transform: translateX(0);
    transition: all 1s;
    opacity: 1
}

.starStoryhtmlWrap .titleWrap .tit {
    color: #222
}

.starStoryList ul {
    display: flex;
    flex-wrap: wrap;
    margin: -60px -15px 0
}

.starStoryList li {
    width: 25%;
    box-sizing: border-box;
    margin-top: 60px
}

.starStoryList li figure {
    position: relative;
    margin: 0 15px
}

.starStoryList li figcaption {
    margin-top: 30px
}

.starStoryList li figcaption .el1 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.4px
}

.starStoryList li figcaption .el1 .name {
    color: #222
}

.starStoryList li figcaption .el1 .val {
    margin-left: 4px;
    color: #EF4D74;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 18px
}

.starStoryList li figcaption .el1 .val .num {
    font-size: 24px;
    font-weight: 700
}

.starStoryList li figcaption .el2 {
    margin-top: 4px;
    font-size: 16px;
    letter-spacing: -.2px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.starStoryList li:first-child {
    width: 50%
}

.starStoryList li:first-child figcaption {
    position: absolute;
    top: 60px;
    left: 60px;
    margin: 0
}

.starStoryList li:first-child figcaption .el1 {
    font-size: 17px;
    font-weight: 400;
    color: #666
}

.starStoryList li:first-child figcaption .el2 {
    margin-top: 20px;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.3;
    color: #222;
    letter-spacing: -1px
}

.starStoryList li:first-child figcaption .el2 strong {
    color: #EF4D74
}

.starStoryList li:first-child figcaption .el3 {
    margin-top: 30px;
    font-size: 22px;
    color: #222;
    letter-spacing: -.2px
}

.starStoryList li:first-child figcaption .el3:after {
    content: "";
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-left: 15px;
    border-radius: 50%;
    background: #fff url("../images/common/icoArrowRight.png") no-repeat 50% 50%;
    vertical-align: -9px
}

.starStoryHead .btnControl {
    position: relative
}

.starStoryHead .btnControl button {
    position: absolute;
    z-index: 5;
    top: 250px
}

.starStoryHead .btnControl .btnPrev {
    left: -60px
}

.starStoryHead .btnControl .btnNext {
    right: -60px
}

.starStoryTop {
    position: relative;
    margin-top: 60px
}

.starStoryTop .inner {
    position: relative;
    text-align: center;
    height: 1100px;
    z-index: 2;
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    margin: 0 auto;
    white-space: nowrap
}

.starStoryTop:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 600px;
    background: #F5F5F5
}

.starStoryTop p {
    text-align: left
}

.starStoryTop .elWrap1 {
    position: absolute;
    top: 90px;
    left: 120px;
    transition: all 1s;
    transform: translateX(-100px);
    opacity: 0;
    letter-spacing: -.4px
}

.starStoryTop .elWrap2 {
    position: absolute;
    bottom: 94px;
    left: 120px;
    transition: all 1s;
    transform: translateX(-100px);
    opacity: 0;
    transition-delay: .4s;
    letter-spacing: -.4px
}

.starStoryTop .el1 {
    font-size: 24px;
    color: #222
}

.starStoryTop .el2 {
    margin-top: 40px;
    font-size: 60px;
    font-weight: 500;
    line-height: 1.1;
    color: #222
}

.starStoryTop .el2 strong {
    color: #EF4D74
}

.starStoryTop .el3 {
    position: absolute;
    top: 254px;
    right: 120px;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 80px;
    font-weight: 700;
    color: #DDD;
    transition: all 1s;
    transform: translateX(100px);
    opacity: 0;
    transition-delay: .2s
}

.starStoryTop .el3 span {
    font-size: 135px;
    letter-spacing: -1px
}

.starStoryTop .el4 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    color: #222
}

.starStoryTop .el4 span {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif
}

.starStoryTop .el5 {
    margin-top: 30px;
    color: #666;
    font-size: 18px;
    line-height: 1.6
}

.starStoryTop .el6 {
    display: flex;
    width: 100%;
    margin-top: 60px
}

.starStoryTop .el6 .item {
    text-align: center;
    color: #999
}

.starStoryTop .el6 .item ~ .item {
    padding-left: 130px;
    color: #222;
    background: url("../images/story/iconArrow.png") no-repeat 35px 58px
}

.starStoryTop .el6 .sort {
    display: block;
    font-size: 18px;
    letter-spacing: 4px
}

.starStoryTop .el6 .val {
    line-height: 1.2;
    letter-spacing: -1px;
    font-size: 30px;
    font-weight: 500
}

.starStoryTop .el6 .val strong {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 62px
}

.starStoryTop .el7 {
    position: absolute;
    right: 55px;
    bottom: 128px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s;
    transition-delay: .6s
}

.starStoryTop .el7 span {
    display: block;
    margin: 0 0 30px;
    font-size: 30px;
    font-weight: 500;
    color: #111;
    letter-spacing: -.4px;
    line-height: 40px
}

.starStoryTop .el7 .btnBasic3 {
    font-size: 17px
}

.starStoryTop.active .elWrap1, .starStoryTop.active .elWrap2, .starStoryTop.active .el3, .starStoryTop.active .el7 {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryTop.type2 .elWrap2 {
    bottom: 120px
}

.starStoryTop.type2 .el7 {
    bottom: 184px
}

.starStoryTop.type2 .inner img {
    margin-left: 50px
}

.starStoryVod {
    min-width: 1180px;
    padding: 80px 0 100px;
    background: #373737
}

.starStoryVod .txt {
    font-size: 34px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s
}

.starStoryVod .vodWrap {
    width: 928px;
    margin: 40px auto 0;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s;
    transition-delay: .4s
}

.starStoryVod .vodWrap:after {
    padding-top: 56.3%
}

.starStoryVod.active .txt, .starStoryVod.active .vodWrap {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryBa {
    background: url("../images/story/bgBeforeAfter.png") no-repeat 50% 100%;
    background-size: cover
}

.starStoryBa .inner {
    position: relative;
    display: flex;
    min-width: 1180px;
    height: 880px;
    justify-content: center;
    background: url("../images/story/bgBeforeAfter2.png") no-repeat 50% 73px
}

.starStoryBa .inner[data-on="1"] img.idx1 {
    opacity: 1
}

.starStoryBa .inner[data-on="2"] img.idx2 {
    opacity: 1
}

.starStoryBa .inner[data-on="3"] img.idx3 {
    opacity: 1
}

.starStoryBa .inner[data-on="4"] img.idx4 {
    opacity: 1
}

.starStoryBa figure {
    position: relative;
    margin-top: 80px;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 1s
}

.starStoryBa figure:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: url("../images/story/iconPoint.png") no-repeat;
    transform: translate(50px, 50px);
    transition: transform 1s
}

.starStoryBa figure .img {
    position: relative;
    width: 330px;
    height: 740px
}

.starStoryBa figure .img img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s
}

.starStoryBa figure figcaption {
    position: absolute;
    top: 280px;
    right: 95%;
    font-size: 24px;
    text-align: center;
    color: #999;
    letter-spacing: .3em
}

.starStoryBa figure figcaption .val {
    display: block;
    font-size: 46px;
    letter-spacing: -.7px;
    line-height: 1.1
}

.starStoryBa figure figcaption .val .num {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-weight: 700;
    font-size: 80px
}

.starStoryBa figure ~ figure {
    margin-left: 270px;
    transform: translateX(100px)
}

.starStoryBa figure ~ figure figcaption {
    right: auto;
    left: 95%;
    color: #222
}

.starStoryBa .btnNav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 146px;
    margin-left: -68px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s
}

.starStoryBa .btnNav button {
    position: relative;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    color: #999;
    outline: none
}

.starStoryBa .btnNav button:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #fff;
    border-radius: 50%
}

.starStoryBa .btnNav button .circle {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%
}

.starStoryBa .btnNav button .circle:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #EF4D74
}

.starStoryBa .btnNav button .circleBorder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    overflow: hidden;
    clip: rect(0, 146px, 73px, 0)
}

.starStoryBa .btnNav button .circleBorder .i, .starStoryBa .btnNav button .circleBorder .c {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.starStoryBa .btnNav button .circleBorder .i .a, .starStoryBa .btnNav button .circleBorder .c .a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #EF4D74
}

.starStoryBa .btnNav button .circleBorder .i .a {
    clip: rect(73px, 146px, 146px, 0)
}

.starStoryBa .btnNav button .circleBorder .c {
    clip: rect(73px, 146px, 146px, 0)
}

.starStoryBa .btnNav button .circleBorder .c .a {
    clip: rect(0, 146px, 73px, 0)
}

.starStoryBa .btnNav button:hover .circle {
    transform: rotate(-360deg);
    transition: transform 2s linear
}

.starStoryBa .btnNav button:hover .circleBorder {
    clip: rect(0, 146px, 146px, 0);
    transition: clip .01s 1s linear
}

.starStoryBa .btnNav button:hover .circleBorder .i .a {
    transform: rotate(-180deg);
    transition: transform 1s linear
}

.starStoryBa .btnNav button:hover .circleBorder .c .a {
    transform: rotate(-180deg);
    transition: transform 1s 1s linear
}

.starStoryBa .btnNav button.active {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    color: #666
}

.starStoryBa .btnNav button.active .num {
    color: #222
}

.starStoryBa .btnNav button ~ button {
    margin-top: 10px
}

.starStoryBa .btnNav button .txt {
    display: block;
    font-size: 17px
}

.starStoryBa .btnNav button .num {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    line-height: 1.1;
    font-size: 20px;
    font-weight: 500
}

.starStoryBa .btnNav button .num strong {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px
}

.starStoryBa.active figure, .starStoryBa.active .btnNav {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryBa.type1 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type1 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type1 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type1 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type1 [data-on="3"] figure:after {
    transform: translate(233px, 180px)
}

.starStoryBa.type1 [data-on="3"] figure ~ figure:after {
    transform: translate(225px, 160px)
}

.starStoryBa.type1 [data-on="4"] figure:after {
    transform: translate(130px, 111px)
}

.starStoryBa.type1 [data-on="4"] figure ~ figure:after {
    transform: translate(170px, 111px)
}

.starStoryBa.type-01 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type-01 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type-01 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type-01 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type-01 [data-on="3"] figure:after {
    transform: translate(233px, 180px)
}

.starStoryBa.type-01 [data-on="3"] figure ~ figure:after {
    transform: translate(225px, 160px)
}

.starStoryBa.type-01 [data-on="4"] figure:after {
    transform: translate(130px, 111px)
}

.starStoryBa.type-01 [data-on="4"] figure ~ figure:after {
    transform: translate(170px, 111px)
}

.starStoryBa.type-02 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type-02 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type-02 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type-02 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type-02 [data-on="3"] figure:after {
    transform: translate(107px, 175px)
}

.starStoryBa.type-02 [data-on="3"] figure ~ figure:after {
    transform: translate(117px, 175px)
}

.starStoryBa.type-02 [data-on="4"] figure:after {
    transform: translate(88px, 325px)
}

.starStoryBa.type-02 [data-on="4"] figure ~ figure:after {
    transform: translate(106px, 305px)
}

.starStoryBa.type-03 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type-03 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type-03 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type-03 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type-03 [data-on="3"] figure:after {
    transform: translate(233px, 180px)
}

.starStoryBa.type-03 [data-on="3"] figure ~ figure:after {
    transform: translate(225px, 160px)
}

.starStoryBa.type-03 [data-on="4"] figure:after {
    transform: translate(107px, 175px)
}

.starStoryBa.type-03 [data-on="4"] figure ~ figure:after {
    transform: translate(117px, 175px)
}

.starStoryBa.type-04 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type-04 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type-04 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type-04 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type-04 [data-on="3"] figure:after {
    transform: translate(233px, 180px)
}

.starStoryBa.type-04 [data-on="3"] figure ~ figure:after {
    transform: translate(225px, 160px)
}

.starStoryBa.type-04 [data-on="4"] figure:after {
    transform: translate(88px, 325px)
}

.starStoryBa.type-04 [data-on="4"] figure ~ figure:after {
    transform: translate(106px, 305px)
}

.starStoryBa.type-05 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type-05 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type-05 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type-05 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type-05 [data-on="3"] figure:after {
    transform: translate(130px, 111px)
}

.starStoryBa.type-05 [data-on="3"] figure ~ figure:after {
    transform: translate(170px, 111px)
}

.starStoryBa.type-05 [data-on="4"] figure:after {
    transform: translate(107px, 175px)
}

.starStoryBa.type-05 [data-on="4"] figure ~ figure:after {
    transform: translate(117px, 175px)
}

.starStoryBa.type-06 [data-on="1"] figure:after {
    transform: translate(145px, 274px)
}

.starStoryBa.type-06 [data-on="1"] figure ~ figure:after {
    transform: translate(145px, 240px)
}

.starStoryBa.type-06 [data-on="2"] figure:after {
    transform: translate(174px, 420px)
}

.starStoryBa.type-06 [data-on="2"] figure ~ figure:after {
    transform: translate(165px, 390px)
}

.starStoryBa.type-06 [data-on="3"] figure:after {
    transform: translate(130px, 111px)
}

.starStoryBa.type-06 [data-on="3"] figure ~ figure:after {
    transform: translate(170px, 111px)
}

.starStoryBa.type-06 [data-on="4"] figure:after {
    transform: translate(88px, 325px)
}

.starStoryBa.type-06 [data-on="4"] figure ~ figure:after {
    transform: translate(106px, 305px)
}

.starStoryData {
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    margin: 0 auto 150px;
    padding: 100px 50px 0
}

.starStoryData .titleWrap {
    margin: 0 0 60px;
    text-align: center;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transform: translateY(100px)
}

.starStoryData .titleWrap .tit {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -.4px
}

.starStoryData .titleWrap .txt {
    margin-top: 30px;
    color: #666;
    letter-spacing: -.2px
}

.starStoryData .graphBox {
    display: flex;
    margin: 30px -15px 0
}

.starStoryData .graphBox .box {
    width: 33.33%;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transition-delay: .2s;
    transform: translateY(100px)
}

.starStoryData .graphBox .box:nth-of-type(2) {
    transition-delay: .3s
}

.starStoryData .graphBox .box:nth-of-type(3) {
    transition-delay: .4s
}

.starStoryData .graphBox .inner {
    height: 448px;
    margin: 0 15px;
    border: 1px solid #DDD;
    border-radius: 8px;
    text-align: center
}

.starStoryData .graphBox .tit {
    position: relative;
    min-height: 75px;
    margin: 0 0 45px;
    padding-top: 40px;
    font-size: 34px;
    letter-spacing: -.4px;
    color: #222
}

.starStoryData .graphBox .tit .val {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 24px;
    font-weight: 500
}

.starStoryData .graphBox .tit .val .num {
    font-size: 40px
}

.starStoryData .graphBox .tit .val sup {
    font-size: 14px
}

.starStoryData .graphBox .tit > .info {
    display: block;
    width: 100%;
    height: auto;
    color: #666;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.4px
}

.starStoryData .graphBox .graph.type1 {
    margin: 0 50px 0 80px
}

.starStoryData .graphBox .graph.type2 {
    margin: 0 auto
}

.starStoryData .graphBox ~ .graphBox .graph.type1 {
    height: 253px
}

.starStoryData .graphBox ~ .graphBox .box:nth-of-type(1) {
    transition-delay: .5s
}

.starStoryData .graphBox ~ .graphBox .box:nth-of-type(2) {
    transition-delay: .6s
}

.starStoryData .graphBox ~ .graphBox .box:nth-of-type(3) {
    transition-delay: .7s
}

.starStoryData.active .titleWrap, .starStoryData.active .graphBox .box {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryData .graphBox2 {
    margin-top: 30px;
    padding: 60px 100px 60px 80px;
    border: 1px solid #DDD;
    border-radius: 8px
}

.starStoryData .graphBox2 .box {
    display: flex;
    padding-top: 26px
}

.starStoryData .graphBox2 .box ~ .box {
    margin-top: 60px
}

.starStoryData .graphBox2 .tit {
    width: 225px;
    margin-top: 40px;
    font-size: 30px;
    font-weight: 500
}

.starStoryData .imgCont {
    display: flex;
    align-items: center;
    margin-top: 150px
}

.starStoryData .imgCont.right {
    flex-direction: row-reverse
}

.starStoryData .imgCont.right figcaption {
    padding-right: 100px
}

.starStoryData .imgCont figcaption {
    flex: 1;
    padding-left: 120px;
    font-size: 17px
}

.starStoryData .imgCont figcaption p ~ p {
    margin-top: 40px
}

.starStoryData .imgCont figcaption strong {
    line-height: 1.3;
    letter-spacing: -4px;
    font-size: 40px;
    font-weight: 500;
    color: #222
}

.starStoryData .imgCont figcaption.leftNone {
    padding-left: 0
}

.starStoryData .imgCont figcaption.leftMid {
    padding-left: 60px
}

.starStoryData.type2 {
    padding-bottom: 150px
}

.starStoryData.type2 .imgCont:first-child {
    margin-top: 50px
}

.starStoryCs {
    position: relative;
    min-width: 1180px;
    background: #F5F5F5
}

.starStoryCs .titleWrap {
    position: relative;
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    margin: 0 auto;
    height: 720px;
    padding: 80px 0 0;
    box-sizing: border-box;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transform: translateX(-100px)
}

.starStoryCs .titleWrap .tit {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.4px
}

.starStoryCs .titleWrap .pos {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 500;
    color: #222
}

.starStoryCs .titleWrap .pos span {
    display: block;
    color: #666;
    font-size: 16px;
    font-weight: 400
}

.starStoryCs .titleWrap .pic {
    position: absolute;
    bottom: 0;
    left: 170px
}

.starStoryCs .cont #startStoryCsSlide {
    overflow: hidden
}

.starStoryCs .cont .slideContainer {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    margin-left: -105px;
    padding: 80px 0 28px;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transform: translateX(100px)
}

.starStoryCs .cont .txt {
    max-width: calc(100% - 250px);
    margin: 0 0 40px;
    font-size: 17px;
    color: #666;
    line-height: 1.6;
    letter-spacing: -.2px
}

.starStoryCs .cont .swiper-slide {
    width: 480px
}

.starStoryCs .cont .swiper-slide img {
    width: 450px
}

.starStoryCs .cont .btnNav {
    position: absolute;
    bottom: 0;
    left: 0
}

.starStoryCs .cont .btnNav .btnNext {
    margin-left: 6px
}

.starStoryCs .cont .slidePagination {
    margin: 66px 0 0 160px
}

.starStoryCs.active .titleWrap, .starStoryCs.active .cont .slideContainer {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryProgram {
    overflow: hidden;
    padding: 50px 0;
    background: #FF6E91;
    text-align: center
}

.starStoryProgram p {
    margin: 0 0 30px;
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transform: translateX(100px)
}

.starStoryProgram p span {
    position: relative;
    padding: 0 124px;
    letter-spacing: -.4px
}

.starStoryProgram p span:before, .starStoryProgram p span:after {
    content: "";
    position: absolute;
    top: 0;
    width: 54px;
    height: 40px
}

.starStoryProgram p span:before {
    left: 0;
    background: url("../images/story/iconLdquo.png") no-repeat
}

.starStoryProgram p span:after {
    right: 0;
    background: url("../images/story/iconRdquo.png") no-repeat
}

.starStoryProgram a.btnBasic3 {
    height: 90px;
    line-height: 88px;
    font-size: 30px;
    font-weight: 500;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transform: translateX(-100px)
}

.starStoryProgram a.btnBasic3 .icoLink2 {
    margin-top: -6px
}

.starStoryProgram.active p, .starStoryProgram.active a.btnBasic3 {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryProgram.type2 p {
    margin-bottom: 50px
}

.starStoryProgram.type2 a {
    height: auto;
    padding: 28px 40px;
    line-height: 40px
}

.starStoryProgram.type2 a span {
    display: block;
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px
}

.starStoryAfter {
    max-width: 1410px;
    min-width: 1180px;
    padding: 0 50px;
    margin: 0 auto;
    padding: 100px 20px 0;
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transform: translateY(100px)
}

.starStoryAfter.active {
    transform: translate(0, 0);
    opacity: 1
}

.starStoryAfter .titleWrap {
    margin: 0 0 60px;
    text-align: center;
    color: #222
}

.starStoryAfter .titleWrap .tit {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.4px
}

.starStoryAfter .titleWrap .txt {
    margin-top: 30px;
    font-size: 17px;
    letter-spacing: -.2px;
    color: #666
}

.starStoryAfter .titleWrap .hash {
    margin-top: 30px
}

.starStoryAfter .titleWrap .hash span {
    display: inline-block;
    margin: 0 3px;
    padding: 0 30px;
    line-height: 60px;
    background: #F5F5F5;
    border-radius: 60px;
    font-size: 22px
}

.dietDetailReview .contArea {
    padding: 0
}

.dietDetailReview .compareWrap {
    display: flex;
    align-items: center
}

.dietDetailReview .compareWrap .beBox, .dietDetailReview .compareWrap .afBox {
    margin: 0
}

.dietDetailReview .compareWrap .beBox {
    text-align: left
}

.dietDetailReview .compareWrap .afBox {
    text-align: right
}

.dietDetailReview .compareWrap .inner {
    text-align: center
}

.dietDetailReview .compareWrap .inner p {
    font-size: 30px
}

.dietDetailReview .thumbInfoLayer {
    margin: 0 0 40px
}

.dietDetailReview .thumbInfoLayer .tb {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5
}

.dietDetailReview .thumbInfoLayer .tb .tc {
    display: table-cell;
    vertical-align: middle
}

.dietDetailReview .thumbInfoLayer .tb .tc.img {
    width: 570px
}

.dietDetailReview .thumbInfoLayer .tb .tc.img img {
    width: 100%
}

.dietDetailReview .thumbInfoLayer .tb .tc.txt {
    padding: 40px 80px
}

.dietDetailReview .thumbInfoLayer .tb .tc.txt .compareWrap {
    justify-content: center
}

.dietDetailReview .thumbInfoLayer .tb .tc.txt .compareWrap .beBox, .dietDetailReview .thumbInfoLayer .tb .tc.txt .compareWrap .afBox {
    flex: 1;
    text-align: center
}

.dietDetailReview .thumbInfoLayer .tb .tc .tcPos {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px dotted #ddd;
    color: #666;
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -.2px
}

.dietDetailReview .thumbInfoLayer .tb .tc .tcPos .tit {
    margin-bottom: 15px;
    color: #222;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.4px
}

.dietDetailReview .thumbInfoLayer .tb .tc .tcPos .txt {
    padding-right: 10px;
    height: 100px
}

.dietDetailReview .graphWrap {
    position: relative
}

.dietDetailReview .graphWrap .tit {
    margin: 0 0 20px;
    font-size: 24px;
    color: #222;
    letter-spacing: -.4px
}

.dietDetailReview .graphWrap .tip {
    position: absolute;
    top: 0;
    right: 0
}

.dietDetailReview .graphWrap .tip span {
    position: relative;
    margin-right: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #999
}

.dietDetailReview .graphWrap .tip span:before {
    content: '';
    display: inline-block;
    margin-right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 8px
}

.dietDetailReview .graphWrap .tip span:nth-child(1):before {
    background-color: #999
}

.dietDetailReview .graphWrap .tip span:nth-child(2):before {
    background-color: #ef4d74
}

.dietDetailReview .graphWrap .tip span:nth-child(3):before {
    background-color: #fedce5
}

.dietDetailReview .graphBox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px
}

.dietDetailReview .graphBox .box {
    width: 25%
}

.dietDetailReview .graphBox .box .inner {
    height: 410px;
    margin: 0 15px;
    border: 1px solid #ddd;
    border-radius: 8px
}

.dietDetailReview .graphBox .box .tit {
    margin: 0 0 50px;
    padding-top: 40px;
    font-size: 20px;
    text-align: center;
    color: #222
}

.dietDetailReview .graphBox .box .tit .val {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 20px;
    font-weight: 500
}

.dietDetailReview .graphBox .box .tit .val .num {
    font-size: 30px
}

.dietDetailReview .graphBox .box .tit .val sup {
    font-size: 14px
}

.dietDetailReview .graphBox .graph.type1 {
    width: auto;
    margin: 0 20px 0 50px
}

.dietDetailReview .graphBox .graph.type2 {
    width: 250px;
    margin: 0 auto
}

.dietDetailReview .graphBox .graph.type2 .val {
    width: 250px
}

.dietDetailReview .graphBox .graph.fatMap {
    width: 237px;
    height: 200px;
    transform: translateX(10px)
}

.dietDetailReview .graphBox .graph.fatMap:before {
    top: -18px;
    width: 277px;
    height: 244px;
    background: url("../images/story/bgGraph2.png") no-repeat
}

.dietDetailReview .letterWrap {
    margin-top: 100px;
    text-align: center
}

.dietDetailReview .letterWrap .titType2 {
    letter-spacing: -.4px
}

.dietDetailReview .letterWrap .letter {
    padding: 40px 0
}

.dietDetailInterview .contArea {
    padding: 0 0 40px
}

.dietDetailInterview .contArea .vodWrap {
    margin: 0 auto 100px
}

.dietDetailInterview .contArea .vodWrap:after {
    padding-top: 56.3%
}

.dietDetailInterview .contArea .tit {
    text-align: center;
    margin: 0 0 20px;
    font-size: 34px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -.4px;
    color: #222
}

.dietDetailInterview .contArea .titSub {
    text-align: center;
    margin: 0 0 40px;
    font-size: 20px;
    line-height: 34px;
    color: #666;
    letter-spacing: -.2px
}

.dietDetailInterview .compareWrap .beBox, .dietDetailInterview .compareWrap .afBox {
    position: relative
}

.dietDetailInterview .compareWrap .beBox .inner, .dietDetailInterview .compareWrap .afBox .inner {
    position: absolute;
    top: 50%;
    margin-top: -40px
}

.dietDetailInterview .compareWrap .beBox .inner {
    right: 100%
}

.dietDetailInterview .compareWrap .afBox .inner {
    left: 100%
}

.dietDetailColumn .contArea {
    max-width: 1170px;
    padding-top: 40px;
    margin: 0 auto
}

.dietDetailColumn .contArea figure {
    margin: 100px 0 30px
}

.dietDetailColumn .contArea figure:first-child {
    margin-top: 0
}

.dietDetailColumn .contArea .cTit {
    margin-bottom: 30px;
    font-weight: 500;
    color: #222
}

.compareWrap {
    text-align: center
}

.compareWrap > div {
    display: inline-block
}

.compareWrap > div .inner {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    line-height: 1
}

.compareWrap > div .inner b {
    display: block;
    margin-bottom: 15px;
    letter-spacing: 4px;
    font-weight: 400
}

.compareWrap > div .inner p {
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.4px
}

.compareWrap > div .inner p .num {
    font-size: 40px
}

.compareWrap > div.beBox {
    margin-right: 105px;
    color: #999
}

.compareWrap > div.afBox {
    margin-left: 105px;
    color: #222
}

.compareWrap > div.total {
    width: 160px;
    height: 160px;
    line-height: 160px;
    border-radius: 50%;
    background-color: #373737;
    color: #fff
}

.compareWrap > div.total b {
    letter-spacing: 0
}

.compareWrap > div.mgNone {
    margin: 0
}

.compareWrap > div .userImg {
    display: inline-block;
    margin: 0 80px;
    vertical-align: middle
}

.storeInfoWrap {
    margin-top: 60px
}

.storeInfoWrap .stroeMenuWrap > .boxTab {
    display: flex;
    margin-bottom: 60px
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab {
    width: 210px;
    margin: 0;
    border: 0
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab .itemBtn {
    display: block
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab .itemBtn button {
    position: relative;
    height: 60px;
    border: 1px solid #ddd;
    border-bottom: 0;
    box-sizing: border-box;
    color: #999;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    letter-spacing: -.4px
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab .itemBtn button.active {
    color: #fff;
    border-color: #373737;
    background-color: #373737
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab .itemBtn button.active:after {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -10px;
    bottom: auto;
    left: auto;
    width: 10px;
    height: 14px;
    margin-top: -7px;
    background: url("../images/store/icon_store_tabArr.png") no-repeat center/auto
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab .itemBtn:last-child button {
    border-bottom: 1px solid #ddd
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab .itemBtn:last-child button.active {
    border-color: #373737
}

.storeInfoWrap .stroeMenuWrap > .boxTab > .btnTab:after {
    display: none
}

.storeInfoWrap .stroeMenuWrap > .boxTab .tabContent {
    flex: 1;
    padding: 50px 20px 0 60px;
    box-sizing: border-box;
    background-color: #f5f5f5
}

.storeInfoWrap .stroeMenuWrap > .boxTab .tabContent .btnTab {
    display: block;
    margin: 0;
    font-size: 0;
    border: 0
}

.storeInfoWrap .stroeMenuWrap > .boxTab .tabContent .btnTab button {
    position: relative;
    display: inline-block;
    margin: 0 40px 30px 0;
    color: #666;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    line-height: 22px;
    letter-spacing: -.2px
}

.storeInfoWrap .stroeMenuWrap > .boxTab .tabContent .btnTab button.active {
    color: #EF4D74;
    font-weight: 500
}

.storeInfoWrap .stroeMenuWrap > .boxTab .tabContent .btnTab button.active:after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #EF4D74
}

.storeInfoWrap .stroeMenuWrap > .boxTab .tabContent .btnTab:after {
    display: none
}

.storeInfoWrap .ctInner.line {
    padding: 60px;
    margin-bottom: 100px;
    border: 1px solid #ddd;
    box-sizing: border-box
}

.storeInfoWrap .ctInner .half {
    overflow: hidden;
    margin-bottom: 60px
}

.storeInfoWrap .ctInner .half > div {
    float: left
}

.storeInfoWrap .ctInner .boxBtnGroup {
    margin: 0 auto
}

.storeInfoWrap .ctInner .ctTitle {
    position: relative;
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid #ddd
}

.storeInfoWrap .ctInner .ctTitle .storeName {
    color: #222;
    font-size: 46px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    letter-spacing: -.4px
}

.storeInfoWrap .ctInner .ctTitle .storeSns {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 0
}

.storeInfoWrap .ctInner .ctTitle .storeSns li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px
}

.storeInfoWrap .ctInner .ctTitle .storeSns li a {
    display: block
}

.storeInfoWrap .ctInner .ctTitle .storeSns li a i {
    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.storeInfoWrap .ctInner .ctTitle .storeSns li a i.insta {
    background-image: url("../images/store/icon_storeInsta.png")
}

.storeInfoWrap .ctInner .ctTitle .storeSns li a i.kakao {
    background-image: url("../images/store/icon_storeKakao.png")
}

.storeInfoWrap .ctInner .ctTitle .storeSns li a i.face {
    background-image: url("../images/store/icon_storeFacebook.png")
}

.storeInfoWrap .ctInner .ctTitle .storeSns li a i.blog {
    background-image: url("../images/store/icon_storeBlog.png")
}

.storeInfoWrap .ctInner .ctTitle .storeSns li.kakaoId {
    height: 40px;
    padding: 0 18px;
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-right: 20px;
    color: #999;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -.2px
}

.storeInfoWrap .ctInner .ctTitle .storeSns li.kakaoId b {
    margin-left: 5px;
    color: #222;
    font-weight: 500
}

.storeInfoWrap .ctInner .ctTitle .storeSns li:last-child {
    margin-right: 0
}

.storeInfoWrap .ctInner .ctView {
    width: 630px
}

.storeInfoWrap .ctInner .ctView #storeSlideView {
    position: relative
}

.storeInfoWrap .ctInner .ctView #storeSlideView .swiper-slide img {
    width: 100%
}

.storeInfoWrap .ctInner .ctView #storeSlideView button {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 62px;
    height: 62px;
    margin-top: -31px
}

.storeInfoWrap .ctInner .ctView #storeSlideView button.btnPrev {
    left: 0
}

.storeInfoWrap .ctInner .ctView #storeSlideView button.btnNext {
    right: 0
}

.storeInfoWrap .ctInner .ctView #storeSlideView button span {
    width: 100%;
    height: 100%;
    background: url("../images/store/icon_btnSlide.png") no-repeat center/auto
}

.storeInfoWrap .ctInner .ctInfo {
    overflow-y: scroll;
    position: relative;
    width: calc(100% - 630px);
    height: 345px;
    padding: 0 35px 0 60px;
    box-sizing: border-box
}

.storeInfoWrap .ctInner .ctInfo .ctImg {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 60px;
    margin-bottom: 30px;
    padding-left: 75px;
    box-sizing: border-box
}

.storeInfoWrap .ctInner .ctInfo .ctImg .img {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    overflow: hidden;
    border-radius: 50%
}

.storeInfoWrap .ctInner .ctInfo .ctImg p {
    color: #222;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -.2px
}

.storeInfoWrap .ctInner .ctInfo .ctTxt {
    word-break: keep-all;
    color: #666;
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -.2px
}

.storeInfoWrap .ctInner .ctMap {
    margin-bottom: 145px
}

.storeInfoWrap .ctInner .ctMap .titType2 {
    margin-bottom: 30px;
    font-weight: 500;
    letter-spacing: -.4px;
    text-align: center
}

.storeInfoWrap .ctInner .ctMap .map {
    position: relative;
    margin-bottom: 30px
}

.storeInfoWrap .ctInner .ctMap .map img {
    width: 100%
}

.storeInfoWrap .ctInner .ctMap .map .point {
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 50%;
    display: inline-block;
    height: 38px;
    padding: 0 20px 0 45px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: url("../images/store/icon_mapPoint.png") no-repeat left 25px center/auto rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -.2px
}

.storeInfoWrap .ctInner .ctMap .address dl {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 20px;
    color: #222;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -.4px
}

.storeInfoWrap .ctInner .ctMap .address dl dt {
    display: table-cell;
    vertical-align: top;
    width: 34px;
    font-weight: 500
}

.storeInfoWrap .ctInner .ctMap .address dl dd {
    display: table-cell;
    vertical-align: top;
    width: auto;
    padding: 2px 0 0 4px;
    color: #666
}

.storeInfoWrap .ctInner .ctMap .address dl:last-child {
    margin-bottom: 0
}

.storeInfoWrap .ctInner .ctMap .address dl:last-child dt {
    width: 118px
}

/* <!-- 25-10-01 추가 ▼--> */
.storeInfoWrap .ctInner .ctParking {
    margin-bottom: 145px
}

.storeInfoWrap .ctInner .ctParking .titType2 {
    margin-bottom: 30px;
    font-weight: 500;
    letter-spacing: -.4px;
    text-align: center
}

.storeInfoWrap .ctInner .ctParking .map {
    position: relative;
    margin-bottom: 30px
}

.storeInfoWrap .ctInner .ctParking .map img {
    width: 100%
}


.storeInfoWrap .ctInner .ctParking .map .point {
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 50%;
    display: inline-block;
    height: 38px;
    padding: 0 20px 0 45px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: url("../images/store/icon_mapPoint.png") no-repeat left 25px center/auto rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -.2px
}

.storeInfoWrap .ctInner .ctParking .address dl {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 20px;
    color: #222;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -.4px
}

.storeInfoWrap .ctInner .ctParking .address dl dt {
    display: table-cell;
    vertical-align: top;
    width: 50px;
    font-weight: 500
}

.storeInfoWrap .ctInner .ctParking .address dl dd {
    display: table-cell;
    vertical-align: top;
    width: auto;
    padding: 2px 0 0 4px;
    color: #666
}

.storeInfoWrap .ctInner .ctParking .address dl:last-child {
    margin-bottom: 0
}

.storeInfoWrap .ctInner .ctParking .address dl:last-child dt {
    width: 65px
}
/* <!-- 25-10-01 추가 ▲--> */

.storeInfoWrap .ctInner .ctBot {
    border: 1px solid #eee
}

.storeInfoWrap .ctInner .ctBot .tb {
    display: table;
    table-layout: fixed;
    width: 100%
}

.storeInfoWrap .ctInner .ctBot .tb .tc {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 42px 145px 42px 60px
}

.storeInfoWrap .ctInner .ctBot .tb .tc strong {
    display: block;
    margin-bottom: 10px;
    color: #222;
    font-size: 20px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -.4px
}

.storeInfoWrap .ctInner .ctBot .tb .tc p {
    color: #222;
    font-family: "robo", "noto", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -.4px
}

.storeInfoWrap .ctInner .ctBot .tb .tc p span {
    vertical-align: middle;
    margin-left: 4px;
    font-size: 17px;
    font-weight: 400;
    line-height: 20px
}

.storeInfoWrap .ctInner .ctBot .tb .tc:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 45px;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-top: -50px;
    background: url("../images/store/icon_storeCall.png") no-repeat center/auto #f8f8f8
}

.storeInfoWrap .ctInner .ctBot .tb .tc:first-child {
    border-right: 1px solid #eee
}

.storeInfoWrap .ctInner .ctBot .tb .tc:last-child:after {
    background-image: url("../images/store/icon_storeTime.png")
}

.managerInfo {
    margin-top: 40px;
    display: flex;
    align-items: center
}

.managerInfo .mImg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    padding-top: 5px;
    background: #fff;
    overflow: hidden
}

.managerInfo .mInfo {
    padding-left: 10px
}

.managerInfo .mInfo > p {
    color: #999;
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: -.2px
}

.managerInfo .mInfo > p.mName {
    margin-top: 4px;
    color: #222;
    font-weight: 500
}

.dietDetailInterview .case {
    padding-bottom: 60px;
    margin-bottom: 80px;
    border-bottom: 1px dashed #ccc
}

.dietDetailInterview .case .titSub {
    width: 1170px;
    margin: 0 auto;
    word-break: keep-all
}

.dietDetailInterview .case:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0
}

.detailBox .titInfoArea.bgType {
    padding: 20px;
    margin-bottom: 40px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    background-color: #f8f8f8
}

/* 상담 팝업 2022-02-23 */
.dim {position: fixed;  z-index:998; transition: all 0.5s; top:0; left:0; right:0; bottom:0; background: rgba(0, 0, 0, 0.6);} /* 2022-02-25 수정*/

.reserve_popupWrap {position:fixed; z-index: 999; top:50%; left:50%; transform: translate(-50%, -50%); width:460px; height:700px; background-color:#fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); padding:30px 20px;} /* 2022-03-03 수정*/
.reserve_popupWrap .reserve_Box {position:relative; display:inline-block; width:100%;} /* 2022-03-03 수정*/
.reserve_popupWrap .reserve_Box .topImg {position:absolute; z-index:999; top:-62px;} /* 2022-03-03 추가*/
.reserve_popupWrap .reserve_Box .reserve_tabBox {display:flex; flex-direction:row; flex-wrap: wrap; width:100%; border:1px #b4b4b4 solid; box-sizing:border-box; margin-top:98px;}
.reserve_popupWrap .reserve_Box .reserve_tabBox .reserve_tab {width:calc(100% / 3); height:50px; border-right:1px #b4b4b4 solid; box-sizing:border-box; line-height:50px; font-size:16px; letter-spacing:-0.5px; text-align:center; color:#4c4c4c;} /* 2022-03-11 수정 */
.reserve_popupWrap .reserve_Box .reserve_tabBox .reserve_tab:nth-child(3) {border-right:0;}
.reserve_popupWrap .reserve_Box .reserve_tabBox .reserve_tab.Active {background-color:#ef4d7f; color:#fff; font-weight:700;}

.reserve_popupWrap .reserve_Box .reserve_conBox {width:94%; margin:20px auto;}
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table {width:100%;}
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table table caption {display:none; width:0; height:0;}
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table table .necessary {display:inline-block; vertical-align:middle; width:5px; height:5px; border-radius:50%; font-size:0; color:transparent; background-color:#EF4D74; margin-right:5px;}
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table table tbody tr th {font-size:15px; text-align:left; padding:12px 0; vertical-align:middle;} /* 2022-03-03 수정*/
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table table tbody tr td {padding:6px 0; font-size:15px;}
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table table tbody tr td .formTxt {font-size:13px;}
.reserve_popupWrap .reserve_Box .reserve_conBox .reserve_table table tbody tr td .controlTxt {height:38px !important;}

.reserve_popupWrap .reserve_Box .reserve_termsBox {width:86%; margin:0 auto; padding:20px; background-color:#f4f4f4;  border:1px #e4e4e4 solid;}
.reserve_popupWrap .reserve_Box .reserve_termsBox .chkBox:nth-child(1) {margin-bottom:10px;}
.reserve_popupWrap .reserve_Box .reserve_termsBox .checkbox {font-size:15px;}
.reserve_popupWrap .reserve_Box .reserve_termsBox .txtLink {float:right; font-size:15px;}
.reserve_popupWrap .reserve_Box .reserve_termsBox .help {margin-top:20px; font-size:12px;}
.reserve_popupWrap .reserve_Box .reserveBtn {display:block; width:200px; height:50px; margin:20px auto 0; background-color:#373737; border-radius:4px; box-sizing:border-box; color:#fff; font-size:16px;}
.reserve_popupWrap .reserve_Box .closeBtn {position:absolute; z-index:999; top:-65px; right:-20px;} /* 2022-03-03 수정*/
.reserve_popupWrap .reserve_Box .help_point {color:#ef4d7f;}

/* 상담 팝업 수정 2022-03-23 */
.reserve_popupWrap_style {position:fixed; z-index: 999; top:50%; left:50%; transform: translate(-50%, -50%); width:500px; height:760px; background-color:#fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);}
.reserve_popupWrap_style .reserve_top_style {position:relative; display:inline-block; width:460px; background-color:#ef4d7f; padding:30px 20px;}
.reserve_popupWrap_style .reserve_top_style .topImg {text-align:center; margin:5px 0 20px 0;} /* 22-11-30 주석처리 */ /* 23-06-08 주석해제 */
.reserve_popupWrap_style .reserve_top_style .reserve_tabBox_style {display:flex; flex-direction:row; flex-wrap: wrap; width:94%; border:1px #b4b4b4 solid; box-sizing:border-box; margin:0 auto;} /* 22-10-19 수정 */
.reserve_popupWrap_style .reserve_top_style .reserve_tabBox_style .reserve_tab {width:calc(100% / 2); height:50px; border-right:1px #b4b4b4 solid; box-sizing:border-box; background-color:#fff; line-height:50px; font-size:16px; letter-spacing:-0.5px; text-align:center; color:#4c4c4c;} /* 22-10-19 수정 */
.reserve_popupWrap_style .reserve_top_style .reserve_tabBox_style .reserve_tab:nth-child(3) {border-right:0;}
.reserve_popupWrap_style .reserve_top_style .reserve_tabBox_style .reserve_tab.Active {background-color:#353535; color:#fff; font-weight:700;}

.reserve_popupWrap_style .reserve_box_style {position:relative; display:inline-block; margin:18px 35px;}
.reserve_popupWrap_style .reserve_box_style_scroll {position:relative; display:inline-block; height: 420px; padding: 0 35px 50px 0; margin:18px 0px 0px 35px; overflow-y:scroll; } /* 23-06-19 추가 */
.reserve_popupWrap_style .reserve_box_style .reserve_conBox {width:100%; margin:20px 0 25px;} /* 22-11-30 margin 값 수정 */
.reserve_popupWrap_style .reserve_box_style .reserve_conBox {width:100%; margin-bottom:18px;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table {width:100%;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table caption {display:none; width:0; height:0;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table .necessary {display:inline-block; vertical-align:middle; width:5px; height:5px; border-radius:50%; font-size:0; color:transparent; background-color:#EF4D74; margin-right:5px;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table tbody tr th {font-size:15px; text-align:left; padding:10px 0; vertical-align:middle;} /* 2022-03-03 수정*/
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table tbody tr td {padding:4px 0; font-size:15px;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table tbody tr td .formTxt {font-size:13px;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table tbody tr td .controlTxt {height:38px !important;}
.reserve_popupWrap_style .reserve_box_style .reserve_conBox .reserve_table table tbody tr td input::placeholder {font-size:15px;}/* 22-09-06 추가 */
.reserve_popupWrap_style .reserve_box_style .reserve_termsBox {margin:0 auto; padding:15px 20px; background-color:#f4f4f4;  border:1px #e4e4e4 solid;}
.reserve_popupWrap_style .reserve_box_style .reserve_termsBox .chkBox:nth-child(1) {margin-bottom:10px;}
.reserve_popupWrap_style .reserve_box_style .reserve_termsBox .checkbox {font-size:15px;}
.reserve_popupWrap_style .reserve_box_style .reserve_termsBox .txtLink {float:right; font-size:15px;}
.reserve_popupWrap_style .reserve_box_style .reserve_termsBox .help {margin-top:20px; font-size:12px;}
.reserve_popupWrap_style .reserve_box_style .reserve_termsBox .help_point {color:#ef4d7f;}

.reserve_popupWrap_style .closeCheckbox span {color:#fff;}
.reserve_popupWrap_style .closeBtn {position:absolute; z-index:999; top:-35px; right:0;}
.reserve_popupWrap_style .reserveBtn_style {position:absolute; z-index:999; left:0; bottom:0; width:500px; height:60px; background-color:#353535; text-align:center; line-height:60px; font-size:16px; color:#fff;}
.reserve_popupWrap_style .popImg {position:absolute; z-index:999; top:220px; left:-237px;} /* 상담 팝업 이미지 위치 left 값 수정 2023-05-24 */

/* pc 상담 팝업 반응형 (HD 화면 기준_최소 높이 720px) 23-10-06 ▼*/
.pc_responsive {top:52%; height:85%; max-height:760px; min-height:580px;}
.pc_responsive .reserve_box_style {height: 60%; padding-right: 5%; padding-bottom:initial; margin-left:7%; overflow-y:scroll;}
.pc_responsive .popImg {top:initial; bottom:4%;}
.pc_responsive .reserveBtn_style {height:3.5em; line-height:3.5em;}
.pc_responsive .reserve_box_style .reserve_termsBox {margin-bottom: 50px;}
.pc_responsive .reserve_box_style_scroll { margin-top:0; margin-bottom:0;}
/* pc 상담 팝업 반응형 (HD 화면 기준_최소 높이 720px) 23-10-06 ▲ */

/* 상담 팝업 남성 추가 2022-05-10 */
.reserve_popupWrap_style .reserve_top_man_style {position:relative; display:inline-block; width:460px; background-color:#353535; padding:30px 20px;}
.reserve_popupWrap_style .reserve_top_man_style .topImg {text-align:center; margin:5px 0 20px 0;}
.reserve_popupWrap_style .reserve_top_man_style .reserve_tabBox_style {display:flex; flex-direction:row; flex-wrap: wrap; width:100%; border:1px #353535 solid; box-sizing:border-box;}
.reserve_popupWrap_style .reserve_top_man_style .reserve_tabBox_style .reserve_tab {width:calc(100% / 3); height:50px; border-right:1px #353535 solid; box-sizing:border-box; background-color:#fff; line-height:50px; font-size:16px; letter-spacing:-0.5px; text-align:center; color:#4c4c4c;}
.reserve_popupWrap_style .reserve_top_man_style .reserve_tabBox_style .reserve_tab:nth-child(3) {border-right:0;}
.reserve_popupWrap_style .reserve_top_man_style .reserve_tabBox_style .reserve_tab.Active {background-color:#ef4d7f; color:#fff; font-weight:700;}

.reserve_popupWrap_style .reserveBtn_style_man {position:absolute; z-index:999; left:0; bottom:0; width:500px; height:60px; background-color:#ef4d7f; text-align:center; line-height:60px; font-size:16px; color:#fff;}
.reserve_popupWrap_style .popImg_man {position:absolute; z-index:999; top:240px; left:-220px;} /* 2022-05-31 수정 */

/* 2022-04-05 체크박스 추가 */
.reserve_popupWrap_style .closeCheckbox {position:absolute; display:block; z-index:999; top:-30px; left:0;}
.reserve_popupWrap_style .closeCheckbox input+span,.checkbox input+label {
    display: inline-block;
    position: relative;
    padding-left: 32px;
    z-index: 3;
    vertical-align: top;
    cursor: pointer
}

.reserve_popupWrap_style .closeCheckbox input+span:before,.checkbox input+label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #fff url("../../common/pc/images/common/icoCheck.png") -1px 0/48px 24px no-repeat;
    border: 1px solid #ddd;
    border-radius: 50px;
    transition: background-color .2s ease-in-out;
    box-sizing: border-box
}

.reserve_popupWrap_style .closeCheckbox input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    z-index: 1;
    vertical-align: middle;
    opacity: 0 !important
}

.reserve_popupWrap_style .closeCheckbox input[type='checkbox']:checked+span:before,.checkbox input[type='checkbox']:checked+label:before {
    background-color: #EF4D74;
    border-color: #E13962;
    background-position: -25px 0
}

.reserve_popupWrap_style .closeCheckbox input[type='checkbox']:disabled+span,.checkbox input[type='checkbox']:disabled+label {
    color: #999;
    cursor: default
}

.reserve_popupWrap_style .closeCheckbox input[type='checkbox']:disabled+span:before,.checkbox input[type='checkbox']:disabled+label:before {
    background-color: #f8f8f8;
    border-color: #f5f5f5;
    cursor: not-allowed
}

.reserve_popupWrap_style .closeCheckbox input[type='checkbox']:disabled:checked+span:before,.checkbox input[type='checkbox']:disabled:checked+label:before {
    background-color: #f5f5f5;
    background-position: 0 0
}

.reserve_popupWrap_style .closeCheckbox input[type='checkbox']:focus {
    outline: none
}
/* 2022-04-05 체크박스 추가 */

/*# sourceMappingURL=style.css.map */