@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
/* NotoSans 폰트 Weight Thin 100, ExL 200, L 300, R 400, M 500, SemiB 600, B 700, ExB 800, BL 900 */

*{margin:0px; padding:0px;}
*, :after, :before{box-sizing:border-box;}
body, html{width:100%; height:100%; min-width:360px; background:#f0f0f0;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,table,a,p{font-family:'Noto Sans SC', 'Noto Sans KR', '맑은 고딕', MalgunGothic, '돋움', Dotum, sans-serif; font-size:18px; color:#666; line-height:1.4em; word-break:keep-all;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img,fieldset{max-width:100%; border:0px; vertical-align:top;}
ul,ol,dl{list-style-type:none;}
a{text-decoration:none;}
caption, legend{border:0px; display:none;}
em{font-style:normal;}
table{width:100%; border:0; border-collapse:collapse;}
input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {appearance: button; -webkit-appearance: button;}

.wrapcon{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}
.blind{display:block; overflow:hidden; position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px;}
select{appearance:none; -webkit-appearance:none;}
select::-ms-expand{display:none;}
select:focus, input:focus, select:active, input:active{outline:none;}
.float_clear:after{display:block; clear:both; content:"";}
textarea{outline:none;}
.divpop h1,.divpop h2,.divpop h3,.divpop h4,.divpop h5,.divpop h6{padding:0 20px; color:var(--color);}
.divpop p{padding:0 20px; color:var(--black);}
.pc_br{display: block;}
.mo_img{display:none;}
input[type="checkbox"]{width:16px; height:16px; vertical-align:middle;}
input[type=checkbox]:checked, input[type=radio]:checked{accent-color:rgb(232,52,40);} 
.loading_blind{display:flex; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:90;}
.loader{position:relative; display:block; width:48px; height:48px; border:solid 3px #FFF; border-radius:50%; box-sizing:border-box; animation:loading 1s linear infinite; margin:auto;}
.loader::after{position:absolute; content:""; box-sizing:border-box; left:50%; top:50%; transform:translate(-50%, -50%); width:56px; height:56px; border-radius:50%; border:solid 3px transparent; border-bottom-color:var(--color);}
@keyframes loading{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
:root{--black:#252121;}
:root{--color:#0145b2;}
:root{--navy:#002e77;}

header{height: 100px;}
nav ul{padding-top: 100px;}
.sub_visual{margin-top: 100px;}
#pc_bg{background-image: url(/images/pc_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom; background-attachment: fixed; overflow: hidden;}
#pc_wrap{display: flex; justify-content: space-between; width: 100%; max-width: 1500px; min-height: 100%; margin: auto;}
.pc_left{position: relative; width: 320px;}
.pc_left_bn{position: fixed; display: flex; height: 100vh; flex-direction: column; justify-content: center;}
.pc_left_ani_w{position: relative; margin:0 auto 50px;}
.pc_left_ani{position: absolute; top: 0; animation:pc_left_ani 1s ease-in infinite;}
@keyframes pc_left_ani{
0%{transform: scale(1)}
50%{transform: scale(1.1)}
100%{transform: scale(1)}
}
.pc_left_bn a{box-shadow:10px 10px 10px rgba(0, 0, 0, 0.05); border-radius:16px; overflow: hidden;}
.pc_right{position: relative; width: 320px;}
.pc_right_bn{position: fixed; display: flex; height: 100vh; flex-direction: column; justify-content: center;}
.pc_right_bn p{box-shadow:10px 10px 10px rgba(0, 0, 0, 0.05); border-radius:16px; overflow: hidden;}
#body_wrap{position: relative; width: 100%; max-width: 720px; min-height: 100%; background-color: #FFF;}
header{position: fixed; width: 100%; max-width: 720px; background-color: #FFF; z-index: 10; box-shadow:0px 5px 10px 0px rgba(0,0,0,0.1);}
.top_wrap{position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 4.167%; box-sizing: border-box;}
.top_wrap .top_logo{height: 46%;}
.top_wrap .top_logo img{width: auto; height: 100%;}

.top_wrap .top_bn{position: relative; width: 46.97%;}
.top_wrap .top_bn_ani{position: absolute; animation:top_bn_ani 1s ease-in infinite;}
@keyframes top_bn_ani{
0%{transform: scale(1.05)}
50%{transform: scale(1)}
100%{transform: scale(1.05)}
}
.top_wrap .nav_btn{width: 30px; height: 20px; background-image: url(/images/nav_btn.png); background-repeat: no-repeat; background-size: 100%; cursor: pointer;}
nav{position: fixed; top: 0; display: flex; flex-direction: row-reverse; width: 100%; max-width: 900px; height: 100%; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; overflow: hidden;}
nav::after{position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; background-color: #000; opacity: 0.7; transition: opacity 0.35s ease;}
nav ul{position: relative; width: 90%; max-width: 500px; background-color: #000; height: 100%; z-index: 90; transform: translateX(100%); transition: transform 0.35s ease;}
nav ul li{position: relative;}
nav ul li a{display: block; font-size: clamp(16px, 3.334vw, 24px); color: #FFF; font-weight: 700; padding: 5.69% 15%;}
nav ul li::before{position: absolute; display: block; content: ""; left: 10%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: #FFF;}
nav ul li::after{position: absolute; display: block; content: ""; left: 9.375%; bottom: 0; width: 81.25%; height: 1px; background-color: #FFF; opacity: 0.1;}
nav ul li:last-child::after{display: none;}
nav .home_btn{position: absolute; top: 32px; left: 7%;}
nav .home_btn a{font-size: clamp(18px, 3.334vw, 26px);}
nav .home_btn::before{display: none;}
nav .home_btn::after{display: none;}
nav .nav_close{position: absolute; top: 44px; right: 4.167%; width: 22px; height: 22px; background-image: url(/images/nav_close.png); background-repeat: no-repeat; background-size: 100%; cursor: pointer; z-index: 99;}
nav.on{opacity: 1; pointer-events: auto;}
nav.on::after{opacity: 0.7;}
nav.on ul{transform: translateX(0);}
.sub_visual{position: relative; width: 100%; padding-bottom: 41.667%; background-color: #0c2d4c; background-image: url(/images/visual_img.png); background-repeat: no-repeat; background-size: cover;}
.sub_subject{position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub_subject p{width: 100%; font-size: clamp(24px, 5.834vw, 38px); color: #FFF; font-weight: 700; text-align: center;}
.sub_subject p::after{display: block; content: ""; width: 9.723%; height: 4.96%; background-color: #FFF; margin: auto; margin-top: 3.056%;}
.sub_subject h1{font-size: clamp(18px, 4.723vw, 32px); color: #FFF; font-weight: 300; /*letter-spacing: 0.3em;*/ margin-top: 3.056%;}
.floating_bn{position: fixed; width: 100%; max-width: 720px; bottom: 0; z-index: 80;}
.floating_bn_wrap{display: flex;}
.floating_bn_chat{cursor: pointer;}
.floating_bn_ani{position: absolute; width: 59.723%; top: -40%; left: 20.14%; animation:floating_bn_ani 1s ease-in infinite;}
@keyframes floating_bn_ani{
0%{transform: translateY(0)}
50%{transform: translateY(-12%)}
100%{transform: translateY(0)}
}
.main{margin-top: 110px;}
.tt{font-size:24px; font-weight:600; color:#303030; line-height:1.4;}
.video{position:relative; padding-bottom:56.25%; max-width:720px;}
.video iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
.video_tt{font-family: "Noto Serif KR", serif; font-size: clamp(24px, 5.834vw, 42px); color: #000; font-weight: 300; margin-bottom: 5%; letter-spacing: -0.02em;}
.video_tt::before{display: block; content: ""; width: 1px; height: 60px; background-color: #000; margin: 4% auto;}

.main_con{position:relative; background: #FFF;}
.main_con img{position:absolute; left:0;}
.main_con img.bg{position:static;}
.main_con01 .tit01{top:19.4244%; height:4.2446%;}
.main_con01 .tit02{top:25.8992%; height:23.3812%;}
.main_con01 .txt01{top:58.633%; height:23.0935%;}
.main_con01 .txt02{bottom:0; height:8.2014%;}
.main_con01 .img{top:51.7985%; height:48.2014%;}
.main_con02 .tit{top:12.2511%; height:10.7963%;}
.main_con02 .icon01{top:28.9433%; height:14.8545%;}
.main_con02 .icon02{top:28.9433%; height:14.8545%;}
.main_con02 .icon03{top:28.9433%; height:14.8545%;}
.main_con02 .tag01{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag02{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag03{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag04{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag05{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag06{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag07{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .tag08{top:49.8468%; height:39.1271%; z-index:1;}
.main_con02 .img{top:49.8468%; height:39.1271%;}
.main_con03 .tit{top:6.6973%; height:5.902%;}
.main_con03 .icon{top:17.9573%; height:3.0138%;}
.main_con03 .txt01{top:23.1477%; height:12.1808%;}
.main_con03 .txt02{top:36.082%; height:14.2737%;}
.main_con03 .txt03{top:51.1092%; height:12.1808%;}
.main_con03 .txt04{top:64.0435%; height:14.2737%;}
.main_con03 .txt05{bottom:0; height:14.2318%;}
.main_con04 .tit01{top:12.6782%; height:4.1204%;}
.main_con04 .tit02{top:19.0966%; height:11.0142%;}
.main_con04 .img{top:36.2916%; height:52.2979%;}
.main_con05 .logo{top:7.0484%; height:7.0484%;}
.main_con05 .tit{top:17.6211%; height:6.2114%;}
.main_con05 .txt01{top:27.2687%; height:4.8458%;}
.main_con05 .txt02{top:32.1145%; height:4.8458%;}
.main_con05 .txt03{top:36.9603%; height:4.8458%;}
.main_con05 .txt04{top:41.8061%; height:4.8458%;}
.main_con05 .dot{top:47.533%; height:3.5682%;}
.main_con05 .img{top:49.6035%; height:47.4889%;}
.main_con06 .tit{top:9.9564%; height:8.7118%;}
.main_con06 .img{top:23.5843%; height:47.7909%;}
.main_con06 .txt{bottom:0; height:21.1574%;}
.main_con07 .tit{top:7.8201%; height:10.8504%;}
.main_con07 .img01{top:23.7536%; height:21.5053%;}
.main_con07 .img02{top:47.214%; height:21.5053%;}
.main_con07 .img03{top:70.6744%; height:21.5053%;}
.main_con08 .tit{top:12.7853%; height:25.1141%;}
.main_con08 .img{top:46.8493%; height:41.8264%;}
.main_con09 .tit{top:10%; height:24.1875%;}
.main_con09 .icon01{top:37.9375%; height:14.9375%;}
.main_con09 .icon02{top:37.9375%; height:14.9375%;}
.main_con09 .icon03{top:37.9375%; height:14.9375%;}
.main_con09 .img{top:58.125%; height:41.875%;}
.main_con09 .txt01{top:71.8125%; height:3.6875%;}
.main_con09 .txt02{top:77.9375%; height:4.25%;}
.main_con09 .txt03{top:82.4375%; height:4.25%;}
.main_con09 .txt04{top:86.9375%; height:4.25%;}


/* 1400px 이하 해상도 */
@media screen and (max-width:1400px){
.pc_left, .pc_right{display: none;}
#body_wrap{margin: auto;}
header{height: 80px;}
nav ul{padding-top: 80px;}
nav ul li::before{width: 6px; height: 6px;}
nav .home_btn{top: 16px;}
nav .nav_close{top: 28px;}
.sub_visual{margin-top: 80px;}
.main{margin-top: 80px;}
.content{margin-top: 110px;}
}

/* 640px 이하 해상도 */
@media screen and (max-width:640px){
header{height: 60px;}
nav ul{padding-top: 60px;}
nav ul li::before{width: 5px; height: 5px;}
nav .nav_close{top: 18px;}
.sub_visual{margin-top: 60px;}
.main{margin-top: 60px;}
.content{margin-top: 80px;}
.floating_bn_ani{width: 70%; top: -50%; left: 15%;}
.video_tt::before{height: 30px;}
}


.businessinfo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


  /* 이혼 상담사례 컨테이너 */
  .post-container {
    width:90%;
    max-width: 600px;
    margin:60px auto 120px;
    font-family: 'Malgun Gothic', dotum, sans-serif;
  }

  /* 메인 제목 스타일 */
  .main-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 2px solid #444;
    margin-bottom: 20px;
    text-align: left;
  }

  /* 리스트 전체 스타일 */
  .custom-item-list {
    list-style: none;
    padding: 0;
    margin: 0 20px;
  }

  /* 각 게시물 항목 (1줄에 1개) */
  .custom-item-list li {
    margin-bottom: 30px; /* 게시물 사이 간격 */
    background-color: #fff;
  }
  .custom-item-list li img{
    border:1px solid #ddd;
    box-sizing: border-box;}

  /* 링크 영역 (이미지+제목 포함) */
  .post-link {
    text-decoration: none;
    display: block;
  }

  /* 이미지 스타일 */
  .post-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
    transition: opacity 0.3s ease;
  }

  .post-link:hover .post-image {
    opacity: 0.9;
  }

  /* 제목 스타일 (이미지 하단) */
  .post-title {
    display: block;
    padding: 15px 5px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
  }

  .post-link:hover .post-title {
    color: #0066ff;
    text-decoration: underline;
  }