/* Blog */
.blog_main_banner {
 display:flex;
 margin-bottom:80px;
}
.blog_main_banner .imgfit {
 width:48%;
 border-radius:20px;
 aspect-ratio:234/125;
}
.blog_main_banner .txt {
 width:52%;
 padding-left:64px;
 display:flex;
 flex-direction:column;
 justify-content:center;
}
.blog_main_banner .type {
 font-size:16px;
 color:#0169d8;
 font-weight:500;
}
.blog_main_banner h3 {
 font-size:32px;
 color:#131416;
 font-weight:600;
 line-height:1.45;
 letter-spacing:-0.96px;
 margin:24px 0 15px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.blog_main_banner p {
 font-size:20px;
 color:#464c53;
 line-height:1.6;
 letter-spacing:-0.6px;
 margin-bottom:40px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:normal;
 word-wrap:break-word;
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:3;
}
.blog_main_banner .date {
 color:#58616a;
 letter-spacing:-0.51px;
}
.blog_tit {
 font-size:38px;
 color:#131416;
 font-weight:600;
 line-height:1.42;
 margin-bottom:24px;
 letter-spacing:-1.14px;
}
.blog_list {
 display:flex;
 flex-wrap:wrap;
 gap:48px 38px;
}
.blog_list li {
 width:calc((100% - 76px) / 3);
}
.blog_list a,
.blog_list span {
 display:block;
}
.blog_list .imgfit {
 display:block;
 width:100%;
 aspect-ratio:234/125;
 border-radius:8px;
}
.blog_list .txt {
 padding-top:24px;
}
.blog_list .type {
 font-size:16px;
 color:#0169d8;
 font-weight:500;
 letter-spacing:-0.48px;
}
.blog_list h3 {
 font-size:20px;
 color:#1e2124;
 font-weight:600;
 line-height:1.6;
 letter-spacing:-0.72px;
 margin:4px 0 16px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:normal;
 word-wrap:break-word;
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;
}
.blog_list .date {
 font-size:14px;
 color:#58616a;
 line-height:1.7;
 letter-spacing:-0.42px;
}
/* 상세 */
.blog_view_wrap {
 position:relative;
}
.index_area {
 position:fixed;
 top:184px;
 left:50%;
 width:240px;
 margin-left:-800px;
}
.index_area.unfixed {
 position:absolute;
 bottom:0;
 top:auto;
}
.index_area .tit {
 font-size:18px;
 color:#1e2124;
 font-weight:500;
 margin-bottom:24px;
 cursor:default;
}
.index_area .index_list {
 max-height:calc(100vh - 238px);
 overflow:auto;
}
.index_area li + li {
 margin-top:16px;
}
.index_area a {
 display:block;
 font-size:14px;
 color:#666;
 line-height:1.7;
 letter-spacing:-0.42px;
 word-break:break-word;
}
.index_area .on a {
 color:#0169d8;
 font-weight:600;
}
.blog_view_con {
 width:100%;
 max-width:760px;
 margin:0 auto;
}
.wrap_color_box {
 background:#f5f5f5;
 border-radius:10px;
 padding:20px;
}
.blog_view_head {
 padding-top:48px;
}
.blog_view_head .imgfit {
 display:block;
 margin-bottom:40px;
 border-radius:20px;
}
.blog_view_head .type {
 font-size:16px;
 color:#0169d8;
 font-weight:500;
 margin-bottom:8px;
 letter-spacing:-0.48px;
}
.blog_view_head h1 {
 display:block;
 font-size:48px;
 color:#131416;
 font-weight:700;
 line-height:1.38;
 margin-bottom:24px;
 letter-spacing:-1.44px;
 max-width:100%;
 overflow:hidden;
}
.blog_view_head .tb {
 letter-spacing:-0.51px;
}
.blog_view_head .tb h2 {
 font-size:18px;
}
.blog_view_head .tb p {
 line-height:1.65;
}
.blog_view_head .date {
 display:block;
 font-size:14px;
 color:#58616a;
 line-height:1.7;
 opacity:0.7;
}
.blog_view_head .view_top {
 padding:40px 0 40px;
 margin:0 0 40px;
 border-top:0;
 border-bottom:#8a949e33 1px solid;
 align-items:center;
}
.blog_view_body section + section {
 margin-top:64px;
}
.blog_view_body h2 {
 display:block;
 font-size:32px;
 color:#1e2124;
 font-weight:600;
 line-height:1.45;
 margin-bottom:24px;
 letter-spacing:-0.96px;
 word-break:keep-all;
}
.blog_view_body h3 {
 display:block;
 font-size:20px;
 color:#1e2124;
 font-weight:600;
 line-height:1.6;
 margin-bottom:8px;
 letter-spacing:-0.66px;
}
.blog_view_body h3 ~ h3 {
 margin-top:24px;
}
.blog_view_body .blog-section-body {
 letter-spacing:-0.51px;
}
.blog_view_body .blog-section-body .image img {
 height:auto;
}
.blog_view_body .blog-section-body p strong {
 color:#1e2124;
 font-weight:500;
}
.blog_view_body em,
.blog_view_body i {
 font-style:italic;
}
.blog_view_body table {
 max-width:100%;
 table-layout:auto;
}
.blog_view_body th,
.blog_view_body td {
 border:#e1e1e1 1px solid;
 padding:10px;
}
.blog_view_body code {
 font-size:87.5%;
 color:#e83e8c;
 background:#c7c7c74d;
 font-family:inherit;
}
.blog_view_body a {
 color:#007bff;
}
.blog_view_body a * {
 font-family:inherit;
 color:inherit !important;
 background:none !important;
}
.blog_view_body ul {
 list-style-type:unset;
 padding-left:20px;
}
.recommended_area {
 position:fixed;
 top:184px;
 right:50%;
 width:280px;
 margin-right:-740px;
}
.recommended_area.unfixed {
 position:absolute;
 top:auto;
 bottom:0;
}
.recommended_area .tit {
 font-size:20px;
 color:#1e2124;
 font-weight:600;
 line-height:1.6;
 margin-bottom:16px;
 letter-spacing:-0.6px;
}
.recommended_area .recommended_list {
 border-top:#cdd1d5 1px solid;
 max-height:calc(100vh - 358px);
 overflow:auto;
}
.recommended_area li {
 border-bottom:#cdd1d5 1px solid;
}
.recommended_area a {
 display:flex;
 align-items:center;
 padding:16px 0;
}
.recommended_area .imgfit {
 width:120px;
 aspect-ratio:2/1;
 border-radius:4px;
}
.recommended_area .txt {
 width:calc(100% - 120px);
 padding-left:20px;
 font-size:14px;
 color:#464c53;
 font-weight:500;
 line-height:1.55;
 letter-spacing:-0.6px;
 word-break:break-word;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:normal;
 word-wrap:break-word;
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:3;
}
.recommended_area .btn_contact {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-start;
 text-align:left;
 height:68px;
 padding:0 68px 0 40px;
 margin-top:48px;
 background:#131416 url("/images/btn_link.svg") no-repeat right 14px center;
 border-radius:34px;
}
.recommended_area .btn_contact p {
 font-size:12px;
 color:#fff6;
 font-weight:500;
 line-height:1;
}
.recommended_area .btn_contact span {
 font-size:17px;
 color:#fff;
 font-weight:600;
 line-height:1.65;
}
section.service_faq.blog_faq_wrap {
 background:none !important;
 margin-top:40px;
 padding-top:80px;
 border-top:#8a949e33 1px solid;
}
.blog_faq_wrap h2 {
 font-size:32px;
 color:#1e2124;
 font-weight:600;
 line-height:1.45;
 letter-spacing:-0.96px;
 margin-bottom:16px;
}
.blog_faq_wrap h2 strong {
 font-weight:inherit;
}
.blog_faq_wrap .faq_list li {
 padding:0 20px;
}
.blog_faq_wrap .faq_list h3 button {
 font-size:18px;
 color:#1e2124;
 padding:16px 30px 16px 26px;
}
.blog_faq_wrap .faq_list h3 button:before {
 font-size:inherit !important;
 color:#13141666;
 top:16px;
}
.blog_faq_wrap .faq_list h3 button:after {
 width:30px;
 background:#464c53;
 mask:url("/images/arrow_faq2.svg") no-repeat 50% 50% / contain;
 -webkit-mask:url("/images/arrow_faq2.svg") no-repeat 50% 50% / contain;
}
.blog_faq_wrap .faq_list > li,
.blog_faq_wrap .faq_list > li:first-child {
 border-color:#8a949e33;
}
.blog_faq_wrap .faq_list > li.on {
 background:#f0f2f5;
 border-color:transparent;
}
.blog_faq_wrap .faq_list > li.on h3 button {
 padding-bottom:12px;
}
.blog_faq_wrap .faq_list .con {
 border-top-color:#8a949e33;
 color:#464c53;
 padding:12px 26px 16px;
}
.blog_faq_wrap .faq_list .con li:before {
 background:#464c53;
}

/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1520px){
/* Blog */
	.blog_list {gap:40px 20px;}
	.blog_list li {width:calc((100% - 40px)/3);}
	.recommended_area .btn_contact {padding:0 68px 0 20px;}
/* 상세 */
	.index_area {left:20px; width:calc(50vw - 460px); min-width:150px; margin-left:0;}
	.index_area.unfixed {left:0;}
	.index_area .tit {font-size:16px; margin-bottom:20px;}
	.blog_view_con {width:calc(100% - 340px);}
	.blog_view_head {padding-bottom:30px;}
	.blog_view_head .imgfit {margin-bottom:30px; border-radius:16px;}
	.blog_view_head .type {font-size:14px; margin-bottom:6px;}
	.blog_view_head h1 {font-size:40px; margin-bottom:20px;}
	.blog_view_head .date {font-size:13px;}
	.blog_view_head .view_top {padding:30px 0; margin-bottom:30px;}
	.blog_view_body section + section {margin-top:60px;}
	.blog_view_body h2 {font-size:28px; margin-bottom:20px;}
	.blog_view_body h3 {font-size:20px; margin-bottom:6px;}
	.blog_view_body h3 ~ h3 {margin-top:20px;}
	.recommended_area {right:20px; width:calc(50vw - 460px); min-width:150px; margin-right:0;}
	.recommended_area .tit {font-size:18px; margin-bottom:14px;}
	.recommended_area a {padding:14px 0;}
	.recommended_area .imgfit {width:60px;}
	.recommended_area .txt {width:calc(100% - 60px); padding-left:10px; font-size:13px;}
	.recommended_area .btn_contact span {font-size:16px; line-height:1.2;}
	.recommended_area.unfixed {right:0;}
}

