/*pc*/
@media (min-width:1201px){

  /*snb*/
  #snb-wrap{position:absolute; width:100%; bottom:100px; }
  #snb{display:inline-block;}
  #snb li{float:left; margin-right:50px; margin-top:30px;}
  #snb li:last-child{margin-right:0px;}
  #snb li a{display:block; position:relative; font-size:20px; color:#fff; opacity:0.4; font-weight: 600; }
  #snb li a::after{content:""; display:block; width:100%; height: 3px; background:#fff; position: absolute; bottom:-8px; }
  #snb li a.active{opacity: 1;}

  .mobile-snb-display{display:none}
}

@media (max-width:1600px){
  #m-hd #m-logo{left: 50px;}

  .sl-arrow{display:none;}
  #main-banner .swiper-wrapper .banner-contents{padding: 0 30px;}
}

/*tablet+mobile*/
@media (max-width:1200px){
  #mobile-btn{display:block; top:25px;}
  #m-hd{height: 75px; }
  #m-hd #m-nav{display:none;}
  #m-hd #m-logo{left:25px;}
  #m-hd #m-logo img{max-width: 90%;}

  #mobile-menu-open{width:30px; height: 22px; }
  #mobile-menu-open,
  #mobile-menu-open span {display: inline-block; transition: all .4s;box-sizing: border-box;}
  #mobile-menu-open {position: relative;}
  #mobile-menu-open span {position: absolute; left: 0; width: 100%; height: 3px; background-color: #394148; border-radius: 2px}
  #m-hd.sub-hd #mobile-menu-open span {background-color: #fff;}
  #m-hd.sub-hd:hover #mobile-menu-open span {background-color: #394148;}
  #m-hd.hd-fixed #mobile-menu-open span {background-color: #394148;}

  #mobile-menu-open span:nth-of-type(1) {top: 0;}
  #mobile-menu-open span:nth-of-type(2) {top: 9px;}
  #mobile-menu-open span:nth-of-type(3) {bottom: 0;}
  #mobile-menu-open.active span{background-color: #394148;}
  #mobile-menu-open.active span:nth-of-type(1) {-webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg);}
  #mobile-menu-open.active span:nth-of-type(2) {opacity: 0;}
  #mobile-menu-open.active span:nth-of-type(3) {-webkit-transform: translateY(-14px) rotate(45deg);transform: translateY(-14px) rotate(45deg);}


  #mobile-menu-close,
  #mobile-menu-close span {display: inline-block; transition: all .4s;box-sizing: border-box;}
  #mobile-menu-close {position: absolute; right:0; width: 30px; height: 30px; }
  #mobile-menu-close span {position: absolute; left: 0; width: 100%; height: 3px; background-color: #394148; border-radius: 2px}

  #mobile-menu-close span:nth-of-type(1) {top:14px; transform: rotate(45deg);}
  #mobile-menu-close span:nth-of-type(2) {top:14px;transform: rotate(-45deg);}


  #all-menu{position:fixed; display:block; background:#fff; height:100%; z-index:9500; top:0; right:-100%; opacity:0;  background:#fff; width:40%; box-shadow:0px 0px 12px 3px rgba(0, 0, 0, 0.09)}

  #all-menu #all-gnb > li {padding:0 25px}
  #all-menu #all-gnb > li > a{padding:15px 0; font-size:17px; display:block; text-align:left; color:#000; font-weight:500}
  #all-menu #all-gnb .lnb{display:none;}
  #all-nav{margin-top:50px}
  #all-menu-top{position:relative;}
  #all-menu-top .myinfo{display:block; position:absolute; top:20px; padding-right:48px; padding-left:30px; color:#ababab}
  #all-gnb ul a{font-size:15px; font-weight: 500; color:#aaa; display:block;}
  #all-gnb ul > li{padding:8px 0}
  #all-menu #all-nav{ position:relative; }
  #all-menu #all-gnb .lnb li a{font-size:16px; color:#babcbf; }
  #all-menu #all-gnb .lnb li a:hover{color:#df0629; background: none;}
  #all-menu #all-gnb .lnb li:last-child {margin-right:0;}
  #all-menu .etc-menu{padding:20px 25px 0;}
  #all-menu .stay-update{color:#df0629; font-size:15px; font-weight: 500;}
  #mobile-lang-nav{margin-top:30px;}
  #mobile-lang-nav li:first-child{margin-bottom:15px;}
  #mobile-lang-nav li a{font-size:15px; font-weight: 700; color:#aaa}
  #mobile-lang-nav li a.active{color:#000}

  #main-banner .swiper-wrapper .banner-contents{padding: 0 20px;}
  #main-banner .swiper-wrapper .banner-contents .inner{padding-right:40px; width:65%}
  #main-banner .swiper-wrapper .banner-contents h3{font-size:32px;}
  #main-banner .swiper-wrapper .banner-contents h5{font-size:20px;}
  #main-banner .swiper-wrapper .banner-contents p{font-size:17px;}
  #main-banner .swiper-slide .img-box{width: 45%;}
  .pagination-box .pagination-txt span:nth-child(1)::before,
  .pagination-box .pagination-txt span:nth-child(2)::before,
  .pagination-box .pagination-txt span:nth-child(3)::before,
  .pagination-box .pagination-txt span:nth-child(4)::before{font-size:15px; border-bottom:2px solid #000;}
  #main-banner .pagination-txt .swiper-pagination-bullet{margin-right:25px}

  .main-tit-box h3{font-size:43px;}
  .main-tit-box h4{font-size:29px;}
  .index .section01 .pro-nav{text-align: center; margin-bottom:53px;}
  .index .section01 .pro-contents .txt-box h3{font-size:28px;}
  .index .section01 .pro-contents .txt-box h5{font-size:20px; margin-top:23px;}
  .index .section01 .pro-contents .txt-box p{font-size:16px;}
  .main-tit-box p{font-size:18px}
  .index .section02 .main-tit-box{margin-bottom:0;}
  .index .section02 .contents-box{margin:0;}
  .index .section02 .box-list.list01{margin-top:190px}
  .index .section02 .box-list{padding:0 20px}
  .index .section02 .box-list .box .txt-box h5{font-size:17px;}
  .index .section02 .box-list .box .txt-box p{font-size:15px;}

  .index .section04 .fields .btn-group span{font-size:14px;}
  .index .section04 .fields .btn-submit{width:112px;}
  .index .section04 .box-wrap .box01{padding-right:30px;}
  .index .section04 .box-wrap .box02{padding-left:30px;}

  #sub-visual{height: 60vh;}
  #sub-visual .visual-title{font-size:39px;}

  #snb-wrap{background:#394148; width:100%; position: absolute; bottom:0;}
  #snb-wrap .container{padding:0;}
 .snb-box{height:62px; display:flex; align-items: center;}
 .snb-nav {position:relative; width:100%}
 .snb-nav .mobile-snb-display.on{display:block;}
 .snb-nav .mobile-snb-display{cursor: pointer; padding:0 65px 0 15px; display:block;}
 .snb-nav .mobile-snb-display p{font-size:16px; color:#fff; padding-left: 10px; padding-bottom:2px; word-break: keep-all;}
 .snb-arrow {display:block; width:26px; height:26px; border:1px solid #fff; border-radius: 50%; position: absolute; top:50%; right:15px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
 .snb-arrow::before{content:""; display:block; width:6px; height:6px; border:1px solid #fff; border-top:transparent; border-right:transparent; position: absolute; top:9px; right:9px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

 #snb {position: absolute; width: 100%; z-index: 9999; background:#fff; display: none; box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.19); border-top:0; top:43px;}
 #snb a {color: #000; display:block; padding:10px 25px; font-size:15px; font-weight: 400;}
 #snb li{line-height: normal;}
 #snb li:hover a {background:#fff; color:#000;}

 .sub02 .section01 h5{font-size:18px;}
 .sub02 .section01 p{font-size:16px;}
 .sub02 .section03 .pro-list p{font-size:16px;}
 .sub02 .section03 .pro-list li{margin-top:20px; padding:0 10px}
 .sub02 .section04 ul li{width:33.333333%;}
 .sub02 .section04 .txt-wrap p{font-size:17px;}
 .sub02 .section02 .sub-contents-tit h5{font-size:25px;}

 .sub02 .section02 .contents-box > div{float:none; }
 .sub02 .section02 .sub-contents-tit{width:100%; text-align: center;}
 .sub02 .section02 .contents{width:100%; }
 .sub02 .section02 .contents ul li{font-size:17px; width: 33.33%;}
 .sub02 .section02 .contents ul li::before{top:26px;}
 .sub-contents-tit h5{font-size: 34px;}

 .sub0401 .txt-box .slogan h3{font-size: 36px;}
 .sub0401 .txt-box .inner{padding-right:45px}
 .sub0401 .txt-box p{font-size: 16px;}
}


/*tablet*/
@media (min-width:769px) and (max-width:1200px){



.fields li{display:block;}
.fields .btn-group span{font-size:15px;}
.fields .btn-submit{font-size:15px;}


}


/*mobile*/
@media (max-width:768px){
  #m-hd{height: 60px;}
  #mobile-btn{top:18px;}
  #m-hd #m-logo{left:20px;}
  #m-hd #m-logo img{max-width: 70%;}


  #all-menu{width:70%;}

  #main-banner .swiper-wrapper .banner-contents{flex-direction:column; margin-top: 15vh; padding:0 10px;}
  #main-banner .swiper-wrapper .banner-contents .inner{width:100%; padding:0;}
  #main-banner .swiper-wrapper .banner-contents h3{font-size:28px; margin-bottom:15px;}
  #main-banner .swiper-wrapper .banner-contents h5{font-size:16px; margin-bottom:10px; word-break: keep-all;}
  #main-banner .swiper-wrapper .banner-contents p{white-space: normal; display: -webkit-box; overflow: hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
  #main-banner .swiper-wrapper .banner-contents a{width: 130px; height: 35px; line-height: 35px; font-size:15px;  margin-top: 20px;}
  #main-banner .swiper-button-prev{lefT:20px}
  #main-banner .swiper-button-next{right:20px}
  #main-banner .swiper-slide .img-box{width:100%; margin-top:40px}
  .pagination-box .pagination-txt{display:none ;}
  #main-banner .swiper-slide .img-box img{max-width:80%;}
  #main-banner .pagination-box{bottom:40px; right:20px; width:auto;}
  #main-banner .pagination-num .swiper-pagination-bullet{font-size:16px; }
  #main-banner .pagination-num .swiper-pagination-bullet-active::after{font-size:16px;}
  #main-banner .pagination-num .swiper-pagination-bullet-active:before{margin-top:3px;}

  .main-tit-box h3{font-size:40px;}
  .main-tit-box h4{font-size:28px;}

  .link-box{text-align: right;}

  .index .section01 .pro-contents .contents-box{display:block;}
  .index .section01 .pro-contents .contents-box > div{width:100%; margin-top:60px;}
  .index .section01 .pro-contents .txt-box{padding-left:0;}
  .index .section01 .pro-contents .img-box{line-height: normal; padding-right:0;}
  .main-tit-box p{font-size:16px;}

  .index .main-section.section01{margin-top:60px;}
  .index .section01 .contents-nav li{margin-right:0; width:50%; text-align: center; font-size:14px; margin-bottom:10px;}
  .index .section01 .contents-nav li:nth-child(3n){clear: both;}
  .index .section01 .contents-nav li > div{padding:12px 0; background:#f5f5f7; border-radius:25px; }
  .index .section01 .contents-nav li.on{color:#fff;}
  .index .section01 .contents-nav li.on::after{display:none; }
  .index .section01 .contents-nav li.on > div{background:#cd1e1a;}
  .index .section01 .pro-contents .txt-box p{font-size:15px; margin-bottom:50px; }
  .index .section01 .pro-contents .txt-box h3{font-size:25px;}
  .index .section01 .pro-contents .txt-box h5{margin-top:20px; font-size:20px;}
  .index .section01 .pro-contents .txt-box a{width:150px; height: 46px; line-height: 46px; font-size:14px; display:inline-block;}


  .index .section02 .main-tit-box{transform: none; }
  .index .section02 .contents-box{margin:0;}
  .index .section02 .box-list{padding:0 15px}
  .index .section02 .box-list .box{margin-bottom:30px;}
  .index .section02 .box-list .box:last-child{margin-bottom:0;}
  .index .section02 .box-list.list01{margin-top:0}
  .index .section02 .box-list.list02{margin-top:30px;}
  .index .section02 .box-list.list03{margin-top:30px;}
  .index .section02 .box-list .box .img-box img{border-radius: 20px;}
  .index .section02 .box-list .box .txt-box{margin-top:25px}
  .index .section02 .box-list .box .txt-box h5{font-size:17px; font-weight: 600;}
  .index .section02 .box-list .box .txt-box p{font-size:15px; font-weight: 400; color:#adadad; line-height: 1.6; margin: 20px 0;}
  .index .section02 .box-list .box .txt-box a{font-size:16px; }

  .index .main-section.section04{padding-bottom:160px}
  .index .section04 .box-wrap > div{float:none; width:100%;}
  .index .section04 .box-wrap .box01{padding-right:0;}
  .index .section04 .box-wrap .box02{padding-left:0; margin-top:120px}
  .index .section04 .fields .btn-submit{font-size:15px; height: 42px; line-height: 42px; top:42px}


  #footer .ft-top > div{float:none; width:100%;}
  #footer .ft-top .ft-cnt{text-align: center;}
  #footer .ft-top .ft-cnt p{word-break: keep-all;}
  #footer .ft-top .ft-logo{text-align: center; margin-top:20px;}
  #footer .ft-bottom > div{float:none; width:100%; text-align: center;}
  #footer .ft-bottom .ft-link{text-align: center; margin-top:20px}


  #sub-visual .visual-title{font-size:33px; }
  #sub-visual .page-location li{margin-right:30px; margin-bottom:6px;}
  #sub-visual .page-location li .arrow{right:-18px;}
  #sub-visual .page-location li *{font-size:15px;}
  .sub-contents-tit{margin-bottom:20px}
  .sub-contents-tit h5{font-size:28px;}

  /* #snb-wrap{bottom:0;}
  #snb {display:flex; flex-wrap:wrap;}
  #snb li{ float:none; display:flex; align-items: center; justify-content: center; margin-right:0; width:50%;}
  #snb li a{font-size:17px; text-align: center;}
  #snb li a::after{display:none; } */


  .sub02 .section02 .sub-contents-tit h5{margin-top:0;}
  .sub02 .section02 .contents ul{display: flex; flex-wrap:wrap;}
  .sub02 .section02 .contents ul li{float:none; width:50%; font-size:17px; word-break: keep-all; padding: 10px 10px 10px 20px;}
  .sub02 .section02 .contents ul li::before{top:21px;}
  .sub02 .section03 .pro-list{margin:0;}
  .sub02 .section03 .pro-list li{float:none; width:100%; padding:0; margin-top:15px}
  .sub02 .section03 .pro-list li:nth-child(2),
  .sub02 .section03 .pro-list li:nth-child(3){margin-top:15px}
  .sub02 .section03 .pro-list .img-box{padding:0 20px}
  .sub02 .section04 ul{margin:-5px}
  .sub02 .section04 ul li{width:50%; padding:5px;}
  .sub02 .section04 .txt-wrap p{text-align: center; font-size:16px; line-height:45px}
  .sub02 .section04 .txt-wrap{height: 45px}

  .sub02 .sub-section.section02{padding: 50px 0;}

  .sub0401 .section01 .contents-box{display:block;}
  .sub0401 .section01 .contents-box > div{display:block; width:100%;}
  .sub0401 .txt-box .inner{display:block; max-width: auto; padding-right:0;}
  .sub0401 .txt-box .slogan h3{font-size:30px;}
  .sub0401 .txt-box p{font-size:16px;}
  .sub0401 .txt-box p b{font-size:18px;}
  .sub0402 .info p{font-size:18px; }
  .sub0402 ul li{float:none; margin-right:0; margin-bottom:10px}
  .sub0402 ul li:last-child{margin-bottom:0px}
}

@media (max-width:583px){
  .index .section02 .main-tit-box{margin-bottom:40px}
  .index .section02 .box-list img{width:100%}
  .index .section02 .box-list{float:none; width:100%;padding:0;}

  .sub02 .section02 .contents ul li{width:100%;}
}
@media (max-width:449px){
}