/* ::::::::::::::::::::::: Common :::::::::::::::::::::::: */

.history_bar {
    position:absolute;
    left:50%; transform: translate(-50%,0);
    width:2px; 
    background-color:grey;
}


.topbntxt{
	text-align: center;
	font-size: 15px;
}



/* ::::::::::::::::::::::: about/intro.php :::::::::::::::::::::::: */
.about_bg{
    background:url(/img/main/slider2_bg.jpg);
    background-position: center;
    background-size: cover;
    width:100%;
    height:50vw; max-height:300px; min-height:200px;
    position: relative;
}

.about_bg h3 {
    position: absolute;
	text-align: center;
    top:50%;
    margin-top:-40px;
    left:50%;
    margin-left:-90px;
    font-size:45px;
    color: #fff
}

.ceo_img_wrap {
    width: 100%
}

.ceo_back {
    
    background: rgb(232, 236, 245);
    
}

.ceo_back img {
    margin-right: 30px;
    width:100vn
}
.ceo_text_wrap {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    padding: 2% 1%
}

.vertical_bar {
    position:absolute;
    margin-top:40px;
    margin-left:-150px;
    width:220px;
    height:20px;
    background-color:#0056C6;
}

.left_bar {
    width:10px;
    height:150px;
    background-color:#0056C6;
}

.left_bar.narrow {
    width:1px;
}


.intro_about {
    position:relative;
    width:100%;
}
    .wrap_message {
        display:flex;
        position:relative;
        margin:80px 0 0px;
    }
    .wrap_message.style_3 {
        margin:0 0px 100px 50px;
    }
   
    .message_txt {
       margin: 0 auto 50px;
        padding-left:20px;
        font-size:25px !important;
        
    }

        .message_txt h2 {
            font-size:1.5em;
            line-height:1.1em !important;
            text-align: center;
			font-weight: bold;
        }
        .message_txt p {
            font-size:0.5em;
        }

        .intro_big{
            font-size: 30px;
			color: #193d6c;
			font-weight: bold;
			
        }
    .wrap_intro {
        position:relative;
        width:1200px;
        margin:0 auto;
    }

    .wrap_nav {
        position:relative;
        margin-top:30px;
        text-align:center;
    }
        .wrap_nav h3 {
            display:inline-block;
            position:relative;
            font-size:17px;
            font-weight:bold;
        }

        .wrap_nav h3::before {
            content:'';
            position:absolute;
            bottom:10px; left:-120px;
            width:100px; height:1px;
            background-color:#00337A;
        }
        .wrap_nav h3::after {
            content:'';
            position:absolute;
            bottom:10px; right:-120px;
            width:100px; height:1px;
            background-color:#00337A;
        }
        ul.wrap_navi_menu {
            margin-top:20px;
        }
        ul.wrap_navi_menu li {
            display:inline-block;
            margin:0 5px;
            font-size:15px;
            padding: 0 20px;
			
        }
