  :root {
    --text-black: #111111;
    --text-sub: #555555;
    --bg-white: #ffffff;
    --border-color: #eaeaea;
  }

body{display: flex; flex-direction: column; min-height: 100vh;}
.sub_con{margin:160px 0 100px 0; flex-grow: 1;}
.sub_con .titbox { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.sub_con h2 { font-size: 3em; font-weight: 700; }
.sub_con .search { position: relative; width: 380px; }
.sub_con .search input {width: 100%; padding: 15px 25px; box-sizing: border-box; border-radius: 40px;   background: #f7f7f7; font-size: 1em; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); border:none;}
.sub_con .search input:focus { border:1px solid var(--main_c); background: #fff; outline: none; }
.sub_con .search button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--main_c); cursor: pointer; }

.sub_gall .g3{position:relative;}
.sub_gall .g3 i{position:absolute; right:20px; top:25px; font-size:1.8em; color: rgb(255 255 255 / 70%); text-shadow: -1px 2px 6px rgb(0 0 0 / 30%); z-index:9;}
.sub_gall .g3 i.ov{color:var(--main_c); }

.tab1_wrap { display: flex; gap: 50px; }
.tab1_wrap .tab1 {font-size: 1.1em; font-weight: 600; cursor: pointer; transition: 0.3s; display:flex; gap:5px; align-items:center;     white-space: nowrap;}
.tab1_wrap .tab1.active {color:var(--main_c); transform: translateY(-2px); font-weight:700;}
.tab1_wrap .tab1:hover:not(.active) { color: var(--main_c)}
.tab1_wrap .tab1 img{width:35px;}

.tab2_wrap { display: flex; gap: 30px; border-bottom: 1px solid #ddd; margin-top:20px; box-sizing:border-box;}
.tab2_wrap .tab2 {background: none; border: none;  font-size: 1.05em;  color: #333; cursor: pointer; transition: 0.3s; position: relative;  padding: 15px 0;  box-sizing:border-box;     flex: 0 0 auto;    white-space: nowrap;}
.tab2_wrap .tab2:hover{color:var(--main_c);}
.tab2_wrap .tab2.active { color: var(--main_c); font-weight: 700; }
.tab2_wrap .tab2.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--main_c); }


@media (max-width: 900px) { 
	.sub_con {font-size:.9em; margin:100px 0 60px 0;}
	.sub_con .titbox {margin-bottom:20px; flex-direction:column; align-items: start; gap: 20px;}
	.sub_con h2{font-size:2em;}
	.sub_con .search {width:100%;}
	.tab1_wrap{gap:30px; overflow-x: auto;  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.tab1_wrap .tab1.active {transform:none}
	.tab2_wrap{overflow:auto;}
}


.filter { display: flex; justify-content: space-between; align-items: center;  margin-bottom:20px; margin-top:40px;}
.filter .left { display: flex; align-items: center; gap: 20px; }
.filter .left .reset_btn {display: flex; align-items: center; gap: 5px; font-size: 1em; font-weight:400;  color: #999; border: none; background:none; cursor: pointer; transition: 0.3s;}
.filter .left .reset_btn svg { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);  stroke:#aaa;}
.filter .left .reset_btn:hover { color: var(--ls-black); }
.filter .left .reset_btn:hover svg { transform: rotate(-180deg); stroke:#333;}
.filter .count{font-size:1.1em;}
.filter .count strong{color:var(--main_c);}
.filter .right{
    display:flex;
    gap:12px;
    align-items:center;
}

.filter_btn{
    padding:10px 40px 10px 15px;
    border-radius:999px;
    background:#f3f3f3;
    cursor:pointer;
    transition:all .2s ease;
    position:relative;
	font-size:1em;
}

.filter_btn::after{
    content:"";
    position:absolute;
    right:14px;
    top:14px;
    transform:rotate(45deg);
    width:6px;
    height:6px;
    border-right:2px solid #aaa;
    border-bottom:2px solid #aaa;
}

.filter_btn:hover{
    background:#ffebdb;
    color:#f5822b;
}

.filter_btn:hover::after{
    border-color:#f5822b;
}

.filter_btn.active{
    background:var(--main_c);
    color:#fff;
    border-color:var(--main_c);
}

.filter_btn.active::after{
    border-color:#fff;
}

    /* 공통 모달 */
    .filter_modal{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.6);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:9999;
    }

    .filter_modal.show{
        display:flex;
    }

    .filter_modal_box{
        width:100%;
        max-width:450px;
        background:#fff;
        border-radius:20px;
        box-shadow:0 20px 60px rgba(0,0,0,0.18);
        overflow:hidden;
        animation:popupFade .2s ease;
		padding:30px 0; 
		box-sizing:border-box;
    }

    @keyframes popupFade{
        from{
            opacity:0;
            transform:translateY(10px) scale(0.98);
        }
        to{
            opacity:1;
            transform:translateY(0) scale(1);
        }
    }

    .filter_modal_head{
        display:flex;
        align-items:center;
        justify-content:space-between;
		padding:0 30px;
		box-sizing:border-box;
		margin-bottom:20px;
    }

    .filter_modal_head h3{ font-size:1.5em;}
    .filter_close{
        border:none;
        background:none;
        font-size:3em;
        line-height:0;
		margin-top:-10px;
        cursor:pointer;
    }
    .filter_item{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:15px 30px;
		box-sizing:border-box;
        font-size:1.1em;
        color:#111;
        cursor:pointer;
        transition:background .15s ease;
    }

    .filter_item:hover{
        background:#f3f3f3;
    }

    .filter_item .check{
        color:var(--main_c);
        font-weight:700;
        opacity:0;
        transition:opacity .15s ease;
		font-size:1.3em;
		line-height:1;
    }

    .filter_item.selected .check{
        opacity:1;
    }

    @media (max-width:900px){
        .filter{ flex-direction: column;    align-items: start;    gap: 20px; margin:20px 0;}
		.filter_btn{font-size:.9em;}
		.filter_modal_box{width:90%; border-radius:5px; padding:20px 0;}
		.filter_item:hover{background:none;}
    }

.view img{max-width:100%;}
.view .head{display:flex; gap:40px; align-items:center; padding-bottom:60px; box-sizing:border-box; border-bottom:2px solid #ddd;}
.view .head .imgbox{width:45%; }
.view .head .imgbox img{width:100%; object-fit: cover; height:400px; border-radius:5px;}
.view .head .txtbox{width:55%}
.view .head .txtbox span{color:#777; font-size:1.1em;}
.view .head .txtbox h3{font-size:2em; margin-bottom:10px; margin-top:3px;}
.view .head .txtbox p{font-size:1.2em; font-weight:300;}
.view .head .txtbox > a{border:1px solid var(--main_c); color:var(--main_c); box-sizing:border-box; padding:13px 25px; display:inline-block; border-radius:5px;}
.view .head .txtbox > a i{color:var(--main_c);}
.view .head .tag{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; margin-bottom:40px;}
.view .head .tag a{border:1px solid #bbb; box-sizing:border-box; border-radius:50px; padding:7px 15px; font-size:.9em; font-weight:300;}
.view .head .tag a:hover{border:1px solid var(--main_c);}
.view .content{margin:60px 0;}

.view .btm h3{font-size:2em; margin:80px 0 20px 0;}

   .swiper{
	width:100%;
	height:400px;
	margin-left: auto;
	margin-right: auto;	
	padding-bottom:30px;
}
	.swiper-wrapper{ flex-wrap:nowrap;}
	.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	}
	.swiper-slide {
		background-size: cover;
		background-position: center;
	}
	.mySwiper .swiper-slide-thumb-active {
	opacity: 1;
	}
	.swiper-button-next, .swiper-button-prev{color:#fff !important}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image:none;}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image:none;}


.swiper-pagination-progressbar{bottom:0 !important;top:auto !important;height:3px !important;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--main_c);}

@media all and (max-width:900px) {
	:root {--swiper-navigation-size: 30px;}
	.mySwiper{width:100%; height:97vw;}
	.swiper-slide{height:auto;}
	.view .head{flex-direction:column; gap:20px; padding-bottom:30px;}
	.view .head .imgbox{width:100%;}
	.view .head .txtbox{width:100%;}
	.view .head .txtbox h3{font-size:1.5em;}
	.view .content{margin:30px 0;}
	.view .btm h3{font-size:1.5em;}
}





.table { width: 100%; display: table; font-size:1em}

.table .row {display: table-row; background: #fff; }
.table .row.header {font-weight:500;  background-color:#f6f6f6;  }
 
.table .cell { padding: 15px 12px;  display: table-cell; vertical-align:middle;  text-align:Center;  border-bottom:1px solid #ddd; color:#666}
.table .cell b {color:#222; }
.table .cell a {color:#222}

.table .row.header .cell {padding:13px 12px;  color: #111;  border-top:1px solid #333;}

.table .t_tit  {width:60%; text-align:left;  font-size:1.03em; font-weight:400; line-height:1.3}
.table .t_tit a {font-weight:400; color:#000; display:flex; gap:5px; align-items:start;}
.table .t_tit a:hover {text-decoration:underline}
.table .t_tit a p{    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;}
.table .t_tit a:hover p{color:var(--main_c)}
.table .cell.no {width:50px; }

.table .cell.photo {width:60px; line-height:0 }

@media screen and (min-width:900px) {

   .notice .table .t_tit  {width:65%}
   .mypage .table .t_tit  {width:50%}
}
 


@media screen and (max-width:900px) {
		.table { display: block; }
		.table * {line-height:1.3}
		.table .row {padding:13px 2%; display: block;  border-bottom:1px solid #ddd}
		.table .row.header {padding: 0; height: 1px; }
		.table .row.header .cell { display: none; }

		.table .row .cell:before { content:attr(data-title); text-transform: uppercase;  }
		.table .row .cell.data-title_b:before { font-weight:500  }
		.table .cell { padding:0; padding-right:5px; display: block; border-bottom:none; text-align:left }
		.table .cell a {width:100%;     }
		.table .cell a p { -webkit-line-clamp: 2;}
		.table .cell_col {display:inline-block; width:auto; font-size:.9em;}

		.table .t_tit  {width:100%; font-size:1.05em; }
		.table .t_tit a {flex-direction:column;}
		.table .row .t_tit:before { display:none }

		.table .no {display:none}

		.t_tit span{background:var(--main_c); color:#fff; padding:5px 10px; box-sizing:border-box; font-size:.8em; display:inline-block; }
 }


.page {text-align:center; width:100%; margin-top:60px; display:inline-block; font-size:0}
.page ul { width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 0;}
.page li { display:inline-block; font-size:0.95rem; font-weight:500; margin:0 8px;}
  
.page a {
	display:inline-block;
 	text-decoration:none; vertical-align:middle;
   color:#999; text-align:Center; font-size:1.4em;
   }
.page a.ov  {color:var(--main_c); font-weight:600; }
.page li.angle {margin:0 6px}
.page li.angle a {display:flex; align-items:center; justify-content:center; font-size:1.2em; }
.page li.angle a i {color:#333;}

  
.view_title {font-size:1.2em;  line-height:1.3;  font-weight:600; color:#333; width:100%; padding:15px 2%; box-sizing:border-box; display:inline-block; text-align:Center; box-sizing:border-box; border-top:1px solid #333; background:#f7f7f7;  }
.view_info {font-weight:400; color:#666; width:100%;  border-bottom:1px solid #ddd; padding:10px 0; display:inline-block; box-sizing:border-box; text-align:center;}
.view_info span::after {width:1px; height:12px; vertical-align:middle;  content:''; display:inline-block; background-color:#888;  margin:0 5px 0 10px}
.view_info span:last-child::after {display:none}
.view_info a:hover {text-decoration:underline }
.view_info span.file a {display:inline-block; border:1px solid #aaa; padding:0 10px; border-radius:2px; margin-right:3px }

.view_content {width:100%; display:inline-block; padding:20px 0; }
.view_content img {max-width:100%}
 

.comment {width:100%; display:flex; background-color:#fff3eb; box-sizing:border-box; padding:20px }
.comment b {width:100px; flex-shrink:0; font-weight:700;}

.list_next  {width:100%; display:inline-block;  border-top:1px solid #ddd; padding:11px 0; box-sizing:border-box; border-bottom:1px solid #ddd; line-height:0} 
.list_next p {width:100%; display:inline-block; font-size:1rem; line-height:1; color:#999;  overflow: hidden;   text-overflow: ellipsis; margin:3px 0;  white-space: nowrap;  }
.list_next p:last-child {text-align:left; }
.list_next b {font-weight:600; color:#333; width:80px; display:inline-block}
.list_next.border_top_none {border-top:none }
.list_next a{color:#666;}

a.list_btn {display:inline-block; margin-top:15px; float:right; border:1px solid #333;  color:#111;   text-align:center; min-width:30px; padding:0 15px; font-size:.95rem;  line-height:33px; background-color:#fff}
a.list_btn + a.list_btn {  float:left; background-color:#333; color:#fff; margin-right:5px  }
a.list_btn + a.list_btn i{color:#fff;}
a.list_btn.right + a.list_btn.right {float:right }
a.list_btn:hover {border:1px solid var(--main_c)}
a.list_btn:hover i{color:var(--main_c)}

@media screen and (max-width:900px) {
		.view_title { width:100%; text-align:left; font-size:1.1em; }
		.view_info span::after {  margin:0 3px 0 6px}
		.view_info {padding-top:1px; font-size:.9em; padding:10px 0; text-align:left;}
		.view_info + div.view_info {padding-top:10px}
		.view_info span.file {width:100%; display:block; }
		.view_info span.file a {margin-top:3px} 
		.view_info span.file::after {display:none;}

		.comment{flex-direction:column; gap:5px;}
		a.list_btn { padding:0 13px; font-size:.90rem;  line-height:28px;  }
		a.list_btn i {font-size:13px}
}



.btnbox{margin-top:60px;}
.btn {
	display:inline-block;
	background:#000;
	color:#fff;
	box-sizing:border-box;
	padding:20px 45px;
	font-size:1.1em;
	font-weight:600;
	border-radius:5px;
	transition:all ease .2s;
	cursor:pointer;
 }
.btn input{border:none;background:none;	font-size:1em; font-weight:700;}
.btn i{color:var(--main_c);}
.btn:hover {background:var(--main_c); color:#fff !important;}
@media screen and (max-width:900px) {
	.btnbox{margin-top:30px;}
	.btn{	padding:20px 30px;font-size:1em}
}

.write {width:100%; display:flex; gap:30px;  justify-content:space-between; flex-wrap:wrap; background:#f7f7f7; padding:30px; box-sizing:border-box; font-size:1.05em;}
.write li{width:100%;}
.write li input[type="file"]{font-size:.8em;}
.write input[type="radio"]{width:20px; height:20px;}
.write li.col-2 {width:calc(50% - 15px)}
.write li p {font-size:1.05em; font-weight:600; color:#333; margin-bottom:8px;} 
.write li  input[type="text"] {width: 100%;
    font-size:1em;
    border-radius: 5px;
	padding:10px;
	box-sizing:border-box; 
	border:1px solid #bbb;
}

.write li  select { 
    padding:10px;
    font-size:1em;
    border-radius: 5px;
	box-sizing:border-box; 
	border:1px solid #bbb;
	
}
.write li textarea {width: 100%; 	border:1px solid #bbb; height:200px;}

.write li.phone div{display:flex;align-items:center}
.write li.phone select {width:40%}
.write li.phone span {margin:0 5px}

.write li.mail div { display:flex; align-items:center}
.write li.mail span { margin:0 5px;}
.write li.mail input[type="text"]{width:100%;}
.write li.mail select{width:100%; margin-left:5px;}

.write li.address .flex{margin-bottom:10px;}

.s_btn{background:#fff; padding:10px 20px; box-sizing:border-box; border:1px solid #bbb; border-radius:5px; margin-left:5px;}

 @media screen and (max-width:800px) {
 	.write {font-size:.9em; padding:15px;}
	.write li {width:100%;  flex-wrap:wrap;}
	.write li.col-2 {width:100%; flex-wrap:wrap;}
	.write li.right p  {padding-left:0}
	.write li p {width:100%; margin-bottom:5px} 
	.write li  input[type="text"] {width:100%}

	.write li.phone div{width: 100%}
	.write li.phone select {width:auto}
	.write li.mail  input[type="text"] {width:50%;}
    .write li textarea {width:100%; height:150px !important }

	.write li.mail  div {width:100%;  }

} 

@media screen and (max-width:600px) {
	.write li.mail div{ flex-wrap:wrap}
	.write li.mail input[type="text"] {width: calc(50% - 14px);}
    .write li.mail select{margin:10px 0 0 0;width:100%;}
 }

.textarea1 {
    font-size: 0.95em;
    line-height: 1.4em;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    color: #666;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 15px;
}


 .privacy_check {
	width: 100%;
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f7f7f7;
    text-align: center;
    font-size: 1em;
    color: #666;
	font-weight:600
}

.inquiry h4{font-size:1.3em; font-weight:500;}
.privacy_check label	{display: flex; align-items: center; gap: 5px; justify-content: center;}
.privacy_check input {vertical-align:middle;width:17px;height:17px;}
.check input[type=checkbox]{width:20px;height:20px;margin-right:3px}



.login .titbox{justify-content:center;}
.social{
    display:flex;
    gap:15px;
	justify-content:center;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}

.social_btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:5px;
    font-size:1.1em;
    font-weight:600;
    box-sizing:border-box;
    transition:all .2s ease;
	padding:17px 40px;
}

.social_btn .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.social_btn .text{
    line-height:1;
}

/* 카카오 */
.social_btn.kakao{
    background:#FEE500;
    color:#191919;
    border:1px solid #F2D900;
}

.social_btn.kakao:hover{
    filter:brightness(0.97);
}

/* 네이버 */
.social_btn.naver{
    background:#03C75A;
    color:#fff;
    border:1px solid #03B153;
}

.social_btn.naver:hover{
    filter:brightness(0.97);
}

.naver_icon{
    width:22px;
    height:22px;
    border-radius:4px;
    background:#fff;
    color:#03C75A;
    font-size:15px;
    font-weight:800;
    line-height:22px;
    text-align:center;

}

.naver .text{color:#fff;}

/* 모바일 */
@media (max-width:768px){
    .social_btn{
        height:52px;
        font-size:16px;
    }
}


.login_box input[type="password"] {font-size:0.95em; color: #555; height:47px; border:none; background-color:#f1f1f1; margin-bottom:10px; padding:0px 10px; box-sizing:border-box; width:100%; vertical-align:middle; -webkit-appearance: none; -webkit-border-radius: 0;}
.login_box a.login_btn {width:100%; background-color:var(--main_c); border:2px solid var(--main_c);  display:inline-block; color:#fff; text-align:center; line-height:45px; font-size:1.1em; font-weight:500; transition: background-color 0.3s ease-in; box-sizing:border-box;  }
.login_box a.login_btn:hover {  background-color:#fff; border:2px solid var(--main_c);   color:var(--main_c);  }

.qna_pw h3{text-align:center; font-size:2em; margin-bottom:20px;}
.qna_pw .wrap{margin:0 auto; max-width:500px; justify-content:center; display:flex; gap:10px;}
.qna_pw .wrap input{background:#eee; padding:15px 20px; box-sizing:border-box; border:none;}
.qna_pw .wrap button{padding:15px 30px; background:var(--main_c); box-sizing:border-box; color:#fff; font-size:1em;}



.sub_menu{margin:25px 0 50px 0;}
.sub_menu ul{display:flex;  flex-wrap:wrap; justify-content:center;}  
.sub_menu li{text-align:center;}
.sub_menu a{display:inline-block; padding:13px 40px; box-sizing:border-box; font-size:1.2em; font-weight:400; color:#bbb; letter-spacing:0; border:1px solid #ccc; border-left:none; width:100%;}
.sub_menu li:first-of-type a{border-left:1px solid; margin-right:-2px;}
.sub_menu a.ov{color:var(--main_c); border:1px solid var(--main_c); }
.sub_menu a:hover{border:1px solid var(--main_c); ;}

@media (max-width: 900px) { 
	.sub_menu li{width:50%;}
	.sub_menu a{padding: 14px 0; font-size:1em; }
	.sub_menu a.ov{position:relative; z-index:9;}
	.sub_menu li:nth-child(n+3) a{margin-top:-1px; }
	.sub_menu li:nth-child(3) a{border-left:1px solid}
}


.mypage .titbox{justify-content:center;}
.mypage .wrap{background:#f7f7f7; padding:40px; box-sizing:border-box; max-width:550px; margin:0 auto; width:100%;}
.mypage h3{font-size:1.5em; font-weight:600; margin-bottom:20px; padding-bottom:7px; box-sizing:border-box; border-bottom:2px solid #333;}
.mypage p{font-size:1.2em; font-weight:400; margin-bottom: 3px;}
.mypage .sns_info{display:flex; gap:7px; align-items:center; margin-top:10px;}
.mypage svg{width:40px; height:40px; object-fit: contain;}
.mypage .btn{border:1px solid #ddd; padding:10px 20px; box-sizing:border-box; display:inline-block; color:#fff; font-size:.95em; font-weight:400;}
.mypage .btn:hover{color:#333 !important;}
.mypage textarea{width:100%; border-color:#ddd; margin-top:10px; height:150px;}

@media (max-width: 900px) { 
	.mypage .wrap{padding:20px;}
}

ul.gall_list * {transition: all 0.3s ease-out; word-break: normal; }
ul.gall_list {width:100%; display:flex; flex-wrap:wrap;  gap:20px; }
ul.gall_list li {width:calc(25% - 15px);   position:relative; cursor:pointer }
ul.gall_list li .img {position:relative; height:300px; overflow:hidden; cursor:pointer; border-radius: 10px; }
ul.gall_list li img {width:100%;   }
ul.gall_list li div.img_bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);   }
ul.gall_list li:hover  div.img_bg {border:1px solid red; width:115%; height:115%}
ul.gall_list li .text { margin-top:15px; box-sizing:border-box; color:#555;  box-sizing:border-box;}
ul.gall_list li h5 {font-size:1.1em; color:#222; font-weight:600; margin-bottom:3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; }
ul.gall_list li h5 b {font-weight:700}
ul.gall_list li h5 + p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
ul.gall_list li p.date {font-size:15px; margin-top:4px; letter-spacing:0; color:#555; font-weight:300}

 @media all and (max-width:1101px) {
		ul.gall_list {gap:20px 0; justify-content:space-between }
		ul.gall_list li {width:49% }
		ul.gall_list li .img {height:49vw }
 

}



.guide{}
.guide .box{display:flex; border-radius:20px; align-items:center;  background:#f7f7f7;  }
.guide .box:nth-child(even){flex-direction: row-reverse;}
.guide .imgbox{width:50%;}
.guide .imgbox img{width:100%; border-radius:20px;}
.guide .txtbox{width:50%; padding:0 60px; box-sizing:border-box; position:relative;}
.guide .txtbox .num{   
	position:absolute;
	top: -70px;
    right: 60px;
	font-size:.8em;
	margin-bottom:10px;
    border-radius: 50%;
    background: var(--main_c);
    color: #fff;
    box-shadow: 0 5px 10px rgba(243, 112, 32, 0.4);
	text-align:center;
	min-width: 70px;
    min-height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
	font-weight:300;
}
.guide .txtbox .num b{color:#fff; font-size:1.4em;}
.guide .txtbox h4{font-size:2.2em;}
.guide .txtbox p{color:#555; margin:10px 0 10px 0; font-weight:300; font-size:1.1em; line-height:1.4;}
.guide ul{display: flex; flex-direction: column; gap: 10px;
	background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;

}
.guide li{
    padding-left:16px;
    position:relative;
	box-sizing:border-box;
}
.guide li:before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--main_c);
}

 @media all and (max-width:900px) {
	.guide .box{flex-direction:column; align-items:start;}
	.guide .box:nth-child(even){flex-direction: column;}
 	.guide .imgbox, .guide .txtbox{width:100%;}
	.guide .imgbox img{border-radius:10px;}
	.guide .txtbox{padding:20px;}
	.guide .txtbox .num{left:5%; right:auto; top:-25%;}
	.guide .txtbox h4{font-size:1.7em;}
 }




.company .sub_con {margin: 66px 0 0 0;}
.company .section { padding: 100px 0; box-sizing: border-box;   }
.company .section_title { font-size: 2.4em; font-weight: 700; margin-bottom: 20px; color: var(--text-black); }

.company .intro { 
	box-sizing:border-box;
    padding: 100px 20px; 
	background:
    radial-gradient(circle at 85% 10%, rgba(243,112,32,.18), transparent 34%),
    radial-gradient(circle at 10% 95%, rgba(243,112,32,.10), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fff6ef 100%);
	text-align:center;
  }
  
  .company .intro span { 
    display: inline-block; 
    margin-bottom: 20px; 
    padding: 6px 16px; 
	box-sizing: border-box;  
    border-radius: 5px; 
    background: var(--text-black); 
    color: var(--bg-white); 
    font-size: 0.85rem; 
	letter-spacing:1px;
  }
 
  .company .intro h2 { font-size: 3rem; font-weight: 800; margin-bottom: 10px; }
  .company .intro p { font-size: 1.3rem; color: var(--main_c); font-weight: 700; margin-bottom: 30px; }
  .company .intro .txtbox { 
    width: 100%;
    margin-bottom: 40px; 
    color: var(--text-sub); 
    font-size: 1.1rem; 
    line-height: 1.8; 
    word-break: keep-all;
  }

  .btn_area { display: flex; gap: 12px; justify-content: center; }
  .btn_area a { padding: 16px 36px; border-radius: 5px; font-size: 1rem;  transition: 0.3s; box-sizing: border-box;  }
  .btn_area a:hover { color:#fff !important;}
  .btn_line { border: 1px solid var(--text-black); color: var(--text-black); }
  .btn_line:hover { background: var(--text-black); color: var(--bg-white); }
  .btn_point { background: var(--main_c); color: var(--bg-white); }
  .btn_point:hover { background: #e06015; transform: translateY(-2px);  }


  .company_tab {
    position: sticky; top: 66px; z-index: 50;
    background: rgba(255, 255, 255, 0.8); 
    border-bottom: 1px solid var(--border-color);
	display: flex; justify-content: center; gap: 60px; box-sizing:border-box;
  }
  .company_tab a { position: relative; padding: 20px 0; color: var(--text-black); box-sizing:border-box; font-size:1.1em;}
  .company_tab a:hover { color: var(--main_c); }
  .company_tab a::after {
    content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 3px;
    background: var(--main_c); transform: translateX(-50%); transition: 0.3s;
  }
  .company_tab a:hover::after { width: 100%; }


.quick_menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 92px;
  z-index: 100;
  overflow: hidden;
  border-radius: 5px;
  background: #111;
  border: 2px solid rgba(255,255,255,.12);
  box-sizing:border-box;
}

.quick_menu a,
.quick_menu button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: #111;
  color: rgba(255,255,255,.78);
  font-size: .9em;
  text-align: center;
  cursor: pointer;
  transition: .25s;
  box-sizing: border-box;  
}

.quick_menu a:hover,
.quick_menu button:hover {
  background: rgba(243,112,32,.16);
  color: #fff;
}

.quick_menu .qm_point {
  height: 66px;
  background: var(--main_c);
  color: #fff;
}

.quick_menu .qm_point:hover {
  background: #e06015;
  color:#fff !important;
}

.quick_menu button:last-child {
  border-bottom: none;
}


.guarantee_sec { 
  position: relative; 
  overflow: hidden; 
  background: radial-gradient(circle at 85% 12%, rgba(243,112,32,.24), transparent 34%), linear-gradient(135deg, #111 0%, #1b1b1b 100%); 
  color: #fff; 
  border-bottom: none; 
}
.guarantee_sec .inner { position: relative; z-index: 2; }
.guarantee_sec .section_title { color: #fff; margin-bottom: 12px; }
.guarantee_sec .section_title span { color: var(--main_c); font-size: 1.3rem; font-weight: 300; }


.guarantee_box { 
  max-width: 1050px; 
  margin: 0 auto; 
  padding: 46px; 
  box-sizing: border-box;  
  border-radius: 24px; 
  background: rgba(255,255,255,.06); 
  box-shadow: 0 24px 60px rgba(0,0,0,.28); 
  text-align: left; 
}

.g_wrap { margin-bottom: 35px; }
.g_wrap.border_line { padding-bottom: 35px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.g_wrap2{margin-bottom:10px;}

.g_wrap h4 { display: flex; align-items: center; color: #fff; font-size: 1.4em; margin-bottom: 5px; }
.g_wrap h4::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--main_c); margin-right: 10px; }
.g_wrap p { color: rgba(255, 255, 255, 0.75); font-size: 1.05em; padding-left: 18px; word-break: keep-all; font-weight:300;}
.g_wrap p strong { color: #fff; font-weight: 600; }

.note{color: rgba(255, 255, 255, 0.75); margin-top:20px; text-align:center;}
.note strong{color:#fff;}

.g_card_wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g_card { position: relative; min-height: 210px; padding: 30px 26px; box-sizing: border-box;  border-radius: 5px; background: #fff; color: #111; transition: all 0.3s ease; text-align: left; display: flex; flex-direction: column; }

.g_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.g_icon { width: 48px; height: 48px; border-radius: 50%; background: #fff4ec; display: flex; align-items: center; justify-content: center; color: #f37020; margin: 0; transition: 0.3s; }
.g_icon svg { width: 22px; height: 22px; stroke: #f37020; }
.g_badge { display: inline-block; padding: 6px 14px; box-sizing: border-box;  border-radius: 30px; background: #f37020; color: #fff; font-size: 0.85rem;  letter-spacing: .05em; }

.g_card h5 { font-size: 1.25rem; color: #111; margin-bottom:5px;}
.g_card p { color: #666; font-size: .95rem;  margin: 0; padding: 0; }


@media (max-width: 900px) {
  .company .section_title{font-size:2em;}
  .company .intro{text-align:left;}
  .company .intro h2{font-size:2em;}
  .company .intro .txtbox{font-size:1em;}
  .btn_area{flex-direction:column;}
  .btn_area a{text-align:center;}
  .company_tab{top:63px; gap:30px;}
  .guarantee_sec {
    padding-bottom: 80px;
  }

  .g_document {
    padding: 34px 22px;
    border-radius: 18px;
	box-sizing: border-box;  
  }

  .s_name_group {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1rem;
  }

  .quick_menu {
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
    display: flex;
  }

  .quick_menu a,
  .quick_menu button {
    flex: 1;
    height: 58px;
    border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.12);
  }

  .quick_menu button {
    display: none;
  }

  .quick_menu .qm_point {
    height: 58px;
  }

  .company {
    padding-bottom: 58px;
  }

  .g_card_wrap { grid-template-columns: 1fr; }
  .guarantee_box { padding: 32px 22px; }
  .guarantee_sec { padding-bottom: 80px; }
}



