/**진단도구 css입니다**/

/**************************************** 
    공통: 레이아웃
****************************************/
/** layout **/
.dx_wrap{
  position:relative;
  min-width:1260px;
  width:100%;
  display:table;
  height:calc(100% - 320px)
}
.dx_wrap::before{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:153px;
}

.dx_container{
  position:relative;
  z-index:2;  
  display: flex;
  flex-direction: column;
}

.dx_content_inner {
  width:1280px;
  margin: 0 auto;
  padding-bottom:80px;
}


/**************************************** 
    공통: 상단영역
****************************************/
.dx_top_area{
    width:1280px;
    margin:0 auto;
}


/** dx_top_area > location 
.dx_location_area {
  width: 100%;
}
.dx_location_area > ul {
  width: 100%;
  display: flex;
  height:60px;
  align-items: center;
}
.dx_location_area > ul > li {
  display: inline-flex;
  height: 58px;
  line-height: 58px;
  position: relative;
}
.dx_location_area > ul > li::after {
  content: "";
  width:28px;
  height:58px;
  display: inline-block;
  background: transparent url("../image/common/ico_arrow_r_white.svg") no-repeat 0 50%
}
.dx_location_area > ul > li:last-of-type::after{
  background:none;
  width:0
}
.dx_location_area > ul > li a .ico_home {
  background: transparent url("../image/common/ico_home.svg") no-repeat 0 50%;
  background-size: 28px 28px;
  display: inline-block;
  width: 28px;
  height: 58px;
}**/

/*  dx_top_area > location:select 
.dx_select_box {
  display: flex;
  flex-direction: column;
}
.dx_select_box > a {
  color:#fff;
}
.dx_select_box.active > a {
  display:inline-flex;
  border-bottom: 0;
  overflow: hidden;
  width:auto;
  box-sizing: border-box;
  height: 58px;
  line-height: 58px;
  position: absolute;
}
.dx_select_box > a::after {
  display:block; 
  float:right;
}
.dx_select_box > a::after {
  content:'';
  background: transparent url("../image/common/ico_selcct_white.svg") no-repeat 100% 50%;
  display:inline-block;
  width: 26px;
  height: 58px;
}
.dx_select_box > a.off::after {
  transform: rotate(-180deg);
  background: transparent url("../image/common/ico_selcct_white.svg") no-repeat 100% 50%;
}
.dx_select_box > ul {
  position:relative;
  top:-13px;
  width:100%; 
  background:#fff; 
  border: 1px solid #DEE1E5;
  box-sizing: border-box;
  margin-top:-1px;
  display:none;
  z-index:5
}
.dx_select_box.active > ul {
  top:46px;
}
.dx_select_box > ul > li {
  cursor:pointer; 
  padding:0 12px 0 24px; 
  border-top:0;
  height: 38px;
  line-height: 38px;
}

.dx_select_box > ul > li:hover{
  background:#F4F4F5
}

.dx_select_box > ul > li a {
  line-height: 38px !important;
}*/

/* dx_top_area > dx_key_visual_area */
.dx_key_visual_area{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:42px 80px;
  background:#37c375;
  border-radius:10px;
}
.dx_key_visual_area h2{
  color:#fff;
  font-size:38px;
  font-weight:700;
  line-height:46px;
}
.dx_key_visual_area .dx_desc{
  margin-top:8px;
  font-size:16px;
  font-weight:500;
  color:#fff;
}
/* dx_top_area > dx_key_visual_area > tab*/
.dx_tab_nav {
  display: flex;
  align-items: center;
  gap:10px;
}
.dx_tab_nav li.dx_tab_nav_item {
  display: inline-block;
}
.dx_tab_nav li.dx_tab_nav_item a.dx_tab_nav_link {
  display:inline-block;
  height: 48px;
  min-width: 180px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.20);
  font-size: 16px;
  color: #fff;
  font-weight:700;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
  text-align: center;
  position: relative;
  line-height: 48px;
  cursor: pointer;
  padding: 0 16px;
  border:1px solid transparent;
  box-sizing:border-box;
}

.dx_tab_nav li.dx_tab_nav_item a.dx_tab_nav_link:hover{
  border-color:#fff;
}

.dx_tab_nav li.dx_tab_nav_item.active .dx_tab_nav_link {
  background: #fff;
  color: #52595C;
  font-weight:600;
}
.dx_tab_nav li.dx_tab_nav_item.active .dx_tab_nav_link span.chk {
  display: inline-block;
  width: 14px;
  height:14px;
  background: transparent url("../image/common/ico_arrow_active.svg") no-repeat 0 0;
  margin-left:8px;
}

/**************************************** 
    컨텐츠 영역
****************************************/

/**************************************** 
    진단안내
****************************************/

/*타이틀*/
.dx_tit_intro{
  padding:60px 18px 0px 18px;
  text-align:center;
}

.dx_tit_intro p.txt_gradient{
  padding-bottom:20px;
  font-size:30px;
  background:#37c375;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:700;
}

.dx_tit_intro  p.txt{
  position:relative;
  font-size:22px;
  font-weight:300;
  color:#25282B;
  line-height:1.4;
  width:auto;
  display:inline-block;
}

.dx_tit_intro  p.txt::before,.dx_tit_intro  p.txt::after{
  content:"";
  display:block;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:27px;
  height:18px;
  background-size:100%;
  background-position:0 0;
  background-repeat: no-repeat;
}

.dx_tit_intro  p.txt::before{
  left:-50px;
  background-image:url(../image/page/intro/dx_icon_quote_st.svg);
}

.dx_tit_intro  p.txt::after{
  right:-50px;
  background-image:url(../image/page/intro/dx_icon_quote_ed.svg);
}

.dx_tit_intro b{
  font-weight:600;
}

/*배경영역*/
.dx_bg_gray{
  width:100%;
  background-color:#EFF5F6;
  padding:70px 0;
}

.dx_start1 .dx_tit_wrap h2.dx_tit{
  font-size:28px;
  font-weight:700;
  color:#323638;
  text-align:center;
  margin-bottom:30px;
}


/*step_list1 (이미지)*/
.dx_step_list_w {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}

.dx_step_list_w {
  width:1280px;
  margin:0 auto;
}

.dx_step_list_w li{
  position:relative;
  text-align:center;
}

.dx_step_list_w > li + li{
  position:relative;
}

.dx_step_list_w > li + li::before{
  content:"";
  position:absolute;
  display:block;
  left:-50px;
  top:111px;
  width:32px;
  height:32px;
  background:url(../image/page/intro/dx_step_arrow-next.svg) no-repeat 0 0;
}

.dx_step_list_w li .img{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  height:160px;
  margin-bottom:15px;
}

.dx_step_list_w li .step_num{
  border-radius:2px;
  background:#D5DBDB;
  padding:3px 6px;
  font-size:13px;
  color:#52595C;
  font-weight:600;
}

.dx_step_list_w li .tit p{
  padding-top:8px;
  color:#25282B;
  font-size:20px;
  font-weight:600;
  line-height:1.2;
}

/*step_info (텍스트)*/
.dx_content_inner:has(.dx_step_info_w){
  padding:70px 0 197px;
}
.dx_content_inner:has(.dx_step_info_w) .dx_tit_wrap{
  margin-bottom:20px;
}

.dx_tit_wrap h4.dx_tit{
  font-size:24px;
  font-weight:700;
  color:#25282B;
  margin-bottom:6px;
}
.dx_tit_wrap .dx_desc{
  font-size:18px;
  color:#25282B;
}

.dx_step_info_w{
  display:flex;
  gap:24px;
}

.dx_step_info_w > li{
  position:relative;
  width:180px;
  height:278px;
  padding:30px;
  background-color:#E1E8E9;
  border-radius:20px;
  box-sizing:border-box;
  transition:all 1.0s ease;
  overflow:hidden;
}

.dx_step_info_w > li.open{
  flex:1;
  min-width:180px;  	
}


.dx_step_info_w > li .front{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:100%;
  height:100%;
}

.dx_step_info_w > li .front b{
  display:block;
  font-size:18px;
  font-weight:700;
  color:#323638;
  margin-bottom:10px;
}

