@charset "utf-8";

@media (max-width: 1900px) {
	/* footer */
	.scroll-top {bottom: 80px; right: 40px;}
}

@media (max-width: 1700px) {
	/* header */
	#gnb>ul {justify-content: center;}
	#gnb>ul>li {padding:0 90px;}

	.sitemap-btn {right: 15px;}
}

@media (max-width: 1600px) {
	/* header */
	#gnb>ul>li {padding:0 76px;}
	#gnb .submenu {width: 200px; margin-left: -100px;}

	/* main */
	.sec02 .title-wrap {max-width: 550px;}
	.sec07 .slide {left: 500px;}
}

@media (max-width: 1400px) {
	/* header */
	#gnb>ul>li {padding:0 60px;}
	#gnb .submenu {width: 180px; margin-left: -90px;}

	/* main */
	.sec01 .box02 {padding-left: 60px;}
	.sec02 .title-wrap {max-width: 500px;}
	.sec03 ul {flex-wrap: wrap; justify-content: center; margin: -15px;}
	.sec03 ul li {max-width: 270px; width: 33.333%; padding: 15px;}
	.sec03 ul li:nth-child(even) a {margin-top: 0;}
	.sec04 .text-box {padding-right: 60px;}
	.sec06 .title {max-width: 460px;}
	.sec06 .info-wrap {padding-left: 50px;}
	.sec07 .slide {left: 400px;}
}

@media (max-width: 1200px) {
	/* header */
	#gnb>ul>li {padding:0 50px;}
	#gnb>ul>li>a {font-size: 16px;}
	/* #gnb>ul>li:hover>a {font-size: 18px;} */
	#gnb .submenu {width: 160px; margin-left: -80px;}

	/* main */
	.sec01 .box01 {max-width: 460px;}
	.sec01 .box02 {padding-left: 40px;}
	.sec01 .box02 .img-box img {max-width: 400px;}
	.sec02 .title-wrap {max-width: 450px;}
	.sec02 .info-wrap dl {padding: 0 30px;}
	.sec02 .info-wrap dt {padding-right: 60px;}
	.sec04 .text-box {padding-right: 40px;}
	.sec06 .title {max-width: 440px;}
	.sec06 .info-wrap {padding-left: 40px;}
	.sec06 .info ul li .inner {padding: 50px 10px 60px;}

	/* footer */
	.scroll-top {bottom: 60px; right: 30px;}
}

