@charset "utf-8";

@media (max-width: 1920px) {
	
	/* main */
   
}

@media (max-width: 1680px) {

	/* main */
    .main-visual .item .slide-img {right:0; top:22%; transform: translateY(-22%);}
    .main-visual .item .slide-img img {height:700px;}
    

    .main-product .item {max-width:1300px}
    .main-product .item .photo {width:600px; margin-right:60px;}
    .main-product .swiper-button-prev {left:660px;}
    .main-product .swiper-button-next {left:740px;}


    /* footer */
    .foot-inner {display:block;}
    .foot-inner .info {width:100%;}
    .foot-inner .copy {margin-top:20px; margin-left:0;}
	
}

@media (max-width: 1440px) {
	
	/* header */

	/* main */
    .main-visual .item .slide-img {top:25%; transform: translateY(-25%)}
    .main-visual .item .slide-img img {height:600px;}

    .main-product .item {max-width:1200px}

    .main-about .box-inner {justify-content:center;}
    .main-about .box-inner .box ul {margin:0 -60px;}
    .main-about .box-inner .box ul li {margin-right:0; padding:0 60px;}

    /* footer */

	/* sub */
    

	/* board */
	


}


@media (max-width: 1240px) {

	/* header */
   

    /* main */
    .main-visual .item .content .txt {font-size:5rem;}
    .main-visual .item .content p {font-size:1.5rem;}
    .main-visual .item .slide-img img {height:500px;}

    .main-product .item {max-width:100%}
    .main-product .item .photo {width:500px; margin-right:50px;}
    .main-product .item .info em {font-size:1.6rem;}
    .main-product .item .info h3 {font-size:3rem; margin-bottom:16px;}
    .main-product .item .info ul li {font-size:1.1rem; padding-left: 15px;}
    .main-product .item .info ul li:before {top:.6rem; width:6px; height: 6px;}
    .main-product .swiper-button-prev,
    .main-product .swiper-button-next {bottom:12%; width:60px; height: 60px;}
    .main-product .swiper-button-prev {left:550px;}
    .main-product .swiper-button-next {left:620px;}

    .main-about .box-inner .box {padding: 60px 150px;}

   

	/* footer */
    .foot-inner .info {display:block;}
    .foot-inner .info .foot-col {margin-right:0;}
    .foot-inner .info .foot-col.address dl dt {width:80px;}
    .foot-inner .info dl dt {width:80px;}
    .foot-inner .info .foot-col.tel {width:100%}
    
	
	

}