/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1280px){
/* Blog */
	.blog_list {gap:40px 10px;}
	.blog_list li {width:calc((100% - 20px)/3);}
/* 상세 */
	.blog_view_head .tb h2 {font-size:16px;}
	.blog_faq_wrap .faq_list h3 button {font-size:17px; padding:14px 30px 14px 26px;}
	.blog_faq_wrap .faq_list h3 button:before {top:14px;}
	.blog_faq_wrap .faq_list li .con {padding:10px 26px 14px;}
	.blog_faq_wrap .faq_list > li.on h3 button {padding-bottom:10px;}
}

/* ------------------------------ Tablet PC ------------------------------ */
@media screen and (max-width:1023px){
/* Blog */
	.blog_main_banner {margin-bottom:60px;}
	.blog_main_banner .imgfit {width:40%; border-radius:16px;}
	.blog_main_banner .txt {width:60%; padding-left:40px;}
	.blog_main_banner .type {font-size:15px;}
	.blog_main_banner h3 {font-size:26px; margin:20px 0 10px;}
	.blog_main_banner p {font-size:18px; margin-bottom:30px;}
	.blog_tit {font-size:30px; margin-bottom:24px;}
	.blog_list {gap:30px 5px;}
	.blog_list li {width:calc((100% - 10px)/3);}
	.blog_list .txt {padding-top:20px;}
	.blog_list .type {font-size:15px;}
	.blog_list h3 {font-size:18px; margin:4px 0 12px;}
	.blog_list .date {font-size:13px;}
/* 상세 */
	.blog_view_head .tb h2 {font-size:14px;}
	.blog_faq_wrap .faq_list h3 button {font-size:15px; padding:12px 30px 12px 24px;}
	.blog_faq_wrap .faq_list h3 button:before {top:12px;}
	.blog_faq_wrap .faq_list li .con {padding:8px 24px 12px;}
	.blog_faq_wrap .faq_list > li.on h3 button {padding-bottom:8px;}
}

