/* °øÅëÀû¿ë */
html {scroll-behavior:smooth;}
body {background: #fff;}
/* a:hover {text-decoration:none !important;} */
.inner {width:90%; max-width:1300px; margin:0 auto;}



/* ºñ¸Þ¿À, À¯Æ©ºê */
.video_container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.video_container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* sns ºñµð¿À(Á¤¹æÇü, Àç»ýÁ¦¾î) */
.sns_video {position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%;}
.sns_video:after {
    display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.0);
}
.sns_video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ¹ÝÀÀÇü ¹é±×¶ó¿îµå ºñµð¿À */
.bg_video {width: 100vw; height: 100vh;}
.bg_video iframe {position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%);}



@media (min-aspect-ratio: 16/9) {
    .bg_video iframe {
        /* height = 100 * (9 / 16) = 56.25 */
        height: 56.25vw;
    }
}



@media (max-aspect-ratio: 16/9) {
    .bg_video iframe {
        /* width = 100 / (9 / 16) = 177.777777 */
        width: 177.78vh;
    }
}



/* popup */
.popup {
    overflow: hidden; position: fixed; width: 100%; height: 100%; display: none;
    z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .8);
} 
.popup.on {display: block;}
.popup .popup_inner {
    position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000;
}
.popup .popup_close {position: absolute; width:20px; height: 20px; right: 0; top: -25px; cursor: pointer;}
.popup .popup_tit {background: #083274; color: #fff; font-size: 1.6rem;; text-align: left; padding:15px 50px 10px 20px; }
.popup .popup_form {max-width: 380px; border-radius: 10px;}
.popup .popup_form .popup_box {padding:30px 20px; text-align: center; word-break: keep-all;}
.popup .popup_form .popup_box .tit_box {font-size: 1.8rem; font-weight: 700;}
.popup .popup_form .popup_box .text_box {font-size: 1.5rem; margin-top: 10px; color: #555;}
.popup .popup_form .popup_box .input_box {margin-top: 20px;}
.popup .popup_form .popup_box .input_box input[type="text"] {width: 100%;}
.popup .popup_form .popup_box .cmnt_box {margin-top: 10px; font-size: 1.3rem;}
.popup .popup_form .popup_box .btn_box {margin-top: 20px; display: flex; gap: 10px; justify-content: center;}
.popup .popup_form .popup_box .btn_box a {width: 100%; font-size: 1.4rem; height: 40px; line-height: 40px; max-width: 200px;}



#popupVideo .popup_inner {
    max-width: 800px; background: #000 url('/base/img/batwo/icon_loding.gif') no-repeat center center / 50px;
}




/* img */
img {max-width: 100%;}
.img_m {display: none;}




/* text */
.font_blue {color: #0F52BA;}
.font_skyblue {color: #C6DCFF;}
.font_bold {font-weight: 700;}



/* padding ¡¤ margin style*/
.padding_tb {padding:150px 0;}
.padding_t {padding-top: 150px;}
.padding_b {padding-bottom: 150px;}
.margin_tb {margin:150px 0;}
.margin_t {margin-top: 150px;}
.margin_b {margin-bottom: 150px;}



/* btn style */
.btn_st01 {
    max-width: 200px; width: 100%; font-size: 1.8rem; color: #fff;
    border-radius: 100px; border:1px solid #fff; height: 55px; margin: 0 auto;
    display: flex; justify-content: center; align-items: center; gap:10px;
}
.btn_st01:after {
    display: inline-block; content: ""; background: url('/base/img/batwo/icon_btn_arrow.png') no-repeat center center / cover;
    width: 16px; height: 16px;
}



/* header */
#header {position: fixed; top:0; width: 100%; height: 90px; background:#fff; z-index: 998; transition: .5s;}
#header .hd_box {position: relative; height: 100%; }
#header .hd_logo {left:0; position: absolute; top:50%; transform: translateY(-50%); }
#header .hd_logo img {height: 49px;}
#header .hd_nav {right: 0; position: absolute; top:50%; transform: translateY(-50%);}
#header .hd_nav .nav {width: 100%; text-align: right; }
#header .hd_nav .menu {display: inline-block; margin-left: 40px; }
#header .hd_nav .menu > a { font-size: 1.8rem; font-weight: 700; color:#111;}



#header.header_main {background:rgba(255,255,255,.0)}
#header.header_main .hd_nav .menu > a {color: #fff;}



#header.active {border-bottom: 1px solid #ededed; background: #fff;}
#header.active .hd_nav .menu > a {color:#111;}



.m_menu {display:none;}
.menu {position:relative;}
.menu a {cursor:pointer;}
.menu .submenu {display:none; position: absolute; left:50%; transform:translate(-50%,0); background: #fff; padding: 15px; border:1px solid #ededed; border-top:4px solid #a2cc10;}
.menu .submenu ul > li {width:150px; }
.menu .submenu ul > li > a {font-size:16px; line-height: 20px; padding:7px 0; display:block; color:#555;}
.menu .submenu ul > li > a:hover {color:#111; font-weight: 700;}




/* footer */
#footer {background: #fff; padding:60px 0; text-align: center; border-top: 1px solid #ededed;}
#footer .name {font-size: 1.8rem; font-weight: 700;}
#footer .info {font-size: 1.4rem; margin: 20px 0; font-weight: 500;}
#footer .info li {margin: 10px 0;}
#footer .info li .gubun {color: #555; margin-right: 5px; display: inline-block;}
#footer .info li .naeyong {display: inline-block;}
#footer .sns a {width: 24px; display: inline-block;}
#footer .copy {text-align: center; font-size: 1.2rem; color: #777; margin-top: 20px;  font-weight: 500;}




/* title */
.body_tit {text-align: center; display: flex; flex-direction: column; gap: 12px; margin-bottom: 60px;}
.body_tit .big {font-size: 4.5rem;}
.body_tit .small {font-size: 2.2rem; color: #333;}
.body_tit .top {font-size: 1.8rem; font-weight: 700; color: #aaa;}
.body_tit .cmnt {color: #555; font-size: 1.6rem;}




/* scroll */
.btn_scroll {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 2;  text-align: center; cursor: pointer;
}
.btn_scroll img {width: 40px;}
.btn_scroll span {color: #fff; font-size: 1.4rem; line-height: 1; margin-top: 7px; display: block;}
#scroll_move {height: 90px; margin-top:-90px;}



/* main */
.main_top {
    width: 100%; height: 100vh; overflow: hidden; scroll-snap-type:mandatory; position: relative; z-index: 1;
    background: #000;
}
.main_top .main_top_bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.main_top .main_top_bg:before {
    display: block; content: ""; z-index: 1;
    position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.8);
}
.main_top .inner {position: relative; z-index: 2; height: 100%;}
.main_top .main_top_tit {position: absolute; top: 52%; left: 0; transform: translateY(-50%);}
.main_top .main_top_tit p {font-size: 4rem; line-height: 1.6; color: #fff; font-weight: 300;}
.main_top .main_top_tit p .point {display: inline; background:#0F52BA; padding: 0 5px; }



/* sub */
.sub_top {width: 100%; height: 300px; overflow: hidden; position: relative; margin-top: 90px;}
.sub_top_full {
    width: 100%; height: 100vh; overflow: hidden; scroll-snap-type:mandatory; position: relative; z-index: 1;
    background: #000;
}
.sub_top .inner, 
.sub_top_full .inner {position: relative; z-index: 2; height: 100%;}
.sub_top_bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
/* .sub_top_bg:before {
    display: block; content: ""; z-index: 1;
    position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.6);
} */
.sub_top_bg img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.sub_top_tit {position: absolute; top: 52%; left: 0; transform: translateY(-50%); color: #fff;}
.sub_top_tit .big p {font-size: 5rem; line-height: 1; margin: 20px 0; font-weight: 300;}
.sub_top_tit .small {font-size: 3.2rem; font-weight: 300; margin-top: 40px;}



.sub_box_tit {text-align: center; margin-bottom: 40px;}
.sub_box_tit p {
    font-size: 2.4rem; padding: 10px 20px; background: #0F52BA;
    border-radius: 100px; color: #fff; display: inline-block; line-height: 1;
}




/* review */
.review_wrap .review_top {display: flex; gap: 20px;}
.review_wrap .review_top .box {display: flex; flex-direction: column; gap: 20px;}
.review_wrap .review_top .box .text {
    font-size: 2rem; text-align: center; flex: 1;
    display: flex; flex-direction: column; justify-content: center;
}
.review_wrap .review_top .box .text:before {
    display: block; content: ""; width: 25px; height: 25px; margin:0 auto 10px;;
    background: url('/base/img/batwo/icon_reveiw_bubble.png') no-repeat center center / cover;
}
.review_wrap .review_top .box .img {border-radius: 10px; overflow: hidden;}
.review_wrap .review_bot {border-radius: 10px; overflow: hidden; margin-top: 50px;}




/* count */
.count_wrap {background: #f5f5f5;}
.count_wrap .count_box {max-width: 1000px; margin:0 auto; display: flex; gap: 40px;}
.count_wrap .count_box .box {width: 100%; background: #fff; border-radius: 500px; overflow: hidden; position: relative;}
.count_wrap .count_box .box:after {display: block; content: ""; padding-bottom: 100%;}
.count_wrap .count_box .box_inner {
    position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;
    display: flex; gap: 5px; flex-direction: column; align-items: center; justify-content: center;
}
.count_wrap .count_box .box_inner .icon {width: 70px;}
.count_wrap .count_box .box_inner .text1 {font-size: 1.8rem; color: #333;}
.count_wrap .count_box .box_inner .text2 {font-weight: 700; font-size:4rem; }




/* compare */
.compare_wrap .compare_box {max-width: 900px; margin:0 auto; display: flex;}
.compare_wrap .compare_box .box {width: 100%;}
.compare_wrap .compare_box .box .tit {text-align: center; margin-bottom: 20px; font-weight: 700;}
.compare_wrap .compare_box .box .tit .small {font-size: 1.8rem;}
.compare_wrap .compare_box .box .tit .big {font-size: 2.4rem; height: 40px;}
.compare_wrap .compare_box .box .info {border-radius: 20px; padding: 0 30px;}
.compare_wrap .compare_box .box .info li {
    height:110px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: 1.8rem; font-weight: 700; gap: 3px;
}
.compare_wrap .compare_box .box .info li:last-child {border-bottom: 0;}
.compare_wrap .compare_box .box .info li p {font-size: 1.6rem; font-weight: 500; color: #333;}



.compare_wrap .compare_box .box_inside .tit .small {color: #777;}
.compare_wrap .compare_box .box_inside .info {background: #ededed; position: relative;}
.compare_wrap .compare_box .box_inside .info:after {
    display: block; content: ""; width: 100%; height: 100%; z-index: -1;
    position: absolute; left: 50%; bottom: 0; background: #ededed;
}
.compare_wrap .compare_box .box_inside .info li {border-bottom: 1px dotted #ccc;}
.compare_wrap .compare_box .box_batwo .tit .small {color: #0F52BA;}
.compare_wrap .compare_box .box_batwo .tit .big {font-size: 2.8rem;}
.compare_wrap .compare_box .box_batwo .info {background: #0F52BA;}
.compare_wrap .compare_box .box_batwo .info li {color: #fff; border-bottom: 1px dotted #5786CF;}
.compare_wrap .compare_box .box_batwo .info li p {color: #C6DCFF;}



/* contact */
.contact_bnr {background: url('/base/img/batwo/bg_contact.jpg') no-repeat center center / cover;}
.contact_bnr .body_tit {color: #fff;}


.price_tab .tab_btn {display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 60px;}
.price_tab .tab_btn li {
    width: 100%; max-width: 300px; border-radius: 100px; background: #ededed; text-align: center; padding: 10px; height: 60px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.8rem; cursor: pointer;
}
.price_tab .tab_btn li.on {background: #0F52BA; color: #fff; font-weight: 700;}


.price_tab .tab_content > div {display: none;}
.price_tab .tab_content > div.on {display: flex;}


.price_tab .cont_box {display: flex; gap: 40px;}
.price_tab .cont_box .box {
    width: 100%; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid #ddd;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.price_tab .cont_box .box_tit {
    height: 160px; color: #fff; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.price_tab .cont_box .box_tit .small {font-size: 1.8rem;}
.price_tab .cont_box .box_tit .big {font-size: 2.8rem; font-weight: 700;}
.price_tab .cont_box .box_1 .box_tit{background: #77a8d6}
.price_tab .cont_box .box_2 .box_tit{background: #4981c9}
.price_tab .cont_box .box_3 .box_tit{background: #0F52BA}
.price_tab .cont_box .box_list {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
    padding: 50px 30px; width: 100%; gap: 15px; 
}
.price_tab .cont_box .box_list li {font-size: 1.8rem;}
.price_tab .cont_box .point_box {margin-top: 30px; text-align: left;}
.price_tab .cont_box .point_tit {font-size: 2rem; font-weight: 700; position: relative; padding-left: 35px;}
.price_tab .cont_box .point_tit::before {
    display: block; content: ""; 
    background-size: cover; background-repeat: no-repeat; background-position: center center;
    position: absolute; left: 0; width: 28px; height: 28px;
}
.price_tab .cont_box .point_list li {padding-left: 35px; position: relative; margin-top: 15px;}
.price_tab .cont_box .point_list li::before {
    display: block; content: ""; 
    background-size: cover; background-repeat: no-repeat; background-position: center center;
    position: absolute; left: 4px; width: 24px; height: 24px;
}
.price_tab .cont_box .box_1 .point_tit:before {background-image: url('/base/img/batwo/icon_contact_package_01.png');}
.price_tab .cont_box .box_2 .point_tit:before {background-image: url('/base/img/batwo/icon_contact_package_02.png');}
.price_tab .cont_box .box_3 .point_tit:before {background-image: url('/base/img/batwo/icon_contact_package_03.png');}
.price_tab .cont_box .box_1 .point_list li::before {background-image: url('/base/img/batwo/icon_contact_check_01.png');}
.price_tab .cont_box .box_2 .point_list li::before {background-image: url('/base/img/batwo/icon_contact_check_02.png');}
.price_tab .cont_box .box_3 .point_list li::before {background-image: url('/base/img/batwo/icon_contact_check_03.png');}





/* about */
.about_1 .graph_box {display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto;}
.about_1 .graph_box .box {display: flex; gap: 40px; align-items: center;}
.about_1 .graph_box .box > div {width: 100%;}
.about_1 .graph_box .img_box {border-radius: 10px; overflow: hidden;}
.about_1 .graph_box .text_box .tit {font-size: 2rem; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #ddd;}
.about_1 .graph_box .text_box .text {margin-top: 15px; display: flex; flex-direction: column; gap: 10px;}
.about_1 .graph_box .text_box .text li {padding-left: 15px; font-size: 1.8rem; position: relative;}
.about_1 .graph_box .text_box .text li::before {
    display: block; content: ""; width: 7px; height: 7px; background: #0F52BA;
    border-radius: 100px; position: absolute; left: 0; top: 8px;
}



.about_2 {background:#f5f5f5;}
.about_2 .cont_box {display: flex; gap: 40px;}
.about_2 .cont_box .box {display: flex; flex-direction: column; gap: 20px;}
.about_2 .cont_box .img {border-radius: 10px; overflow: hidden;}
.about_2 .cont_box .text {padding: 0 5px;}
.about_2 .cont_box .text .big {font-size: 2rem; font-weight: 700;}
.about_2 .cont_box .text .small {margin-top: 10px; font-size: 1.8rem; color: #555;}



.about_3 .cont_box {display: flex; gap: 20px; background:#f5f5f5; border-radius: 10px; padding: 40px;}
.about_3 .cont_box img {width: 100%; max-width: unset;}



/* service */
.service_1 .cont_box {display: flex; flex-direction: column; gap: 80px; max-width: 1000px; margin:0 auto;}
.service_1 .cont_box .box {display: flex; gap: 60px; align-items: center;}
.service_1 .cont_box .img_box {flex-basis: 420px; border-radius: 10px; overflow: hidden;}
.service_1 .cont_box .text_box {flex: 1;}
.service_1 .cont_box .text_box .title {font-size: 4rem; font-weight: 300;}
.service_1 .cont_box .text_box .text {margin-top:40px; }
.service_1 .cont_box .text_box .text p {margin-top: 10px; font-size: 1.8rem;}



.service_2 {background: url('/base/img/batwo/bg_service_01.jpg') no-repeat center center / cover;}
.service_2 .cont_box {display: flex; gap: 40px; max-width: 1000px; margin: 0 auto;}
.service_2 .cont_box .box {border-radius: 500px; background: #fff; position: relative; overflow: hidden; width: 100%;}
.service_2 .cont_box .box:after {
    display: block; content: ""; padding-bottom: 100%;
}
.service_2 .cont_box .box_inner {
    position: absolute; top: 50%; left: 50%; width: 100%; height:100%; transform: translate(-50%,-50%);
    display: flex; flex-direction: column; gap: 10px; justify-content: center; text-align: center; align-items: center;
}
.service_2 .cont_box .box .icon {width:70px; }
.service_2 .cont_box .box .text_box .text1 {font-size: 1.8rem; font-weight: 700; color: #0F52BA;}
.service_2 .cont_box .box .text_box .text2 {font-size: 2rem; font-weight: 700; margin-top: 3px;}



.service_3 {background: #f5f5f5;}
.service_3 .cont_box {display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto;}
.service_3 .cont_box .box {background: #fff; padding: 40px; border-radius: 10px; display: flex; gap: 40px;}
.service_3 .cont_box .box .icon {flex-basis: 70px;}
.service_3 .cont_box .box .text_box {flex: 1;}
.service_3 .cont_box .box .text_box .text1 {font-size: 2.4rem; font-weight: 700;}
.service_3 .cont_box .box .text_box .text2 {font-size: 1.8rem; color: #333; margin-top: 10px;}



.service_5 {background: #f5f5f5;}
.service_5 .cont_box {display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto;}
.service_5 .cont_box .box {padding: 50px 20px; background:#fff; border-radius: 10px; text-align: center;}
.service_5 .cont_box .box .title {font-weight: 700;}
.service_5 .cont_box .box .title .num {color: #0F52BA; font-size: 1.6rem;}
.service_5 .cont_box .box .title .big {font-size: 2.4rem;}
.service_5 .cont_box .box .text {color: #555; font-size: 1.8rem; margin-top: 20px;}



/* portfolio */
.portfolio_wrap .video_list {
    display: flex; flex-wrap: wrap; gap: 20px;



}
.portfolio_wrap .video_list li {width: calc(33.333% - 14px); display: none;}
.portfolio_wrap .video_view {cursor: pointer;}
.portfolio_wrap .video_view .video {display: none;}
.portfolio_wrap .video_view .thumb {position: relative; overflow: hidden;}
.portfolio_wrap .video_view .thumb:after {display: block; content: ""; padding-bottom: 100%;}
.portfolio_wrap .video_view .thumb img {
    position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);
    width: 100%; height: 100%; object-fit: cover;
}
.portfolio_wrap .btn_box {text-align: center;}
.portfolio_wrap .btn_more {
    font-size: 1.6rem; margin-top: 70px; padding:10px 0; border-bottom:1px solid #000;
    display: inline-block;
}


.client-image  {
width: 50%;
height: auto;
}
.client_section {
padding: 5px;
margin: 0 auto;
}
@media (max-width: 500px) {
.client-image {
width: 100%;
}
.client_section {
padding: 5px;
height: 0vh !important;
}
}