@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=Roboto:400,700|Noto+Sans+KR:300,400,700");
html,body{position:relative; width:100%; height:100%; background:#fff}
html,body,ul,ol,img,div,span,iframe,a,p{margin:0; padding:0; border:0; outline:none}
html,body,ul,ol,li,img,div,span,iframe,a,p,input,textarea,select,i{
    font-family:'Roboto','Noto Sans KR', sans-serif; font-size:14px; font-weight:400; 
    font-style:normal; word-break:keep-all; color:#444; letter-spacing:-.25px; transition:all 0.3s ease;
}
a,a:hover,a:active,a:focus{text-decoration:none}
img{border:none}
ul,ol{list-style:none}
iframe,object,video,embed{position:relative; top:0; left:0; max-width:100%}
em{font-style:normal; font-weight:700}

.wrap{position:relative; width:100%; height:100%}

#header{position:fixed; z-index:999; top:0; background:#fff; width:100%; height:100px; border-bottom:1px solid #e9e9e9; box-sizing: border-box}
#header .sidebar{position:relative; width:100%; height:100%; margin:0 auto; text-align:center}
#header .ci{position:absolute; top:25px; left:50%; margin-left:-600px}
#header .ci a{display:block; background:url(../images/bi.png) no-repeat; width:131px; height:52px; overflow:hidden}
#header .gnb{display:inline-block; margin-top:38px; height:100%; text-align:center}
#header .gnb a{position:relative; font-size:18px; color:#444; padding:10px 5px; margin:0 10px}
#header .gnb a:hover{color:#1b378f}
#header .gnb a:before{content:''; position:absolute; left:50%; bottom:-26px; background:#1b378f; width:0; height:3px; opacity:0; transition:all 0.3s ease}
#header .gnb a:hover:before{left:0; width:100%; opacity:1}
#header .gnb a.on{color:#1b378f}
#header .gnb a.on:before{left:0; width:100%; opacity:1}
#header .sns{position:absolute; top:35px; right:50%; margin-right:-600px; width:15%; text-align:right}
#header .sns a{margin:0 1px}

#header .sub_menu{position:absolute; top:100px; left:0; background:#fff; display:block; width:100%; height:0; margin:0 auto; text-align:center; overflow:hidden}
#header .sub_menu ul{position:absolute; left:50%; margin:30px 0; width:100px; display:none; opacity:0;}
#header .sub_menu ul.depth-1{margin-left:-310px}
#header .sub_menu ul.depth-2{margin-left:-205px}
#header .sub_menu ul.depth-3{margin-left:-90px}
#header .sub_menu ul.depth-4{margin-left:15px}
#header .sub_menu li{line-height:35px; font-size:14px; color:#888}
#header .sub_menu li a{font-size:14px; color:#888}
#header .sub_menu li a:hover{color:#1b378f}

#header.navbar-small{height:70px}
#header.navbar-small .ci{top:20px}
#header.navbar-small .ci a{height:30px; background-position:bottom}
#header.navbar-small .gnb{margin-top:22px}
#header.navbar-small .gnb a{font-size:16px}
#header.navbar-small .gnb a:before{bottom:-16px}
#header.navbar-small .sns{top:20px}

#header.navbar-small .sub_menu{top:70px}
#header.navbar-small .sub_menu ul.depth-1{margin-left:-292px}
#header.navbar-small .sub_menu ul.depth-2{margin-left:-195px}
#header.navbar-small .sub_menu ul.depth-3{margin-left:-90px}
#header.navbar-small .sub_menu ul.depth-4{margin-left:10px}

#header .dropdown-hover{display:inline-block; height:100%}
#header .dropdown-hover:hover .sub_menu{height:200px}
#header .dropdown-hover:hover .sub_menu ul{display:block; opacity:1}
#header .nav{display:none}

.b_menu{position:fixed; z-index:999; top:23px; right:15px; cursor:pointer; width:30px; height:30px; display:none}
.b_menu span{background:#222; display:block; width:30px; height:3px; margin-bottom:7px}
.b_menu span:nth-child(3){background:#f94c43; width:15px; margin-left:15px}

.b_menu:hover span:nth-child(3){width:30px; margin-left:0}

.page-sidebar-toggled .b_menu span:nth-child(1){
    -webkit-transform:rotate(-45deg) translateX(-7px) translateY(7px);
    -moz-transform:rotate(-45deg) translateX(-7px) translateY(7px);
    -ms-transform:rotate(-45deg) translateX(-7px) translateY(7px);
    transform:rotate(-45deg) translateX(-7px) translateY(7px);
    background:#222;
}
.page-sidebar-toggled .b_menu span:nth-child(2){width:0}
.page-sidebar-toggled .b_menu span:nth-child(3){
    width:30px; margin-left:15px;
    -webkit-transform:rotate(45deg) translateX(-18px) translateY(4px);
    -moz-transform:rotate(45deg) translateX(-18px) translateY(4px);
    -ms-transform:rotate(45deg) translateX(-18px) translateY(4px);
    transform:rotate(45deg) translateX(-18px) translateY(4px);
}


/* MAIN */
#content{position:relative; width:100%}
.mbanner{width:100%; height:800px; text-align:center}
.mbanner .swiper-slide>div{width:100%; height:800px}
.mbanner .swiper-slide .banner_1{background:url(../images/mbanner_1.jpg) no-repeat center; background-size:cover}
.mbanner .swiper-slide .banner_2{background:url(../images/mbanner_2.jpg) no-repeat center; background-size:cover}
.mbanner .swiper-slide .mban{padding-top:320px; box-sizing:border-box}
.mbanner .swiper-slide .mban h1{width:100%; font-size:60px; line-height:70px; font-weight:300; color:#fff; letter-spacing:-2px}
.mbanner .swiper-slide .mban h1 em{font-style:normal; font-weight:700}
.mbanner .swiper-slide .mban p{margin-top:30px; width:100%; font-size:25px; font-weight:300; color:#fff}
.mbanner .btn_white{
    display:inline-block; border:1px solid #fff; color:#fff; font-size:16px; text-align:center; margin-top:60px;
    width:200px; height:50px; line-height:50px; padding:0 20px; box-sizing:border-box; transition:all 0.3s ease;
}
.mbanner .btn_white:hover{background:#fff; color:#444}

.mbanner .arrow{top:50%; opacity:0.3; background-size:21px 40px; line-height:0}
.mbanner .arrow:hover{opacity:1}
.mbanner .arrow img{margin-top:30px}
.mbanner .swiper-button-prev{left:0}
.mbanner .swiper-button-next{right:0}


.title{margin-bottom:50px}
.title h4{color:#183aa4}
.title h1{color:#222; font-weight:300; letter-spacing:-2px}

/* main portfolio */
.mport{position:relative; width:100%; text-align:center; margin-top:100px; overflow:hidden}

.mport .swiper-container2{width:1200px; margin:0 auto}
.mport .swiper-slide>div{width:580px; height:100%; background:#e9e9e9}
.mport .swiper-slide a{position:relative; display:block; width:100%; height:100%}
.mport .swiper-slide a>img{display:block; width:100%; height:100%}
.mport .swiper-slide a .mport_con{position:absolute; display:block; width:100%; height:100%; overflow:hidden}
.mport .swiper-slide a .mport_con>img{display:block; width:100%; height:100%; object-fit:cover}
.mport .swiper-slide a .mport_con>div{position:absolute; width:100%; height:100%; background:rgba(0,0,0,0); opacity:0; transition:all 0.3s ease}
.mport .swiper-slide a p{color:#fff; font-size:16px; font-weight:300; margin-top:120px}
.mport .swiper-slide a h2{color:#fff; font-weight:300;}
.mport .swiper-slide a .arrow_bt{display:inline-block; margin-top:30px; border:1px solid #fff; border-radius:50%; width:60px; height:60px; text-align:center}
.mport .swiper-slide a .arrow_bt img{margin-top:17px}
.mport .swiper-slide a:hover .mport_con>div{background:rgba(0,0,0,0.7); opacity:1}

.mport .arr_bt{top:50%; opacity:0.3; background-size:21px 40px; line-height:0; width:100px; height:100px; border-radius:50%; background:#f94c43}
.mport .arr_bt:hover{opacity:1}
.mport .arr_bt img{margin-top:30px}

.mport .swiper-scrollbar{display:none}
.mport .swiper-button-prev{left:50%; margin-left:-670px; margin-top:20px}
.mport .swiper-button-next{right:50%; margin-right:-670px; margin-top:20px}


.mservice{position:relative; background:#e9ebf2; margin-top:100px; padding-top:100px; text-align:center}
.mservice .title{margin-bottom:100px}
.mservice .swipe_wrap{position:absolute; top:230px; z-index:2; width:100%; overflow:hidden}

.mproduct .swiper-wrapper{position:relative; width:1200px; margin:0 auto}
.mproduct .swiper-slide{display:flex}
.mproduct .swiper-slide .swipe_img{width:600px; margin-left:50px}
.mproduct .swiper-slide .swipe_con{width:450px; margin-top:100px; margin-left:50px; text-align:left}
.mproduct .swiper-slide .swipe_con h4{font-size:30px; margin-bottom:30px; color:#222}
.mproduct .swiper-slide .swipe_con p{font-size:16px; font-weight:300; line-height:25px; margin-bottom:30px; color:#666}
.mproduct .swiper-slide .swipe_con .bod_btn{position:absolute; bottom:100px}

.mproduct .arr_bt{top:40%; opacity:0.3; background-size:21px 40px; line-height:0; width:100px; height:100px; border-radius:50%; background:#f94c43}
.mproduct .arr_bt:hover{opacity:1}
.mproduct .arr_bt img{margin-top:30px}
.mproduct .swiper-button-prev{left:50%; margin-left:-670px; margin-top:20px}
.mproduct .swiper-button-next{right:50%; margin-right:-670px; margin-top:20px}

.mservice .swiper-scrollbar{display:none}
.mservice .service_bg{display:flex; width:1200px; height:450px; margin:0 auto}
.mservice .service_bg .area_l{width:400px; background:#1a284f}
.mservice .service_bg .area_r{width:66.66%; background:#f4f5f9}

.swipe_bg{display:flex; width:1200px; height:100px; margin:0 auto}
.swipe_bg .area_l{width:400px; background:#1a284f}
.swipe_bg .area_r{width:66.66%; background:#fff}


.mcontact{position:relative; text-align:center}
.mcontact>div{display:flex; margin:0 auto; width:1200px}
.mcontact>div>div{width:33.33%; padding:50px; text-align:left}
.mcontact h3{font-weight:700; margin-bottom:40px}
.mcontact dt{font-size:16px}
.mcontact dd{margin-left:0; font-weight:300; font-size:16px; line-height:25px}
.mcontact p{font-weight:300; font-size:16px; color:#fff}

.mcontact .paddress{background:#1a284f; color:#fff}
.mcontact .pphone{position:relative; color:#222}
.mcontact .pphone .bod_btn{position:absolute; bottom:50px}
.mcontact .pphone dd{display:block; font-size:40px; font-weight:700; color:#222; margin-top:10px}
.mcontact .pcontact{background:#f94c43; color:#fff}
.mcontact .pcontact dt{margin-bottom:6px}
.mcontact .pcontact dd a{display:block; color:#fff}


.mpress{position:relative; padding:100px 0; text-align:center}
.mpress .press_wrap{display:flex; justify-content:space-between; width:1200px; margin:0 auto}
.mpress .press_wrap>div{position:relative; width:30%; overflow:hidden}
.mpress .press_wrap a{text-align:left}
.mpress .press_wrap a div{position:relative}
.mpress .press_wrap a img{display:block; width:100%}
.mpress .press_wrap a>div:before{content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.1); box-sizing:border-box; pointer-events:none; transition:all 0.3s ease}
.mpress .press_wrap .press_img{position:absolute; width:100%; height:100%; overflow:hidden}
.mpress .press_wrap a:hover div:before{border-color:rgba(27,55,143,0.3); box-shadow:3px 6px 6px rgba(0,0,0,0.1)}

.mpress .press_wrap .press_tit{font-size:20px; margin-top:20px; text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; overflow:hidden}
.mpress .press_wrap .press_con{
    margin-top:10px; font-size:16px; line-height:25px; height:50px; font-weight:300; color:#888; overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    text-overflow:ellipsis;
}



/*
    SUB
*/


/* sub visual */
.visual{width:100%; height:550px; text-align:center}
.visual.bg1{background:url(../images/visual_1.jpg) no-repeat center; background-size:cover}
.visual.bg2{background:url(../images/visual_2.jpg) no-repeat center; background-size:cover}
.visual.bg3{background:url(../images/visual_3.jpg) no-repeat center; background-size:cover}
.visual.bg4{background:url(../images/visual_4.jpg) no-repeat center; background-size:cover}
.visual.bg5{background:url(../images/visual_5.jpg) no-repeat center; background-size:cover}
.visual h1{display:inline-block; font-size:60px; color:#fff; letter-spacing:-1.5px; margin-top:280px; transition:all 0.3s ease}


/* sub menu */
.subm{display:flex; justify-content:center; width:100%; height:70px; background:#fff; border-bottom:1px solid #e9e9e9; text-align:center}
.subm a{position:relative; display:block; color:#888; font-size:14px; text-align:center; width:150px; height:100%; line-height:70px}
.subm a:hover{color:#444; font-weight:400}
.subm a:before{content:''; position:absolute; left:50%; bottom:-1px; background:#1b378f; width:0; height:3px; opacity:0; transition:all 0.3s ease}
.subm a:hover:before{left:0; width:100%; opacity:1}
.subm a.on{color:#444; font-weight:400}
.subm a.on:before{left:0; width:100%; opacity:1}


/* company */
.greeting{position:relative; text-align:center; padding-top:100px}
.greeting .gt_con{position:relative; display:flex; width:1200px; margin:0 auto}
.greeting .gt_con .gt_info{position:relative; z-index:5; width:50%; text-align:left}
.greeting .gt_con .gt_info h1{color:#222; font-weight:300; line-height:50px; letter-spacing:-2px; margin-bottom:30px}
.greeting .gt_con .gt_info p.gt_t_1{color:#222; font-size:16px; margin-bottom:20px}
.greeting .gt_con .gt_info p.gt_t_2{color:#666; font-size:16px; font-weight:300; line-height:30px; padding-right:30px; box-sizing:border-box}

.greeting .gt_con .gt_img{position:relative; width:600px; height:600px}
.greeting .gt_con .gt_img img{position:absolute; z-index:2; display:block}
.greeting .gt_con .gt_img:before{content:''; position:absolute; top:100px; left:-500px; display:block; width:100%; height:100%; background:#f9f9f9}


.history{position:relative; margin-top:100px; text-align:center; padding-top:100px}
.history .his_con:before{content:''; position:absolute; left:50%; width:1px; height:68%; background:#e9e9e9}
.history .his_con>div{position:relative; width:1200px; margin:0 auto; margin-bottom:100px}

.history .his_con .his_img{position:relative; display:inline-block; width:460px}
.history .his_con .his_img:before{content:''; position:absolute; left:50px; bottom:-50px; width:100%; height:100%; background:#f3f5fa}
.history .his_con .his_img img{position:relative; z-index:1; display:block}
.history .his_con .his_txt{display:inline-block; vertical-align:top}
.history .his_con i{position:absolute; left:50%; margin-left:-5px; display:block; width:10px; height:10px; border-radius:50%; background:#183aa4}
.history .his_con h2{position:relative; top:-13px; color:#222; font-weight:700; margin-bottom:30px}
.history .his_con p{display:inline-block; font-size:16px; font-weight:300; color:#888; margin-bottom:25px}
.history .his_con em{display:inline-block; font-size:16px; color:#222; margin-top:5px; vertical-align:top}

.history .his_con .his_2020{text-align:left}
.history .his_con .his_2020 .his_img{position:absolute; left:0}
.history .his_con .his_2020 .his_txt{position:relative; left:50%; padding-left:30px}
.history .his_con .his_2020 em{margin-right:20px}

.history .his_con .his_2019{text-align:right}
.history .his_con .his_2019 .his_img{position:absolute; right:0; margin-right:50px}
.history .his_con .his_2019 .his_txt{position:relative; right:50%; padding-right:30px}
.history .his_con .his_2019 em{float:right; margin-left:20px}

.history .his_con .his_2017 h2{top:0; margin:25px 0 15px 0}
.history .his_con .his_2017 p{font-weight:400; color:#222; margin:0; margin-top:10px}


.client{position:relative; margin-top:100px; padding:100px 0; text-align:center; background:#f5f6fa}
.client p{font-size:16px; color:#666; margin-top:10px}
.client ul{display:table; width:1200px; margin:50px auto 0 auto}
.client li{position:relative; background:#fff; float:left; width:12.5%; height:100px; padding:15px 0; border-top:1px solid #e7e8ee; border-left:1px solid #e7e8ee; box-sizing:border-box; overflow:hidden}
.client li:nth-child(8n){border-right:1px solid #e7e8ee}
.client li:after{content:''; position:absolute; bottom:-1px; left:0; width:100%; height:1px; background:#e7e8ee}
.client li:before{content:''; position:absolute; top:0; right:-1px; width:1px; height:100%; background:#e7e8ee}
.client li img{width:100px}


.location{position:relative; text-align:center; padding:100px 0}
.location .map_wrap{width:1200px; margin:0 auto; margin-bottom:50px}
.location .map_wrap ul{text-align:left; margin-bottom:20px}
.location .map_wrap li{display:inline-block}
.location .map_wrap li.loc_tit{font-size:25px; color:#222; margin-right:20px}
.location .map_wrap li.loc_addr{font-size:16px; color:#666; vertical-align:bottom}
.location .map_con{position:relative; height:400px}
.location .map_con .map_btn{position:absolute; z-index:9; top:-50px; right:30px; background:#183aa4; width:100px; height:100px; text-align:center; color:#fff}
.location .map_con .map_btn:hover{background:#082171; top:-40px;}
.location .map_con .map_btn img{display:block; margin:20px auto 5px auto}
.location .map_api{width:100%; height:100%; overflow:hidden}


.riupack{position:relative; text-align:center; padding-top:100px}
.riupack .riu_wrap{position:relative; width:1200px; margin:0 auto ;background:#f4f6fa; text-align:left;}
.riupack .riu_wrap .riu_con{padding:100px}
.riupack .riu_wrap .riu_con h1{font-weight:300; letter-spacing:-2px; color:#222}
.riupack .riu_wrap .riu_con p{font-size:18px; font-weight:300; color:#666; margin-top:50px; line-height:30px}

.riupack .riu_wrap .riu_img{position:absolute; bottom:-100px; left:650px}
.riupack .riu_wrap .riu_img img{display:block}

.riupack .riu_panel{display:flex; justify-content:space-between; width:1200px; margin:150px auto 0 auto}
.riupack .riu_panel>div{width:32%; background:#f4f6fa; text-align:center; padding:50px; box-sizing:border-box}
.riupack .riu_panel h3{color:#222; margin:30px 0 20px 0}
.riupack .riu_panel p{font-size:16px; font-weight:300; line-height:25px; color:#666}
.riupack .riu_panel i{display:block; width:86px; height:70px; margin:0 auto}
.riupack .riu_panel i.icon_1{background:url(../images/service_icon_1.png) no-repeat}
.riupack .riu_panel i.icon_2{background:url(../images/service_icon_2.png) no-repeat}
.riupack .riu_panel i.icon_3{background:url(../images/service_icon_3.png) no-repeat}


.poss{position:relative; padding:100px 0; text-align:center}
.poss .poss_img{display:flex; justify-content:center; align-items:center}
.poss .poss_img>div{margin:0 10px}
.poss .poss_respon{display:none}

.poss-2{position:relative; padding:100px 0; text-align:center; background:#f5f6fa}
.poss-2 .poss_panel{display:flex; justify-content:space-between; width:1200px; margin:0 auto}
.poss-2 .poss_panel>div{width:32%; background:#fff; text-align:center; padding:50px; box-sizing:border-box}
.poss-2 .poss_panel h4{color:#222; margin:30px 0 20px 0}
.poss-2 .poss_panel p{font-size:16px; font-weight:300; line-height:25px; color:#666}
.poss-2 .poss_panel i{display:block; width:190px; height:205px; margin:0 auto}
.poss-2 .poss_panel i.icon_1{background:url(../images/service_icon_4.png) no-repeat center; background-size:contain}
.poss-2 .poss_panel i.icon_2{background:url(../images/service_icon_5.png) no-repeat center; background-size:contain}
.poss-2 .poss_panel i.icon_3{background:url(../images/service_icon_6.png) no-repeat center; background-size:contain}


/* 
    BOARD AREA
*/
.bod_wrap{position:relative; width:1200px; margin:0 auto; padding:70px 0 100px 0; overflow:hidden}

.bod_search{overflow:hidden}
.bod_search p{color:#666; display:inline-block; margin-top:20px}
.bod_search p span{margin-left:5px}
.bod_search .con_search{float:right}
.bod_search .con_search>div{position:relative; display:inline-block; vertical-align:middle}
.bod_search .con_search select{width:130px; height:40px; margin-right:3px}
.bod_search .con_search input{width:300px; height:40px}
.bod_search .con_search input[type=submit]{
    position:absolute; z-index:1; top:7px; right:7px; width:26px; height:26px; border:none; outline:none;
    background:url(../images/icon_search.png) no-repeat center; cursor:pointer; color:transparent;
}
.bod_search .con_search input[type=submit]:hover{background:url(../images/icon_search_on.png) no-repeat center}

.bod_btn{position:relative; width:100%; margin-top:30px}

.bod_list{padding-top:20px}
.bod_list table{width:100%; border-top:1px solid #444; border-collapse:collapse}
.bod_list table th,
.bod_list table td{border-bottom:1px solid #f0f0f0; text-align:center; height:60px; padding:10px 0; box-sizing:border-box}
.bod_list table th{background:#f9f9f9; font-size:16px; font-weight:400; color:#444}
.bod_list table td{font-size:13px; font-weight:300; color:#999}
.bod_list table a.ntit{max-width:740px; display:block; text-align:left; color:#666; font-size:14px; margin-left:10px}
.bod_list table a.ntit:hover{color:#222}
.bod_list table th:nth-child(2),
.bod_list table td:nth-child(2){display:none}
.bod_list table.nall th:nth-child(2),
.bod_list table.nall td:nth-child(2){display:table-cell}
.bod_list table tr:hover{background:#f9f9f9}


.bod_thumb{padding-top:20px}
.bod_thumb ul{width:100%; border-top:1px solid #444}
.bod_thumb li{border-bottom:1px solid #f0f0f0; display:flex; padding:30px 0}
.bod_thumb .tmb_bg{position:relative; background:url(../images/bg_none.png) no-repeat center; width:15%; height:100%; margin-right:30px; overflow:hidden}
.bod_thumb .tmb_bg:before{content:''; position:absolute; width:100%; height:100%; border:1px solid rgba(0,0,0,0.1); box-sizing:border-box}
.bod_thumb .tmb_bg img{width:100%; height:100%; object-fit:cover}
.bod_thumb .tmb_bg .thumbs{position:absolute}

.bod_thumb a{width:80%}
.bod_thumb a h5{
    color:#444; margin-bottom:10px;
    overflow:hidden; word-wrap:break-word; white-space:normal; text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}
.bod_thumb a span{color:#999; font-size:13px; font-weight:300}
.bod_thumb a p{
    font-weight:300; margin-bottom:5px;
    overflow:hidden; word-wrap:break-word; white-space:normal; text-overflow:ellipsis; color:#666;
    line-height:20px; height:40px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

.bod_mov{padding-top:20px; border-bottom:1px solid #f0f0f0}
.bod_mov ul{width:100%; border-top:1px solid #444; padding-top:30px; overflow:hidden}
.bod_mov li{float:left; width:31%; margin-bottom:30px; margin-right:3.5%}
.bod_mov li:nth-child(3n){margin-right:0}
.bod_mov li>div{display:block; width:100%; height:100%; padding:0; margin:0; overflow:hidden; text-align:left}
.bod_mov li div span{position:relative; display:block; width:100%; height:auto; background:url(../images/bg_none.png) no-repeat center; overflow:hidden}
.bod_mov li div span:before{content:''; position:absolute; z-index:1; width:100%; height:100%; border:1px solid rgba(0,0,0,0.1); box-sizing:border-box; pointer-events:none}
.bod_mov li div span .thumbs{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%}
.bod_mov li div span img{display:block; width:100%; height:100%; object-fit:cover}
.bod_mov li h5{color:#666; margin-top:10px}
.bod_mov li p{color:#999; font-size:13px; font-weight:300; margin-top:5px}

.bod_portfolio{padding-top:20px}
.bod_portfolio ul{display:flex; flex-wrap:wrap; justify-content:flex-start}
.bod_portfolio li{width:25%}
.bod_portfolio li>div{position:relative; display:block; width:100%; height:100%; overflow:hidden}
.bod_portfolio li img{display:block; width:100%; height:100%; object-fit:cover}
.bod_portfolio li a{position:absolute; display:block; width:100%; height:100%; text-align:center}
.bod_portfolio li a>div{
    flex-wrap:wrap; width:100%; overflow:hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.bod_portfolio li a>div>div{width:100%}

.bod_portfolio li a p{display:block; width:100%; color:#fff; font-size:16px; font-weight:300}
.bod_portfolio li a h3{
    display:block; color:#fff; width:100%; padding:0 10px; box-sizing:border-box; font-weight:300; 
    word-wrap:break-word; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.bod_portfolio li a .arrow_bt{display:block; margin:30px auto 0 auto; border:1px solid #fff; border-radius:50%; width:60px; height:60px; text-align:center}
.bod_portfolio li a .arrow_bt img{display:inline-block; width:auto; height:auto; margin-top:17px}
.bod_portfolio li a>div{position:absolute; width:100%; height:100%; background:rgba(0,0,0,0); opacity:0; transition:all 0.3s ease}
.bod_portfolio li a:hover>div{background:rgba(0,0,0,0.7); opacity:1}


.bod_view{padding-top:20px}
.bod_view .bod_head{display:flex; justify-content:space-between; padding:30px 0; border-bottom:1px solid #f0f0f0; border-top:1px solid #444}
.bod_view .bod_head h5{color:#444; width:80%; margin-left:30px}
.bod_view .bod_head span{color:#999; font-size:13px; font-weight:300; margin-right:30px}
.bod_view .bod_con{padding:30px; border-bottom:1px solid #f0f0f0; color:#666; font-size:16px; line-height:30px; word-break:keep-all}
.bod_view .bod_con img{display:block; margin:10px auto; width:auto; height:auto; max-width:100%}
.bod_view .bod_con i{font-weight:500; font-size:16px}
.bod_view .bod_con div{display:inline-block; color:#666; font-weight:300}
.bod_view .bod_con span{font-size:16px}
.bod_view .bod_con h1,
.bod_view .bod_con h2,
.bod_view .bod_con h3,
.bod_view .bod_con h4,
.bod_view .bod_con h5,
.bod_view .bod_con h6{color:#222}
.bod_view .bod_con>div{text-align:center}
.bod_view .bod_con li{font-size:14px; color:#666; line-height:25px}
.bod_view .bod_con em{font-weight:700; color:#444}

.bod_view .bod_con ol{margin-left:30px; list-style:disc}
.bod_view .bod_con div.tbox{display:inline-block; border-radius:3px; padding:3px 20px; font-size:16px; color:#fff; margin-bottom:10px}
.bod_view .bod_con div.tbox.bgreen{background:#92d050}
.bod_view .bod_con div.tbox.byellow{background:#ffc000}
.bod_view .bod_con table.atoz{width:100%; border-collapse:collapse; border-top:1px solid rgba(0,0,0,0.5)/*; border-bottom:1px solid #444*/}
.bod_view .bod_con table.atoz th,
.bod_view .bod_con table.atoz td{padding:3px 10px; box-sizing:border-box; border-bottom:1px solid rgba(0,0,0,0.1); font-size:14px}
.bod_view .bod_con table.atoz th{background:#e7f1fa; border-right:1px solid rgba(0,0,0,0.1)}
.bod_view .bod_con table.atoz td{border-right:1px solid rgba(0,0,0,0.1)}
.bod_view .bod_con table.atoz td img{display:inline-block; vertical-align:middle}
.bod_view .bod_con table.atoz th:last-child{border-right:none}
.bod_view .bod_con table.atoz td:last-child{border-right:none}
.bod_view .bod_con a.dblue{border:none}

.bod_view .bod_foot>div{display:flex; border-bottom:1px solid #f0f0f0; padding:30px}
.bod_view .bod_foot p{font-weight:300; color:#999; margin-right:50px}
.bod_view .bod_foot a{color:#444; width:85%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}

.bod_contact{margin-top:70px}
.bod_contact .condis{width:100%; padding:20px; border:1px solid #d9d9d9; background:#f9f9f9; color:#888; font-size:12px; font-weight:300; line-height:20px; box-sizing:border-box}
.bod_contact .chks{margin-top:10px}
.bod_contact .input_wrap{display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-end; margin-top:30px; margin-bottom:30px}
.bod_contact .input_wrap>div{width:32%; margin:10px 0}
.bod_contact .input_wrap label{display:block; margin-bottom:10px}
.bod_contact .input_wrap .txta{width:100%}


/* page */
.paging{position:relative; display:block; width:100%; text-align:center; margin-top:50px}
.paging a{
    display:inline-block; min-width:36px; height:36px; line-height:35px; border:1px solid #e9e9e9; border-radius:3px; 
    text-align:center; font-size:14px; color:#999; padding:0 5px; margin:0 1px; box-sizing:border-box;
}
.paging a.prev{background:url(../images/date_prev.gif) no-repeat center}
.paging a.next{background:url(../images/date_next.gif) no-repeat center}
.paging a:hover{border-color:#1b378f}
.paging a.on{border-color:#1b378f; background:#1b378f; color:#fff; pointer-events:none}
.paging a.off{border-color:#ddd; opacity:0.3; pointer-events:none}
.paging>div{display:inline-block}


#footer{background:#202944; padding:70px 0}
.footer{display:flex; justify-content:space-between; align-items:flex-start; width:1200px; margin:0 auto}
.footer>div{width:100%}
.footer .foot_bi{width:250px}
.footer .copy div{color:#9497a0; font-size:13px; font-weight:300; letter-spacing:0; line-height:20px}
.footer .copy span{position:relative; color:#9497a0; font-size:13px; font-weight:300; letter-spacing:0; line-height:20px; margin-right:20px}
.footer .copy span:before{content:''; position:absolute; top:2px; right:-10px; width:1px; height:12px; background:#474d62}
.footer .copy span:last-child:before{background:none}
.footer .copy .foot_br{display:none}

/* modal */
.pop-window{
    position:fixed; z-index:999; top:0; left:0; right:0; bottom:0; 
    background:rgba(0,0,0,0.5); transition:all 0.3s ease; display:none;
}
.pop-window>div{position:relative; top:40%; margin:-100px auto 0 auto; width:500px; padding:30px; background:#fff; box-sizing:border-box}

.pop-window .p_close{position:absolute; top:10px; right:10px}
.pop-window .p_close a{display:block; width:26px; height:26px; margin:0; padding:0}

.pop-window .pop_icon{display:block; width:80px; height:80px; margin:0 auto 10px auto}
.pop-window .pop_icon.chk{background:url(../images/pop_chk.png) no-repeat center}
.pop-window .pop_icon.error{background:url(../images/image/pop_error.png) no-repeat center}
.pop-window .pop_icon.alert{background:url(../images/pop_alert.png) no-repeat center}

.pop-window .pop_con{margin-bottom:10px}
.pop-window .pop_con h4{font-size:22px; letter-spacing:-1px;}
.pop-window a.modal_b{display:inline-block; background:#1c2e64; margin:0 auto; width:100%; padding:15px 20px; margin-top:20px; color:#fff; box-sizing: border-box; cursor:pointer}
.pop-window a.modal_b:hover{background:#364f98; transition:all 0.3s ease}


/* 
    elements ----------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* Typo Elements*/
.twhite{color:#fff}
.tred{color:#f5392a}
.tblue{color:#1dbfd7}
.tnone{color:transparent}
h1,h2,h3,h4,h5,h6{font-style:normal; font-weight:400; padding:0; margin:0}
h1{font-size:40px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:16px}
h6{font-size:14px}
.tal{text-align:left}
.tar{text-align:right}
.tac{text-align:center}
.fl{float:left}
.fr{float:right}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}

.pt100{padding-top:100px}
.pb100{padding-bottom:100px}

.dp_none{display:none}

/* placeholder color */
::-webkit-input-placeholder{color:#999; font-size:14px}
:-ms-input-placeholder{color:#999; font-size:14px}

/* scroll top btn */
/*
.btn_contact{
    background:url(../images/icon_contact_bg.png) no-repeat center; opacity:0;
    position:fixed; z-index:990; bottom:100px; right:10px;  color:#fff; width:40px; height:52px;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: bounce;
}
.btn_contact .contact{position:absolute; right:0; height:41px; width:40px; background:#1dbfd7; border-radius:7px; transition:all 0.2s ease; overflow:hidden}
.btn_contact .contact .cont_icon{position:absolute; top:9px; left:10px; width:22px; height:21px}
.btn_contact .contact .cont_txt{opacity:0; text-align:left; margin-top:5px; margin-left:40px; transition:all 0.5s ease}
.btn_contact .contact div p{color:#fff; font-size:13px}
.btn_contact .contact div h6{color:#fff; font-weight:700}

.btn_contact:hover{animation:none}
.btn_contact .contact:hover{width:130px}
.btn_contact .contact:hover .cont_txt{opacity:1}

#header.navbar-small .btn_contact{opacity:1; transition: all 0.3s ease; pointer-events:visible; bottom:10px}
*/


/* form elements */
input[type=text],select,textarea{display:block; width:100%; font-weight:400; border-radius:0; box-sizing:border-box; outline:none; vertical-align:middle;
    /*-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;*/
}
select::-ms-expand{display:none}
select{position:relative; border:1px solid #d9d9d9; height:40px; padding:10px; padding-left:5px; transition:all 0.2s ease}
select:focus{border:1px solid #1b378f; background:#f5f6fa}

input{position:relative; display:block; border:1px solid #d9d9d9; height:40px; padding:10px; transition:all 0.3s ease}
input:focus{border:1px solid #1b378f; background:#f5f6fa}
textarea{position:relative; width:100%; height:150px; border:1px solid #d9d9d9; padding:10px; transition:all 0.3s ease}
textarea:focus{border:1px solid #1b378f; background:#f5f6fa}


/* btn elements */
.btn_area{clear:both; display:block; width:100%; text-align:center; padding:10px 0}
.btn{
    position:relative; z-index:9; background:transparent; display:inline-block; border:1px solid #444; text-align:left; color:#444; outline:none;
    min-width:200px; height:50px; line-height:50px; padding:0 50px 0 20px; box-sizing:border-box; cursor:pointer; transition:all 0.3s ease
}
button.btn{}
.btn div{position:absolute; top:17px; right:20px; display:block; width:12px; height:12px; text-align:center}
.btn span{position:absolute; top:6px; display:block; width:11px; height:1px; background:#222}
.btn span:last-child{transform:rotate(90deg)}

.btn:before{content:''; position:absolute; z-index:-1; top:0; right:0; width:0; height:100%; background:#1b378f; transition:width 0.3s}
.btn:hover:before{width:100%; left:0}
.btn:hover{border-color:#1b378f; color:#fff}
.btn:hover span{background:#fff}
.btn:hover .pluarotate{
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: plusRotate;
}

.btn_w{background:none; border:1px solid #fff; color:#fff}
.btn_w span{background:#fff}
.btn_w:before{content:''; position:absolute; z-index:-1; top:0; right:0; width:0; height:100%; background:#fff; transition:width 0.3s}
.btn_w:hover:before{width:100%; left:0}
.btn_w:hover{border-color:#fff; color:#222}
.btn_w:hover span{background:#222}



/* checkbox Setting */
.checkbox{position:relative}
.checkbox input{display:none}
.checkbox label{display:inline-block; padding-left:25px; min-height:18px; margin-bottom:0; cursor:pointer; font-size:14px; color:#888}
.checkbox label:before {content: url('../images/icon_chk.png'); position:absolute; top:2px; left:0; width:18px; height:18px; background:#e9e9e9; border:1px solid #d0d0d0}
.checkbox input:checked + label:after {position:absolute; top:0; left:0}
.checkbox input:checked + label:before {background:#1c2e64; border-color:#1c2e64}
.checkbox input:checked + label{color:#222; font-weight:400}

.checkbox.org input:checked + label:before {background: #ed6d00}

.checkbox.blue label{color:rgba(255,255,255,0.7)}
.checkbox.blue label:before{background:#4d5a81}
.checkbox.blue input:checked + label{color:#fff}
.checkbox.blue input:checked + label:before{background:#ff7f18}


/*  animated */
.animated {
    -webkit-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -ms-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -ms-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.bounce {
  -webkit-animation-name: bounce;
  -ms-animation-name: bounce;
  animation-name: bounce;
}
.plusRotate {
    -webkit-animation-name: plusRotate;
    -ms-animation-name: plusRotate;
    animation-name: plusRotate;
}
.img_ani_2 {
    animation-duration: 1s;
    -webkit-animation-name: img_ani_2;
    -ms-animation-name: img_ani_2;
    animation-name: img_ani_2;
}
.phone {
    animation-duration: 1.5s;
    -webkit-animation-name: phone;
    -ms-animation-name: phone;
    animation-name: phone;
}

.delay_1{animation-delay:0.1s}
.delay_2{animation-delay:0.2s}
.delay_3{animation-delay:0.3s}
.delay_4{animation-delay:0.4s}
.delay_5{animation-delay:0.5s}
.delay_6{animation-delay:0.6s}
.delay_7{animation-delay:0.7s}
.delay_8{animation-delay:0.8s}
.delay_9{animation-delay:0.9s}
.delay_0{animation-delay:1s}
.delay_14{animation-delay:1.4s}
.delay_16{animation-delay:1.6s}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-90px);
        -ms-transform: translateX(-90px);
        transform: translateX(-90px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(90px);
        -ms-transform: translateX(90px);
        transform: translateX(90px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(90px);
        -ms-transform: translateY(90px);
        transform: translateY(90px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-90px);
        -ms-transform: translateY(-90px);
        transform: translateY(-90px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes plusRotate {
    0% {
        transform-origin: center;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        transform-origin: center;
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes img_ani_2 {
    0% {
        transform-origin: center;
        -webkit-transform: translateX(-550px) translateY(550px);
        -ms-transform: translateX(-550px) translateY(550px);
        transform: translateX(-550px) translateY(550px);
    }
    100% {
        transform-origin: center;
        -webkit-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
    }
}
@keyframes phone {
    0% {
        transform-origin: center; opacity:0;
        -webkit-transform: translateX(300px) translateY(300px);
        -ms-transform: translateX(300px) translateY(300px);
        transform: translateX(300px) translateY(300px);
    }
    100% {
        transform-origin: center; opacity:1;
        -webkit-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
    }
}