html { scroll-behavior: smooth; } 
.section_top { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-image: url(../img/section_top.png); background-repeat: no-repeat; background-position: center; background-size: cover; } 
.section_top::before { content: ""; opacity: 0.5; background: #030d15; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } 
.section_top .wrap { max-width: 1300px; width: 90%; z-index: 9; } 
.section_top .wrap p:nth-of-type(1) { text-align: center; font-size: 64px; font-weight: bold; color: #fff; } 
.section_top .wrap p:nth-of-type(1) span { font-size: 64px; font-weight: bold; color: #fff; text-emphasis-style: dot; } 
.section_top .wrap p:nth-of-type(2) { text-align: center; font-size: 32px; color: #fff; margin-top: 10px; }
.section_top .wrap p:nth-of-type(3) { position: relative; display: flex; justify-content: center; align-items: center; width: 400px; margin: 40px auto; } 
.section_top .wrap p:nth-of-type(3) input {width: 100%; height: 60px; font-size: 18px; background: transparent; outline: none; border: 0; border-bottom: 1px solid #fff; padding-left: 15px; background-color: #fff; border-radius: 150px; }
.section_top .wrap p:nth-of-type(3) img { cursor: pointer; } 
.section_top .wrap_item { display: flex; justify-content: space-between; margin-top: 100px; } 
.section_top .wrap_item .item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 16.666%; cursor: pointer; } 
.section_top .wrap_item .item img { width: 100px; animation-duration: 1s; } 
.section_top .wrap_item .item:hover img { animation-name: flipTwice; } 

@keyframes flipTwice { 0%,
 100% { transform: scaleX(1); } 
 50% { transform: scaleX(-1); } 
 }

.section_top .wrap_item .item span { font-size: 24px; color: #fff; margin-top: 20px; } 
.section_top .wrap_action { display: flex; justify-content: center; align-items: center; gap: 0 20px; width: 100%; margin-top: 70px; z-index: 9; } 
.section_top .wrap_action img { cursor: pointer; } 

/* seciton1 */
.section01 { padding: 70px 0; } 
.section01 .wrap { max-width: 1470px; width: 90%; margin: 0 auto; } 
.section01 .wrap > h2 { display: flex; align-items: center; width: 45%; font-size: 34px; font-weight: 700; } 
.section01 .wrap > h2:nth-of-type(2) { margin-top: 50px; } 
.section01 .wrap > h2 .square_gray { width: 14px; height: 14px; background-color: #d9d9d9; margin-right: 15px; } 
.section01 .wrap > h2 > span { font-size: 42px; color: #0865af; font-weight: 700; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) { display: flex; align-items: center; width: 100%; border-top-right-radius: 100px; background-color: #fff; border: 1px solid #bababa; } 
.section01 .flexbox01 { margin-top: 40px; } 
.section01 .flexbox02 { border-top-right-radius: 0; border-top: 0; } 
.section01 .flexbox03 { border-bottom-left-radius: 100px; border-top-right-radius: 0; border-top: 0; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) > * { padding: 0 20px; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) h3 { display: flex; align-items: center; font-size: 32px; font-weight: bold; padding: 40px; margin-bottom: auto; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) h3 .square_gray_long { width: 5px; height: 40px; background-color: #d9d9d9; margin-right: 15px; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) h3 span:nth-of-type(2) { font-size: 32px; font-weight: bold; color: #0085b6; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item { flex: 1; height: 180px; position: relative; overflow: hidden; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item .item a{ display: flex; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(34, 34, 34, 0.2); margin-top: 20px; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item .item:hover p { color: var(--primary); } 
.section01
 :is(.flexbox01, .flexbox02, .flexbox03)
 .wrap_item
 .item:nth-of-type(1) a { margin-top: 0; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item .item img { margin-right: 10px; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item .item p { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_circle_arrow { padding: 20px 40px; margin-top: auto; cursor: pointer; transition: transform 0.3s ease; } 

@media screen and (min-width: 1025px){
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_circle_arrow:hover { transform: scale(1.2); } 
 }
 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .imgbox { position: relative; display: flex; justify-content: center; align-items: center; width: 460px; height: 260px; background-repeat: no-repeat; background-position: center; background-size: cover; } 
.section01 .flexbox01 .imgbox { background-image: url(../img/flexbox01.png); border-top-right-radius: 100px; background-size: 100%; transition: background-size 0.5s ease; cursor: pointer; } 

@media screen and (min-width: 1025px){
 .section01 .flexbox01 .imgbox:hover { background-size: 120%; } 
 }

.section01 .flexbox02 .imgbox { background-image: url(../img/flexbox02.png); background-size: 100%; transition: background-size 0.5s ease; cursor: pointer; } 

@media screen and (min-width: 1025px){
 .section01 .flexbox02 .imgbox:hover { background-size: 120%; } 
 }

.section01 .flexbox03 .imgbox { background-image: url(../img/flexbox03.png); border-bottom-left-radius: 100px; border-top-right-radius: 0; background-size: 100%; transition: background-size 0.5s ease; cursor: pointer; } 

@media screen and (min-width: 1025px){
 .section01 .flexbox03 .imgbox:hover { background-size: 120%; } 
 }

.section01 :is(.flexbox01, .flexbox02, .flexbox03) .imgbox:before { content: ""; opacity: 0.5; background: #030d15; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } 
.section01 .flexbox01 .imgbox:before { border-top-right-radius: 100px; } 
.section01 .flexbox03 .imgbox:before { border-top-right-radius: 0; border-bottom-left-radius: 100px; } 
.section01 :is(.flexbox01, .flexbox02, .flexbox03) .imgbox a { font-size: 28px; font-weight: bold; color: #fff; border: 1px solid #fff; border-radius: 80px; padding: 20px 40px; z-index: 9; } 
.section01 .flexbox04 { display: flex; border-radius: 20px; margin-top: 40px; } 
.section01 .flexbox04 .item { display: flex; flex-direction: column; width: 25%; height: 260px; flex-direction: column; justify-content: center; padding: 40px 30px; cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform 0.3s ease; } 

@media screen and (min-width: 1025px){
 .section01 .flexbox04 .item:hover { transform: scale(1.15); } 
 }

.section01 .flexbox04 .item:nth-of-type(1) { background-image: url(../img/flexbox04_item01_bg.png); border-bottom-left-radius: 80px; } 
.section01 .flexbox04 .item:nth-of-type(2) { background-image: url(../img/flexbox04_item02_bg.png); } 
.section01 .flexbox04 .item:nth-of-type(3) { background-image: url(../img/flexbox04_item03_bg.png); } 
.section01 .flexbox04 .item:nth-of-type(4) { background-image: url(../img/flexbox04_item04_bg.png); border-top-right-radius: 80px; } 
.section01 .flexbox04 .item p { text-align: left; font-size: 28px; color: #fff; } 
.section01 .flexbox04 .item span { width: 70px; border: 4px solid #fff; margin-right: auto; margin-top: 10px; } 
.section01 .flexbox04 .item img { margin-top: 40px; margin-left: auto; } 

/* quickmenu */
.quickmenu { position: absolute; top: 40%; right: 20px; display: flex; width: 150px; height: 150px; z-index: 9999999; border-radius: 20px; background: rgba(255, 255, 255, 0.7); box-shadow: 0px 4px 10px 0px rgba(152, 152, 152, 0.25); } 
.quickmenu ul { display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex: 1; } 
.quickmenu ul li { height: 50px; line-height: 50px; } 
.quickmenu ul li a { color: #303030; } 
.quickmenu .wrap_img { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 60px; border-radius: 20px; background: #fff; box-shadow: 0px 4px 10px 0px rgba(152, 152, 152, 0.25); } 
.quickmenu .wrap_img > div { height: 50px; line-height: 50px; } 
.quickmenu .wrap_img > div img { vertical-align: middle; cursor: pointer; } 
.quickmenu ul li.hovered a { color: #0865af; font-weight: bold; } 
.quickmenu .wrap_img > a { width: 30px; height: 50px; background-repeat: no-repeat; background-size: 30px 30px; background-position: center; cursor: pointer; } 
.quickmenu .wrap_img > a:nth-of-type(1) { background-image: url(../img/quickmenu01.png); } 
.quickmenu .wrap_img > a:nth-of-type(2) { background-image: url(../img/quickmenu02.png); } 
.quickmenu .wrap_img > a:nth-of-type(3) { background-image: url(../img/quickmenu03.png); } 
.quickmenu .wrap_img > a:nth-of-type(1).hovered { background-image: url(../img/quickmenu01_h.png); } 
.quickmenu .wrap_img > a:nth-of-type(2).hovered { background-image: url(../img/quickmenu02_h.png); } 
.quickmenu .wrap_img > a:nth-of-type(3).hovered { background-image: url(../img/quickmenu03_h.png); } 

@media screen and (max-width: 1024px){
 .section_top .wrap { width: 90%; height: 85%; } 
 .section_top .wrap p:nth-of-type(1) { font-size: 32px; margin-top: 150px; } 
 .section_top .wrap p:nth-of-type(1) span { font-size: 32px; } 
 .section_top .wrap p:nth-of-type(2) { font-size: 18px; } 
 .section_top .wrap_item { flex-wrap: wrap; gap: 10px 0; margin-top: 50px; } 
 .section_top .wrap_item .item { width: 33.33%; } 
 .section_top .wrap_item .item img { width: 60px; } 
 .section_top .wrap_item .item span { font-size: 13px; margin-top: 5px; } 
 .section_top .wrap_action { margin-top: 20px; } 
 .section_top .wrap_action img { width: 25px; } 
 .section01 { padding: 35px 0; } 
 .section01 .wrap { width: 95%; } 
 .section01 .wrap > h2 { width: 100%; font-size: 20px; } 
 .section01 .wrap > h2 span { font-size: 20px; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) { flex-direction: column; align-items: flex-start; } 
 .section01 :is(.flexbox01, .flexbox02) { border-bottom: 0; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) h3 { font-size: 20px; padding: 30px 20px 10px; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) h3 span:nth-of-type(2) { font-size: 20px; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item{ flex: none; width: 100%; padding: 30px 20px; margin-top: 0; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_item .item p { font-size: 14px; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .wrap_circle_arrow { width: 100%; text-align: right; padding: 30px 20px; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .imgbox { width: 100%; height: 180px; border-radius: 0; padding: 0; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .imgbox:before { border-radius: 0; } 
 .section01 :is(.flexbox01, .flexbox02, .flexbox03) .imgbox a { font-size: 14px; padding: 10px 25px; } 
 .section01 .flexbox02 { padding-bottom: 0; } 
 .section01 .flexbox03 { padding-top: 0; } 
 .section01 .flexbox03 .imgbox { margin-top: 0; } 
 .section01 .flexbox03 h3 { margin-top: 40px; } 
 .section01 .flexbox04 { flex-direction: column; } 
 .section01 .flexbox04 .item { width: 100%; height: 220px; padding: 0 30px; border-radius: 0 !important; } 
 .section01 .flexbox04 .item p { font-size: 22px; } 
 .section01 .flexbox04 .item img { width: 78px; margin-top: 0; } 
 .section01 .flexbox04 .item:nth-of-type(1) { border-top-left-radius: 80px !important; } 
 .section01 .flexbox04 .item:nth-of-type(4) { border-bottom-right-radius: 80px !important; } 
 }