@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;}*/

/*공통****************************************/
#multipleContentsDiv_template_08_7,
#multipleContentsDiv_templet_08_18,
#multipleContentsDiv_templet_08_19,
#multipleContentsDiv_templet_08_20{max-width:1400px;margin: 0 auto;overflow:hidden;}
@media all and (max-width:1400px) {
  #multipleContentsDiv_template_08_7,
  #multipleContentsDiv_templet_08_18,
  #multipleContentsDiv_templet_08_19,
  #multipleContentsDiv_templet_08_20{max-width:94%;}
}


/*비주얼슬로건****************************************/
#multipleContentsDiv_template_03_8 ._obj:nth-child(2){position:absolute;top:37%;left:50%;width:1400px !important;margin-left:-700px !important;z-index:1;}
.visual_slogan{}
.visual_slogan p{color:#FFF;line-height:1.1;padding-bottom:10px;}
.visual_slogan .p_1{font-size:32px;font-weight:300;}
.visual_slogan .p_2{font-size:42px;font-weight:500;}
.visual_slogan .p_3{font-size:22px;font-family: 'Montserrat', sans-serif;font-weight:500;}
@media all and (max-width:1400px) {
  #multipleContentsDiv_template_03_8 ._obj:nth-child(2){left:5%;width:90% !important;margin-left:0 !important;}
  .visual_slogan .p_1{font-size:22px;}
  .visual_slogan .p_2{font-size:32px;}
  .visual_slogan .p_3{font-size:18px;}
}
@media all and (max-width:768px) {
  #multipleContentsDiv_template_03_8 ._obj:nth-child(2){top:30%;}
  .visual_slogan .p_1{font-size:16px;}
  .visual_slogan .p_2{font-size:22px;}
  .visual_slogan .p_3{font-size:16px;}
}

#multipleDiv_template_08_7{margin-top:-75px; position: relative; z-index: 101;}
#multipleDiv_template_08_7:before{content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:75px;background:url(../../images/main/main_bg_1.png) no-repeat center;background-size:cover;}

/*배너4개****************************************/
.banner_4{height:100%;padding:30px 0;background:#FFF;}
.banner_4 ul{display:flex;justify-content:space-between;flex-wrap:wrap;background:#FFF;}
.banner_4 li{width:25%;}
.banner_4 a{display:block;text-align:center;}
.banner_4 a img{display:block;margin:0 auto;}
.banner_4 a span{display:inline-block;margin-top:15px;font-size:22px;font-weight:400;color:#2c2c2c;}
.banner_4 a span:after{content:"";display:block;width:100%;height:2px;background:#77a3d5;margin-top:3px;transform:scale(0);}
@media all and (max-width:1024px) {
  .banner_4{padding:15px 0;}
  .banner_4 a img{max-width:50px;}
  .banner_4 a span{margin-top:10px;font-size:16px;}
  .banner_4 a span:after{display:none;}
}
@media all and (max-width:768px) {
  .banner_4 a img{max-width:40px;}
  .banner_4 a span{font-size:14px;}
}

/*배너1개,비디오****************************************/
.wrap_1,
.wrap_2{display:flex;height:100%;}

.banner_1_1{height:100%;width:35%;margin-right:5%;background:url(../../images/main/ban_1_1_bg.jpg) no-repeat center;background-size:cover;}
.banner_1_1 a{display:block;position:relative;width:100%;height:100%;}
.banner_1_1 a span{display:block;padding:20px;width:100%;background:#383838 url(/sites/style_guide/images/common/btn_icon_4_w.png) no-repeat 90% center;position:absolute;left:0;bottom:0;color:#FFF;font-size:24px;font-weight:400;}

.video_1{width:60%;height:100%;background:url(../../images/main/video_bg.jpg) no-repeat center;background-size:cover;}
.video_1 a{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;}
.video_1 a span{display:block;color:#FFF;font-size:24px;font-weight:400;margin-top:10px;}

.banner_1_2{height:100%;width:47.5%;margin-right:5%;background:url(../../images/main/ban_1_2_bg.png) no-repeat center;background-size:cover;}
.banner_1_3{height:100%;width:47.5%;background:url(../../images/main/ban_1_3_bg.png) no-repeat center;background-size:cover;}
.banner_1_2 a,
.banner_1_3 a{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;     text-align: center;}
.banner_1_2 a span,
.banner_1_3 a span{display:block;color:#FFF;font-size:24px;font-weight:400;margin-top:10px;}
@media all and (max-width:1024px) {
  .banner_1_1{width:49%;margin-right:2%;}
  .video_1{width:49%;}
  .video_1 img{max-width:50px;}
  .banner_1_1 a span,
  .video_1 a span{font-size:18px;}

  .banner_1_2{margin-right:2%;}
  .banner_1_2,
  .banner_1_3{width:49%;}
  .banner_1_2 a,
  .banner_1_3 a{padding:20px 0;}
  .banner_1_2 a img,
  .banner_1_3 a img{max-width:60px;}
  .banner_1_2 a span,
  .banner_1_3 a span{font-size:20px;}
}
@media all and (max-width:768px) {
  .banner_1_1 a,
  .video_1 a{padding:20px 0;height:124px;}
  .banner_1_1 a{display:flex;justify-content:center;align-items:center;}
  .banner_1_1 a span{display:inline;width:auto;padding:0;background:none;position:relative;left:auto;bottom:auto;}

  .banner_1_2 a img,
  .banner_1_3 a img{max-width:40px;}
  .banner_1_2 a span,
  .banner_1_3 a span{font-size:16px;}
}



/*HOVER****************************************/
@media all and (min-width:1025px) {
  .banner_4 a:hover span{color:#006ec0;}
  .banner_4 a:hover span:after{transform:scale(1);transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);}

  .banner_1_2 a:hover img,
  .banner_1_3 a:hover img{transform: rotatey(360deg);transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);}
}