@media (max-width: 1140px) {

    /* main */
    
    /* FOOTER */   
   

    /* sub */
   
}
/* Landscape tablet */
@media (max-width: 1024px) {

	/* header */
    #header .inner {height:80px;}
	#gnb {display:none;}


    .sitelogo {left:20px; margin-top:-13px;}
    .sitelogo a {height:26px;} 

    .lang {right:70px;}
	
	.btn-m-menu {display:block;}

	.mobile-navigation {display:block;}

	
	/* main */
    .main-visual .item {height: 700px;}
    .main-visual .item .slide-img img {height:400px;}
    .main-visual .slick-dots {bottom: 60px;}
    .main-visual .slick-dots li {padding:0 15px;}
    .main-visual .slick-dots li button {width:6px; height:6px;}
    .main-visual .slick-dots li button:after {width:30px; height:30px;}

    .main-product .item .photo {width:400px; margin-right:40px;}
    .main-product .item .info .main-btns {margin-top:30px;}
    .main-product .item.swiper-slide-active .photo .pic {margin-right:0;}
    .main-product .swiper-button-prev,
    .main-product .swiper-button-next {bottom:0; width:50px; height: 50px;}
    .main-product .swiper-button-prev {left:440px;}
    .main-product .swiper-button-next {left:500px;}

    .main-btns a {height:46px; border-radius: 23px; padding:0 30px;font-size:1.1rem;}

    .main-about {padding-top:90px;}
    .main-about .content {margin-bottom:70px;}
    .main-about .title em {font-size:1.6rem;}
    .main-about .title h2 {font-size:7rem}
    .main-about .info {margin-left:80px; padding-top:55px;}
    .main-about .info .top {font-size:1.5rem;}
    .main-about .info .cnt {font-size:1.2rem; margin-bottom:16px;}
    .main-about .info .main-btns {margin-top:30px;}
    .main-about .box-inner .box {padding: 50px 20px; margin-left:0;}
    .main-about .box-inner .box ul {margin:0 -40px; justify-content: center;}
    .main-about .box-inner .box ul li {padding:0 40px;}
    .main-about .box-inner .box ul li .ico {margin-bottom:16px;} 
    .main-about .box-inner .box ul li .ico img {height: 90px;}
    .main-about .box-inner .box ul li .tit {font-size:1.5rem;}
    .main-about .box-inner .box ul li p {font-size:1.1rem;}


    .main-contact {height:600px;}
    .main-contact .logo {margin-bottom:12px;}
    .main-contact h2 {font-size:4rem; margin-bottom: 12px;}
    .main-contact .cnt {font-size:2rem;}
    .main-contact p {font-size:1.2rem; margin-bottom:30px;}
    .main-contact .btns a {height:60px; border-radius: 30px; width:240px;}
    .main-contact .btns a .link {font-size:1.2rem; padding: 0 27px;}
    .main-contact .btns a .arrow {right:8px; margin-top:-23px; width:46px; height: 46px;}

    .mailform-head {margin-bottom: 30px; font-size:1.6rem;}

    /* FOOTER */  
    
    
	/* sub */
    #sub #wrapper {padding-top:80px;}

    #contArea {margin:60px auto 0;}

    .real-cont {padding-bottom:80px;}

    .sub-vis {height:360px;}
    .sub-vis .content h2 {font-size:3.4rem;}

    .lnb ul {margin:0 -20px;}
    .lnb ul li {margin:0 20px; padding-top:16px;}
    .lnb ul li a {font-size:1.4rem; height:50px;}

    .doc-title {font-size:1.6rem;}

    .about-inner .group {margin-bottom:100px;}

    .about-head .logos {width:430px; font-size:7rem;}
    .about-head .info {font-size:1.1rem; padding-top:10px;}

    .about-overview {border-top-width: 2px;}
    .about-overview ul li {padding:16px 26px; font-size:1.1rem;}
    .about-overview ul li .tit {width:260px;}

    .about-business ul {margin:0 -8px -40px;}
    .about-business ul li {padding: 0 8px; margin-bottom:40px;}
    .about-business ul li .pic {margin-bottom:24px;}
    .about-business ul li .info {padding-left:25px;}
    .about-business ul li .info .tit {font-size:1.6rem; margin-bottom:10px;}
    .about-business ul li .info .cnt {font-size:1.2rem;}

    .vision-inner .group {margin-bottom: 70px;}

    .vision-head {background-size:contain;}
    .vision-head ul li {padding:0 20px;}
    .vision-head ul li .circle {width:300px; height: 300px;}
    .vision-head ul li .circle:after {width:320px; height: 320px;}
    .vision-head ul li .circle .tit {font-size:2rem; padding-bottom:20px; margin-bottom:20px;}
    .vision-head ul li .circle .tit:after {width:30px; height: 2px; margin-left:-15px;}
    .vision-head ul li .circle .cnt {font-size:1.2rem;}
    .vision-head .txt {margin-top: 32px; font-size:1.2rem;}

    .vision-core {padding:0 20px;}
    .vision-core ul {margin-left:-14px;}
    .vision-core ul li {width:calc(33.333333% - 14px); margin-left:14px; border-width:5px; padding:30px 20px;}
    .vision-core ul li .ico {margin-bottom:20px;}
    .vision-core ul li .ico img {height:100px ;}
    .vision-core ul li .tit {font-size:1.7rem; margin-bottom:20px;}
    .vision-core ul li .cnt {font-size:1.1rem;}

    .vision-strategy .box {padding:50px 20px;}
    .vision-strategy ul li {padding:0 30px;}
    .vision-strategy ul li .ico {width:100px; height: 100px;}
    .vision-strategy ul li .tit {font-size:1.6rem;}
    .vision-strategy ul li .cnt {font-size:1.1rem;}

    .history-head {margin-bottom:50px; height:340px;}
    .history-head .tit {font-size:4rem;}
    .history-head p {font-size:1.6rem;}

    .history ul {padding-bottom:50px;}
    .history ul li {padding:0 50px;}
    .history ul li .year {font-size:3rem;}
    .history ul li dl dd {font-size:1.2rem;}
    .history ul:after {top:16px; left:50%; width:20px; margin-left:-10px;}
    .history ul:first-child:after {border-radius: 20px 20px 0 0;}
    .history ul:last-child:after {border-radius: 0 0  20px 20px; height:24%}
    .history ul:before {top:24px; margin-left:-5px; width:10px; height: 10px;}

    .location .group {margin-bottom: 65px;}
    .location .map iframe {height: 390px !important;}
    .location .info {padding: 0 30px;}
    .location .box {padding: 30px; margin-top: -80px;}
    .location .box .doc-title {margin-bottom:20px;}
    .location .box ul li {font-size:1.1rem; margin-bottom:20px;}
    .location .box ul li dl dt {margin-right:16px;}
    .location .box ul li.flex  dl {margin-right:30px;}

    .product-title {margin-bottom: 40px; font-size:3rem;}

    .product-list ul li {margin-bottom:40px;}
    .product-list ul li .tit {font-size:1.4rem;}

    .product-head {margin-bottom: 90px;}
    .product-photo {width:40%; flex-wrap:wrap;}
    .product-photo .product-nav {order:2; width:100%; margin-right:0; margin-top:10px;}
    .product-photo .product-nav .item {margin-bottom:0; padding:0 5px; }
    .product-photo .product-nav .thumb {border-radius:10px; padding-bottom:100%;}
    .product-photo .product-thumb {width:100%; order:1;}
    .product-photo.noimg .product-nav {display:flex; align-items: center; justify-content: center;}
    .product-photo.noimg .product-nav .item {width:33.333333%;}
    .product-info {width:60%; padding-left: 30px;}
    .product-info h3 {font-size:1.6rem; padding-bottom:16px; margin-bottom:16px;}
    .product-info .cnt {font-size:1.1rem; margin-bottom:20px;}
    .product-info .btns {margin-top:50px;}
    .product-info .btns ul {margin:0 -5px;}
    .product-info .btns ul li {padding:0 5px;}
    .product-info .btns ul li a {height:54px; border-radius: 54px; font-size:1.1rem;}

    .table-list table tbody th {padding:16px 20px; font-size:1.1rem;}
    .table-list table tbody td {padding:16px 20px; font-size:1.1rem;}

    .rnd-inner .group {margin-bottom: 90px;}

    .rnd-title {height: 64px; margin-bottom:30px;}
    .rnd-title:after {left:-30%;}

    .rng-list ul {margin:0 -10px;}
    .rng-list ul li {padding:0 10px;}



   /* footer */
   #footer {padding:40px 0;}
   
   .foot-row {padding-bottom:35px; margin-bottom:35px;}
   
   .foot-logo {width:139px;}
   .foot-logo img {height:32px;}
   .foot-menu .links {height:42px; width:150px; font-size:1.1rem; border-radius:42px; border-width:2px;}
   .foot-menu .familysite .tit {padding:0 20px; height:42px; width:180px; font-size:1.1rem; border-radius:42px; border-width:2px;}
   .foot-menu .familysite .tit:after {top:18px;  right:20px;}
   .foot-menu .familysite .list {bottom:40px; border-width:2px;}
   .foot-menu .familysite .list ul li a {display:block; font-size:1.1rem; padding:0 20px;}
   
   .foot-inner {font-size:1rem;}
   
   .scroll-top {bottom:400px; right:20px;}
   .scroll-top .top {width:50px; height:50px; background-size:20px;}


	/* board */
    
    .board-paging li > a {width:40px; height:40px;  line-height:40px; font-size:14px;}

	
	.mailform + .buttons {margin-top:50px;}
    .btn-pack.form-submit {height:60px;  font-size:20px; line-height:60px;}

  
    .mailform .privacy_box--fc {font-size:1.1rem;}
    .mailform input[type="checkbox"] + label {font-size:1.1rem; padding-left:30px;}
    .mailform input[type="checkbox"] + label:before {width:20px; height:20px; top:3px;}
    .mailform .captcha_box--fc input {height:46px; font-size:1.2rem;}




	
} 

