/* PC 반응형 */
@media screen and (max-width: 1920px) {

    .m3_thumb .swiper-slide {padding: 8% 30px;}

}
@media screen and (max-width: 1680px) {

    .m3_thumb .swiper-slide {padding: 4% 30px;}
    #fp-nav ul li a, .fp-slidesNav ul li a{padding-left: 5%;}
    #fp-nav ul li a::before{display: none;}
    .sns{left: 1%;}

}
@media screen and (max-width: 1600px) {    

    html {font-size: 16px;} 
    #nav > li{width: 20%;}

}
    

@media screen and (max-width: 1440px) {
    
    html {font-size: 15px;}
    .side_m {width: 20%;}
    .m3_txt1 {left: 6%;}
    .s131_ul.ul1 > li.left::before {bottom: 60px; right: 50px;}
    .s131_ul.ul2 > li.left::before {bottom: 15px; right: 80px;}
    .s131_ul.ul3 > li.left::before {bottom: -7px; left: 122px;}
    
}


@media screen and (max-width: 1200px) {
    
    html {font-size: 14px;}
    #nav > li {width: 25%;}
    #right_header {width: 15%;}
    .f_lang.on .f_lang_cont{bottom: 35px;}
    .side_ul li img {margin-right: 20px;}
    .m2_img1 {max-width: 230px; top: 60px;}
    .m3_thumb .swiper-slide {padding: 4% 10px;}
    .m3_thumb p {font-size: 1.3rem;}
    .thumb_icon i {right: 10px;}
    .m3_shape {width: 50%;}
    .m4_num{font-size: 3rem; right: 20px;}
    .s131_ul.ul1 > li.left {width: 360px; height: 360px;}
    .s131_ul.ul1 > li.left::before {bottom: 64px; right: 26px;}
    .s131_ul.ul2 > li.left {width: 300px; height: 300px;}
    .s131_ul.ul2 > li.left::before {bottom: 21px; right: 52px;}
    .s131_ul.ul3 > li.left {width: 250px; height: 250px;}
    .s131_ul.ul3 > li.left::before {bottom: -10px; left: 110px;}
    .s141_ul > li.left img {width: 95%;}
    .s142_ul > li.left {padding: 50px 50px 50px 10%;}
    .s211_ul {min-height: 500px;}
    .s2111_ul2 {width: 90%;}

    /*sub1-1*/
    .s111_ul{width: 95%; margin-right: 15%;}
    .s111_ul > li.txt{padding: 10% 0 0 6%;}

    /*sub2-1*/
    .s211 .btn_ul i{margin-right: 4px;}

    /*sub3-1*/
    .s311_title .noto{font-size: 1.8rem;}

}


    
/* mobile */
@media screen and (max-width: 780px) {
    .pc {display: none !important;}
    .mob {display: block;}
    html, body {  min-width: auto;}
    #header {  min-width: auto;}
    
    /*    header   */    
    
    #header {margin-top: 0px;  border-bottom: none; height: 75px; overflow: initial;} 
    #header:hover {height: 75px !important; background: transparent;}  
    #header:hover #header_logo img:nth-child(1){opacity: 1;}
    #header:hover #header_logo img:nth-child(2){opacity: 0;}
    #header.on #header_logo img:nth-child(2){opacity: 1;}

    #header::before {content: ""; background-color: #fff; transition: all 0.4s; width: 100%; height: 100%; position:absolute; left: 0px; top: 0px; opacity: 0;}
    #header.on::before {opacity: 1;}
    #header::after {display: none;}
    #header_inner { position: relative;  margin: 25px 0px 0px;  width: 100%;}
    #header_logo {width: 100%; max-width: 60px; margin-left: 0px; position: absolute; left: 50%;  top: 0px;  transform: translate(-50%, 0px); margin-top: 0px;}
    
    #right_header {display: none;}

    #menu_icon2 {  display: block;  position: absolute;  width: 100%;  max-width: 25px;  right: 7.5%;  top: 4px;  z-index: 100; color: #fff;}
    #menu_icon2 i {font-size: 40px;}
    #open_btn { display: block; position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; opacity: 0; transition: all 0.4s; z-index: -1;}
    #open_btn.on {opacity: 1; z-index: 1;}
    #close_btn {display: block; position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; opacity: 0; transition: all 0.4s; z-index: -1;}
    #close_btn.on {opacity: 1; z-index: 1;}   

    .nav_box2{display: none;}
    #header.on #menu_icon{background-color: transparent;}
    #header:hover .nav_ul{display: none;}
    #m_sub_menu2.on .sub_nav_ul{display: block;}

    #nav-icon2 {width: 100%; height: 20px;  position: relative;  margin: 0px auto;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);   -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out;   transition: .5s ease-in-out; cursor: pointer; }
    #nav-icon2 span { display: block; position: absolute;  height: 2px;  width: 100%; background: #fff;  opacity: 1;   left: 0;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);-o-transform: rotate(0deg);  transform: rotate(0deg);    -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
    #nav-icon2 span:nth-child(1) {top: 0px;-webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
    #nav-icon2 span:nth-child(2) { top: 9px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
    #nav-icon2 span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
    #header.on #nav-icon2 span{background-color: #666;}
    #header.on #nav-icon2 span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 4px;}
    #header.on #nav-icon2 span:nth-child(2) { width: 0%; opacity: 0;}
    #header.on #nav-icon2 span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); left: 4px;}
       
    .nav_box {width: 100%; height: 100vh; box-sizing: border-box; position: absolute;  top:50px;  left: 0px; background-color: #fff; margin: 0px; pointer-events: none; overflow-y: scroll; overflow-x: hidden; -ms-overflow-style: none; opacity: 0;   }
    #header.on .nav_box {opacity: 1; pointer-events: initial; transition: all 0.4s; }
    .nav_box::-webkit-scrollbar {display: none; }
    
    #nav { padding-bottom: 50px;}
    #nav > li { width: 100%;  text-align: left; font-size: 1.6rem; color: #000;}   
    #nav > li::after {display: none;}
    #nav > li > .tit {font-weight: bold; padding: 3vh 10%; box-sizing: border-box; position: relative; display: block;}
    #nav > li > .tit .plus { position: absolute; right: 8%;  top: 50%;    transform: translateY(-50%); width: 15px;  height: 15px;  }
    #nav > li > .tit .plus::before {content: ""; width: 100%;  height: 1px; background-color: #ddd; position: absolute;  left: 0px;   top: 50%;     transform: translateY(-50%);}
    #nav > li > .tit .plus::after {content: ""; max-width: 1px; height: 100%;    background-color: #ddd;width: 100%; margin: auto; transition: all 0.4s; display:block }
    #nav > li.show > .tit .plus::after {transform: rotate(90deg);}

    #nav > li span.mob { display: inline-block; font-size: 0.9rem; vertical-align: top; margin-right: 8px; opacity: 0.5;  margin-top: -5px; display: none;}
    .nav_ul { box-sizing: border-box; opacity: 1;  margin-top: 0;  width: 100%;
    overflow: hidden; padding: 0px 10%;  background-color: rgba(255,255,255,0.08); transition: initial; display: none; }

    .nav_ul li {font-size: 1.2rem; padding: 1.4vh 0px; margin-bottom: 0px;   font-weight: 300; color: #999999;}    
    .nav_ul li:hover a {border-bottom: 0px; color: #999999;}    

    /* #sitemap_mob{display: block; cursor: pointer; border: 1px solid #ddd; font-size: 0.9rem; letter-spacing: 5px; position: absolute; right: 10%; bottom: 25%; text-transform: uppercase; padding: 4px 10px; color: #666;}
    #sitemap_mob.mob.show .nav_box2{display: block; opacity: 1; z-index: 100;} */

    /*subtopnav*/
    .subtop_nav{width: 100%;}
    .subtop_nav > li{width: calc((100% - 50px)/2);}
    
    /*    footer   */    
    .top_btn{top: -26px;}
    .footer {padding: 0;}
    .f_nav > li {font-size: 0.7rem;}
    .f_nav > li::before {height: 10px;}
    .f_logo img {max-width: 140px;}
    .f_inner {padding-top: 20px;}
    .f_inner > li:nth-child(1) {width: 100%;}
    .f_inner > li:nth-child(1) > img {max-width: 100px;}
    .f_inner > li:nth-child(2) {margin-left: 0px;  width: 100%;  margin-top: 20px;}
    .f_inner > li:nth-child(2) p {transform: skewX(-0.3deg); font-size: 12px; line-height: 16px; }
    .f_inner > li:nth-child(2) p::before {top: 4px;  transform: none;}
    .f_inner > li:nth-child(2) p span {display: block; margin-bottom: 3px;}
    .f_inner > li:nth-child(2) p br {display: none;}
    .f_inner > li:nth-child(2) p:nth-child(2) span {display: inline-block;}
    .f_inner > li:nth-child(2) p:nth-child(2) span:nth-child(2) {margin-left: 10px;}
    .f_inner > li:nth-child(2) p.copy {  padding: 8px 0px;  font-size: 10px;  line-height: 15.96px;   margin-top: 15px;}
    .f_inner > li:nth-child(3) { width: 100%;  text-align: center;  margin-bottom: 15px;  margin-top: 10px;  opacity: 0.8;}
    .f_inner > li:nth-child(3) > a { transform: skewX(-0.3deg);  font-size: 11px;  line-height: 20.2px;  display: inline-block;  text-align: center;  padding: 0px 5px;}    
    .f_wrap_ul > li{width: 100%; display: block;}
    .f_wrap_ul > li:nth-child(1){margin-bottom: 5vh;}
    .top_btn{top: -27px;}
    .f_wrap_ul > li{display: block; width: 100%;}
    .f_lang.on .f_lang_cont{bottom: 34px;}

    /*    main   */
    .side_m{bottom: -8%; top:auto;}
    .side_ul li{text-align: center;}
    .side_ul li a{padding: 16px 0;}
    .side_ul li img{display: block; margin: 0 auto 10px;}
    .ms1_txt1{top: 50%;}

    .m2 .main_in1 > li{display: block; width: 100%;}
    .m2 .main_in1 > li:nth-child(1){margin-top: 0;}
    .main_title p.big{font-size: 2.8rem;}
    .m2_img1{right: 0;}
    .m2_ul{width: 100%;}
    .m2 .main_in1 > li:nth-child(2){position: absolute; right: -3%; top: -5%; width: 30%;}
    .m2_img1{max-width: 200px; right: 8%;}
    
    .m3_thumb{width: 30%;}
    .m3_thumb p{margin-top: 7px;}
    .m3_shape{width: 100%;}

    .m4 .main_in2{height: 80vh; margin: 10vh auto;}    
    .m4 .main_in2 > li{display: block; height: auto;}
    .m4 .main_in2 > li.txt{width: 100%; height: 45%; margin-bottom: 5%;}
    .m4 .main_in2 > li.img{width: 100%; height: 50%; padding-left: 0;}

    .m5 .main_in1{margin-top: 10vh;}
    .m5 .main_title{margin-bottom: 60px;}
    .m5 .main_title p{font-size: 1.8rem;}
    .m5 .main_title p.small{font-size: 1rem;}

    /*sub*/
    .sub_title .big{font-size: 2.4rem;}

    /*sub1-1*/
    .s111_ul{width: 100%; margin-right: 0;}
    .s111_ul > li{display: block; width: 100%; height: auto; min-height: auto;}
    .s111_ul > li.img{height: 350px;}
    .s111_ul > li.txt{padding: 15% 5%; text-align: center;}
    .s111_ul .txt p.bold{line-height: 1.3;}
    .s112_ul >li{width: 46%; margin-right: 0; margin-bottom: 2vh;}
    .s112_ul >li:nth-child(odd){margin-right: 4%;}
    .s113 .sub_inner{max-width: none; margin-top: 100px;}
    .s113_cir{text-align: center;}
    .s113_cir svg{width: 80%;}
    .s113 .center{top: 17%; left: 50%;}
    .s113 .center img{width: 60%; margin-top: 20px; margin-bottom: 0;}
    .s113_ul{margin-top: 50px;}
    .s113_ul > li{display: block; position: relative; margin: 0 auto 50px;}
    .s113_ul > li p.num::after{display: none;}
    .s113_ul > li.li1{top: auto; left: auto;}
    .s113_ul > li.li2{top: auto; left: auto;}
    .s113_ul > li.li3{bottom: auto; right: auto;}
    .s113_ul > li.li4{top: auto; right: auto;}
    .s113::after{height: 350px;}

    /*sub1-2*/
    .s121 .sub_inner{margin-bottom: 50vh;}
    .s121::after{height: 20%;}     
    .s121 .txt1{width: 100%;}
    .s121 .txt1 p.bold{margin-bottom: 50px;}
    .s121 .img img{margin: 0;}
    .s121_box{top: -18%; right: -6%; width: 60%;}
    .sub_inner .s121_box img{margin-bottom: 60vh; width: 50%;}
    .s121_box .bottom .noto{font-size: 1.5rem;}
    .s121_box .noto span::after{bottom: -10px;}
    .s121_box .bottom > img{margin-bottom: 0; width: 70px;}

    /*sub1-3*/
    .s131 .txt1{font-size: 1.7rem;}
    .s131_bg{display: none;}
    .s131_ul.ul1{width: 100%; margin-left: 0;}
    .s131_ul.ul1 > li.left{width: 250px; height: 250px;}
    .s131_ul.ul2 > li.left{width: 200px; height: 200px;}
    .s131_ul.ul3 > li.left{display: block;}
    .s131_ul > li.right{width: 65%; margin-left: 10%; margin-top: 5vh;}
    .s131_ul.ul3{width: 100%; margin-left: 0;}
    .s131_ul > li.right{margin-left: 0;}
    .s131_ul.ul2{width: 40%; margin-left: 60%;}
    .s131_ul.ul2 > li.right{width: 100%;}
    .s131_img{width: 40%; top: 41%;}
    .s131_ul > li.left::before{display: none;}
    
    
    /*sub1-4*/ 
    .s141_ul > li{display: block; width: 100%;}
    .s141_ul > li.left{width: 100%; text-align: left;}
    .s141_ul > li.left img{width: 70%;}
    .s141_ul > li.left::after{height: 250px; top: 50%;}
    .s141_ul > li.right{margin-top: 50px;}
    .s142{margin: 0 auto;}
    .s142_ul > li.right{width: 100%;}
    .s143_ul{background: transparent;}
    .s143_ul > li{width: 50%; border: 10px solid #f5f5f5; background: linear-gradient(145deg, rgba(174,210,169,1) 0%, rgba(0,152,180,1) 100%);}    

    /*sub2-1*/
    .s211_ul{min-height: auto; width: 80%; margin: auto;}
    .s211_ul > li{position: relative; width: 100%; top: auto; transform: none; transition: none; height: 50vh; margin-bottom: 5vh;}
    .s211_ul > li.li1{left: auto;}
    .s211_ul > li.li2{left: auto;}
    .s211_ul > li.li3{left: auto;}
    .s211_ul > li.li4{left: auto;}
    .s211_ul > li.li1.on{background: #f5f5f5;}
    .s211_ul > li.li2.on{background: #f5f5f5;}
    .s211_ul > li.li3.on{background: #f5f5f5;}
    .s211_ul > li.li4.on{background: #f5f5f5;}
    .s211_ul > li.on{padding: 40px 0; box-shadow: none;}
    .s211_ul > li.on .txt_box{top: 50%;}
    .s211_ul > li img{width: 45%;}
    .s211_ul .txt_box .bold{text-align: left; font-size: 1.6rem; border-bottom: 2px solid #0098b4; font-weight: 600; color: #000;}
    .s211_ul > li.on .txt_box .bold{color: #000;}
    .s211_ul .txt_box .small{text-align: left;}
    .s211_ul .txt_box .last{opacity: 1;}
    .s211_ul .btn_ul{opacity: 1; bottom: 0;}
    .s211_ul .txt_box .small{color: #000;}
    .s211_ul .txt_box p{color: #000;}
    .s211 .btn_ul a{color: #000;}

    /*sub2-1-1*/
    .s2111_ul{margin: 100px 0;}
    .s2111_ul2 > li{display: block;}
    .s2111_ul2 > li.left{width: 70%;}
    .s2111_ul2 .box .big{margin-bottom: 30px;}
    .s2111_ul2 > li.right{width: 100%; padding: 0 2%; margin-top: 60px;}

    /*sub3-1*/
    .s311 .sub_inner{margin-bottom: 40px;}
    .s311_info{width: 100%;}
    .s311_info .table{width: 100%;}
    .s311_info .table p span{width: 17%;}
    .s311_title{width: 60%; margin-left: 40%; position: relative; right: auto; top: -50px;}
    .s311_title .noto{font-size: 1.7rem; line-height: 1.3;}
    .s311 .sub_inner ul{display: block;}    
    
}


@media screen and (max-width: 414px) {

    /*main*/
    p.more{margin-top: 30px;}
    .side_m{display: none;}
    .ms1_txt1 .big{font-size: 2.5rem; margin-bottom: 20px; line-height: 1.2;}
    .ms1_txt1 p{font-size: 1.1rem; line-height: 1;}
    .swiper-scrollbar.ms1_scroll{margin-top: 20px;}
    .ms1_txt1{top: 58%;}
    .ms1_txt1 p .color::after{width: 10px; height: 10px; bottom: 4px; right: -16px;}
    .main_title p.big{font-size: 1.7rem;}
    .m2_img1{display: none;}
    .m2 .main_in1 > li:nth-child(2){right: 0; top: -8%;}
    .m2_ul{margin-top: 20px;}
    .m2_ul > li{width: 50%; border-right: 0; margin-top: 20px;}
    .m2_ul > li:nth-child(3){width: 50%;}
    .m2_ul > li img{width: 30%;}
    .m3_thumb{width: 40%;}
    .m3_thumb p{font-size: 1rem; line-height: 1.3;}
    .m3_thumb{top: 30%;}
    .m3_shape{width: 110%;} 
    .m3_txt1{bottom: 30px;}
    .m3_slide .swiper-slide-active .m3_txt1 p.bold::after{width: 70%;}
    .m3_txt1 p{font-size: 0.9rem;}
    .m3_txt1 p.more{margin-top: 20px;}
    .m4_thumb{margin-top: 25px;}
    .m4 .thumb_txt .small{font-size: 1rem;}
    .m4 .thumb_txt .bold{font-size: 1.8rem;}
    .m4_txt{font-size: 1.4rem; position: absolute; left: 20px;}
    .m4_btnbox{left: 0; bottom: 25px;}
    .m4 .more{border: 0px; left: 20px; bottom: 20px;}
    .m4 .more span{left: 0;}
    .m4_num {bottom: 20px;}
    .m5 .main_title{margin-bottom: 30px;}

    /*footer*/
    .f_wrap_ul > li.info1 p:nth-child(2) > span::after{display: none;}
    .f_wrap{width: 95%;}
  

    /*subtop*/
    .subtop_p{top: 55%;} 
    .subtop_p .color{font-size: 1.3;}
    .subtop_p .big{font-size: 2.5rem;}

    /*sub*/
    .sub_title .big{font-size: 1.8rem; margin-top: 10px; line-height: 1.2;}

    /*sub1-1*/
    .s111_ul .txt p.bold{font-size: 1.4rem; letter-spacing: -0.5px;}
    .s111_ul .txt p{font-size: 0.95rem;}
    .s112_ul > li p{font-size: 0.9rem;}
    .s113 .sub_inner{margin-top: 50px;}
    .s113_cir svg{width: 95%;}
    .s113_txt .small{font-size: 0.9rem;}
    .s113_txt .bold{margin-top: 10px; margin-bottom: 0px;}
    .s113 .center{top: 12%;}
    .s113_ul > li{width: 180px; height: 180px;}
    .s113_txt .bold{word-break: keep-all;}
    .s113_txt .bold{font-size: 1.6rem; line-height: 1.3;}

    /*sub1-2*/
    .s121 .sub_inner{padding: 40px 20px;}
    .s121 .txt1 p.bold{margin-bottom: 30px; letter-spacing: -1px;}
    .s121_box{top:-12%; width: 80%;}
    .sub_inner .s121_box img{margin: 0 0 660px 40%;}
    .s121 .txt1 .name > li{width: 50%;}
    .s121 .sub_inner{margin-bottom: 80vh;}
    .s121 .name .img{box-sizing: border-box; padding-left: 10px; margin-left: 0;}
    .s121_box .bottom{padding: 50px 30px;}
    .s121_box .bottom .noto{font-size: 1.2rem; margin-bottom: 20px;}
    .s121_box .bottom .small{margin-bottom: 20px;}
    .s121_box .bottom > img{width: 50px;}

    /*sub1-3*/
    .s131_ul.ul1{text-align: center;}
    .s131_ul.ul1 > li.right{width: 90%; text-align: left; margin: 5vh auto;}
    .s131_ul.ul2{width: 100%; margin-left: 0; text-align: center;}
    .s131_ul.ul2 > li.right{text-align: left;}
    .s131_ul.ul2 > li.left{width: 250px; height: 250px;}
    .s131_ul.ul3 > li.left{margin: auto;}
    .s131_ul.ul3 > li.right{width: 90%;}
    .s131_img{top: auto; bottom: 15%;}

    /*sub1-4*/
    .s141_ul > li.left::after{height: 150px;}
    .s141_ul > li.left img{width: 80%;}
    .s141_ul{margin-top: 60px;}
    .s142_ul > li.left{padding: 50px;}
    .s142_ul > li.right{min-height: 350px;}
    .s143_ul > li{width: 100%;}  

    /*sub2-1*/
    .s211_ul > li{height: 60vh;}
    .txt_box{top: 35%;}
    .s211_ul > li.on .txt_box{top: 35%;}
    .s211 .btn_ul a{font-size: 0.85rem;}

    /*sub2-1-1*/
    .s2111{margin-bottom: 100px;}
    .s2111_ul{margin: 50px 0 100px;} 
    .s2111_ul2 .box .small{font-size: 0.9rem; margin-bottom: 10px;}
    .s2111_ul2 .box .big{font-size: 2rem; margin-bottom: 20px;}
    .s2111_ul2 .btn_box{width: 100%;}
    .s2111_ul2 .btn_box img{width: 40%;}
    .s2111_ul2 > li.right{margin-top: 40px;}
    .s2111_ul2 > li.right .table{margin-top: 30px;}
 
    /*sub3-1*/
    .s311_info{padding: 7% 7% 15% 7%;}
    .s311_info .table{padding: 4% 0;}
    .s311_info .table p{display: block;}
    .s311_info .table p span{display: block; width: 100%; margin-bottom: 10px;}
    .s311_info .table p{font-size: 0.9rem;}
    .s311_title{width: 85%; margin-left: 15%; top: -30px;}
    .s311_title .noto{font-size: 1.3rem;}
    .s311 .sub_inner ul > li{margin-bottom: -50px;}
    .s311 .sub_inner{margin-bottom: 100px;}

}


@media screen and (max-width: 330px){
    .sub_inner .s121_box img{margin: 0 0 750px 40%;}

}