.dx_step_info_w > li .front [class^="icon"]{
  display:inline-block;
  margin-bottom:10px;
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:#37C375;
  background-position:center;
  background-repeat:no-repeat;
}

.dx_step_info_w > li .front .icon_step1{
  background-image:url(../image/page/intro/dx_step1_icon.svg);
}

.dx_step_info_w > li .front .icon_step2{
  background-image:url(../image/page/intro/dx_step2_icon.svg);
}

.dx_step_info_w > li .front .icon_step3{
  background-image:url(../image/page/intro/dx_step3_icon.svg);
}

.dx_step_info_w > li .front .icon_step4{
  background-image:url(../image/page/intro/dx_step4_icon.svg);
}

.dx_step_info_w > li .front .txt_green{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.dx_step_info_w > li .front .txt_green span{
  font-size:15px;
  font-weight:500;
  color:#37C375;
}

.dx_step_info_w > li .back {
  display:flex;
  position: absolute;
  top: 0;
  left: 0;
  min-width:668px;
  width:100%;
  height: 100%;
  background-color: #37C375;
  border-radius: 20px;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  gap:30px;
  box-sizing: border-box; 
  opacity:0;
  transition:opacity 0.3s ease;
}

.dx_step_info_w > li.open .back{
  opacity:1;
}

.dx_step_info_w > li.open .front{
  opacity:0;
}

.dx_step_list_w .step3 .info_box .hover,
.dx_step_list_w .step4 .info_box .hover{
  gap:16px
}

.dx_step_info_w > li .back li{
  position:relative;
  padding-left:52px;
  height:56px;
  display:flex;
  justify-content:center;
  flex-direction:column;
}
.dx_step_info_w > li .back li + li::before{
  content:'';
  position:absolute;
  left:0;
  top:-15px;
  display:block;
  width:100%;
  height:1px;
  background-color:rgba(255, 255, 255, 0.35);
  
}

.dx_step_info_w > li .back span{
  color:#fff;
 font-size:16px;
 line-height:1.2;
}

.dx_step_info_w > li .back b{
 display: flex;
  color:#fff;
 font-size:18px;
 font-weight:600;
 line-height:18px;
 margin-bottom:7px;
}

.dx_step_info_w > li .back [class^="icon"]{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-block;
  margin-right:8px;
  width:36px;
  height:36px;
  border-radius:50%;
  background-color:rgba(255, 255, 255, 0.15);
  background-position:center;
  background-repeat:no-repeat;
}

.dx_step_info_w > li .back .icon-step1-1{
  background-image:url(../image/page/intro/dx_step1_icon1_h.svg);
}

.dx_step_info_w > li .back .icon-step1-2{
  background-image:url(../image/page/intro/dx_step1_icon2_h.svg);
}

.dx_step_info_w > li .back .icon-step2-1{
  background-image:url(../image/page/intro/dx_step2_icon1_h.svg);
}

.dx_step_info_w > li .back .icon-step2-2{
  background-image:url(../image/page/intro/dx_step2_icon2_h.svg);
}

.dx_step_info_w > li .back .icon-step3-1{
  background-image:url(../image/page/intro/dx_step3_icon1_h.svg);
}

.dx_step_info_w > li .back .icon-step3-2{
  background-image:url(../image/page/intro/dx_step3_icon2_h.svg);
}

.dx_step_info_w > li .back .icon-step3-3{
  background-image:url(../image/page/intro/dx_step3_icon3_h.svg);
}

.dx_step_info_w > li .back .icon-step4-1{
  background-image:url(../image/page/intro/dx_step4_icon1_h.svg);
}

.dx_step_info_w > li .back .icon-step4-2{
  background-image:url(../image/page/intro/dx_step4_icon2_h.svg);
}

.dx_step_info_w > li .back .icon-step4-3{
  background-image:url(../image/page/intro/dx_step4_icon3_h.svg);
}

/*floating 버튼 영역(진단안내)*/
.dx_floating_btn{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:50px;
  display:flex;
  justify-content:space-between;
  gap:34px;
  width:900px;
  padding:20px 60px;
  border-radius: 500px;
  background:linear-gradient(257deg, #B68DFF 0%, #63ACEF 47.12%, #17D0A9 100%);
  box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.15);
}


.dx_floating_btn.dx_fixed{
  position:fixed;
  bottom:20px;
}

.dx_floating_btn .txt{
  flex:1;
  color:#fff;
  text-shadow:0 0 4px rgba(0, 0, 0, 0.10);
}

.dx_floating_btn p{
  margin-bottom:6px;
  padding-left:26px;
  background:url(../image/page/intro/dx_icon_document.svg) no-repeat 0 50%;
  font-size:22px;
  line-height:26px;
  font-weight:600;
}

.dx_floating_btn span{
  font-size:16px;
}

.dx_floating_btn span b{
  font-weight:600;
}

.dx_floating_btn .btn_gradient{
  padding:14px 46px;
  border-radius:50px;
  background: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter:blur(5px);
  border:1px solid transparent
}

.dx_floating_btn .btn_gradient:hover{
  border-color:#fff;
}

.dx_floating_btn .btn_gradient span{
  font-size:16px;
  color:#52595C;
  font-weight:700;
}

.dx_floating_btn,
.dx_floating_bar {
  will-change: transform, opacity;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/**************************************** 
    진단하기 :  레이아웃
****************************************/

.dx_flex_wrap{
  display:flex;
  width:100%; 
  min-height:100vh;
  margin-top:60px;
}

.dx_content_inner:has(.dx_right_content){
  padding-bottom:0;
}

.dx_right_content{
  flex:1;
  padding-left:40px;
  padding-bottom:80px;
}

[class*="start"] .dx_right_content{
  border-left:1px solid #D5DBDB;
}


/**************************************** 
    진단하기 : process
****************************************/

.dx_left_content{
  padding-right:40px;
  width:260px;
}

.dx_process_list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.dx_process_list.dx_fixed{
  position:fixed;
  top:130px;
  z-index:0;
}

.dx_process_list .tit{
  font-size:20px;
  line-height:24px;
  color:#52595C;
  font-weight:500;
  margin-bottom:10px;
  padding-left:34px;
  background-repeat:no-repeat;
  background-size:24px;
  background-position:0 50%;
}

.dx_process_list li.ing .tit{
  color:#25282B;
  font-weight:700;
}

.dx_process_list li.complate .tit{
  color:#909698;
  font-weight:500;
}

.dx_process_list li.phase1 .tit{
  background-image:url(../image/page/tool/dx_icon_phase1.svg);
}
.dx_process_list li.phase1.ing .tit{
  background-image:url(../image/page/tool/dx_icon_phase1_ing.svg);
}

.dx_process_list li.phase2 .tit{
  background-image:url(../image/page/tool/dx_icon_phase2.svg);
}
.dx_process_list li.phase2.ing .tit{
  background-image:url(../image/page/tool/dx_icon_phase2_ing.svg);
}

.dx_process_list li.phase3 .tit{
  background-image:url(../image/page/tool/dx_icon_phase3.svg);
}
.dx_process_list li.phase3.ing .tit{
  background-image:url(../image/page/tool/dx_icon_phase3_ing.svg);
}

.dx_phase_list_w{
  display:none;
  flex-direction:column;
  gap:29px;
  border-radius:10px;
  background-color:#F3F7F8;
  padding:25px 20px;
  width:220px;
  box-sizing:border-box;
}
.ing .dx_phase_list_w{
  display:flex;
}
.dx_phase_list_w li + li{
position:relative;
}
.dx_phase_list_w li + li::after{
  content:"";
  position:absolute;
  top:-28px;
  left:9px;
  display:block;
  width:2px;
  height:28px;
  background-color:#E1E8E9;
}
.dx_phase_list_w li p{
  position: relative;
  padding-left:32px;
  font-size:16px;
  color:#7B8184;
  line-height:22px;
}
.dx_phase_list_w li p::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:20px;
  height:20px;
  border:1px solid #D5DBDB;
  background-color:#fff;
  border-radius:50%;
}
.dx_phase_list_w li.ing p::before{
  background-image:url(../image/page/tool/dx_process_ing.svg);
  background-repeat:no-repeat;
  background-position:center;
  border-color:#37C375;
}

.dx_phase_list_w li.complate p::before{
  background-image:url(../image/page/tool/dx_process_complate.svg);
  background-repeat:no-repeat;
  background-position:center;
  background-color:#37C375;
  border-color:#37C375;
}
.dx_phase_list_w li.complate + li::after{
  background-color:#37C375;
}

/**************************************** 
    진단하기 : 하단 floating bar
****************************************/

.dx_content_inner:has(.dx_floating_bar){
  padding-bottom:84px;
}

.dx_floating_bar{
  position:absolute;
  bottom:0;
  left:0;
  z-index:1;
  width:100%;
  background-color:#fff;
  padding:16px 0;
  box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.03);
  display:flex;
  justify-content:center;
  min-width: 1280px;
}

