body {font-family:"Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; word-break: keep-all;}




.main-menu a {font-size:16px; color:#f5f5f5; font-weight: 400;}
.main-menu a:hover, .main-menu a:focus {font-size:16px; color:#f3c915;}
.main-menu .nav-item {padding: 0.5em 1em;}

@media screen and (min-width:768px) and (max-width:1023px){
    .header-area{
        position:fixed;
        z-index:995;
        top:0;
        left:0;
        width:100%;
        transition-duration: 500ms;
        background-color:transparent;        
        padding:15px 0 !important;
        height:80px;
    }

    .main-menu a:hover, .main-menu a:focus {
        font-size:12px !important;
        color:#f3c915;
    }

    .main-menu .nav-item{
        padding:0.5em 0.6em;
    }
    .main-menu a{
        color:#f5f5f5;
        font-weight:400;
        font-size:12px !important;
    }
    .lang{
        z-index:99;
        right:126px;
        top:50%;
        margin-top:10px;
        border:1px solid #fff;
        box-sizing:border-box;
        padding:0 14px;
        margin-left:0px !important;
        background-color:#2b2f38;
    }

}



.main-menu .dropdown-menu {background-color:#252525; }
.navbar-nav.main-menu .dropdown-menu {position: absolute; transform: translate3d(-16px, 48px, 0px); top: 0px; left: 0px; will-change: transform;}
.menu-button-box {display: none;}


/*btn CSS*/
.btns {display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 0.9rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-bottom:10px;}
.biz-btn { position: relative; z-index: 1; min-width: 140px; height: 50px; border: 1px solid #2f2f2f; text-transform: uppercase; color: #2f2f2f;letter-spacing: 1px;border-radius: 0; line-height: 50px; padding: 0;background-color: #ffffff;}
.biz-btn:hover, .biz-btn:focus { background-color: #2f2f2f; color: #ffffff;}


.sonar-btn-circle {
    position: relative;
    z-index: 1;
    min-width: 50px;
    height: 50px;
    border: 1px solid #2f2f2f;
	border-radius:50%;
    text-transform: uppercase;
    color: #2f2f2f;
    letter-spacing: 1px;
    line-height: 50px;
	font-size:1.1rem;
    padding-left: 3px;
    background-color: #ffffff;
}
.sonar-btn-circle.white-btn {
    border-color: #ffffff;
    color: #ffffff;
    background-color: transparent;
}
.sonar-btn-circle.white-btn:hover, .sonar-btn-circle.white-btn:focus {
    background-color: #ffffff;
    color: #2f2f2f;
}



.thumb {overflow: hidden;}
.thumb img {-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
.thumb:hover img { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2);}






.test-center { text-align:center !important}
.text-white { color:#FFF !important}

.d_sns { font-size:26px; margin:18px 0; position:absolute; bottom:0; right:20px;}
.d_sns a { color:#fff;}
.d_sns a:hover { color: #FF0;}
.d_sns .fa { padding:0 10px;}

.d_sns_eb { font-size:26px; margin:18px 0; position:absolute; top:20px; right:20px;}
.d_sns_eb a { color:#232323;}
.d_sns_eb a:hover { color: #F30;}
.d_sns_eb .fa { padding:0 10px;}





.i_step p { margin-bottom:8px; padding: 20px; padding-left:50px;      border: 1px solid #ddd;    display: inline-block; width:32%; height:80px; line-height:22px; vertical-align:top; position:relative;}
.i_step .no { background-color:#000; width:30px; height:30px; position:absolute; top:0; left:0; color:#fff; text-align:center;}

.i_step2 p { margin-bottom:8px; padding: 20px; padding-left:50px;      border: 1px solid #ddd;    display: inline-block; width:33%; height:80px; line-height:22px; vertical-align:top; position:relative;}
.i_step2 .no { background-color:#000; width:30px; height:30px; position:absolute; top:0; left:0; color:#fff; text-align:center;}



.section-heading .line_w {
    width: 100px;
    height: 1px;
    background-color: #fff;
    margin-bottom: 30px;
    display: block;
    margin: 0 auto 30px auto;
}

hr.break {border: 0;border-top: 1px solid #e5e5e5; display: block; margin:0}
.pin { position:absolute; top:30px; left:-15px}
.p_close {background-color:#232323; color:#fff; padding:15px; position:absolute; top:0; right:0; font-size:0.8rem}

.more_btns {position:absolute; right:0;}


.table_01 { width:100%; border-collapse:collapse; border-bottom:1px solid  #000; border-top:2px solid #000; letter-spacing:1px; margin-bottom:30px; font-size:15px;}
.table_01 th { margin:0; padding:20px; font-size:16px; font-weight:100; border-left:0;  color:#000;} 
.table_01 td { margin:0; padding:14px}
.table_01 th{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:0px solid #ddd; border-right:0px solid #ddd;}
.table_01 td{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:0px solid #ddd; border-right:0px solid #ddd;}
.table_01 .td_w { width:15%}

.table_02 { width:100%; border-collapse:collapse; border-bottom:1px solid  #000; border-top:2px solid #000; letter-spacing:1px; margin-bottom:30px; font-size:15px;}
.table_02 th { margin:0; padding:20px; font-size:16px; font-weight:100; border-left:0;  color:#000;} 
.table_02 td { margin:0; padding:14px}
.table_02 th{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table_02 td{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table_02 .td_w { width:15%}

.table_03 { width:100%; border-collapse:collapse; border-bottom:1px solid  #000; border-top:2px solid #000; letter-spacing:1px; margin-bottom:30px; font-size:14px;}
.table_03 th { margin:0; padding:20px; font-size:16px; font-weight:100; border-left:0;  color:#000;} 
.table_03 td { margin:0; padding:6px}
.table_03 th{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table_03 td{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table_03 .td_w { width:15%}

.table_04 { width:100%; border-collapse:collapse; border-bottom:1px solid  #000; border-top:2px solid #000; letter-spacing:1px; margin-bottom:30px; font-size:14px;}
.table_04 th { margin:0; padding:20px; font-size:16px; font-weight:100; border-left:0;  color:#000;} 
.table_04 td { margin:0; padding:6px}
.table_04 th{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:0px solid #ddd; border-right:0px solid #ddd;}
.table_04 td{border-collapse:collapse; border-bottom:0px solid #ddd; border-top:1px solid #ddd; border-left:0px solid #ddd; border-right:0px solid #ddd;}
.table_04 .td_w { width:15%}



.text_boxs {padding:10px; background-color:#fff; margin:5px; border:1px solid #ddd; display: inline-block;}
.text_boxs_r {background-color:#232323; padding:20px; font-size:26px; width:100px;height:100px; border-radius:50%; font-weight:bold; color:#fff; text-align:center; margin:10px auto 20px auto !important}
.text_boxs_x {background-color:#232323; padding:10px; font-size:26px; border-radius:10px; font-weight:bold; color:#fff; text-align:center; margin:10px auto 20px auto !important}
.text_boxs_w { border:1px solid #ddd; width:200px; height:200px; padding:25px; font-size:26px; border-radius:50%; text-align:center;}
.text_boxs_b { border:1px solid #ddd;  padding:25px; font-size:26px; text-align:center;}


.section {
    /* padding: 6rem 1.25rem; */
    padding:6rem 0;

}
.background-parallax-container {
    position: relative;
    overflow: hidden;
}

.col_p_0{
    padding:0 !important;
}

.background-transparent { background-color:transparent !important;}
.background-parallax {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -2;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*event-single-roll*/
.single-event-area {position: relative; z-index: 1; padding: 0; margin: 0;}
.single-event-area .owl-dots { position: absolute; bottom: -10px; left:20px; z-index: 10;}
.single-event-area .owl-dots .owl-dot { width: 8px; height: 8px; border: 1px solid #6a6a67; border-radius: 50%; margin:0 5px; display: inline-block; }
.single-event-area .owl-dots .owl-dot.active {border-color: #232323; background-color: #232323; }

.eu-event-area {position: relative; z-index: 1; padding: 0; margin: 0;}
.eu-event-area .owl-dots { position: absolute; top: 20px; right:20px; z-index: 10;}
.eu-event-area .owl-dots .owl-dot { width: 8px; height: 8px; border: 1px solid #6a6a67; border-radius: 50%; margin:0 5px; display: inline-block; }
.eu-event-area .owl-dots .owl-dot.active {border-color: #232323; background-color: #232323; }










.y_line { padding:0 20px; border-right:1px solid #ddd;}
.eb_txt {font-size:80px}
.padding-20 { padding:20px !important} 










.lang {z-index: 99;right: 126px;top: 50%;margin-top: 10px;border: 1px solid #fff;box-sizing:border-box;padding: 0 14px; margin-left:30px; background-color:#2b2f38;}
.lang a{display: block;}
.lang a span{position: relative;display: block;padding-right: 16px;line-height: 32px;font-size: 13px;color: #fff;padding-left: 14px}
.lang > a span em{width: 5px;height: 5px;background-repeat: no-repeat;background-image: url("../img/bg-img/lang_arrow.png");position: absolute;right: 0;top: 50%;margin-top: -2.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;}
.lang > a.on span em {transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.lang ul{height: 0;overflow: hidden;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;}
.lang > a.on + ul {height: 100px}
.lang ul li a span {background: none;}

/*.active  .lang {border-color: #000;background-color: #fff;} 
.active.fff  .lang {border-color: #000;background-color: transparent;} 
.active  .lang a span {color: #000;}
.active  .lang > a span em {background-image: url(../../images/main/lang_arrow_c.png);}
.active  .lang > a span {background-image: url(../../images/main/lang_icon_c.png);}
.active.fff  .lang {border-color: #fff;} 
.active.fff  .lang a span {color: #fff;}
.active.fff  .lang > a span em {background-image: url(../img/bg-img/lang_arrow.png);}
.active.fff  .lang > a span {background-image: url(../../images/main/lang_icon.png);}
*/







@media all and (min-width:1200px){
.container {
    max-width: 1280px;
}
}


@media only screen and (max-width: 767px) {
  .main-menu-box {display: none;}
  .menu-button-box {display: block; padding-top:5px;}
}

.head-bg {background-color:#06C;height:300px;position: relative;}
.head-bg h1 {position:absolute;left:50%;top:50%;font-size:30px;	transform:translate(-50%,-50%);	font-weight:bold;	color:#fff;}
.sonarNav{ width:100%;}
.mainMenu .nav-link {font-size: 1em;	text-align:left;	line-height:1.8em;	border-bottom:1px solid #333}
.mainMenu .nav-link .fax { position:absolute; top:20px; right:0; }


@media only screen and (max-width: 767px) {
.head-bg {
	background-color:#06C;height:200px;
}
.head-bg h1 {
	position:absolute;
	left:50%;
	top:50%;
	font-size:20px;
	transform:translate(-50%,-50%);
	font-weight:bold;
	color:#fff;
}
}
@media only screen and (max-width: 767px) {
	
.i_step p { width:49%}
.i_step2 p { width:49%}
.eb_txt {font-size:60px}
.pin { position:absolute; top:0px; left:-15px}


}




/* :: board Area CSS */
.bov-top-area {background-color: #2b2f38; position: relative; z-index: 1; overflow: hidden;  -ms-flex-wrap: wrap;  flex-wrap: wrap; }
.bov-top-area .backEnd-content .dots { position: absolute; right: -200px; top: 50%; z-index: -2; opacity: 0.1; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.bov-top-area .hero-thumbnail, .bov-top-area .hero-content { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; min-width: 50%; position: relative; z-index: 1; }
.bov-top-area .hero-content { height: 500px; padding: 100px 0 50px 0; }
.bov-top-area .hero-content .line { width: 100px; height: 1px; background-color: #ffffff; margin-bottom: 30px; display: block; }
.bov-top-area .hero-content h2 { color: #ffffff; font-size: 48px; margin-bottom: 25px; }
.bov-top-area .hero-content p {color: #ffffff;margin-bottom: 0px; }
.bov-top-area .hero-content.aboutUs { height: 1100px; }
.bov-top-area .hero-thumbnail.aboutUs::before { position: absolute; width: 100%; height: 100px; bottom: 0; left: 0; background-color: #ffffff; content: ''; z-index: 1; }

@media only screen and (max-width: 767px) {
.bov-top-area .hero-thumbnail, .bov-top-area .hero-content { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; min-width: 100%; } 
.bov-top-area .hero-content h2 {font-size: 30px; } 
.bov-top-area .hero-content.aboutUs {height: auto; } 
.bov-top-area .hero-content {height: auto;} 
.bov-top-area .hero-thumbnail.aboutUs::before {display: none; } 
.bov-top-area .hero-thumbnail {height: 400px; display:none; }
/*.bov-top-area .hero-content { padding:100px 0 50px 0;} */

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bov-top-area .hero-content h2 {font-size: 40px; } 
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.bov-top-area .hero-content h2 {font-size: 30px; } 
}


/* :: eb5-projects-area CSS */
.eb5-projact-menu { margin-bottom:20px; padding:20px 0; border-top:1px solid #232323; border-bottom:1px solid #232323; }
.eb5-projact-menu .btn { padding: 5px 0; border: none; border-bottom: 2px solid; border-color: transparent; background-color: transparent;  border-radius: 0; margin:10px; }
.eb5-projact-menu .btn.active { border-color: #000; }
.eb5-projact-menu .btn:hover { box-shadow: none; color:#F33; }
.eb5-projact-menu .btn:focus { box-shadow: none;}
/*.eb5-projact-menu .btn:hover, .eb5-projact-menu .btn:focus { box-shadow: none; color:#F33; }*/

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.eb5-projact-menu .btn { margin:0 10px;} 
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.eb5-projact-menu .btn { margin:0 5px; font-size:14px;} 
}
@media only screen and (max-width: 767px) {
.eb5-projact-menu .btn { margin:0 5px; font-size:14px;} 
.eb5-projact-menu { width: 100%; bottom: 20px;} 
}

.eb5-projects-area { position: relative; z-index: 1; padding:0; }
.eb5-projects-area .single_gallery_item { position: relative; z-index: 1;  margin-bottom: 50px; }
.eb5-projects-area .single_gallery_item .gallery-content { padding-top: 0px; }
.eb5-projects-area .single_gallery_item .gallery-content h5 { margin-bottom: 10px; font-size:20px }
.eb5-projects-area .single_gallery_item .gallery-content p { margin-bottom: 0; }
.sonar-portfolio-menu { position: absolute; bottom: 40px; right: 0; width: 50%; z-index: 100; }
.sonar-portfolio-menu .btn { padding: 5px 0; border: none; border-bottom: 2px solid; border-color: transparent; background-color: transparent; color: #ffffff; border-radius: 0; margin: 0 20px; }
.sonar-portfolio-menu .btn.active { border-color: #ffffff; }
.sonar-portfolio-menu .btn:hover, .sonar-portfolio-menu .btn:focus { box-shadow: none; }



@media only screen and (max-width: 767px) {
.eb5-projects-area .single_gallery_item .gallery-content h5 { font-size: 20px; } 
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-portfolio-menu .btn { margin: 0 10px; } 
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-portfolio-menu .btn { margin: 0 5px; font-size: 14px; } 
}
@media only screen and (max-width: 767px) {
.sonar-portfolio-menu { width: 100%; bottom: 20px; } 
.sonar-portfolio-menu .btn { margin: 0 5px; font-size: 14px; } 
.y_line { padding:0 20px; border-right:0px solid #ddd;}
.d_sns_eb { position:relative; padding-left:10px; margin-top:0;}
}
/* :: eb5-projects-area CSS end */


.tl_business_now_box_warp { max-width:1280px; margin:0 auto; padding:15px; padding-bottom:100px; clear:both}
.tl_business_now_box_warp p { text-align:center; padding:20px 0; font-size:15px; color:#333;}
.tl_business_now_box_warp h2 { font-size:50px; font-weight:bold; text-align:center; padding-top:55px;}
@media only screen and (max-width: 767px) {
.tl_business_now_box_warp { padding:15px;}	
	
}


/*팝업*/


.bp_area { background-color:#232323;position:relative;width:500px; margin:auto;}
.bp_area .bp_tit h5 { padding:20px 30px; font-size:22px; margin:0; color:#fff !important } 
.bp_area .bp_wrap {  padding:30px; font-size:14px !important}
.bp_area .bp_wrap .txt {display: block;margin: 0 auto 10px;background: #fff;border: 0;font-size: 15px;color: #a9a9a9;font-weight: normal;line-height: 20px;}
.bp_area .bp_wrap .submit {display: block;margin: 0 auto;border: 0;width: 100%;background: #ed3e49;height: 45px;font-size: 17px;color: #fff;font-weight: normal;}

.bp_area .bp_wrap input.txt {width: 100%;height: 45px;text-indent: 10px;}
.bp_area .bp_wrap textarea.txt {width: 100%;height: 90px;padding: 10px;}

.mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("/theme/okdaum/img/bg-img/btn_close.png") no-repeat center center;
 -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; }
 
.mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; }
button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }

@media only screen and (max-width: 767px) {
.bp_area { width:360px;}	
}


/*게시판*/

.iframe100 {   display: block;   border: none;   height: 100vh;   width: 100vw; }

