html *{font-family: 'Noto Sans KR', sans-serif;}

section,#sec0>div{
	padding: 20vw 10px 15vw;
}




/* 공통 */

.tit_box{
	margin:0 0 12vw;
}
.tit_box:before{
	content: "";
	display: block;
	background-color:#222;
	width:60px;
	height:3px;
	margin:0 auto;
}

.tit_box h1{
	font-weight:900;
	font-size:26px;
	text-transform: uppercase;
	text-align: center;
	margin: 1em auto;
}

.tit_box p{
	font-size: 15px;
	text-align: center;
	line-height: 1.35;
	max-width:90%;
	margin:0 auto;
}

@media screen and (min-width:768px){
	section,#sec0>div{padding:100px 10px;}
	.tit_box{margin:0 0 90px;}
}





/* 헤더 & 메뉴 */

div.header{
	background:rgba(0,0,0,0.7);
}


.logo{
	display: inline-block;
	margin: 10px 0 0 10px;
}
.logo img{
	height: 35px;
}
.nav-collapse li{
	background-color:rgba(255,255,255,0.5);
}
.nav-collapse a{
	line-height: 3;
}
.nav-collapse a:active, .nav-collapse .active a{
	background: #2b388f;
}

@media screen and (min-width:1040px){
	.header>div{
		max-width:1040px;
		margin:0 auto;
		padding:10px 0 10px;
	}
	.logo{margin:0;}
	.nav-collapse li{
		background-color:rgba(255,255,255,0);
		margin:0 0 0 40px;
		font-size:14px;
	} 
	.nav-collapse a{
		color:#fff;
		line-height: 2;
	}
	.nav-collapse a:active, .nav-collapse .active a{
		background: rgba(0,0,0,0);
		border-bottom:1px solid #fff;
	}
}




/* SEC 0 */

#sec0{
	background-image: url(../image/bg08.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.9);
	padding: 0;
}
#sec0>div{
	background-color:rgba(28, 37, 47, 0.40);
}
#sec0 .container{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 50px 0 30px;
}

#sec0 .container .ht,
#sec0 .container .ft{
	font-weight:500;
	font-size:14px;
	line-height: 1.5;
	max-width:620px;
}

#sec0 .container .ft br{display: none;}

#sec0 .container>div{margin:20px 0;}

#sec0 .container div .small{
	font-weight:500;
	font-size:7.5vw;
	line-height:1.3;
}

#sec0 .container div .big{
	font-weight:700;
	font-size:7.5vw;
	line-height:1.3;
}
#sec0 .container div .big span{color:#57aeff;}

@media screen and (min-width:768px){
	#sec0{
		height: auto;
	}
	#sec0 .container{padding:50px 0 100px;}
	#sec0 .container div{margin:30px 0;}
	#sec0 .container div .small{font-size:24px;}
	#sec0 .container div .big{font-size:38px;}

	#sec0 .container div .big:after{
		display: inline-block;
		color:#57aeff;
		margin:0 0 0 5px;
		text-transform: capitalize;
	}
	#sec0 .container div .big1:after{
		content: "(ACCEPTABLE)";
	}
	#sec0 .container div .big2:after{
		content: "(ACCOUNTABLE)";
	}
	#sec0 .container div .big3:after{
		content: "(ADVISABLE)";
	}
	#sec0 .container .ht,
	#sec0 .container .ft{
		font-size:17px;
	}
	#sec0 .container .ft br{display: inline;}
}

@media screen and (min-width:1040px){
	#sec0 .container{
		margin:0 auto;
		width:940px;
	}
	#sec0 .container div{margin:50px 0;}
}








/* SEC 1 */

#sec1{background-color:#eee;}
#sec1 .container{}
#sec1 h2{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#052b77+0,2055c9+54,112b87+100 */
		background: #052b77; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #052b77 0%, #2055c9 54%, #112b87 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052b77', endColorstr='#112b87',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	font-weight: 500;
	font-size: 18px;
	margin: 7vw 0 2vw;
	padding: 10px 0 10px 20px;
	color:#fff;
	border-radius: 0 30px 0 0;
}
#sec1 .container ul{
	margin:0 auto;
}
#sec1 .container ul li{
	background-color:#fff;
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 7px;
	border: 1px solid #ccc;
}
#sec1 .container ul li a{
	display: flex;
	position: relative;
}
#sec1 .container ul li a::after{
	content: "\f002";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color:#bbb;
	position: absolute;
	top: 3vw;
	right: 4vw;
}
#sec1 .container ul li .img_box{
	width: 35%;
	height: 30vw;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#sec1 .container ul li .img_box1{background-image:url(../image/tawhales_001.jpg)}
