@charset "utf-8";

@media (max-width: 1800px) {
	/* quick-menu */
	.quick-wrap {right: 15px;}

	.scroll-top {right: 15px;}
}

@media (max-width: 1450px) {
	/* main-visual */
	.main-visual .thumb {height: 100%; display: flex; flex-direction: column; justify-content: center;}
	.main-visual .main-btn {padding-top: 0;}

	/* main-banner */
	.main-banner {margin-top: 30px;}

	.sec02 .img {display: flex; align-items: center;}
	.sec02 .img img {width: 400px;}
	.sec02 .details {padding-left: 75px;}
	
	.sec04 .sec-title h3 {font-size: 45px;}

	/* footer */
	#footer {padding:50px 0 50px;}
	#footer .hour-wrap {margin-top: 30px; padding-left: 250px;} 

	/* quick-menu */
	.quick-wrap {right: -90px;}
	.quick-menu {width: 90px;}
	.quick-menu ul {padding: 25px 0 2px;}
	.quick-menu ul li {margin-bottom: 10px;}
	.quick-menu ul li .icon {width: 50px; height: 50px; background-size: 50px auto; margin: 0 auto 5px;}
	.quick-menu ul li p {font-size: 14px;}
	.quick-menu .top {line-height: 40px;}
	.quick-wrap .quick-btn {display: flex;}
}

@media (max-width: 1300px) {
	/* header */
	#gnb>ul>li {width: 150px;}
	
	.sec02 .title {max-width: 425px;}
	.sec02 .title h3 {font-size: 45px;}
	.sec02 .details {padding-left: 30px;}

	.sec04 .sec-title h3 {font-size: 40px;}

	.sec05 .items {margin: 0 -20px;}
	.sec05 .item {padding: 0 20px; } 
}

@media (max-width: 1200px) {	
	/* header */
	#header .sitelogo a {margin-top: -23px;}
	#header .sitelogo a img {width: 200px;}
	#gnb>ul>li>a {font-size: 18px;}
	#gnb>ul>li {width: 130px;}

	/* main-banner */
	.main-banner .cont {padding: 34px 30px 20px;}

	.sec-title h3 {font-size: 50px;}

	.sec01 .item a {padding: 52px 25px 53px;}

	.sec02 .title {max-width: none; width: calc(100% - 400px); padding-right: 50px;}
	.sec02 .details {padding-left: 0; padding-top: 30px;}
	.sec02 .details ul {display: flex; flex-wrap: wrap; }
	.sec02 .details ul li {width: 33.333%;}

	.sec03 .items {margin: 0 -15px 50px;}
	.sec03 .item {padding: 0 15px;}

	.sec04 .sec-title h3 {font-size: 35px;}
	.sec04 a {padding: 40px;}

	.sec06 .text h3 {font-size: 40px;}
}

