/*font size*/
.fs_12{font-size: 0.75rem;}
.fs_14{font-size: 0.874rem;}
.fs_15{font-size: 0.938rem;}
.fs_17{font-size: 1.063rem;}
.fs_18{font-size: 1.125rem;}
.fs_20{font-size: 1.25rem;}
.fs_22{font-size: 1.375rem;}
.fs_25{font-size: 1.563rem;}
.fs_30{font-size: 1.875rem;}
.fs_40{font-size: 2.5rem;}
.fs_48{font-size: 3rem;}
.fs_65{font-size: 4.063rem;}

@media screen and (max-width:1080px){
    .fs_65{font-size: 45px;}
}

/*font weight*/
.fw_m{font-weight: 400;}
.fw_sb{font-weight: 500;}
.fw_b{font-weight: bold;}
.fw_eb{font-weight: 800;}

*{letter-spacing: -0.5px;}
body{margin-left: 220px;}
.b_color{color: #00297c;}

.b_inner{max-width:1300px; margin:0 auto; width:94%; }

#b_header{position:fixed; left:0; top:0; z-index:20; width:220px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #eaeaea;}
#b_header .b_inner{position: relative; display: flex; align-items: center; height: 100%; flex-direction: column; width: 100%; justify-content: space-between;}
#b_header .b_inner > div{width: 100%;}
#b_header .b_logo{margin: 65px 0;}
#b_header #b_gnb {display: flex; flex-direction: column;}
#b_header #b_gnb > li {position: relative; }
#b_header #b_gnb > li > a{display: flex; align-items: center;  font-size: 1.1rem; height: 100%; font-weight: 500; padding: 15px 30px; position: relative; transition:.3s; }
#b_header #b_gnb > li > a::after{content:''; width: 11px; height: 7px; background: url(/data/design/navi_arw.png) no-repeat center; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); opacity:0;}
#b_header #b_gnb > li.on > a{background-color: #00297c; color: #fff; transition:.3s; padding-top: 22px; padding-bottom: 22px; font-size: 1.0rem;}
#b_header #b_gnb > li.on > a::after{ opacity:1;}
#b_header #b_gnb .b_sub_list{width: 100%; padding:7px 0; display: none; background-color: #f7f7f7; padding: 25px 0;}
#b_header #b_gnb .b_sub_list li{padding-left: 10px; padding-bottom: 20px; text-align: left;}
#b_header #b_gnb .b_sub_list li:last-child{padding-bottom: 0; }
#b_header #b_gnb .b_sub_list li a{display: block; padding: 0 30px;color:#777; font-weight: 500; transition:color .3s; }
#b_header #b_gnb .b_sub_list li a:hover{color:#0e62d4; transition:color .3s; }
#b_header .b_logo a{display: block; text-align: center;}
#b_header .b_btn_list {margin-bottom: 45px; display: flex; align-items: center;}
#b_header .b_btn_list li{padding:0 15px; position: relative;}
#b_header .b_btn_list li a{display: block; padding:5px; color:#a7a7a7 ;}
#b_header .b_btn_list li:first-child::after{content: ''; width: 1px; height: 15px; background-color:#a7a7a7 ; position:absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: .5;}https://baeksang.yegam.kr/contents.html?pageId=F48CRFBPBVLRBVHZT4P5

#b_header .b_close_btn {display: none;}

#b_header_m{display: none; }

.b_toggle_btn{width: 30px; height:20px; flex-direction: column ; justify-content: center; display: none; cursor: pointer; align-items: center;}
.b_toggle_btn span{width: 25px; background-color: #333; height:2px; margin-bottom: 7px;}
.b_toggle_btn span:last-child{margin-bottom: 0;}
.b_close_btn{ display: none; position:absolute; right: 34px; top: 19px;width:24px; height:24px; z-index: 20;}
.b_close_btn span{position:absolute; left:0; top:14px; background-color: #333; width: 100%; height: 2px; transition: transform .3s;}
.b_close_btn span:first-child{transform:rotate(45deg);}
.b_close_btn span:last-child{transform:rotate(-45deg);}

@media screen and (max-width:1080px){
    body {margin-left: 0px;}
    #b_header{display: none; right:0; left:unset; border-right: 0; border-left: 1px solid #eaeaea; z-index: 30;}
    #b_header .b_inner{position: relative; padding-top: 100px; }
    #b_header .b_logo{display: none;}
    #b_header_m{display: block; height: 70px; position: fixed; left: 0; top: 0; z-index: 20; background-color: #fff; width: 100%}
    #b_header_m .b_inner{height: 100%; display: flex; justify-content: space-between; align-items: center; }
    .b_toggle_btn{display: flex;}
    .b_close_btn:hover span:first-child{transform:rotate(0); transition: transform .3s;}
    .b_close_btn:hover span:last-child{transform:rotate(0);  transition: transform .3s;}
}

@media screen and (max-width:760px){
    .b_close_btn{right: 18px; top: 20px;}
}


.b_mv_box {height:100vh; width: 100%; position: relative; overflow:hidden;}
.b_mv_box .b_mv_scr{position: absolute; right: 0px; bottom: 30%;color:#fff; z-index: 10; letter-spacing: 3px; text-transform: uppercase; display: flex; align-items: center; transform: rotate(90deg);}
.b_mv_box .b_mv_scr{animation-name: scr_ani; animation-duration: 1s; animation-timing-function:ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;}

@keyframes scr_ani{
    0%{transform:rotate(90deg) translateX(0);}
    100%{transform:rotate(90deg) translateX(10px);}
}
.b_mv_box .b_mv_scr img{display: block; margin-left: 15px;}
.b_mv_box ul li{position: relative;}
.b_mv_box ul li figure{position: absolute; left: 0; top: 0; width:100%; height:100%; z-index: -1; overflow:hidden; display: flex; align-items: center; justify-content: center;}
.b_mv_box ul li figure img{transform:scale(1.1); }
.b_mv_box ul li.swiper-slide-active figure img{transform:scale(1); transition:transform 6s;}
.b_mv_box ul li .b_inner{display: flex; align-items: center; height:100%; }
.b_mv_box .b_txt_box{color: #fff; text-align: left; transform:translateY(30px); opacity:.2;}
.b_mv_box ul li.swiper-slide-active .b_txt_box{transform:translateY(0);opacity:1; transition:ease .8s; transition-delay: .4s;}
.b_mv_box .b_txt_box h2{font-size: 3.75rem; line-height:1.3; font-weight: 200;}
.b_mv_box .b_txt_box h2 b{display: block; }
.b_mv_box .b_txt_box p{line-height:1.7;  margin: 40px 0 60px 0;}
.b_mv_box .b_pagi{width: 94%; max-width: 1300px; left: 50%; transform: translateX(-50%); text-align: left; top: 70%; bottom:unset; }
.b_mv_box .b_pagi span{border-radius: 0; width: 60px; height:2px; background-color: rgba(255,255,255,.3); position: relative; opacity: 1;}
.b_mv_box .b_pagi span::after{content: ''; width: 0; height: 100%; background-color: #fff; position:absolute; left: 0; top: 0;}
.b_mv_box .b_pagi span.swiper-pagination-bullet-active::after{animation-name: mv_pagi; animation-duration: 5s; animation-timing-function:linear; }
.b_mv_box .b_pagi span::before{width: 15px; height: 20px; position:absolute; left: 0; bottom: 5px; font-size: 0.75rem; font-weight: 500; color:#fff; letter-spacing: 2px; opacity: .3;}
.b_mv_box .b_pagi span:nth-child(1):before{content: '01'; }
.b_mv_box .b_pagi span:nth-child(2):before{content: '02'; }
.b_mv_box .b_pagi span:nth-child(3):before{content: '03'; }
.b_mv_box .b_pagi span.swiper-pagination-bullet-active::before{opacity: 1; transition: .2s;}

@keyframes mv_pagi{
    0%{width: 0;}
    100%{width: 100%;}
}

.b_mv_box .b_link_btn{position: absolute; right: 0; bottom: 0; width: 260px; height: 90px; background-color: #00297c; color: #fff;z-index: 10;}
.b_mv_box .b_link_btn a{height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: inherit}
.b_mv_box .b_link_btn span{letter-spacing: 1px;}
.b_mv_box .b_link_btn i{display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 50%; background-color: #001a50; margin-left: 22px; }

@media screen and (max-width:1080px){
    .b_mv_box {height:90vh; }
    .b_mv_box .b_link_btn{width: 200px; height: 70px;}
    .b_mv_box .b_link_btn i{margin-left: 10px;}
    .b_mv_box .b_mv_scr{right:-20px}
}
@media screen and (max-width:760px){
    .b_mv_box .b_txt_box h2 {letter-spacing: -2px;}
    .b_mv_box {height: 630px;}
    .b_mv_box .b_txt_box h2 {font-size: 35px;}
    .b_mv_box .b_txt_box p{margin: 25px 0;}
    .b_mv_box .b_mv_scr{right:-25px}
    .b_mv_box .b_pagi span{width: 40px;}
    .b_mv_box .b_pagi span::before{height: 12px;}
}

.b_motion { /* 페이드 이펙트 */
    transition: transform 0.6s, opacity 0.6s ease;
    opacity: 0;
    transform: translate3d(0px, 30px, 0);
  }

.b_motion.b_move { /* 모션 작동 */
    opacity: 1 !important;
    transform: translateZ(0) !important;
}

.b_delay_01{transition-delay: .2s;}
.b_delay_02{transition-delay: .4s;}
.b_delay_03{transition-delay: .6s;}
.b_delay_04{transition-delay: .8s;}

.b_sec_01{padding: 150px 0 130px; position: relative; background-color: #f8f8f8;}
.b_sec_01 .b_bg_img{position:absolute; right: 0; top: 0; display: block;}
.b_sec_01 .b_tit_box {margin-bottom: 100px;}
.b_sec_01 .b_tit_box p{margin-top: 20px; line-height: 1.5; word-break: keep-all;}
.b_sec_01 .b_pdt_list{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.b_sec_01 .b_pdt_list li{width: 32%; aspect-ratio: 9/11; display: flex; align-items: flex-end; padding: 0px 3%; position: relative; transition:box-shadow .2s; }
.b_sec_01 .b_pdt_list li:hover{box-shadow: 20px 20px 35px rgba(0,0,0,.2);transition:box-shadow .3s; }
.b_sec_01 .b_pdt_list li::after{content: ''; width: 100%; height: 100%; background-color: #003b94; position: absolute; left: 0; top: 0; opacity: 0; transition:opacity .3s;}
.b_sec_01 .b_pdt_list li:hover::after{opacity: .8; transition:opacity .3s; }
.b_sec_01 .b_pdt_list li > a{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 15;}
.b_sec_01 .b_pdt_list li:nth-child(1){background:url(/data/design/index/sec01_img_01.jpg) no-repeat center / cover; }
.b_sec_01 .b_pdt_list li:nth-child(2){background:url(/data/design/index/sec01_img_02.jpg) no-repeat center / cover; margin-top: -50px;}
.b_sec_01 .b_pdt_list li:nth-child(3){background:url(/data/design/index/sec01_img_03.jpg) no-repeat center / cover; }
.b_sec_01 .b_pdt_list li .b_txt_box{color:#fff; position: relative ; z-index: 10; transition:transform .2s; }
.b_sec_01 .b_pdt_list li:hover .b_txt_box {transform: translateY(-30px);  transition:transform .3s; }
.b_sec_01 .b_pdt_list li .b_txt_box p{line-height: 1.7; margin: 22px 0;}
.b_sec_01 .b_pdt_list li .b_txt_box span{opacity: 0; transition:opacity .2s; }
.b_sec_01 .b_pdt_list li:hover .b_txt_box span{opacity: .5;  transition:opacity .3s; }
.b_sec_01 .b_pdt_list li .b_arw_box{width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background-color: #001a50; position: absolute; right: 0; top: 0; opacity: 0; }
.b_sec_01 .b_pdt_list li:hover .b_arw_box{opacity: 1; transition:opacity .3s; z-index: 5;}

@media screen and (max-width:1080px){
    .b_sec_01 .b_pdt_list li{}
    .b_sec_01 .b_pdt_list li .b_arw_box{width:45px; height: 45px; }
    .b_sec_01 .b_pdt_list li .b_arw_box img{width:10px; }
}
@media screen and (max-width:760px){
    .b_sec_01 {padding: 80px 0;}
    .b_sec_01 .b_tit_box {margin-bottom: 40px;}
    .b_sec_01 .b_pdt_list li{width: 100%; aspect-ratio: unset; height: 240px; margin-bottom: 20px;}
    .b_sec_01 .b_pdt_list li:nth-child(2){margin-top: 0;}
    .b_sec_01 .b_pdt_list li:nth-child(3){margin-bottom: 0;}
}
@media screen and (max-width:460px){
    .b_sec_01 .b_pdt_list li{height: 200px; margin-bottom: 10px;}
}

#b_footer{background-color: #24272f; padding:60px 0 ; }
#b_footer .b_inner{display: flex; justify-content: space-between;}
#b_footer .b_left_box{display: flex; }
#b_footer .b_left_box h1 {margin-right: 70px;}
#b_footer .b_left_box h1 a{display: block; width:fit-content; }
#b_footer address{color:#fff; font-size: 0.813rem; opacity: .5;}
#b_footer address span{line-height: 1.7; padding:0 10px; letter-spacing: 0px}
#b_footer address span.b_line{border-right:1px solid rgba(255,255,255,.2);}
#b_footer address span:first-child{padding-left:0; }
#b_footer address span.b_pd_x{padding-left:0; }
#b_footer address .b_copyright{line-height: 1.7; text-transform: uppercase; letter-spacing: 0px}
#b_footer .b_top_btn{display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid #fff; opacity: .4;}


@media screen and (max-width:1080px){
    #b_footer{padding:60px 0; }
    #b_footer .b_left_box{flex-direction: column; }
    #b_footer .b_left_box h1 {margin-right: 0px; margin-bottom: 20px;}
    #b_footer .b_left_box h1 img{width: 130px;}
    #b_footer address span.b_bsn_num{padding-left: 0;}
    #b_footer address span.b_line_x{border-right:0}
}
@media screen and (max-width:760px){
    #b_footer .b_top_btn{width: 30px; height:30px; }
    #b_footer .b_top_btn img{width: 12px;}
}


.br_760o{display: none;}
@media screen and (max-width:760px){
    .br_760o{display: block;}

}

.br_460o{display: none;}
@media screen and (max-width:760px){
    .br_460o{display: block;}

}

.bbs_wrap {padding: 50px 0}

/*테이블*/
.tbl_a {font-size: 16px; margin: 10px 0 0; border-top: 2px solid #555; width: 100%}
.tbl_a tr {border-bottom: 1px solid #ddd;}
.tbl_a th {background: #f7f7f7; padding: 15px 15px; font-weight: 500; width: 120px; text-align: left;}
.tbl_a td {padding: 15px 15px; line-height: 1.6;}

.tbl_b {font-size: 16px; margin: 10px 0 0; border-top: 2px solid #555; width: 100%}
.tbl_b tr {border-bottom: 1px solid #ddd;}
.tbl_b th {background: #f7f7f7; padding: 15px 15px; font-weight: 500; width: 120px; text-align: center; border-right: 1px solid #ddd;}
.tbl_b th:last-child {border-right: none;}
.tbl_b td {padding: 15px 15px; line-height: 1.6; text-align: center; border-right: 1px solid #ddd;}
.tbl_b td:last-child {border-right: none;}

/*서브페이지*/
#content_wrapper .sub_title {position: relative; letter-spacing: 0px; height: 360px;}
#content_wrapper .sub_title .txt_box {width: 100%; height: 100%; display: flex; flex-direction: column;justify-content: center; align-items: center; color: #fff;}
#content_wrapper .sub_title .txt_box p { }
#content_wrapper .sub_title .txt_box h1 { padding: 30px 0 0; }

#content_wrapper .sub_menu {display: flex; justify-content: center; align-items: center; line-height: 80px; border-bottom: 1px solid #eee;}
#content_wrapper .sub_menu li {margin: 0 30px; padding: 0 10px}
#content_wrapper .sub_menu li.active {border-bottom: 2px solid #00297c}
#content_wrapper .sub_menu li a {display: block;}

.sub_wrapper {padding:0 0 120px 0}
.sub_content_wrap {padding: 120px 0}
.sub_content .tl {text-align: center; font-size: 36px; font-weight: 600;}
.sub_content .tl_blank {padding: 100px 0 0;}
.sub_content .ex {text-align: center; font-size: 18px; padding: 20px 0 0; line-height: 1.4; color: #555}

.greeting01 {display: flex; justify-content: space-between; align-items: flex-start; padding: 60px 0 120px}
.greeting01 img {width: 100%; max-width: 649px; }
.greeting01 .txt {width: calc(100% - 699px); }
.greeting01 .txt h1 {font-size: 18px; font-weight: 500; color: #00297c; padding: 50px 0 0}
.greeting01 .txt h2 {font-size: 26px; font-weight: 600; padding: 40px 0 0}
.greeting01 .txt p {font-size: 16px; font-weight: 400; padding: 40px 0 0; line-height: 1.6;}

.greeting02 {display: flex; justify-content: space-between; align-items: flex-start; padding: 60px 0 0}
.greeting02 img {width: 100%; max-width: 649px; }
.greeting02 .txt {width: calc(100% - 699px); }
.greeting02 .txt h1 {font-size: 18px; font-weight: 500; color: #00297c; padding: 0px 0 0}
.greeting02 .txt h1.gear {padding: 30px 0 0}

.history01 {padding: 120px 0 0; margin: 50px 0}

.history01 .list {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 0 120px;}
.history01 .list .img {width: 45%; text-align: right}
.history01 .list .img img {width: 100%; max-width: 400px; border: 1px solid #ddd; border-radius: 20px; box-shadow: 3px 3px 10px rgba(0,0,0,.1)}
.history01 .list .plus {width: 10%; height: 100%; text-align: center }
.history01 .list .txt {width: 45%;}
.history01 .list:nth-child(2n) {flex-direction: row-reverse;}
.history01 .list:nth-child(2n) .img {text-align: left;}
.history01 .list:nth-child(2n) > .txt {text-align: right;}
.history01 {background: url(/data/design/sub_page_history_line.png) repeat-y center center;}
.history01 h1{font-size: 46px;font-weight:800;color:#ddd; padding: 0 0 30px;}
.history01 p{font-size: 18px;font-weight:400;color:#555555;}
.history01 span{font-size:20px;font-weight:500;color:#555555;padding-right:7px;}

.organization01 {margin: 50px 0 0;}
.organization01 img {width: 100%;}
.organization01 .state {padding: 30px 0 0}
.organization02 {padding: 50px 0 0}
.organization02 ul {display: flex; justify-content: space-between; align-items: stretch;}
.organization02 ul li {border: 1px solid #ddd; border-radius: 20px; width: 30%; text-align: center; padding: 60px 0; box-shadow: 3px 3px 10px rgba(0,0,0,.1);}
.organization02 ul li h1 {font-weight: 600; font-size: 26px;}
.organization02 ul li img {padding: 40px 0 30px}
.organization02 ul li p {font-size: 18px; padding: 0 0 10px}

.certification01 {margin: 50px 0 0}
.certification01 ul {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.certification01 ul li {width: 23%; text-align: center;}
.certification01 ul li img {width: 100%; border: 1px solid #ddd; border-radius: 20px; box-shadow: 3px 3px 10px rgba(0,0,0,.1)}
.certification01 ul li h1 {font-size: 20px; font-weight: 600; padding: 20px 0 0}
.certification01 ul li p {font-size: 16px; padding: 10px 0 0; color: #555; line-height: 1.2;}

.area01 {padding: 50px 0 0}
.area01 ul {display: flex; justify-content: space-between; align-items: self-start; margin: 0 0 50px; padding: 50px 30px 50px 60px; background: #f7f7f7; border: 1px solid #ddd; text-align: left;}
.area01 ul span {font-size: 14px; color: #001a50; font-weight: 500}
.area01 ul h1 {padding: 30px 0 0; font-size: 26px; font-weight: 600;}
.area01 ul p {padding: 30px 0 0; font-size: 16px; line-height: 1.8; color: #555}
.area01 ul a {padding: 50px 0 0; font-size: 16px; color: #001a50; display: flex; align-items: center; font-weight: 500;}
.area01 ul a img {padding: 0 0 0 10px}
.area01 ul li:nth-child(2) img {width: 100%; max-width: 447px; border: 1px solid #eee}

.estimate01 {padding: 80px 0 0}

.request_wrap ul {display: flex; justify-content: space-between;flex-wrap: wrap; padding: 0 0 10px }
.request_wrap ul li {width: 50%; padding: 0 5px}
.request_wrap .memo {padding: 0 5px}
.request_wrap .agreement {padding: 60px 0 0}
.request_wrap .agreement .tl {font-size: 20px; padding: 0 0 20px}
.request_wrap .agreement dl {border: 1px solid #ddd; padding: 30px; border-radius: 10px;}
.request_wrap .agreement dd {padding: 5px 0}
.request_wrap .agree_check {padding: 10px 0 0}
.request_wrap .agree_btn {padding: 50px 0 0; display: flex; justify-content: center; align-items: center;}
.request_wrap .agree_btn button {font-size: 18px; width: 250px; padding: 12px 0}

@media screen and (max-width: 1200px){
    #content_wrapper .sub_menu {line-height: 50px;}
    #content_wrapper .sub_menu li {padding: 0 5px; margin: 0 5px}

    .sub_content .tl {font-size: 26px}
    .greeting01 {flex-direction: column;}
    .greeting01 img {max-width: 100%;}
    .greeting01 .txt {width: 100%;}
    
    .greeting02 {flex-direction: column-reverse; }
    .greeting02 img {max-width: 100%;}
    .greeting02 .txt {width: 100%; padding: 50px 0 0;}

    .area01 ul {flex-direction: column; padding: 30px ;}
    .area01 ul li {padding: 0 0 30px}

}

@media screen and (max-width: 760px){

    .history01 {background-position: 3% center;}
    .history01 .list {align-items: flex-start; padding: 0 0 80px}
    .history01 .list .img {display: none}
    .history01 .list .plus {padding: 5px 0 0}
    .history01 .list .txt {width: 90%}
    .history01 .list:nth-child(2n) {flex-direction: row;}
    .history01 .list:nth-child(2n) > .txt {text-align: left;}
    .history01 h1 {font-size: 30px; padding: 0 0 10px}

    .organization02 ul {flex-direction: column;}
    .organization02 ul li {width: 100%; margin: 0 0 30px}

    .certification01 ul li {width: 48%; margin: 0 0 50px}

    .sub_content .ex br {display: none}
    .request_wrap ul {flex-direction: column; padding: 0}
    .request_wrap ul li {width: 100%; padding: 0 0 10px}
    .request_wrap .memo {padding: 0}
    .request_wrap .agreement dl {padding: 20px}
}