@charset "utf-8";

@media (max-width: 1600px) {
	/* header */
	#gnb > ul > li > a {width: 160px;}
	#gnb:hover > ul > li > a {width: 190px;}

	/* side toolbar */
	/* .side-toolbar .btn-close {display: block;} */

	/* main */
	.main-visual .btn-scroll-down {right: 20px;}

	.section01 .thumb {max-width: 500px;}

	.section03 .tab-cont {width: 1400px;}

	.section04 .section-cont .wrap {height: 500px;}
	.section04 .items {width: 1600px;}
}

@media (max-width: 1400px) {
	/* header */
	#header .sitelogo a {margin-top: -31px;}
	#header .sitelogo a img {width: 240px;}
	#gnb {margin-left: 60px;}
	#gnb > ul > li > a {width: 130px; font-size: 18px;}
	#gnb:hover > ul > li > a {width: 150px;}

	.section02 .section-cont {max-width: 760px;}

	.section03 .tab {max-width: 250px;}
	.section03 .tab-cont {width: 1200px;}
}

@media (max-width: 1200px) {
	/* header */
	#header .sitelogo a {margin-top: -27px;}
	#header .sitelogo a img {width: 210px;}
	#gnb {margin-left: 30px;}
	#gnb > ul > li > a {width: 100px; font-size: 18px;}
	#gnb:hover > ul > li > a {width: 120px;}

	.section01 .slide-wrap {justify-content: space-between;}
	.section01 .thumb {max-width: 45%; margin-right: 25px;}
	.section01 .nav {max-width: 55%;}

	.section02 .section-cont {max-width: 660px;}

	.section04 .section-cont .wrap {height: 400px;}
	.section04 .items {width: 1200px;}
}