.wrap_navi_menu li a{
	transition: all 0.4s;	
}
        ul.wrap_navi_menu li a:hover {
            font-weight:bold;
            border-bottom: #0056C6 solid 2px;
        }


    .intro_txt {
        width:90%;
        font-size:15px;
        color: #666;
        margin: 0 auto
    }
        .intro_txt h3 {
            margin-top:10px;
        }

        .intro_txt.employee p {
            font-size:14px;
        }

    .wrap_ceo {
        display:flex;
        justify-content: flex-end;
    }

    .txt_ceo {
        position:relative;
        display:inline-block;
        width:420px;
        margin-left:auto;
        padding-bottom:5px;
        font-size:20px;
    }
        .txt_ceo span {
            font-size:2em;
            margin-left:10px;
        }
      


    .wrap_profile {
        position:relative;
        width:1200px;
        margin:150px auto;
    }


    .table_profile {
        text-align:center;
    }
        .table_profile table {
            margin:10px auto 0 auto;
            width:90%;
            border-collapse: collapse;
            font-size:14px;
            border:1px solid red;
        }
            .table_profile table td {
                padding:15px 0;
                border: 1px solid #eee;
            }
            .table_tit {
                width:30%;
                background-color:#f9fafc;
            }
            .table_con {
                width:70%;
            }

            .border_color{
                border-top: #0056C6 solid 2px
            }

    @media only screen and (max-width: 1200px) {
        .wrap_intro {
            width:100%;
        }

        .wrap_profile {
            width:100%;
        }

        .intro_txt {
            font-size:15px;
            margin-top: 20px;
            padding: 0 20px;
        }
            
        .ceo_back img {
            margin-right: 10px;
            width:100vn
        }

    }    
    @media only screen and (max-width: 1100px) {
        .ceo_text_wrap {
            width: 100%;
            padding:0
        }
        
        
    }   

    @media only screen and (max-width: 1000px) {
        .ceo_text_wrap {
            flex-direction: column;
            width: 100%
        }
        .ceo_text_wrap img {
            width: 50%;
            margin: 0 auto
        }
        
    }   

    @media only screen and (max-width: 900px) {
        .txt_ceo {
            width:380px;
            font-size:18px;
        }

        .table_profile table {
            width:90%;
            font-size:11px;
        }
        
        .intro_txt {
            font-size:15px;
            margin-top: 20px;
            padding: 0 20px;
        }
    }   
    
    @media only screen and (max-width: 500px) {
		
		    ul.wrap_navi_menu li {
            margin:0px;
            padding: 0 10px;
			
        }
		
		.about_bg h3 {font-size:35px;}
		.intro_big{
            font-size: 20px;
			color: #0056C6;
			font-weight: bold;
		}
		
        .ceo_back img {
            display: none
        }
        .left_bar {
            display:none;
        }

        .intro_txt {
            margin-top:20px;
            padding:0 20px;
        }
        .txt_ceo {
			text-align: right;
            width:330px;
            font-size:15px;
            margin:50px auto 0 auto;
        }
        .intro_txt {
            font-size:15px;
            
        }
        .wrap_message {
            position:relative;
            width:100%;
            margin:50px auto 0;
        }
        .wrap_message.style_3 {
            margin:50px auto;
        }
            .message_txt {
                position:relative;
                margin:0 auto;
                padding: 0;
            }
                .message_txt h2 {
                    font-size:7vw;
                    text-align:center;
                }
                .message_txt p {
                    margin:10px 0;
                    font-size:4vw;
                }
       
            .table_profile table {
                margin-top:0px;
            }

            .tit_bar_mb {
                margin:0px auto 15px auto;
                width:200px;
                height:5px;
                background-color:#0056C6;
            }

            .table_profile table td {
                padding:10px 5px;
            }

            .vertical_bar {
                display:none;
            }
    }    




/* ::::::::::::::::::::::: about/history.php :::::::::::::::::::::::: */

    .extra_margin {
        margin:100px 0;
    }

    .history {
        position:relative;
        width:1200px; 
        margin:0 auto;
    }

    .wrap_history {
        position:relative;
        width:1200px;
        margin:50px auto 0 auto;
        overflow:hidden;
		color: #666;
    }  
    

        .bar_dot {
            position:absolute;
            top:0;
            left:-2px;
            width:15px; height:15px;
            background-color:black;
            border-radius:100%;
        }

        .history_con {
            width:50%;
            padding:40px 0;
            font-size:15px;
        }
            .history_con h1 {
                position:relative;
                display:inline-block;
                font-size:2em;   
                margin-bottom:15px;
            }
            
                .history_dot {
                    position:absolute;
                    width:100px; height:100px;
                    border-radius:100%;
                    color:#fff;
                    text-align: center;
                    line-height:100px;
                    background:linear-gradient(to right bottom,#0056C6,#194572);
                }
                .history_dot.left {
                    top:5px;
                    right:-120px;
                }
                .history_dot.right {
                    top:5px;
                    left:-120px;
                }
            .history_con p {
                font-size:0.9em;
                line-height:2em;
            }
        .history_con.txt_right {
            text-align:right;
            padding-right:70px;
        }
        .history_con.txt_left {
            text-align:left;
            padding-left:70px;
        }
        .history_con.block_right {
            margin-left:auto;
        }



        @media only screen and (max-width: 1200px) {
            
            .history {
                width:100%;
            }

                .wrap_history {
                    width:100%;
                    padding:0 10px;
                }


        }



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

            .wrap_history  {
                margin:50px 0;
            }
            
            .history_con {
                padding:10px 0;
            }

            .history_con h1 {
                position:relative;
                display:inline-block;
                font-size:1.5em;   
                margin-bottom:15px;
            }

            .history_con p {
                font-size:0.7em;
            }
            

        }



