@charset "UTF-8";

/* common */
.skip{overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0);}
.is-pc{display:block !important;}
.is-pad{display:none !important;}
.is-m{display:none !important;}
img{max-width:100%;}
@media (max-width:1023px){
    .is-pad{display:block !important;}
}
@media (max-width:767px){
    .is-pc{display:none !important;}
    .is-pad{display:none !important;}
    .is-m{display:block !important;}
}

.sr-only,
legend,
caption {	position: absolute !important;	width: 1px !important;	height: 1px !important;	padding: 0 !important;	margin: -1px !important;	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;	white-space: nowrap !important;	border: 0 !important;}

/* margin */
.mt-4{margin-top:1rem !important;}
.mt-12{margin-top:3rem !important;}
.mt-32{margin-top:8rem !important;}
.my-12{margin-top:3rem !important; margin-bottom:3rem !important;}
@media (max-width:1023px){
    .mt-lg-8{margin-top:2rem !important;}
    .mt-lg-16{margin-top:4rem !important;}
    .mb-lg-8{margin-bottom:2rem !important;}
    .my-lg-8{margin-top:2rem !important; margin-bottom:2rem !important;}
}

/* gap */
.gap-4{gap:1rem !important;}
@media (max-width:1023px){
    .gap-lg-5{gap:1.25rem !important;}
    .gap-lg-6{gap:1.5rem !important;}
}

/* title-box */
.title-box{display:flex; justify-content:space-between;align-items:start;}
.title-box .h4,
.title-box h4{margin-bottom:48px; color:var(--color-gray-2); font-size:32px; font-weight:700;}
.title-box .h5,
.title-box h5{margin-bottom:32px; color:var(--color-gray-2); font-size:24px; font-weight:700;}
@media (max-width:1023px){
    .title-box .h4,
    .title-box h4{margin-bottom:24px; font-size:24px;}
    .title-box .h5,
    .title-box h5{margin-bottom:24px; font-size:20px;}
}

/* text-box */
.text-box{display:flex; flex-direction:column;gap:32px;}
.text-box p{color:var(--color-gray-2); font-size:20px; font-weight:500; word-break:keep-all;}
.text-box .large{font-size:24px;}
.text-box strong{color:inherit; font-size:inherit; font-weight:700;}
@media (max-width:1023px){
    .text-box{gap:20px;}
    .text-box p{font-size:16px;}
    .text-box .large{font-size:16px;}
}

/* text-color */
.text-primary{color:var(--color-primary) !important; font-size:inherit; font-weight:inherit;}
.text-primary-700{color:var(--color-primary-700) !important; font-size:inherit; font-weight:inherit;}

/* icon */
.icon{display:inline-block; width:24px; height:24px; background-position:center; background-size:cover; font-size:0; transition:0.25s ease-in-out;}
.icon-lg{width:40px; height:40px;}
.icon-s{width:18px; height:18px;}
.icon-arrow-down{background-image:url('../images/common/icon_arrow_down.svg');}
.icon-arrow-left{background-image:url('../images/common/icon_arrow_left.svg');}
.icon-arrow-left-primary{background-image:url('../images/common/icon_arrow_left_primary.svg');}
.icon-arrow-right{background-image:url('../images/common/icon_arrow_right.svg');}
.icon-arrow-right-primary{background-image:url('../images/common/icon_arrow_right_primary.svg');}
.icon-arrow-up{background-image:url('../images/common/icon_arrow_up.svg');}
.icon-forward{background-image:url('../images/common/icon_forward.svg');}
.icon-forward-primary{background-image:url('../images/common/icon_forward_primary.svg');}
.icon-forward-white{background-image:url('../images/common/icon_forward_white.svg');}
.icon-language{background-image:url('../images/common/icon_language.svg');}
.icon-language-white{background-image:url('../images/common/icon_language_white.svg');}
.icon-menu{background-image:url('../images/common/icon_menu.svg');}
.icon-menu-white{background-image:url('../images/common/icon_menu_white.svg');}
.icon-top{background-image:url('../images/common/icon_top.svg');}
.icon-white{background-image:url('../images/common/icon_white.svg');}
.icon-home{background-image:url('../images/common/icon_home.svg');}
.icon-paging-first{background-image:url('../images/common/icon_paging_first.svg');}
.icon-paging-prev{background-image:url('../images/common/icon_paging_prev.svg');}
.icon-paging-next{background-image:url('../images/common/icon_paging_next.svg');}
.icon-paging-last{background-image:url('../images/common/icon_paging_last.svg');}
.icon-plus-primary{background-image:url('../images/common/icon_plus_primary.svg');}
.icon-equals-primary{background-image:url('../images/common/icon_equals_primary.svg');}
.icon_link_blank{background-image:url('../images/common/icon_link_blank.svg');}
.icon-search{background-image:url('../images/common/icon_search.svg');}
.icon-cell{background-image:url('../images/common/icon-cell.svg');background-size: 24px;}
.icon-mail{background-image:url('../images/common/icon-mail.svg');background-size: 24px;}
.icon-bo-list{background-image:url('../images/common/icon-bo-list.svg');}

