/* theme */
main.pdpack h2{font-size: var(--size-lg); font-weight: 600;}
main.pdpack h3{font-size: var(--size-md); font-weight: 600;}
main.pdpack p{font-size: var(--size-sm);}
main.pdpack span{display: inline-block}
main.pdpack section{
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--size-xl);
  padding-top: calc(var(--size-lg) * 2); padding-bottom: calc(var(--size-lg) * 2)
}
main.pdpack .container{
  position: relative; z-index: 10;
  width: 100%; max-width: 1280px; height: 100%;
  margin: 0 auto; padding: 0;
}
main.pdpack ul.container{display: flex; flex-wrap: wrap;}
main.pdpack .container>*{padding: 10px;}
main.pdpack .contentHead{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--size-sm);
  width: 100%; max-width: 1280px; padding-left: 20px; padding-right: 20px;}
main.pdpack .contentHead span{color: var(--primary-color05);}
main.pdpack .contentHead p{font-weight: 500;}
main.pdpack .btn{display: flex; justify-content: center; align-items: center; border-radius: 100px;}
main.pdpack .ellipse{position: relative; display: inline-block;}
main.pdpack .ellipse::before {
  content: '';
  border-radius: 50%;
  width: 14px; height: 14px;
  position: absolute; left: -30px; top: calc(50% - 7px);
}
main.pdpack .badge {
  border-radius: 100px;
  display: flex; justify-content: center; align-items: center;
  width: 160px; height: var(--size-lg);
  font-size: var(--size-xs); font-weight: 600;
  text-transform: uppercase;
  margin: var(--size-md) auto
}

@media (min-width:901px) {
  main.pdpack .col3 li{width: calc(100% / 3);}
  main.pdpack .col2 li {width: 50%;}
}
@media (max-width:900px){
  main.pdpack .col2 {max-width: 720px;}
  main.pdpack .col2 li {width: 100%;}
  main.pdpack .col3 {max-width: 420px;}
  main.pdpack .col3 li {width: 100%;}
}

@media (min-width:1201px) {
  main.pdpack .col4 li {width: 25%;}
}
@media (max-width:1200px){
  main.pdpack .col4{max-width: 720px;}
  main.pdpack .col4 li {width: 50%;}  
}
@media (max-width:720px){
  main.pdpack .target .col4{max-width: 360px;}
  main.pdpack .target .col4 li {width: 100%;}  
}

