@charset "utf-8";

/*Montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
/*{font-family: 'Montserrat', sans-serif;}*/
/*Titlllium Web*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');
/*{font-family: 'Titillium Web', sans-serif;}*/


/*FULLPAGE*/
#section4,
#section4 .fp-tableCell,
#section5,
#section5 .fp-tableCell{height:auto !important;}
.goto_top{display:none;}
.editMode .multipleContentsDiv{padding:250px 0 !important;}
.editMode #multipleContentsDiv_templet_orga_C_19,
.editMode #multipleContentsDiv_templet_orga_C_20{padding:0 !important;}
@media all and (max-width:1024px){
  .goto_top{display:block;}
}

/*FULLPAGE콘트롤*/
#fp-nav{position:fixed;right:5%;top:50%;}
#fp-nav:before{content:"";display:block;width:1px;height:3000px;background:rgba( 255,255,255,0.5 );position:fixed;top:-1000px;right:4.5px;}
#fp-nav ul{}
#fp-nav ul li{width:150px !important;height:auto !important;margin:10px 0 !important;}
#fp-nav ul li a{box-sizing:border-box;padding-right:35px;text-align:right;}
#fp-nav ul li a span{width:10px !important;height:10px !important;background:#FFF !important;left:auto !important;right:0;top:11px !important;margin:0 !important;}
#fp-nav ul li:hover a span,
#fp-nav ul li a:hover span,
#fp-nav ul li a.active span{margin:0 !important;}
#fp-nav ul li a:before{display:inline-block;font-size:14px;font-family: 'Titillium Web', sans-serif;font-weight:600;color:#FFF;}
#fp-nav ul li:nth-child(1) a:before{content:"MAIN";}
#fp-nav ul li:nth-child(2) a:before{content:"MAJOR";}
#fp-nav ul li:nth-child(3) a:before{content:"FOCUS ON";}
#fp-nav ul li:nth-child(4) a:before{content:"INFORMATION";}
#fp-nav ul li:nth-child(5),
#fp-nav ul li:last-child{display:none;}
#fp-nav ul li a.active{color:#aebd3e !important;}
#fp-nav ul li a:hover span,
#fp-nav ul li a.active span{width:15px !important;height:15px !important;top:7px !important;right:-3px !important;}
#fp-nav ul li a:hover span{background:#666 !important;}
#fp-nav ul li a.active span{background:#0054ff !important;}
.fp-viewing-1 #fp-nav ul li a span,
.fp-viewing-2 #fp-nav ul li a span{background:#DDD !important;}
.fp-viewing-1 #fp-nav ul li a:before,
.fp-viewing-2 #fp-nav ul li a:before{color:#222;}
.fp-viewing-1 #fp-nav:before,
.fp-viewing-2 #fp-nav:before{background:rgba( 0,0,0,0.1 );}
.fp-viewing-1 #fp-nav ul li a.active span,
.fp-viewing-2 #fp-nav ul li a.active span{background:#222 !important;}

/*COMMON*/
#multipleContentsDiv_templet_orga_C_16,
#multipleContentsDiv_templet_orga_C_17,
#multipleContentsDiv_templet_orga_C_18,
#multipleContentsDiv_templet_orga_C_19{max-width:1600px;margin: 0 auto;overflow:hidden;position:relative;}
#multipleDiv_templet_orga_C_16,
#multipleDiv_templet_orga_C_17,
#multipleDiv_templet_orga_C_18{padding:50px 0;}
@media all and (max-width:1600px){
  #multipleContentsDiv_templet_orga_C_16,
  #multipleContentsDiv_templet_orga_C_17,
  #multipleContentsDiv_templet_orga_C_18,
  #multipleContentsDiv_templet_orga_C_19{max-width:96%;}
}

/*BG*/
#section1,
.editMode #multipleDiv_templet_orga_C_16{background:url(../../images/major_bg.jpg) center;background-size:cover;}
#section2,
.editMode #multipleDiv_templet_orga_C_17{background:url(../../images/focus_bg.jpg) center;background-size:cover;}
#section3,
.editMode #multipleDiv_templet_orga_C_18{background:url(../../images/info_bg.jpg) center top no-repeat;}

