@charset "utf-8";

/* ************************************ SUB VIAUAL ************************************ */
#subVisual{position:relative; overflow:hidden; width:100%; height:356px; margin-top:90px;}
#subVisual .visualVideo{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
}
#subVisual .visualVideo > video{min-width:100%; min-height:100%; object-fit: cover;}
#subVisual .visualVideo > iframe{min-width:100%; min-height:100%;}
#subVisual .visualImg{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-webkit-transition:transform 1500ms  cubic-bezier(0, 0.41, 0.58, 1) ;
	-moz-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-o-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-ms-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
    transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-ms-transform: scale(1.1,1.1) rotate(0.002deg);
    -o-transform: scale(1.1,1.1) rotate(0.002deg);
    -moz-transform: scale(1.1,1.1) rotate(0.002deg);
    -webkit-transform: scale(1.1,1.1) rotate(0.002deg);
     transform: scale(1.1,1.1) rotate(0.002deg);
}
#subVisual .visualTxt{position:relative; z-index:9; width:100%; height:100%; text-align:center; line-height:1.2; color:#fff;}
#subVisual .visualTxtBox{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0px 30px;}
#subVisual .visual-category,
#subVisual .visual-txt{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(30px); 
    -o-transform: translateY(30px); 
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px); 
     transform: translateY(30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#subVisual .visual-category{
	font-weight:600; 
	font-size:44px; 
	margin-bottom:40px;
}
#subVisual .visual-txt{
	font-size:18px; 
	font-weight:400; 
	line-height:1.5;
	padding-bottom:7px;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
/* SubVisual :: active */
#subVisual.active .visualImg{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
  -o-transform: scale(1.0,1.0) rotate(0.002deg);
  -moz-transform: scale(1.0,1.0) rotate(0.002deg);
  -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
  transform: scale(1.0,1.0) rotate(0.002deg);
}
#subVisual.active .visual-category,
#subVisual.active .visual-txt{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
  -o-transform: translateY(0px); 
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px); 
  transform: translateY(0px);
}
/* -------- SubVisual 반응형 -------- */
@media all and (max-width:1200px){
  #subVisual{margin-top:80px;}
	#subVisual .visual-category{font-size:38px;margin-bottom:30px;}
}
@media all and (max-width: 991px){
	#subVisual .visual-category{font-size:33px;}
	#subVisual .visual-txt{font-size:16px;}
}
@media all and (max-width: 768px){
  #subVisual{margin-top:60px;}
	#subVisual .visualTxt{height:calc(100% - 45px);}
}
@media all and (max-width: 767px){
  #subVisual{height:250px; min-height:auto;}	
	#subVisual .visual-category{font-size:23px;margin-bottom:20px;}
	#subVisual .visual-txt{font-size:14px;}
}


/* ************************************ SUB MENU ************************************ */
/* --------  SUB MENU PC -------- */
#subMenuPC{position:relative; margin-top:0px; width:100%; display:block; height:60px; background-color:#fff; border-bottom: 1px solid #bbb; z-index:11}
#subMenuPC .subMenuInner{text-align:left; width:100%; height:60px;}
#subMenuPC .subMenuInner ul{
  display:table;position:relative;width:100%;height:60px;
  list-style: none;
}
#subMenuPC .subMenuInner ul li {
  display:table-cell; vertical-align:middle;
  font-size:90%;font-weight:400;color:#001848;
}
#subMenuPC .subMenuInner ul li > a{font-size:100%;font-weight:400;color:#001848;}
#subMenuPC .subMenuInner ul li > span{color: #1e8ab1;}
#subMenuPC.fixed {position:fixed; width:100%; top:0px; left:0; height:60px; margin-top:0px; z-index:9999;}/* SUB MENU PC :: FIXED */
#subMenuMobile{display:none;}/* SUB MENU MOBILE :: HIDDEN */
/* -------- SUB MENU :: 반응형 -------- */
@media all and (max-width: 991px){
    #subMenuPC,
	#subMenuPC .subMenuInner,
    #subMenuPC .subMenuInner ul	{height:50px;}
}
@media all and (max-width:768px){
	#subMenuPC{display:none} /*  SUB MENU PC :: HIDDEN */
}