/* content */
main {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
main.pdpack .mainVisual {position: relative; overflow: hidden; width: 100%; height: 300px; padding: 0;
    background-color: rgb(233,226,255);
    background-position: 80% center;
    background-size: contain;
    background-repeat: no-repeat;
}
main.pdpack .mvTxt{
  display: flex; flex-direction: column; justify-content: center; gap: clac(var(--size-xs) / 2); padding-right: 10vw;
  width: fit-content; height: 100%;
  background: linear-gradient(
    90deg,
    rgba(233,226,255, 1) 0%,
    rgba(233,226,255, .9) 80%,
    rgba(233,226,255, 0) 100%

  );
}
main.pdpack .mainVisual h1{font-size: var(--size-sm); color: var(--primary-color04);}
main.pdpack .mainVisual p{font-size: var(--size-xs); font-weight: 400; color: var(--gray-900);}
main.pdpack .mainVisual .btn{
  background: var(--primary-color04);
  color: #fff;
  width: 50vw; max-width: 420px; height: calc(var(--size-sm) * 2);
  font-size: calc(var(--size-md) * 0.8);
  margin-top: var(--size-xs);padding: 0;
}
@media (max-width:1200px){
  main.pdpack .mainVisual{
    height: 300px;
    background-size: cover;
}
  
}
@media (max-width:990px){
  main.pdpack .mainVisual{background-size: cover; background-position-x: 10%;}
}
@media (max-width:720px){
  main.pdpack .mainVisual{
    height: 200px;
    background-position-x: 40%;
}
}
main.pdpack .target>img{position: absolute; z-index: -1;}
main.pdpack .bg1{top: 80px; right: 80%;}
main.pdpack .bg2{top: 260px; left: 60%;}
main.pdpack .bg3{top: 260px; right: 70%;}
main.pdpack .bg4{top: 120px; left: 80%;}
main.pdpack .target .contentHead p{color: var(--gray-500);}
main.pdpack .dots {
  color: var(--gray-300);
  text-align: center;
  font-size: 50px;
  line-height: 30px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
main.pdpack .target .ellipse::before {
  background: var(--primary-color05);
}
main.pdpack .target li>div{
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 10px;
  height: 100%;
  background: var(--primary-color09);
  border-radius: var(--size-lg) 0px; padding: 50px 20px;
  text-align: center;
}
main.pdpack .target li h3 {color: var(--primary-color05); height: calc(var(--size-lg) * 2); word-break: break-all;}
main.pdpack .target li p {color: var(--gray-800);}

@media (max-width:900px){
  main.pdpack .target>img{opacity: .2;}
}

main.pdpack .what {background-color: var(--primary-color07);}
main.pdpack .what .contentHead{color: var(--back-color);}
main.pdpack .what .contentHead span{background-color: var(--third-color02);}
main.pdpack .what .ellipse::before {background-color: var(--back-color);}
main.pdpack .what li>div {
  position: relative;
  display: flex; flex-direction: column; gap: var(--size-xs);
  background: #ffffff;
  border-radius: var(--size-lg) var(--size-lg) 0px var(--size-lg); padding: var(--size-lg);
  height: 100%;
}
main.pdpack .what li h3 {color: var(--primary-color05);}
main.pdpack .what li p {color: var(--gray-500); margin-bottom: auto; font-size: var(--size-xs);}
main.pdpack .what li .btn {
  background: var(--primary-color06);
  width: 100%; height: 50px;
  color: #ffffff; font-size: var(--size-sm);
}


main.pdpack .favor1 h2 strong{font-weight: 600;}
main.pdpack .favor1 {
  background: var(--primary-color09);
  position: relative; overflow: hidden; padding-bottom: 0;
}
main.pdpack .favor1 .badge,
main.pdpack .favor2 .badge{color: var(--back-color); background: var(--primary-color05);}
main.pdpack .favor1 .badge span,
main.pdpack .favor2 .badge span{color: var(--primary-color09); font-weight: 800; margin-left: 4%;}

main.pdpack .favor2{display: flex; flex-direction: column; gap: var(--size-xl);}
main.pdpack .favor2 .hugeTit{font-size: calc(var(--size-lg) * 1.5); font-weight: 700;}
main.pdpack .favor2 p {color: var(--gray-800);}
main.pdpack .favor2 p span {color: var(--primary-color05);}
main.pdpack .percent{color: var(--primary-color06); font-size: var(--size-lg); font-weight: 700; text-align: center;}
main.pdpack .percent span{color: var(--gray-900);}
main.pdpack .price{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
main.pdpack .origin{font-size: calc(var(--size-lg) * 1.5); color: var(--gray-700); text-decoration: line-through;}
main.pdpack .price svg{width: calc(var(--size-xl) * 1.5); fill: var(--primary-color06);}
main.pdpack .discount{font-size: calc(var(--size-xl) * 1.5); font-weight: 600; color: var(--primary-color06); display: flex; align-items: center;}
main.pdpack .days {position: relative; display: flex; justify-content: center; padding-bottom: 0;}
main.pdpack .days div{font-size: var(--size-md);}
main.pdpack .days span{color: var(--secondary-color06);}
main.pdpack .days img{max-width: 60vw;}
@media (max-width:1040px){
  main.pdpack .days{flex-direction: column; align-items: center; gap: 10px;}
}
main.pdpack .service {
  background: linear-gradient(
    180deg,
    rgba(126, 121, 255, 0.7) 0%,
    rgba(255, 227, 227, 0.7) 100%
  );
  position: relative; overflow: hidden; text-align: center;
}
main.pdpack .service .contentHead:nth-child(1) {color: var(--back-color);}
main.pdpack .service .contentHead:nth-child(1) span{color: var(--primary-color05);}
main.pdpack .service .badge {
  color: var(--primary-color06); background-color: var(--back-color)
}
main.pdpack .service .circle li>div{
  position: relative; width: 100%; height: 0; padding-bottom: 100%;
  border-radius: 100%; background-color: var(--primary-color07);
}
main.pdpack .service .circle li>div>div{
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-xs);
  padding: var(--size-xs);
}
main.pdpack .service .circle li img{max-width: 80%; max-height: 50%;}
main.pdpack .service .circle li p{color: var(--back-color);}
main.pdpack .service .card li>div{
  background: var(--back-color);
  border-radius: var(--size-lg); padding: var(--size-xl) var(--size-md);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--size-xs); height: 100%;
  position: relative; box-shadow: var(--theme-box-shadow); overflow: hidden;
}
main.pdpack .service .card li:last-child>div{color: var(--back-color); background-color: var(--primary-color06);}
@media (min-width:900px){
  main.pdpack .service .card img{max-width: 80%}
}
@media (max-width:900px){
  main.pdpack .service .card img{max-width: 50vw;}
}

main.pdpack .tutor{padding-bottom: 0;}
main.pdpack .tutor .badge{color: var(--back-color); background-color: var(--primary-color06);}
main.pdpack .tutor .tutorPanel{position: absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0,.6);}
main.pdpack .tutor .tutorPanel .container{justify-content: space-between; text-align: center; flex-wrap: nowrap; position: relative;}
main.pdpack .tutor .tutorPanel li{flex: 1;}
main.pdpack .tutor .tutorPanel span{ color: var(--primary-color06); font-weight: 600;}
main.pdpack .tutor .tutorPanel h3{color: var(--back-color);}
main.pdpack .tutor img{width: 100%; max-width: 1200px;}
@media (max-width:720px){
    main.pdpack .tutor .tutorPanel li span{font-size: 10px;}
}
@media (max-width:500px){
    main.pdpack .tutor .tutorPanel li{padding: 0;}
    main.pdpack .tutor .tutorPanel li span{display: none;}
    main.pdpack .tutor .tutorPanel li h3{font-size: 12px;}
}
main.pdpack .license{background-color: var(--primary-color09); display: none;}
main.pdpack .license .contentHead span,
main.pdpack .license .contentHead p {color: var(--primary-color05);}
main.pdpack .license .container{display: flex;}
main.pdpack .license .container>div{flex-grow: 1;}
main.pdpack .license .container>div>div{
  display: flex; justify-content: center; align-items: center;
  background-color: var(--back-color); height: 100%; position: relative;
  padding: var(--size-lg); border-radius: var(--size-xl);
}
main.pdpack .license .container p{
  position: absolute; bottom: calc(var(--size-xl) / 2 * -1); 
  display: flex; justify-content: center; align-items: center;
  width: 100%; max-width: 320px; height: var(--size-xl);
  border-radius: 100px;
  color: var(--back-color); background-color: var(--primary-color06);
}
main.pdpack .license .container img{max-width: 90%;}
@media (max-width:900px){
  main.pdpack .license .container{flex-direction: column;}
  main.pdpack .license .container>div{margin-bottom: 20px;}
}

