/* mainVisual - Please set the slide img size to 12:6 Absolutely! */
#mainVisual {background: #eee; width: 100%; overflow: hidden; max-height: 525px; text-align: center;}
.slidebox img {width: 100%; /*max-width: 1050px;*/ margin: auto;}

.slide_01 {background: #0e4c75;}
.slide_02 {background: url(/img/mainSlide/slide_02_bg.jpg) center;}
.slide_03 {background: url(/img/mainSlide/slide_03_bg.jpg) center;}
.slide_04 {background: url(/img/mainSlide/slide_04_bg.jpg) center;}
.slide_05 {background: url(/img/mainSlide/slide_05_bg.jpg) center;}
.slide_06 {background: #ffc600;}
.slide_07 {background: #100226;}
.slide_08 {background: url(/img/mainSlide/slide_08_bg.jpg) center;}

#mainSlide ul.slick-dots {position: absolute; bottom: 20px; width: 1050px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; justify-content: space-between;}
#mainSlide ul.slick-dots button {color: #fff; background: rgba(0,0,0,0.7); cursor: pointer; font-size: 16px; font-weight: 700; width: 100%; border: 2px solid #fff; height: 32px; border-radius: 32px;}
#mainSlide ul.slick-dots button:hover, #mainSlide ul.slick-dots .slick-active button {background: #fff; border-color: #727272; color: #000;}


/* mainBanner_01 */
#mainBanner_01 {position: relative; margin: 30px auto; overflow: hidden; width: 1090px;}
#mainBanner_01 .flex_wrap {display: flex; justify-content: space-between; align-items: flex-end; height: 130px; padding: 20px; position: relative;}
#mainBanner_01 .prof_img {position: absolute; display: flex; justify-content: space-between; align-items: flex-end; width: 270px; height: 100%; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden;}
#mainBanner_01 .prof_img p {margin: 5px; text-align: center; color: #fff; line-height: 1em; font-size: 14px;}
#mainBanner_01 .dis_flex {width: 100%; padding: 0 10px 0 280px; height: 110px; box-sizing: border-box; justify-content: space-between; border-radius: 20px; box-shadow: 5px 5px 10px #c1c1c1;}
#mainBanner_01 h2, #mainBanner_01 p {margin: 0;}
#mainBanner_01 h2 {font-size: 18px;}
#mainBanner_01 p {font-size: 20px; letter-spacing: -1.5px;}
#mainBanner_01 strong {font-size: 35px; letter-spacing: -3px;}
#mainBanner_01 .call_app {border: 1px solid #000; border-radius: 20px; font-weight: 500; padding: 5px 10px; cursor: pointer;}
#mainBanner_01 .call_app span {display: flex; align-items: center;}
#mainBanner_01 .call_app span::after {content: ""; display: inline-block; border-top: 2px solid; border-right: 2px solid; rotate: 45deg; width: 7px; height: 7px;}

#mainBanner_01 .box_01 .prof_img {background: url(/img/banner/mainBanner_01_01.png) bottom center no-repeat;}
#mainBanner_01 .box_01 .dis_flex {background: linear-gradient(135deg, #f7cb6b, #fba980);}
#mainBanner_01 .box_01 .dis_flex p {color: #ff5516;}
#mainBanner_01 .box_02 .prof_img {background: url(/img/banner/mainBanner_01_02.png) bottom center no-repeat;}
#mainBanner_01 .box_02 .dis_flex {background: linear-gradient(135deg, #72d7cc, #28cfb3);}
#mainBanner_01 .box_02 .dis_flex p {color: #7609fd;}

#mainBanner_01 .slick-dots {position: absolute; top: 40px; right: 30px;}
#mainBanner_01 .slick-dots li {display: inline-block; margin: 0 2px;}
#mainBanner_01 .slick-dots button {width: 10px; height: 10px; padding: 0; font-size: 0; background: none; border: 1px solid #000; border-radius: 50%; transition: background-color 0.5s ease-in-out;}
#mainBanner_01 .slick-dots .slick-active button {background-color: #000;}


/* mainTop */
#mainTop {justify-content: space-between; margin-bottom: 60px; margin-top: 30px;}
#mainTop .box {border-radius: 20px; height: 340px; box-sizing: border-box;}

#mainTop_counsel {background: url(/img/bg/mainTop_counsel_bg.jpg) center no-repeat; background-size: cover; width: 538px;}
#mainTop_counsel .tab_menu {border-bottom: 1px solid #fff; width: calc(100% - 52px); margin: auto; padding: 18px 0; text-align: center;}
#mainTop_counsel .tab_btn {color: #fff; border-bottom: 4px solid transparent; font-size: 18px; font-weight: 500; margin: 0 15px; padding: 15px 0;}
#mainTop_counsel .tab_btn.on, #mainTop_counsel .tab_btn:hover {color: #fdd000; border-color: #fff;}
#mainTop_counsel .tab_con {padding: 30px 50px 20px;}

#mainTop_counsel input[type=text], #mainTop_counsel select, #mainTop_counsel textarea {background: #dcffdc; border: none; font-size: 16px; margin-bottom: 10px; box-sizing: border-box;}
#mainTop_counsel input[type=text], #mainTop_counsel select {vertical-align: middle; padding: 0 10px;}
#mainTop_counsel textarea {padding: 10px; width: 100%; height: 100px;}
#mainTop_counsel input[type=submit] {display: block; background: none; border: 1px solid #fff; border-radius: 5px; width: 170px; height: 36px; margin: 15px auto; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -2px;}

#mainTop_counsel .chk_wrap {font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; cursor: pointer; width: max-content;}
#mainTop_counsel .call_agree {font-size: 14px; font-weight: 500; margin-left: 5px; display: inline-block; vertical-align: top; cursor: pointer;}
#mainTop_counsel input[type=checkbox] {appearance: none; position: relative; width: 18px; height: 18px; cursor: pointer; outline: none!important; border: 1px solid #dcffdc; border-radius: 3px; margin: 1px 5px 0 0;}
#mainTop_counsel input[type=checkbox]::before {content: "\2713"; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1;}
#mainTop_counsel input[type=checkbox]:checked {color: white;}
#mainTop_counsel input[type=checkbox]:checked::before {transform: scale(1) translate(-50%, -50%)}

#mainTop_tab_01_con input[type=text], #mainTop_tab_01_con select {height: 32px;}
#mainTop_tab_01_con .chk_wrap {margin-top: -7px;}
#mainTop_tab_02_con input[type=text], #mainTop_tab_02_con select {height: 40px;}
#mainTop_counsel .input_left input[type=text] {width: 180px; margin-right: 14px;}
#mainTop_counsel .input_right input[type=text] {width: 230px;}
#mainTop_counsel .input_right select {width: 110px;}


#mainTop_call {width: 255px; border: 2px solid #00c8c3; padding: 20px;}
#mainTop_call h2, #mainTop_call h3 {font-size: 18px;}
#mainTop_call h2 {margin: 0; font-weight: 500;}
#mainTop_call h3 {margin: 35px 0; line-height: 1.5em;}
#mainTop_call h3 b {display: block; font-size: 32px; font-weight: 900; color: #005c5a; letter-spacing: -1px;}
#mainTop_call p {margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -2px;}


#mainTop_banner {width: 250px; background: #00c8c3; color: #fff; position: relative;}
#mainTop_banner .slide_box {height: 340px; padding: 25px 25px; box-sizing: border-box; position: relative;}
#mainTop_banner h2 {margin: 0; font-size: 18px; font-weight: normal;}
#mainTop_banner strong {display: block; font-size: 32px; line-height: 1.2em; margin: 40px 0;}
#mainTop_banner span {position: absolute; bottom: 25px; right: 20px; border-bottom: 1px solid #fff; font-size: 12px;}
#mainTop_banner .call_app, #mainTop_banner a {display: block; cursor: pointer; height: 100%;}

#mainTop_banner .box_01 {background: url(/img/banner/mainTop_banner_01.png) right bottom no-repeat;}
#mainTop_banner .box_02 {background: url(/img/banner/mainTop_banner_02.png) right bottom no-repeat;}
#mainTop_banner .slick-dots {position: absolute; top: 5px; right: 15px;}
#mainTop_banner .slick-dots li {display: inline-block; margin: 0 2px;}
#mainTop_banner .slick-dots button {width: 10px; height: 10px; padding: 0; font-size: 0; background: none; border: 1px solid #fff; border-radius: 50%; transition: background-color 0.5s ease-in-out;}
#mainTop_banner .slick-dots .slick-active button {background-color: #fff;}


/* mainReview */
#mainReview {background: #edf0f3; padding: 50px 0;}
#mainReview h2, #mainReview h3 {font-size: 40px; margin: 0;}
#mainReview h2 {font-weight: 900;}
#mainReview h3 {font-weight: 400;}
#mainReview h3::before, #mainReview h3::after {content: ""; display: inline-block; width: 33px; height: 33px; background: url(/img/icon/ico_quot.png) center no-repeat; margin: 0 5px;}
#mainReview h3::after {rotate: 180deg;}
#mainReview .dis_flex {justify-content: space-evenly; align-items: flex-start; margin-top: 50px;}
#mainReview .dis_flex div {box-sizing: border-box;}
#mainReview .box {width: 320px;}
#mainReview .video_box {background: #00817e; height: 210px; margin-bottom: 20px; text-shadow: 1px 2px 3px #333;}
#mainReview .video_box .call_video {display: block; height: 100%; box-sizing: border-box; padding: 15px; cursor: pointer; background: #000; background-size: 100% 100%!important;}
#mainReview .box:nth-child(1) .video_box .call_video {background: url(/img/main/mainReview_01.jpg) center no-repeat;}
#mainReview .box:nth-child(2) .video_box .call_video {background: url(/img/main/mainReview_02.jpg) center no-repeat;}
#mainReview .box:nth-child(3) .video_box .call_video {background: url(/img/main/mainReview_03.jpg) center no-repeat;}
#mainReview .video_box strong {font-size: 24px; font-weight: 700; color: #fff; line-height: 1.4em; letter-spacing: -1px;}
#mainReview .video_box strong span {color: #fdd000;}
#mainReview .video_box p {margin: 0; color: #55dad7; font-weight: 500;}
#mainReview .video_box p::after {content: ""; display: block; width: 50px; height: 50px; background: url(/img/icon/ico_review_video.png) center no-repeat; margin-top: 10px;}
#mainReview .txt_box {height: 310px; background: #fff; font-weight: 700; line-height: 1.2em; padding: 10px 20px;}
#mainReview .txt_box p:first-child {color: #005c5a; font-size: 17px;}


/* main_line */
.main_line {background: #005c5a; padding: 27px 0;}
.main_line h2, .main_line h3 {font-size: 40px; margin: 0; color: #4dfefa;}
.main_line h2 {font-weight: 900;}
.main_line h2::before, .main_line h2::after {content: ""; display: inline-block; width: 33px; height: 33px; background: url(/img/icon/ico_quot.png) center no-repeat; margin: 0 5px; filter: brightness(0) saturate(100%) invert(97%) sepia(87%) saturate(2542%) hue-rotate(140deg) brightness(111%) contrast(102%);}
.main_line h2::after {rotate: 180deg;}
.main_line h3 {font-weight: 400;}


/* mainList */
#mainList {padding: 50px 0 20px;}
#mainList .left_sect {border: 1px solid #ddd; border-radius: 20px; overflow: hidden; width: 250px; height: 340px; box-sizing: border-box; box-shadow: 5px 5px 10px #aaa;}
#mainList .left_sect .box {display: flex!important; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 340px;}
#mainList .left_sect h2 {color: #005c5a; font-size: 28px; font-weight: 900; line-height: 1.2em; margin: 0 0 40px 20px;}
#mainList .left_sect h3 {margin: 35px 0 0 20px; font-size: 18px; font-weight: 500;}
#mainList .left_sect span {font-size: 14px; background: linear-gradient(0deg, #a3bded 0%, #6991c7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 15px 20px; letter-spacing: -1px;}

#mainList .left_sect .slick-dots {position: absolute; top: 0px; right: 10px;}
#mainList .left_sect .slick-dots li {display: inline-block; margin: 0 2px;}
#mainList .left_sect .slick-dots button {width: 10px; height: 10px; padding: 0; font-size: 0; background: none; border: 1px solid #005c5a; border-radius: 50%; transition: background-color 0.5s ease-in-out;}
#mainList .left_sect .slick-dots .slick-active button {background-color: #005c5a;}

#mainList .left_sect .box_01 {background: url(/img/mainSlide/prof_slide_01.png) right bottom no-repeat;}
#mainList .left_sect .box_02 {background: url(/img/mainSlide/prof_slide_02.png) right bottom no-repeat;}
#mainList .left_sect .box_03 {background: url(/img/mainSlide/prof_slide_03.png) right bottom no-repeat;}
#mainList .left_sect .box_04 {background: url(/img/mainSlide/prof_slide_04.png) right bottom no-repeat;}
#mainList .left_sect .box_05 {background: url(/img/mainSlide/prof_slide_05.png) right bottom no-repeat;}
#mainList .left_sect .box_06 {background: url(/img/mainSlide/prof_slide_06.png) right bottom no-repeat;}

#mainList .right_sect {position: relative; margin-left: 40px; width: 760px;}
#mainList .right_sect .call_app {position: absolute; background: #005c5a; color: #48f1ed; font-size: 24px; font-weight: 900; width: 200px; top: 20px; right: 0; text-align: center; z-index: 2; border-radius: 5px; cursor: pointer; padding: 5px 0;}
#mainList .right_sect .call_app::after {content: ""; display: inline-block; vertical-align: middle; border-top: 4px solid; border-right: 4px solid; rotate: 45deg; width: 8px; height: 8px; margin: 0 0 5px 5px;}
#mainList .right_sect .box {position: relative;}
#mainList .right_sect h2, #mainList .right_sect h3 {margin: 0; letter-spacing: -2px;}
#mainList .right_sect h2 {font-size: 38px; font-weight: 900;}
#mainList .right_sect h3 {font-size: 28px; font-weight: 700;}
#mainList .right_sect .list_count {position: absolute; right: 20px; bottom: -10px; font-size: 88px; font-weight: 900; color: #939393; opacity: 0.3;}
#mainList .right_sect .subject_wrap {position: relative; z-index: 1; margin-top: 30px; height: 200px; overflow-y: auto;}
#mainList .right_sect .subject_wrap::-webkit-scrollbar {width: 16px;}
#mainList .right_sect .subject_wrap::-webkit-scrollbar-thumb {background: #005c5a; border-radius: 20px; background-clip: padding-box; border: 5px solid transparent;}
#mainList .right_sect li {display: inline-block; vertical-align: top; margin: 0 5px 10px 0;}
#mainList .right_sect a {display: inline-block; text-align: center; border: 1px solid #005c5a; border-radius: 18px; font-size: 20px; min-width: 177px; max-width: 350px; box-sizing: border-box;}
#mainList .right_sect a:hover {background: #005c5a; color: #fff; box-shadow: 2px 3px 5px #333;}

#mainList .right_sect .slick-dots {position: absolute; top: 80px; right: 0;}
#mainList .right_sect .slick-dots li {display: inline-block; margin: 0 2px;}
#mainList .right_sect .slick-dots button {width: 30px; height: 10px; padding: 0; font-size: 0; background: none; border: 1px solid #005c5a; border-radius: 10px; transition: background-color 0.5s ease-in-out;}
#mainList .right_sect .slick-dots .slick-active button {background-color: #005c5a;}


/* mainBanner_02 */
#mainBanner_02 .box {height: 140px;}

#mainBanner_02 .box .wrap {display: flex; justify-content: space-between; align-items: flex-start; position: relative; height: 100%;}
#mainBanner_02 .left_img {position: absolute; display: flex; justify-content: center; align-items: center; width: 200px; height: 100%;}
#mainBanner_02 .dis_flex {width: 100%; height: 100%; padding: 32.5px 10px 0 210px; box-sizing: border-box; justify-content: space-between;}
#mainBanner_02 h2, #mainBanner_02 p {margin: 0; letter-spacing: -2px;}
#mainBanner_02 p {font-size: 22px; font-weight: 500; margin-bottom: -10px;}
#mainBanner_02 h2 {font-size: 32px; font-weight: 700;}
#mainBanner_02 .right_btn span, #mainBanner_02 .right_btn a {border: 1px solid #fff; border-radius: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; width: 200px; height: 38px; font-weight: 500;}
#mainBanner_02 .ico_gt {display: inline-block; vertical-align: middle; border-top: 1px solid; border-right: 1px solid; rotate: 45deg; width: 8px; height: 8px; margin: 2px 0 0 2px;}

#mainBanner_02 .slick-dots {position: absolute; top: 30px; right: 450px;}
#mainBanner_02 .slick-dots li {display: inline-block; margin: 0 2px;}
#mainBanner_02 .slick-dots button {width: 10px; height: 10px; padding: 0; font-size: 0; background: none; border: 1px solid #000; border-radius: 50%; transition: background-color 0.5s ease-in-out;}
#mainBanner_02 .slick-dots .slick-active button {background-color: #000;}

#mainBanner_02 .box_01 {background: linear-gradient(transparent 25%, #ffde00 26%);}
#mainBanner_02 .box_02 {background: linear-gradient(transparent 25%, #5aecb4 26%);}


/* mainPromo */
#mainPromo {background: #4f6475; color: #fff; padding: 40px 0;}
#mainPromo h1 {margin: 20px 0 40px; font-size: 42px;}
#mainPromo .tab_menu {display: flex; justify-content: center; align-items: flex-end; border-bottom: 1px solid #fff; margin-bottom: 60px;}
#mainPromo .tab_btn {margin: 0 10px; color: #bfbfbf; font-size: 18px; line-height: 1em; padding: 0 1.5em 1em; border-bottom: 4px solid; border-color: transparent;}
#mainPromo .tab_btn:hover, #mainPromo .tab_btn.on {color: #4dfefa; border-color: #4dfefa;}
#mainPromo .tab_con {height: 600px;}
#mainPromo .promo_top {margin-bottom: 40px;}
#mainPromo .promo_top h2 {font-size: 28px; font-weight: 500; margin: 0; line-height: 1.4em;}
#mainPromo .promo_top h2 strong {font-size: 42px; font-weight: 700; display: block; color: #4dfefa;}
#mainPromo .promo_top p {margin: 10px 0; font-size: 14px; color: #afb1b4;}

#mainPromo #mainPromo_tab_05_con .dis_flex {justify-content: center; flex-wrap: wrap;}
#mainPromo #mainPromo_tab_05_con .box {width: 230px; height: 230px; padding: 3px; background-image: linear-gradient(#fff, #fff), linear-gradient(0deg, #a1c4fd 0%, #c2e9fb 100%); background-origin: border-box; background-clip: content-box, border-box; border-radius: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 5px;}
#mainPromo #mainPromo_tab_05_con h3 {font-size: 16px; font-weight: 500; color: #000; letter-spacing: -2px; margin: 10px 0 0; line-height: 24px;}
#mainPromo #mainPromo_tab_05_con h3 strong {display: block; font-size: 22px; font-weight: 700;}
#mainPromo #mainPromo_tab_05_con img {max-width: 80%;}


/* mainBottom */
#mainBottom {padding: 20px 0; display: flex; align-items: flex-start; justify-content: space-between;}
#mainBottom h2 {margin: 0 0 15px; font-size: 24px; font-weight: 700; border-bottom: 1px solid #000; padding: 10px 0;}

#mTboards {width: calc(50% - 30px); margin: 0 15px; position: relative;}

.mTmore {position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; font-size: 0;}
.mTmore::before, .mTmore::after {content: ""; display: block; width: 100%; height: 2px; background: #aaa; position: absolute; top: 50%;}
.mTmore::after {rotate: 90deg;}

.mTbtn {cursor: pointer; font-size: 20px; font-weight: 700; border: 1px solid #6a6a6a; border-radius: 10px; padding: 0 15px; margin-right: 10px;}
.mTbtn:hover, .mTactived {color: #fff; background: #6a6a6a;}

.mTboards_contents {overflow: hidden; margin-top: 20px; display: none;}
.mTboards_contents.on {display: block;}
.mTboards_contents li {font-size: 15px; line-height: 2.2em; font-weight: 500;}
.mTboards_contents a {color: #333; display: inline-block; width: calc(100% - 110px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; margin-right: 10px;}
.mTdate {float: right;}

#mainLinks {width: calc(50% - 30px); margin: 0 15px;}
#mainLinks .dis_flex {flex-wrap: wrap; background: #d7d7d7; justify-content: space-between; align-items: flex-start; padding: 10px;}
#mainLinks .box {width: calc(20% - 10px); margin: 10px 5px 5px; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: -1px;}
#mainLinks .box img {background: #fff; border: 1px solid #aaa; padding: 10px;}
#mainLinks .box p {margin: 0; line-height: 1em;}


/* mainBottom_btns */
#mainBottom_btns {justify-content: space-around; margin-bottom: 20px;}
#mainBottom_btns span, #mainBottom_btns a {display: flex; align-items: center; justify-content: center; background: #8ae0de; border-radius: 10px; width: 310px; height: 60px; font-size: 22px; cursor: pointer;}
#mainBottom_btns span:nth-child(2n) {background: #cff2f2;}
#mainBottom_btns b {margin-right: 0.25em;}