/* portrait tablet */
@media (max-width: 900px) {	
	.only-desktop {display:none;}
	.only-tablet {display:block;}
    
    /* main */
    .main-visual .item {height: 800px;}
    .main-visual .item .slide-img {top:auto; bottom:90px; width:100%; text-align:center; transform: translateY(0);}
    .main-visual .item .slide-img img {height:400px;}
    .main-visual .item .content {top:25%; text-align:center;}
    .main-visual .item .content .txt {font-size:4rem;}
    .main-visual .slick-dots {bottom: 40px;}
    .main-visual .slick-dots li {padding:0 15px;}

    .main-product .item .wrap {display:block; padding-right:0;}
    .main-product .item .photo {width:100%; justify-content: center; text-align:center; margin-right:0; margin-bottom:40px; padding:0}
    .main-product .item .photo .pic {margin-left:0; text-align:center;}
    .main-product .item .info {width:100%; padding:0 20px;}
    .main-product .item .info .main-btns {margin-top:25px; text-align:center;}
    .main-product .item.swiper-slide-active .photo .pic {margin-left:0; margin-right:0;}
    .main-product .swiper-button-prev,
    .main-product .swiper-button-next {bottom:auto; top:30%; transform: translateY(-30%); width:40px; height: 40px; border-width:2px;}
    .main-product .swiper-button-prev {left:20px;}
    .main-product .swiper-button-next {left:auto; right:20px;}

    .main-about {padding-top:70px; text-align:center;}
    .main-about .content {display:block; margin-bottom:50px;}
    .main-about .content h2 {display:inline-block; font-size:5rem}
    .main-about .info {margin-left:0; padding-top:0; width:100%; max-width:100%;}
  


	/* board */
    

	/* sub */

    .location .group {margin-bottom: 50px;}
    .location .map iframe {height: 320px !important;}
    .location .box ul li {margin-bottom:20px;}
    .location .box ul li.address dl {display:block;}
    .location .box ul li.address dl dt {margin-right:0; margin-bottom:3px; width:100%;}
    .location .box ul li dl dt {margin-right:16px; width:60px;}
    .location .box ul li.flex {display:block;}
    .location .box ul li.flex dl {margin-right:0; margin-bottom:10px;}
    .location .box ul li.flex dl:last-child {margin-bottom:0;}

    .product-list ul {margin:0 -6px;}
    .product-list ul li {width:50%; padding:0 6px; margin-bottom:30px;}

    /* footer */
   
	
} 

