/* * {outline: 1px solid red;} */

/* billboard */
#billboard {
  width:100%;
  position:relative;
  height:50vw;
  padding-top:9%;
}
.bill_media {
  width:100%;
  height:67%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: absolute;
  bottom:0;
  left:0;
  background-color: aliceblue;
  overflow:hidden;
}
.bill_media > video {
  width:100%;
  height:100%;
  object-fit: cover;
}
.bill_title {
  width:100%;
  text-align:left;
}
.bill_title h1 {
  font-size:42px;
  font-weight: 500;
  line-height: 1.4;
}
.bill_subText {
  width:100%;
  position: absolute;
  z-index:10;
}
.bill_subText p {
  color:white;
  font-size:20px;
  line-height: 1.7;
  padding-top:3%;
  font-weight: 400;
}

/* popup */
.popup {
  position: absolute;
  top:20%;
  right:18%;
  width:350px;
  height:486px;
  border-radius: 20px;
  overflow:hidden;
  z-index:11;
}
.popup_banner {
  width:100%;
  height:438px;
  background-color: antiquewhite;
}
.popup_btn {
  width:100%;
  height:48px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.popup_btn button {
  width:50%;
  height:100%;
  border:none;
  outline:none;
  background-color:white;
}
.popup_btn button:hover {
  cursor: pointer;
}
.popup_btn .popup_today {
  border-right:solid 1px var(--color-dd);
}



/* 상담 카운트 */
#count {
  width:100%;
  margin-top:150px;
}
#count .w1600 {
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom:150px;
}
#count .count {
  width:60%;
  max-height:265px;
  border-radius: 20px;
  background-color:var(--color-f4);
  padding:40px 60px;

  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:16px;
}
#count .countText h1 {
  font-size:40px;
  font-weight: 600;
  line-height: 1.4;
}
#count .countText p {
  padding-top:20px;
  color:var(--color-76);
  font-weight: 500;
  line-height: 1.8;
}
#count .count p {
  width:20%;
  height:100%;
  background-color: white;
  border-radius: 20px;
  position:relative;

  display:flex;
  justify-content: center;
  align-items: center;
  
  font-size:120px;
  font-weight: 600;
}
#count .count .comma {
  width:2%;
  background-color: transparent;
  line-height: 1;
}
#count .count p:not(.comma)::before {
  content:"";
  display:block;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-left: 20px solid var(--color-f4);
  border-right: 20px solid transparent;
  left:0;
}
#count .count p:not(.comma)::after {
  content:"";
  display:block;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid var(--color-f4);
  right:0;
}
#count .line {
  max-width:1600px;
  margin: 0 auto;
  height:1px;
  background-color: var(--color-e8);
}



/* youtube */
#youtube {
  width:100%;
}
#youtube .contents {
  width:100%;

  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap:32px;
}
.youtubeLeft {
  width:55%;
  height:31vw;
  border-radius: 20px;
  overflow: hidden;
}
.youtubeRight {
  width:45%;

  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.youtubeList {
  width:100%;

  display:flex;
  justify-content: flex-start; 
  align-items:center;
  gap:32px;
}
.youtubeList:hover {
  cursor: pointer;
}
.youtubeThum {
  width:43%;
  height:9.5vw;
  overflow:hidden;
  border-radius:20px;
}
.youtubeThum img {
  width:100%;
  height:100%;
  object-fit: cover;
}
.youtubeTitle {
  width:57%;
  font-size:20px;
  font-weight: 600;
  line-height:1.8;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
}




/* main notice */
#notice {
  width:100%;
  background:linear-gradient(transparent, rgba(57, 68, 140, 0.3));
}
#notice .contents {
  margin-top:48px;

  display:flex;
  justify-content: space-between;
  align-items:stretch;
  gap:32px;
  flex-wrap:wrap;
}
#notice .contents a {
  width:32%;
  padding:42px;
  border-radius: 20px;
  background-color:white;
  border:solid 1px var(--color-e8);

  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-content: stretch;
}
.noticeBox {
  display:flex;
  flex-wrap:wrap;
  align-content:space-between;
  gap:32px;
}
.noticeBox p {
  color:var(--color-main);
  font-size:14px;
  width:100%;
}
.noticeBox div {
  display:flex;
  gap:60px;
  width:100%;
  flex-wrap:wrap;
  align-content: space-between;
}
.noticeBox h2 {
  font-size:24px;
  font-weight: 600;
  line-height: 1.8;
  width:100%;
  word-break: keep-all;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
}
.noticeBox span {
  font-size:14px;
  color:var(--color-76);
  width:100%;
}