/* ::::::::::::::::::::::: about/certificate.php :::::::::::::::::::::::: */

    section.certificate {
        width:1200px;
        margin:0px auto;
    }

    .row_certi {
        display:flex;
        justify-content: space-between;
        margin:50px auto;
        width: 900px;
        border: 1px solid #ebebeb
    }
        .list_certi {
            display:flex;
            flex-direction:column;
            align-items: center;
            padding:20px;
            width:30%;
			background: #fff;
            
        }

.list_certi h3{
	color:#00337A;
	font-size: 17px;
}
        .certi_line {
            margin:30px 0;
            width:100%;
            height:1px;
            background-color:#00337A;
        }

        .wrap_certificate {
            background:rgb(232, 236, 245);
            padding-bottom: 20px;
			margin-bottom: 30px;
        }

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

            section.certificate {
                width:100%;
                
            }
    
                .row_certi {
                    width: 95%
                }
                .list_certi {
                    width:100%;
                }
    
        }
        @media only screen and (max-width: 700px) {

            section.certificate {
                width:100%;
                
            }
    
                .row_certi {
                    flex-direction:column;
                    width: 85%
                }
                .list_certi {
                    width:100%;
                }
    
        }

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

        section.certificate {
            width:100%;
            
        }

            .row_certi {
                flex-direction:column;
                width: 100%
            }
            .list_certi {
                width:100%;
            }

    }

/* ::::::::::::::::::::::: about/location.php :::::::::::::::::::::::: */

section.location {
    width:85%;
    margin:0 auto;
}
    .wrap_map {
       
        padding:10px 100px 100px;
    }
    .map {
        width:100%;
        height:100%;
        margin: 0 auto
    }
    .wrap_address {
		background:#f4f4f4;
        position:relative;
        font-size:12px;
        display:flex;
        justify-content: center;
        margin: 50px auto;
    }
    .wrap_address::before {
        content:'';
        position:absolute;
        top:-25px; left:0px;
        width:100%; height:1px;
        background-color:#0056C6
        ;
    }
        .wrap_address > div {
            margin:60px;
/*            width:40%*/
        }
        .wrap_address .address_tit {
            display:block;
            font-size:2.5em;
            font-weight:bold;
            color:#0056C6;
            margin:0 auto 10px
        } 
        .wrap_address .address_con {
            font-size:1.2em;
        }
        .wrap_address h4 {
            line-height:2em;
        }

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

            .wrap_address > div {
                margin:30px;
            }
            .wrap_address {
                flex-direction:column;
                padding:0;
            }
            .wrap_map {
                padding: 0
            }
        }

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

			 .map {
        width:90%;
        height:600px;
        margin: 0 auto;
				 margin-bottom: 30px;
    }
            section.location {
                width:100%;
            }
                .row_certi {
                    flex-direction:column;
                }
                .list_certi {
                    width:250px;
					margin: 10px auto;
                }
                .wrap_address {
                    flex-direction:column;
                    padding:0;
                    
                }
                .wrap_map {
                    padding: 0
                }
                 

                .wrap_address::before {
                    background:none;
                }
                .wrap_address > div {
                    margin:30px;
                    width: 80%
                }
    
        }








/* ::::::::::::::::::::::: about/ideology.php :::::::::::::::::::::::: */