@media (max-width: 767px) {	
    /* main */
   
    /* sub */
    
    .real-cont {padding-bottom:60px;}

    .about-inner .group {margin-bottom:60px;}

    .about-head {display:block;}
    .about-head .logos {width:100%;}
    .about-head .info {width:100%;}

    .about-overview {border-top-width: 2px;}
    .about-overview ul li {padding:12px 20px; display:block; font-size:1.1rem;}
    .about-overview ul li .tit {width:100%; margin-bottom:10px;}
    .about-overview ul li .info {width:100%;}

    .about-business ul {margin:0 0 -30px;}
    .about-business ul li {width:100%; padding: 0; margin-bottom:30px;}
    .about-business ul li .pic {margin-bottom:20px;}
    .about-business ul li .info {padding-left:20px;}

    .vision-inner .group {margin-bottom: 50px;}

    .vision-head ul {display:block;}
    .vision-head ul li {padding:0;}
    .vision-head ul li .circle {width:250px; height: 250px; margin:0 auto;}
    .vision-head ul li .circle:after {width:280px; height: 280px;}

    .vision-core {padding:0;}
    .vision-core ul {display:block; margin-left:0; margin-bottom:-15px;}
    .vision-core ul li {width:100%; margin-left:0; margin-bottom:15px; border-width:4px; padding:20px 20px;}
    .vision-core ul li .ico {margin-bottom:15px;}
    .vision-core ul li .ico img {height:80px ;}
    .vision-core ul li .tit {margin-bottom:15px;}

    .vision-strategy .box {padding:20px 20px;}
    .vision-strategy ul {display:block;}
    .vision-strategy ul li {width:100%; padding:0 0 20px; margin-bottom:20px;}
    .vision-strategy ul li:last-child {margin-bottom:0; padding-bottom:0;}
    .vision-strategy ul li:after {top:-20px; width: 100%; height:1px;}
    .vision-strategy ul li .ico {width:80px; height: 80px; margin:0 auto 20px;}
    .vision-strategy ul li br {display:none;}

    .product-head {margin-bottom: 60px; display:block;}
    .product-photo {width:100%; margin-bottom:30px;}
    .product-info {width:100%; padding-left: 0;}
    .product-info .btns {margin-top:30px;}
    .product-info .btns ul {margin:0 -5px;}
    .product-info .btns ul li {padding:0 5px;}
    .product-info .btns ul li a {height:50px; border-radius: 50px;}

    .table-list {overflow-x:auto; -webkit-overflow-scrolling:touch;}
    .table-list table {width:900px;}
    .table-list table tbody th {padding:12px 10px;}
    .table-list table tbody td {padding:12px 10px;}
    
    /* board */
   
   

    
    .btn-pack.form-submit {width:180px; height:50px;  font-size:15px; line-height:50px;}


    .mailform .input {height:44px; font-size:1.1rem;}
    .mailform textarea.input {height:140px;}
    .mailform table tbody  {display:block;}
    .mailform table tbody th {display:block; padding:10px 16px; font-size:1.1rem;}
    .mailform table tbody td {display:block; padding:10px 6px; font-size:1.1rem;}

    .mailform .captcha_box--fc input {height:44px; }
    .mailform .privacy_box--fc {height: 100px; padding:20px;}
    .mailform input[type="checkbox"] + label:before {top:1px; width:18px; height:18px;}
    .mailform .captcha_box--fc {flex-wrap:wrap;}
    .mailform .captcha_box--fc input {height:44px;}

    .filebox label {width:110px; margin-right:10px;  line-height:44px;}
    .filebox .upload-name {height: 44px; font-size:1rem; padding-left:10px;}


   
        

}