/* ------------------------------ Mobile ------------------------------ */
@media screen and (max-width:767px){
/* Blog */
	.blog_main_banner {margin-bottom:40px; flex-direction:column; gap:20px;}
	.blog_main_banner .imgfit {width:100%; border-radius:12px;}
	.blog_main_banner .txt {width:100%; padding-left:0;}
	.blog_main_banner .type {font-size:13px;}
	.blog_main_banner h3 {font-size:22px; margin:15px 0 5px;}
	.blog_main_banner p {font-size:14px; margin-bottom:20px;}
	.blog_tit {font-size:20px; margin-bottom:16px;}
	.blog_list {gap:20px 10px;}
	.blog_list li {width:calc(50% - 5px);}
	.blog_list .txt {padding-top:10px;}
	.blog_list .type {font-size:13px;}
	.blog_list h3 {font-size:15px; margin:4px 0 8px;}
	.blog_list .date {font-size:12px;}
/* 상세 */
	.index_area {position:absolute; top:0; left:-20px; width:auto; max-width:80%; z-index:1; background:#fff6; backdrop-filter:url(#glass-refraction) blur(2px); border-radius:0 17px 17px 0; display:flex; flex-direction:column; gap:10px;}
	.index_area .tit {display:flex; align-items:center; gap:5px; font-size:13px; margin-bottom:0; padding:10px 15px;}
	.index_area .tit:after {content:""; display:block; width:12px; height:12px; background:#666; mask:url('/images/arrow_faq.svg') no-repeat 50% 50% / 12px; -webkit-mask:url('/images/arrow_faq.svg') no-repeat 50% 50% / 12px; transition:.2s linear;}
	.index_area.on .tit:after {transform:rotate(180deg);}
	.index_area .index_list {max-height:50vh; padding-bottom:10px; display:none;}
	.index_area li + li {margin-top:12px;}
	.index_area a {font-size:13px; padding:0 15px;}
	.blog_view_con {width:100%; max-width:100%;}
	.wrap_color_box {padding:15px;}
	.blog_view_head {padding-bottom:20px;}
	.blog_view_head .imgfit {margin-bottom:20px; border-radius:12px;}
	.blog_view_head .type {font-size:14px; margin-bottom:5px;}
	.blog_view_head h1 {font-size:30px; margin-bottom:15px;}
	.blog_view_head .tb h2,
	.blog_view_head .tb p {font-size:16px;}
	.blog_view_head .date {font-size:12px;}
	.blog_view_head .view_top {padding:20px 0; margin-bottom:20px;}
	.blog_view_body section + section {margin-top:40px;}
	.blog_view_body h2 {font-size:24px; margin-bottom:15px;}
	.blog_view_body h3 {font-size:18px; margin-bottom:5px;}
	.blog_view_body p {font-size:16px; color:#282828; line-height:1.9; letter-spacing:-.2px; text-align:left;}
	.blog_view_body li {font-size:16px;}
	.recommended_area {position:relative; top:0; right:0; width:100%; margin-top:40px;}
	.recommended_area .tit {font-size:14px; margin-bottom:10px;}
	.recommended_area .recommended_list {max-height:214px;}
	.recommended_area a {padding:10px 0;}
	.recommended_area .imgfit {width:100px;}
	.recommended_area .txt {width:calc(100% - 100px);}
	.recommended_area .btn_contact {height:50px; padding:0 50px 0 16px; margin-top:20px; background-size:40px; background-position:right 5px center;}
	.recommended_area .btn_contact p {font-size:11px;}
	.recommended_area .btn_contact span {font-size:14px;}
	.recommended_area.unfixed {position:relative;}
	.service_faq .faq_list > li {padding:0 10px;}
	.blog_faq_wrap .faq_list h3 button {font-size:14px; padding:10px 20px;}
	.blog_faq_wrap .faq_list h3 button:before {top:10px;}
	.blog_faq_wrap .faq_list li .con {padding:6px 20px 10px;}
	.blog_faq_wrap .faq_list > li.on h3 button {padding-bottom:6px;}
}