#sec1 .container ul li .img_box2{background-image:url(../image/tawhales_002.jpg)}
#sec1 .container ul li .img_box3{background-image:url(../image/tawhales_003.jpg)}
#sec1 .container ul li .img_box4{background-image:url(../image/tawhales_004.jpg)}
#sec1 .container ul li .img_box5{background-image:url(../image/tawhales_005.jpg)}
#sec1 .container ul li .img_box6{background-image:url(../image/tawhales_006.jpg)}
#sec1 .container ul li .img_box7{background-image:url(../image/tawhales_007.jpg)}
#sec1 .container ul li .img_box8{background-image:url(../image/tawhales_008.jpg)}
#sec1 .container ul li .img_box9{background-image:url(../image/tawhales_011.jpg)}
#sec1 .container ul li .img_box10{background-image:url(../image/tawhales_010_1.jpg)}
#sec1 .container ul li .txt_box{
	width:65%;
	padding:3vw 10px 0;
	border-left: 2px solid #eee;
}
#sec1 .container ul li .txt_box h3{
	font-weight: 700;
	font-size: 4.5vw;
	margin: 0 0 3vw;
}
#sec1 .container ul li .txt_box p{
	font-weight: 300;
	font-size: 3.9vw;
	line-height: 1.35;
	word-break: break-word;
	letter-spacing: -0.06em;
}

@media screen and (min-width:768px){
	#sec1 h2{
		text-align: center;
		border-radius: 19px;
	}
	#sec1 .container ul{
		display: table;
		width: 100%;
		max-width: 760px;
		display: flex;
		justify-content: center;
	}
	#sec1 .container ul li{
		width: calc(25% - 10px);
		height: calc(46vw);
		max-height: 360px;
		margin: 0 5px 10px;
	}
	#sec1 .container ul li a{
		flex-direction: column;
	}
	#sec1 .container ul li a::after{
		top: auto;
		right: 0;
		bottom: 25px;
		left: 0;
		text-align: center;
	}
	#sec1 .container ul li .img_box,
	#sec1 .container ul li .txt_box{
		width:100%;
	}
	#sec1 .container ul li .img_box{
		max-height: 150px;
	}
	#sec1 .container ul li .txt_box{
		text-align: center;
		padding: 20px 10px 60px;
		border:0;
		border-top:2px solid #eee;
	}
	#sec1 .container ul li .txt_box h3{
		font-size: 20px;
		margin: 0px 0 10px;
	}
	#sec1 .container ul li .txt_box p{
		font-size: 14px;
		word-break: keep-all;
	}
}

@media screen and (min-width:1040px){
	#sec1 h2{
		max-width:400px;
		margin: 80px auto 20px;
	}
	#sec1 .container ul{
		max-width:1200px;
	}
	#sec1 .container ul li{
		height:320px;
	}
	#sec1 .container ul li .img_box{
		max-height: 320px;
	}
	#sec1 .container ul li .bg_po1{
		background-size: 80%;
		background-position-y: -30px;
	}
	#sec1 .container ul li .bg_po2{
		background-position-y: -10px;
		background-size: 70%;
	}
	#sec1 .container ul li .txt_box{
		border: none;
		position: absolute;
		bottom: 20px;
		background-color: rgba(0,0,0,0.6);
		width: 90%;
		height: 130px;
		color: #fff;
		left: 0;
		right: 0;
		border-radius: 10px;
		margin: 0 auto;
		padding: 25px 26px 0;
	}
	#sec1 .container ul li .txt_box p{
		font-size: 12.5px;
	}
}





/* SEC 2 */

#sec2{}
#sec2 .container{}
#sec2 .container .conbox{
	height: 75vw;
	position: relative;
	background-image:url(../image/logo1.png);
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 40%;
}
#sec2 .container .conbox>div{
	position: absolute;
}
#sec2 .container .conbox>div h3{font-weight:700; font-size:5vw; color:#286eb5;}
#sec2 .container .conbox>div h4{font-weight:500; font-size:4.1vw; color:#222; line-height: 1.15; margin:2vw 0;}
#sec2 .container .conbox>div p{font-weight:100; font-size:3.2vw; color:#555; line-height: 1.15;}
#sec2 .container .conbox .box1{top:5vw; right:; bottom:; left:0; width:38%; }
#sec2 .container .conbox .box2{top:5vw; right:0; bottom:; left:; width:41%;  text-align:right; }
#sec2 .container .conbox .box3{top:40vw; right:0; bottom:; left:0; width:45%; text-align:center; margin:0 auto}