main.pdpack .packReview ul{max-width: 900px; margin: auto; text-align: left;}
main.pdpack .packReview li{width: 100%;}
main.pdpack .packReview li>div{
  display: flex; flex-wrap: wrap; align-items: end; gap: 6px 12px;
  max-width: 600px; width: 100%;
  padding: var(--size-xs); box-shadow: var(--theme-box-shadow); border-radius: var(--size-lg) 0; background-color: var(--back-color);
}
main.pdpack .packReview li:nth-child(odd)>div{margin-right: auto;}
main.pdpack .packReview li:nth-child(even)>div{margin-left: auto;}
main.pdpack .packReview .avatar{max-width: 100px; width: 20vw; border-radius: 1000px; border: 1px solid var(--primary-color08);}
main.pdpack .packReview .starLevel{max-width: 180px; width: 30vw;}
main.pdpack .packReview p{flex-shrink: 0; width: 100%; font-size: var(--size-xs);}
@media (min-width:1081px){
  main.pdpack .packReview {background-image: url(/assets/images/package_item/reviewBg.png); background-position: 80% 10%; background-repeat: no-repeat; text-align: center;}
}

main.pdpack .faq{
  color: var(--back-color);
  background: linear-gradient(
    120deg,
    rgba(167, 174, 255, 1) 0%,
    rgba(138, 107, 255, 1) 100%
  );}
