:root {


	--main-color:#36c174;

}
.mo{
	display: none !important;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    background: transparent;
	font-family: 'NanumSquare Neo variable', sans-serif;
	letter-spacing: -.03334em;
}
*, ::after, ::before {
	box-sizing: border-box;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
}
h1,h2,h3,h4,h5,h6{
	padding:0;
	margin:0;
}
table{
	border-collapse: collapse;
	width:100%;
}
.ani {
	transition-property: all !important;
	transition-duration: .2s !important
}

.ani-1s {
	transition-property: all;
	transition-duration: 1s
}

ul {
	list-style-type: none;
	padding:0;
	margin:0;
}
a{
	text-decoration: none;
}
div.fp-watermark {
    display: none;
}
header{
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height: 90px;
	background-color: #00000055;
	z-index: 3;
}

header > div{
    display: flex;
    height: 90px;
    align-items: center;
    justify-content: space-between;
}
header .logo{
    display: block;
    width: 236px;
    height: 90px;
    background-image: url(/assets/img/main_logo_01.png);
    background-size: 176px 51px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
header .logo-white{
    background-image: url(/assets/img/main_logo_02.png);
}

header > div > ul{
	display: flex;
	margin-right: 40px;
}
header > div > ul > li {
	position: relative;
	padding: 0 40px;
}

header > div > ul > li > ul{
	position: absolute;
	width: 100%;
	padding:8px 0;
	background: #222;
	display: none;
	transition-property: all !important;
	transition-duration: .2s !important;
	opacity: 0;
	top:65px;
}
header > div > ul > li:hover > ul{
	display: block;
	opacity: 1;

}
header > div > ul > li > ul > li > a{
    display: block;
    color: #fff;
    width: 100%;
	padding: 10px 18px;
}
header > div > ul > li > ul > li > a:hover{
	background-color: #000000;


}
header > div > ul > li> a{
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	height: 90px;


}
header > div > ul > li> a > span{    
	display: inline-block;
    padding: 10px 0 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.2;
    position: relative;
}


header > div > ul > li> a > span::before{
	content: '';
	display: block;
	clear: both;
	width: 0%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #fff;
	transition: all .4s ease;
}
header > div > ul > li> a:hover > span::before{
	content: '';
	width: 100%;

}

header > div > .menu-white a > span {
	color:#333;
}
header > div > .menu-white a > span::before{
	background-color:#333;
}
header .moMenuBtn{
	
	position: absolute;
    right: 22px;
    top: 22px;
    z-index: 1;
	display: none;
}
header .moMenuBtn i{
	font-size:24px;
	color:#ffffff;
}

.subHeader{
	background-color: transparent;
}

.subHeader{
	background-color: transparent;
}
.whiteMenu{
	background-color: #ffffff;
}
.whiteMenu > div > ul > li> a > span{
	color: #333;
}
.whiteMenu .logo{
    background-image: url(/assets/img/main_logo_02.png);
}
.whiteMenu > div > ul > li> a > span::before{

	background-color: #333;
}
.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.idx_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(/assets/img/bg/06.jpg);
}
.idx_bg::before{
	content: "";
	position: absolute;
	left: 0;
	top:0;
	background-color: #00000075;
    width: 100%;
    height: 100vh;

}
.main01{
	position: relative;
}
.main01 span{
	display: block;
	margin: 32px auto;
	max-width: 1440px;
	width:100%;
	text-align: left;
	font-size: 28px;
	font-weight: 400;
	line-height: 140%;
	color: #fff;
	letter-spacing: -2.5px;
}
.main01 .red{
    color: #fffbea;
    text-shadow: 0 0 8px #faffba;
    font-style: normal;
}
.main01 strong{

display: block;

margin:5px auto;

max-width: 1440px;

width:100%;

font-weight: 500 !important;

font-size:80px;

text-align: left;

color: #ffffffab;

letter-spacing: -2.5px;
}
.main01 strong em{
	
	font-style: normal;
}

.main01 .main01-img-01{
	position: absolute;
	right: 0;
	top:0;
	transform: translate(100px,-100px); 
}
.ani-1s .main01-img-01{
	transform: translate(0,0); 
	transition-property: all;
	transition-duration: 1s
}

.main01 .main01-img-02{
	position: absolute;
	left: -260px;
    bottom: 72px;
	transform: translate(-100px,-50px); 
}
.ani-1s .main01-img-02{
	transform: translate(0,0); 
	transition-property: all;
	transition-duration: 1s
}

