@charset "utf-8";

/* *************************************************************************************
*
* 서브페이지 공통
* 
* **************************************************************************************/
/* 네비게이션 */
.navigation {position: relative; margin-bottom: 5rem;}
.navigation::before {position: absolute; right: 0; top: 0; width: calc(100% - 20rem); height: 100%; background-color: #f7f8fd; border-radius: 0 0 0 12rem; content: ''; z-index: -1;}
.navigation .page_visual {position: relative; width: calc(100% - 20rem); height: 0; padding-top: 19.792%; border-radius: 0 0 12rem 0; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;}
.navigation .page_visual.type3 {background-image: url("../images/common/page_visual_3.png");}
.navigation .page_visual.type7 {background-image: url("../images/common/page_visual_7.png");}
.navigation .info {position: absolute; left: 30rem; top: 50%; transform: translateY(-50%); width: calc(100% - 4rem); color: #fff;}
.navigation .title {margin-bottom: 1.2rem; font-size: 4rem; font-weight: 600;}
.navigation .desc {font-size: 2.2rem;}
.breadcrumb_list {display: flex; align-items: center; justify-content: right; flex-wrap: wrap; gap: 1.2rem 0; padding: 2.5rem 0;}
.breadcrumb_list > li {position: relative;}
.breadcrumb_list > li + li {padding-left: 3rem;}
.breadcrumb_list > li + li::before {content: ''; position: absolute; left: 1rem; top: 0.8rem; width: 6px; height: 6px; border-top: 2px solid #777; border-right: 2px solid #777; transform: rotate(45deg);}
.breadcrumb_list > li > a {font-size: 1.7rem; color: #555;}

/* 타이틀 */
.page_title {margin-bottom: 4rem; padding-bottom: 1.2rem; color: #222; font-size: 3.5rem; font-weight: 600; border-bottom: 3px solid #475067;}
.page_title.ta_c {border-bottom: 0;}
.arrow_title {margin-bottom: 2.5rem; padding-left: 2.8rem; color: #222; font-size: 2rem; font-weight: 600; background-image: url("../images/icon/ico_arrow.png"); background-size: 1.8rem; background-position: left top 0.4rem; background-repeat: no-repeat;}

/* *************************************************************************************
* 
* Tab
*  
* **************************************************************************************/
.tab_2depth {position: relative; margin-bottom: 7rem; padding: 3rem 5rem; background-color: #f6f3ff; border-radius: var(--border-radius-base);}
.tab_2depth .tab_btn {display: none;}
.tab_2depth .tab_list {display: flex; gap: 1.5rem 2rem; flex-wrap: wrap;}
.tab_2depth .tab_list > li {position: relative; width: calc(100% / 6 - 1.6666rem); height: 5rem; background-color: #fff; color: #777; border-radius: 5rem;}
.tab_2depth .tab_list > li.on {background-color: var(--primary-color); color: #fff;}
.tab_2depth .tab_list > li.on::before {content: ""; position: absolute; bottom: -1.4rem; left: 50%; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid var(--primary-color);}
.tab_2depth .tab_list > li.is-active {color: #777;}
.tab_2depth .tab_list > li > a {display: block; width: 100%; height: 100%; padding: 1.3rem; font-size: 1.8rem; font-weight: 500; text-align: center;}
.tab_2depth .tab_list > li.disabled {background-color: #eee; color: #aaa;}
.tab_2depth .tab_list > li.disabled > a {pointer-events: none; cursor: not-allowed;}
.tab_2depth .tab_list > li.on span {display: inline-block; padding-left: 2.8rem; background: url("../images/common/tab_check_on.svg") left center no-repeat; background-size: 2.2rem;}
.tab_2depth .btn_move {display: none;}

/* *************************************************************************************
* 
* 버튼
*  
* **************************************************************************************/
.basic_btn {margin-top: 5rem; display: flex; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap;}
.basic_btn .btn {display: block; min-width: 17rem; height: 5rem; line-height: 4.8rem; padding: 0 5rem; background-color: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); font-weight: 600; border-radius: 1rem; text-align: center;}
.basic_btn .share {display: inline-block; padding-left: 3rem; background: url("../images/icon/ico_share_pu.png") left center no-repeat; background-size: 2rem;}
.basic_btn .primary {background-color: var(--primary-color); color: #fff;}
.basic_btn .btn.arr_left {background-image: url("../images/icon/arr_left_primary.svg"); background-position: left 1.5rem center; background-size: 0.7rem; background-repeat: no-repeat;}
.basic_btn .primary.arr_right {background-image: url("../images/icon/arr_right_wh.svg"); background-position: right 1.5rem center; background-size: 0.7rem; background-repeat: no-repeat;}
.primary_btn {display: inline-block; min-width: 14rem; height: 5rem; line-height: 5rem; padding: 0 2rem; background-color: var(--primary-color); color: #fff; text-align: center; border-radius: 1rem;}
.primary_btn .arr_right {display: inline-block; padding-right: 2rem; background-image: url("../images/icon/arr_right_wh.svg"); background-size: 0.7rem; background-position: right center; background-repeat: no-repeat;}

/* 리스트 */
.dot_ul > li {position: relative; padding-left: 1.5rem;}
.dot_ul > li::before {position: absolute; left: 0; top: 0.9rem; width: 0.5rem; height: 0.5rem; background-color: var(--primary-color); border-radius: 50%; content: '';}

.dl_list dl {display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap;}
.dl_list dl + dl {margin-top: 0.8rem;}
.dl_list dt {padding: 0.3rem 1.5rem; background-color: #333; color: #fff; font-weight: 600; border-radius: 5rem;}
.dl_list dd {width: calc(100% - 10rem); padding-top: 0.5rem;}

.meta_info {display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; color: #555;}
.meta_info .ico img {vertical-align: middle;}
.meta_info .view .ico img {width: 1.6rem;}
.meta_info .share .ico img {width: 1.4rem;}
.meta_info li {position: relative; display: flex; align-items: center; gap: 0.4rem; font-size: 1.5rem; font-weight: 500;}
.meta_info li::before {position: absolute; right: -1rem; top: 0.2rem; width: 1px; height: 1.2rem; background-color: #ddd; content: '';}
.meta_info li:last-child::before {display: none;}

.tag_list .item_list {margin-top: 1.5rem; padding-top: 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; border-top: 1px solid var(--border-color);}
.tag_list .item_list li {padding: 0.4rem 1.5rem; background-color: #fff; border-radius: 5rem; border: 1px solid var(--border-color); text-align: center;}


/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/
/* Only PC */
@media all and (min-width:1280px){
    .basic_btn .btn:hover {box-shadow: 0 0 15px rgba(132, 108, 221, 0.8);}   
}

/* Laptop */
@media all and (max-width:1280px){
    /* 서브 공통 */
    .navigation {padding-bottom: 3.5rem; margin-bottom: 0;}
    .navigation::before {width: 100%; border-radius: 0;}
    .navigation .page_visual {width: calc(100% - 3rem);}
    .navigation .info {left: 2rem;}
    .navigation .title {font-size: 3.2rem;}
    .navigation .desc {font-size: 1.7rem;}
    .breadcrumb {display: none;}
    .page_title {font-size: 2.8rem;}
    .tab_2depth {padding: 2rem;}
    .tab_2depth .tab_list > li {width: calc(100% / 4 - 1.5rem);}
}

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

}

/* Mobile */
@media all and (max-width:780px){
    /* 서브 공통 */
    .navigation .page_visual {padding-top: 21.767%;}
    .tab_2depth {display: flex; gap: 0.5rem; padding: 0; background-color: #fff;}
    .tab_2depth .tab_btn {position: relative; display: block; width: calc(100% - 10.5rem); height: 6rem; line-height: 6rem; padding: 0 2rem; border: 1px solid var(--border-color); font-weight: 500; text-align: left; border-radius: 1rem;}
    .tab_2depth .tab_btn::after {position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; background: url("../images/icon/arr_down.svg") center no-repeat; transition: .3s; content: '';}
    .tab_2depth .tab_btn.on::after {transform: translateY(-50%) rotate(180deg); transition: .3s;}
    .tab_2depth .tab_list {display: none; position: absolute; left: 0; top: 7rem; width: 100%; background-color: #fff; border-radius: 1rem; border: 1px solid var(--border-color); overflow: hidden; z-index: 21;}
    .tab_2depth .tab_list > li {width: 100%; text-align: left; border-radius: 0;}
    .tab_2depth .tab_list > li.on::before {content: none;}
    .tab_2depth .tab_list > li.is-active {color: var(--primary-color);}
    .tab_2depth .tab_list > li > a {text-align: left;}
    .tab_2depth .btn_move {display: block; width: 10rem; height: 6rem; line-height: 6rem; text-align: center; background-color: var(--primary-color); color: #fff; border-radius: 1rem;}
}

@media all and (max-width:480px){ 
    /* 서브 공통 */
    .navigation .page_visual {padding-top: 58.215%;}
    .page_title {margin-bottom: 3rem;}

    /* 버튼 */
    .basic_btn {gap: 0.8rem;}
    .basic_btn .btn  {min-width: 10rem; padding: 0 1.2rem;}
    .basic_btn .primary.arr_right {background-position: right 1rem center;}
}
.complete_box {width: 100%; max-width: 72rem; margin: 10rem auto 5rem; border: 2px solid var(--border-color); border-radius: 2rem;}
.complete_box .box_inner {padding: 5rem 2rem; margin: 0 auto;}
.complete_box .info {font-size: 1.8rem; text-align: center;}
.complete_box .title {display: block; margin-bottom: 1.2rem; font-size: 2.8rem; word-break: keep-all;}
.complete_box .desc {word-break: keep-all;}
.complete_box .ico {display: inline-block; margin-bottom: 2.5rem;}
.complete_box .ico.complete img {width: 8rem;}

@media all and (max-width: 480px) {
	.complete_box .ico.complete img {width: 5rem;}
	.complete_box .title {font-size: 2.2rem;}
	.complete_box .desc {font-size: 1.5rem;}
}