/* ************************************  :: TAB 스타일 ::  ************************************ */
/* ---------------- 메뉴탭 : 상단 ---------------- */
.tabArea{padding:2% 0 0;}
.tabArea ul{display:flex; flex-wrap: wrap; justify-content:center;}
.tabArea ul li{flex:1; -ms-flex: 1;border:1px solid #1e8ab1;background-color:#fff;}
/*.tabArea ul li{margin-left:10px;}*/
.tabArea ul li{margin-left:-1px;}/*탭 붙은 스타일*/
.tabArea ul li:first-child{margin-left:0;}
.tabArea ul li > a{
	display:table; 
	position:relative;
	width:100%;
	height:52px;line-height:1;
	text-align:center;
	color:#1e8ab1; 
	font-size:100%; 
	font-weight:500;
	word-break:keep-all;
}
.tabArea ul li > a > span{display:table-cell; vertical-align:middle; padding:0 18px;}
.tabArea ul li:hover{background-color:#f9f9f9;}
.tabArea ul li.on{background-color:#1e8ab1;}
.tabArea ul li.on> a{color:#fff;}
/* -------- TAB 스타일 :: 반응형 -------- */
@media all and (max-width:1024px){
    .tabArea ul li > a{height:44px;}
}
@media all and (max-width:575px){
	.tabArea{padding:15px 0 0;}	
    .tabArea ul li{flex:100%; margin-left:0px; margin-right:0px; margin-bottom:-1px;}
    .tabArea ul li:last-child{margin-bottom:0}
    .tabArea ul li > a{height:36px;}
}


/* ************************************  :: Button 스타일 ::  ************************************ */
.buttonWhite{
	cursor:pointer;display:block;margin:0 0;padding:10px 20px;width:250px;border:1px solid #667491;background:transparent;
	font-size:90%;font-weight:400;color:#001848;text-align:left;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
.buttonWhite:hover{background-color:#001848;color:#fff;}
.buttonWhite:hover a{color:#fff;}
.buttonWhite i{float:right;margin-top:4px;}
@media (max-width: 991px) {
.buttonWrap{display:flex; flex-wrap: wrap; margin-top:30px;}
.buttonWhite {flex:1; -ms-flex: 1; padding:10px 15px; margin-right:10px; text-align:left;}
.buttonWhite:last-child{margin-right:0px;}
}
@media (max-width: 575px) {
.buttonWhite {padding:7px 15px;margin-right:5px;}
}


/* ************************************  :: Accordion 스타일 ::  ************************************ */
/* ---------------- Accordion 스타일 : 펼쳐지고 접히고 ---------------- */
.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 0;
  /*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);*/
}
.panel-heading {
  padding: 14px 15px;
  border: 0;  
  background-color:#001848; color: #fff;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;  
  color: inherit; font-size: 110%; font-weight:500; 
  text-align:center;
  /*cursor:pointer;*/
}
/*.panel-title:after {
  content: ' \2237';   
  font-weight:300;
  float: right;  
}*/
.panel-body {
  padding: 0px 0px;
}
.panel-group {
  margin-bottom: 20px;
}
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0px;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid #ddd;
}
.panel-app > .panel-heading {
  color: #001848;
  background:rgba(0,24,72,0.1);
  border: 1px solid #ddd;
  /*color: #fff; background-color:#1e8ab1;*/
}
.panel-app > .panel-heading > .panel-title{ cursor:pointer; text-align:left; font-weight:400;}
.panel-app > .panel-heading > .panel-title:after {
  content: ' \2192';   
  font-weight:400;
  float: right;  
}   
.panel-app > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: transparent;margin-top:-1px;
}
@media (max-width: 1400px) {
  .panel-heading {padding: 8px 12px;}
}
@media (max-width: 575px) {
  .panel-heading {padding: 8px 10px;}
  .panel-title:after {margin-top:0px;}
}

/* ---------------- Accordion 스타일 : 펼쳐짐 토글 ---------------- */
.accordionWrap{width:100%;}
.accordionWrap .accordion {
  background-color: #fff;
  border:1px solid #001848;
  color: #001848;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom:5px;
}
.accordionWrap .active,
.accordionWrap .accordion:hover {background-color: #001848;color: #fff !important;}
.accordionWrap .accordion:after {
  content: '\002B';
  float: right;
  margin-left: 5px;
}
.accordionWrap .active:after {content: "\2212";color: #fff;}
.accordionWrap .acdPanel {
  padding: 0 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
@media (max-width: 575px) {
.accordionWrap .accordion {padding: 8px;} 
}


/* ************************************ CONTENT  :: 컨텐츠 레이아웃 ************************************ */
#content{padding:7% 0 10%;}
.subTitle{font-size:40px;font-weight:600;text-align:center;margin-bottom:10px;}
.subTitleBar{text-align:center;margin-bottom:100px;}
.subtitTxt{font-size:270%;font-weight:600;line-height:1;letter-spacing:-0.5;}
.lgTxt{font-size:130%;font-weight:500;margin:20px 0 20px;}
.contitTxt{font-size:170%;font-weight:600;letter-spacing:-1.0;line-height:1.2;margin-top:0px;margin-bottom:20px;}
/* -------- 컨텐츠 레이아웃 :: 반응형 -------- */
@media all and (max-width:1400px){
	.subTitleBar{margin-bottom:7%;}
}
@media all and (max-width:1024px){
	#content{padding:8% 0 13%}	
    .subTitle{font-size:36px;}
}
@media all and (max-width:991px){
	#content{padding:10% 0 10%}	
    .subTitle{font-size:33px;margin-bottom:5px;}
    .subtitTxt{font-size:200%;}
    .contitTxt{margin-top:30px; margin-bottom:10px;}

	/*.contentsTit{font-size:150%;}*/
}
@media all and (max-width: 767px) {
	#content{padding:10% 0px 15%}
	.subTitle{margin-bottom:0;}
	.subTitleBar{margin-bottom:8%;}
}
@media all and (max-width:575px){
	#content{padding:15% 0px 15%}
    .subTitle{font-size:23px;}
	.subTitleBar{margin-bottom:10%;}
    .subtitTxt{font-size:180%;}
    .lgTxt{margin:10px 0 10px;}
    .contitTxt{font-size:130%; margin-top:20px; margin-bottom:10px;}
}


/* ************************************  Company  ************************************ */
/* ---------------- About us ---------------- */
.centerTxtBox{width:100%; height:100%; display:flex; flex-wrap:wrap; align-content:center;}
.centerTxtBox h4{width:100%;}
.centerTxtBox p{width:100%;}


/* ---------------- Leadership ---------------- */
.txtBox01{width:100%;height:auto;box-sizing: border-box;}
.txtBoxTitBlock{position:relative;width:100%;padding:15px 0;}
.txtBoxTitBlock > img{position:absolute;top:27px;left:350px;}
.txtBoxsubTitBlock{padding:20px 0;border-top:1px solid #ddd;font-size:120%;font-weight:500;}
.txtBoxTit{display:inline-block;margin-right:15px;font-size:160%;font-weight:600;}
/* UL style*/
.txtBox01 .txtGroup{width:100%;height:auto;}
.txtBox01 .txtGroup:after{clear:both; display:block; content:"";}
.txtBox01 .txtGroup ul{width:100%;padding-left:15px;}
.txtBox01 .txtGroup ul li{line-height:1.5;}
.ListSquareNavy{list-style-image: url('/imgs/common/dot_square.jpg'); width:100%; padding-left:15px;}
.ListSquareNavy li{padding:4px 0 4px 10px;}
.ListSquareBlue{list-style-image: url('/imgs/common/dot_square_blue.jpg'); width:100%; padding-left:15px;}
.ListSquareBlue li{padding:4px 0 4px 10px;}

@media all and (max-width:1024px){
	.txtBoxTitBlock{padding:0px 0 15px;}
	.txtBoxTit{margin-right:10px;}
	.txtBoxTitBlock > img{top:5px;left:300px;}
}
@media all and (max-width:991px){
	.txtBoxsubTitBlock{padding:15px 0;}
	.txtBoxTitBlock > img{top:10px;left:260px;height:25px;}
}
@media all and (max-width:767px){
	.txtBoxTit{font-size:140%;}
}

/* ---------------- Journey ---------------- */
#scrollbar {
  width: 2px;
  height: 100%;
  padding: 0;
  margin: 0 0 0 auto;
  left: calc(50% - 1px);;
  top: 0;
  position: fixed;
  background-color: transparent;
}
#scrollbar #bar {
  width: 100%;
  height: 0%;
  background-color: #1e8ab1;
  z-index:9;
}
.timeline {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: transparent;
  padding-bottom:50px;
}
.timeline:nth-last-child(1) {padding-bottom:0px;}
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #1e8ab1;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}
/* Container around content */
.containerTimeline {
  padding: 0px 0px;
  position: relative;
  width: 50%;
  margin:0px;
}
/* The circles on the timeline */
.containerTimeline::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  right: -8px;
  background-color:#fff;
  border: 3px solid #1e8ab1;
  top: 0;
  border-radius: 50%;
  z-index: 1;
}
/* Place the containerTimeline to the left */
.left {left: 0; text-align:right;}
/* Place the containerTimeline to the right */
.right {left: 50%;}
/* Fix the circle for containers on the right side */
.right::after {
  left: -9px;
}
/* The actual content */
.content {
  padding: 0px 80px;
  background-color: transparent;
  position:relative;
  height:auto;
}
.hDate{font-size:220%;font-weight:500;margin-bottom:20px;line-height:1.0;}
.content img{display: block; max-width: 100%; height: auto; margin-top:30px;}
.left .content img{float:right;}

@media screen and (max-width: 1200px) { 
   /*.containerTimeline::after { top: 7px; }*/
  .content { padding: 0 50px;}
  .hDate{font-size:200%;}
}
@media screen and (max-width: 991px) { 
  /* Place the timelime to the left */
  .timeline::after {width:1px; left:6px;}  
  /* Full-width containers */
  .containerTimeline {
  width: 100%;
  padding-left: 35px;
  padding-right: 0px;
  }  
  /* Make sure that all arrows are pointing leftwards */
  .containerTimeline::before {
  left: 15px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }
  .containerTimeline::after {border: 1px solid #1e8ab1;}
  .left {padding-right:0px;padding-left:25px;text-align:left;}
  .right {padding-left:25px;}  
  /* Make sure all circles are at the same spot */
  .left::after, .right::after {left: -2px;}  
  /* Make all right containers behave like the left ones */
  .right {left: 0%; }  
  .content { padding: 0 40px 0 20px;}
  .hDate{font-size:180%;}
  .content img{margin-top:20px;}
  .left .content img{float:left;}
}
@media screen and (max-width: 575px) { 
  .containerTimeline::after { width: 10px; height: 10px; top: 0px;}
  .left::after, .right::after {left: 0px;}
  .content { padding: 0 0;}
  .hDate{font-size:150%;margin-bottom:15px;}
  .content img{margin-top:15px;}
}


/* ************************************  Technology  ************************************ */
/* ---------------- SoLA Technology ---------------- */
.bgSky{position:relative; width:100%; height:auto; background-color:#eef5f8; padding:0% 0 10%;}
.movieBoxWrap{position:relative; width:100%; height:440px; overflow:hidden;}
.movieBoxWrap:after{clear:both; display:block; content:"";}
.movieBoxVideo{position:relative;width:100%;height:auto;}
.movieBoxTxtWrap{
	position:absolute; top:0; left:0; width:100%; height:440px; margin:0 0; z-index:5;
	/* -ms-transform:translateY(-50%);-o-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);*/
}
/* text 가운데 */
.boxTxt{width:100%; height:100%; background:rgba(0,24,72,0.8); padding:0 20%; display:flex; flex-wrap:wrap; align-content:center; text-align:center;}
.boxTxt h4,p {width:100%;/*text-align:justify;*/}
.contitBigTxt{font-size:180%;font-weight:600;letter-spacing:-1.0;line-height:1.2;margin-top:0px;margin-bottom:30px;}
.imgBox{border:1px solid #d1d1d1;background-color:#fff;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.imgBox:hover{box-shadow: 5px 5px 10px 0px #ddd;}

.outsideWrap{width:100%;background:#fff;border:1px solid #fff;border-radius:30px;padding:100px 60px 0;margin:0 auto;}
.roundWrap{border:1px solid #d1d1d1;border-radius:30px;padding:50px 20px;}
.roundWrap.gray{background:#f6f6f6;}
.tblSola{width:100%; height:auto; border-collapse:collapse;}
.tblSola th{background-color:#fff;border:1px solid #1e8ab1;padding:15px 7px;text-align:center;font-size:16px;font-weight:500;line-height:1;}
.tblSola td{padding:6px 7px;text-align:center;font-size:16px;}

@media (max-width: 1419px) {
	.outsideWrap{padding:70px 50px 0;}
}
@media all and (max-width:1024px){
	.movieBoxWrap,.movieBoxTxtWrap,.boxTxt{height:400px;}
	.boxTxt{padding:10% 10%;}
}
@media (max-width:991px) {
	.movieBoxVideo{width:auto; height:600px;}
  .contitBigTxt{margin-bottom:20px;}	
	.outsideWrap{border-radius:20px;padding:50px 30px 0;}
	.roundWrap{border-radius:20px;}
	.tblSola th{font-size:15px;}
	.tblSola td{font-size:14px;}
}
@media all and (max-width:767px){
  .bgSky{padding:0% 0 15%;}
}
@media all and (max-width:575px){
	.movieBoxWrap,.movieBoxTxtWrap,.boxTxt{height:300px;}
	.boxTxt{padding:30px 30px;}
  .contitBigTxt{font-size:130%;}	
	.outsideWrap{padding:50px 0px 0;}
	.roundWrap{padding:30px 15px;}
	.tblSola th{font-size:13px;}
	.tblSola td{font-size:13px;}
}
@media all and (max-width:400px){
	.movieBoxWrap,.movieBoxTxtWrap,.boxTxt{height:350px;}
	.boxTxt{padding:30px 15px;}
}

/* ---------------- Literatures ---------------- */
.bgImg{position:relative;background:#eef5f8 url(/imgs/technology/literatureBg.jpg) no-repeat 50% 50%; background-size:cover; padding:7% 0 0; overflow:hidden;}
@media (max-width: 991px){
	.bgImg{padding:10% 0 0%;}
}
@media all and (max-width:575px){
	.bgImg{padding:15% 0 0%;}
}

/* ---------------- Patents ---------------- */
.txtDes{font-size:140%;letter-spacing:-0.5px;}
.tbl_Patents{width:100%; height:auto; border-collapse: collapse;margin-bottom:80px}
.tbl_Patents th{width:15%;background-color:#1e8ab1;color:#fff;padding:15px 7px;text-align:center;font-size:16px;line-height:1;}
.tbl_Patents td{width:15%;border-bottom:1px solid #001848;padding:6px 7px;text-align:center;font-size:16px;}
.tbl_Patents td.first{width:40%;color:#1e8ab1;font-weight:500;font-size:18px;text-align:left;padding:6px 20px;}
.tbl_Patents td.bold{font-weight:500;}
.tbl_Patents td.txtleft{text-align:left !important;}
@media all and (max-width: 1200px){	
  .txtDes{font-size:130%;}
}
@media (max-width: 991px) {
  .txtDes{font-size:120%;}
  .tbl_Patents th{padding:12px 7px; font-size:15px;}
  .tbl_Patents td{font-size:14px;}
  .tbl_Patents td.first{font-size:15px;}
}
@media (max-width: 575px) {
  .txtDes{font-size:110%;}
  .tbl_Patents th{padding:10px 7px; font-size:13px;}
  .tbl_Patents td{padding:6px 7px; font-size:13px;}
  .tbl_Patents td.first{padding:6px 7px;font-size:13px;}
}
.patentsImgWrap{position:relative;width:100%;height:auto;background-color:#eef5f8;padding:100px 0 100px;}
/*.patentsImg{display:flex; flex-wrap: wrap; justify-content:space-between;;width:100%;max-width:1390px;margin:0 auto;}
.patentsImg img{margin:15px auto;}
@media all and (max-width:1470px){
	.patentsImg{width:100%;max-width:100%;}
}*/
@media all and (max-width:1024px){
	.patentsImgWrap{padding:80px 0 50px;}
	.tbl_Patents{margin-bottom:60px}
	/*.patentsImg img{width:290px;}*/
}
@media all and (max-width:768px){
	.patentsImgWrap{padding:70px 0 40px;}
	/*.patentsImg img{width:250px;}*/
}
@media all and (max-width:575px){
	.tbl_Patents{margin-bottom:50px}
	.patentsImgWrap{padding:50px 0 20px;}
}
@media all and (max-width:320px){
	.tbl_Patents{margin-bottom:5%;}
}



/* ************************************  Innovation  ************************************ */
/* ---------------- Applications ---------------- */
.tab {
 /*  float: left;*/
  width: 100%;
  height:auto;
  border: 0px;
  background-color: #fff;
}
.tab button {
  display: block;
  background-color: #fff;
  border: 1px solid #001848;
  color: #001848;
  padding: 8px 12px;
  margin-bottom:10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 90%;
  font-weight:400;
}
.tab button:after {
  content: ' \2192';
  font-weight:300;
  float: right; 
}
.tab button:hover {
  background:rgba(0,24,72,0.07); color:#001848;
}
.tab button.active {
  background-color: #1e8ab1; border: 1px solid #1e8ab1; color:#fff;
}
.tab p:nth-child(odd){float:left;width:24%;border-right:1px solid #ddd;}
.tab p:nth-child(even){float:left;width:66%;padding-left:5%;}
.tabcontent {
 /* float: left;*/
  width: 100%;
  height:auto;
  padding: 0px 0px;
  border: 0px;
}
@media all and (max-width: 1200px){	
.tab p:nth-child(odd){width:29%;}
.tab p:nth-child(even){width:63%;padding-left:3%;}
}
@media (max-width: 1024px) {
.tab button {padding: 7px 7px;}
}


/* ************************************  Product  ************************************ */
.bgDianaImg{
	position:relative; background:#fff url(/imgs/product/diana_bg.jpg); 
	background-repeat:no-repeat; background-size:cover; padding:0 50px; overflow:hidden;
}
.bgFeatureImg{
	position:relative; background:#fff url(/imgs/product/diana_img_08.jpg); 
	background-repeat:no-repeat; background-size:cover; padding:7% 0 5%; overflow:hidden;
}
.specTitTxt{font-size:200%; font-weight:600; line-height:1; color:#1e8ab1; letter-spacing:-0.5; margin-bottom:30px;text-align:left;}
/* ---------------- 제품탭 : 다이아나 스펙 ---------------- */
ul.tabs{
  display:flex;
  justify-content: center;
  margin: 0px; padding: 0px;
}
ul.tabs li{
  flex: 1;
  /*border:1px solid #fff;*/
  margin: 0; padding: 0;
  cursor: pointer;
}
ul.tabs li img{ border:1px solid #fff;}
ul.tabs li.on img{
  border:1px solid #001848;
}
.tab-content{
  display: none;
}
.tab-content.on{
  display: inherit;
}

/* ---------------- Diana ---------------- */
.tblSpec{position:relative; width:100%; height:auto;border-collapse: collapse;}
.tblSpec th{width:25%;background-color:#1e8ab1;color:#fff;padding:15px 7px;text-align:center;font-size:16px;line-height:1;}
.tblSpec td{width:25%;border-bottom:1px solid #001848;padding:6px 5px;text-align:center;font-size:16px;}
.tblSpec td:first-child{font-weight:500;}
.tblSpec .txtPoint{color:#dc0087;}

.tblTit{font-size:110%;font-weight:600;text-align:center;margin-bottom:10px;}
.tblWrap{border:1px solid #ddd;border-top-left-radius:20px;border-top-right-radius:20px;background-color:#f9fafc;padding:15px 0px 0px;}
.tblSize{position:relative;width:100%;height:auto;border-collapse: collapse;}
.tblSize th{width:21%;color:#fff;padding:10px 3px;text-align:center;font-size:12px;line-height:1;}
.tblSize th:nth-child(1){width:30%;}
.tblSize th:nth-child(2){width:28%;}
.tblSize.low th{background-color:#129587;}
.tblSize.medium th{background-color:#1d91ca;}
.tblSize.high th{background-color:#17469e;}
.tblSize.ultra th{background-color:#52429a;}
.tblSize td{width:21%;background-color:#fff;border-bottom:1px solid #ddd;padding:6px 3px;text-align:center;font-family:'Noto Sans KR';font-size:12px;}
.tblSize td:nth-child(1){width:30%;font-weight:500;}
.tblSize td:nth-child(2){width:28%;}
.tblSize.low td:nth-child(1){background-color:#e8f1f0;}
.tblSize.medium td:nth-child(1){background-color:#e6f4f7;}
.tblSize.high td:nth-child(1){background-color:#dfeef5;}
.tblSize.ultra td:nth-child(1){background-color:#e6e6f0;}
.tblSize tr:last-child td{border-bottom:0px;}
.tblSize .txtPoint{color:#dc0087;}
.botDiana{position:relative;width:100%;margin-top:-100px;}
.botDiana span{display:inline-block;margin-left:20px;font-size:75%;line-height:1.2;text-align:left;}
@media (max-width: 1400px) {
  .tblSpec th{padding:10px 7px;}
  .tblSize th{font-size:14px;}
  .tblSize td{font-size:13px;}
}
@media (max-width: 991px) {
	.bgDianaImg{padding:0 30px;}
  .specTitTxt{font-size:180%;}
  .specTitTxt.tc{text-align:center;}
  .tblSpec th{padding:12px 7px; font-size:15px;}
  .tblSpec td{font-size:15px;}
}
@media (max-width: 575px) {
	.bgDianaImg{padding:0 15px;}
	.bgFeatureImg{padding:10% 0 7%;}
  .specTitTxt{font-size:150%;margin-bottom:20px;}
  .tblSpec th{padding:10px 3px; font-size:13px;}
  .tblSpec td{padding:4px 3px; font-size:13px;}
  .tblSize th{padding:6px 3px; font-size:13px;}
  .tblSize td{padding:4px 3px; font-size:13px;}	
  .botDiana{margin-top:0px;text-align:center;}
  .botDiana span{margin-left:10px;}
}



/* ************************************  IR  ************************************ */
/* ---------------- IR data ---------------- */
.tbl_IR{width:100%; height:auto; border-collapse:collapse; border-top:2px solid #001848;}
/*.tbl_IR tr:hover{background:rgba(0,140,210,.025);cursor:pointer;}*/
.tbl_IR th{white-space:nowrap;border-bottom:1px solid #d6d6d6;background:#f9f9f9;font-size:16px;font-weight:500;padding:15px 10px;text-align:center;}
.tbl_IR td{padding:10px 10px;border-bottom:1px solid #d6d6d6;font-size:16px;}
.tbl_IR td.num{width:7%; text-align:center;}
.tbl_IR td.title{width:80%; text-align:left;}
.tbl_IR td.download{width:13%; text-align:center;}
.pagination{text-align:center;display:block;margin-top:5%;}
.pagination a{display:inline-block;padding:2px 5px;border:1px solid #fff;min-width:1em;color:#001848;}
.pagination a:hover{background:#f7f7f7;border:1px solid #f7f7f7;}
.pagination a.active{color:#1e8ab1;font-weight:500;border:1px solid #fff;}

@media (max-width:767px){
    .tbl_IR th {padding:7px 7px;font-size:15px;}
    .tbl_IR td {padding:5px 7px;font-size:15px;}
}
@media (max-width: 575px){
    .tbl_IR th {font-size:14px;}
    .tbl_IR td {font-size:14px;}
	.tbl_IR td.num{width:5%;}
	.tbl_IR td.title{width:80%;}
	.tbl_IR td.download{width:15%;}
}


/* ************************************  Contact  ************************************ */
.form_container {
  border:0px;
  background-color:#fff;
  box-shadow:none;  
  padding: 5% 0 0;
  font-size:100%;
}
.col-20 {
  float: left;
  width: 100%;
  margin-bottom:7px;
}
.col-80 {
  float: left;
  width: 100%;
  margin-bottom:30px;
}
.rowF:after {
  content: "";
  display: table;
  clear: both;
}
input[type=text], textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #001848;
  resize: vertical;	
  font-size:80%;
  font-weight:300;
  line-height:1.3em;
}
::placeholder {color:#aaa;}
::-webkit-input-placeholder {color:#aaa;} /* Edge */
:-ms-input-placeholder {color:#aaa;} /* Internet Explorer 10-11 */
label {
  padding: 0px 0px 0px 0px;
  display: inline-block;
	font-size:100%;
	font-weight:400;
}
input[class=submit] {
  background:#001848;border:1px solid #001848;
  color: #fff;
  padding: 7px 60px;
  cursor: pointer;
  margin-top:20px;
  font-size:100%;
  border-radius:0;
  -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
input[class=submit]:hover {background:#1e8ab1;border:1px solid #1e8ab1;}

input[type=reset] {
  background-color: #fff;
  color: #001848;
  padding: 7px 50px;
  border: 1px solid #001848;
  cursor: pointer;
  margin-top:20px;
  margin-left:10px;
  font-size:100%;
  border-radius:0;
  -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
input[type=reset]:hover {background: #777;border: 1px solid #777;color: #fff;}
input[type=radio]{margin-top:9px;}
.formBtn{text-align:left;margin-top:0px;}
.checkWrap {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size:90%;
  font-weight:400;
}
.checkWrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #fff;
  border:1px solid #001848;
}
.checkWrap:hover input ~ .checkmark {
  background-color: #fff;
}
.checkWrap input:checked ~ .checkmark {
  background-color: #001848;
  border:1px solid #001848;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkWrap input:checked ~ .checkmark:after {
  display: block;
}
.checkWrap .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 991px){
.checkWrap { padding-top:0px;}
}

@media screen and (max-width: 767px) {	
.introTit{font-size:100%;margin-top:7%;margin-bottom:20px;line-height:1.3em;}
.inquiryTit{font-weight:500;margin-top:10px;margin-bottom:10px;}
.col-20, .col-80, input[class=submit], input[type=reset]{width: 100%;}
.col-20, .col-80 {margin-bottom:10px;}
input[type=text], textarea {margin-bottom:10px;padding: 5px;font-size:100%;}
input[type=radio]{margin-top:5px;}	
input[type=reset] {margin-top:10px;margin-left:0px;}
.formBtn{text-align:center;}
}


/* ************************************  ETC  ************************************ */
/* ANIMATION */
.animate {
  -webkit-animation-duration: 1s;
          animation-duration:1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animationTxt{
animation: fadeIn;
-webkit-animation-duration: 1s;
          animation-duration:1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
animation-delay:0.3s;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}