.wrap_ideology {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    width:1200px; 
    margin:30px auto;
    color:#666;
}
    .wrap_ideology h3 {
        margin:25px 0;
        font-size:35px;
    }
    
    .ideology_txt {
        text-align:center;
    }
        .ideology_txt p {
            margin:10px 0;
            max-width:500px;
            font-size:20px;
            font-weight:bold;
        }

    .motto_txt {
        padding:0px 0;
        text-align:center;
    }

        .motto_bar {
            margin:50px auto;
            width:100px;
            height:2px;
            background-color:#ccc;
        }
        .motto_txt p {
            margin-bottom:30px;
            max-width:750px;
            font-weight:bold;
        }
    img.img_ideology {
        width:400px;
    }
    img.img_ideology_2 {
        width:auto;
    }
  



@media only screen and (max-width: 1200px) {
    .wrap_ideology {
        width:100%;
    }

    .wrap_ideology h3 {
        font-size:5.5vw;
    }
        .wrap_ideology p {
            font-size:4vw;
            padding:0 10px;
        }
    img.img_ideology {
        max-width:90%;
    }

    img.img_ideology_2 {
        max-width:100%;
    }

}


@media only screen and (max-width: 500px) {
    .wrap_ideology {
        padding:0 auto !important;
    }
}






/* ::::::::::::::::::::::: about/organization.php :::::::::::::::::::::::: */


img.img_organization {
    width:600px;
}






/* ::::::::::::::::::::::: business/intro.php :::::::::::::::::::::::: */
.about_bg_1{
    background:url(../img/main/slider3.jpg);
    background-position: center;
    background-size: cover;
    width:100%;
    height:50vw; max-height:300px; min-height:200px;
    position: relative;
}

.about_bg_1 h3 {
    position: absolute;
    top:50%;
    margin-top:-45px;
    left:50%;
    margin-left:-90px;
    font-size:45px;
    color: #fff
}

.busi_bg {
    width:100%;
    background:url(/img/business/busi_bg.jpg);
    background-position: center;
    background-size: cover;
    color:#fff;
    text-align: center;
    padding:30px 5px;
    margin-bottom: 60px
}
.busi_bg p{
	padding: 0 20px;
}
.busi_text {
    width:100%;
    margin: 40px auto 80px;
    text-align: center;
	padding: 0 20px;
}

.busi_text_wrap {
	text-align: center;
 
}
.busi_text_wrap img{
	text-align: center;
}

.intro_bu_txt h3::before {
    content:'';
    position:absolute;
    top:-10px; left:10px;
    width:50px;
    height:2px;
    background-color:rgb(0, 0, 0);
}
.intro_bu_txt h3 {
    font-size: 15px
}

.busi_text_wrap>div {
    width:500px;

}
.busi_wrap {
    width: 1080px;
    margin: auto
}

@media only screen and (max-width: 1200px) {
    .intro_txt {
        width: 90%
    }

}

@media only screen and (max-width: 500px) {
	.busi_text{
		margin: 30px auto;
	}
	.busi_text h2{
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 14px;
	}
	.busi_text_wrap {
        width: 100%;
        display: flex;
        flex-direction: column
    }
    .busi_text_wrap>div {
        width: 100%
    }
	.busi_text_wrap img{
		width: 100%;
		height: auto;
	text-align: center;
}
    

}
/* ::::::::::::::::::::::: business/drawings.php :::::::::::::::::::::::: */

section.intro_business {
    width:1200px;
    margin:0 auto 100px auto;
}


.intro_bu_txt {
    margin:20px 0;
    font-size:10px;
    position: relative;
    padding: 10px
}
    .intro_bu_txt h3 {
        font-size:1.7em;
        color:#00337A;
    }
    .intro_bu_txt p {
        font-size:1.5em;
        padding:5px;
    }

    .intro_bu_txt.employee p {
        max-width:600px;
        font-size:13px;
    }
.wrap_drawings {
    width: 1200px;
    margin: 0 auto;
}
.wrap_drawings ul li{
	cursor: pointer;
}
.wrap_drawings ul li img{
	transition: all 0.3s;	
}
.wrap_drawings ul li:hover img{
	transform: scale(1.1);
	transition: all 0.3s;
}
.drawings_img_wrap {
    padding: 10px 0;
    margin-bottom: 50px
}

