@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");


body{background: var(--grayBg);}

/* GUIDE CONT */
.content_box { padding:20px; border-radius:var(--borderR10); background:var(--white); min-height:calc(100vh - 257px); }
.content_box.height-auto { min-height:0 !important; }
.guide_cont { display:flex; align-items:flex-start; gap:30px; }

.guide_imgs { width: 750px; display:flex; flex-direction:column; gap:20px; position:sticky; top:20px; align-self:flex-start; }
.guide_img { width:100%; position:relative; border-radius:var(--borderR3); box-sizing:border-box; }
.guide_img::after { content:""; display:block; width:100%; height:100%; box-sizing:border-box; border:1px solid var(--border); position:absolute; left:0; top:0; border-radius:var(--borderR3); }
.guide_img img { display:block; width:100%; height:auto; }

.guide_text { flex: 1; padding:10px 0; position:sticky; top:20px;}
.guide_subtit { margin-bottom:15px; color:var(--black); font-weight:700; line-height: 140%;}

.guide_list { display:flex; flex-direction:column; gap:2px; }
.guide_list.line { margin-bottom:15px; padding-bottom:15px; border-bottom:1px dashed var(--border); }
.guide_list > li { display:flex; align-items:flex-start; gap:10px; line-height: 120%;}
.guide_nums { display:flex; flex-direction:row; align-items:flex-start; gap:4px; flex-shrink:0; }
.guide_num { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:19px; height:19px; margin-top:4px; border-radius:var(--borderR3); background:var(--numBg); color:var(--white); font-family:var(--eng); font-size:11px; font-weight:700; line-height:100%; letter-spacing:0; }

.guide_txt { flex:1 1 auto; min-width:0; color:var(--basic); }
.guide_txt .note { color:var(--main); font-weight:700; line-height:inherit; letter-spacing:inherit; }
.guide_txt .note2 { color:var(--main); font-weight:500; line-height:inherit; letter-spacing:inherit; }
.guide_txt strong { color:var(--black); font-weight:700; line-height:inherit; letter-spacing:inherit; }
.guide_txt a.guide_link { display:inline-flex; align-items:center; gap:2px; color:var(--main); font-weight:700; line-height:inherit; letter-spacing:inherit; }
.guide_txt a.guide_link::after { content:"\e157"; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; border-radius:100px; background:var(--main); color:var(--white); font-family:var(--icon); font-size:14px; line-height:1; font-weight: 400;}
.guide_text_sec + .guide_text_sec { margin-top:40px; }

.note_txt{padding-top: 10px; color:var(--main); font-weight:700;}

