@charset "utf-8";

/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶size
pc : 1200px
tablet : 980px ~
mobile : 767px ~ 320px
*/


/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0;}
	body,th,td,input,select,textarea,button{font-family: "Gothic",メイリオ,Meiryo,Osaka,sans-serif; font-weight:300; font-size:15px; color:#555;}
	dl,ul,ol,menu,li {list-style:none;}
	*, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	:focus{outline:0 !important;}
	iframe{border:none; width:100%;}
	a{color:inherit; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out;}
	a:hover, a:focus ,a:active{text-decoration:none; color:#ff4e00;}
	img{max-width:100%;}
	textarea{max-width:100%; resize:none;}
    
	@media only screen and (min-width: 320px){
		body{overflow-x:hidden;}
	}

	.hidden{font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;}
	.hidden {
		display: none !important;
	}
    ::selection {
        background:#0575ab;
        color: #fff;
        text-shadow: none;
    }
    ::-moz-selection {
        background:#0575ab;
        color: #fff;
        text-shadow: none;
    }
    ::-webkit-selection {
        background:#0575ab;
        color: #fff;
        text-shadow: none;
    }

/* Button 
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.btn-bar{margin-top:25px;}
	.btn{text-transform:uppercase; border-radius:0; line-height:24px;}
	.btn:focus, .btn:active{outline:none; color:#fff;}

	.btn-custom{font-size:15px; font-weight: 600; border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#86aacc; border-color: #86aacc; color:#fff;}
	.btn-custom:hover, .btn-custom:focus{background-color:#1067b4; border-color:#1067b4; color:#fff;}

	.btn-custom-outline{font-size:15px; font-weight: 600; border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#ffa800; border-color:#ffa800;}
	.btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:#ff6600;}
	.btn-bar a{margin-right:10px;}

	@media only screen and (max-width: 1200px) {
		.btn-custom, .btn-custom-outline{padding:5px 10px;font-size:14px}
	}

	@media only screen and (max-width: 980px) {
		.btn-custom, .btn-custom-outline{padding:0.8em 1.8em;font-size:15px}
	}


/* Layoyt
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#wrapper{position:relative; width:100%; min-width:320px; height:100%;}


/* Header
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
    #header {z-index :666; width: 100%; height: 90px; background:transparent;}
	#header h1{float:left; margin-top:13px; width:300px}
    #header h1 a{display: block;}
    #header #header_in{position: relative; margin: 0 auto; width: 100%; max-width: 1200px; height: 90px;}
    #nav{display: inline-block; margin-left: 1116px;}

   
    .nav-btn{display:none;}
	.nav-bg{z-index:888; display:none; position:absolute; top:90px; width:100%; height:203px; background:transparent; background:rgba(11,45,133,.9); border-top:1px solid #d4d4d4; border-bottom:3px solid #333;}


    .top-menu{position:absolute; top:7px; right:0; line-height:0; font-size:0;}
    .top-menu ul{display:inline-block;}
    .top-menu li{display: inline-block; float: left; text-align: center; }
	.top-menu li:first-child{border-right:1px solid #aaa;}
    .top-menu a{display:inline-block; font-size:14px; line-height:1; font-weight: 400; color: #666; padding: 0 10px;}

    .navigation:after{content:""; display:block; clear:both;}
    .navigation > li{position:relative; float:left; height:100%; line-height: 90px; text-align:center;}
    .navigation .main-menu{display:block; padding: 0 30px; width:100%; font-weight:600; font-size:16px; color:#000;}
    .navigation .sub-menu{display:none; z-index:998; position:absolute; top:90px; left:0; width:100%; height: 200px; padding-top:15px;}
    .navigation .sub-menu a{display:block; text-align:center; line-height:40px; letter-spacing:-1px; font-size:14px; font-weight: 600; color:#fff;}
    .navigation .sub-menu .intro-menu{display:none;}

    .navigation > li:hover {}
    .navigation > li:hover > a {color:#2b7de1;}
    .navigation > li:hover a {}
    .navigation > li:hover .sub-menu{color:#fff;}
    .navigation > li:hover:after {content:''; position:absolute; height:1px; width:100%; left:0; bottom:0;  z-index:999;}

    .navigation .sub-menu a:hover{color:#01b5e2;}

    @media only screen and (min-width: 981px) {
        #nav {margin-left: 0px;}
        .navigation .main-menu {padding: 0 25px;}
        .top-menu {right: 20px;}
	}

	@media only screen and (min-width: 1201px) {
		/*#header > div{width:1200px;}*/
        #nav {margin-left: 56px;}
        .navigation .main-menu {padding: 0 39px;}
        .top-menu {right: 0;}
	}

	@media only screen and (max-width: 1200px) {
		#header > div{padding:0 20px;}
	}

	@media only screen and (max-width: 980px) {
		#header{z-index:666; width:100%; height:65px; }
		#header > div{padding:0;}

		#header h1{float:left; height:65px; margin-top:3px;}
		#header h1 a{display:block;}
		#header h1 img{width:auto;}

		.nav-btn{z-index:999; display:block; position:absolute; top:20px; right:20px; width:30px; height:23px; cursor:pointer;}
		.nav-btn span{position:absolute; left:50%; display:block; margin-left:-15px; width:30px; height:3px; background:#ff4e00; transition:.2s all linear;}
		.nav-btn span:nth-child(1){top:0;}
		.nav-btn span:nth-child(2){top:10px;}
		.nav-btn span:nth-child(3){top:20px;}
		
		.nav-btn.nav-close{position:fixed;}
		.nav-btn.nav-close span:nth-child(1){top:50%; transform:rotate(45deg);}
		.nav-btn.nav-close span:nth-child(2){margin-left:0; width:0;}
		.nav-btn.nav-close span:nth-child(3){top:50%; transform:rotate(-45deg);}

		.nav-bg{z-index:777; display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}

		#nav{z-index:888; position:fixed; top:64px; right:-100%; display:block; padding:0 0 20px; width:100%; height:100%; background:#fff;}

		.top-menu{position:relative; top:0; padding:17px 30px; width:100%; max-height:65px; border-top:1px solid #e1e1e1; margin-bottom:30px;}
        .top-menu ul {width: 100%;}
        .top-menu li {width: calc(33.33% - 10px); margin-left: 15px;}
        .top-menu a {width: 100%; padding: 0;color:#333;}
        
		.navigation .main-menu{display:block; padding:0 30px; width:100%; line-height:50px; font-weight:400; font-size:16px; color:#000; transition:none;}
        
        .navigation > li {width:100%; text-align:left; border-top:1px solid #e1e1e1;}
        .navigation > li:hover {background:#1886a2; border-color:#095c71;}
        .navigation > li:first-child {border-top:none;}
        .navigation > li:hover:after {display:none;}
        .navigation > li.active {background:#1886a2;}
        .navigation > li a {color:#000;}
        .navigation > li a:hover {color:#fff;}
        .navigation > li.active > a {color:#fff;}
        .navigation > li.active > ul li a {color:#555;}
        
        .navigation > li:hover .sub-menu {background:inherit;}
        .navigation .sub-menu {display:none; position:relative; top:0; height:inherit; background:#e8e8e8 !important;padding-top:0px;} 
        .navigation .sub-menu li {border-top:1px solid #b0b0b0;}
        .navigation .sub-menu li:first-child {border-top:none;}
		.navigation .sub-menu a{display:block; padding:0 30px; line-height:35px; font-size:14px; color:#555; text-align: left;}
		.navigation .sub-menu a:before{content:""; display:inline-block; margin:-2px 10px 0 0; width:5px; height:5px; vertical-align:middle; background:#b0b0b0;}
		.navigation .sub-menu a:hover{background:#b0b0b0; color:#fff}
		.navigation .sub-menu a:hover:before{background:#fff;}
	}

	@media only screen and (max-width: 768px) {
		.nav-btn{right:10px;}
		#header h1{width:200px;}
	}
	@media only screen and (max-width: 768px) {
		#header h1{ margin-top:5px;}
	}
	
/* Footer
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#footer{position:relative; width:100%; background:#f3f3f3; color:#727272; padding:30px 0; border-top:2px solid #e1e1e1;}
	.footer-area{position: relative;margin: 0 auto;width: 1200px;box-sizing: border-box;}
	.footer-area:after{content:""; display:block; clear:both;}

    #footer p{font-size:14px; font-weight:400; letter-spacing:0; color:#727272; text-align:center;}
	
	.mobi_f_links {
		display: none;
	}

	@media only screen and (max-width:1200px) {
		.footer-area{width:100%;}
	}
	@media only screen and (max-width:768px) {
		.footer-area{margin-bottom:80px}
		#footer p{font-size:12px;}
		.mobi_f_links {
			display: block;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 80px;
			background: #fff;
			z-index:100;
		}
		.mobi_f_links ul li {
			width: 33.33%;
			float: left;
			text-align: center;
		}
		.mobi_f_links h4 {
			margin-top: 5px;
			font-size:18px;
		}
		.mobi_f_links ul li a div {
			height: 80px;
			padding-top: 15px;
		}
	}
	


/* Main
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
    .main-visual {position: relative; background:url("../img/main_img.jpg") no-repeat center center/cover; height:630px;}
    
	.main-contents{padding:60px 10px 50px;margin: 0 auto; width: 1200px;}
	.main-banner {overflow: hidden;}
	.main-banner ul{
		display: inline-block;
		width: 100%;
	}
	.main-banner ul:after{
		display:block;
		clear:both;
		content:'';
	}
	.main-banner ul li{
		float: left;
		margin-right: 40px;
		width:492px;
		width: calc((100%/3) - 27px);
		height: 350px;
		max-height: 492px;
		position:relative;
		transition: .6s;
		
	}
	.main-banner ul li:last-child{
		margin-right: 0px ;
	}
	.main-banner ul li *{
		color:#fff
	}
	.main-banner ul li a{
		height: 100%;
		width: 100%;
		padding: 10%;
		transition:.6s;
		position:relative;
		z-index:3;
		display: block;
	}

	.main-banner ul li a h5{
		font-size: 32px;
	}
	.main-banner ul li a h5:after{
		content: '';
		display: block;
		background: #fff;
		width: 54px;
		height: 2px;
		margin: 20px 0 25px;
	}
	.main-banner ul li a p{
		font-size: 17px;
		line-height:22px;
	}
	.main-cont-1{background:url(../img/sec1-1.jpg) no-repeat center/cover;}
	.main-cont-2{background:url(../img/sec1-2.jpg) no-repeat center/cover;}
	.main-cont-3{background:url(../img/sec1-3.jpg) no-repeat center/cover;}

	.main-banner ul li:before{
		opacity: 0;
		content: '';
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .6s;
	}
	.main-banner ul li:hover{
		transition: .6s;
		box-shadow: 8px 9px 14px 0px rgba(0, 0, 0, 0.2)
	}
	.main-banner ul li.main-cont-1:before{
		background: rgb(255,156,0); /* Old browsers */
		background: -moz-linear-gradient(top, rgb(255,156,0,0.9) 30%, rgb(196,78,0,0.9) 100%), url(../img/sec1-1.jpg) no-repeat center/cover; /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(../img/sec1-1.jpg) no-repeat center/cover; /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(../img/sec1-1.jpg) no-repeat center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#c44e00',GradientType=0 ); /* IE6-9 */
		opacity:0;
		content:'';

	}
	.main-banner ul li.main-cont-2:before{
		background: rgb(255,156,0); /* Old browsers */
		background: -moz-linear-gradient(top, rgb(255,156,0,0.9) 30%, rgb(196,78,0,0.9) 100%), url(../img/sec1-2.jpg) no-repeat center/cover; /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(../img/sec1-2.jpg) no-repeat center/cover; /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(../img/sec1-2.jpg) no-repeat center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#c44e00',GradientType=0 ); /* IE6-9 */
		
	}

	.main-banner ul li.main-cont-3:before{
		background: rgb(255,156,0); /* Old browsers */
		background: -moz-linear-gradient(top, rgb(255,156,0,0.9) 30%, rgb(196,78,0,0.9) 100%), url(../img/sec1-3.jpg) no-repeat center/cover; /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(../img/sec1-3.jpg) no-repeat center/cover; /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(../img/sec1-3.jpg) no-repeat center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#c44e00',GradientType=0 ); /* IE6-9 */
	}
	.main-banner ul li:hover:before{
		opacity:1;
	}


	@media only screen and (max-width: 1200px) {
		.main-contents{width:100%; }
		.main-banner ul li{margin-right: 20px; width: calc((100%/3) - 14px);}
		.main-banner ul li a h5{font-size: 24px;}
	}
	@media only screen and (max-width: 980px) {
		.main-visual {height:400px;}
		.main-contents{padding:30px 10px 45px;}
		
	}
	@media only screen and (max-width: 768px) {
		.main-visual {height:300px; }
		.main-contents{}
		.main-banner ul li {
			margin-right: 0;
			width: 100%;
			margin-bottom: 20px;
		}
		.main-banner ul li a{padding:8%}
		.main-banner ul li a h5{font-size: 34px;}
		
	}	
	@media only screen and (max-width: 480px) {
		
		.main-visual {height:200px; }
		.main-banner {padding: 20px}
	}

	.main-banner .btn-bar{position:absolute; bottom:50px; width:100%; text-align:center;}
	.main-banner .btn{text-transform:uppercase; border-radius:0; line-height:24px;}
	.main-banner .btn:focus, .btn:active{outline:none; color:#fff;}

	.main-banner .btn-custom{font-size:15px; font-weight: 600; border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#002d5d; border-color: #002d5d; color:#fff;}
	.main-banner .btn-custom:hover, .btn-custom:focus{background-color:#041d38; border-color:#041d38; color:#fff;}

	.main-banner .btn-custom-outline{font-size:15px; font-weight: 600; border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#1a74b8; border-color:#1a74b8;}
	.main-banner .btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:#1564a7; border-color:#1564a7;}
	.main-banner .btn-bar a{margin-right:0px; display:inline;}
	.main-banner .btn-bar a:first-child{margin-right:10px; }

	@media only screen and (max-width: 1200px) {
		.main-banner .btn-custom, .main-banner .btn-custom-outline{padding:5px 10px;font-size:14px}
	}

	@media only screen and (max-width: 768px) {
		.main-banner .btn-custom, .main-banner .btn-custom-outline{padding:0.8em 1.8em;font-size:15px}
	}


	.main-box-tit {
		position: relative;
		display: table;
		width: 100%;
		min-height: 50px;
		text-align: center;
	}
	.main-box-tit h3 {
		display: table-cell;
		vertical-align: middle;
		font-size: 30px;
		font-weight: 800;
		background-color: #fff;
	}
	.main-box-tit h3 span {
		background-color: #fff !important;
		position: relative;
		z-index: 1;
		padding: 0 30px;
	}
	.main-box-tit h3::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #e1e1e1;
	}

	.contactus {margin-top:20px;}
	.contactus li {margin-bottom:15px;}
	.contactus li strong{font-weight:600;}
	.contactus li i {
		width: 45px;
		margin: 4px 0 0 5px;
		vertical-align: top;
		color: #1a81d8;
	}
	.contactus li .contactus-text {
		width: calc(100% - 50px);
		display: inline-block;
	}
	@media only screen and (max-width: 980px) {
		.contactus {margin-top:0px;}
		.contactus li {margin-bottom:5px;}
	}
	@media only screen and (max-width: 768px) {
		.kakao{display:none}
	}


/* Sub 
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.sub-visual {position: relative; background:url("../img/sub_img.jpg") no-repeat center top/cover; width: 100%; height:200px; text-align: center; }

	.sub-visual > div:first-child {
		position: absolute;
		top: 10%;
		width:100%;
		text-align:center;
	}

	.sub-visual h2 {
		letter-spacing: -1px;
		line-height: 3;
		font-weight: 600;
		font-size: 36px;
		color: #000;
	}

	
	.sub-tab{width:100%; background:rgba(11,45,133,.9);position: absolute;bottom: 0;}
	.sub-tab.fixed{z-index:666; position:fixed; top:0; left:0; width:100%; background:#fff; border-bottom:1px solid #ddd; box-shadow:0 2px 10px rgba(0,0,0,0.10); opacity:0.92;}
	.sub-tab > ul{margin:0 auto; max-width:1200px; height:60px; text-align:center; line-height:0; font-size:0; overflow:hidden}
	.sub-tab.fixed ul{margin:0 auto; width:100%;}
	.sub-tab li{display:inline-block; width:50%; height:60px; }
	.sub-tab .col-1 li{width:50%;}
	.sub-tab .col-2 li{width:50%;}
	.sub-tab .col-3 li{width:33.33%;}
    .sub-tab .col-4 li{width:25%;}
    .sub-tab .col-5 li{width:20%;}
	.sub-tab li a{display:inline-block; width:100%; height:60px; text-align:center; line-height:60px; font-weight:600; font-size:20px; color:#fff;}
	.sub-tab li.active a, .sub-tab li a:hover{color:#fff; background:#1a74b8;}


	.sub-tab.fixed a{border-bottom:0; border-top:0;}

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

		.sub-tab li a{font-size:12px;}
	}

/* Sub Contents
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#subContents{position:relative; padding:50px 15px 80px; margin:0 auto; width:1200px; min-height:500px;}
	.sub-nav {
		position: relative;
		display: block;
		width: 100%;
		min-height: 30px;
		line-height: 30px;
		margin-bottom: 30px;
	}
	.sub-nav ul {
		position: absolute;
		top: 0;
		right: 0;
		display: inline-block;
	}
	.sub-nav ul li {
		display: inline;
		float: left;
		min-width: 30px;
		text-align: center;
		padding: 0 10px;
		font-size: 16px;
		font-weight: 600;
		color: #777;
	}
	.sub-nav ul li._last {
		padding-right: 0;
		color: #040404;
	}
	.sub-nav ul li:after {
		content: '/';
		position: absolute;
		display: inline-block;
		width: 20px;
		text-align: center;
		font-size: 14px;
		color: #d4d4d4;
	}
	.sub-nav ul li:last-child:after {
		content: '';
	}
	.sub h3 {
		font-size: 28px;
		font-weight: 600;
		color: #030303;
		padding-bottom: 8px;
		margin-bottom: 50px;
		border-bottom: 2px solid #030303;
		text-align: left;
	}

	.sub h4 {
		color: #0d50a4;
		font-size: 44px;
		line-height: 1.6;
		font-weight: 600;
		text-align: center;
		display: block;
		margin-bottom:0px;
	}

	.kr h3 {padding-top:30px}
	.kr h4 {font-size: 32px; line-height: 1.0;}
	.kr {word-break:keep-all}
	
	.sub .slogan {
		font-size: 18px;
		font-weight: 400;
		margin-top: 0px;
		line-height: 1;
		text-align:center;
	}
	.sub p {margin-bottom:30px;font-weight: 600;font-size: 15px;}
	.sub img {width:100%; margin-bottom:30px;}

	.sub table {
		width: 100%;
		border-top: 2px solid #1886a2;
		margin-top: 50px;
	}

	.sub table tr {
		border-bottom: 1px solid #e1e1e1;
	}
	.sub table tr th {
		min-width: 150px;
		padding: 20px 0;
		font-size: 18px;
		font-weight: 600;
		color: #040404;
		background-color: #f6f6f6;
		border-right: 1px solid #e1e1e1;
		text-align: center;
	}
	.kr table tr th {font-size:16px; min-width: 120px;}

	.sub table tr td {
		color: #777;
		font-weight: 600;
		font-size: 15px;
		padding: 15px 30px;
		line-height: 25px;
		vertical-align:middle;
		
	}
	.kr table tr td {font-weight:400;}
	.sub table tr td a{font-weight:600; color:#034c94;}

	.sub table tr td p{margin-bottom:0;}
	.sub table tr td strong{font-weight:600; color:#034c94;}
	.sub table tr td img{width:200px; display:block; margin:10px 0;}

	



	@media only screen and (max-width:1200px) {
		#subContents{width:100%; padding:10px 10px 70px;}
	}