.single-item img{
    width: 652px;
    margin: 0 auto
}
.popup{
	width: 700px;
	height: 500px;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 30px #ccc;
	text-align:center;
	position: fixed;
	left:calc(50% - 350px);
	top:200px;
	display: none;
}
.popup img{
	margin-top: 40px;
}
.popup .close{
	width: 50px;
	height: 50px;
	cursor: pointer;
	position: absolute;
	top:30px;
	right: 10px;
}
.popup .close .c1{
	width:50px;
	height: 1px;
	background:#666;
	transform: rotate(45deg);
}
.popup .close .c2{
	width:50px;
	height: 1px;
	background:#666;
	transform: rotate(-45deg);

}







    @media only screen and (max-width: 1200px) {
        section.intro_business {
            width:100%;
        }
        .wrap_drawings {
            width: 100%;
            margin: 0 auto;
        }
        .single-item img{
            width: 70%;
            margin: 0 auto
        }
    }

    @media only screen and (max-width: 900px) {
        section.intro_business {
            width:100%;
        }

    }

    @media only screen and (max-width: 500px) {
        section.intro_business {
            width:100%;
        }
        .wrap_drawings {
            width: 100%;
            margin: 0 auto;
        }
        .single-item img{
            width: 90%;
            margin: 0 auto
        }

		.popup{
	width: 100%;
	height: 600px;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 30px #ccc;
	text-align:center;
	position: fixed;
	left: 0;
	top:100px;
	display: none;
			z-index: 100;
}
.popup img{
	width: 100%;
	margin-top: 140px;
	transform: rotate(90deg);
	margin-left: -20px;
}


		
		
		
		
		
    }












/* ::::::::::::::::::::::: business/works.php :::::::::::::::::::::::: */


h1.tit_style_1 {
    position:relative;
    margin:15px auto;
    text-align: center;
    font-size:25px;
}
   
section.works {
	background: url(../img/workbg.jpg) no-repeat center/cover;
    width:100%;
    margin:0 auto;
}

    .wrap_works {
        width:1200px;
        margin:0 auto;
		text-align: center;
    }