.main01 .main01-img-03{
	position: absolute;
	left: 0px;
    bottom: 0px;
	transform: translate(-100px,50px); 
}
.ani-1s .main01-img-03{
	transform: translate(0,0); 
	transition-property: all;
	transition-duration: 1s
}
.main_inner_box{
	margin:0 auto;
	width:100%;
	max-width:1600px;
	color:#ffffff;
}
.main_inner_box h2,
.subtitle h2{
	font-size:50px !important;
	font-weight: 800 !important;
	text-align: left !important;
	padding:0 !important;
	margin:0 !important;
	position: relative;
}

.main_inner_box .inner_txt,
.subtitle .inner_txt{
	position: relative;
	color: #aeaeae;
	margin-top:8px;
}
.main_inner_box .inner_txt
{
	color:#777777;
}

.main_inner_box .inner_txt a {
	position: absolute;
	right: 0;
	bottom: 0;
    display: block;
    width: 170px;
    height: 50px;
    line-height: 48px;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 0.5px;
    text-align: center;
    border: 1px solid transparent;
    box-sizing: border-box;
    background: #36c174;
    background: linear-gradient(-60deg, #1d4b32 10%, #2b6847 95%);
    border-radius: 0 0 20px 0;
}
.box_list{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top:60px;
}
.box_list > a{
	display: block;
	width:100%;
	position: relative;
	flex-direction: column;
	align-items: center;
	transition-property: all;
	transition-duration: .4s;
	color:#fff;
}
.box_list > a:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.box_list > a > div:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    align-content: center;
	background-size: cover;
	
	
}
.box_list > a > div:nth-child(1)::after{
	content:"";
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	background: linear-gradient(0deg, #3d1b1bdd, #77777777);

}
.box_list > a:nth-child(2) > div:nth-child(1)::after{
	background: linear-gradient(0deg, #162720dd, #77777777);
}
.box_list > a:nth-child(3) > div:nth-child(1)::after{
	background: linear-gradient(0deg, #050537dd, #77777777);
}
.box_list > a:nth-child(4) > div:nth-child(1)::after{
	background: linear-gradient(0deg, #2c2d08dd, #77777777);
}
.box_list > a > div:nth-child(1) > div{
	color:#FFFFFF77;
	font-weight: 700;
	position: relative;
    z-index: 1;
}
.box_list > a > div:nth-child(1) h4{
	font-size: 40px;
	margin-top:6px;
	position: relative;
    z-index: 1;
}
.box_list > a > div:nth-child(1) > span{
	font-size:15px;
	margin-top:20px;
	display: block;
	line-height: 1.4em;
	position: relative;
    z-index: 1;
}
.box_list > a:hover{
	transform: translateY(-36px);
	transition-property: all;
	transition-duration: .4s;
}
.box_list > a:hover > div:nth-child(1){
	filter: blur(4px) brightness(40%);
	transition-property: all;
	transition-duration: .4s;
	
}

.box_list > a > div:nth-child(2){
	position: absolute;
	left:20px;
	bottom:20px;
}
.box_list > a > div:nth-child(2) > span{
	display: block;
	opacity: 0;
	transition-property: all;
	transition-duration: .4s;
}
.box_list > a > div:nth-child(2) span:nth-child(1){
	color:#fff;
	font-size:20px;
	font-weight: 700;
	
}
.box_list > a:hover > div:nth-child(2) > span{
	opacity: 1;
	transition-property: all;
	transition-duration: .4s;
}
.box_list > a > div:nth-child(2) span:nth-child(2){
	font-size:11px;
	color:#FFFFFF77;
	font-weight: 400;
	padding:10px 0;
	margin-top:20px;
}
.sec2 {
	background-color:#dddddd;
	background-image: url(/assets/img/bg_01.jpg);
	position: relative;
}

.white_bg, 
.white_bg div, 
.white_bg h2, 
.white_bg span,
.white_bg a{
	color:#191919;
}
.white_bg .inner_txt{
 color:#666;
}

.info_box{
	padding: 50px 50px 40px;
    box-sizing: border-box;
    height: 448px;
    background-color: #f9f9f9;
    border-top: 1px solid #242e3e;
    border-bottom: 1px solid #242e3e;
	width:630px;
	margin-top:58px;
}
.info_box small{
	font-size: 12px;
	color:var(--main-color);
	font-weight: 700;
}
.info_box h4{
	font-size:28px;
	font-weight: 700;
	margin-top:10px;
}
.info_box p {
	font-size:14px;
	color:#666;
	display: block;
	margin-top:40px;
	line-height: 2.2em;
}

.shape01{
	background-color: var(--main-color);
	left: 47.61%;
	top:-179px;
	border-radius: 50%;
	position: absolute;
	filter:blur(16px);
	width:322px;
	height: 322px;    
	z-index: -1;
	transform: translateY(-60px);
}

.shape02{
	background-color: var(--main-color);
    left: -35px;
    bottom: 82px;
    box-shadow: 9px 9px 24px 0 rgba(0, 0, 0, 0.33);
	border-radius: 50%;
	position: absolute;
	width:131px;
	height: 131px;    
	z-index: -1;
	transform: translateX(-40px);
}
.ani-1s .shape01,
.ani-1s .shape02 {
	transform: translateY(0px);
	transform: translateX(0px);
	transition-property: all;
	transition-duration: .4s;
}
.shape02::before {
	position: absolute;
	content:"";
    border: 1px solid rgba(1, 2, 1, 0.5);
	border-radius: 50%;
    left: -15px;
    top: -12px;
	width:131px;
	height: 131px;    
}

.subpageTitle{
	background-image: url(/assets/img/sub_visual2.jpg);
	background-size: cover;
	background-position: center center;
	height: 400px;
	display: flex;
    align-items: center;
    justify-content: center;
}
.subpageTitle h3{
	font-size: 48px;
	color:#fff;
	position: relative;
}
.circle{
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: var(--main-color);
    border-radius: 50%;
    margin-left: 10px;
    position: absolute;
    bottom: 2px;
}
.aboutSec0{
	padding-top:140px;
	margin:0 auto 0;
	width:1280px;
	display: grid;
	grid-template-columns: 1fr;
}
.aboutSec0 h2{
	font-size:60px;
	position: relative;
}
.aboutSec0 h4{
	color:var(--main-color);
}
.aboutSec1, .aboutSec2{
	margin:87px auto 120px;
	width:1280px;
	display: flex;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
}
.aboutSec1 > div{
	width:50%;
}
.aboutSec1 h3{
	position: relative;
	padding-left:16px;

}

.aboutSec1 h3::before{
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    background-color: var(--main-color);
    position: absolute;
    left: 0;
    top: 0;
}
.aboutSec_full{
	flex-direction: column;
}
.aboutSec_full h3,
.aboutSec_full p{
	display: block;
	width: 100%;
	flex-direction: column;
}
.aboutSec2{
	grid-template-columns: 265px 1fr;
}
.aboutSec1 h3,
.sub_cont h3{
	font-size: 30px;
	line-height: 1.4em;
}
.sub_cont h3{
	font-size: 30px;
	line-height: 1.4em;
	margin-top:86px;
}
.aboutSec1 p,
.aboutSec0 p {
	color:#555;
	font-size:17px;
	line-height: 1.7em;
	margin-top:35px;
}
.aboutSec1 p > strong,
.aboutSec0 p > strong{
	color:#000;
	font-weight: border;
	font-size: 22px;

}
.aboutSec_full p{
	margin-bottom: 70px;
}
.bici {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-top:50px;
}
.bici img{
	display: block;
	width:100%;
	height: auto;
}
.row-1-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.color-box {
    margin-top: 20px;
    color: #fff;
    padding: 60px 30px;
    line-height: 150%;
}
.subContMenu{
	display: flex;
	justify-content: space-around;
    align-items: center;
	margin-bottom:60px;
}
.subContMenu a{
	font-size:20px;
	padding:25px 0;
	text-align: center;
	border:1px solid #dcdcdc;
	border-right: 0;
	display: block;
	width: 100%;
	color: #333;
}
.subContMenu a:last-child{
	border-right:1px solid #dcdcdc;

}
.subContMenu .on,
.subContMenu a:hover {
	background-color: var(--main-color);
	color:#fff;
}

.faqTable {
    border-top:3px solid var(--main-color);

}
.faqTable > div{
    display: grid;
    grid-template-columns: 160px 100px 1fr 100px;
    grid-template-rows: auto auto; /* 2개의 행 */
    align-items: center;
    border-bottom:1px solid #dcdcdc;
    cursor: pointer;
}

.faqTable > div > div:nth-child(1){
    text-align: center;
}
.faqTable > div > div:nth-child(2){
    text-align: center;
    padding:12.165px;
}
.faqTable > div > div:nth-child(2) #Layer_1{
    width:30px;
    height:30px;
    fill:var(--main-color) !important;
}
.faqTable > div > div:nth-child(4){
    text-align: center;
    padding:10px;
}
.faqTable > div > div:nth-child(5){
    grid-column: 1 / span 4; /* 1열에서 4열까지 확장 */
    grid-row: 2;
}
.faqAnswer{
    display: none;
}

.faqAnswer > div > div:nth-child(2) #Layer_1{
    fill:#646464 !important;
}
.faqAnswer{
    background-color: #f7f7f7;
    border-top:1px solid #dcdcdc;
}
.faqAnswer > div > div:nth-child(3){
    line-height: 164%;
    padding:1em 0;
}

.faqAnswer > div{
    border-bottom:0;
}
.box {
	width:1280px;
	margin:0 auto;
}

.box h2{
	padding:140px 0 40px;
	text-align: center;
	font-size: 26px;
}
.root_daum_roughmap {
    width: 100% !important;
}
.subtitle{
	margin-top:100px;
}

.adrTxt{
	border-left:1px solid #aeaeae;
	padding:20px 40px;
	margin-top:40px;
}
.adrTxt > div > span{
	font-size: 11px;
	margin-bottom:5px;
	display: block;
	color:#aeaeae;
}
.adrTxt > div > div{
	font-weight: 700;
}
.adrTxt > div{
	margin-bottom:20px;
}
.adrTxt > div:last-child{
	margin-bottom: 0;
}
.tableRows{
	border-top:3px solid var(--main-color)	
}

.tableRows th{
	background-color: #eee;
	height: 60px;
	border-bottom:1px solid #ececec;
}
.tableRows td{
	color:#646464;
	text-align: center;
	padding:20px 5px;
	border-bottom:1px solid #ececec;
	font-size: 16px;
}
.tableRows td .iconLink {
	position: relative;
}
.tableRows td .iconLink i{
	font-size: 20px;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	color:var(--main-color);
}
.tableRows td .iconLink:hover i{
	color: var(--main-color);
}


.pagingContainer{
	margin-top:50px;
}
.pagingContainer > .paging{
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagingContainer > .paging li {
	min-width: 36px;
    margin: 0 2px;
}
.pagingContainer > .paging li a {
    border: 1px solid #dcdcdc;
    display: block;
    width: 100%;
    line-height: 34px;
    height: 36px;
    text-align: center;
	font-size:14px;
	padding: 0 8px;
	color:#333;
}
.pagingContainer > .paging .on a{
	background-color: var(--main-color);
	color:#fff;
}
.boardSearch{
	display: none;
}
.productPage{
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 40px;
	margin-top: 80px;
}
.productPage .category > a{
    color: #333;
    display: block;
    border-bottom: 1px solid #ddd;
    padding: 12px 24px;
}
.productPage .category > a:first-child{
	font-weight: 600;
}



input[type="checkbox"], input[type="radio"] {
    display: none;
}
input[type="checkbox"] + label
,input[type="radio"] + label{
	color:#888;
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label{
	color:#333;
}
input[type="checkbox"]+label::before,
input[type="radio"]+label::before{
	content:"\eb81";
	font-family: 'remixicon' !important;
	font-size:18px;
	color:#aaaaaa;
	vertical-align: -3px;
	margin-right:2px;
}
input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before{
	content:"\eb80";
	color:var(--main-color);
}

.searchfilter {
	background-color: #f6f6f6;
    padding: 30px;
}
.searchfilter > div {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    height: 44px;
}
.searchfilter > div:last-child{
	margin-bottom: 0px;
}
.searchfilter > div > :nth-child(2){
	display: flex;
}
.searchfilter > div > :nth-child(2) label{
	display: inline-block;
	margin-right: 10px;
}
.searchInp{
	width: 336px;
    border: 1px solid #d9d9d9;
	height: 42px;
	padding:0 .8em
}
.searchBtnArea{
	display: flex;
	justify-content: space-between;
}
.searchBtnArea > div:last-child{
	text-align: right;
}
.searchBtnArea > div:last-child > button{
    height: 42px;
    border: 0;
    background-color: #acacac;
    color: #fff;
    width: 120px;
    margin-left: 6px;
}
.searchBtnArea > div:last-child > button[type=submit]{
background-color: var(--main-color);
}


.item{
    border:1px solid #dcdcdc;
    display: block;
    position: relative;
}
.item .img{
    height:180px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.item .rt{
    background-position: top right;
    background-size: contain;
    background-repeat: no-repeat;
}
.item .title{
    padding:0px 10px 40px;
    text-align: center;
}
.item .title .txt{
    font-size:17px;
	color:#333;
}
.item .title .subTxt{
    font-size:14px;
    color:#646464;
    margin-top:5px;
}

.hoverDiv > div > .txt{
    font-size:17px;
    color: #fff;
    text-align: center;
    margin-bottom:10px;
}
.hoverDiv > div > .subTxt{
    font-size:14px;
    color: #fff;
    margin-bottom:15px;
    text-align: center;
}

.item > .hoverDiv > span{
    color:#fff;
    border:1px solid #fff;
    padding: 10px 37px;
}

.item:hover > .hoverDiv > span:hover{
    background-color: #fff;
    color:var(--main-color)
}

.item > .hoverDiv{
    position: absolute;
    display: none;
    left:0;
    top:0;
    background-color: rgb(0 0 0 / 66.667%);
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.item:hover > .hoverDiv{
    opacity: 1;
}

.item > .hoverDiv > span{
    color:#fff;
    border:1px solid #fff;
    padding: 10px 37px;
	margin-bottom: 20px;
}
.item:hover > .hoverDiv > span:hover{
    background-color: #fff;
    color:var(--main-color)
}

.itemList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}
.productsList{
	margin-top:40px;
}
.cateOn{
	color: var(--main-color) !important;
	font-weight: 700;
}
.imgDetail,
.btmBtn{
	width:80%;
}
.btmBtn{
	text-align: right;
}
.btmBtn > a,
.downloadBtn > a{
	height: 42px;
    border: 0;
    background-color: var(--main-color);
    color: #fff;
    width: 120px;
    margin-left: 6px;
	display: inline-block;
	text-align: center;
	line-height: 42px;
	margin-top:40px;
}
.btmBtn > a, .downloadBtn > a {
    width: 175px;
    margin-top: 20px;
}
.aboutUsImg{
	background-image: url(/assets/img/aboutus01.png);
}
.greetingImg img{
	width:100%;
	height: auto;
}
.catalogImg img{
	width:265px;
	height: auto;
}


footer{
	background-color: #222;
	color:#fff;
	padding:80px 90px;
	margin-top:200px;
	display: flex;
    justify-content: space-between;
}

.footerLogo {
	width:140px;
}
.info_area .cp_name em {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    letter-spacing: -0.5px;
    line-height: 1;
	font-style: normal;
}
.info_area .info_wrap{
	margin-top:6px
}
.info_area .info_wrap .info p {
	margin:0;
}
.info_area .info_wrap .info p span {
    padding: 0px;
    box-sizing: border-box;

    font-size: 12px;
    font-weight: 400;
    color: #666;
    letter-spacing: -0.5px;
    line-height: 1;
    position: relative;
}
.info_area .info_wrap .clear{
	margin-top:2px;
}
.info_area .info_wrap .clear a{
	
    color: #666;
}

footer .rootMenu{
	display: flex;

}
footer .rootMenu a{
	color:#fff;
	font-size:14px;
	padding:0 40px;
}
footer .rootMenu > li > a{
	margin-bottom: 14px;
	font-weight: 600;
}
footer .rootMenu > li > ul > li > a{
	color:#8d8d8d;
	font-size:12px;
	display: block;
	margin-top:10px;
}
footer .rootMenu > li > ul{
	display: block;
}

footer .moMenuBtn{
    display: none;
}
.indexText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.quick {
    position: fixed;
    right: 40px;
    bottom: 168px;
    z-index: 100;
}
.quick a {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    text-align: center;
    line-height: 1.2em;
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 20%);
    position: relative;
}
.quick a.call_btn span.quick_icon {
    background: #36c174 url(/assets/img/phone.svg) no-repeat center;
    background-size: 30px;
}
.quick a.contact_btn span.quick_icon {
    background: #36c174 url(/assets/img/contact.svg) no-repeat center;
    background-size: 27px;
}
.quick a.top_btn{
    background: #0b0b49 url(/assets/img/top.svg) no-repeat center;
    background-size: 27px;
}
.quick a span {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
	transform: translateY(-50%);
    border-radius: 50%;
}
.quick a .neo_eHv{
	height: auto;
	opacity: 0;
	color:#fff;
	font-weight: 700;
}
.quick a:hover span:nth-child(2){
	opacity: 1;
}
.quick a.call_btn:hover span.quick_icon,
.quick a.contact_btn:hover span.quick_icon {
	background: #36c174;
}
.quick a + a {
    margin-top: 5px;
}
.quick {
    position: fixed;
    right: 24px;
    bottom: 25px;
    z-index: 4;
}

.sec3_box_area{
	margin-top: 57px;
	padding: 50px 50px 40px;
    box-sizing: border-box;
    height: 448px;
    background-color: #f9f9f9;
    border-top: 1px solid #242e3e;
    border-bottom: 1px solid #242e3e;
	width: 630px;
	background-color: #f9f9f9;
}
.sec3_box_area_txt span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    font-variation-settings: 'wght' 700;
    color: #36c174;
    letter-spacing: -0.5px;
    line-height: 1;
}
.sec3_box_area_txt h5 {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
    font-variation-settings: 'wght' 700;
    color: #222;
    letter-spacing: -0.5px;
    line-height: 1;
}
.sec3_box_area_txt p {
    height: 180px;
    font-size: 1.4rem;
    font-weight: 400;
    color: #666;
    letter-spacing: -0.5px;
    line-height: 30px;
	display: block;
	margin-top:40px;
	font-size: 14px;
}
.ovfl-hd{
	overflow: hidden;
}
.circle_fill {
    width: 900px;
    height: 900px;
    border-radius: 50%;
    position: absolute;
    right: -140px;
    bottom: -140px;
    background: linear-gradient(302deg, black, #1f2f21);
}
.circle_fill > img{
	    width: 562px;
    height: auto;
    position: absolute;
    right: 218px;
    bottom: 412px;
}
.circle_tra {
    width: 180px;
    height: 180px;
    position: absolute;
    right: 180px;
    bottom: 648px;
	cursor: pointer;
    text-align: center;
}
.circle_tra::after {
    content: "";
    background-image: url(/assets/img/circle_tra2.svg);
    display: block;
    width: 100%;
    height: 100%;
    background-position: 100% 100%;
	position: absolute;
    left: 0;
    top: 0;
	transform: rotate(4deg);
}
.circle_tra > div{
	text-align: center;
	color: #000;
	position: relative;
	z-index: 1;
	margin-top: 20px;
	font-weight: 600;
}
.circle_tra > img{
	width:50px;
	height: auto;
	position: relative;
	z-index: 1;
	margin-top: 43px;
}

 .circle_no2{
	right: 384px;
	bottom: 627px;
	}
.circle_no3{
	right: 550px;
	bottom: 502px;
	transform: rotate(0deg);
	}
.circle_no4{
	right: 652px;
	bottom: 324px;
	transform: rotate(0deg);
	}
.circle_no5{
	right: 645px;
	bottom: 116px;
	transform: rotate(0deg);
	}

.circle_no2::after{
	transform: rotate(334deg);
}
.circle_no3::after{
	transform: rotate(305deg);
}
.circle_no4::after{
	transform: rotate(280deg);
}
.circle_no5::after{
	transform: rotate(256deg);
}

.click_on::after{
    background-image: url(/assets/img/circle_tra.svg);
}

.sec3_box_area_txt{
	display: none;
}
.circle_txt_selected{
	display: block;
}
.program_box_list > a > div{
	padding-top: 40%;
}

.greetingSec1{
	margin-bottom:0;
	padding-bottom:0;
}
.greetingSec2, .greetingSec2 p{
	margin-top:0;
	padding-top:0;
}
.philo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
	width: 100% !important;
}
.philo-card {
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    padding: 18px 18px 20px;
    background: #f9fafb;
    font-size: 14px;
}
.philo-card h4 {
    font-size: 18px;
    margin: 0px 0px 20px 0;
    font-weight: 700;
}
.philo-card p {
	margin: 0;
    padding: 0;
}
.philo-label {
    font-size: 12px;
    margin-bottom: 4px;
    padding: 20px 0;
    color: var(--main-color);
    font-weight: bolder;
}
.root_daum_roughmap .cont{
	display: none;
}
.mapLocation {
	margin-top: 40px;
}

.btn-primary {
    background: var(--main-color);
    color: #ffffff;
}
.btn {
    display: inline-block;
    align-items: center;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s 
ease;
    white-space: nowrap;
    margin-right: 8px;
}
.btn-outline {
    background: transparent;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}