* {
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;/*?*/
}
html, body { 
  height:100%;
  margin:0;
  padding:0;
}
.w1600 {
  width:1600px;
  margin:0 auto;
}
.w1400 {
  width:1400px; /* 1320 */
  padding:0 40px;
  margin:0 auto;
}
.w768 {
  width:768px;
  margin:0 auto;
}
:root {
  --color-main:#39448C; 
  --color-main10:rgba(57, 68, 140, 0.1); 
  --color-sub:#6272D7;
  --color-lightMBg:#EBEEFF;
  --color-lightBg2:#F5F7FF;
  --color-red:#ED0000;
  --color-red10:#FFD7D7;
  --color-darkBg1:#1C2352;
  --color-darkBg2:#0A1142;

  --color-f4:#f4f4f4;
  --color-f8:#f8f8f8;
  --color-f9:#f9f9f9;
  --color-e1:#e1e1e1;
  --color-e8:#e8e8e8;
  --color-e9:#e9e9e9;
  --color-b8:#b8b8b8;
  --color-d9:#d9d9d9;

  --color-black:#1d1d1f;
  --color-11:#111;
  --color-33:#333;
  --color-55:#555;
  --color-66:#666;
  --color-99:#999;
  
  --color-cc:#ccc;
  --color-bb:#bbb;
  --color-dd:#ddd;
  --color-76:#767676;
  --color-57:#575757;
}
body::-webkit-scrollbar {
  width:8px;
  padding:2px;
}
body::-webkit-scrollbar-thumb {
  background-color:var(--color-main);
  border-radius: 10px;
}
.mc {
  color:var(--color-main);
}
.white {
  color:white;
}
p, h1, h2, h3, h4, h5, h6, a, span {
  color:var(--color-black);
}

.roundTitle8 {
  padding-left:8px;
}
.roundTitle16 {
  padding-left:16px;
}

::selection {
  color: var(--color-main);
  background-color: var(--color-lightMBg);
}
::placeholder {
  color:var(--color-99);
  font-family:"Pretendard Variable";
}

.top50 {
  margin-top:50px;
}
.top80 {
  margin-top:80px;
}
.top140 {
  margin-top:140px;
}
.top150 {
  margin-top:150px;
}
.top150P {
  padding-top:150px;
}
.bottom150 {
  margin-bottom:150px;
}
.bottom150P {
  padding-bottom:150px;
}




/* header gnb */
header {
  width:100%;
}
#gnb {
  width:100%;
  height:90px;
  position:fixed;
  z-index:50;
  display:flex;
  align-items: center;
  transition: .5s;
  
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
}
#gnb.hide {
  transform:translateY(-100%);
}
#gnb > .w1600 {
  display:flex;
  justify-content: space-between;
  align-items: center;
}
#gnb > .w1600 > div:last-child {
  display:flex;
  justify-content: space-between;
  align-items:center;
  width:65%;
}
#gnb ul {
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:52px;
}
#gnb ul li a {
  transition:.3s;
  font-size:18px;
}
#gnb ul li a:hover {
  color:var(--color-main);
  font-weight: 600;
}
.header_tel {
  font-size:18px;
}
.header_tel > span {
  font-weight: 600;
  padding-left:12px;
}
.header_search {
  width:40px;
  height:40px;
}
.header_search img {
  width:100%;
  height:100%;
  object-fit: cover;
} 
.mobile_menu {
  display:none;
}



/* mobile gnb */
#mobile_gnb {
  width:100%;
  height:100%;
  position:fixed;
  background-color:rgba(0, 0, 0, 0.8);
  backdrop-filter:blur(40px);
  transition:.3s;
  transform:translateX(-100%);
  opacity: 0;
  z-index:100;
}
#mobile_gnb.view {
  transform:translateX(0);
  opacity: 1;
}
.mobileClose_btn {
  position: absolute;
  top:80px;
  right:70px;
  width:32px;
  height:32px;
}
#mobile_gnb ul {
  position:absolute;
  top:20%;
  margin:0 70px;

  display:flex;
  flex-wrap:wrap;
  row-gap:70px;
}
#mobile_gnb ul li {
  width:100%;
}
#mobile_gnb ul a {
  color:white;
  font-size:32px;
  font-weight: 700;
  transition:.3s;
}
.m_header_tel {
  position:absolute;
  bottom:15%;
  margin:0 70px;
}
.m_header_tel,
.m_header_tel span {
  color:rgba(255,255,255,0.5);
}
.m_header_tel span {
  padding-left:16px;
}