@media screen and (min-width:768px){
	#sec2 .container .conbox{margin:0 auto; max-width:600px; max-height:360px; background-size: 220px;}
	#sec2 .container .conbox>div h3{font-size:23px;}
	#sec2 .container .conbox>div h4{font-size:19px; margin: 10px;}
	#sec2 .container .conbox>div p{font-size:14px;}
	#sec2 .container .conbox .box1,
	#sec2 .container .conbox .box2{top:20px; text-align: center;}
	#sec2 .container .conbox .box3{top:220px;}
}






/* SEC 3 */

#sec3{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#052b77+0,2055c9+54,112b87+100 */
		background: #052b77; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #052b77 0%, #2055c9 54%, #112b87 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052b77', endColorstr='#112b87',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#sec3 .container .tit_box{color:#fff;}
#sec3 .container .tit_box:before{background-color: #fff;}
#sec3 .container dl{}
#sec3 .container dl dd{
	display: table;
	width:85%;
	margin:0 auto 1em;
}
#sec3 .container dl dd h4{
	float:left;
	width:20%;
	font-weight:900;
	font-size:5vw;
	color:#bbb;
}
#sec3 .container dl dd ul{
	float:left;
	width:80%;
	border-left: 1px solid #ffd059;
	vertical-align: top;
}
#sec3 .container dl dd ul li{
	font-weight:300;
	font-size:3.5vw;
	color:#ddd;
	line-height: 1.5;
	padding: 0 0 0 5%;
}
#sec3 .container dl dd ul li:before{
	content: "·";
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: ;
	color: ;
	margin:0 3px 0 -6px;
}
#sec3 .container dl dd ul li b{color: #bbb;}
#sec3 .container dl dd ul li b:after{
	content: "월";
	margin:0 5px 0 0;
	font-weight: 500;
}

@media screen and (min-width:768px){
	#sec3 .container dl dd{width:37%;}
	#sec3 .container dl dd h4{font-size:20px;}
	#sec3 .container dl dd ul li{font-size:13px;}
}

@media screen and (min-width:1281px){
	#sec3 .container dl{display: flex; justify-content: center; padding: 0 10%;}
	#sec3 .container dl dd{width:auto; flex:1; margin:0 0 0 20px;}
	#sec3 .container dl dd h4{float:none; width:100%;}
	#sec3 .container dl dd ul{float:none; width:95%; margin:10px 0 0 5%; padding: 15px 0 5px;}
	#sec3 .container dl dd ul li{font-size:11px;}
}





/* SEC 4 */

#sec4{padding-right:0;padding-left:0;padding-bottom: 0;}
#sec4 .conbox{}

.tab{
	text-align: center;
	margin:0 auto 3vw;
	max-width:1024px;
}
.tablinks{
	font-weight:500;
	font-size:4vw;
	text-align:center;
	padding: .7em 0;
	border:none;
	color:#666;
	width:30%;
	transition: .3s;
}

.tab .active{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#052b77+0,2055c9+54,112b87+100 */
		background: #052b77; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #052b77 0%, #2055c9 54%, #112b87 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052b77', endColorstr='#112b87',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	color:#fff;
	width:65%;
}

.tabcontent{}
.tabcontent .map_box{}
.tabcontent .map_box iframe{width:100%;height:40vh;}
.tabcontent .info_box{padding:10vw 20px 0;}
.tabcontent .info_box h2{}
.tabcontent .info_box dl{}
.tabcontent .info_box dl dd{}
.tabcontent .info_box dl dd h3{
	font-weight:700;
	font-size:4.5vw;
	color:#333;
}
.tabcontent .info_box dl dd h3 i{
	font-weight:;
	font-size:em;
	margin: 0 5px 0 0;
}
.tabcontent .info_box dl dd p{
	font-weight:300;
	font-size:3.8vw;
	line-height: 1.5;
	margin: .5vw 0 5vw 7vw;
}