.guide_dott { display:flex; flex-direction:column; gap:3px; padding:5px 0; }
.guide_dott_item { position:relative; display:flex; align-items:flex-start; gap:8px; padding-left:10px; padding-right:10px; }
.guide_dott_item::before { content:""; position:absolute; left:0; top:12px; width:4px; height:4px; border-radius:50%; background:#999999; }
.guide_dott_item .tit { flex-shrink:0; width:124px; color:var(--black); font-weight:700; }
.guide_dott_item .tit.auto { width:auto; }
.guide_dott_item .tit.w67 { width:67px; }
.guide_dott_item .tit.w60 { width:60px; }
.guide_dott_item .tit.w56 { width:56px; }
.guide_dott_item .tit.w40 { width:40px; }
.guide_dott_item .tit.w50 { width:50px; }
.guide_dott_item .tit.w30 { width:30px; }
.guide_dott_item .tit.w70 { width:70px; }
.guide_dott_item .tit.w79 { width:79px; }
.guide_dott_item .tit.w80 { width:80px; }
.guide_dott_item .tit.w85 { width:85px; }
.guide_dott_item .tit.w95 { width:95px; }
.guide_dott_item .tit.w100 { width:100px; }
.guide_dott_item .tit.w105 { width:105px; }
.guide_dott_item .tit.w110 { width:110px; }
.guide_dott_item .tit.w120 { width:120px; }
.guide_dott_item .tit.w216 { width:216px; }
.guide_dott_item .txt { flex:1 1 auto; min-width:0; color:var(--basic); }
.guide_attach { display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:10px; width:100%; }
.guide_attach.border{box-sizing: border-box; border: 1px solid var(--border); padding: 10px; margin-top: 10px;}
.guide_attach.row { flex-direction:row; align-items:flex-start; gap:10px; }
.guide_attach.row .guide_attach_col { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.guide_attach + .guide_attach { padding-top:20px; }
.guide_attach_img { max-width:100%; }
.guide_attach_img img { display:block; max-width:100%; height:auto; }
.guide_attach_cap { width:100%; color:var(--black); font-weight:700; text-align:center; line-height: 150%;}
.guide_stack { display:flex; flex-direction:column; gap:50px; }
.guide_info { display:flex; gap:5px; align-items:flex-start; margin-top:20px; padding:18px 20px; background:var(--grayBg); }
.guide_info .guide_nums { align-items:center; gap:3px; margin-top:0; }
.guide_info .guide_num { margin-top:0; }
.guide_info .guide_tilde { color:var(--black); flex-shrink:0; }
.guide_info .guide_txt { color:var(--black); }
.content_box + .content_box { margin-top:10px; }














/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


.guide_imgs { width: 100%; flex:1;}


}
/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){





}
/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){


/* GUIDE CONT */
.content_box {min-height:calc(100vh - 294px); }
.guide_cont { flex-direction: column;}

.guide_imgs { width: 100%; position:relative; top:0;}
.guide_text { width: 100%; position:relative; top:0;}
.guide_stack { gap:30px; }

.guide_attach.row { flex-direction:column; }
.guide_attach.row .guide_attach_col { width:100%; }

.guide_list > li { gap:8px;}
.guide_num {  margin-top:2px;  }

.guide_dott_item::before { top:10px;  }
.guide_dott_item .tit { width:116px;}
.guide_dott_item .tit.w67 { width:60px; }
.guide_dott_item .tit.w56 { width:50px; }
.guide_dott_item .tit.w70 { width:60px; }
.guide_dott_item .tit.w80 { width:70px; }
.guide_dott_item .tit.w85 { width:75px; }
.guide_dott_item .tit.w95 { width:80px; }
.guide_dott_item .tit.w100 { width:85px; }
.guide_dott_item .tit.w105 { width:90px; }
.guide_dott_item .tit.w110 { width:95px; }
.guide_dott_item .tit.w120 { width:105px; }
.guide_dott_item .tit.w216 { width:200px; }
.guide_dott_item .tit.w30 { width:26px; }
.guide_dott_item .tit.w50 { width:45px; }
.guide_dott_item .tit.w60{width: 50px;}

.guide_info{margin-top: 15px; padding: 15px;}
.guide_subtit{margin-bottom: 10px;}
.guide_text_sec + .guide_text_sec{margin-top: 30px;}

}
/*******************************************************************************
    @media 680px
*******************************************************************************/
@media all and (max-width:680px){

/* GUIDE CONT */
.content_box { padding:15px; min-height:auto; }
.guide_cont { gap:20px;}

.guide_imgs { gap:20px;}
.guide_text { padding:0;}
.guide_stack { gap:20px; }

.guide_list.line { margin-bottom:10px; padding-bottom:10px; }
.guide_subtit { margin-bottom:10px; }
.guide_list{gap:4px;}
.guide_list > li { gap:6px;}
.guide_txt{line-height: 165%;}
.guide_nums { gap:3px; }
.guide_num { width:17px; height:17px; font-size:9px; }

.guide_dott_item { gap:0; padding-right:8px; flex-wrap: wrap;}
.guide_dott_item::before { top:8px; width:3px; height:3px;  }
.guide_dott_item .tit { width:100%;}
.guide_dott_item .tit.w67 { width:100%; }
.guide_dott_item .tit.w56 { width:100%; }
.guide_dott_item .tit.w70 { width:100%; }
.guide_dott_item .tit.w80 { width:100%; }
.guide_dott_item .tit.w85 { width:100%; }
.guide_dott_item .tit.w50 { width:100%; }
.guide_dott_item .tit.w105 { width:100%; }
.guide_dott_item .tit.w110 { width:100%; }
.guide_dott_item .tit.w120 { width:100%; }
.note_txt{padding-top: 5px;}
.guide_info{margin-top: 10px; padding: 10px;}

.guide_subtit{margin-bottom: 6px;}
.guide_text_sec + .guide_text_sec{margin-top: 20px;}


}