.wrap_works .worksimg{
	text-align: center;
	margin-bottom: 80px;
}
    .img_works {
        position:relative;
        width:100%;
        height:300px;
    }
        .img_works::before {
            content:'';
            position:absolute;
            top:0; left:0;
            width:100%;
            height:100%;
            opacity:0;
            background-color:rgba(0,0,0,.5);
            transition:opacity 500ms;
        }

        figure.effect-bubba:hover .img_works::before {
            opacity:1;
        }

    .grid figure.width_20 {
        width:20%;
    }

    .grid figure.width_30 {
        width:33.3%;
    }

    .grid figure.width_40 {
        width:40%;
    }

    .grid figure.width_50 {
        width:50%;
    }

    .grid figure.width_60 {
        width:60%;
    }



    .img_works.img_1 {
        background:url('/img/business/works/works_1.png')no-repeat 100% 50%;
        background-size:cover;
    }

    .img_works.img_2 {
        background:url('/img/business/works/works_2.png')no-repeat 100% 50%;
        background-size:cover;
    }

    .img_works.img_3 {
        background:url('/img/business/works/works_3.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_4 {
        background:url('/img/business/works/works_4.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_5 {
        background:url('/img/business/works/works_5.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_6 {
        background:url('/img/business/works/works_6.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_7 {
        background:url('/img/business/works/works_7.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_8 {
        background:url('/img/business/works/works_8.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_9 {
        background:url('/img/business/works/works_9.png')no-repeat 100% 100%;
        background-size:cover;
    }

    .img_works.img_10 {
        background:url('/img/business/works/works_10.png')no-repeat 100% 100%;
        background-size:cover;
    }




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

        section.works {
            width:100%;
        }

        .wrap_works {
            width:100%;
        }
    

    }


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

        section.works {
            margin:0 auto 50px auto;
        }

        
        .wrap_works .grid {
            display:flex;
            flex-direction:column;
            position: relative;
            margin: 0 auto;
            padding:0 10px;
            width: 100%;
            list-style: none;
            text-align: center;
        }

     
        /* Common style */
        .wrap_works .grid figure {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 0%;
            width:100%;
            min-width: auto;
            max-height: auto;
            /* background: #3085a3; */
            text-align: center;
            cursor: pointer;
        }


    }

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


  .wrap_works {
        width:100%;
        margin:0 auto;
		text-align: center;
    }
.wrap_works .worksimg{
	width: 100%;
	height: auto;
	padding: 0 20px;
	text-align: center;
}
}


/* ::::::::::::::::::::::: business/drawings.php :::::::::::::::::::::::: */

section.drawings {
    width:1200px;
    margin:0 auto ;
}


.row_drawings {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:50px;
}
    .list_drawing {
        display:flex;
        flex-direction:column;
        align-items: center;
        padding:20px;
        width:100%;
    }

    .certi_line {
        margin:30px 0;
        width:100%;
        height:1px;
        background-color:#00337A;
    }
.drawings_img_wrap{
	width: 1000px;
	margin: 0 auto;
	
}
.wrap_drawings{
	width: 1000px;
	margin: 0 auto 50px;
}
.wrap_drawings ul{

}
.wrap_drawings ul li{
	border: 1px solid #ccc;
	padding: 20px;
	float: left;
	width: 48%;
	margin-right: 1%;
	margin-top: 1%;
	text-align: center;
}
.wrap_drawings ul li img{
	width: 80%;
	height: auto;
}



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

        section.drawings {
            width:100%;
            margin:0 auto 50px auto;
        }
        .certi_img img {
            width:100%;
        }
    

    }

    @media only screen and (max-width: 500px) {
		
		.drawings_img_wrap{
	width: 100%;
	margin: 0 auto;
	
}
.wrap_drawings{
	width: 100%;
	margin: 0 auto 50px;
}
.wrap_drawings ul{
width: 100%;
	margin: 0 auto;
}
.wrap_drawings ul li{
	border: 1px solid #ccc;
	padding: 20px;
	float: inherit;
	width: 100%;
	margin-right: 0;
	margin-top: 1%;
	text-align: center;
}
.wrap_drawings ul li img{
	width: 80%;
	height: auto;
}

		
		

        .list_drawing {
            width:90%;
        }

        .list_drawing h3 {
            font-size:4vw;
        }
    

    }





/* ::::::::::::::::::::::: work/history.php :::::::::::::::::::::::: */


section.work_history {
    width:1200px;
    margin:0 auto;
}
.about_bg_2{
    background:url(/img/slider5.jpg);
    background-position: center;
    background-size: cover;
    width:100%;
    height:50vw; max-height:300px; min-height:200px;
    position: relative;
}

.about_bg_2 h3 {
    position: absolute;
    top:50%;
    margin-top:-30px;
    left:50%;
    margin-left:-60px;
    font-size:30px;
    color: #fff
}


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

    section.work_history {
        width:100%;
        margin:0 auto;
    }
    .certi_img img {
        width:100%;
    }


}

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

    .list_drawing {
        width:90%;
    }

    .list_drawing h3 {
        font-size:4vw;
    }


}

/* ::::::::::::::::::::::: Recruit/ intro.php :::::::::::::::::::::::: */

.about_bg_3{
    background:url(/img/slider4.jpg);
    background-position: center;
    background-size: cover;
    width:100%;
    height:50vw; max-height:300px; min-height:200px;
    position: relative;
}

.about_bg_3 h3 {
    position: absolute;
    top:50%;
    margin-top:-45px;
    left:50%;
    margin-left:-90px;
    font-size:45px;
    color: #fff
}

.recruit_wrap_text{
    text-align: center
}


.recruit_box {
    padding:20px 40px;
    text-align: center;
	border-right: 3px solid #fff;
}
.recruit_box:last-child{
}