/* 소송하기 */
#suit {
  width:100%;
  height:80px;
  bottom: 0;
  background-color:rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(40px);
  z-index:60;
  position:fixed;
  
  display:flex;
  justify-content: space-between;
  align-items:center;
  transform:translateY(0%);
  transition:.3s; 
}
#suit.hide {
  transform:translateY(100%);
}
#suit .w1600 {
  display:flex;
  justify-content: space-between;
  align-items:center;  
}
#suit h3 {
  color:var(--color-main);
  font-size:20px;
  font-weight: 600;
}
.suit_link {
  width:80%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:40px;
}
.suit_button {
  display:flex;
  gap:16px;
}
.suit_button button:first-child {
  width:120px;
  height:50px;
  text-align:center;
  background-color: transparent;
  border:solid 1px var(--color-main);
  font-weight: 500;
}
.suit_button button:last-child {
  width:160px;
  height:50px;
  text-align:center;
  background-color:var(--color-main);
  border:var(--color-main);
}
.suit_button button:first-child a {
  color:var(--color-main);
  /* display:block; */
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
.suit_button button:last-child a {
  color:white;
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.suit_link > a {
  color:var(--color-main);
}


/* popup */
.popupYoutube {
  /* position:absolute; */
  display:none; /* 해결 후 impoertant 지우기 */
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  z-index:80;
  
  transform:scale(0);
  transition:.3s;
  opacity: 0;
  /* visibility: hidden; */
  /* pointer-events: none; */
}
.popupYoutube.view {
  display:block;
  transform:scale(1);
  opacity: 1;
  /* visibility: visible; */
  /* pointer-events: auto; */
}
.popupClose_btn {
  width:40px;
  position:absolute;
  top:100px;
  right:8vw;
  cursor: pointer;
}
.popupiframe_div {
  width:69%;
  height:39vw;
  border-radius: 20px;
  overflow:hidden;
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.popupYoutube iframe {
  width:100%;
  height:100%;
  object-fit: cover;
}


.closeBtn {
  transition: .5s ease-in-out;
}
.closeBtn:hover {
  transform: rotate(180deg);
}
.moreBtn {
  width:100%;
  text-align:center;
  display:flex;
  justify-content: center;
}
.moreSmall {
  max-width:284px;
  max-height:76px;

  padding:20px 72px;
  border-radius: 20px;
  background-color:transparent;
  border:solid 1px var(--color-main);
  color:var(--color-main);
  font-size:20px;
  font-weight: 500;
  line-height: 1.8;
  transition:.3s;

  display:flex;
  justify-content: center;
  gap:12px;
  align-items: center;
}
.moreSmall img {
  width:18px;
  height:18px;
}
.moreSmall:hover {
  background-color:var(--color-lightMBg);
}



section .title {
  width:100%;
  text-align:center;
}
section .title h1 {
  font-size:40px;
  font-weight: 600;
  line-height: 1.4;
  padding-bottom:20px;
}
section .title p {
  font-size:20px;
  font-weight: 400;
}



/* footer */
footer {
  width:100%;
  background-color:var(--color-33);
  padding:72px 0;
}
footer .logo_wrap {
  width:100%;
}
.footer_info {
  margin-top:32px;

  display:flex;
  justify-content: space-between;
  align-items: center;
}
.footer_info address,
.footer_info address span  {
  line-height: 1.6;
  color:rgba(255, 255, 255, 0.5);
}
.footerSns ul {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  gap:2px;
}


/* etc */
.headerEmpty {
  width:100%;
  height:90px;
}
.sp_title {
  width:100%;
  text-align:center;
}
.sp_title h1 {
  font-size:42px;
  font-weight: 700;
  line-height: 1.2;
}
.sp_title p {
  font-size:18px;
  line-height: 1.8;
  padding-top:20px;
}

.sp_contents {
  width:100%;
  margin-top:70px;
}

/* bread */
.breadContainer {
  width:100%;
  padding:12px 0;
  margin-bottom:70px;
}
.breadContainer ul {
  display:flex;
  justify-content: flex-start;
  gap:12px;
}
.breadContainer ul li a {
  color:var(--color-76);
}
.breadContainer .now {
  color:var(--color-black);
  cursor: pointer;
}



/* view page */
#viewContainer {
  width:100%;
  margin:140px 0 150px 0;
}
.viewTitle {
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:24px 0;
  border-bottom:solid 1px var(--color-99);
}
.viewTitle h2 {
  width:85%;
  text-align:left;
  font-size:26px;
  font-weight: 600;
}
.viewTitle p {
  width:25%;
  font-size:16px;
  color:var(--color-76);
  text-align:right;
}

.viewContent {
  width: 100%;
  padding:30px 0;
  border-bottom:solid 1px var(--color-99);
}
.viewContent p {
  word-break: keep-all;
  line-height:2;
}

.viewContent p:not(:first-of-type) {
  margin-top:24px;
}

.viewBackBtn {
  width:100%;
  display:flex;
  justify-content: flex-end;
}
.viewBackBtn a {
  color:var(--color-main);
  font-weight: 500;
  line-height: 1.8;
  padding:16px 52px;
  border-radius: 20px;
  border:solid 1px  var(--color-main);
  background-color: transparent;
  transition: .3s;
  display:flex;
  margin-top:50px;
}

.viewBackBtn a:hover {
  background-color: var(--color-main10);
}