/*메인비주얼****************************************/
#section0 .multipleDiv,
#section0 .multipleDiv .multipleContentsDiv{height:100% !important;}
#multipleContentsDiv_templet_orga_C_15{display:flex;align-items:center;justify-content:center;}
#menu5595_obj29{position:absolute;top:0;left:0;width:100% !important;height:100% !important;}
#menu5595_obj43{width:1600px !important;}
.visual_slogan {  position: relative;  color: rgb(255, 255, 255);  line-height: 1.3;  text-align: center;  width: 650px;  margin: 150px auto;  padding: 100px 30px;}
.visual_slogan::before,
.visual_slogan::after{  content: "";  display: block;  width: 100%;  height: 70px;  position: absolute;  left: 0px;}
.visual_slogan::before {  top: 0px;  border-width: 20px 20px 0px;  border-style: solid solid solid;  border-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3);  border-image: initial;  border-bottom: 0px;}
.visual_slogan::after {  bottom: 0px;  border-width: 0px 20px 20px;  border-style: solid solid solid;  border-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3);  border-image: initial;  border-top: 0px;}
.visual_slogan strong {  font-size: 41px;  font-family: S-CoreDream-6Bold;  letter-spacing: -1px;}
.visual_slogan strong span {  display: block;}
.visual_slogan p {  font-size: 30px;  font-family: S-CoreDream-3Light;  margin-top: 20px;}
@media only screen and (max-width:1600px){
  #menu5595_obj43{width:96% !important;}
}
@media only screen and (max-width:1280px){
  .visual_slogan {	width: 550px;	padding: 80px 20px;  }
  .visual_slogan::before,
  .visual_slogan::after {	border-width: 15px;  }  
  .visual_slogan strong {	font-size: 31px; }
  .visual_slogan p {	font-size: 20px; }  
}
@media only screen and (max-width:1024px){
  #section0 .multipleDiv,
  #section0 .multipleDiv .multipleContentsDiv{height:auto !important;}
  #multipleContentsDiv_templet_orga_C_15{display:block;}
}
@media only screen and (max-width:768px){
  .visual_slogan {	width: unset;	margin: 100px 0px;  }
  .visual_slogan::before,
  .visual_slogan::after{display:none;}  
  .visual_slogan strong {	font-size: 25px;  }
  .visual_slogan p {	font-size: 16px;  }
}

