@import url("sub.css");




/*********** Assignment Guide *************/
.assign_guide {width:100%; background:var(--main); border-radius:10px; padding:0 5px; margin:0 0 60px; box-sizing:border-box;}
.assign_guide .guide_in {background:var(--grayBg); border-radius:10px; padding:60px; box-sizing:border-box;}
.assign_guide .check_point {display:flex; align-items:flex-start; gap:30px; width:100%;}
.assign_guide .check_tit {display:flex; align-items:center; gap:8px; width:335px; flex-shrink:0;}
.assign_guide .check_tit i {display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;}
.assign_guide .check_tit i::before {content:'\e7f4'; display:block; width:34px; height:34px; line-height:34px; font-size:34px; font-family:var(--icon); color:var(--main); text-align:center; font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-style:normal;}
.assign_guide .check_tit .fs35 {color:var(--main); line-height:1;}
.assign_guide .dot_list {flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding:5px 0;}
.assign_guide .dot_list ul {display:flex; flex-direction:column; gap:8px; width:100%;}
.assign_guide .dot_list li {padding:0 0 0 10px; position:relative; color:var(--basic);}
.assign_guide .dot_list li::before {content:''; display:block; width:3px; height:3px; background:var(--main); position:absolute; left:0; top:14px;}
.assign_guide .dot_list .note {font-weight:600; color:var(--main);}

/*********** Guide *************/
.guide_box {width:100%; background:var(--main); border-radius:10px; padding:0 5px; margin:0 0 60px; box-sizing:border-box;}
.guide_box .guide_in {background:var(--grayBg); border-radius:10px; padding:60px; display:flex; gap:80px; align-items:flex-start; box-sizing:border-box;}
.guide_box .img_wrap {width:36.4%; flex-shrink:0; position:relative; aspect-ratio:553 / 346; display:block; overflow:hidden; border-radius:10px; box-shadow:8px 8px 30px 0 rgba(0,0,0,0.1);}
.guide_box .img_wrap > img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block;}
.guide_box .img_wrap .photo {position:absolute; left:5.244%; top:26.012%; width:22.966%; height:50%; display:block; overflow:hidden;}
.guide_box .img_wrap .photo img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block;}
.guide_box .check_point {flex:1; min-width:0; display:flex; flex-direction:column; gap:20px;}
.guide_box .check_tit {display:flex; align-items:center; gap:8px;}
.guide_box .check_tit i {display:block; width:34px; height:34px; flex-shrink:0;}
.guide_box .check_tit i::before {content:'\e7f4'; display:block; width:34px; height:34px; line-height:34px; font-size:34px; font-family:var(--icon); color:var(--main); text-align:center; font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-style:normal;}
.guide_box .check_tit .fs35 {color:var(--main);}
.guide_box .dot_list {display:flex; flex-direction:column; gap:8px; padding:0 0 15px;}
.guide_box .dot_list ul {display:flex; flex-direction:column; gap:8px; width:100%;}
.guide_box .dot_list li {padding:0 0 0 10px; position:relative;}
.guide_box .dot_list li::before {content:''; display:block; width:3px; height:3px; background:var(--main); position:absolute; left:0; top:14px;}
.guide_box .dot_list .note {font-weight:600; color:var(--main);}
.guide_box .pay_box {width:100%; background:var(--white); border-radius:10px; padding:30px; display:flex; flex-direction:column; gap:15px; box-sizing:border-box;}
.guide_box .pay_info {display:flex; flex-direction:column; gap:8px; width:100%;}
.guide_box .bank {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.guide_box .bank .logo {background:var(--white); border:1px solid var(--border); border-radius:5px; padding:9px 18px; box-sizing:border-box; flex-shrink:0;}
.guide_box .bank .logo img {width:102px; height:23px; display:block; object-fit:contain;}
.guide_box .bank .fs21 {font-family:var(--eng); font-weight:700; letter-spacing:0;}
.guide_box .bank .fs19 {color:var(--basic);}
.guide_box .price {display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.guide_box .price .fs19 {color:var(--black);}
.guide_box .amount {display:flex; align-items:flex-end; gap:2px; flex-wrap:wrap;}
.guide_box .amount .fs19 {color:var(--main); font-weight:600;}
.guide_box .amount .fs15 {color:var(--basic); letter-spacing:var(--letter-spacing-body);}




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

.guide_box .guide_in {padding:50px 40px; gap:50px;}

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

.assign_guide .check_tit {width:280px;}
.guide_box .guide_in {padding:40px 30px; gap:40px;}

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

.assign_guide {margin:0 0 40px;}
.assign_guide .guide_in {padding:40px 30px;}
.assign_guide .check_point {flex-direction:column; gap:20px;}
.assign_guide .check_tit {width:100%;}
.assign_guide .dot_list li::before {top:12px;}

.guide_box {margin:0 0 40px;}
.guide_box .guide_in {flex-direction:column; padding:30px; gap:30px;}
.guide_box .img_wrap {width:100%; max-width:553px;}
.guide_box .dot_list li::before {top:12px;}
.guide_box .pay_box {padding:25px;}

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

.assign_guide {margin:0 0 30px;}
.assign_guide .guide_in {padding:25px 20px;}
.assign_guide .check_point {gap:15px;}
.assign_guide .check_tit {align-items:center;}
.assign_guide .check_tit .fs35 {font-size:1.263rem; line-height:1;}
.assign_guide .check_tit i {display:flex; align-items:center; justify-content:center; width:24px; height:24px; position:relative; top:1px;}
.assign_guide .check_tit i::before {width:24px; height:24px; line-height:24px; font-size:24px;}
.assign_guide .dot_list {padding:0;}
.assign_guide .dot_list li::before {top:10px;}

.guide_box {margin:0 0 30px;}
.guide_box .guide_in {padding:20px; gap:20px;}
.guide_box .check_point {gap:15px;}
.guide_box .check_tit .fs35 {font-size:1.263rem;}
.guide_box .check_tit i {width:26px; height:26px; position:relative; top:1px;}
.guide_box .check_tit i::before {width:26px; height:26px; line-height:26px; font-size:26px;}
.guide_box .dot_list {padding:0;}
.guide_box .dot_list li::before {top:10px;}
.guide_box .bank .logo {padding:6px 12px;}
.guide_box .bank .logo img {width:80px; height:18px;}
.guide_box .pay_box {padding:20px;}

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

.guide_box .guide_in {padding:16px; gap:16px;}
.guide_box .check_tit {align-items:flex-start;}
.guide_box .check_tit i {width:22px; height:22px;}
.guide_box .check_tit i::before {width:22px; height:22px; line-height:22px; font-size:22px;}
.guide_box .dot_list li::before {top:9px;}
.guide_box .pay_box {padding:16px;}

}