@media (max-width: 1024px) {
	/* header */
	#header {height: 100px;}
	#header .sitelogo {text-align: left; padding-top: 14px;}
	#header .sitelogo img {width: 110px;}
	#gnb {display:none;}
	#header.hide {transform:translateY(0);}
	
	.sitemap-btn {bottom: auto; top: 50%; margin-top: -8px;}

	/* main */
	.main-visual {height: 600px; margin: 100px auto 0;}
	.main-visual .item {height: 600px;}
	.main-visual .item .text-box h2 {font-size: 60px;}
	.main-visual .item .text-box h2 span {margin-bottom: 18px; background-size: 26px auto;}
	.main-visual .item .text-box h2 span:nth-child(1) {margin-right: 5px;}
	.main-visual .item .text-box h2 span:nth-child(2) {margin-left: 6px;}
	.main-visual .arrows {bottom: 40px; right: 40px;}
	.main-visual .slick-arrow {width: 60px; height: 60px;}
	.main-visual .scroll-down {bottom: 40px; left: 40px;}

	/* common */
	.sec-title b {font-size: 24px; padding-top: 33px; margin-bottom: 25px;}
	.sec-title h3 {font-size: 45px;}
	.sec-title.white h3 {margin-bottom: 18px;}
	.sec-title.white p {font-size: 16px;}

	.sec01 {padding: 110px 0 130px;}	
	.sec01 .wrap {display: flex;}
	.sec01 .box01 {max-width: 360px; width: 100%;}
	.sec01 .box02 {padding-left: 40px;}
	.sec01 .box02 .text-box p {font-size: 20px; margin-top: 35px; margin-bottom: 70px;}
	.sec01 .box02 .img-box img {max-width: 340px;}

	.sec02 {padding: 130px 0 150px;}
	.sec02 .title-wrap {max-width: 320px;}
	.sec02 .more-btn {width: 190px; height: 170px; background-size: 190px auto;}
	.sec02 .more-btn a {font-size: 20px; padding: 25px 35px;}
	.sec02 .info-wrap dl {height: 120px; padding: 0 20px;}
	.sec02 .info-wrap dt {font-size: 26px; padding-right: 40px;}
	.sec02 .info-wrap dd {font-size: 16px;}
	.sec02 .info-wrap dd span {font-size: 15px;}

	.sec03 {padding: 100px 0 130px;}
	.sec03 .sec-title {margin-bottom: 50px;}
	.sec03 ul {margin: -10px;}
	.sec03 ul li {padding: 10px;}
	.sec03 ul li a {height: 320px; padding: 50px 15px 35px 35px;}
	.sec03 ul li a b {font-size: 22px; margin-bottom: 10px;}
	.sec03 ul li a h4 {font-size: 20px; margin-bottom: 25px;}
	.sec03 ul li a p {display: none; /* font-size: 15px; padding-top: 20px; */}
	.sec03 ul li a .btn {opacity: 1; bottom: 35px; right: 30px;}
	.sec03 ul li a:hover .btn {bottom: 35px;}
	.sec03 ul li a:hover .text-box {margin-top: 0;}
	.sec03 ul li a:hover b {opacity: 1;}
	.sec03 ul li a:hover:after {display: none;}

	.sec04 {padding: 100px 0;}
	.sec04 .sec-title {margin-bottom: 60px;}
	.sec04 .text-box {padding-right: 20px;}
	.sec04 .text-box ul {margin: -8px;}
	.sec04 .text-box ul li {padding: 8px;}
	.sec04 .text-box ul li .inner {padding: 30px 15px 25px;}
	.sec04 .text-box ul li:nth-child(1) .inner {min-height: 120px;}
	.sec04 .text-box ul li .title {top: -13px;}
	.sec04 .text-box ul li .title h4 {font-size: 15px; padding: 0 16px;}
	.sec04 .text-box ul li:nth-child(4) .title h4, .sec04 .text-box ul li:nth-child(5) .title h4 {width: 110px;}
	.sec04 .text-box ul li .title h4:before {margin-top: -5px;}
	.sec04 .text-box ul li .title h4:after {margin-top: -5px;}
	.sec04 .text-box ul li p {font-size: 18px;} 
	.sec04 .text-box ul li.mail p:last-child {margin-top: 10px; padding-top: 10px;}
	.sec04 .text-box ul li.tel p a {font-size: 20px;}
	.sec04 .text-box ul li.mail p a {word-break: break-all;}
	.sec04 .text-box .notice {margin-top: 20px; padding-left: 10px;}
	.sec04 .text-box .notice a {font-size: 16px;}

	.sec05 {padding: 110px 0;}
	.sec05 .sec-title {margin-bottom: 60px;}
	.sec05 ul {margin: -5px;}
	.sec05 ul li {padding: 5px;}
	.sec05 ul li a {min-height: 200px; padding: 30px 25px 30px 30px;}
	.sec05 ul li .status {top: -14px; right: 32px; width: 90px; line-height: 40px; font-size: 15px;}
	.sec05 ul li .icon {background-size: 80px auto;}
	.sec05 ul li .text h4 {font-size: 20px; padding-right: 25px;}
	.sec05 ul li .text h4:after {bottom: 5px;}

	.sec06 {padding-bottom: 130px;}
	.sec06 .title {max-width: 260px;}
	.sec06 .img-box {margin-top: 40px;}
	.sec06 .img-box a {bottom: 20px; right: 40px;}
	.sec06 .img-box a img {width: 26px;}
	.sec06 .info-wrap {padding-left: 30px; margin-top: 85px;}
	.sec06 .info > h4 {font-size: 35px; margin-bottom: 15px;}
	.sec06 .info > p {font-size: 16px; margin-bottom: 30px;}
	.sec06 .info {margin-bottom: 40px;}
	.sec06 .info ul {margin: -5px;}
	.sec06 .info ul li {padding: 5px;}
	.sec06 .info ul li .inner {padding: 30px 10px 40px;}
	.sec06 .info ul li .icon {width: 100px; height: 100px; background-size: 100px auto; margin: 0 auto 10px;}
	.sec06 .info ul li b {font-size: 18px; margin-bottom: 10px;}
	.sec06 .info ul li p {font-size: 16px;}
	.sec06 .link ul li {height: 80px; padding: 0 20px;}
	.sec06 .link ul li a {font-size: 22px;}

	.sec07 {height: 400px; margin-top: 270px;}
	.sec07 .wrap {padding-top: 120px;}
	.sec07 .sec-title {max-width: 270px;}
	.sec07 .title a {width: 60px; height: 60px;}
	.sec07 .arrows {margin-top: 40px;}
	.sec07 .slick-arrow {width: 50px; height: 50px;}
	.sec07 .slide {top: -260px; left: 340px;}
	.sec07 .slide .items {margin: -15px;}
	.sec07 .slide .item {padding: 15px;}
	.sec07 .slide .item a {padding: 40px 30px 50px; box-shadow: 0px 1px 13px 0px rgba(32, 38, 53, 0.1);}
	.sec07 .slide .item h4 {font-size: 20px;} 
	.sec07 .slide .item p {font-size: 16px; padding-top: 20px; margin-top: 20px;}
	.sec07 .slide .item .btn {bottom: 20px; left: 30px; font-size: 22px; padding-right: 25px;}
	.sec07 .slide .item .btn:after {bottom: 6px;}
	.sec07 .slide .item a:hover .btn {bottom: 55px;}

	/* footer */
	.footer-top {padding: 24px 0;}
	.footer-top .terms p {font-size: 15px; margin-right: 15px;}
	.footer-top .terms ul li {padding: 0 10px;}
	.footer-top .terms ul li a {font-size: 15px;}
	.footer-top .privacy li a {width: 170px; line-height: 38px; padding: 0 15px;}
	.footer-top .privacy li a:after {right: 20px;}
	.footer-top .privacy li a:hover:after {right: 16px;}
	.footer-bottom {padding: 60px 0;}
	.footer-bottom .tel {font-size: 24px; margin-bottom: 15px;}
	.footer-bottom .tel a {display: inline; margin-left: 15px;}
	.footer-bottom .inquiry {max-width: 250px; height: 54px; padding: 0 20px; margin-bottom: 40px;}
	.footer-bottom .inquiry a {font-size: 16px; line-height: 52px; padding-left: 30px;}
	.footer-bottom .info {font-size: 15px;}
	.footer-bottom .info ul li:after {margin-top: -7px; height: 14px;}
	.footer-logo img {width: 130px;}

	.quick-menu {bottom: 20px; max-width: 500px; padding: 10px 12px;}
	.quick-menu dl {padding-left: 10px;}
	.quick-menu dl > * {padding: 0 10px;}
	.quick-menu dt {font-size: 16px;}
	.quick-menu dd {font-size: 22px;}
	.quick-menu .inquiry a {width: 200px; line-height: 50px; padding: 0 30px; font-size: 16px;}
	.quick-menu .inquiry a:after {right: 25px;} 
}

