@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/static/split/WantedSans.min.css');
:root {
  --bgGrad1: linear-gradient(
    180deg,
    rgba(141, 110, 230, 0.8) 42%,
    rgba(255, 255, 255, 0.8) 100%
  );
  --bgGrad2: linear-gradient(
    180deg,
    rgba(100, 190, 82, 0.8) 6.25%,
    rgba(255, 255, 255, 0.8) 99.85%
  );
  --bgGrad3: linear-gradient(
    180deg,
    rgba(255, 111, 92, 0.8) 6.25%,
    rgba(255, 255, 255, 0.8) 99.85%
  );
  --bgGrad4: linear-gradient(
    180deg,
    rgba(141, 110, 230, 0.8) 6.25%,
    rgba(255, 255, 255, 0.8) 99.85%
  );
  --bgGrad5: linear-gradient(
    180deg,
    rgba(68, 177, 224, 0.8) 6%,
    rgba(255, 255, 255, 0.8) 99.85%
  );

  --btn1: linear-gradient(95deg, #7bcb6b 7.16%, #3f902f 89.66%);
  --btn2: linear-gradient(95deg, #ff7a68 7.16%, #d54f3e 89.66%);
  --btn3: linear-gradient(95deg, #8d6ee6 7.16%, #633fcb 89.66%);
  --btn4: linear-gradient(95deg, #50c3f4 7.16%, #288ab4 89.66%);

  --shadow1: -3px -7px 30px 2px rgba(226, 226, 226, 0.4),
    4px 8px 15px 3px rgba(27, 103, 12, 0.7);
  --shadow2: -3px -7px 30px 2px rgba(226, 226, 226, 0.4),
    4px 8px 15px 3px rgba(136, 35, 22, 0.7);
  --shadow3: -3px -7px 30px 2px rgba(226, 226, 226, 0.4),
    4px 8px 15px 3px rgba(99, 68, 189, 0.7);
  --shadow4: -3px -7px 30px 2px rgba(226, 226, 226, 0.4),
    4px 8px 15px 3px rgba(28, 129, 172, 0.7);

  --clr1: #8d6ee6;
  --clr2: rgba(100, 190, 82, 0.8);
  --clr3: #ff6f5c;
  --clr4: #8d6ee6;
  --clr5: #44b1e0;

  --o-clr2: #64be52;
}

* {
  font-family: 'Wanted Sans';
}

/*** footer ***/
.footer {
  background: #292529;
  position: relative;
  z-index: 999;
  text-align: center;
  font-family: Roboto;
}
.footer .innerB {
  padding-top: 70px;
  padding-bottom: 70px;
}
.ft_logo img {
  opacity: 0.3;
  margin: 0 auto;
}
.ft_list {
  padding: 20px 0;
  overflow: hidden;
  text-align: center;
}
.ft_list li {
  display: inline-block;
  position: relative;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  color: #eee;
}
.ft_list li::after {
  content: '';
  position: absolute;
  top: 40%;
  right: -6px;
  width: 4px;
  height: 4px;
  background: #eee;
  border-radius: 50%;
}
.ft_list li:last-child::after {
  display: none;
}
.ft_contact {
  overflow: hidden;
  max-width: 1400px;
  margin: auto;
  text-align: center;
}
.ft_contact li {
  display: inline-block;
  float: left;
  width: 33%;
  padding: 30px 10px 0;
}
.ft_contact li .tit {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.ft_contact li span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #aaa;
}
.ft_copy {
  background: #1d1a1d;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #aaa;
  text-align: center;
}

/*** header ***/
header {
  position: absolute;
  right: 9.4792vw;
  top: 4.9479vw;
}
header a {
  display: block;
  width: 4.2708vw;
  height: 4.2708vw;
}
header a::before {
  display: block;
  content: '';
  width: 4.2708vw;
  height: 4.2708vw;
  background: url('../images/icons/ico_home.svg') no-repeat center / cover;
}
header p {
  position: relative;
  left: 50%;
  top: 100%;
  font-size: 3.6458vw;
  font-weight: 700;
  line-height: 170%;
  transform: rotate(90deg);
  transform-origin: left;
  width: max-content;
}

/*** page common ***/
.sec_visual {
  height: 45vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.sec_visual h3 {
  padding-bottom: 2.2917vw;
}
.sec_visual h3 span {
  font-size: 7.2917vw;
  font-weight: 800;
  line-height: 154%;
}
.sec_result .cont_wrap {
  position: relative;
  padding-bottom: 15.8333vw;
}
.sec_result .tit {
  position: relative;
  z-index: 1;
  padding: 4.6875vw 0;
  text-align: center;
  border-bottom: 0.2083vw solid #000;
}
.sec_result .tit h2 {
  font-family: 'Wanted Sans';
  font-size: 5.4167vw;
  font-weight: 700;
  line-height: 142%;
}
.sec_result .tit h3 {
  font-family: 'Pretendard';
  font-size: 2.5vw;
  font-weight: 400;
  line-height: 154%;
}
main:not([data-theme='1']) .sec_result .cont_wrap:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  content: '';
  width: 100%;
  aspect-ratio: 1920 / 1108;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.sec_result .cont1 {
  position: relative;
  z-index: 1;
  padding: 5.8333vw 0;
  border-bottom: 0.2083vw solid #000;
}
.sec_result .cont1 ul {
  width: calc(100% - 18.75vw);
  margin: 0 auto;
  max-width: 81.25vw;
}
.sec_result .cont1 p {
  font-family: 'Wanted Sans';
  font-size: 4.7917vw;
  font-weight: 600;
  line-height: 142%;
}
.sec_result .cont1 li {
  position: relative;
  /* display: flex; */
  /* gap: 2.9688vw; */
  padding-left: 2.9688vw;
  font-family: 'Wanted Sans';
  font-size: 4.7917vw;
  font-weight: 600;
  line-height: 142%;
}
.sec_result .cont1 li::before {
  display: block;
  position: absolute;
  top: 2.6563vw;
  left: 0;
  content: '';
  width: 1.5625vw;
  height: 1.5625vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #000;
}
.sec_result .cont1 p span {
  font-weight: 800;
}

.sec_result .cont1 strong {
  font-weight: 800;
}

.sec_result .cont1 li:not(:last-child) {
  margin-bottom: 3.75vw;
}

.sec_result .cont2 {
  position: relative;
  z-index: 1;
  padding-top: 4.7917vw;
}
.sec_result .cont2 {
  width: calc(100% - 18.75vw);
  max-width: 81.25vw;
  margin: 0 auto;
}
.sec_result .cont2 .hd {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.3125vw;
}
.sec_result .cont2 .hd p {
  font-size: 2.5vw;
  font-weight: 500;
  line-height: 142%;
  padding: 0 3.75vw;
  margin: 0.8854vw 0;
}
.sec_result .cont2 .hd.col3 .fx_1:first-of-type p {
  text-align: right;
}
.sec_result .cont2 .hd.col3 .fx_1 strong {
  text-align: center;
}
.sec_result .cont2 .hd.col3 .fx_1:last-of-type p {
  text-align: left;
}
.sec_result .cont2 .hd.col1 .fx_1:first-of-type p {
  text-align: center;
}
.sec_result .cont2 .hd .fx_2 p {
  text-align: center;
}

.sec_result .cont2 .hd.line {
  border-top: 0.1042vw solid #000;
}
.sec_result .cont2 .hd.line div:first-of-type p {
  border-right: 0.1042vw solid #000;
}
.sec_result .cont2 .hd strong {
  display: block;
  font-size: 2.1875vw;
  font-weight: 500;
  line-height: 142%;
  padding: 0 3.75vw;
  margin: 0.8854vw 0;
}
.sec_result .cont2 .sub_hd {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  /* height: 8.6458vw; */
  padding: 1.6667vw 0;
  text-align: center;
  font-size: 3.75vw;
  font-weight: 700;
  line-height: 142%;
  color: #000;
  border-bottom: 0.2083vw solid #000;
}

.sec_result .cont2 .bd {
  display: flex;
  align-items: flex-start;
  position: relative;
  background-color: #fff;
}
/* .sec_result .cont2 .bd::after { */
/*   display: block; */
/*   position: absolute; */
/*   top: 0; */
/*   left: 50%; */
/*   transform: translateX(-50%); */
/*   content: ''; */
/*   width: 0.0521vw; */
/*   height: 100%; */
/*   background-color: #000; */
/* } */
/* .sec_result .cont2 .bd.col3::after { */
/*   left: calc(100% / 3); */
/* } */

.sec_result .cont2 .bd.col1 > .col,
.sec_result .cont2 .bd.col3 > .col.fx_2{
  flex-direction: row;
  flex-wrap: wrap;
}
.sec_result .cont2 .bd.col1 > .col li,
.sec_result .cont2 .bd.col3 > .col.fx_2 li{
  width : 50%;
}
.sec_result .cont2 .bd.col3 > .col.fx_2 li:nth-child(even) div::after{
  display: block;
  position: absolute;
  top: 0;
  right: -0.0521vw;
  transform: translateX(-50%);
  content: '';
  width: 0.0521vw;
  height: 100%;
  background-color: #000;
}
.sec_result .cont2 .bd.col3 .col.fx_2 + .col{
  width: max-content;
  flex: 1;
}

.sec_result .cont2 .bd .col {
  width : 50%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.sec_result .cont2 .bd.col1 .col{
  width : 100%;
}
.sec_result .cont2 .bd .col:last-of-type::before ,
.sec_result .cont2 .bd .col:first-of-type::before {
  display: block;
  position: absolute;
  top: 0;
  content: '';
  width: 0.0521vw;
  height: 100%;
  background-color: #000;
}
.sec_result .cont2 .bd .col:last-of-type::before {
  left: 0;
  right: auto;
}
.sec_result .cont2 .bd .col:first-of-type::before {
  left: auto;
  right: -0.0521vw;
}
.sec_result .cont2 .bd.col1 .col::before ,
.sec_result .cont2 .bd.col3 .col::before {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  content: '';
  width: 0.0521vw;
  height: 100%;
  background-color: #000;
}
.sec_result .cont2 .bd.col3 .col:last-of-type::before {
  left: 0;
  transform: none;
}
.sec_result .cont2 .bd.col3 .col li{
  padding: 0;
}
.sec_result .cont2 .bd .col li {
  position: relative;
  height: 7.2917vw;
  padding: 1.0417vw 0;
  border-bottom: 0.1042vw solid #000;
}
.sec_result .cont2 .bd .col li::before,
.sec_result .cont2 .bd .col li::after {
  display: block;
  position: absolute;
  z-index: 5;
  content: '';
  width: 1.3125vw;
  height: 1.0417vw;
  background-color: #fff;
}
.sec_result .cont2 .bd .col li::before {
  top: 0;
}
.sec_result .cont2 .bd .col li::after {
  bottom: 0;
}
.sec_result .cont2 .bd .col:first-of-type li::before,
.sec_result .cont2 .bd .col:first-of-type li::after {
  right: -0.6042vw;
}
.sec_result .cont2 .bd.col1 .col:first-of-type li::before,
.sec_result .cont2 .bd.col1 .col:first-of-type li::after{
  right: -0.6042vw;
  left: auto;
}
.sec_result .cont2 .bd.col1 .col:first-of-type li:nth-child(even)::before,
.sec_result .cont2 .bd.col1 .col:first-of-type li:nth-child(even)::after{
  display: none
}

/* .sec_result .cont2 .bd .col li:last-child{ */
/*   border-bottom: none; */
/* } */
.sec_result .cont2 .bd .col li div {
  display: flex;
  align-items: center;
  padding: 0.8333vw 3.2292vw 0.8333vw 4.2708vw;
}
.sec_result .cont2 .bd.col3 li div {
  padding: 0.8333vw 0 0.8333vw 3.6458vw;
}
.sec_result .cont2 .bd .col h5,
.sec_result .cont2 .bd .col p {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5208vw;
  line-height: normal;
}
.sec_result .cont2 .bd.col3 .col li div {
  flex-wrap: wrap;
  gap: 0;
  height: 100%;
}
.sec_result .cont2 .bd.col3 .col h5 {
  flex: initial;
}
.sec_result .cont2 .bd.col3 .col h5:first-of-type{
  margin-right: 1.4583vw;
}
.sec_result .cont2 .bd .col h5 p {
  flex: initial;
}

.sec_result .cont2 .bd .col h5 {
  font-size: 2.7083vw;
  font-weight: 700;
}
.sec_result .cont2 .bd .col p {
  font-size: 1.875vw;
  font-weight: 400;
}

.sec_result .links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.8125vw;
  position: sticky;
  bottom: 5.2083vw;
  z-index : 1000;
  width: calc(100% - 18.75vw);
  max-width: 81.25vw;
  margin: 0 auto;
  padding-top: 13.9063vw;
}

.theme_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 22.1875vw;
  height: 7.3958vw;
  padding: 0 1.0417vw 0 3.2292vw;
  border-radius: 4.1667vw;
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 170%;
  color: #000;
  transition: color 0.25s ease-in-out;
}
.theme_btn::after {
  display: block;
  content: '';
  width: 5.3646vw;
  height: 5.3646vw;
  background: url('../images/icons/ico_clr_arrow_sm_b.svg') no-repeat center /
    cover;
  transition: background-image 0.25s ease-in-out;
}
.theme_btn:hover {
  color: #fff;
}
.theme_btn:hover::after {
  background-image: url('../images/icons/ico_clr_arrow_sm_w.svg');
}

.theme2 {
  background: var(--btn1);
  box-shadow: var(--shadow1);
}
.theme3 {
  background: var(--btn2);
  box-shadow: var(--shadow2);
}
.theme4 {
  background: var(--btn3);
  box-shadow: var(--shadow3);
}
.theme5 {
  background: var(--btn4);
  box-shadow: var(--shadow4);
}

[data-theme='1'] .sec_visual {
  background-image: url('../images/bg1.png');
}
[data-theme='2'] .sec_visual {
  background-image: url('../images/bg2.png');
}
[data-theme='3'] .sec_visual {
  background-image: url('../images/bg3.png');
}
[data-theme='4'] .sec_visual {
  background-image: url('../images/bg4.png');
}
[data-theme='5'] .sec_visual {
  background-image: url('../images/bg5.png');
}

[data-theme='1'] .grad_bg {
  background: var(--bgGrad1);
}
[data-theme='2'] .grad_bg {
  background: var(--bgGrad2);
}
[data-theme='3'] .grad_bg {
  background: var(--bgGrad3);
}
[data-theme='4'] .grad_bg {
  background: var(--bgGrad4);
}
[data-theme='5'] .grad_bg {
  background: var(--bgGrad5);
}

[data-theme='2'] .sec_result .cont_wrap:before {
  background-image: url('../images/sub_bg2.png');
}
[data-theme='3'] .sec_result .cont_wrap:before {
  background-image: url('../images/sub_bg3.png');
}
[data-theme='4'] .sec_result .cont_wrap:before {
  background-image: url('../images/sub_bg4.png');
}
[data-theme='5'] .sec_result .cont_wrap:before {
  background-image: url('../images/sub_bg5.png');
}

[data-theme='2'] .theme_btn {
  background: var(--btn1);
  box-shadow: var(--shadow1);
}
[data-theme='3'] .theme_btn {
  background: var(--btn2);
  box-shadow: var(--shadow2);
}
[data-theme='4'] .theme_btn {
  background: var(--btn3);
  box-shadow: var(--shadow3);
}
[data-theme='5'] .theme_btn {
  background: var(--btn4);
  box-shadow: var(--shadow4);
}

[data-theme='2'] .sec_result .cont2 .sub_hd {
  background-color: var(--o-clr2);
}
[data-theme='3'] .sec_result .cont2 .sub_hd {
  background-color: var(--clr3);
}
[data-theme='4'] .sec_result .cont2 .sub_hd {
  background-color: var(--clr4);
}
[data-theme='5'] .sec_result .cont2 .sub_hd {
  background-color: var(--clr5);
}

@media all and (max-width: 1024px){
  .sec_result .cont2 .bd.col3 .col li div{
    gap: 0.4583vw;
  }
  .sec_result .cont2 .bd.col3 li div {
    padding: 0.8333vw 0 0.8333vw 1.6458vw;
  }
}
@media all and (max-width: 768px) {
  .sec_visual {
    background-position: 20px;
  }
  [data-theme='1'] .sec_visual {
    background-color: var(--clr1);
  }
  [data-theme='2'] .sec_visual {
    background-color: var(--o-clr2);
  }
  [data-theme='3'] .sec_visual {
    background-color: var(--clr3);
  }
  [data-theme='4'] .sec_visual {
    background-color: var(--clr4);
  }
  [data-theme='5'] .sec_visual {
    background-color: var(--clr5);
  }

  .sec_visual {
    /* height: 175px; */
    width: 100%;
    aspect-ratio: 360 / 175;
  }
  header {
    top: 18px;
    right: 20px;
  }
  header a,
  header a::before {
    width: 22px;
    height: 22px;
  }
  header p {
    font-size: 12px;
    top: 125%;
  }

  .footer .inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .ft_list li {
    font-size: 16px;
    padding: 3px 10px;
  }
  .ft_list li::after {
    display: none;
  }
  .ft_contact li {
    float: none;
    width: 100%;
    padding: 10px 0;
  }
  .ft_contact li .tit {
    font-size: 20px;
  }
  .ft_contact li span {
    font-size: 14px;
    white-space: nowrap;
  }
  .innerB {
    padding: 0 15px;
  }

  .sec_visual h3 {
    padding-bottom: 0;
  }
  .sec_visual h3 span {
    font-size: 36px;
  }

  main:not([data-theme='1']) .sec_result .tit {
    padding: 24px 0;
  }

  .sec_result .cont1 {
    padding: 36px 0;
  }
  .sec_result .cont1 ul {
    width: calc(100% - 40px);
    max-width: 100%;
  }
  .sec_result .cont1 li {
    gap: 13px;
  }
  .sec_result .cont1 li::before {
    width: 10px;
    height: 10px;
  }
  .sec_result .cont1 p {
    font-size: 20px;
  }
  .sec_result .cont1 li:not(:last-child) {
    margin-bottom: 22px;
  }
  .sec_result .cont2 {
    width: calc(100% - 40px);
    max-width: 100%;
  }
  .sec_result .cont2 .hd {
    margin-bottom: 2px;
  }
  .sec_result .cont2 .hd.line,
  .sec_result .cont2 .hd.line div:first-of-type p {
    border-width: 1px;
  }
  .sec_result .cont2 .hd p {
    margin: 6px 0;
    padding: 0 20px;
    font-size: 14px;
  }
  .sec_result .cont2 .hd strong {
    font-size: 11px;
  }
  .sec_result .cont2 .sub_hd {
    padding: 14px 10px;
    font-size: 20px;
    border-width: 2px;
  }
  .sec_result .cont2 .bd::before,
  .sec_result .cont2 .bd::after {
    width: 1px;
  }
  .sec_result .cont2 .bd .col li {
    height: 48px;
    padding: 8px 0;
    border-width: 1px;
  }
  .sec_result .cont2 .bd .col li div {
    flex-wrap: wrap;
    height: 100%;
    padding: 2px 4px 2px 8px;
  }
  .sec_result .cont2 .bd .col li::before,
  .sec_result .cont2 .bd .col li::after {
    width: 6px;
    height: 8px;
  }
  .sec_result .cont2 .bd .col:first-of-type li::before,
  .sec_result .cont2 .bd .col:first-of-type li::after {
    right: -4px;
  }
  .sec_result .cont2 .bd .col:last-of-type li::before,
  .sec_result .cont2 .bd .col:last-of-type li::after {
    left: -4px;
  }
  .sec_result .cont2 .bd.col1 .col:first-of-type li::before,
  .sec_result .cont2 .bd.col1 .col:first-of-type li::after{
    right: -4px;
  }
  .sec_result .cont2 .bd .col h5 {
    gap: 2px;
    font-size: 13px;
  }
  .sec_result .cont2 .bd.col3 .col h5 {
    flex: 1;
  }
  .sec_result .cont2 .bd .col p {
    font-size: 10px;
  }
  .sec_result .cont_wrap {
    padding-bottom: 100px;
  }

  .sec_result .links {
    gap: 24px;
    padding-top: 100px;
    width: calc(100% - 40px);
    max-width: 100%;
  }

  .theme_btn {
    width: 150px;
    height: 50px;
    border-radius: 60px;
    padding: 0 14px 0 22px;
    font-size: 16px;
  }
  .theme_btn::after {
    width: 24px;
    height: 24px;
  }

  .sec_result .cont2 .bd.col1 .col::before ,
  .sec_result .cont2 .bd.col3 .col::before {
    width: 0.5px;
  }
  .sec_result .cont2 .bd.col3 > .col.fx_2 li:nth-child(even) div::after{
    width: 0.5px;
    right: -1px;
  }
}