/* tablet */
@media (min-width:768px) and (max-width:1023px){
  /* layout */
  .container{}
  header{position:absolute;left:0;top:0;width:100%;z-index:100;}
  .btnGnb{display:none;}
  .moGnb{display:none;}
  .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:113px;margin-top:35px;margin-left:30px;}
  .logo img{width:100%;}
  .gnb{float:right;margin-top:47px;margin-right:30px;padding:10px 15px;}
  header:after{content:"";display:block;clear:both;}
  .gnb > li{float:left;font-size:15px;;position:relative;height:30px;margin-right:45px;font-weight:400;}
  .gnb > li > a{color:#fff;font-size:12px;}
  .gnb > li > a > i{margin-left:3px;}
  .gnb > li:last-of-type{margin-right:0;}
  .gnb > li:hover > ul{display:block;}
  .gnb > li > ul{position:absolute;top:30px;left:-10px;;width:160px;display:none;background:#fff;border:1px solid #efefef;box-shadow:0px 0px 5px gray;border-radius:3px;padding:4px 0;}
  .gnb > li:nth-of-type(2) ul{width:210px;}
  .gnb:after{content:"";display:block;clear:both;}
  .gnb > li > ul > li{font-weight:400;}
  .gnb > li > ul > li a{display:block;text-align:center;padding:10px 0;transition:all 0.4s ease 0s;font-size:11px;}
  .gnb > li > ul > li a:hover{background:#f36f21;color:#fff;}

  /* mainBanner */
  .mainBanner{width:100%;height:614px;overflow:hidden;}
  .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:30px;top:203px;font-size:52px;color:#fff;text-shadow:1px 1px 10px #777;font-weight:500;line-height:110%;}
  .snsList{position:absolute;left:30px;top:346px;}
  .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:30px;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:30px;bottom:105px;}
  .controler > a{display:inline-block;background:#fff;padding:3px;}

  /* section-contents */
  .left_con1{width:100%;margin-right:30px;}
  .right_con1{width:100%;margin-top:23px;}
  iframe{width:100%;}
  section h3{font-size:45px;font-weight:500;}
  section h3 img{width:260px;}
  section h3 span{display:block;font-weight:normal;font-size:24px;}
  .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:15px;}
  .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%;}
  .right_con2{width:97%;}
  .right_con2 img{width: 100%;}
  .left_con2 dl{height:240px;position:relative;margin-top:26px;margin-left: 15px;}
  .left_con2 dl dt{float:left;padding:16px 13px;margin-right:5px;color:#fff;background:#222;font-size:18px;}
  .left_con2 dl dt.on{background:#f36f21;}
  .left_con2 dl dd{position:absolute;top:74px;left:0;color:#838483;width:100%;display:none;}
  .left_con2 dl dt.on+dd{display:block;}
  /* +는 다음 형제 중에서라는 선택자이다(on클래스 안에 있는 다음 형제 dd를 선택) */
  .left_con2 dl dd h4{color:#222;font-size:30px;margin-bottom:10px;}
  .left_con2 dl dd p:nth-of-type(1){margin-bottom:20px;font-size:15px;line-height:30px;}
  .left_con2 dl dd p:nth-of-type(2){font-size:12px;}

  .proList{}
  .proList > li{width:100%;margin-right:30px;}
  .proList > li:last-of-type{margin-right:0;}
  .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;}

  .fDiv{width:calc((100% - 60px)/3);float:left;margin-right:30px;box-sizing:border-box;}
  .fDiv:last-of-type{margin-right:0;}
  .fDiv li{height:138px;margin-bottom:30px;overflow:hidden;position:relative;}
  .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;}
  /* 컨텐츠의 높이가 각각 다른경우 translateY(100%)무조건 선택된 태그의 높이만큼 아래로이동 */
  .fDiv li:hover .hiddenBox{transform:translateY(0);opacity:1;}
  .fDiv .big{height:306px;}
  .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{width:100%;margin-bottom:30px;}
  .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{float:left;width:120px;}
  .flogo img{width:100%;}
  .copy{float:right;color:#bbb;}
}