.dx_floating_bar.dx_fixed{
  position:fixed;
}

.dx_floating_bar .dx_inner{
  position:relative;
  width:100%;
  max-width:1280px;
  display:flex;
  justify-content:center;
}

.dx_floating_bar .dx_btn_wrap{
  display:flex;
  justify-content:center;
  gap:8px;
}

.dx_floating_bar .dx_btn_wrap button{
  padding:14px 46px;
  border-radius:50px;
  font-size:19px;
  font-weight:600;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_prev {
  background:#5A6265;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_prev:hover {
  background:#52595C;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_prev span{
  padding-left:26px;
  color:#fff;
  background:url(../image/page/tool/dx_arrow_prev.svg) no-repeat 0 50%;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_next {
  background:#37C375;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_next:hover{
  background:#32B16A;
}


.dx_floating_bar .dx_btn_wrap button.dx_btn_next span{
  padding-right:26px;
  color:#fff;
  background:url(../image/page/tool/dx_arrow_next.svg) no-repeat right 0 top 50%;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_next:disabled {
  background:#EFF5F6;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_next:disabled span{
  color:#BCC1C3;
  background:url(../image/page/tool/dx_arrow_next_disabled.svg) no-repeat right 0 top 50%;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_temp_save {
  background:#fff;
  border: 1px solid #d5dbdb;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_temp_save span{
  color:#52595C;
  padding-left:26px;
  background:url(../image/page/tool/dx_temp_save.svg) no-repeat 0 50%;
}

.dx_floating_bar .dx_btn_wrap button.dx_btn_temp_save:hover span{
  color:#37C375;
  background:url(../image/page/tool/dx_temp_save_h.svg) no-repeat 0 50%;
}


/*진단하기 page 별도*/
.dx_start3 .dx_floating_bar .dx_inner{
  justify-content:space-between;
}

/*질문 카운트*/
.dx_floating_bar .dx_question_counter{
  display:flex;
  align-items:center;
  gap:8px;
}

.dx_floating_bar .dx_counter{
  color:#7B8184;
  font-size: 24px;
  font-weight: 600;
}

.dx_floating_bar .dx_counter .current{
  color:#37C375;
}

/**************************************** 
    공통: 툴팁 
****************************************/
.dx_tooltip{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.dx_tooltip .dx_icon_tooltip{
  display:inline-block;
  width:20px;
  height:20px;
  background:url(../image/page/result/dx_icon_tooltip.svg) no-repeat 0 0/100%;
}

.dx_tooltip .dx_icon_tooltip:hover{
  background-image:url(../image/page/result/dx_icon_tooltip_h.svg);
}

.dx_tooltip .dx_tooltip_content {
    display:none;
    position:absolute;
    padding:16px;
    border-radius:10px;
    background-color:#404648;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
    z-index:2;
}
.dx_tooltip:hover .dx_tooltip_content{
  display: block;
}

.dx_tooltip .dx_tooltip_content p{
  color:#fff;
  font-size:17px;
  font-weight:400;
  line-height:1.3;
}

.dx_tooltip .dx_tooltip_content b{
  font-weight:700;
}


/*tooltip2(클릭 컨트롤)*/
.dx_tooltip2 .dx_icon_tooltip{
  display:inline-block;
  background-image:url(../image/page/tool/dx_icon_tooltip_Q.svg);
  width:34px;
  height:31px;
}

.dx_tooltip2:has(.dx_tooltip_content.open) .dx_icon_tooltip:hover, .dx_tooltip2 .dx_icon_tooltip:hover{
  background-image:url(../image/page/tool/dx_icon_tooltip_Q_h.svg);
}

.dx_tooltip2 .dx_tooltip_content {
  display:none;
  position:absolute;
  bottom:58px;
  left:-205px;
  padding:16px;
  border-radius:10px;
  background-color:#404648;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  z-index:20;
}

.dx_tooltip2 .dx_tooltip_content.open{
  display: block;
}

.dx_tooltip2 .dx_tooltip_content::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #404648;
}

.dx_tooltip2 .dx_tooltip_content .dx_tooltip_header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}

.dx_tooltip2 .dx_tooltip_content .dx_tooltip_header b{
  font-size:17px;
  color:#fff;
  font-weight:700;
}

.dx_tooltip2 .dx_tooltip_content .dx_tooltip_header .dx_tooltip_close .dx_icon_close{
  display:inline-block;
  width:14px;
  height:14px;
  background:url(../image/common/dx_tooltip_close.svg) no-repeat 0 0;
}

.dx_tooltip2 .dx_tooltip_content p{
  color:#fff;
  font-size:17px;
  font-weight:400;
  line-height:1.3;
}

.dx_tooltip2 .dx_tooltip_content b{
  font-weight:700;
}

@media only screen and (max-width:1700px) {
.dx_tooltip2 .dx_tooltip_content{
  left:0
}
.dx_tooltip2 .dx_tooltip_content::after{
  left:10px;
  transform:none;
}
}

/**************************************** 
    진단하기: 라디오 버튼 공통 
****************************************/
.dx_step_wrap + .dx_step_wrap{
  margin-top:40px;
}

.dx_step_tit{
  font-size:24px;
  font-weight:700;
  color:#323638;
  margin-bottom:20px
}

.dx_question_desc{
  font-size:22px;
  font-weight:500;
  color:#404648;
  margin-bottom:16px
}

.dx_radioGroup.question{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.dx_radioGroup.question.col{
  flex-direction:column;
}

.dx_radioGroup.question li{
  flex:1;
}

.dx_radioGroup.question .dx_question_radiobox{
  display:flex;
  align-items:center;
  position:relative; 
  cursor: pointer;
  border-radius: 10px;
  background:#E1E8E9;
  padding:1px;
}

.dx_radioGroup.question .dx_question_radiobox input[type="radio"]{
  display:none;
}

.dx_radioGroup.question .dx_question_radiobox label.radio_text{
  flex:1; 
  display:flex;
  justify-content:center; 
  align-items:center;
  cursor:pointer;
  width:100%; 
  padding:16px 0;
  text-align:center;
  border-radius: 10px;
  background: #F8FAFA;
}

.dx_radioGroup.question .dx_question_radiobox label.radio_text *{
  position:relative;  
  color:#52595C;
  z-index:1;
}

.dx_radioGroup.question .dx_question_radiobox label.radio_text b{
  font-size: 18px;
  font-weight:600;
  padding-right:8px;
}

.dx_radioGroup.question .dx_question_radiobox label.radio_text span{
  font-size:17px;
  font-weight:300;
}

.dx_radioGroup.question .dx_question_radiobox:hover{
  background:#32B16A;
  border-radius:11px;
}

.dx_radioGroup.question .dx_question_radiobox:hover input[type="radio"] + label.radio_text *{
  background:#37c375;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dx_radioGroup.question .dx_question_radiobox input[type="radio"]:checked + label.radio_text *,
.dx_radioGroup.question .dx_question_radiobox:hover input[type="radio"]:checked + label.radio_text *{
  color:#fff;
  background:none;
  -webkit-text-fill-color: #fff;
}

.dx_radioGroup.question .dx_question_radiobox input[type="radio"]:checked + label.radio_text{
  background:#37c375;
}

.dx_radioGroup.question .dx_question_radiobox:hover input[type="radio"]:checked + label.radio_text{
  background:#32B16A;
}

/**************************************** 
    진단하기 > 기본정보선택
****************************************/

.dx_start2 h2.dx_tit{
  font-size:28px;
  font-weight:700;
  color:#25282B;
  margin-bottom:60px
}

.dx_start2 .dx_banner_wrap{
  margin-bottom:40px;
  width:100%;
  padding:40px 45px;
  border-radius:20px;
  background:url(../image/page/tool/dx_banner_bg.png) no-repeat right bottom/auto 100%,#DDEEFF;
}

.dx_start2 .dx_banner_wrap .dx_banner_txt span{
  color: #25282B;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
}

.dx_start2 .dx_banner_wrap .dx_banner_txt .txt_gradient{
  margin-top:10px;
  font-size: 30px;
  line-height: 1.3; 
  background: linear-gradient(257deg, #AA7BFF 0%, #579FE2 47.12%, #1CC5A0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dx_start2 .dx_banner_wrap .dx_banner_txt .txt_gradient b{
  background: linear-gradient(257deg, #AA7BFF 0%, #579FE2 47.12%, #1CC5A0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:600;
}

.dx_flex_box{
  display:flex;
  align-items:center;
  gap:16px
}

.dx_flex_box .dx_radioGroup.question{
  flex:1;
}

.dx_flex_box .dx_icon_info_r{
  width:309px;
  padding-left:22px;
  background:url(../image/page/tool/dx_icon_info_r.svg) no-repeat 0 50% ;
}

.dx_flex_box .dx_icon_info_r span{
  color:#F65846;
  font-size:16px;
  line-height:20px;
  font-weight:500;
}

.dx_step_wrap .dx_tit_wrap{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
}

.dx_step_wrap .dx_tit_wrap .dx_step_tit{
  margin-bottom:0;
}

.dx_step_wrap .dx_tit_wrap .dx_btn_pop{
  border-radius: 50px;
  border:1px solid  #E1E8E9;
  background:#FFF;
  color: #52595C;
  font-size: 15px;
  font-weight: 500;
  padding:5px 15px;
  padding-right:36px;
  background:url(../image/page/tool/dx_icon_pop.svg) no-repeat right 15px top 50%;
}

.dx_step_wrap .dx_tit_wrap .dx_btn_pop:hover{
  color:#37C375;
  background-image:url(../image/page/tool/dx_icon_pop_h.svg);
}


.dx_start2 .dx_banner_list{
  width:100%;
  display:flex;
  gap:16px;
}

.dx_start2 .dx_banner_list li{
  flex:1;
}

.dx_start2 .dx_banner_list li .dx_step_banner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  width:100%;
  height:170px;
  padding-left:30px;
  box-sizing:border-box;
  border-radius:20px;
  background-repeat:no-repeat;
  background-size:100% 100%;
}

.dx_start2 .dx_banner_list li .dx_step_banner.banner1{
  background-image:url(../image/page/tool/dx_banner_bg_link1.png);
}

.dx_start2 .dx_banner_list li .dx_step_banner.banner1:hover{
  background-image:url(../image/page/tool/dx_banner_bg_link1_h.png);
}

 .dx_start2 .dx_banner_list li .dx_step_banner.banner1:active{
  background-image:url(../image/page/tool/dx_banner_bg_link1_active.png);
 }

 .dx_start2 .dx_banner_list li .dx_step_banner.banner2{
  background-image:url(../image/page/tool/dx_banner_bg_link2.png);
}

.dx_start2 .dx_banner_list li .dx_step_banner.banner2:hover{
  background-image:url(../image/page/tool/dx_banner_bg_link2_h.png);
}

 .dx_start2 .dx_banner_list li .dx_step_banner.banner2:active{
  background-image:url(../image/page/tool/dx_banner_bg_link2_active.png);
 }

.dx_start2 .dx_banner_list li .dx_step_banner .dx_banner_txt{
  color:#5A6265;
}

.dx_start2 .dx_banner_list li .dx_step_banner .dx_banner_txt p{
  font-size: 17px;
  margin-bottom:10px;
}

.dx_start2 .dx_banner_list li .dx_step_banner .dx_banner_txt .dx_banner_link{
  font-size: 20px;
  padding-right:18px;
  background:url(../image/page/tool/dx_icon_link_banner.svg) no-repeat right 0 top 50%;
}

.dx_start2 .dx_banner_list li .dx_step_banner .dx_banner_txt .dx_banner_link b{
  font-weight:700;
}

.dx_start2 .dx_banner_list li .dx_step_banner:hover .dx_banner_txt .dx_banner_link,
.dx_start2 .dx_banner_list li .dx_step_banner:active .dx_banner_txt .dx_banner_link{
  background-image:url(../image/page/tool/dx_icon_link_banner_h.svg);
}

.dx_start2 .dx_banner_list li .dx_step_banner:hover .dx_banner_txt .dx_banner_link b,
.dx_start2 .dx_banner_list li .dx_step_banner:active .dx_banner_txt .dx_banner_link b{
  background: linear-gradient(257deg, #B68DFF 0%, #63ACEF 47.12%, #17D0A9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dx_start2 .dx_banner_list li .dx_step_banner:hover .dx_banner_txt .dx_banner_link span,
.dx_start2 .dx_banner_list li .dx_step_banner:active .dx_banner_txt .dx_banner_link span{
background: linear-gradient(257deg, #B68DFF 0%, #63ACEF 47.12%, #17D0A9 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.dx_start2 .dx_banner_list li .dx_step_banner .dx_banner_img{
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

/**************************************** 
  진단하기 > 개인정보 처리방침
****************************************/

.pop-layer:has(.dx_privacyinfo_pop){
  border-radius:40px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

.dx_privacyinfo_pop{
  padding:40px;
}

.dx_privacyinfo_pop .pop_btn2.cbtn{
  top:23px;
  right:40px;
}

.dx_privacyinfo_pop .dx_pop_tit_wrap{
  margin-bottom:30px;
}

.dx_privacyinfo_pop .dx_pop_tit_wrap h3{
  color:#25282B;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
}

.dx_privacyinfo_list {
  display:flex;
  flex-direction:column;
  gap:16px
}

.dx_privacyinfo_list li b {
  font-size:18px;
  font-weight:500;
  color:#25282B;
}

.dx_privacyinfo_list li b.dx_txt_green {
  color:#37C375;
}

.dx_privacyinfo_list li p {
  margin-top:10px;
  font-size:16px;
  line-height:1.2;
  color:#25282B;
}

/**************************************** 
    진단하기 > 진단하기  
****************************************/
.dx_start3 .dx_tit_wrap{
  margin-bottom:30px;
}

.dx_start3 .dx_tit_wrap .dx_step_tit{
  margin-bottom:10px
}
.dx_start3 .dx_tit_wrap .dx_desc{
  padding:9px 17px;
  width:100%;
  background-color:#EBF9F1;
  border-radius: 5px;
}
.dx_start3 .dx_tit_wrap .dx_desc span{
  margin-left:12px;
  font-size:20px;
  font-weight:600;
  line-height:32px;
  color:#37C375;
}
.dx_start3 .dx_tit_wrap .dx_desc i.num{
  display:inline-block;
  width:32px;
  font-size:20px;
  font-weight:600;
  line-height:32px;
  border-radius:5px;
  text-align:center;
  background-color:#37C375;
  color:#fff;
  font-style:normal;
}

.dx_start3 .dx_radio_tit{
  font-size:20px;
  font-weight:600;
  color:#323638;
  line-height:34px;
  margin-bottom:20px;
}

.dx_start3 .dx_radio_tit .num {
  font-size:26px;
  line-height:34px;
  color:#37C375;
  font-weight:600;
  font-style: normal;
}


/**************************************** 
    진단하기 > 진단완료 
****************************************/
.dx_txt_banner{
  border-radius: 16px;
  border-bottom: 1px solid #E1E8E9;
  background: linear-gradient(257deg, rgba(182, 141, 255, 0.15) 0%, rgba(99, 172, 239, 0.15) 47.12%, rgba(23, 208, 169, 0.15) 100%);
  padding:24px 30px;
  margin-bottom:60px;
}

.dx_txt_banner p{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:64px;
  padding-left:94px;
  background:url(../image/page/tool/dx_icon_banner.png) no-repeat 0 0/64px;
}

.dx_txt_banner p > b{
  font-size:24px;
  color:#404648;
  font-weight:700;
  line-height:1.4;
}

.dx_txt_banner p span{
  font-size:20px;
  color:#404648;
  font-weight:300;
  line-height:1.4;
}

.dx_start4 .dx_radioGroup.question li{
  min-width:32%;
}

/**************************************** 
    진단결과 :  공통
****************************************/
[class*="dx_result"] .dx_btn_top{
  text-align:right;
}

[class*="dx_result"] .dx_btn_top .dx_btn_list{
  padding:12px 16px;
  border-radius:50px;
  border: 1px solid #E1E8E9;
  background: #FFF;
  color:#52595C;
  font-size:16px;
  font-weight:500;
  padding-left:38px;
  background:url(../image/page/result/dx_icon_link_list.svg) no-repeat 16px 50%;
}

[class*="dx_result"] .dx_btn_top .dx_btn_list:hover{
  color:#37C375;
  background-image:url(../image/page/result/dx_icon_link_list_h.svg);
}

[class*="dx_result"] .dx_btn_top .dx_btn_list:active{
  color:#32B16A;
  background-image:url(../image/page/result/dx_icon_link_list_a.svg);
}

[class*="dx_result"] .dx_btn_top .dx_btn_list2{
  padding:12px 38px 12px 14px;
  border-radius:50px;
  border: 1px solid #E1E8E9;
  background: #FFF;
  color:#52595C;
  font-size:16px;
  font-weight:500;
}

[class*="dx_result"] .dx_btn_top .dx_btn_list2:hover{
  color:#37C375;
}

[class*="dx_result"] .dx_btn_top .dx_btn_list2:active{
  color:#32B16A;
}

[class*="dx_result"] .dx_btn_top .dx_btn_list2:hover span.chk{
  color:#37C375;
  background-image:url(../image/page/result/dx_icon_link_list_h.svg);
  transform: scale(-1,1);
}

[class*="dx_result"] .dx_btn_top .dx_btn_list2:active span.chk{
  color:#32B16A;
  background-image:url(../image/page/result/dx_icon_link_list_a.svg);
  transform: scale(-1,1);
}

[class*="dx_result"] .dx_btn_top .dx_btn_list2 span.chk{
  background:url(../image/page/result/dx_icon_link_list.svg) no-repeat 16px 50%;
  transform: scale(-1);
  padding:8px 20px;
  position: absolute;
}
/**************************************** 
    진단결과 :  추천교육과정보기
****************************************/

/*left-content*/
.dx_result1 .dx_left_content{
  width:260px;
  padding-right:0;
}

.dx_summary_box{
  margin-bottom:16px;
  border-radius: 10px;
  border: 1px solid #E1E8E9;
  background: #FFF;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.05);
}

.dx_summary_top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 16px;
  background:#EFF5F6;
  border-radius: 10px 10px 0 0;
}

.dx_summary_top .dx_title{
  font-size:18px;
  color:#323638;
  font-weight:700;
}

.dx_summary_top .dx_link{
  font-size:15px;
  color:#5A6265;
  font-weight:500;
  padding-right:16px;
  background:url(../image/page/result/dx_icon_link.svg) no-repeat right center;
}

.dx_summary_top .dx_link:hover{
  text-decoration:underline;
}

.dx_summary_inner{
  padding:20px 16px;
}

.dx_summary_score{
  padding:16px;
  border-radius: 8px;
  border:1px solid #E1E8E9;
  background:#F8FAFA;
  padding-left:79px;
  background:url(../image/page/result/dx_icon_score.svg) no-repeat left 16px top 50%;
}

.dx_summary_score .dx_label{
  color:#5A6265;
  font-size: 14px;
  line-height: 1.3;
}

.dx_summary_score .dx_score{
  display:flex;
  gap:5px;
  align-items:flex-end;
}


.dx_summary_score .dx_score p{
  color:#25282B;
  line-height: 1.3;
}

.dx_summary_score .dx_score p strong{
  font-size: 26px;
  font-weight: 600;
}

.dx_summary_score .dx_score p span{
  font-size: 14px;
  font-weight:300;
}

.dx_summary_score label.dx_level_round{
  padding:2px 8px;
  background-image:none;
  border-radius: 20px;
}

/*레벨 라벨 공통*/
[class*='dx_level'] {
  font-size:16px;
  line-height:1.3;
  font-weight:500;
  padding-left:26px;
  background-repeat:no-repeat;
  background-position:0 50%;
}

[class*='dx_level'].good, [class*='dx_level'].strength{
  color:#37C375;
  background-image:url(../image/page/result/dx_level_good.svg);
}

[class*='dx_level'].normal{
  color:#ED7435;
  background-image:url(../image/page/result/dx_level_normal.svg);
}

[class*='dx_level'].low, [class*='dx_level'].weakness{
  color:#F65846;
  background-image:url(../image/page/result/dx_level_low.svg);
}

label.dx_level_round{
  border-radius:50px;
  padding:6px 10px 6px 34px;
  background-position: left 8px top 50%;
}

label.dx_level_round.good{
  background-color:#E4F6EC;
}

label.dx_level_round.normal{
  background-color:#FFEADE;
}

label.dx_level_round.low{
  background-color:#FFEFEF;
}

.dx_summary_traits{
  margin-top:15px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dx_summary_traits li{
  display:flex;
  justify-content:space-between;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  width:100%;
  box-sizing:border-box;
  border-radius: 8px;
}

.dx_summary_traits li [class*='dx_level']{
  font-size:15px;
  padding-left:21px;
  background-size:17px;
}

.dx_summary_traits li.strength{
  background-color: #E4F6EC;
}

.dx_summary_traits li.weakness{
  background-color: #FFEFEF;
}

.dx_summary_traits li.normal{
  background-color: #FFEADE;
}

.dx_summary_traits li .value{
  font-size:16px;
  font-weight:500;
  color:#404648;
}

.dx_summary_guide{
  margin-bottom:16px;
  padding:23px 27px;
  border-radius: 10px;
  background:url(../image/page/result/dx_summary_bg.png) no-repeat 0 0/cover,#fff;
  border: 1px solid rgba(63, 88, 212, 0.10);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.05);
  text-align:center;
}

.dx_summary_guide p{
  padding-bottom:20px;
  color:#323638;
  font-size:16px;
  line-height:1.4;
  font-weight:300;
}

.dx_summary_guide p b{
  font-weight:600;
}

.dx_summary_guide a.dx_more_link{
  color:#52595C;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  padding-right:18px;
  background:#fff;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 12px 20px;
}

.dx_summary_guide a.dx_more_link span.chk{
  padding-right:18px;
  background:url(../image/page/result/dx_icon_link_more.svg) no-repeat right 0 top 50%;
}

.dx_summary_bottom{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  gap:6px;
}

.dx_summary_bottom span{
  color:#5A6265;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.dx_summary_bottom .dx_tooltip .dx_tooltip_content{
  left:-50px;
  top:30px;
  width:550px;
}

.dx_summary_bottom .dx_tooltip .dx_tooltip_content p{
  font-size:15px;
}

/*right-content*/
.dx_result1 .dx_tit_wrap h2.dx_tit {
  font-size:26px;
  color:#25282B;
  font-weight:300;
  margin-bottom:40px;
}

.dx_result1 .dx_tit_wrap h2.dx_tit b{
  font-weight:700;
} 

.dx_result1 .dx_tit_wrap h2.dx_tit .num{
  padding-left:8px;
  color:#37C375;
  font-size:26px;
  font-weight:700;
}

.dx_thumbnail_wrap{
  position:relative;
}

.dx_thumbnail_wrap + .dx_thumbnail_wrap{
  margin-top:36px;
}

.dx_thumbnail_wrap .dx_thumbnail_tit{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}

.dx_thumbnail_wrap .dx_thumbnail_tit [class*="dx_priority"]{
  color:#fff;;
  font-size: 15px;
  font-weight: 600;
  line-height:29px;
  padding:0 12px;
  border-radius: 20px;
}

.dx_thumbnail_wrap .dx_thumbnail_tit [class*="dx_priority"].first{
  background-color:#F65846;
}

.dx_thumbnail_wrap .dx_thumbnail_tit [class*="dx_priority"].second{
  background-color:#F7AF13;
}

.dx_thumbnail_wrap .dx_thumbnail_tit [class*="dx_priority"].third{
  background-color:#37C375;
}

.dx_thumbnail_wrap .dx_thumbnail_tit p{
  font-size:22px;
  color:#25282B;
}

.dx_thumbnail_wrap .dx_thumbnail_tit p b{
  font-weight:700;
}


/*결과 썸네일 슬라이드*/
[class*=dx_thumbnail_swiper] {
  width:100%;
  max-width:980px; 
  overflow: hidden !important;
}

[class*=dx_thumbnail_swiper] .swiper-slide {
  border-radius: 10px;
  border: 1px solid #D5DBDB;
  background: #FFF;
  overflow:hidden;
}

[class*=dx_thumbnail_swiper] .dx_img_box{
  margin-bottom:10px;
  width: 100%; 
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 57 / 32;
}

[class*=dx_thumbnail_swiper] .dx_img_box img{
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  max-width: 231px;
}

[class*=dx_thumbnail_swiper] .dx_tit_box{
  padding:0 12px 12px;
}

[class*=dx_thumbnail_swiper] .dx_tit_box  .dx_thumbnail_label{
  margin-bottom:5px;
  display:flex;
  font-size: 13px;
  line-height:17px;
  font-weight: 600;
  background:linear-gradient(257deg, #AA7BFF 0%, #579FE2 47.12%, #1CC5A0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[class*=dx_thumbnail_swiper] .dx_tit_box  .dx_thumbnail_label::before{
  content:'';
  width:15px;
  height:15px;
  background:url(../image/page/result/dx_icon_thumbnail.svg) no-repeat 0 0;
  padding-left:4px;
}

[class*=dx_thumbnail_swiper] .dx_tit_box  .dx_tit{
  color: #25282B;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

/*슬라이드 공통*/
.dx_swiper_controls{
  position:absolute;
  top:-9px;
  width:100%;
  z-index:1;
}

.dx_swiper_controls [class*="swiper-button"]{
  z-index:1;
  border-radius:26.5px;
  margin-top:0;
  width: 30px;
  height: 30px;
  background:url(../image/common/dx_swiper_btn.svg) no-repeat center center,#fff;
  border:1px solid #D5DBDB;
}

.dx_swiper_controls [class*="swiper-button"]:hover{
  background:url(../image/common/dx_swiper_btn_h.svg) no-repeat center center ,#5A6265;
  border-color:#5A6265;
  box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.10);
}

.dx_swiper_controls [class*="swiper-button-disabled"]{
  opacity:1;
  background:url(../image/common/dx_swiper_btn_disabled.svg) no-repeat center center,#F3F7F8;
  border-color:#F3F7F8;
  box-shadow:none;
}

.dx_swiper_controls .swiper-button-prev{
  right:81px;
  left:auto;
}

.dx_swiper_controls .swiper-button-next{
  right:0px;
  rotate:180deg;
}

.dx_swiper_controls  .swiper-pagination-fraction{
  display:flex;
  position:absolute;
  top: 5px;
  bottom:auto;
  right:40px;
  left:auto;
  width:auto;
  color:#BCC1C3;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 2px;
}

.dx_swiper_controls  .swiper-pagination-fraction .swiper-pagination-current{
  color:#5A6265;
}

/**************************************** 
    진단결과 :  추천콘텐츠및서비스팝업
****************************************/
.pop-layer:has(.dx_result1_pop){
  border-radius:40px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

.dx_result1_pop{
  padding:40px;
}

.dx_result1_pop .pop_btn2.cbtn{
  top:23px;
  right:40px;
}

.dx_result1_pop .dx_pop_tit_wrap{
  margin-bottom:30px;
}

.dx_result1_pop .dx_pop_tit_wrap h3{
  color:#25282B;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
}

.dx_result1_pop .dx_tab_btn_list{
  margin-bottom:10px;
  display:flex;
  width:100%;
}

.dx_result1_pop .dx_tab_btn_list li{
  flex:1;
}

.dx_result1_pop .dx_tab_btn_list li button{
  width:100%; 
  padding:12px;
  font-size:18px;
  text-align:center;
  border-radius: 10px 10px 0 0;
  color:#909698;
  background-color: #E1E8E9;
}

.dx_result1_pop .dx_tab_btn_list li:hover button{
  color:#37C375;
}

.dx_result1_pop .dx_tab_btn_list li.active button{
  background-color:#37C375;
  color:#fff;
  font-weight:600;
}

.dx_tab_content{
  display:none;
}

.dx_tab_content.current{
  display:block;
}

.dx_result1_pop .dx_tab_content .dx_txt_banner{
  padding:16px 36px;
  margin-bottom:20px;
  background-position:0 50%;
}

.dx_result1_pop .dx_tab_content .dx_txt_banner p span{
  font-size:16px;
  color:#323638;
}

.dx_result1_pop .dx_tab_content .dx_txt_banner p span b{
  font-weight:700;
}

.dx_result1_pop .dx_tab_content .dx_scroll_wrap{
  max-height:362px;
  overflow-y:auto;
}

.dx_result1_pop .dx_link_list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dx_result1_pop .dx_link_list li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius: 10px;
  background:#EFF5F6;
  border:1px solid #EFF5F6;
  padding:20px;
}

.dx_result1_pop .dx_link_list li a:hover{
  border:1px solid #D5DBDB;
  background:#E1E8E9;
  box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.dx_result1_pop .dx_link_list li .dx_link_txt{
  display:flex;
  align-items:center;
  gap:20px;
  font-size: 16px;
  line-height:1.3;
  color:#25282B;
}
.dx_result1_pop .dx_link_list li .dx_link_txt > b{
  font-weight: 600;
  display:inline-block;
  width:140px;
}

.dx_result1_pop .dx_link_list li .dx_link_direct{
  color: #5A6265;
  font-size: 14px;
  padding-right:17px;
  background:url(../image/page/result/dx_icon_link_direct.svg) no-repeat right 0 top 50%;
}
/*
.dx_result1_pop .dx_link_list li .dx_link_direct:hover{
  color:#37C375;
  background-image: url(../image/page/result/dx_icon_link_direct_h.svg);
}*/

.dx_result1_pop .dx_link_list li .dx_link_txt > span{
  flex:1;
}


/**************************************** 
    진단결과 : 진단목록보기
****************************************/

.dx_result2 .dx_tit_wrap h2.dx_tit {
  font-size:28px;
  color:#25282B;
  font-weight:700;
  margin:40px 0 20px;
}

/*테이블*/
table.dx_board.list.center th {
  color: #7B8184;
  font-size:16px;
  line-height:22px;
  font-weight:500;
  vertical-align:middle;
  padding:15.5px 10px;
}

table.dx_board.list.center td{
  padding:19px 10px;
}

table.dx_board.list.center td span{
  line-height:22px;
  font-size:16px;
  font-weight:500;
}

table.dx_board.list.center td span.dx_txt_num{
  color:#5A6265;
}

table.dx_board.list.center td span.dx_txt_date{
  color:#25282B;
  line-height:28px;
}

table.dx_board.list.center td span.dx_txt_disable{
  color:#BCC1C3;
  font-size: 15px;
  font-weight: 600;
}


table.dx_board.list.center td [class*='dx_label_']{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-right:10px;
  width:70px;
  line-height:28px;
  border-radius:5px;
  font-size: 14px;
  font-weight: 600;
}

table.dx_board.list.center td .dx_label_tempsave{
  background:#EFF5F6;
  color:#7B8184;
}

table.dx_board.list.center td  .dx_label_complate{
  gap:4px;
  background:#37C375;
  color:#fff;
}

table.dx_board.list.center td .dx_label_complate i.dx_icon_complate{
  display:inline-block;
  width:10px;
  height:10px;
  background:url(../image/common/dx_icon_complate.svg) no-repeat 0 0/100%;
}


table.dx_board.list.center td [class*='dx_btn_']{
  display: inline-block;
  width:120px;
  line-height:40px;
  border-radius:50px;
  font-size:16px;
  font-weight:600;
  border:1px solid #fff;
  text-align:center;
} 

table.dx_board.list.center td .dx_btn_default{
  color:#37C375;
  border-color:#37C375;
  background-color:#fff;
}

table.dx_board.list.center td .dx_btn_default:hover{
  color:#32B16A;
  border-color:#32B16A;
}

table.dx_board.list.center td .dx_btn_default:active{
  color:#099250;
  border-color:#099250;
}


table.dx_board.list.center td .dx_btn_active{
  color:#fff;
  border-color:#37C375;
  background-color:#37C375;
}

table.dx_board.list.center td .dx_btn_active:hover{
  border-color:#32B16A;
  background-color:#32B16A;
}

table.dx_board.list.center td .dx_btn_active:active{
  border-color:#099250;
  background-color:#099250;
}

table.dx_board.list.center td .dx_btn_delete{
  width:80px;
  color:#52595C;
  border-color:#E1E8E9;
  background-color:#fff;
}

table.dx_board.list.center td .dx_btn_delete:hover{
  color:#37C375;
  border-color:#E1E8E9;
}

table.dx_board.list.center td .dx_btn_delete:active{
  color:#37C375;
  border-color:#E1E8E9;
}


/**************************************** 
    진단결과 :  진단목록보기 > 목록없음
****************************************/
.dx_result2 .dx_null_wrap{
  width:100%;
  height:540px;
  border-radius: 16px;
  background:#F8FAFA;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.dx_result2 .dx_null_wrap .dx_txt_box{
  text-align:center;
  line-height:1.3;
  padding-top:180px;
  margin-bottom:20px;
  background:url(../image/page/intro/dx_step_grapic1.svg) no-repeat 50% 0/107px;
}

.dx_result2 .dx_null_wrap .dx_txt_box b{
  color:#52595C;
  font-size: 29px;
  font-weight: 500;
}

.dx_result2 .dx_null_wrap .dx_txt_box p{
  margin-top:6px;
  color:#52595C;
  font-size: 21px;
  font-weight: 300;
}

.dx_btn_gradient{
  border-radius: 50px;
  background:  linear-gradient(263deg, #D5BEFF -3.95%, #74BAFB 45.2%, #0EE2B5 94.78%);
  padding:14px 46px;

}

.dx_btn_gradient:hover{ 
  background:linear-gradient(257deg, #B68DFF 0%, #63ACEF 47.12%, #17D0A9 100%);
}

.dx_btn_gradient:active{ 
  background:linear-gradient(257deg, #AA7BFF 0%, #579FE2 47.12%, #1CC5A0 100%);
}

.dx_btn_gradient span{
  font-size:16px;
  color:#fff;
  font-weight:600;
}


/**************************************** 
    진단결과 :  진단결과보기
****************************************/
.dx_result3{
  margin-bottom:124px;
}

.dx_result3 .dx_tit_wrap{
  margin:60px 0 20px;
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}

.dx_result3 .dx_tit_wrap .dx_tit{
  color:#25282B;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3; 
}

.dx_result3 .dx_tit_wrap .dx_tit span{
  font-weight:400;
}

.dx_result3 .dx_tit_wrap .dx_icon_tooltip{
  background-image:url(../image/page/result/dx_icon_tooltip_i.svg);
  width:26px;
  height:26px;
}

.dx_result3 .dx_tit_wrap .dx_icon_tooltip:hover{
  background-image:url(../image/page/result/dx_icon_tooltip_i_h.svg);
}

.dx_result3 .dx_tit_wrap .dx_tooltip .dx_tooltip_content{
  left:0px;
  top:36px;;
  width:709px;
}

.dx_result3 .dx_result_traits{
  margin-bottom:40px;
  display:flex;
  gap:16px;
  width:100%;
}


.dx_result3 .dx_result_slider{
  flex:1;
  overflow:hidden;
  position:relative;
}

.dx_result3 .dx_result_slider .dx_swiper_controls{
  top:auto;
  bottom:40px;
  left:0;
}


.dx_result3 .dx_result_slider .dx_swiper_controls .swiper-pagination-fraction{
  left:50%;
  transform:translateX(-50%);
  right:auto;
}

.dx_result3 .dx_result_slider .dx_swiper_controls .swiper-button-prev,.dx_result3 .dx_result_slider  .dx_swiper_controls .swiper-button-next{
  right:auto;
  transform:translateX(-50%);

}

.dx_result3 .dx_result_slider .dx_swiper_controls .swiper-button-prev{
  left:calc(50% - 50px);
}

.dx_result3 .dx_result_slider  .dx_swiper_controls .swiper-button-next{
  left:calc(50% + 12px);
}

.dx_result3 .dx_result_slider .dx_traits_box{
  height:266px;
  display:flex;
  flex-direction:column;
  padding:40px 244px 0 40px;
  border-radius:16px;
  background-position:right 30px bottom 0;
  background-repeat:no-repeat;
}


.dx_result3 .dx_result_slider.strength .dx_traits_box{
  background-color:#F3F8F3;
}

.dx_result3 .dx_result_slider.weakness .dx_traits_box{
  background-color:#F8F3F3;
}

.dx_result3 .dx_result_slider .dx_traits_box.type5{
  background-image:url(../image/page/result/dx_graphic_ty5.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type6{
  background-image:url(../image/page/result/dx_graphic_ty6.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type7{
  background-image:url(../image/page/result/dx_graphic_ty7.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type8{
  background-image:url(../image/page/result/dx_graphic_ty8.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type9{
  background-image:url(../image/page/result/dx_graphic_ty9.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type10{
  background-image:url(../image/page/result/dx_graphic_ty10.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type11{
  background-image:url(../image/page/result/dx_graphic_ty11.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type12{
  background-image:url(../image/page/result/dx_graphic_ty12.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type13{
  background-image:url(../image/page/result/dx_graphic_ty13.png);
}

.dx_result3 .dx_result_slider .dx_traits_box.type14{
  background-image:url(../image/page/result/dx_graphic_ty14.png);
}

.dx_result3 .dx_result_slider .dx_traits_box .dx_tit{
  margin-bottom:24px;
  color:#25282B;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.3;
}

.dx_result3 .dx_result_slider .dx_traits_box .dx_tit span{
  font-weight:500;
}

.dx_result3 .dx_result_slider .dx_traits_box .dx_tit b{
  font-weight:700;
}

.dx_result3 .dx_result_slider .dx_traits_box .dx_desc{
  color:#323638;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
}

.dx_result3 .dx_result_slider.strength .dx_traits_box .dx_tit .dx_txt_point{
  color:#32B16A;
}

.dx_result3 .dx_result_slider.weakness .dx_traits_box .dx_tit .dx_txt_point{
  color: #F65846;
}

.dx_result3  .dx_result_tab_wrap{
  margin-bottom:20px;
  border-radius: 16px;
  border: 1px solid #E1E8E9;
  padding-bottom:40px;
}

.dx_result3 .dx_score_header{
  border-radius:16px 16px 0 0;
  padding:40px 30px;
  border-bottom: 1px solid  #E1E8E9;
  background: linear-gradient(257deg, rgba(182, 141, 255, 0.15) 0%, rgba(99, 172, 239, 0.15) 47.12%, rgba(23, 208, 169, 0.15) 100%);
  display:flex;
  gap:30px;
}

.dx_result3 .dx_score_header .dx_score_summary{
  padding-left:88px;
  background:url(../image/page/result/dx_icon_score.svg) no-repeat left 0 top 50%/72px;
  font-size:26px;
  color:#25282B;
  line-height:1.3;
}

.dx_result3 .dx_score_header .dx_score_summary b{
  font-weight:600;
}

.dx_result3 .dx_score_header .dx_score_summary .dx_level_txt{
  font-size:26px;
}

.dx_result3 .dx_level_txt{
  background-image:none!important;
  padding:0;
  font-weight:700;
}

.dx_result3 .dx_score_overview{
  display:flex;
  flex:1;
}

.dx_result3 .dx_score_overview li{
  flex:1;
}

.dx_result3 .dx_score_overview li + li{
  border-left: 1px solid #E1E8E9;
}

.dx_result3 .dx_score_overview li p{
  text-align:center;
}

.dx_result3 .dx_score_overview li .dx_label{
  color: #5A6265;
  font-size: 16px;
  font-weight: 500;
  margin-bottom:4px;
}

.dx_result3 .dx_score_overview li .dx_value{
  font-size: 40px;
  font-weight: 600;
  line-height:48px;
  color:#25282B;
}

.dx_result3 .dx_score_overview li .dx_value.my{
  background: #37C375;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dx_result3 .dx_score_overview li .dx_value span{
  font-size: 15px;
  font-weight: 600;
  line-height:1.2;
}

.dx_result3  .dx_tab_inner{
  display:flex;
  flex-direction:column;
  padding:27px 30px 0;
}

.dx_result3 .dx_tab_top{
  margin-bottom:18px;
  display:flex;
  justify-content: space-between;
}

.dx_result3  .dx_btn_link{
  padding: 14px 16px;
  border-radius: 50px;
  background: #5A6265;
}

.dx_result3  .dx_btn_link:hover{
  background:#52595C;
} 

.dx_result3  .dx_btn_link span{
  padding-right:20px;
  background:url(../image/page/result/dx_icon_link2.svg) no-repeat right 0 top 50%;
  color:#FFF;
  font-size: 15px;
  font-weight: 600;
}

.dx_result3  .dx_tab_info{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
}

.dx_result3  .dx_tab_info .dx_tooltip .dx_flex_box{
  gap:6px
}

.dx_result3  .dx_tab_info .dx_tooltip span{
  color: #5A6265;
  font-size: 16px;
  font-weight: 500;
}

.dx_result3  .dx_tab_info .dx_tooltip .dx_tooltip_content{
  left:-80px;
  top:38px;
  width:380px;
}

.dx_result3  .dx_tab_info .dx_tooltip .dx_tooltip_content .dx_txt_sm{
  font-size:15px;
  color:white;
  line-height:1.3;
  margin-top:8px;
}

.dx_result3  .dx_tab_info .dx_tooltip .dx_tooltip_content .dx_txt_sm li::before{
  content:'·';
  padding-right:5px;
}

.dx_result3 .dx_tab_info .dx_label_traits{
  display:flex;
  gap:10px;
}

.dx_result3 .dx_tab_btn_list{
  width:100%;
  display:flex;
  gap:3px;
  margin-bottom:18px;
}

.dx_result3 .dx_tab_btn_list li{
  flex:1;
}
.dx_result3 .dx_tab_btn_list li .dx_tab_btn{
  width:100%;
  padding:20px;
  border-radius: 20px 20px 0 0;
  background:#F3F7F8;
  border:1px solid transparent;
  border-bottom:none;
}

.dx_result3 .dx_tab_btn_list li .dx_tab_btn:hover{
  border-color:#D5DBDB;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.03);
}

.dx_result3 .dx_tab_btn_list li.active .dx_tab_btn:hover{
  border-color:transparent;
  box-shadow:none;
}


.dx_result3 .dx_tab_btn_list li .dx_tab_btn .dx_flex{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}

.dx_result3 .dx_tab_btn_list li .dx_tab_btn .dx_link_txt{
  color: #323638;
  font-size: 18px;
  font-weight: 500;
  padding-right:18px;
  background: url(../image/page/result/dx_icon_link_txt.svg) no-repeat right 0 top 50%;
}
/*
.dx_result3 .dx_tab_btn_list li .dx_tab_btn .dx_txt_score{
  text-align:right;
  color: #323638;
  font-size: 40px;
  font-weight: 600;
}

.dx_result3 .dx_tab_btn_list li .dx_tab_btn .dx_txt_score span{
  font-size: 15px;
  font-weight: 600;
}*/

.dx_result3 .dx_tab_btn_list li.active .dx_tab_btn *{
  color:#fff !important;
}

.dx_result3 .dx_tab_btn_list li.active.dx_good .dx_tab_btn{
  background-color:#37C375;
}

.dx_result3 .dx_tab_btn_list li.active.dx_normal .dx_tab_btn{
  background-color:#ED7435;
}

.dx_result3 .dx_tab_btn_list li.active.dx_low .dx_tab_btn{
  background-color:#F65846;
}

.dx_result3 .dx_tab_btn_list li.active .dx_tab_btn .dx_link_txt{
  background-image:url(../image/page/result/dx_icon_link_txt_w.svg);
}

.dx_result3 .dx_tab_btn_list li .dx_tab_btn [class*='dx_level']{
  display: inline-flex;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
  background-position: right 36px top 50%;
}

.dx_result3 .dx_tab_btn_list li.active .dx_tab_btn [class*='dx_level'].good{
  background-image:url(../image/page/result/dx_level_good_w.svg);
}

.dx_result3 .dx_tab_btn_list li.active .dx_tab_btn [class*='dx_level'].normal{
  background-image:url(../image/page/result/dx_level_normal_w.svg);
}

.dx_result3 .dx_tab_btn_list li.active .dx_tab_btn [class*='dx_level'].low{
  background-image:url(../image/page/result/dx_level_low_w.svg);
}

.dx_result3 .dx_result_table{
  width: 100%;
  border-radius: 16px;
  border:1px solid #E1E8E9;  
  overflow:hidden;
}

.dx_result3 .dx_result_table tr {
  width:100%;
}

.dx_result3 .dx_result_table tr + tr{
  border-top:1px solid #E1E8E9;
}

.dx_result3 .dx_result_table thead th{
  background:#EFF5F6;
  padding:12px 10px;
}

.dx_result3 .dx_result_table thead th span{
  color: #25282B;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.dx_result3 .dx_result_table tbody td{
  padding:31px 10px;
  min-height:146px;
  vertical-align:middle;
  text-align:center;
}

.dx_result3 .dx_result_table tbody td.dx_txt_left{
  text-align:left;
}

.dx_result3 .dx_result_table th,.dx_result3 .dx_result_table td{
 border-right:1px solid #E1E8E9;
}

.dx_result3 .dx_result_table tr th:last-child,.dx_result3 .dx_result_table tr td:last-child{
  border-right:none;
}

.dx_result3 .dx_result_table tbody td span{
  color: #404648;
  font-size: 16px;
  font-weight: 400;
}

.dx_result3 .dx_result_table tbody td ul{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dx_result3 .dx_result_table tbody td b{
  color: #404648;
  font-size: 16px;
  font-weight: 600;
}

.dx_result3 .dx_result_table tbody td b.dx_txt_bold{
  font-weight: 700;
}

.dx_result3 .dx_result_table tbody td .dx_flex_box{
  display:flex;
  gap:16px;
}

.dx_result3 .dx_result_table tbody td.dx_td_bar{
  padding-left:0;
  text-align:left;
}

.dx_result3 .dx_result_table tbody td .dx_bar_wrap{
  position:relative;
  flex:1;
  height:12px;
  border-radius:0 20px 20px 0;
  background-color:#EFF5F6;
  overflow:hidden;
}

.dx_result3 .dx_result_table tbody td .dx_bar_wrap.my{
  height:20px;
}

.dx_result3 .dx_result_table tbody td .dx_bar_wrap .dx_bar{
  position:absolute;
  left:0;
  top:0;
  display:inline-block;
  height:100%;
  border-radius:0 20px 20px 0;
  background-color:#BCC1C3;
}

.dx_result3 .dx_result_table tbody td .dx_bar_wrap .dx_bar.my{
  background: linear-gradient(257deg, #B68DFF 0%, #63ACEF 47.12%, #17D0A9 100%);;
}

.dx_result3 .dx_result_table tbody td  span.dx_txt_my{
  font-size: 20px;
  font-weight: 600;
  background: var(--Gradient-active, linear-gradient(257deg, #AA7BFF 0%, #579FE2 47.12%, #1CC5A0 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dx_result3 .dx_notice_banner{
  padding:20px 40px;
  border-radius:16px;
  border:1px solid #E1E8E9;
  background: #EFF5F6;
}

.dx_result3 .dx_notice_banner p{
  padding-left:106px;
  background:url(../image/page/result/dx_graphic_info.svg) no-repeat 0 50%;
}

.dx_result3 .dx_notice_banner p{
  color: #323638;
  line-height:1.3;
}

.dx_result3 .dx_notice_banner p b{
  display:block;
  margin-bottom:5px;
  font-size: 18px;
  font-weight:600;
}

.dx_result3 .dx_notice_banner p span{
  font-size: 16px;
  font-weight: 400;
}