/* button-box */
.button-box{display:flex; flex-wrap:wrap;align-items:center;justify-content:center;}
.button-box .btn{display:flex; height:48px; padding:0 16px; border-radius:24px; background-color:#F5F5F5; color:var(--color-primary); font-size:16px; font-weight:500; transition:0.25s ease-in-out; gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;}
.button-box .btn:hover{background-color:var(--color-primary); color:var(--color-white);}
.button-box .btn:hover .icon-forward-primary{background-image:url('../images/common/icon_forward_white.svg');}
.button-box .btn-sm{height:32px; padding:0 12px; border-radius:6px; font-size:14px;}
.button-box .btn-md{height:40px; padding:0 12px; border-radius:6px; font-size:14px;}
.button-box .btn-big{height:56px; font-size:20px;}
.button-box .btn-white{background:var(--color-white);}
@media (max-width:1023px){
    .button-box .btn{height:40px; border-radius:20px; font-size:14px; gap:4px;}
    .button-box .btn .icon{width:20px; height:20px;}
}

/* custom-select */
.custom-select{display:inline-flex; position:relative; z-index:1;}
.custom-select .toggle-btn{display:flex; width:100%; height:48px; padding:0 12px; border:1px solid var(--color-gray-c); border-radius:8px; background-color:var(--color-white); color:var(--color-gray-6); font-size:14px; font-weight:500; gap:8px;align-items:center;justify-content:space-between;}
.custom-select .toggle-btn:after{width:24px; height:24px; background-image:url('../images/common/icon_arrow_down.svg'); content:''; flex-shrink:0;}
.custom-select .toggle-btn:hover{border-color:var(--color-primary); color:var(--color-gray-2);}
.custom-select ul{display:none; position:absolute; top:100%; left:0; right:0; padding:8px; border:1px solid var(--color-gray-c); border-radius:8px; background-color:var(--color-white);}
.custom-select.reverse ul{top:auto; bottom:100%;}
.custom-select ul li a,
.custom-select ul li button{display:flex; width:100%; min-height:40px; padding:0 12px; border-radius:6px; font-size:14px; font-weight:500; line-height:150%; align-items:center;}
.custom-select ul li a:hover,
.custom-select ul li button:hover{background-color:#F4F8FD; color:var(--color-primary); font-weight:600;}
.custom-select.active .toggle-btn{border-color:var(--color-primary); color:var(--color-gray-2);}
.custom-select.active .toggle-btn:after{background-image:url('../images/common/icon_arrow_up_primary.svg');}
.custom-select.active ul{display:block;}

/* input-box */
.input-box{display:flex; flex-wrap:wrap;align-items:center;}
.input-box input{min-width:0; height:48px; padding:0 12px; border:1px solid var(--color-gray-c); border-radius:8px; outline:0; background:var(--color-white); color:var(--color-gray-2); font-size:16px; font-weight:500; flex:1;}
.input-box input::placeholder{color:var(--color-gray-8);}
.input-box input:focus{border-color:var(--color-primary); outline:0;}
@media (max-width:991px){
    .input-box input{font-size:14px;}
}

/* tab */
.tab{margin-bottom:64px;}
.tab ul{display:flex; gap:12px;flex-wrap:wrap;}
.tab ul li a,
.tab ul li button{display:flex; height:64px; padding:0 24px; border-radius:32px; background-color:var(--color-gray-fa); color:var(--color-primary); font-size:20px; font-weight:600; justify-content:center;align-items:center;}
.tab ul li.active a,
.tab ul li.active button{background-color:var(--color-primary); color:var(--color-white); font-weight:700;}
@media (max-width:1023px){
    .tab{margin-bottom:32px;}
    .tab ul{gap:12px 8px;}
    .tab ul li a,
    .tab ul li button{height:48px; padding:0 16px; border-radius:24px; font-size:16px;}
}

/* paging */
.paging{margin-top:64px;}
.paging ul{display:flex; align-items:center;justify-content:center;gap:8px;}
.paging ul li a{display:flex; width:32px; height:32px; border-radius:50%; align-items:center;justify-content:center;}
.paging ul .paging-btn a{background-color:var(--color-gray-f4);}
.paging ul .paging-btn a .icon{width:20px; height:20px; transition:none;}
.paging ul .paging-btn.prev a{margin-right:8px;}
.paging ul .paging-btn.next a{margin-left:8px;}
.paging ul .paging-btn a:hover{background-color:var(--color-primary);}
.paging ul .paging-btn a:hover .icon-paging-first{background-image:url('../images/common/icon_paging_first_white.svg');}
.paging ul .paging-btn a:hover .icon-paging-prev{background-image:url('../images/common/icon_paging_prev_white.svg');}
.paging ul .paging-btn a:hover .icon-paging-next{background-image:url('../images/common/icon_paging_next_white.svg');}
.paging ul .paging-btn a:hover .icon-paging-last{background-image:url('../images/common/icon_paging_last_white.svg');}
.paging ul .paging-num a{color:var(--color-gray-2); font-size:16px; font-weight:500;}
.paging ul .paging-num a:hover{color:var(--color-primary);}
.paging ul .paging-num.active a{background-color:var(--color-primary); color:var(--color-white);}
@media (max-width:1023px){
    .paging{margin-top:40px;}
    .paging ul{gap:4px;}
    .paging ul .paging-btn.prev a{margin-right:4px;}
    .paging ul .paging-btn.next a{margin-left:4px;}
}

/* img-box */
.img-box{display:flex; overflow:hidden; border-radius:12px;}
.img-box img{width:33.33%;}
.img-box.st1 img{width:100%;}
@media (max-width:1023px){
    .img-box{border-radius:8px;}
}

/* bg-wrap */
.bg-wrap{position:relative; padding:120px 0;}
.bg-wrap:before{position:absolute; top:0; left:50%; bottom:0; width:100vw; background-color:var(--color-gray-f4); content:''; transform:translateX(-50%);}
.bg-wrap *{position:relative;}
@media (max-width:1023px){
    .bg-wrap{padding:64px 0;}
}


/* bo-veiw */
.bo-view-wrap {display: flex;flex-direction: column;gap: 48px;}
.bo-view-wrap .view-head{padding:32px 0 24px;border-bottom: 1px solid var(--color-gray-d);border-top: 2px solid var(--color-primary);}
.bo-view-wrap .view-head .view-title{font-size:32px;font-weight: 700;margin-bottom: 32px;}
.bo-view-wrap .view-head .view-head-item{display: flex;align-items: center;gap: 20px;}
.bo-view-wrap .view-head .view-head-item li{position: relative;display: flex;align-items: center;gap: 20px;font-size:20px;font-weight: 500;color: var(--color-gray-6);}
.bo-view-wrap .view-head .view-head-item li:not(:first-child)::before{content: '';width: 2px;height: 20px;background: var(--color-gray-d);display: block;}
.bo-view-wrap .view-body {width: 100%;max-width: 1280px;margin:0 auto;}
.bo-view-wrap .view-body .view-body-img {text-align: center;}
.bo-view-wrap .view-body .view-body-img img{max-width: 100%;}
.bo-view-wrap .view-body .view-content{margin-top: 24px;}
.bo-view-wrap .view-body .view-content > *{font-size: 20px;}

/* bo-veiw button-box */
.bo-view-wrap .button-box {gap: 8px;}
.bo-view-wrap .button-box .btn{border-radius: 8px;border: 1px solid var(--color-gray-d);background-color: var(--color-white);color: var(--color-gray-4);}
.bo-view-wrap .button-box .btn:hover{background: #F5F5F5;}
.bo-view-wrap .button-box .btn.btn-bo-list{background-color:var(--color-primary) ;color: var(--color-white);border: 1px solid transparent;}
.bo-view-wrap .button-box .btn.btn-bo-list:hover{background-color:var(--color-primary-700);}

/* bo-veiw-navi */
.bo-veiw-navi{ padding:24px; border:1px solid var(--color-gray-c); border-width:1px 0;}
.bo-veiw-navi ul li{margin:0 0 24px;}
.bo-veiw-navi ul li:last-of-type{margin:0;}
.bo-veiw-navi ul li a{display:flex; flex-wrap:wrap;align-items:center;}
.bo-veiw-navi ul li a strong{display:flex;font-weight:500;flex-wrap:wrap;align-items:center;font-size: 20px;}
.bo-veiw-navi ul li a strong:before{display:inline-block;width: 24px;height: 24px;margin:0 12px 0 0;background-position:center;background-size:cover;content:"";}
.bo-veiw-navi ul li a strong:after{display:inline-block;width:2px;height: 20px;margin: 0 32px;background:var(--color-gray-d);content:"";}
.bo-veiw-navi ul li a span{overflow:hidden;min-width:0;font-weight:500;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size: 20px;}
.bo-veiw-navi ul li a:hover span{text-decoration:underline;}
.bo-veiw-navi ul li:first-of-type a strong:before{background-image:url('../images/common/bo-veiw-prev.svg');}
.bo-veiw-navi ul li:last-of-type a strong:before{background-image:url('../images/common/bo-veiw-next.svg');}

@media (max-width:1023px){
    /* bo-veiw */
    .bo-view-wrap{gap: 40px;}
    .bo-view-wrap .view-head{padding: 24px 0;}
    .bo-view-wrap .view-head .view-title{font-size: 24px;margin-bottom: 20px;}
    .bo-view-wrap .view-head .view-head-item{gap: 12px;flex-wrap: wrap;}
    .bo-view-wrap .view-head .view-head-item li{font-size: 16px;gap: 12px;}
    .bo-view-wrap .view-head .view-head-item li:not(:first-child)::before{height: 16px;}
    .bo-view-wrap .view-body .view-content > *{font-size: 16px;}
    

    /* bo-veiw-navi */
    .bo-veiw-navi{margin: 40px 0 0;padding:16px 4px;}
    .bo-veiw-navi ul li{margin:0 0 20px;}
    .bo-veiw-navi ul li a strong{font-size:14px;}
    .bo-veiw-navi ul li a strong:before{width:24px; height:24px; margin:0 4px 0 0;}
    .bo-veiw-navi ul li a strong:after{height:14px;margin: 0 11px;}
    .bo-veiw-navi ul li a span{font-size:14px;}
}
@media (max-width:767px){
    .bo-view-wrap .view-head .view-head-item li{font-size: 14px;}
    .bo-view-wrap .view-head .view-head-item li:not(:first-child)::before{height: 14px;}
    .bo-view-wrap .view-body .view-content > *{font-size: 14px;}    
}