main.pdpack .faq img{position: absolute;left: 80%; top: 100px; }
main.pdpack .accordion li{width: 100%;}
main.pdpack .accordionItem>button{
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  border-radius: var(--size-md);
  background: linear-gradient(
    90deg,
    rgba(112, 124, 254, 0.3) 0%,
    rgba(83, 56, 216, 0.3) 100%
  );
}

main.pdpack .accordionItem>button>*{display: flex; align-items: center; width: 100%; padding-left: var(--size-md); padding-right: var(--size-md);}
main.pdpack .accordionItem h3{
  position: relative;
  display: flex; gap: 8px;
  text-decoration: none; background: none; -webkit-font-smoothing: antialiased;
  color: var(--back-color); font-size: var(--size-sm);
  padding-top: var(--size-xs); padding-bottom: var(--size-xs);
}
main.pdpack .accordionItem h3::before{
  content: ''; box-sizing: content-box; display: block; width: 1px; height: 1px;
  border-width: 6px 0px 6px 10px;
  border-color: transparent var(--back-color);
  border-style: solid; transition: .3s;
}
main.pdpack .accordionItem.accordionItem.is-open h3::before{transform: rotate(90deg);}
main.pdpack .accordionItem p{
  position: relative; overflow: hidden;
  max-height: 0; opacity: 0; color: var(--back-color); font-size: var(--size-xs);
  padding-top: 0; padding-bottom: 0; border-top: 1px solid var(--primary-color08);
  transition: max-height 260ms ease, opacity 200ms ease, padding 0.2s ease;
  will-change: max-height, opacity;
}
main.pdpack .accordionItem p{}
main.pdpack .accordionItem.is-open p{max-height: 600px; opacity: 1; padding-top: var(--size-xs); padding-bottom: var(--size-xs);}
main.pdpack .accordionItem button:focus-visible{outline: 2px solid currentColor; outline-offset: 2px;}
@media (max-width:900px){
  main.pdpack .faq img{opacity: .2;}
}
main.pdpack .cta{background: url(/assets/images/package_item/ctaBg.png) center; background-size: cover; background-repeat: no-repeat;}
main.pdpack .cta::before{content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: var(--primary-color04); opacity: .7;}
main.pdpack .cta .contentHead{color: var(--back-color); z-index: 10;}
main.pdpack .cta .contentHead .btn{
  position: relative; width: 100%; max-width: 560px; gap: 6px;
  font-size: var(--size-md);
  color: var(--primary-color05); background-color: var(--back-color);
  padding: calc(var(--size-xs) / 2);
  transition: .3s;
}
main.pdpack .cta.fixed{position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding-top: var(--size-sm); padding-bottom: var(--size-sm);}
main.pdpack .cta.fixed h2,
main.pdpack .cta.fixed p{display: none;}
main.pdpack .cta .add1to4{
  font-weight: 600; transition: .4s; display: none;
}
main.pdpack .cta .contentHead .btn:hover{color: var(--third-color02); background-color: var(--third-color01);}
main.pdpack .cta .contentHead .btn:hover .add1to4{color: var(--back-color);}

#main-under-menu{display: none;}
.mobile_bottom{padding: 0;}
@media (max-width:400px){
    main.pdpack .mainVisual { 
        background-position-x:50%;
    }
    main.pdpack .mvTxt {
        
        background: linear-gradient(90deg, rgba(233, 226, 255, 1) 0%, rgba(233, 226, 255, .9) 50%, rgba(233, 226, 255, 0) 100%);
    }
}
@media (max-width:330px){
    main.pdpack .mainVisual {
        background-position-x:60%;
        }
}