@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');



* {padding: 0; margin: 0; border: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}
img {vertical-align: top; max-width: 100%; filter: none;}
button {background-color: inherit; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; color: #000;}
html, body {font-family: 'Noto Sans KR', sans-serif; color: #000; overflow-x: hidden; max-width: 480px; width: 100%; margin: 0 auto; letter-spacing: -1px;}
input, select, textarea {font-family: 'Noto Sans KR', sans-serif; color: #000;}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 2px;}




/* top_contents */
.top_contents {position: relative; width: 100%; height: 430px;}
.top_contents .logo {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11;}
.top_contents .logo img {width: 55%; max-height: 50px; object-fit: contain;}
.top_contents .back_bg {width: 100%; height: 100%;}
.top_contents .back_bg .back_img {width: 100%; height: 100%;}
.top_contents .back_bg .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.25;}

.swiper_inner {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%;}
.swiper_inner .top_slide {position: relative; width: 100%;}
.swiper_inner .top_slide .swiper-slide {width: 100%; display: flex; justify-content: center; align-items: flex-end;}
.swiper_inner .top_slide .swiper-slide img {height: 330px;}

.swiper_inner .top_slide .swiper-pagination {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.swiper_inner .top_slide .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid #000; background-color: transparent; margin: 0 2px; opacity: 1;}
.swiper_inner .top_slide .swiper-pagination-bullet:last-child {margin-right: 0px;}
.swiper_inner .top_slide .swiper-pagination-bullet-active {background-color: #000; width: 6px; height: 6px;}

.right_fix {position: absolute; bottom: 20px; right: 16px; display: flex; flex-direction: column; gap: 14px; z-index: 20;}
.right_fix a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.right_fix a img {width: 25px;}
.right_fix a p {font-size: 10px; color: #fff;}





/* middle_copy */
.middle_copy {width: 100%; padding: 60px 16px;}
.middle_copy h2 {text-align: center; font-size: 24px; line-height: 24px; font-weight: 900;}
.middle_copy p {text-align: center; font-size: 18px; line-height: 21px;}
.middle_copy p i {font-style: normal; display: block; text-align: center; font-weight: 900;}
.middle_copy p i:last-child {margin-top: 15px;}





/* information */
.information {width: 100%; padding: 60px 0;}
.information > h2 {font-size: 20px; line-height: 20px; text-align: center; margin-bottom: 25px;}
.information .contents {display: flex; max-width: 300px; width: 100%; margin: 10px auto 0;}
.information .contents:first-child {margin: 0 auto;}
.information .contents h2 {font-size: 12px; line-height: 16px; width: 80px;}
.information .contents > a {font-size: 12px; line-height: 16px; word-break: break-all; width: calc(100% - 80px);}
.information .contents div {display: flex; gap: 10px; width: calc(100% - 80px);}
.information .contents div a {position: relative; font-size: 12px; line-height: 16px; word-break: break-all; width: 100%;}
.information .contents div a::before {content: '/'; position: absolute; top: 1px; left: -7px; font-size: 12px; line-height: 16px;}
.information .contents div a:first-child::before {display: none;}
.information .contents p {font-size: 12px; line-height: 16px; word-break: keep-all; width: calc(100% - 80px);}
.information .contents div {display: flex; gap: 10px;}
.information .contents div p {position: relative;}
.information .contents div p::before {content: '/'; position: absolute; top: 1px; left: -7px; font-size: 12px; line-height: 16px;}
.information .contents div p:first-child::before {display: none;}





/* reference */
.reference {position: relative; width: 100%; padding: 60px 0;}
.reference h2 {font-size: 20px; line-height: 20px; text-align: center; margin-bottom: 25px;}
.refer_slide {width: 240px; margin: 0 auto;}
.refer_slide .swiper-slide {position: relative; width: 100%;}
.refer_slide .swiper-slide img {width: 100%; height: 430px; object-fit: cover;}
.refer_slide .swiper-slide a {display: block; width: 80px; height: 30px; text-align: center; line-height: 28px; font-size: 12px; font-weight: 500; margin: 0 auto;}

.reference .prev_btn,
.reference .next_btn {position: absolute; top: 53%; transform: translateY(-50%); width: 20px;}
.reference .prev_btn {left: 0px; width: 0px; height: 0px; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 25px solid transparent;}
.reference .next_btn {right: 0px; width: 0px; height: 0px; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-right: 25px solid transparent;}





/* gallery */
.gallery {width: 100%; padding: 60px 0 110px;}
.gallery h2 {font-size: 20px; line-height: 20px; text-align: center; margin-bottom: 25px;}
.gallery .contents {max-width: 343px; width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 11px;}
.gallery .contents img {width: 107px; height: 107px; object-fit: cover; cursor: pointer;}
.gal_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4; z-index: 101; display: none;}
.gal_pop {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 343px; height: 343px; border-radius: 20px; background-color: #fff; z-index: 102; display: none;}
.gal_pop img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; object-fit: cover;}
.gal_pop .close {position: absolute; top: -50px; right: 0; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; cursor: pointer;}
.gal_pop .close span:first-child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 25px; height: 3px; border-radius: 3px; background-color: #000;}
.gal_pop .close span:last-child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 25px; height: 3px; border-radius: 3px; background-color: #000;}
.gallery img{aspect-ratio: 1/1;}





/* footer */
footer {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 480px; width: 100%; box-shadow: 0px -5px 10px rgba(0,0,0,0.2); z-index: 100; padding: 10px 0;}
footer .inner {width: 100%; height: 30px; display: flex; justify-content: center; align-items: center; gap: 20px;}
footer .inner a {display: flex; justify-content: center; align-items: center; width: 30px;}
footer > a {display: block; font-size: 10px; line-height: 12px; text-align: center; margin-top: 5px;}
footer .visitor {display: flex; justify-content: center; align-items: center; font-size: 10px; line-height: 12px; gap: 10px; margin-top: 5px;}

.footer {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 480px; width: 100%; box-shadow: 0px -5px 10px rgba(0,0,0,0.2); z-index: 50; padding: 10px 0; z-index: 100;}
.footer .inner {width: 100%; height: 30px; display: flex; justify-content: center; align-items: center; gap: 20px;}
.footer .inner a {display: flex; justify-content: center; align-items: center; width: 30px;}
.footer > a {display: block; font-size: 10px; line-height: 12px; text-align: center; margin-top: 5px;}
.footer .visitor {display: flex; justify-content: center; align-items: center; font-size: 10px; line-height: 12px; gap: 10px; margin-top: 5px;}





/**************************************************************************/

/* example01 */

.example01_top_contents {height: 450px;}

.swiper_inner .top_slide_01 {position: relative; width: 100%; position: absolute; bottom: 0; height: 375px;}
.swiper_inner .top_slide_01 .swiper-slide {width: 100%;}
.swiper_inner .top_slide_01 .swiper-slide div {max-width: 210px; width: 100%; margin: 0 auto; position: relative; height: 375px;}
.swiper_inner .top_slide_01 .swiper-slide div p {font-size: 16px; line-height: 19px; position: absolute; top: 20px; left: 0; word-break: keep-all;}
.swiper_inner .top_slide_01 .swiper-slide div img {display: block; height: 280px; position: absolute; right: -40px; bottom: 0;}

.swiper_inner .top_slide_01 .swiper-pagination {position: absolute; top: 0px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.swiper_inner .top_slide_01 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid #000; background-color: transparent; margin: 0 2px; opacity: 1;}
.swiper_inner .top_slide_01 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.swiper_inner .top_slide_01 .swiper-pagination-bullet-active {background-color: #000; width: 6px; height: 6px;}


.left_fix {position: absolute; bottom: 20px; left: 16px; display: flex; flex-direction: column; gap: 14px;}
.left_fix a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.left_fix a img {width: 25px;}
.left_fix a p {font-size: 10px; color: #fff;}

.left_fix01 {position: absolute; bottom: auto; top: 50%; transform: translateY(-50%); left: 16px; display: flex; flex-direction: column; gap: 14px; z-index: 15;}
.left_fix01 a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.left_fix01 a img {width: 25px;}
.left_fix01 a p {font-size: 10px; color: #fff;}


.refer_slide_01 {width: 240px; margin: 0 auto;}
.refer_slide_01 .swiper-slide {position: relative; width: 100%;}
.refer_slide_01 .swiper-slide > img {width: 100%; height: 430px; object-fit: cover;}
.refer_slide_01 .swiper-slide p {font-size: 12px; text-align: center; margin: 10px auto;}
.refer_slide_01 .swiper-slide a {display: flex; justify-content: center; align-items: center; gap: 10px; width: 130px; height: 40px; border-radius: 40px; margin: 0 auto;}
.refer_slide_01 .swiper-slide a img {height: 20px;}
.refer_slide_01 .swiper-slide a span {font-size: 10px; position: relative; top: -1px;}
.reference01 .prev_btn,
.reference01 .next_btn {position: absolute; top: 48%; transform: translateY(-50%); width: 20px;}

.reference01 > .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;;}

.information01 {width: 100%; padding: 60px 0;}
.information01 > h2 {font-size: 20px; line-height: 20px; margin-bottom: 25px; padding: 0 16px;}
.information01 .contents {display: flex; max-width: 300px; width: 100%; margin: 10px auto 0;}
.information01 .contents01 {max-width: 100%; padding: 0 16px;}
.information01 .contents:first-child {margin: 0 auto;}
.information01 .contents h2 {font-size: 12px; line-height: 16px; width: 80px;}
.information01 .contents a {font-size: 12px; line-height: 16px; word-break: keep-all;}
.information01 .contents div {display: flex; gap: 10px;}
.information01 .contents div a {position: relative;}
.information01 .contents div a::before {content: '/'; position: absolute; top: 1px; left: -7px; font-size: 12px; line-height: 16px;}
.information01 .contents div a:first-child::before {display: none;}
.information01 .contents p {font-size: 12px; line-height: 16px; word-break: keep-all; width: calc(100% - 80px);}
.information01 .contents div {display: flex; gap: 10px;}
.information01 .contents div p {position: relative;}
.information01 .contents div p::before {content: '/'; position: absolute; top: 1px; left: -7px; font-size: 12px; line-height: 16px;}
.information01 .contents div p:first-child::before {display: none;}


.gallery01 {padding: 0 0 80px;}
.gallery01 .contents {max-width: 100%; gap: 0px;}
.gallery01 .contents img {width: 33.33%; height: auto;}





/**************************************************************************/

/* example02 */

.header {width: 100%; height: 70px; position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px; z-index: 30;}
.header .logo {position: relative; top: 0; left: 0; transform: translateX(0); width: 150px; height: 50px; display: flex; justify-content: flex-start; align-items: center; z-index: 11;}
.header .logo img {width: 55%; max-height: 50px; object-fit: contain;}
.header p {font-size: 12px; line-height: 14px; text-align: right;}

.body_slide {width: 100%; height: 100vh;}
.body_slide .section_in {width: 100%; height: 100vh;}
.body_slide .body12 {width: 100%; height: 100vh;}

.top_contents02 {height: 100%;}
.top_contents02 .header {width: 100%; height: 70px; position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px; z-index: 30;}
.top_contents02 .logo {position: relative; top: 0; left: 0; transform: translateX(0); width: 150px; height: 50px; display: flex; justify-content: flex-start; align-items: center; z-index: 11;}
.top_contents02 .logo img {width: 55%; max-height: 50px; object-fit: contain;}
.top_contents02 .header p {font-size: 12px; line-height: 14px; text-align: right;}

.swiper_inner .top_slide_02 .swiper-pagination {position: absolute; bottom: 10px; left: auto; right: 30px; transform: translateX(0); z-index: 15; display: flex; align-items: center;}
.swiper_inner .top_slide_02 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid #000; background-color: transparent; margin: 0 2px; opacity: 1;}
.swiper_inner .top_slide_02 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.swiper_inner .top_slide_02 .swiper-pagination-bullet-active {background-color: #000; width: 6px; height: 6px;}

.right_fix02 {position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 20;}
.right_fix02 a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.right_fix02 a img {width: 25px;}
.right_fix02 a p {font-size: 10px; color: #fff;}

.swiper_inner .top_slide_02 .swiper-slide img {height: auto; max-width: 300px; width: 100%;}


.info_box {position: relative; width: 100%; height: 100%;}
.info_box .info_contents {position: absolute; top: 50%; left: 16px; transform: translateY(-50%); max-width: 270px; width: 100%;}
.info_box .info_contents .contents {position: relative; display: flex; align-items: flex-start; width: 100%; border-radius: 10px; border: 1px solid; padding: 30px 10px 15px; margin-bottom: 10px;}
.info_box .info_contents .contents:last-child {margin-bottom: 0;}
.info_box .info_contents .contents h2 {font-size: 10px; width: 53px; position: relative;top: 1px;}
.info_box .info_contents .contents p {font-size: 12px; width: calc(100% - 53px); word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.info_box .info_contents .contents h3 {font-size: 12px; width: calc(100% - 53px);}
.info_box .info_contents .contents a {position: absolute; top: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; width: 70px; height: 20px; border-radius: 10px; padding: 0 10px;}
.info_box .info_contents .contents a img {width: 13px;}
.info_box .info_contents .contents a span {font-size: 10px; position: relative; top: -1px;}
.info_box .info_contents .contents button {position: absolute; top: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; width: 70px; height: 20px; border-radius: 10px; padding: 0 10px;}
.info_box .info_contents .contents button img {width: 13px;}
.info_box .info_contents .contents button span {font-size: 10px; position: relative; top: -1px;}


.live_inner {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.live_inner .reference01 {padding: 0;}


.career_inner {position: relative; width: 100%; height: 100%;}
.career_inner .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4;}
.career_inner .information01 {padding: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}


.img_inner {position: relative; width: 100%; height: 100%;}
.img_inner .gallery {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0; max-width: 225px;}


.section_in footer {position: absolute;}





/**************************************************************************/

/* example03 */

.right_fix03 {position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 20;}
.right_fix03 a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.right_fix03 a img {width: 25px;}
.right_fix03 a p {font-size: 10px; color: #666;}

header {position: relative; margin: 0 auto; width: 100%; height: 70px; border-radius: 0 0 0 70px;}
header .logo {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11;}
header .logo img {width: 55%; max-height: 50px; object-fit: contain;}


.main_banner {width: 100%; height: 370px; margin-top: 20px; position: relative; display: flex; justify-content: center;}
.main_banner .mirror_slide {width: 220px; height: 370px; border-radius: 250px;}
.main_banner .mirror_slide .swiper-slide {width: 100%; height: 370px; display: flex; justify-content: center; align-items: center;}
.main_banner .mirror_slide .swiper-slide .bg {width: 220px; height: 370px; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: flex-end;}
.main_banner .mirror_slide .swiper-slide .bg img {height: 90%; object-fit: cover;}
.main_banner .mirror_slide .swiper-pagination {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner .mirror_slide .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid #000; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner .mirror_slide .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner .mirror_slide .swiper-pagination-bullet-active {background-color: #000; width: 6px; height: 6px;}


.h2_txt {width: 320px; border-radius: 0 200px 200px 0; display: flex; justify-content: center; flex-direction: column; padding: 40px 50px 40px 30px; margin-top: 40px;}
.h2_txt {font-size: 16px; line-height: 20px;}
.h2_txt i {font-style: normal; font-size: 30px; font-weight: 900;}
.h2_txt i:last-child {position: relative; top: 10px; margin-left: auto;}





/**************************************************************************/

/* example04 */

.example04_header {position: relative; width: 100%; height: 70px; background-color: #9d005d;}
.example04_header .logo {position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11;}
.example04_header .logo img {width: 55%; max-height: 50px; object-fit: contain;}


.example04_main_banner {position: relative; width: 100%; height: 380px; background-color: #9d005d; display: flex; justify-content: right; padding-top: 40px;}
.example04_main_banner .main_banner04 {width: 77%; height: 280px; border-radius: 220px 0 0 220px; overflow: hidden;}
.example04_main_banner .main_banner04 .main_banner04_bg {width: 100%; height: 280px; border-radius: 220px 0 0 220px; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; position: absolute;}
.example04_main_banner .main_banner04 .swiper-slide {width: 100%; display: flex; justify-content: right;}
.example04_main_banner .main_banner04 .swiper-slide .bg {width: 100%; height: 280px; border-radius: 220px 0 0 220px; position: relative; overflow: hidden;}
.example04_main_banner .main_banner04 .swiper-slide .bg img {height: 95%; position: absolute; bottom: 0; right: 30px;}
.example04_main_banner .swiper-pagination {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.example04_main_banner .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.example04_main_banner .swiper-pagination-bullet:last-child {margin-right: 0px;}
.example04_main_banner .swiper-pagination-bullet-active {width: 6px; height: 6px;}
.example04_main_banner .left_fix {bottom: auto;}


.h2_txt01 {width: 100%; border-radius: 0 0 180px 0; display: flex; justify-content: center; flex-direction: column; padding: 35px 130px 35px 30px;}
.h2_txt01 {font-size: 18px; line-height: 22px;}
.h2_txt01 i {font-style: normal; font-size: 30px; font-weight: 900;}
.h2_txt01 i:last-child {position: relative; top: 10px; margin-left: auto;}
.h2_txt01 p {word-break: keep-all;}


.refer_back01 {border-radius: 0px 180px 0 0;}





/**************************************************************************/

/* example05 */

.top_contents05 {width: 100%; border-radius: 360px 360px 0 0; margin-top: 40px; overflow: hidden;}
.top_contents05 .logo {width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11; margin: 20px auto 0;}
.top_contents05 .logo img {width: 55%; max-height: 50px; object-fit: contain;}

.main_banner05 {margin-top: 30px;}
.main_banner05 .swiper-slide {width: 100%; display: flex; justify-content: center; align-items: flex-end;}
.main_banner05 .swiper-slide img {width: 80%;}
.main_banner05 .swiper-pagination {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner05 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner05 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner05 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.bottom_contents05 {width: 100%; border-radius: 0 0 360px 360px; margin-bottom: 25px; overflow: hidden; padding: 60px 60px 80px;}
.bottom_contents05 .info_me .contents {display: block; margin-bottom: 10px;}
.bottom_contents05 .info_me .contents h2 {font-size: 12px;}
.bottom_contents05 .info_me .contents p {font-size: 12px;}
.bottom_contents05 .bottom_p {margin-top: 50px; text-align: center;}
.bottom_contents05 .bottom_p p {font-size: 18px; line-height: 21px; word-break: keep-all; padding: 0 16px;}


.below_contents05 {width: 100%; border-radius: 360px 360px 0 0; overflow: hidden;}
.below_contents05 .career05 {padding: 80px 60px 0;}
.below_contents05 .career05 > h2 {font-size: 20px; line-height: 20px; text-align: center; margin-bottom: 25px;}
.below_contents05 .career05 .contents {display: flex; align-items: center; margin-bottom: 5px;}
.below_contents05 .career05 .contents:last-child {margin-bottom: 0;}
.below_contents05 .career05 .contents h2 {font-size: 12px; width: 40px;}
.below_contents05 .career05 .contents p {font-size: 12px; width: calc(100% - 40px); word-break: keep-all;}


.below_contents05 .reference > h2 {font-size: 20px; line-height: 20px;}





/**************************************************************************/

/* example06 */

.top_contents06 {position: relative; width: 100%; height: 420px; padding-top: 20px;}
.top_contents06 > .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;}
.top_contents06 .logo {width: 150px; height: 50px; display: flex; justify-content: right; align-items: center; z-index: 11; margin-left: auto; padding-right: 16px;}
.top_contents06 .logo img {width: 55%; max-height: 50px; object-fit: contain;}

.main_banner06 {width: 100%; height: 350px;}
.main_banner06 .swiper-slide {width: 100%; display: flex; align-items: flex-end; padding-left: 40px;}
.main_banner06 .swiper-slide img {width: 200px;}

.main_banner06 .swiper-pagination {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner06 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner06 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner06 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.sq {padding: 40px 10px; margin: 0 auto 30px; display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}
.sq30 {padding: 30px 10px;}
.sq20 {padding: 20px 10px;}
.sq p {font-size: 12px; line-height: 14px; word-break: keep-all;}





/**************************************************************************/

/* example06 */

.top_contents07 {position: relative; width: 100%; height: 375px;}
.top_contents07 > .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;}

.main_banner07 {position: relative; width: 100%; height: 100%;}
.main_banner07 .swiper-slide {width: 100%; height: 100%; display: flex; align-items: flex-end;}
.main_banner07 .swiper-slide img {width: 216px; padding-left: 10px;}

.main_banner07 .swiper-pagination {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner07 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner07 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner07 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.main_txt07 {padding: 40px 50px 100px;}
.main_txt07 .logo {width: 150px; height: 50px; display: flex; justify-content: left; align-items: center; z-index: 11; margin-bottom: 40px;}
.main_txt07 .logo img {width: 55%; max-height: 50px; object-fit: contain;}
.main_txt07 p {font-size: 18px; line-height: 22px;}


.flex_info {display: flex; flex-direction: row; flex-wrap: wrap;}
.flex_info a {position: relative; display: flex; flex-direction: column; justify-content: center; width: 33.33%; height: 125px; padding: 0 10px;}
.flex_info a:nth-child(2) {width: 66.66%;}
.flex_info a .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.1;}
.flex_info a:nth-child(2) .bg {opacity: 0.5;}
.flex_info a:nth-child(3) .bg {opacity: 0.2;}
.flex_info a:nth-child(4) .bg {opacity: 0.4;}
.flex_info a h2 {font-size: 10px; position: relative;}
.flex_info a p {font-size: 12px; word-break: keep-all; position: relative;}


.information01 .inner > h2 {max-width: 300px; width: 100%; margin: 0 auto; font-size: 12px; margin-bottom: 20px;}





/**************************************************************************/

/* example08 */

.top_contents08 {position: relative; width: 100%; height: 375px;}
.top_contents08 .logo {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11;}
.top_contents08 .logo img {width: 55%; max-height: 50px; object-fit: contain;}
.top_contents08 > p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 16px; line-height: 21px; text-align: center; word-break: keep-all; padding: 0 70px;}


.main_banner08 {position: relative; width: 100%; height: 375px;}
.main_banner08 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;}
.main_banner08 .swiper-slide {width: 100%; height: 100%; display: flex; align-items: flex-end;}
.main_banner08 .swiper-slide img {width: 60%; padding-left: 10px; max-width: 220px;}
.main_banner08.center .swiper-slide {width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center;}
.main_banner08.center .swiper-slide img {width: 170px; padding: 0;}

.main_banner08 .swiper-pagination {position: absolute; bottom: 10px; right: 16px; z-index: 15; display: flex; align-items: center;}
.main_banner08 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner08 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner08 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.info_btn {padding: 60px 0;}
.info_btn .inner {max-width: 300px; width: 100%; margin: 0 auto;}
.info_btn .inner .contents {display: flex; align-items: flex-start; margin-bottom: 30px;}
.info_btn .inner .contents:last-child {margin-bottom: 0;}
.info_btn .inner .contents h2 {font-size: 12px; width: 65px;}
.info_btn .inner .contents p {font-size: 12px; width: calc(100% - 125px); word-break: break-all;}
.info_btn .inner .contents a {display: flex; justify-content: center; align-items: center; width: 60px; height: 15px; font-size: 10px; gap: 3px; border-radius: 15px; position: relative; top: 2px;}
.info_btn .inner .contents a img {width: 8px;}
.info_btn .inner .contents a span {position: relative; top: -1px;}
.info_btn .inner .contents button {display: flex; justify-content: center; align-items: center; width: 60px; height: 15px; font-size: 10px; gap: 3px; border-radius: 15px; position: relative; top: 2px;}
.info_btn .inner .contents button img {width: 8px;}
.info_btn .inner .contents button span {position: relative; top: -1px;}


.reference .sub_title08 {text-align: left; max-width: 300px; width: 100%; margin: 0 auto 20px; font-size: 12px; line-height: normal; position: relative;}
.gallery .sub_title08 {text-align: left; max-width: 300px; width: 100%; margin: 0 auto 20px; font-size: 12px; line-height: normal; position: relative;}

.gallery02 .contents {max-width: 300px; gap: 9px;}
.gallery02 .contents img {width: 94px; height: 94px;}




.txt08 {width: 100%; padding: 40px 16px; display: flex; justify-content: center; align-items: center;}
.txt08 p {font-size: 18px; line-height: 21px; text-align: center; word-break: keep-all;}


.info_btn {position: relative;}
.info_btn .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;}
.info_btn .inner .contents {position: relative;}





/**************************************************************************/

/* example10 */
.blank_contents {width: 100%; height: 20px;}

.txt10 {position: relative; width: 100%; padding: 30px 0 20px;}
.txt10 p {max-width: 300px; width: 100%; margin: 0 auto; font-size: 16px; line-height: 20px;}
.txt10 .triangle01 {position: absolute; bottom: -34px; left: 0; z-index: 11; width: 0; height: 0;  border-left-style: solid; border-bottom: 35px solid transparent;}

.top_contents10 {position: relative; height: 420px;}
.main_banner10 {height: 420px;}
.main_banner10 .swiper-slide {width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}
.main_banner10 .swiper-slide img {width: 60%; max-width: 230px; min-width: 200px;}

.main_banner10 .swiper-pagination {position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner10 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner10 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner10 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.information10 {position: relative; padding: 10px 0 45px; z-index: 15;}
.information10 .triangle02 {position: absolute; top: -34px; left: 0; z-index: 11; width: 0; height: 0;  border-right-style: solid; border-top: 35px solid transparent; z-index: 15;}
.information10 .triangle03 {position: absolute; bottom: -34px; left: 0; z-index: 11; width: 0; height: 0;  border-left-style: solid; border-bottom: 35px solid transparent; z-index: 15;}
.information10 .lo_inner {max-width: 300px; width: 100%; margin: 0 auto 25px;}
.information10 .logo {width: 150px; height: 50px; display: flex; justify-content: right; align-items: center; z-index: 11; margin-left: auto;}
.information10 .logo img {width: 55%; max-height: 50px; object-fit: contain;}


.reference10 {position: relative; padding: 45px 16px 60px;}
.refer_slide_10 {width: 200px; margin-left: 40px;}
.refer_slide_10 .swiper-slide {width: 100%;}
.refer_slide_10 .swiper-slide > img {width: 100%; height: 357px; object-fit: cover;}
.refer_slide_10 .swiper-slide p {font-size: 10px; text-align: center; margin: 10px auto;}
.refer_slide_10 .swiper-slide a {display: flex; justify-content: center; align-items: center; width: 75px; height: 24px; border-radius: 50px; margin: 0 auto;}
.refer_slide_10 .swiper-slide a img {width: 8px; position: relative; left: 9px;}
.refer_slide_10 .swiper-slide a span {font-size: 10px; transform: scale(0.6); position: relative; top: -0.5px; left: 2px;}

.reference10 .prev_btn,
.reference10 .next_btn {position: absolute; top: 47%; transform: translateY(-50%); width: 20px;}
.reference10 .prev_btn {left: 0px; width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 15px solid transparent;}
.reference10 .next_btn {right: auto; left: 280px; width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-right: 15px solid transparent;}


.information10 {position: relative;}
.information10 > .inner > h2 {text-align: right; margin-bottom: 40px;}

.information10 .triangle04 {position: absolute; top: -34px; left: 0; z-index: 11; width: 0; height: 0;  border-right-style: solid; border-top: 35px solid transparent;}
.information10 .triangle05 {position: absolute; bottom: -34px; left: 0; z-index: 11; width: 0; height: 0;  border-left-style: solid; border-bottom: 35px solid transparent;}

.gallery10 {padding: 50px 0 80px 0;}
.gallery10 .sub_title08 {text-align: right; margin-bottom: 40px;}





/**************************************************************************/

/* example11 */
.header11 {width: 100%; height: 70px; display: flex; align-items: center; padding-left: 40px;}
.header11 .logo {width: 150px; height: 50px; display: flex; justify-content: left; align-items: center; z-index: 11;}
.header11 .logo img {width: 55%; max-height: 50px; object-fit: contain;}


.top_contents11 {position: relative;}
.main_banner11 {width: 100%; height: 375px; position: relative;}
.main_banner11 .swiper-slide {width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}
.main_banner11 .swiper-slide img {width: 55%; min-width: 200px; max-width: 210px;}

.main_banner11 .swiper-pagination {position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner11 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner11 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner11 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.middle_contents {width: 100%; padding: 30px 0 80px;}
.middle_contents .txt11 {padding-left: 40px; font-size: 18px; line-height: 22px; margin-bottom: 30px;}
.middle_contents .txt_box {padding: 30px 15px 30px 40px; width: 320px;}
.middle_contents .txt_box .contents {display: flex; margin: 0 auto 10px;}
.middle_contents .txt_box .contents:last-child {margin: 0 auto;}
.middle_contents .txt_box .contents h2 {font-size: 12px; line-height: 16px; width: 80px;}
.middle_contents .txt_box .contents a {display: block; font-size: 12px; line-height: 16px; word-break: break-all; width: calc(100% - 80px);}





/**************************************************************************/

/* example12 */
.top_contents12 {position: relative; width: 100%; height: 100%;}
.top_contents12 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.45;}
.top_contents12 .logo {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11;}
.top_contents12 .logo img {width: 55%; max-height: 50px; object-fit: contain;}


.live_contents {height: 100%; display: flex; justify-content: center; align-items: center; position: relative;}
.main_banner12 {width: 100%; height: 100%; position: relative;}
.main_banner12 .swiper-slide {width: 100%; height: 100%; display: flex; align-items: flex-end;}
.main_banner12 .swiper-slide img {width: 75%; min-width: 220px; max-width: 320px;}

.main_banner12 .swiper-pagination {position: absolute; bottom: 15px; right: 16px; z-index: 15; display: flex; align-items: center;}
.main_banner12 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner12 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner12 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.txt12 {max-width: 300px; width: 100%; margin: 0 auto 60px; font-size: 16px; line-height: 22px; position: relative;}
.slide_title {font-size: 14px; margin-bottom: 20px;}
.contact_contents {width: 100%; height: 100%; padding: 30px;}
.contact_contents .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.35;}
.contact_contents .contact_middle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 300px; width: 100%;}
.contact_contents .contents {max-width: 300px; width: 100%; height: 40px; margin: 0 auto 10px; display: flex; justify-content: space-between; align-items: center; border-radius: 50px; padding: 0 20px;}
.contact_contents .contents:last-child {margin: 0 auto;}
.contact_contents .contents h2 {font-size: 12px; width: 65px;}
.contact_contents .contents p {font-size: 12px; width: calc(100% - 110px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.contact_contents .contents a {display: flex; justify-content: center; align-items: center; border-radius: 40px; width: 40px; height: 16px;}
.contact_contents .contents a img {width: 8px; position: relative; left: 4px;}
.contact_contents .contents a span {font-size: 10px; font-weight: 700; transform: scale(0.6);}
.contact_contents .contents button {display: flex; justify-content: center; align-items: center; border-radius: 40px; width: 40px; height: 16px;}
.contact_contents .contents button img {width: 8px; position: relative; left: 2px;}
.contact_contents .contents button span {font-size: 10px; font-weight: 700; transform: scale(0.6);}


.career_contents {width: 100%; height: 100%; padding: 30px 0;}
.career_contents .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 300px; width: 100%;}
.career_contents .inner .contents {display: flex; max-width: 300px; width: 100%; margin: 10px auto 0;}
.career_contents .inner .contents:first-child {margin: 0 auto;}
.career_contents .inner .contents h2 {font-size: 12px; line-height: 16px; width: 80px;}
.career_contents .inner .contents a {font-size: 12px; line-height: 16px; word-break: keep-all;}
.career_contents .inner .contents p {font-size: 12px; line-height: 16px; word-break: keep-all; width: calc(100% - 80px);}


.gal_posi {position: relative;}
.gal_posi > .gallery {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}





/**************************************************************************/

/* example13 */
.top_contents13 {width: 100%; height: 550px; margin-top: 35px; border-radius: 300px 300px 0 0; overflow: hidden; position: relative; display: flex; align-items: flex-end;}
.top_contents13 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.45;}
.top_contents13 .logo {position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11;}
.top_contents13 .logo img {width: 55%; max-height: 50px; object-fit: contain;}

.main_banner13 {width: 100%; height: 390px; position: relative;}
.main_banner13 .swiper-slide {width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}
.main_banner13 .swiper-slide img {width: 63%; max-width: 230px; min-width: 220px;}

.main_banner13 .swiper-pagination {position: absolute; bottom: 15px; left: 16px; z-index: 15; display: flex; align-items: center;}
.main_banner13 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner13 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner13 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.contact_contents01 {width: 100%; height: 100%; padding: 50px 0;}
.contact_contents01 .contact_middle {max-width: 300px; width: 100%; margin: 0 auto;}
.contact_contents01 .contents {max-width: 300px; width: 100%; height: 40px; margin: 0 auto 10px; display: flex; justify-content: space-between; align-items: center; border-radius: 50px; padding: 0 20px;}
.contact_contents01 .contents:last-child {margin: 0 auto;}
.contact_contents01 .contents h2 {font-size: 12px; width: 65px;}
.contact_contents01 .contents p {font-size: 12px; width: calc(100% - 110px); word-break: break-all; position: relative; top: -1px;}
.contact_contents01 .contents a {display: flex; justify-content: center; align-items: center; border-radius: 40px; width: 40px; height: 16px;}
.contact_contents01 .contents a img {width: 8px; position: relative; left: 4px;}
.contact_contents01 .contents a span {font-size: 10px; font-weight: 700; transform: scale(0.6); position: relative; top: -1px;}
.contact_contents01 .contents button {display: flex; justify-content: center; align-items: center; border-radius: 40px; width: 40px; height: 16px;}
.contact_contents01 .contents button img {width: 8px; position: relative; left: 2px;}
.contact_contents01 .contents button span {font-size: 10px; font-weight: 700; transform: scale(0.6); position: relative; top: -1px;}


.career_contents .career_inner01 {max-width: 300px; width: 100%; margin: 0 auto;}
.career_contents .career_inner01 .contents {display: flex; max-width: 300px; width: 100%; margin: 10px auto 0;}
.career_contents .career_inner01 .contents:first-child {margin: 0 auto;}
.career_contents .career_inner01 .contents h2 {font-size: 12px; line-height: 16px; width: 80px;}
.career_contents .career_inner01 .contents a {font-size: 12px; line-height: 16px; word-break: keep-all;}
.career_contents .career_inner01 .contents p {font-size: 12px; line-height: 16px; word-break: keep-all; width: calc(100% - 80px);}





/**************************************************************************/

/* example14 */
.top_contents14 {width: 100%; height: 375px; position: relative;}
.top_contents14 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.15;}
.main_banner14 {position: relative; width: 100%; height: 100%;}
.main_banner14 .swiper-slide {width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}
.main_banner14 .swiper-slide img {width: 56%; min-width: 200px; max-width: 210px;}

.main_banner14 .swiper-pagination {position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_banner14 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner14 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner14 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.info_mid {width: 100%; padding: 60px 0;}
.info_mid .logo {width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 11; margin: 0 auto;}
.info_mid .logo img {width: 55%; max-height: 50px; object-fit: contain;}

.txt14 {font-size: 20px; line-height: 24px; text-align: center; margin: 30px auto; padding: 0 16px; word-break: keep-all;}

.info_mid .contents_box {max-width: 300px; width: 100%; margin: 0 auto;}
.info_mid .contents_box .contents {display: flex; align-items: flex-start; margin-bottom: 12px;}
.info_mid .contents_box .contents:last-child {margin-bottom: 0;}
.info_mid .contents_box .contents h2 {font-size: 12px; width: 70px;}
.info_mid .contents_box .contents a {font-size: 12px; width: calc(100% - 70px); word-break: break-all;}


.refer_contents {padding-bottom: 30px;}
.refer_slide14 {width: 100%;}
.refer_slide14 .swiper-slide {width: 100%;}
.refer_slide14 .swiper-slide img {width: 100%;}
.refer_slide14 .swiper-slide p {font-size: 10px; text-align: center; margin: 10px auto; font-weight: 500;}
.refer_slide14 .swiper-slide a {display: flex; justify-content: center; align-items: center; width: 75px; height: 24px; border-radius: 50px; margin: 0 auto;}
.refer_slide14 .swiper-slide a img {width: 8px; position: relative; left: 9px;}
.refer_slide14 .swiper-slide a span {font-size: 10px; transform: scale(0.6); position: relative; top: -0.5px; left: 2px;}





/**************************************************************************/

/* example15 */

.top_contents15 {position: relative; width: 100%; height: 450px;}
.top_contents15 .logo {position: absolute; top: 20px; left: 5%; width: 150px; height: 50px; display: flex; justify-content: left; align-items: center; z-index: 11;}
.top_contents15 .logo img {width: 55%; max-height: 50px; object-fit: contain;}
.top_contents15 > p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 16px; line-height: 21px; text-align: center; word-break: keep-all; padding: 0 70px;}


.main_banner15 {position: relative; width: 100%; height: 450px;}
.main_banner15 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;}
.main_banner15 .swiper-slide {width: 100%; height: 100%; display: flex; align-items: flex-end;}
.main_banner15 .swiper-slide img {width: 60%; padding-left: 10px; max-width: 220px;}
.main_banner15.center .swiper-slide {width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center;}
.main_banner15.center .swiper-slide img {width: 170px; padding: 0;}

.main_banner15 .swiper-pagination {position: absolute; bottom: 15px; left: 16px; z-index: 15; display: flex; align-items: center;}
.main_banner15 .swiper-pagination-bullet {width: 6px; height: 6px; border: 1px solid; background-color: transparent; margin: 0 2px; opacity: 1;}
.main_banner15 .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_banner15 .swiper-pagination-bullet-active {width: 6px; height: 6px;}


.info_btn {padding: 60px 0;}
.info_btn .inner {max-width: 300px; width: 100%; margin: 0 auto;}
.info_btn .inner .contents {display: flex; align-items: flex-start; margin-bottom: 30px;}
.info_btn .inner .contents:last-child {margin-bottom: 0;}
.info_btn .inner .contents h2 {font-size: 12px; width: 65px;}
.info_btn .inner .contents p {font-size: 12px; width: calc(100% - 125px); word-break: break-all;}
.info_btn .inner .contents a {display: flex; justify-content: center; align-items: center; width: 60px; height: 15px; font-size: 10px; gap: 3px; border-radius: 15px; position: relative; top: 2px;}
.info_btn .inner .contents a img {width: 8px;}
.info_btn .inner .contents a span {position: relative; top: -1px;}
.info_btn .inner .contents button {display: flex; justify-content: center; align-items: center; width: 60px; height: 15px; font-size: 10px; gap: 3px; border-radius: 15px; position: relative; top: 2px;}
.info_btn .inner .contents button img {width: 8px;}
.info_btn .inner .contents button span {position: relative; top: -1px;}


.reference .sub_title08 {text-align: left; max-width: 300px; width: 100%; margin: 0 auto 20px; font-size: 12px; line-height: normal; position: relative;}
.gallery .sub_title08 {text-align: left; max-width: 300px; width: 100%; margin: 0 auto 20px; font-size: 12px; line-height: normal; position: relative;}

.gallery02 .contents {max-width: 300px; gap: 9px;}
.gallery02 .contents img {width: 94px; height: 94px;}




.txt08 {width: 100%; padding: 40px 16px; display: flex; justify-content: center; align-items: center;}
.txt08 p {font-size: 18px; line-height: 21px; text-align: center; word-break: keep-all;}


.info_btn {position: relative;}
.info_btn .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3;}
.info_btn .inner .contents {position: relative;}





/**************************************************************************/






.bottom_fix {position: fixed; bottom: 79px; left: 50%; transform: translateX(-50%); max-width: 480px; width: 100%; height: 250px; z-index: 80; height: 50px; display: none;}
.bottom_fix .inner {display: flex; justify-content: center; align-items: center; height: 50px; background-color: #000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 79;}
.bottom_fix .inner .fix_btn {display: flex; justify-content: center; align-items: center; gap: 10px;}
.bottom_fix .inner .fix_btn a {display: block; width: 90px; height: 25px; border: 1px solid #fff; border-radius: 10px; text-align: center; line-height: 22px; font-size: 10px; color: #fff; opacity: 0.4;}
.bottom_fix .inner .fix_btn button {display: block; width: 90px; height: 25px; border: 1px solid #fff; border-radius: 10px; text-align: center; line-height: 22px; font-size: 10px; color: #fff; opacity: 0.4; cursor: auto;}
.bottom_fix .inner .fix_btn button.on {opacity: 1;}

.bottom_fix .contents {position: relative; top: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; width: 100%; height: 200px; height: 0; opacity: 0; display: none; z-index: 78;}
.bottom_fix .contents .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8;}
.bottom_fix .contents .close {position: absolute; top: 12px; right: 12px; width: 40px; height: 20px; border: 1px solid #fff; color: #fff; text-align: center; line-height: 18px; font-size: 10px;}
.bottom_fix .contents input {position: relative; width: 160px; height: 25px; outline: none; border: 1px solid #fff; border-radius: 10px; text-align: center; background-color: transparent; font-size: 10px; color: #fff; font-weight: 300;}
.bottom_fix .contents input::placeholder {color: #fff; font-weight: 300;}
.bottom_fix .contents button {position: relative; width: 160px; height: 25px; border-radius: 10px; background-color: #fff; font-size: 10px; font-weight: 500; line-height: 24px; cursor: auto;}