@media (max-width: 1024px) {
	/* header */
	#header {height:80px;}
	#header.hide {transform:translateY(0);}
	#gnb {display:none;}

	/* side-toolbar */
	.side-toolbar {right: 15px;}
	.side-toolbar.hide {right: -85px;}
	.side-toolbar .wrap {width: 85px;}
	.side-toolbar .quick-menu {padding: 18px 5px;}
	.side-toolbar .quick-menu li:not(:last-child) {margin-bottom: 15px;}
	.side-toolbar .quick-menu a {font-size: 14px;}
	.side-toolbar .quick-menu .icon {width: 54px; height: 54px; background-size: 54px auto; margin: 0 auto 10px;}
	.side-toolbar .btn-top {height: 45px; font-size: 16px;}

	.main-visual {margin-top: 80px;}
	.main-visual .item {height: calc(100vh - 80px);} 
	.main-visual .item .text-box {margin-top: -50px;}
	.main-visual .item .text-box p {font-size: 20px; margin-bottom: 25px;}
	.main-visual .item .text-box h2 {font-size: 40px;}

	.section-title h3 {font-size: 42px;}
	.section-title span {width: 8px; height: 8px; margin-left: 15px;}
	.section-title p {font-size: 18px; margin-top: 20px;}

	.section01 {padding-top: 110px;}
	.btn-more {width: 140px; height: 44px; font-size: 15px; line-height: 44px; padding: 0 10px;}
	.section01 .btn-more {top: 50px; right: 15px;}
	.section01 .thumb {max-width: 45%; margin-right: 0;}
	.section01 .thumb .item {padding: 50px 30px;}
	.section01 .thumb .text-box {padding: 20px 25px;}
	.section01 .thumb .text-box p {font-size: 20px;}
	.section01 .nav {max-width: 55%;}
	.section01 .nav .items {margin: 0 -10px;}
	.section01 .nav .item {padding: 0 10px 50px;}
	.section01 .nav .text-box {padding: 20px 25px;}
	.section01 .nav .text-box p {font-size: 16px;}
	.section01 .bar {margin-right: 50px;}

	.section02 {padding: 110px 0 100px;}
	.section02 .wrap {display: block;}
	.section02 .section-title h3 {margin-bottom: 30px;}
	.section02 .btn-more {width: 170px; margin-bottom: 24px;}
	.section02 .section-cont {max-width: 600px; margin: 10px 0 0 auto;}
	.section02 .section-cont ul {margin: -12px;}
	.section02 .section-cont ul li {width: 50%; padding: 12px;}
	.section02 .section-cont ul li a {min-height: 180px; padding: 35px 30px;}
	.section02 .section-cont ul li h4 {font-size: 28px; padding-left: 50px;}
	.section02 .section-cont ul li h4:before {width: 38px; height: 38px; background-size: 38px auto;}
	.section02 .section-cont ul li .btn-plus {width: 50px; height: 50px;} 
	.section02 .img-box {height: 360px;}

	.section03 {padding-top: 120px;}
	.section03 .title-wrap {margin-bottom: 50px;}
	.section03 .section-cont {padding: 70px 0 80px;} 
	.section03 .tab {max-width: 180px;}
	.section03 .tab-menu button {font-size: 22px; padding-right: 23px; margin-bottom: 19px;}  
	.section03 .tab-cont-wrap {height: 350px;}
	.section03 .tab-cont {width: 1000px;}
	.section03 .tab-cont .item a {padding: 45px 40px;}
	.section03 .tab-cont .item .date {font-size: 28px; margin-bottom: 70px;}
	.section03 .tab-cont .item .btn-plus {top: 45px; right: 40px;}
	.section03 .tab-cont .item h4 {font-size: 24px; margin-bottom: 20px;}
	.section03 .tab-cont .item p {font-size: 16px;}

	.section04 {padding: 110px 0 140px;}
	.section04 .title-wrap {margin-bottom: 60px;}
	.section04 .section-cont .wrap {height: auto; }
	.section04 .items {position: relative; top: auto; left: auto; width: auto; margin: 0 -10px 40px;}
	.section04 .item {padding: 0 10px;}
	.section04 .img-box {margin-bottom: 25px;}
	.section04 .text-box h4 {font-size: 20px; margin-bottom: 15px;}
	.section04 .text-box .date {font-size: 16px; padding-left: 25px;}
	.section04 .text-box .date:before {top: 0;}
	.section04 .bar {margin-right: 50px;}

	/* footer */
	#footer {padding:50px 0;}
	#footer .logo {margin-bottom: 20px;}
	#footer .logo img {width: 210px;}
	#footer .info-wrap {font-size: 15px; padding-bottom: 20px; margin-bottom: 25px;}
	#footer .info {max-width: 580px;}
	#footer .account b {font-size: 16px;}
	#footer .terms {font-size: 15px;}
	#footer .terms ul li a {width: 160px; height: 36px; line-height: 34px; padding: 0 15px;}
	#footer .terms ul li a:after {right: 12px;}
}

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

	.mems {right:50px;}
	.mems ul {margin: 0 -10px;}
	.mems ul li {padding:0 10px;}
	.mems ul li a {font-size: 15px;}

	/* main */
	.main-visual {margin-top: 60px;}
	.main-visual .item {height: calc(100vh - 60px);} 
	.main-visual .item .text-box {margin-top: -50px;}
	.main-visual .item .text-box p {font-size: 18px; margin-bottom: 20px;}
	.main-visual .item .text-box h2 {font-size: 30px;}
	.main-visual .item .text-box h2 br {display: none;}

	.main-visual .controler-wrap {bottom: 80px;}
	.main-visual .paging {margin-right: 25px;}
	.main-visual .paging ul {margin: 0 -10px;}
	.main-visual .paging ul li {padding: 0 10px;}
	.main-visual .paging ul li.slick-active {padding-right: 70px;}
	.main-visual .paging ul li:after {right: 10px;}
	.main-visual .paging ul li.slick-active:after {width: 45px;}
	.main-visual .btn-scroll-down {bottom: 70px; right: 20px; width: 110px; padding: 0 12px; font-size: 13px; line-height: 32px;}
	.main-visual .btn-scroll-down:after {right: 8px;}

	.section-title h3 {font-size: 32px;}
	.section-title span {width: 6px; height: 6px; margin-left: 12px;}
	.section-title p {font-size: 16px; margin-top: 20px;}

	.section01 {padding-top: 80px;}
	.btn-more {width: 140px; height: 44px; font-size: 15px; line-height: 44px; padding: 0 10px;}
	.section01 .btn-more {position: relative; top: auto; right: auto; margin: 0 0 0 auto;}
	.section01 .slide-wrap {display: block;}
	.section01 .thumb {max-width: none; margin: 0;}
	.section01 .thumb .item {padding: 30px 0;}
	.section01 .thumb .item a {box-shadow: unset;}
	.section01 .thumb .text-box {padding: 20px 20px;}
	.section01 .thumb .text-box p {font-size: 18px;}
	.section01 .nav {display: none;}
	.section01 .bar {margin-right: 30px;}

	.section02 {padding: 90px 0 80px;}
	.section02 .section-title h3 {margin-bottom: 20px;}
	.section02 .btn-more {width: 170px; margin-bottom: 15px;}
	.section02 .section-cont {max-width: none; margin: 40px auto 0;}
	.section02 .section-cont ul {margin: -10px;}
	.section02 .section-cont ul li {width: 50%; padding: 10px;}
	.section02 .section-cont ul li a {min-height: 150px; padding: 30px 20px;}
	.section02 .section-cont ul li h4 {font-size: 22px; padding-left: 38px;}
	.section02 .section-cont ul li h4:before {width: 28px; height: 28px; background-size: 28px auto;}
	.section02 .section-cont ul li .btn-plus {width: 40px; height: 40px;} 
	.section02 .img-box {height: 300px;}

	.section03 {padding-top: 90px;}
	.section03 .title-wrap {display: block; margin-bottom: 40px;}
	.section03 .title-wrap .btn-more {margin: 0 0 0 auto;}
	.section03 .section-cont {padding: 60px 0 80px;} 
	.section03 .cont-wrap {display: block;}
	.section03 .tab {max-width: none;}
	.section03 .tab-menu button {font-size: 22px; padding-right: 23px; margin-bottom: 19px;}  
	.section03 .tab-cont-wrap {height: 275px;}
	.section03 .tab-cont {width: 100%;}
	.section03 .tab-cont .item a {padding: 35px 25px;}
	.section03 .tab-cont .item .date {font-size: 20px; margin-bottom: 40px;}
	.section03 .tab-cont .item .btn-plus {top: 35px; right: 25px;}
	.section03 .tab-cont .item h4 {font-size: 20px; margin-bottom: 15px;}
	.section03 .tab-cont .item p {font-size: 16px;}
	.section03 .arrows {margin: 0 0 15px auto;}

	.section04 {padding: 90px 0 100px;}
	.section04 .title-wrap {display: block; margin-bottom: 40px;}
	.section04 .btn-more {margin: 0 0 0 auto;}
	.section04 .section-cont .wrap {height: auto;}
	.section04 .items {position: relative; /* width: 100%; */ margin: 0 -10px 30px;}
	.section04 .item {padding: 0 10px;}
	.section04 .img-box {margin-bottom: 20px;}
	.section04 .text-box h4 {font-size: 18px; margin-bottom: 15px;}
	.section04 .text-box .date {font-size: 16px; padding-left: 25px;}
	.section04 .bar {margin-right: 30px;}

	/* footer */
	#footer {padding:30px 0 150px; text-align: center;}
	#footer .logo {margin-bottom: 20px;}
	#footer .logo img {width: 170px;}
	#footer .info-wrap {display: block; font-size: 15px; line-height: 1.8em; padding-bottom: 15px; margin-bottom: 15px;}
	#footer .info {max-width: none;}
	#footer .info ul {justify-content: center;}
	#footer .account {margin-top: 15px;}
	#footer .account b {font-size: 16px;}
	#footer .terms {display: block; font-size: 15px;}
	#footer .terms ul {justify-content: center; margin-top: 15px; text-align: left;}	
	#footer .terms ul li a {width: 160px; height: 36px; line-height: 34px; padding: 0 15px;}
	#footer .terms ul li a:after {right: 12px;}

	/* side-toolbar */
	.side-toolbar {width: 100%; top: auto; right: auto; bottom: 0; left: 0; transform: unset;}
	.side-toolbar .wrap {width: 100%; border-radius: 0;}
	.side-toolbar .quick-menu {padding: 8px 5px;}
	.side-toolbar .quick-menu ul {display: flex; width: 100%;}
	.side-toolbar .quick-menu li {width: 33.333%; margin-bottom: 0;}
	.side-toolbar .quick-menu li:not(:last-child) {margin-bottom: 0;}
	.side-toolbar .quick-menu a {font-size: 13px;}
	.side-toolbar .quick-menu .icon {width: 45px; height: 45px; background-size: 45px auto; margin: 0 auto 5px;}
	.side-toolbar .btn-top {height: 34px; font-size: 15px;}
}