/* 믿을 수 있는 법률 전문가 */
#lawyer {
  width:100%;
}
#lawyer .contents {
  width:100%;

  display:flex;
  justify-content: space-between;
  gap:32px;
}
.lawyerBox {
  border-radius: 20px;
  overflow:hidden;
  height:36vw;
  cursor: pointer;
  transition:.3s;
  padding:82px 62px;

  display:flex;
  flex-wrap:wrap;
  align-content: space-between;
  position:relative;
}
.lawyer1 {
  width:30%;
  background-color:var(--color-darkBg1);
  filter: brightness(0.2);
}
.lawyer2 {
  width:30%;
  background-color:var(--color-darkBg2);
  filter: brightness(0.2);
}
.lawyerBox.view {
  width:70%;
  filter: brightness(1);
}
.lawyerBox.view .lawyer_name,
.lawyerBox.view .pHistory {
  opacity: 1;
  visibility: visible;
}
.lawyer_name {
  width:100%;
  display:flex;
  align-items: center;
  gap:16px;
  opacity: 0;
  visibility: hidden;
  
  position: relative;
  z-index:2;
}
.lawyer_name h3 {
  font-size:52px;
  font-weight: 500;
}
.lawyer_name h3,
.lawyer_name p {
  color:white;
}
.lawyer_name div p:last-of-type {
  color:var(--color-bb);
}
.pHistory {
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  width:100%;
  opacity: 0;
  visibility: hidden;

  position: relative;
  z-index:2;
}
.pHistory h4 {
  color:white;
  font-size:20px;
  font-weight: 600;
  padding-bottom:14px;
}
.pHistory nav li {
  color:var(--color-bb);
  line-height: 2;
  padding-left:16px;
  position:relative;
}
.pHistory nav li::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  transform: translateY(-50%);
  display:block;
  width:6px;
  height:1px;
  background-color:var(--color-bb);
}
.pHistory_More a {
  font-size:20px;
  color:white;
  font-weight: 500;
  line-height:1.8;
  border:solid 1px white;
  max-width:204px;

  display:flex;
  gap:12px;
  align-items: center;
  padding:12px 32px;
  border-radius: 20px;
  transition:.3s;
}
.pHistory_More a img {
  width:18px;
  height:18px;
}
.pHistory_More a:hover {
  background-color:rgba(0,0,0,0.1);
  backdrop-filter:blur(10px);
}

.lawyer_img {
  position:absolute;
  right:0;
}



#review {
 width:100%;
 background-color:var(--color-lightBg2); 
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
}
#review .contents {
  position:relative;
}
#review .review_btnWrap button {
  outline:none;
  border:none;
  background-color:transparent;
  position: absolute;
  z-index: 2;
  top:50%;
  transform:translateY(-50%);
  cursor: pointer;
}
.review_next {
  right:0;
}
.reviewSwiper  {
  padding:0 20px;
}
#review .reviewBox {
  /* padding:42px 32px; */
  border-radius: 20px;
  background-color:white;
  border:solid 1px var(--color-e8);
  overflow:hidden;
  max-height:222px;
  height:auto;
}
/* #review .reviewBox a {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
} */
#review .reviewBox img { 
  width:100%;
  height:100%;
  object-fit: cover;
}
.reviewBox a > p:first-of-type {
  color:var(--color-main);
  font-weight: 600;
  width:100%;
}
.reviewBox a > p:last-of-type {
  color:var(--color-76);
  font-weight: 400;
  font-size: 14px;
  width:100%;
}
.reviewBox a > div {
  width:100%;
}
.reviewBox a > div > h1 {
  font-size:22px;
  font-weight: 600;
}
.reviewBox a > div > p {
  color:var(--color-76);
  padding-top:8px;
}