@media screen and (min-width:768px){
	.tab{}
	.tablinks{font-size:18px;}
	.tabcontent{
		display: table;
		width:100%;
	}
	.tabcontent:after{
		content: "";
		display: block;
		clear: both;
	}
	.tabcontent>div{width:50%; float:left;}
	.tabcontent .map_box{}
	.tabcontent .map_box iframe{height:300px;}
	.tabcontent .info_box{padding: 0 20px; background-color:#fafafa;}
	.tabcontent .info_box dl{
		height:300px;
		display:flex;
		flex-direction: column;
		justify-content: center;
	}
	.tabcontent .info_box dl dd{margin:10px 0;}
	.tabcontent .info_box dl dd h3{font-size:16px;}
	.tabcontent .info_box dl dd p{font-size:12px;margin:3px 10px 0 25px;}
}

@media screen and (min-width:1280px){
	.tabcontent .info_box{padding:0 50px;}
	.tabcontent .map_box iframe,
	.tabcontent .info_box dl{height:450px}
}



/* corporate identity */
#sec5{
	padding-right:0;
	padding-left:0;
	background-color:rgba(0,0,0,.05);
}
#sec5 .container{}
#sec5 .tit_box p{
	padding:0 10px;
	max-width:720px;
	text-align:justify;
	font-weight: 300;
}
#sec5 .tit_box p span{font-weight: 700; color:#555;}
#sec5 .tit_box p span b{color:#2053c6;}
#sec5 .conbox{
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#sec5 .conbox:after{
	display: block;
	content: "";
	clear: both;
}

#sec5 .img_box{
	width:100%;
	padding:2em 0;
	margin:0 0 1em;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	background-image: linear-gradient(rgba(0, 0, 0, .1) .1em, transparent .1em), linear-gradient(90deg, rgba(0, 0, 0, .1) .1em, transparent .1em);
	background-size: .5em .5em;
}
#sec5 .img_box img{}

#sec5 .img_box1{}
#sec5 .img_box1 img{width:40%;}

#sec5 .img_box2{}
#sec5 .img_box2 img{width:45%;}

#sec5 .img_box3{}
#sec5 .img_box3 img{width:80%;}

@media screen and (min-width:768px){
	#sec5 .conbox{
		max-width:640px;
		flex-direction: row;
		align-items: flex-start;
	}
	#sec5 .img_box1,
	#sec5 .img_box2{width:48%;height:210px;}
	#sec5 .img_box1{margin:0 4% 0 0;}
}

@media screen and (min-width:1280px){
	#sec5 .conbox{max-width:820px;}
	#sec5 .img_box1,
	#sec5 .img_box2{height:250px;}
}



/* corporate identity */
#sec6{
	background: #052b77; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #052b77 0%, #2055c9 54%, #112b87 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #052b77 0%,#2055c9 54%,#112b87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052b77', endColorstr='#112b87',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	height: 90vh;
	min-height:470px;
}
#sec6 .tit_box {
    color: #fff;
}
#sec6 .tit_box:before {
    background-color: #fff;
}
#sec6 .conbox{
	text-align: center;
	margin:0 auto;
	max-width:600px;
}
#sec6 dl{}
#sec6 dd{
	display: table;
	padding: 6vw 0;
	width:65%;
	margin:0 auto;
}
#sec6 dd:nth-child(2){
	border-color:rgba(255,255,255,.2);
	border-style:solid;
	border-width:1px 0;
}
#sec6 .conbox h2{
	color:#efcd77;
	font-size:9vw;
	margin:0 0 0.5em;
}
#sec6 .conbox h3{
	color:#fbf6ddcc;
	font-size:4.5vw;
	font-weight: 500;
	margin:0.5em 0;
	letter-spacing: 0.1em;
}
#sec6 .conbox p{
	color:rgba(218, 165, 32, 0.8);
	font-size:4.5vw;
	font-weight:400;
	letter-spacing: 0.05em;
}


@media screen and (min-width:768px){
	#sec6{height:470px;}
	#sec6 dl{
		display: flex;
	}
	#sec6 dd{
		width:33%;
		padding: 10px 0;
	}
	#sec6 dd:nth-child(2){
		border-width: 0 1px;
	}
	#sec6 .conbox h2{font-size:30px;}
	#sec6 .conbox h3{font-size:14px;}
	#sec6 .conbox p{font-size:12px;}
	
}

@media screen and (min-width:1280px){

}




/* footer */
footer{
	background-color:#000;
	color:#eee;
	text-align: center;
	font-size:12px;
	padding: 1.5em 0 1em;
}
footer b{font-weight:900; color:#fff;}

footer p{font-size:10px; color:#aaa; margin:10px 0; font-weight: 300; text-transform: uppercase;}
footer p a{margin:0 10px; letter-spacing: .1em; }
footer p a.active{color:#286eb5; font-weight: 700;}