@media (max-width: 768px) {
	/* header */
	#header {height: 80px;}
	#header .sitelogo {padding-top: 10px;}
	#header .sitelogo img {width: 90px;}

	/* main */
	.main-visual {height: 540px; margin: 80px auto 0;}
	.main-visual .item {height: 540px;}
	.main-visual .item .img-box01 {background-image: url('../img/main/main_visual01_mob.jpg');}
	.main-visual .item .img-box02 {background-image: url('../img/main/main_visual02_mob.jpg');}
	.main-visual .item .img-box03 {background-image: url('../img/main/main_visual03_mob.jpg');}
	.main-visual .item .text-box h2 {font-size: 42px;}
	.main-visual .item .text-box h2 span {display: block; margin-bottom: 0; background-size: 24px auto; margin: auto;}
	.main-visual .item .text-box h2 span:nth-child(1) {margin-right: auto;}
	.main-visual .item .text-box h2 span:nth-child(2) {margin-left: auto;}
	.main-visual .arrows {bottom: 30px; right: 25px;}
	.main-visual .slick-arrow {width: 50px; height: 50px;}
	.main-visual .scroll-down {bottom: 30px; left: 25px;}

	/* common */
	.sec-title b {font-size: 20px; padding-top: 30px; margin-bottom: 15px;}
	.sec-title h3 {font-size: 30px;}
	.sec-title.white h3 {margin-bottom: 18px;}
	.sec-title.white p {font-size: 15px;}

	.sec01 {padding: 70px 0 80px;}	
	.sec01 .wrap {flex-wrap: wrap;}
	.sec01 .box01 {max-width: 340px; width: 100%; order: 2; margin-top: 30px;}
	.sec01 .box02 {width: 100%; flex: auto; padding-left: 0; order: 1; margin-top: 0;}
	.sec01 .box02 .text-box p {font-size: 18px; margin-top: 25px; margin-bottom: 40px;}
	.sec01 .box02 .img-box img {max-width: 300px;}

	.sec02 {padding: 100px 0 120px;}
	.sec02 .wrap {display: block;}
	.sec02 .title-wrap {max-width: none; flex-direction: row; justify-content: space-between; margin-bottom: 40px;}
	.sec02 .sec-title {margin-top: -8px;}
	.sec02 .more-btn {width: 130px; height: 115px; background-size: 130px auto;}
	.sec02 .more-btn a {font-size: 18px; padding: 15px 20px;}
	.sec02 .info-wrap {width: 100%; flex: auto;}
	.sec02 .info-wrap dl {height: 120px; padding: 0 10px;}
	.sec02 .info-wrap dt {font-size: 22px; padding-right: 20px;}
	.sec02 .info-wrap dd {font-size: 16px;}
	.sec02 .info-wrap dd span {font-size: 15px; line-height: 1.3em;}

	.sec03 {padding: 80px 0 100px;}
	.sec03 .sec-title {margin-bottom: 40px;}
	.sec03 ul {margin: -5px;}
	.sec03 ul li {width: 50%; padding: 5px;}
	.sec03 ul li a {height: 280px; padding: 35px 20px 30px 20px;}
	.sec03 ul li a b {font-size: 20px; margin-bottom: 8px;}
	.sec03 ul li a h4 {font-size: 18px; margin-bottom: 20px;}
	.sec03 ul li a p {font-size: 15px; padding-top: 20px;}
	.sec03 ul li a .btn {bottom: 25px; right: 20px;}
	.sec03 ul li a:hover .btn {bottom: 25px;}

	.sec04 {padding: 80px 0;}
	.sec04 .sec-title {margin-bottom: 50px;}
	.sec04 .wrap {display: block;}
	.sec04 .text-box {padding-right: 0;}
	.sec04 .text-box ul {margin: -8px;}
	.sec04 .text-box ul li {padding: 8px;}
	.sec04 .text-box ul li .inner {padding: 30px 15px 25px;}
	.sec04 .text-box ul li:nth-child(1) .inner {min-height: 110px;}
	.sec04 .text-box ul li .title {top: -13px;}
	.sec04 .text-box ul li .title h4 {font-size: 15px; padding: 0 16px;}
	.sec04 .text-box ul li:nth-child(4) .title h4, .sec04 .text-box ul li:nth-child(5) .title h4 {width: 110px;}
	.sec04 .text-box ul li .title h4:before {margin-top: -5px;}
	.sec04 .text-box ul li .title h4:after {margin-top: -5px;}
	.sec04 .text-box ul li p {font-size: 16px;} 
	.sec04 .text-box ul li.mail p:last-child {margin-top: 10px; padding-top: 10px;}
	.sec04 .text-box ul li.tel p a {font-size: 20px;}
	.sec04 .text-box ul li.mail p a {word-break: break-all;}
	.sec04 .text-box .notice {margin-top: 15px; padding-left: 10px;}
	.sec04 .text-box .notice a {font-size: 15px;}
	.sec04 .img-box {margin: 30px auto 0;}
	
	.sec05 {padding: 80px 0 100px;}
	.sec05 .sec-title {margin-bottom: 40px;}
	.sec05 ul {flex-wrap: wrap; margin: -12px -5px;}
	.sec05 ul li {width: 50%; padding: 12px 5px;}
	.sec05 ul li a {min-height: 180px; padding: 35px 20px 25px 25px;}
	.sec05 ul li a.open {background: #fff; border: 1px solid #0065b5;}
	.sec05 ul li a.closed {background: #fff; border: 1px solid #86949e;}
	.sec05 ul li .status {opacity: 1; right: 15px; width: 80px;}
	.sec05 ul li .icon {background-size: 76px auto; margin: 0 auto; background-position: center center;}
	.sec05 ul li:nth-child(1) a.open .icon {background-image: url('../img/main/sec05-icon01-open.png');}
	.sec05 ul li:nth-child(2) a.open .icon {background-image: url('../img/main/sec05-icon02-open.png');}
	.sec05 ul li:nth-child(3) a.open .icon {background-image: url('../img/main/sec05-icon03-open.png');}
	.sec05 ul li:nth-child(4) a.open .icon {background-image: url('../img/main/sec05-icon04-open.png');}
	.sec05 ul li:nth-child(1) a.closed .icon {background-image: url('../img/main/sec05-icon01-closed.png');}
	.sec05 ul li:nth-child(2) a.closed .icon {background-image: url('../img/main/sec05-icon02-closed.png');}
	.sec05 ul li:nth-child(3) a.closed .icon {background-image: url('../img/main/sec05-icon03-closed.png');}
	.sec05 ul li:nth-child(4) a.closed .icon {background-image: url('../img/main/sec05-icon04-closed.png');}
	.sec05 ul li .text h4 {font-size: 18px; padding-right: 20px;}
	.sec05 ul li .text h4:after {opacity: 1; bottom: 2px; background-size: 14px auto;}
	.sec05 ul li a.closed .text h4 {color: #86949e;}
	.sec05 ul li a.open .text h4:after {opacity: 1; background-image: url('../img/main/sec05-arrow-open.png');}
	.sec05 ul li a.closed .text h4:after {opacity: 1; background-image: url('../img/main/sec05-arrow-closed.png');}

	.sec06 {padding-bottom: 100px;}
	.sec06 .wrap {display: block;}
	.sec06 .title {max-width: none;}
	.sec06 .img-box {margin-top: -15px;}
	.sec06 .img-box img.mob-only {display: block;}
	.sec06 .img-box img.pc-only {display: none;}
	.sec06 .img-box a {bottom: 8%; right: 10%;}
	.sec06 .info-wrap {width: 100%; flex: auto; margin-top: 30px; padding-left: 0;}
	.sec06 .info > h4 {font-size: 25px; margin-bottom: 10px;}
	.sec06 .info > p {font-size: 16px; margin-bottom: 20px;}
	.sec06 .info {margin-bottom: 35px;}
	.sec06 .info ul li .inner {padding: 30px 10px;}
	.sec06 .info ul li .icon {width: 80px; height: 80px; background-size: 80px auto; margin: 0 auto 10px;}
	.sec06 .link ul li {height: 60px; padding: 0 10px;}
	.sec06 .link ul li a {font-size: 18px;}
	
	.sec07 {height: 330px; margin-top: 0; margin-bottom: 320px;}
	.sec07 .wrap {padding-top: 85px; align-items: flex-end;}
	.sec07 .sec-title {max-width: 270px;}
	.sec07 .slide {position: relative; top: 0; left: 0; margin-top: 40px;}
	.sec07 .slide .items {margin: -30px -10px;}
	.sec07 .slide .item {padding: 20px 10px;}
	.sec07 .slide .item a {padding: 30px 25px 40px; box-shadow: 0px 1px 8px 0px rgba(32, 38, 53, 0.1);}
	.sec07 .slide .item h4 {font-size: 18px;} 
	.sec07 .slide .item p {font-size: 15px; padding-top: 15px; margin-top: 15px; height:calc(1.8em * 1 * 6);}
	.sec07 .slide .item .btn {bottom: 20px; left: 25px; font-size: 20px; padding-right: 25px;}
	.sec07 .slide .item .btn:after {bottom: 6px;}
	.sec07 .slide .item a:hover .btn {bottom: 35px;}

	/* footer */
	.footer-top {padding: 20px 0;}
	.footer-top .wrap {display: block;}
	.footer-top .terms {justify-content: center; margin-bottom: 10px;}
	.footer-top .terms p {font-size: 15px; margin-right: 10px;}
	.footer-top .terms ul li {padding: 0 5px;}
	.footer-top .privacy {justify-content: center;}
	.footer-top .privacy li a {width: 150px; line-height: 38px; padding: 0 10px;}
	.footer-top .privacy li a:after {right: 13px;}
	.footer-top .privacy li a:hover:after {right: 8px;}
	.footer-bottom {padding: 40px 0;}
	.footer-bottom .wrap {flex-direction: column; justify-content: center;}
	.footer-bottom .tel {font-size: 22px; margin-bottom: 15px; text-align: center;}
	.footer-bottom .inquiry {margin: 0 auto 30px;}
	.footer-bottom .info {text-align: center;}
	.footer-bottom .info ul {display: block;}
	.footer-bottom .info ul li:after {display: none;}
	.footer-logo img {width: 110px; margin-top: 20px;}

	.scroll-top {bottom: 90px; right: 10px; width: 45px; height: 45px;}

	.quick-menu {bottom: 10px; max-width: 410px; width: calc(100% - 20px); padding: 10px 12px;}
	.quick-menu dl {display: block; padding-left: 0;}
	.quick-menu dl > * {padding: 0 10px;}
	.quick-menu dt {font-size: 15px;}
	.quick-menu dt:after {display: none;}
	.quick-menu dd {font-size: 18px;}
	.quick-menu .inquiry a {width: 180px; line-height: 50px; padding: 0 20px; font-size: 16px;}
	.quick-menu .inquiry a:after {right: 18px;}
}

@media (max-width: 480px) {
	.sec01 .box01 {max-width: none; margin-top: 20px;}
	.sec01 .box02 .img-box img {max-width: none; width: 100%;}

	.sec06 .img-box a {bottom: 4%; right: 9%;}
	.sec06 .img-box a img {width: 22px;}
	.sec06 .info > p br.pc-only {display: none;}
	.sec06 .info ul {flex-wrap: wrap;}
	.sec06 .info ul li {width: 100%;}
	.sec06 .info ul li .inner {padding: 20px 10px;}

	.sec07 .wrap {display: block; padding-top: 60px;}
	.sec07 .sec-title {max-width: none;}
	.sec07 .arrows {margin-top: 10px; text-align: right;}
	.sec07 .slide {margin-top: 25px;}

	/* footer */
	.quick-menu {padding: 8px;}
	.quick-menu dl > * {padding: 0 5px;}
}