/*타이틀*/
.h2_title{text-align:center;color:#000;margin-bottom:50px;font-size:35px;line-height:1;font-weight:700;font-family: 'Titillium Web', sans-serif;}
.h2_title::before,
.h2_title::after{content:"";display:block;width:7px;height:18px;background:#113488;margin:10px auto;transform:skew(-30deg);}
#multipleDiv_templet_orga_C_18 .h2_title{color:#FFF;}
#multipleDiv_templet_orga_C_18 .h2_title::before,
#multipleDiv_templet_orga_C_18 .h2_title::after{background:#FFF;}
@media only screen and (max-width:1024px){
  .h2_title{font-size:45px;}
}
@media only screen and (max-width:768px){
  .h2_title{font-size:35px;margin-bottom:40px;}
}
@media only screen and (max-width:480px){
  .h2_title{font-size:30px;}
}

/*배너4종*/
.banner_0 {  height: 100%;  border-top-left-radius: 30px;  border-bottom-right-radius: 30px;  padding: 35px;}
.banner_0::before {  content: "";  display: block;  width: 50px;  height: 50px;  position: absolute;  top: 0px;  right: 0px;}
.banner_0 a {  width: 100%;  height: 100%;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;  position: relative;}
.banner_0 a img{transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);}
.banner_0 a dl {  text-align: center;}
.banner_0 a dl::before {  content: "";  display: block;  width: 20px;  height: 1px;  background: rgba(255, 255, 255, 0.5);  margin: 10px auto;}
.banner_0 a dt {  color: rgb(255, 255, 255);  font-size: 22px;  font-family: "Noto Regular";  padding-bottom: 10px;}
.banner_0 a dd {  color: rgba(255, 255, 255, 0.5);  font-size: 16px;  font-family: "Noto Light";}
.banner_1 {  background: rgb(0, 79, 162);}
.banner_2 {  background: rgb(0, 172, 151);}
.banner_3 {  background: rgb(70, 148, 209);}
.banner_4 {  background: rgb(0, 196, 214);}
.banner_1::before {  background: url(../../images/icon_1_1_more.png) center center no-repeat rgb(255, 255, 255);}
.banner_2::before {  background: url(../../images/icon_1_2_more.png) center center no-repeat rgb(255, 255, 255);}
.banner_3::before {  background: url(../../images/icon_1_3_more.png) center center no-repeat rgb(255, 255, 255);}
.banner_4::before {  background: url(../../images/icon_1_4_more.png) center center no-repeat rgb(255, 255, 255);}
/*HOVER*/
@media all and (min-width:1281px) {
  .banner_0 a:hover img{transform: rotatey(360deg);}
}
@media only screen and (max-width: 1024px){
  .banner_0 a {    flex-direction: column;}
  .banner_0 a img {  display: none;}
  .banner_0 a dl {  width: 100%;  margin-left: 0px;}
}

/*퀵링크*/
.wrap_quick {  height: 100%;  padding: 35px;  background: url(../../images/quick_bg.jpg) center center / cover no-repeat;}
.wrap_quick h3 {  display: flex;  align-items: center;  color: rgb(34, 34, 34);  font-size: 26px;  font-family: "Noto Regular";  margin-bottom: 35px;}
.wrap_quick h3::after {  content: "";  display: inline-block;  width: 75px;  height: 2px;  margin-left: 10px;  background: rgb(34, 34, 34);}
.wrap_quick div {  display: flex;  align-items: center;  justify-content: space-between;  flex-wrap: wrap;}
.wrap_quick a {  width: 48%;  display: flex;  align-items: center;  justify-content: space-between;  margin: 2% 1%;  border-width: 1px;  border-style: solid;  border-color: rgb(197, 197, 197);  border-image: initial;  background: rgb(255, 255, 255);  padding: 12px 15px;}
.wrap_quick a::after {  content: "";  display: block;  width: 23px;  height: 23px;  background: url(../../images/quick_arrow_g.png) center center no-repeat;}
/*HOVER*/
@media all and (min-width:1281px) {
  .wrap_quick a:hover::after{background: url(../../images/quick_arrow_b.png) center center no-repeat;}
}

/*배너3종*/
.wrap_banner3 .item {  height: 100%;  position: relative;  margin-bottom: 20px;  padding: 0px 7px 7px 0px;}
.wrap_banner3 .item_3 {  margin: 0px;}
.wrap_banner3 .item::before {  content: "";  display: block;  width: calc(100% - 7px);  height: calc(100% - 7px);  position: absolute;  right: 0px;  bottom: 0px;  background: url(/sites/templet_style_guide/images/common/pattern_11.png);}
.wrap_banner3 .item a {  width: 100%;  height: 100%;  display: flex;  align-items: center;  position: relative;  padding: 35px;  border-width: 1px;  border-style: solid;  border-color: rgb(238, 238, 238);  border-image: initial;  background: rgb(255, 255, 255);}
.wrap_banner3 .item a img{transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);}
.wrap_banner3 .item a dl {  margin-left: 30px;}
.wrap_banner3 .item a dt {  font-size: 24px;  font-family: "Noto Regular";  padding-bottom: 5px;}
.wrap_banner3 .item a dd {  color: rgb(102, 102, 102);  font-size: 18px;  font-family: "Noto Light";}
/*HOVER*/
@media all and (min-width:1281px) {
  .wrap_banner3 .item a:hover img{transform:rotate(90deg);transform:scaleX(-1);filter: FlipH;}
}
@media only screen and (max-width: 1280px){ 
  .wrap_banner3 {	display: flex;	flex-wrap: wrap;  }
  .wrap_banner3 .item {	width: 33.3%;  }
  .wrap_banner3 .item a img {	max-width: 60px;  }
  .wrap_banner3 .item a dt {	font-size: 22px;  }
  .wrap_banner3 .item a dd {	font-size: 16px;  }
}
@media only screen and (max-width: 768px){
  .wrap_banner3 .item {	width: 100%;  }
  .wrap_banner3 .item a {	padding: 20px;  }
  .wrap_banner3 .item a dt {	font-size: 20px;  }
  .wrap_banner3 .item a dd {	font-size: 14px;  }
}