@charset "utf-8";

.main-contents {padding-top: 4.33em; padding-bottom: 5.56em; overflow: hidden;}
.main-contents .bt-more {display: flex; align-items: center; justify-content: center; width: 1.89em; height: 1.89em; border-radius: 100%; background-color: #fff; border: 1px solid #c5c5c5;}
.main-contents .bt-more .plus-ico {width: 1.11em; height: 1.11em; display:block; position:relative; color: #888;}
.main-contents .bt-more .plus-ico:before, .plus-ico:after {content:''; display:block; width: 1.11em; height: 2px; background: currentColor; position:absolute; top: .50em; left:0;}
.main-contents .bt-more .plus-ico:after {width: 2px; height: 1.11em; top:0; left: .50em;}
.main-contents .mtit {font-weight: 700; font-size: 2.33em; color: #000;}

@media screen and (max-width: 1180px) {
	.main-contents {padding-top: 2em; padding-bottom: 0;}
}
@media screen and (max-width: 568px) {
	.main-contents .mtit {font-size: 2em;}
}

/* section 1 */
.visual-section {max-width: 1560px; padding: 0 1.11em; margin: 0 auto; display: grid; grid-template-columns: 1.12fr 1fr; gap: 3.50em;}
/* left */
.vis-slider {/* width: 810px; */ height: 0; padding-top: 58.66%; border: 10px solid #fff; border-radius: 2.78em 2.78em 2.78em 5.56em; overflow: hidden; position: relative; box-shadow: 0 0 .83em rgb(0 0 0 / 0.2);}
.vis-slider .vis-items {position: absolute; top: 0; left:0; width: 100%; height: 100%; line-height: 0;}
.vis-slider .vis-items .vis-item, .vis-slider .vis-items .slick-list, .vis-slider .vis-items .slick-track {height: 100%;}
.vis-slider .vis-items .vis-item a {display: block; width: 100%; height: 100%;}
.vis-slider .vis-items .vis-item a img {width: 100%; height: 100%; object-fit: cover;}

.vis-slider .slider-controls {padding: .89em 1.67em .89em 2.22em; background-color: rgba(14, 26, 51, .75); color: #fff; border-radius: 3.33em 0 1.11em 0; position: absolute; bottom: 0; right: 0; display: flex; align-items: center; gap: 1.11em;}
.vis-slider .slider-controls .vis-pagination {font-size: 1.33em;}
.vis-slider .slider-controls .vis-btns {display: flex; align-items: center; gap: .75rem;}
.vis-slider .slider-controls .vis-btns button {width: 1.11em; height: 1.11em; background-position: center; background-repeat: no-repeat; background-size: contain;}
.vis-slider .slider-controls .vis_arrow-prev {background-image: url("../../img_new/icon/slide_prev.png");}
.vis-slider .slider-controls .vis_arrow-next {background-image: url("../../img_new/icon/slide_next.png");}
.vis-slider .slider-controls .vis_item-pause {background-image: url("../../img_new/icon/pause_slide.png");}
.vis-slider .slider-controls .vis_item-play {background-image: url("../../img_new/icon/play.png");}

/* right */
.guide-section {padding-top: .78em; background: url("../../img_new/main/bg_guide.png") top 3.22em right 0 / 21.67em no-repeat;}
.guide-section p {font-weight: 600; font-size: 1.22em; line-height: 1.4; padding-top: 1.09em;}
.guide-section .guide-items {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.11em;}
.guide-section .guide-items .guide-item {height: 16.67em; padding: 2.22em; margin-top: 2.78em; border-radius: 1.67em 1.67em 1.67em 5.56em; color: #fff; position: relative;}
.guide-section .guide-items .guide-item h3 {font-weight: 800; font-size: 1.67em;}
.guide-section .guide-items .guide-item ul {margin-top: 1.25em; font-weight: 500; font-size: 1.33em; display: grid; row-gap: .42em;}
.guide-section .guide-items .guide-item ul li {display: flex; align-items: center; gap: 0 .33em;}
.guide-section .guide-items .guide-item ul li::before {content: ''; flex-shrink: 0; display: block; width: 4px; height: 4px; background-color: #fff; border-radius: 100%;}
.guide-section .guide-items .guide-item ul li a:hover {text-decoration: underline;}
.guide-section .guide-items .guide-item .bt-more {position: absolute; top: 2.22em; left: 11.67em;}
.guide-section .guide-items .guide-item.nadri {background: url("../../img_new/main/bg_guide_nadri.png") bottom 2em right 1.56em / 6.06em no-repeat #495ec7;}
.guide-section .guide-items .guide-item.nadri .bt-more {background-color: #253688; border: 0;}
.guide-section .guide-items .guide-item.nadri .bt-more .plus-ico {color: #9db2fb;}
.guide-section .guide-items .guide-item.happy {background: url("../../img_new/main/bg_guide_happy.png") bottom 2em right 1.22em / 6.06em no-repeat #eb4964;}
.guide-section .guide-items .guide-item.happy .bt-more {background-color: #b11335; border: 0;}
.guide-section .guide-items .guide-item.happy .bt-more .plus-ico {color: #fa9bab;}

@media screen and (max-width: 1366px) {
	.guide-section {background-position: top 4em right 0; background-size: 19em;}
	.guide-section .guide-items .guide-item.nadri,
	.guide-section .guide-items .guide-item.happy {background-size: 4.8em;}
}
@media screen and (max-width: 1180px) {
	.visual-section {grid-template-columns: 1fr;}
}
@media screen and (max-width: 568px) {
	.vis-slider {border-radius: 2.78em 2.78em 2.78em 4em;}

	.guide-section h2 img {width: 28em;}
	.guide-section p {text-shadow: #fff 1px 0 5px;}
	.guide-section .guide-items {grid-template-columns: 1fr;}
	.guide-section .guide-items .guide-item {padding: 2em; height: auto; margin-top: 2em; border-radius: 1.67em 1.67em 1.67em 4em;}
	.guide-section .guide-items .guide-item .bt-more {top: 2.1em;}
	.guide-section .guide-items .guide-item.happy {margin-top: 0;}
}
@media screen and (max-width: 567px) {
	.guide-section {background-position: top 3.2em right 0; background-size: 12em;}
}

/* section 2 */
.notice-section {position: relative;}
.notice-section:before {content: ''; display: block; width: 35.63vw; height: 653px; background-color: #fff3e4; position: absolute; top: -328px; left: 0; z-index: -1; border-radius: 0 0 290px 0;}
.notice-section .inner {max-width: 1560px; padding: 0 1.11em; margin: 0 auto; padding-top: .72em; position: relative;}

.notice-section .mtit {padding-left: .43em;}
.notice-section .notice-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.11em; margin-top: 1.67em;}
.notice-section .notice-grid li {flex: 1; height: 18em; border-radius: 1.5em; background-color: #fff; border: 1px solid #cecece; font-size: 1.11em; line-height: 1.5em;}
.notice-section .notice-grid li a {display: block; padding: 2.5em 1.4em;}
.notice-section .notice-grid li a .box {padding-bottom: 2.5em;}
.notice-section .notice-grid li a .box h3 {font-weight: 700; font-size: 1.25em; line-height: 1.6em; min-height: 3.2em;}
.notice-section .notice-grid li a .box p {padding-top: 2em;}
.notice-section .notice-grid li a .date {display: block; padding-top: .6em; border-top: 1px solid #e4e4e4;}
.notice-section .bt-more {position: absolute; top: 1.22em; left: 10.56em;}
.notice-section .notice-grid li:hover {box-shadow: 0px 5px 8px 0px rgba(125, 125, 125, 0.16);}
.notice-section .notice-grid li a:hover .box h3 {text-decoration: underline;}

@media screen and (max-width: 1180px) {
	.notice-section {margin-top: 4.67em;}
	.notice-section .notice-grid {grid-template-columns: repeat(3, 1fr);}
	.notice-section .notice-grid li:last-child {display: none;}
}
@media screen and (max-width: 960px) {
	.notice-section:before {height: 600px; top: -280px;}
	.notice-section .notice-grid {grid-template-columns: repeat(2, 1fr);}
	.notice-section .notice-grid li:nth-last-child(-n + 2) {display: none;}
}
@media screen and (max-width: 568px) {
	.notice-section:before {width: 60vw;}
	.notice-section .notice-grid {grid-template-columns: 1fr;}
	.notice-section .notice-grid li {height: auto;}
	.notice-section .notice-grid li a .box h3 {min-height: 100%;}
	.notice-section .notice-grid li a .box p {padding-top: 1em;}
	.notice-section .bt-more {top: 1em; left: 9.56em;}
}

/* section 3 */
.service-grid {position: relative; padding-bottom: 4.67em; margin-top: 4.67em;}
.service-grid:after {content: ''; display: block; width: 56vw; height: 554px; background-color: #fef0f0; position: absolute; bottom: 0; right: 0; z-index: -1; border-radius: 0 0 0 220px; background: url("../../img_new/main/bg_pointer.png") bottom 0 left 32.22em no-repeat #fef0f0;}
.service-grid .inner {max-width: 1560px; padding: 0 1.11em; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.39em 3.44em;}
.service-grid .inner [class$="-card"] {position: relative;}

@media screen and (max-width: 1600px) {
	.service-grid:after {background-position: bottom -1.6em right 2em; background-size: 17.61em;}
}
@media screen and (max-width: 1180px) {
	.service-grid:after {display: none;}
	.service-grid {padding-bottom: 0;}
	.service-grid .inner {grid-template-columns: 1fr; padding: 0;}
}

.service-grid .video-card .video-items {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.11em; margin-top: 1.67em;}
.service-grid .video-card .video-items li {border-radius: 1.67em; background-color: #fff; border: 1px solid #cecece; overflow: hidden; position: relative;}
.service-grid .video-card .video-items li a {display: block; width: 100%; height: 100%;}
.service-grid .video-card .video-items li a img {width: 100%; border-radius: 1.67em;}
.service-grid .video-card .video-items li a h3 {padding: .96em 1.2em 1.2em; font-weight: 700; font-size: 1.39em;}
.service-grid .video-card .video-items li a .play-ico {display: flex; width: 2.44em; height: 2.44em; border-radius: 100%; background: url("../../img_new/icon/play_bnr.png") center no-repeat #fff; border: 1px solid #c5c5c5; position: absolute; bottom: 1.22em; right: 1.11em;}
.service-grid .video-card .video-items li:hover {box-shadow: 0px 5px 8px 0px rgba(125, 125, 125, 0.16);}

@media screen and (max-width: 1180px) {
	.service-grid .video-card {padding: 0 1.11em;}
}
@media screen and (max-width: 568px) {
	.service-grid .video-card .video-items {grid-template-columns: 1fr;}
}

.contact-card {max-width: 35.89em; order: 3;}
.contact-card .phone-list {padding: 0 .56em; margin-top: 1.33em; border-top: 1px solid #d4d4d4; display: grid; grid-template-columns: repeat(2, 1fr);}
.contact-card .phone-list .phone-item {margin-top: 2.78em;}
.contact-card .phone-list .phone-item h3 {font-weight: 700; font-size: 1.89em;}
.contact-card .phone-list .phone-item .phone-number {font-weight: 800; font-size: 2.22em;}
.contact-card .phone-list .phone-item .phone-number a {display: inline-flex; align-items: center; gap: 0 .25em; margin-top: .38em;}
.contact-card .phone-list .phone-item .phone-number .phone-ico {display: block; width: 1.10em; height: 1.10em; background-position: center; background-size: cover;}

.contact-card .phone-list .phone-item.nadri h3 {color: #2d43b3;}
.contact-card .phone-list .phone-item.nadri .phone-number {color: #2a3fa5;}
.contact-card .phone-list .phone-item.nadri .phone-number .phone-ico {background-image: url("../../img_new/icon/call_nadri.png");}
.contact-card .phone-list .phone-item.happymam h3 {color: #e22847;}
.contact-card .phone-list .phone-item.happymam .phone-number {color: #c71745;}
.contact-card .phone-list .phone-item.happymam .phone-number .phone-ico {background-image: url("../../img_new/icon/call_happymam.png");}

@media screen and (max-width: 1180px) {
	.contact-card {max-width: 100%; padding: 0 1.11em;}
}
@media screen and (max-width: 568px) {
	.contact-card .phone-list {grid-template-columns: 1fr;}
	.contact-card .phone-list .phone-item {margin-top: 2.5em;}
	.contact-card .phone-list .phone-item.happymam {margin-top: 1em;}
}

.quick-menu-card {order: 2;}
.quick-menu-card .qm-items {padding: 2.24em 0; display: grid; grid-template-columns: repeat(3, 1fr); font-weight: 700; font-size: 1.39em;}
.quick-menu-card .qm-items li a {display: flex; align-items: center; justify-content: center; gap: 0 .72em;}
.quick-menu-card .qm-items li .quick-ico {height: 2.88em; background-position: center; background-size: cover; background-repeat: no-repeat;}
.quick-menu-card .qm-items li a:hover span {color: #2a3fa5;}
.quick-menu-card .qm-items li:nth-child(1) .quick-ico {width: 4.16em; background-image: url("../../img_new/icon/quick_menu1.png");}
.quick-menu-card .qm-items li:nth-child(2) .quick-ico {width: 2.6em; background-image: url("../../img_new/icon/quick_menu2.png");}
.quick-menu-card .qm-items li:nth-child(3) .quick-ico {width: 2.32em; background-image: url("../../img_new/icon/quick_menu3.png");}

@media screen and (max-width: 1180px) {
	.quick-menu-card {padding: 0 1.11em;}
}
@media screen and (max-width: 568px) {
	.quick-menu-card .qm-items {padding: 1em 0 0; grid-template-columns: 1fr;}
	.quick-menu-card .qm-items li:not(:nth-child(1)) {border-top: 1px solid var(--clr-border)}
	.quick-menu-card .qm-items li a {justify-content: flex-start; padding: .25em 0;}
	.quick-menu-card .qm-items li .quick-ico {width: 3em !important; background-size: contain;}
}

.partner-card {order: 4; margin-top: -9.33em;}
.partner-card p {margin-top: 1.11em;}
.partner-card .box {max-width: 22.67em; margin-top: 2.56em;}
.partner-card .box h3 {font-weight: 700; font-size: 1.67em; color: #c71745;}
.partner-card .box ul {font-weight: 500; font-size: 1.33em; display: grid; row-gap: .42em; margin-top: .83em;}
.partner-card .box ul li {display: flex; gap: 0 .33em; line-height: 1.2;}
.partner-card .box ul li::before {content: ''; flex-shrink: 0; display: block; width: .25em; height: .25em; background-color: #919191; border-radius: 100%; margin-top: .42em;}
.partner-card .box ul li mark {color: #e22847;}
.partner-card .bt-more {position: absolute; top: .56em; left: 8.89em;}

@media screen and (max-width: 1180px) {
	.partner-card {margin-top: 0; padding: 4.39em 1.11em 5.56em; order: 3; background: url("../../img_new/main/bg_pointer.png") bottom -2em right 2em / 17.61em no-repeat #fef0f0;}
	.partner-card .bt-more {top: 4.8em; left: 9.6em;}
}
@media screen and (max-width: 568px) {
	.partner-card {background-position: bottom -3em right 1em; background-size: 16em;}
	.partner-card .bt-more {top: 4.6em; left: 8.6em;}
}
@media screen and (max-width: 567px) {
	.partner-card {background-position: bottom -2em center; background-size: 14em; padding-bottom: 18em;}
}

/* video popup */
.bg_video_overay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0,.5); z-index: 1;}
#video-popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
#video-popup .video {width: 1024px; height: 575px; box-shadow: 5px 5px 24px rgba(0,0,0, 0.34);}
#video-popup .close {position: absolute; top: 0; right: -40px;}

@media screen and (max-width: 1180px) {
	#video-popup .video {width: 768px; height: 431px;}
}
@media screen and (max-width: 960px) {
	#video-popup .video {width: 568px; height: 319px;}
}
@media screen and (max-width: 768px) {
	#video-popup .video {width: 320px; height: 180px;}
	#video-popup .close {top: -40px; right: 0;}
}