.recruit_box i {
    font-size: 80px;
    margin-bottom: 30px;
    color: #00337A;
}

.recruit_box_wrap {
    display: flex;
    justify-content:space-between;
    margin-top:50px;
    background: #e4effa
}

.box_wrap {
    display: flex;
    justify-content:space-between;
    padding: 20px 0
}

.recruit_box h3{
    color: #555;
    line-height:22px;
    font-size: 18px;
    margin-bottom:15px
}

.recruit_box p {
    font-size:14px
}

.intro_txt{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.intro_txt img{
	width: 600px;
	height: auto;
	
}

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

    .recruit_box_wrap {
        display: flex;
        flex-direction: column;        
        margin-top:50px
    }
    .box_wrap {
        margin-bottom: 30px;
        display: flex;
        justify-content:space-between;
    }
 
 }

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

    .recruit_box_wrap {
        display: flex;
        flex-direction: column;        
        margin-top:50px
    }
    .box_wrap {
        margin: 0;
        display: flex;
        flex-direction: column;   
    }

    .recruit_box {
        margin-bottom: 30px
    }
	 
	 .intro_txt{
	width: 100%;
}

.intro_txt img{
	width: 95%;
	height: auto;
	
}
 
 }

/* ::::::::::::::::::::::: Recruit/ info.php :::::::::::::::::::::::: */

section.recruit {
    width:1200px;
    margin:0 auto;
}

.wrap_recruit_process img{
    width:100%;
    margin: 30px auto;
    
}
.wrap_recruit_process{
    width:100%;
    margin:0 auto 100px auto;
    
}
    .wrap_recruit {
        width:1200px;
        margin:0 auto 100px auto;
    }

    .block_recruit {
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width:150px;
        height:150px;
        border-radius:100%;
        border:10px solid #00337A;
        -webkit-box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.75);
    }
        .block_recruit h3 {
            border-bottom:2px solid #00337A;
        }
        .block_recruit h4 {
            margin-top:10px;
        }

        .recruit_info_etc {
            text-align: center
        }

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

        section.recruit {
            width:100%;
        }
        
        .wrap_recruit {
            width:100%;
        }
    
    
    }
    
    @media only screen and (max-width: 900px) {

       .wrap_recruit_process {
           flex-direction:column;
           align-items: center;
       }
       .block_recruit {
           margin-bottom:20px !important;
       }
    
    
    }


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

        .recruit_info_etc {
            margin-bottom:20px;
            padding:0 10px;
        }
            
     
     
     }












/* :::::::::::::::::::::: Effect - Grid :::::::::::::::::::::: */

.grid {
    display:flex;
	position: relative;
	margin: 0 auto;
	width: 100%;
	list-style: none;
    text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-height: 300px;
	/* background: #3085a3; */
	text-align: center;
	cursor: pointer;
}



.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	width: 100%;
	/* opacity: 0.8; */
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
    word-spacing: -0.15em;
    font-size:16px;
	font-weight: 700;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}



figure.effect-bubba {
	/* background: #9e5406; */
}

figure.effect-bubba img {
	/* opacity: 0.7; */
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	/* opacity: 0.4; */
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
	padding-top: 50px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



/* 게시판 */
.about_bg_4{
    background:url(/img/center_bg.jpg);
    background-position: center;
    background-size: cover;
    width:100%;
    height:50vw; max-height:300px; min-height:200px;
    position: relative;
}

.about_bg_4 h3 {
    position: absolute;
    top:50%;
    margin-top:-45px;
    left:50%;
    margin-left:-90px;
    font-size:45px;
    color: #fff
}

.about_bg_5{
    background:url(/img/slider5.jpg);
    background-position: center;
    background-size: cover;
    width:100%;
    height:50vw; max-height:300px; min-height:200px;
    position: relative;
}

.about_bg_5 h3 {
    position: absolute;
    top:50%;
    margin-top:-30px;
    left:50%;
    margin-left:-60px;
    font-size:30px;
    color: #fff
}