/* mobile */
@media (max-width:767px) {

  /* *{border:1px solid red!important;} */
  /* layout */
  .container{}
  header{position:absolute;left:0;top:0;width:100%;z-index:100;}
  .mainBanner{position:relative;}
  section{padding:79px 0;}
  section:nth-of-type(2){background:#f1f1f1;}
  section:nth-of-type(3){background:#ffc845;}
  section:nth-of-type(4){background:#f36f21;}
  section:nth-of-type(5){background:#2f2f2f;}
  .innerContents{width:90%;margin:0 auto;}
  .innerContents:after{content:"";display:block;clear:both;}
  footer{background:#202020;padding:24px 0;}
  .btn_top{position:fixed;right:15px;bottom:15px;}

  /* header */
  .logo{float:left;width:46%;margin-top:5vw;margin-left:5vw;}
  .logo img{width:100%;}
  .gnb{display:none;}
  header:after{content:"";display:block;clear:both;}
  .btnGnb{
    border:1px solid #fff;
    position: absolute;
    right:5vw;
    top:5vw;
    width:30px;
    height:30px;
    transition:all 0.5s ease 0s;
  }
  .btnGnb.on{
    background:#f36f21;
  }
  .btnGnb span{
    display:block;
    width:20px;
    height:1px;
    background:#fff;
    margin:7px auto;
    transition:all 0.5s ease 0s;
  }
  .btnGnb span:nth-of-type(1){transform-origin:left center;}
  .btnGnb span:nth-of-type(3){transform-origin:left center;}

  .btnGnb.on span:nth-of-type(1){transform:rotate(40deg)scaleX(1.25);}
  .btnGnb.on span:nth-of-type(2){opacity:0;}
  .btnGnb.on span:nth-of-type(3){transform:rotate(-40deg)scaleX(1.25);}

  .moGnb{
    position:absolute;
    width:90%;
    top:80px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    text-align:center;
    height:0;
    overflow:hidden;
    transition:all 0.5s ease 0s;
  }
  .moGnb.on{
    height:150px;
  }
  .moGnb > li{height:30px;position:relative;}
  .moGnb > li > a{display:block;height:100%;line-height:30px;}
  .moGnb > li > ul{position:absolute;border:1px solid blue;left:0;top:30px;width: 100%;
  display:none;
  background:#efefef;border:1px solid #ccc;box-shadow: 0 2px 5px #ccc;
  z-index:5;}
  .moGnb > li > ul > li{height:28px;line-height:28px;}
  .moGnb > li > ul > li:hover{background:#f36f21;}
  .moGnb > li > ul > li:hover a{color:#fff;}
  .moGnb > li.on > ul{display:block;}
  /* mainBanner */
  .mainBanner{width:100%;height:50vh;overflow:hidden;position:relative;}
  .mainSlider{height:100%;width:300%;position:relative;left:0;transition:all 1s ease 0s;}
  .mainSlider > li{float:left;width:33.333%;height:100%;;box-sizing:border-box;position:relative;}
  .mainSlider:after{content:"";display:block;clear:both;}
  .mainSlider > li img{width:100%;height:100%;object-fit:cover;}
  .mainSlider > li > h2{position:absolute;left:5vw;top:100px;font-size:22px;color:#fff;text-shadow:1px 1px 10px #777;font-weight:500;line-height:110%;}
  .snsList{position:absolute;left:5vw;top:165px;}
  .snsList > li{float:left;margin-right:10px;width:34px;height:30px;}
  .snsList > li > a{display:block;border:1px solid #fff;height:100%;text-align:center;line-height:30px;font-size:15px;color:#fff;}
  .snsList > li > a:hover{background:#fff;color:#f36f21;}
  .snsList > li:last-of-type{margin-right: 0;}
  .snsList:after{content:"";display:block;clear:both;}
  .pagenation{position:absolute;right:5vw;top:50%;transform:translateY(-50%);}
  /* transform은 자기자신기준으로 이동 높이 절반 만큼은 translateY(-50%)로하면 세로기준 중앙에 배치 */
  .pagenation > li{text-indent:-9999px;overflow:hidden;width:11px;height:11px;background:#fff;border-radius:50%;margin-bottom:16px;}
  .pagenation > li:last-of-type{margin-bottom:0;}
  .pagenation > li.active{background:#f36f21;}
  .controler{position:absolute;left:5vw;bottom:50px;}
  .controler > a{display:inline-block;background:#fff;padding:3px;}

  /* section-contents */
  .left_con1{}
  .left_con1 iframe{width:100%;height:180px;}
  .right_con1{}
  section{padding:50px 0;}
  section h3{font-size:22px;font-weight:500;text-align:center;}
  section h3 img{width:195px;margin-bottom:15px;}
  section h3 span{display:block;font-weight:normal;font-size:0.7em;text-align:center;padding-top:40px;}
  .right_con1 h3{margin-bottom:20px;}
  .right_con1 ul{}
  .right_con1 ul li{margin-bottom:15px;position:relative;padding-left:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* 말줄임표..넘어가는 컨텐츠 보이지않게하기.. */
  .right_con1 ul li:before{content:"";display:block;width:10px;height:10px;border-radius:50%;border:2px solid #f36f21;position: absolute;left:0;top:50%;transform:translateY(-50%);transition:all 0.4s ease 0s;}
  .right_con1 ul li:last-of-type{margin-bottom:0;font-size:13px;}
  .right_con1 ul li a{color:#777784;transition:all 0.4s ease 0s;}
  .right_con1 ul li:hover:before{background:#f36f21;}
  .right_con1 ul li:hover a{color:#f36f21;}

  .left_con2{width:100%;margin-bottom:40px;}
  .right_con2{width:97%;}
  .right_con2 img{width:100%;}
  .left_con2 dl{margin-top:26px;border:1px solid #777;}
  .left_con2 dl dt{padding:16px 13px;color:#fff;background:#222;font-size:15px;position:relative;}
  .left_con2 dl dt:before {
    content: "";
    position: absolute;
    right: 10px;
    top: 22px;
    border: 6px solid transparent;
    border-top: 10px solid #ffc845;
}
  .left_con2 dl dt.on{background:#f36f21;}
  .left_con2 dl dt.on:before{
    content: "";
    position: absolute;
    right: 10px;
    top: 14px;
    border: 6px solid transparent;
    border-bottom: 10px solid #ffc845;
  }
  .left_con2 dl dd{color:#838483;box-sizing:border-box;padding:0px 20px;transition:all 0.5s ease 0s;height:0;overflow:hidden;}
  .left_con2 dl dt.on + dd{height:180px;padding: 17px 20px;}
  /* +는 다음 형제 중에서라는 선택자이다(on클래스 안에 있는 다음 형제 dd를 선택) */
  .left_con2 dl dd h4{color:#222;font-size:22px;margin-bottom:10px;}
  .left_con2 dl dd p:nth-of-type(1){margin-bottom:20px;font-size:13px;line-height:30px;}
  .left_con2 dl dd p:nth-of-type(2){font-size:0.8em;}
  .left_con2 dl dd ol li{margin-bottom:20px;font-size:13px;}

  .right_con2 img{width:100%;}

  .proList > li h4{font-size:24px;font-weight:bold;color:#222;border-bottom:1px solid #f1b017;padding-bottom:16px;margin-bottom:23px;}
  .proList > li p{color:#98762b;}
  .proList > li > img{width:100%;}

  .fDiv{}
  .fDiv li{overflow:hidden;position:relative;font-size:0;} /* 공백문자여백 font-size:0으로 해주고, hiddenBox는 원래 폰트사이즈로 돌려놓는다. */
  .hiddenBox{position:absolute;left:0;bottom:0;width:100%;background:#000;padding:16px 14px;box-sizing:border-box;transform:translateY(100%);transition:all 0.5s ease 0s;opacity:0;font-size:14px;}
  /* 컨텐츠의 높이가 각각 다른경우 translateY(100%)무조건 선택된 태그의 높이만큼 아래로이동 */
  .fDiv li:hover .hiddenBox{transform:translateY(0);opacity:1;}
  .fDiv .big{}
  .fDiv li img{width:100%;height:100%;object-fit:cover;}
  .hiddenBox h5{font-size:19px;font-weight:500;color:#f36f21;margin-bottom:10px;}
  .hiddenBox p{float:left;color:#fff;}
  .hiddenBox a{color:#fff;border:1px solid #fff;padding:4px;float:right;font-size:12px;}
  .hiddenBox:after{content:"";display:block;clear:both;}
  .fDiv ul li:last-of-type{margin-bottom:0;}
  .fw{color:#fff;margin-bottom: 25px;}

  .left_con3{}
  .right_con3{}
  .fgnb{}
  .fgnb > li{width:100%;font-size:15px;}
  .fgnb li{margin-bottom:14px;}
  .fgnb > li ul{margin-top:14px;}
  .fgnb > li li:last-of-type{margin-bottom:0;}
  .fgnb > li > a{color:#f36f21;transition:all 0.4s ease 0s;}
  .fgnb > li > a:hover{color:#23527c;}
  .fgnb > li li > a{color:#bbb;transition:all 0.4s ease 0s;}
  .fgnb > li > ul > li > a:hover{color:#f36f21;}
  .right_con3 h4{font-size:21px;color:#bbb;margin-bottom:24px;}

  .fsnsList > li{float:left;margin-right:10px;width:34px;height:32px;}
  .fsnsList > li a{display:block;border:1px solid rgba(255,255,255,0.3);height:100%;text-align:center;line-height:30px;font-size:15px;color:#fff;transition:all 0.4s ease 0s;}
  .fsnsList > li a:hover{border:1px solid #f36f21;color:#f36f21;}
  .fsnsList > li:last-of-type{margin-right: 0;}
  .fsnsList:after{content:"";display:block;clear:both;}

  /* footer */
  .flogo{text-align:center;}
  .flogo img{width:120px;}
  .copy{color:#bbb;}
}