/* Landscape phone */
@media (max-width: 640px) {
	.only-desktop-tablet {display:none;}
	.only-tablet {display:none;}
	.only-mobile {display:block;}

	
	/* header */
    #sub #wrapper {padding-top:60px;}

	#header .inner {height:60px;}

    .sitelogo { margin-top:-10px;}
    .sitelogo a {height:20px;} 


	.mobile-navigation {width:100%;}


   

	
	/* main */
    .main-visual .item {height: 100vh;}
    .main-visual .item .slide-img {bottom:80px; transform: translateY(0);}
    .main-visual .item .slide-img img {height:360px;}
    .main-visual .item .content {top:25%; text-align:center;}
    .main-visual .item .content .txt {font-size:3rem;}
    .main-visual .slick-dots {bottom: 40px;}
    .main-visual .slick-dots li {padding:0 15px;}

    .main-about .box-inner .box {padding: 30px 20px; background-size:cover; background-position: 50% 100%;}
    .main-about .box-inner .box ul {margin:0 -15px; flex-wrap:wrap;}
    .main-about .box-inner .box ul li {padding:0 15px; width:50%;}
    .main-about .box-inner .box ul li .ico {margin-bottom:0;}
    .main-about .box-inner .box ul li .ico img {height: 60px;}

    .main-contact {height:500px;}
    .main-contact .logo img {height:30px;}
    .main-contact h2 {font-size:3rem;}
    .main-contact .cnt {font-size:1.8rem;}
    .main-contact p {margin-bottom:20px;}
    .main-contact .btns a {height:52px; border-radius: 26px; width:200px;}
    .main-contact .btns a .link {padding: 0 20px;}
    .main-contact .btns a .arrow {right:6px; margin-top:-20px; width:40px; height: 40px;}
   
   
	/* footer */
   .foot-row {display:block; text-align:center; padding-bottom:20px; margin-bottom:20px;}
   .foot-logo {width:100%; margin-bottom:20px;}
   .foot-logo img {height:30px;}
   .foot-menu {justify-content: center;}
   .foot-menu .links {height:42px; width:auto; padding:0 20px;}
   .foot-menu .familysite .tit {width:160px;}

   .foot-inner .info .foot-col {margin-bottom:10px;}
   .foot-inner .info .foot-col.address dl {display:block;}
   .foot-inner .info .foot-col.address dl dt {width:100%;}
   .foot-inner .info .foot-col.address dl dd {width:100%;}
   .foot-inner .info .foot-col.tel dl {margin-bottom:10px;}
   .foot-inner .info .foot-col.tel dl:last-child {margin-bottom:0;}
   .foot-inner .info dl dt {width:50px;}


    .scroll-top .top {width:40px; height:40px; background-size:16px;}

    
	
	/* sub */
    #contArea {margin:50px auto 0;}
	.real-cont {padding-bottom:60px;}

    .sub-vis {height:260px;}


    .lnb ul {margin:0 -14px;}
    .lnb ul li {margin:0 14px; padding-top:12px;}
    .lnb ul li a {height:44px;}


    .history-head {margin-bottom:40px; height:220px;}
    .history-head .tit{font-size:3rem}
    .history-head p {font-size:1.2rem}

    .history ul {display:block; padding-bottom:40px;}
    .history ul li {padding:0 0 0 40px;}
    .history ul:after {top:10px; left:10px; width:20px; margin-left:-10px;}
    .history ul:first-child:after {border-radius: 20px 20px 0 0;}
    .history ul:last-child:after {border-radius: 0 0  20px 20px; height:24%}
    .history ul:nth-child(even) { text-align:left;}
    .history ul:before {top:15px;left:5px; margin-left:0;}

    .location .group {margin-bottom: 40px;}
    .location .map iframe {height: 250px !important;}
    .location .info {padding: 0 15px;}
    .location .box {padding: 20px 30px; margin-top: -60px;}
    .location .box .doc-title {margin-bottom:20px;}
    .location .box ul li {margin-bottom:10px;}
    .location .box ul li dl dt {margin-right:12px; width:50px;}

    .rnd-inner .group {margin-bottom: 60px;}

    .rnd-title {height: 56px; margin-bottom:20px;}
    .rnd-title:after {left:-20%;}

    .rng-list ul {margin:0 -5px;}
    .rng-list ul li {padding:0 5px;}

    .cert-list ul {flex-wrap:wrap; margin:0 -6px -30px;}
    .cert-list ul li {width:50%; padding:0 6px; margin-bottom:30px;}
    .cert-list ul li .tit {margin-top:15px; font-size:1.1rem;}
        

	/* board */
	/* 검색 */
    
	.mailform + .buttons {margin-top:30px;}
	
	.buttons {margin:20px 0;}


    .board-paging li > a {width:36px; height:36px;  line-height:36px; font-size:13px;}

    
	

} 

/* Landscape phones and down */
@media (max-width: 320px) {

}