@charset "utf-8";

/* popup01 */

/* popup02 */
.pop02 .expert {display: flex; column-gap: 8%;}
.pop02 .expert + .expert {margin-top: 62px;}
.pop02 .expert + .simple {margin-top: 20px;}
.pop02 .expert .img {width: 32.6%; background: center / cover url('../img/main/expert_default.jpg') no-repeat; aspect-ratio: 400/601;}
.pop02 .expert .info {flex:1;}
.pop02 .expert .info .name {font-size: 30px;}
.pop02 .expert .info .extra {font-size: 16px; color: var(--color-gray01); font-weight: 400;}
.pop02 .expert .info .loca {font-size: 16px; color: #A8A9B5; font-weight: 500;}
.pop02 .expert .info .line {position: relative; width: 100%; height: 1px; background-color: #D9D9D9; margin: 20px 0 0;}
.pop02 .expert .info .line.bar::after {content: ""; display: block; width: 25%; height: 100%; background-color: var(--color-gray01); position: absolute; top: 0; left:0;}
.pop02 .expert .history {font-weight: 300;}
.pop02 .expert .info .line + .history {margin-top: 20px;}
.pop02 .expert .history + .history {margin-top: 12px;;}

/* popup03 */
.pop03 .effect-tit {color: var(--color-gray01); font-size: 16px; font-weight: 500;}
.pop03 .effect-desc {color: #333; font-size: 16px; font-weight: 300; margin-bottom: 12px;}
.pop03 h3 {font-size: 20px; font-weight: 500; margin-bottom: 12px;}
.pop03 .con-tit {font-size: 16px; font-weight: 500;}
.pop03 .line {position: relative; width: 100%; height: 1px; background-color: #D9D9D9; margin: 10px 0 0;}
.pop03 .line.bar::after {content: ""; display: block; width: 15%; height: 100%; background-color: var(--color-gray01); position: absolute; top: 0; left:0;}
.pop03 .detail-list {margin-top: 12px;}
.pop03 .detail-li {position: relative; padding-left: 12px;}
.pop03 .detail-li::before {content: "•"; color: var(--color-primary); font-size: inherit; position: absolute; top: 6px; left:0; line-height: 1; transform: translateY(-3px);}
.pop03 .detail-li + .detail-li {margin-top: 3px;}
.pop03 .detail-li > p {font-size: 16px; font-weight: 300;}
.pop03 .detail-li .point {color: var(--color-primary); font-weight: 500;}

.pop03 .detail-table-wrap {max-width: 100%; overflow-x: auto;}
.pop03 .detail-table-wrap + .con-tit,
.pop03 .detail-table + .con-tit {margin-top: 20px; }
.pop03 .detail-table {border:0; border-collapse: collapse; width: 100%;}
.pop03 .detail-table-tr {border-bottom: 1px solid #F0F0F0;}
.pop03 .detail-table-tr.active {background-color: #FFF7EE;}
.pop03 .detail-table-th {padding: 12px 10px; font-size: 14px; color: #333; font-weight: 500; word-break: keep-all; text-align: left;}
.pop03 .detail-table-td {padding: 12px 10px; font-size: 14px; color: #333; font-weight: 300; word-break: keep-all;}

.pop03 .aesthetic-imgs {display: flex; column-gap: 12px;}
.pop03 .aesthetic-imgs > .img {width: calc(33.3% - 6px);}

.pop03#pop0301 .effect-tit,
.pop03#pop0302 .effect-tit {margin-bottom: 12px;}

.pop03#pop0305 .line {margin-bottom: 12px;}
.pop03#pop0305 .aesthetic-imgs {margin-bottom: 20px;}


/* popup04 */
.pop04 .effect-tit {color: var(--color-gray01); font-size: 16px; font-weight: 500;}
.pop04 .effect-desc {color: #333; font-size: 16px; font-weight: 300; margin-bottom: 12px;}
.pop04 h3 {font-size: 20px; font-weight: 500; margin-bottom: 12px;}
.pop04 .con-tit {font-size: 16px; font-weight: 500;}
.pop04 .line {position: relative; width: 100%; height: 1px; background-color: #D9D9D9; margin: 10px 0 0;}
.pop04 .line.bar::after {content: ""; display: block; width: 15%; height: 100%; background-color: var(--color-gray01); position: absolute; top: 0; left:0;}
.pop04 .detail-list {margin-top: 12px;}
.pop04 .detail-li {position: relative; padding-left: 12px;}
.pop04 .detail-li::before {content: "•"; color: var(--color-primary); font-size: inherit; position: absolute; top: 6px; left:0; line-height: 1; transform: translateY(-3px);}
.pop04 .detail-li + .detail-li {margin-top: 3px;}
.pop04 .detail-li > p {font-size: 16px; font-weight: 300;}
.pop04 .detail-li .point {color: var(--color-primary); font-weight: 500;}
.pop04 .detail-li .role {font-weight: 400;}



@media screen and (max-width: 1024px) {
  .pop02 .expert {display: block;}
  .pop02 .expert .img {width: 100%; margin-bottom: 20px;}
  .pop02 .expert .img > img {width: 100%;}
  .pop02 .expert .info .name {font-size: 24px;}

  
  .pop03 .detail-table-wrap .detail-table {max-width: 760px; width: 200%;}
  .pop03 .aesthetic-imgs > .img {width: calc(50% - 6px);}
}