@media (max-width: 1024px) {
	/* header */
	#header {height: 80px; border-bottom: 1px solid #ddd;}
	#header.hide {transform:translateY(0);}
	#gnb {display: none;}
	.submenu-bg {border-bottom: none;}

	/* main-visual */
	.main-visual {margin-top: 80px;}
	.main-visual .text-wrap h2 {font-size: 48px;}
	
	/* main-banner */
	.main-banner {margin-top: 20px}
	.main-banner .wrap {display: flex; flex-wrap: wrap; justify-content: center; max-width: 710px; width: 100%; margin: 0 auto; box-shadow: none; overflow: visible;}
	.main-banner .wrap > div {margin-bottom: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 27px 0px rgba(159, 162, 161, 0.18);}

	.main-banner .title {padding: 14px 30px;}
	.main-banner .title h3 {font-size: 20px; padding-left: 30px;}
	.main-banner .title h3:before {width: 20px; height: 20px; background-size: 20px auto; margin-top: -10px;}
	.main-banner .cont {padding: 25px 30px;}
	.main-banner .left .cont {height: auto; border-right: 0;}
	.main-banner .left .cont:before {background-size: 100px auto; top: 10px; right: 30px;}
	.main-banner .left .cont .top {padding-bottom: 10px; margin-bottom: 20px;}
	.main-banner .left .cont .top p {font-size: 16px;}
	.main-banner .left .cont .top ul {margin-top: 10px;}
	.main-banner .left .cont .top ul li {margin-bottom: 6px;}
	.main-banner .left .cont .top ul li .icon {width: 23px; height: 23px; background-size: 23px auto; margin-right: 5px;}
	.main-banner .left .cont .top ul li p {font-size: 15px;}
	.main-banner .left .cont .top ul li b {font-size: 15px; margin-right: 5px;}
	.main-banner .left .cont .bottom .icon {background-size: 26px auto; margin-right: 15px;}
	.main-banner .left .cont .bottom a {font-size: 22px; }
	.main-banner .right .cont table {margin-bottom: 15px;}
	.main-banner .right .cont table thead th {font-size: 15px; padding: 9px 5px;} 
	.main-banner .right .cont table tbody td {font-size: 15px; padding: 10px 5px;}
	.main-banner .right .cont ul li {font-size: 15px; margin-bottom: 6px; padding-left: 12px;}

	/* section 공통 */
	.sec-title {margin-bottom: 40px;}
	.sec-title h3 {font-size: 38px; padding-top: 35px;}
	.sec-title h3:before {background-size: 38px auto;}
	.sec-title p {font-size: 16px; margin-top: 15px;}

	/* section01 */
	.sec01 {padding: 70px 0 80px;}
	#main .sec01 .contain {padding: 0 50px;}
	.sec01 .items {margin: 0 -10px 30px;}
	.sec01 .item {padding: 0 10px;}
	.sec01 .item a {height: 375px; padding: 40px 20px 30px;}
	.sec01 .item .icon {width: 110px; height: 110px; background-size: 110px auto; margin: 0 auto 25px;}
	.sec01 .item .icon:before {top: -8px; left: -8px; width: 126px; height: 126px; background-size: 126px auto;}
	.sec01 .item h4 {font-size: 22px; margin-bottom: 10px;}
	.sec01 .item p {font-size: 15px;}
	section .slick-arrow {background-size: 20px auto;}
	section .slick-prev {left: -28px;}
	section .slick-next {right: -28px;}
	section .slick-prev:hover {left: -32px;}
	section .slick-next:hover {right: -32px;} 
	.sec01 .notice {padding: 30px 30px; margin-bottom: 40px;}
	.sec01 .notice b {font-size: 18px; margin-bottom: 8px;}
	.sec01 .notice ul li {font-size: 16px; padding-left: 7px;}
	.sec01 .notice ul li:before {position: absolute; top: 12px; left: 0; content: ''; width: 3px; height: 3px; background: #666; border-radius: 50%;} 

	.more-btn a {width: 140px; font-size: 16px; line-height: 48px;}

	/* section02 */
	.sec02 {padding: 60px 0;}
	.sec02 .wrap {justify-content: space-between;}
	.sec02 .title {width: calc(100% - 350px); padding-top: 50px; padding-right: 30px;}
	.sec02 .title b {font-size: 16px; margin-bottom: 20px;}
	.sec02 .title h3 {font-size: 35px; margin-bottom: 50px;}
	.sec02 .img img {width: 350px;}

	.sec02 .details h4 {font-size: 22px; margin-bottom: 14px;}
	.sec02 .details ul li {width: auto; font-size: 16px; padding-left: 17px; padding-right: 30px;}
	.sec02 .details li:before {top: 10px;}

	/* section03 */
	.sec03 {padding: 70px 0 80px;}
	#main .sec03 .contain { padding: 0 50px;}
	.sec03 .sec-title {margin-bottom: 50px;}
	.sec03 .items {margin: 0 -10px 40px;}
	.sec03 .item {padding: 0 10px;}
	.sec03 .text {padding: 25px 30px 30px;}
	.sec03 .text h4 {font-size: 20px; margin-bottom: 15px;}
	.sec03 .text p {font-size: 15px;}

	/* section04 */
	.sec04 {padding: 70px 0 80px;}
	.sec04 .wrap .sec-title {width: 100%; margin-bottom: 30px;}
	.sec04 .sec-title h3 {font-size: 35px; padding-top: 45px;}
	.sec04 .wrap {margin: -10px;}
	.sec04 .wrap > div {width: 33.333%; padding: 10px;}
	.sec04 .wrap > div:nth-child(2), .sec04 .wrap > div:nth-child(3) {margin-top: 0;}
	.sec04 a {position: relative; padding: 35px 30px; min-height: 220px;}
	.sec04 a h4 {font-size: 26px;  margin-bottom: 15px;}
	.sec04 a p {width: 95px; font-size: 14px; line-height: 25px; padding-right: 10px;}
	.sec04 a p:after {right: 10px;}
	.sec04 .icon {bottom: 35px; right: 30px; width: 65px; height: 65px; overflow:hidden;}
	.sec04 .icon:before {height: 130px; background-size: 65px auto;}

	/* section05 */
	.sec05 {padding: 80px 0;}
	.sec05 .slide {margin-bottom: 40px;}
	.sec05 .items {margin: 0 -20px;}
	.sec05 .item {padding: 0 20px;} 

	/* section06 */
	.sec06 {padding: 80px 0 70px;}
	.sec06 .text {padding: 0 15px;}
	.sec06 .text h3 {font-size: 30px; margin-bottom: 15px; }
	.sec06 .text p {font-size: 16px; margin-bottom: 30px;}

	/* footer */
	#footer {padding:50px 0 40px;}
	#footer .wrap {display: block;}
	#footer .logo {padding-top: 0;}
	#footer .logo img {width: 200px;}
	#footer .info {padding-top: 20px;}
	#footer .hour-wrap {margin-top: 20px; padding-left: 0;} 

	/* quick menu */
	.quick-wrap .quick-btn {left: -40px; width: 40px; height: 40px;}

	.scroll-top {bottom: 80px; width: 50px; height: 50px;}
}

@media (max-width: 768px) {
	/* header */
	#header {height: 60px;}
	#header .sitelogo a {margin-top: -17px;}
	#header .sitelogo a img {width: 150px;}

	/* main-visual */
	.main-visual {margin-top: 60px;}
	.main-visual .main-btn {margin-bottom: 25px;}
	.main-visual .main-btn .paging ul li {padding: 0 10px;}
	.main-visual .main-btn .paging ul li.slick-active {padding-right: 70px;}
	.main-visual .text-wrap h2 {font-size: 27px;}

	/* main-banner */
	.main-banner .title {padding: 11px 20px;}
	.main-banner .title h3 {font-size: 20px; padding-left: 30px;}
	.main-banner .cont {padding: 25px 20px;}
	
	.main-banner .left .cont:before {top: auto; bottom: 33px; right: 20px;}
	.main-banner .left .cont .top {padding-bottom: 5px; margin-bottom: 15px;}
	.main-banner .left .cont .top p {font-size: 16px;}
	.main-banner .left .cont .top ul {margin-top: 10px;}
	.main-banner .left .cont .top ul li {flex-wrap: wrap;}
	.main-banner .left .cont .top ul li p {width: 100%; padding-left: 28px;}
	.main-banner .right .cont table tbody td {font-size: 14px;}
	.main-banner .right .cont ul {display: block;}
	.main-banner .right .cont ul li {width: 100%; font-size: 15px;}

	/* section 공통 */
	.sec-title {margin-bottom: 30px;}
	.sec-title h3 {font-size: 25px; padding-top: 32px;}
	.sec-title h3:before {background-size: 28px auto;}
	.sec-title p {font-size: 15px; margin-top: 10px;}

	/* section01 */
	.sec01 {padding: 40px 0 50px;}
	#main .sec01 .contain {padding: 0 30px;}
	.sec01 .items {margin: 0 -10px 20px;}
	.sec01 .item a {height: 330px; padding: 30px 10px 20px;}
	.sec01 .item .icon {width: 90px; height: 90px; background-size: 90px auto; margin: 0 auto 25px;}
	.sec01 .item .icon:before {top: -8px; left: -8px; width: 106px; height: 106px; background-size: 106px auto;}
	.sec01 .item h4 {font-size: 20px; margin-bottom: 10px;}
	.sec01 .item p {font-size: 15px;}
	section .slick-arrow {background-size: 15px auto;}
	section .slick-prev {left: -15px;}
	section .slick-next {right: -23px;}
	section .slick-prev:hover {left: -15px;}
	section .slick-next:hover {right: -23px;} 
	.sec01 .notice {padding: 20px 25px; margin-bottom: 30px;}
	.sec01 .notice b {font-size: 16px; margin-bottom: 8px;}
	.sec01 .notice ul li {font-size: 15px; padding-left: 7px;}
	.sec01 .notice ul li:before {top: 10px; } 

	.more-btn a {width: 130px; font-size: 15px; line-height: 43px;}

	/* section02 */
	.sec02 {padding: 40px 0;}
	.sec02 .title {width: 100%; padding-top: 40px;}
	.sec02 .title b {font-size: 15px; margin-bottom: 15px;}
	.sec02 .title h3 {font-size: 25px; margin-bottom: 30px;}
	.sec02 .img {width: 100%; justify-content: center; order: -1;}
	.sec02 .img img {width: 300px;}
	.sec02 .details h4 {font-size: 20px; margin-bottom: 10px;}
	.sec02 .details ul li {font-size: 15px; padding-left: 17px; padding-right: 20px;}
	.sec02 .details li:before {top: 10px;}

	/* section03 */
	.sec03 {padding: 40px 0 50px;}
	#main .sec03 .contain {padding: 0 30px;}
	.sec03 .sec-title {margin-bottom: 40px;}
	.sec03 .items {margin: 0 -10px 30px;}
	.sec03 .item {padding: 0 10px;}
	.sec03 .text {padding: 20px 25px 25px;}
	.sec03 .text h4 {font-size: 18px; margin-bottom: 15px;}
	.sec03 .text p {font-size: 15px;}

	/* section04 */
	.sec04 {padding: 40px 0 50px;}
	.sec04 .wrap .sec-title {margin-bottom: 10px;}
	.sec04 .sec-title h3 {font-size: 25px; padding-top: 35px;}
	.sec04 .wrap > div {width: 50%;}
	.sec04 a {padding: 25px 20px; min-height: 170px;}
	.sec04 a h4 {font-size: 22px;  margin-bottom: 7px;}
	.sec04 .icon {bottom: 20px; right: 20px; width: 50px; height: 50px;}
	.sec04 .icon:before {height: 100px; background-size: 50px auto;}

	/* section05 */
	.sec05 {padding: 60px 0;}
	.sec05 .slide {margin-bottom: 30px;}
	.sec05 .items {margin: 0}
	.sec05 .item {padding: 0 15px;} 
	.sec05 .item figure:before {opacity: 0;}
	.sec05 .slick-prev {left: 20px;}
	.sec05 .slick-next {right: 15px;}
	.sec05 .slick-prev:hover {left: 20px;}
	.sec05 .slick-next:hover {right: 15px;} 

	/* section06 */
	.sec06 {padding: 50px 0 40px;}
	.sec06 .text h3 {font-size: 22px; margin-bottom: 10px; }
	.sec06 .text p {font-size: 15px; margin-bottom: 20px;}

	/* footer */
	#footer {padding:50px 0 40px;}
	#footer .wrap {display: block;}
	#footer .logo {padding-top: 0;}
	#footer .logo img {width: 180px;}
	#footer .info {max-width: 570px; padding-top: 15px;}
	#footer .info ul {margin: 0 -8px 5px;}
	#footer .info ul li {font-size: 15px; line-height: 1.7em;}
	#footer .info p {font-size: 15px; line-height: 1.7em;}
	#footer .hour-wrap {display: block;}
	#footer .hour h6 {font-size:15px; margin-bottom: 8px;}
	#footer .hour ol li b {max-width: 28px; width: 100%; font-size: 15px; line-height: 1.7em;}
	#footer .hour ol li p {font-size: 15px; line-height: 1.7em;}
	#footer .notice {width: 100%; flex: auto; padding-top: 20px;}
	#footer .notice li {font-size: 15px; line-height: 1.7em;}

	/* quick-menu */
	.quick-wrap {right: -140px;}
	.quick-menu {width: 140px; border-radius: 30px;}
	.quick-menu ul {display: flex; flex-wrap: wrap;}
	.quick-menu ul li {width: 50%; padding: 0 10px;}
	.quick-menu ul li p {font-size: 13px; word-break: break-word;}
}

@media (max-width: 480px) {
	.sec01 .item a {height: 300px; padding: 30px 30px 20px;}

	.sec06:before {width: 100%; height: 50%;}
	.sec06:after {width: 100%; height: 50%; top: auto; bottom: 0;}
	.sec06 .row {display: block;}
	.sec06 .row > div {width:100%;}
	.sec06 .row .col {height: 250px;}

	#footer .info ul {display: block}
	#footer .info ul li:after {display: none;}
}