@charset "utf-8";

/*레이어 팝업*/
.layer_popup_wrap								{--color-point:#695ebb;}

[data-main-con]									{ margin-top:5.63em; }
@media all and (max-width:1568px){
    [data-main-con]								{ margin-top:4.63em; }
}
@media all and (max-width:1268px){
    [data-main-con]								{ margin-top:4em; }
}
@media all and (max-width:868px){
    [data-main-con]								{ margin-top:3.63em; }
}
@media all and (max-width:468px){
    [data-main-con]								{ margin-top:3em; }
}


/* visual */
.visual													{ position:relative; width:1820px; margin:0 auto }
.visual .title  										{ position:absolute; top:20%; left:10%; z-index:2; color:var(--color-white); font-size:1.5rem; line-height:3.438rem;}
.visual .title span  									{ display:block; font-family:var(--font-binggrae); font-size:3.438rem;}
.visual .mySwiper										{ z-index:inherit; }
.visual .swiper-slide a									{ position:relative; display:block;  }
.visual .swiper-slide .img								{ position:relative; width:100%; height:0;  padding-top:39.56%; border-radius:10px; overflow:hidden; }
.visual .swiper-slide .img img							{ position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%);  object-fit:cover; z-index:1}
.visual .swiper-slide a:focus::after					{ position:absolute; width:calc(100% - 2%); height:calc(100% - 4%); left:1%; top:2%; border-radius:10px; border:2px dotted #fff; content:''; z-index:2 }
.visual .swiper_control									{ position:absolute; top:50%; left:10.5%; width:100%;  z-index: 1; color:#fff}
.visual .swiper_page i::after  							{ width:150px }

[data-main-con] { margin-top:4.375rem; margin-bottom:5rem; font-family:var(--font-paperlogy);}



/* banner01 */
[data-main-con="banner01"] 								{  }
[data-main-con="banner01"] .title 						{ position:relative;text-align:center; margin-bottom:4.375rem; }
[data-main-con="banner01"] .title dt					{  font-size:2.813rem; font-weight:700; margin-bottom:100px}
[data-main-con="banner01"] .title:before  				{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1px; height:50px; background:var(--color-black); }
[data-main-con="banner01"] .title dd					{ font-size:1.375rem; line-height:1.875rem; }
[data-main-con="banner01"] .banner_grid  				{ display:grid; grid-template-columns:repeat(2, 1fr); grid-gap: 60px; align-items:flex-start; padding:10px;}
[data-main-con="banner01"] .banner_grid .item  			{ position: relative; text-align:left; align-items:flex-end; padding:50px; overflow:hidden; color:var(--color-white); z-index: 0; min-height:420px;  border-radius: 10px;}
[data-main-con="banner01"] .banner_grid .item::before	{ content:''; position:absolute; inset:0; background-size: cover; transition: transform 0.4s ease; z-index: -1}
[data-main-con="banner01"] .banner_grid .item01::before	{ background:url("/resource/stone/images/main/banner01_bg01.jpg?ver=250805") no-repeat center; }
[data-main-con="banner01"] .banner_grid .item02::before	{ background:url("/resource/stone/images/main/banner01_bg02.jpg?ver=250805") no-repeat center; }
[data-main-con="banner01"] .banner_grid .item03::before	{ background:url("/resource/stone/images/main/banner01_bg03.jpg?ver=251015") no-repeat center; }
[data-main-con="banner01"] .banner_grid .item04::before	{ background:url("/resource/stone/images/main/banner01_bg04.jpg?ver=250805") no-repeat center; }
[data-main-con="banner01"] .banner_grid .item:hover::before,
[data-main-con="banner01"] .banner_grid .item:focus::before  	{ transform: scale(1.05); }
[data-main-con="banner01"] .banner_grid .item > * 				{ position: relative; z-index: 1;}

[data-main-con="banner01"] .item .tit  					{ position:relative; }
[data-main-con="banner01"] .item .tit:before 			{ content:''; position:absolute; top:70px; left:2px; transform:translateY(-50%); width:1px; height:20px; background:var(--color-white); }
[data-main-con="banner01"] .item .tit dt 				{ font-size:2.5rem; font-weight:700; margin-bottom:25px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);}
[data-main-con="banner01"] .item .tit dd 				{ font-size:1.25rem; font-weight:500; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); }
[data-main-con="banner01"] .link  						{ margin-top:30px }
[data-main-con="banner01"] .link a 						{ position:relative; display:inline-block; padding:12px 50px 12px 20px; border:1px solid var(--color-white); border-radius: 5px; font-weight:500; background: rgba(0, 0, 0, .2);}
[data-main-con="banner01"] .link a:before  				{ content:''; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:14px; height:10px; background:url(/resource/stone/images/main/link_btn.png) no-repeat; }

[data-main-con="banner01"] .link a:hover,
[data-main-con="banner01"] .link a:focus  				{ background:rgba(24, 14, 94, .8); border:1px solid var(--color-black); }

/* notice */
[data-main-con="notice"]  								{ position:relative; }
[data-main-con="notice"] .title 						{ margin-bottom:1.875rem; }
[data-main-con="notice"] .title span 					{  }
[data-main-con="notice"] .title p 						{ font-size:2.5rem; font-weight:700 }
[data-main-con="notice"] .notice_more 					{ position: absolute; top:35px; left:170px}

[data-main-con="notice"] .list  						{ border-top:2px solid var(--color-black); border-bottom:2px solid var(--color-black); display:grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; padding:35px 0; position: relative;}
[data-main-con="notice"] .list li  						{ display:block; width:100%; min-width: 0;}
[data-main-con="notice"] .list li a   					{ display:flex; justify-content:space-between; align-items: center; gap:20px; width:100%; overflow: hidden; }
[data-main-con="notice"] .list li:not(:last-child)		{ border-right:1px solid var(--color-black); padding-right:20px}
[data-main-con="notice"] .list li span  				{ font-size:1.375rem; font-weight:700; flex: 1 1 auto; min-width:0;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
[data-main-con="notice"] .list li em  					{ flex-shrink:0; white-space: nowrap; margin:0 20px}

.icon_more												{ display:flex; align-items:center; justify-content:center; position:relative; width:40px; height:40px; border-radius:100%; background:var(--color-black); transition:var(--trans-ani);}
.icon_more::before										{ position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/stone/images/common/icon_more.svg) no-repeat 50% 50% / 14px; transition:var(--trans-ani); filter:invert(1);}
.icon_more:hover,
.icon_more:focus										{ transform:rotate(90deg); background:var(--color-point); border-color:var(--color-point) }

/* banner02 */
.shortcut_list   										{ display: grid; grid-template-columns: repeat(4, 1fr);  gap: 40px; }
.shortcut_list li 										{ padding: 30px 20px; border-top: 2px solid var(--color-black); border-bottom: 2px solid var(--color-black); position: relative; transition: background-color 0.3s;}
.shortcut_list li a 									{ display: block; position: relative; text-decoration: none; padding-right: 20px; }
.shortcut_list .text_wrap::after 						{ transition: transform 0.3s ease;}
.shortcut_list li a:hover .text_wrap::after 			{ transform: translateY(-50%) translateX(4px); }
.shortcut_list li a:hover span 							{ color: var(--color-point); }
.shortcut_list .text_wrap 								{ position: relative;}
.shortcut_list .text_wrap::after 						{ content: ''; position: absolute; top: 50%; right: -20px; width: 21px; height: 16px; transform: translateY(-50%); background: url('/resource/stone/images/main/icon_arrow.png') no-repeat center center; background-size: contain; pointer-events: none;}
.shortcut_list em 										{ display: block; margin-bottom: 6px;}
.shortcut_list span 									{ display: block; font-size: 1.875rem; font-weight: 700; word-break: keep-all;}





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

 							반응형

**********************************************************************/
@media all and (max-width:1868px){
    .visual												{ width:94%; max-width:1820px;}
    [data-main-con="banner01"] .banner_grid { grid-template-columns: repeat(2, 1fr); grid-gap: 60px; padding: 10px; }
}

@media all and (max-width: 1468px) {
    .shortcut_list 										{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .shortcut_list span 								{ font-size:1.563rem; }

    [data-main-con="banner01"] .banner_grid { grid-template-columns: repeat(2, 1fr); grid-gap: 60px;}
}


@media all and (max-width:1280px){
    .visual .title  									{ top:10%; left:5%; font-size:1.25rem; line-height:2.5rem;}
    .visual .title span  								{ font-size:2.5rem; }
    .visual .swiper_control  							{ left:5%}
}


@media all and (max-width:1024px){
    [data-main-con="banner01"] .banner_grid 			{ grid-template-columns: 1fr; grid-gap: 40px; padding: 5px;}
    [data-main-con="banner01"] .banner_grid .item 		{ padding: 40px 30px; min-height: auto;}

    [data-main-con="banner01"] .title dt 				{ font-size: 2.2rem; margin-bottom: 70px; }
    [data-main-con="banner01"] .title dd 				{ font-size: 1.125rem; line-height: 1.6rem; }
    [data-main-con="banner01"] .title:before 			{ height: 40px;}
    [data-main-con="banner01"] .title 					{ margin-bottom: 3rem; }

}
@media all and (max-width:968px){
    .visual .swiper-slide .img							{ padding-top:50%; }
    .visual .swiper_page i::after 						{ width:80px }

}

@media all and (max-width:768px){
    .visual .title  									{ line-height:1.375rem; font-size:1rem; }
    .visual .title span  								{ font-size:1.25rem; }
    .visual .swiper_control   							{ top:inherit; bottom:5% }

    .shortcut_list										{ grid-template-columns: 1fr;}
    .shortcut_list li  									{ padding:15px 10px }
    .shortcut_list span  								{ font-size:1.25rem; }

    [data-main-con]  									{ margin-top:3.125rem; margin-bottom:3.125rem; }
    [data-main-con="notice"] .list {grid-template-columns: 1fr; grid-gap: 20px; padding:20px 0}
    [data-main-con="notice"] .list li:not(:last-child)  { border-right:0; padding-right: 0; border-bottom: 1px solid var(--color-black); padding-bottom:20px;}
    [data-main-con="notice"] .list li span  			{ font-size:1.125rem; }

    [data-main-con="notice"] .title  					{ margin-bottom:1.25rem; }

    [data-main-con="notice"] .title p  					{ font-size:1.875rem;}
    [data-main-con="notice"] .notice_more  				{ top:23px; left:120px; }

    [data-main-con="banner01"] .banner_grid { grid-template-columns: 1fr; grid-gap: 30px; padding: 5px;}
    [data-main-con="banner01"] .banner_grid .item { padding: 30px 20px;}
    [data-main-con="banner01"] .title dt { font-size: 1.8rem; margin-bottom: 20px;}
    [data-main-con="banner01"] .title dd {  font-size: 1rem; line-height: 1.4rem;}
    [data-main-con="banner01"] .title:before {background:none;}
    [data-main-con="banner01"] .item .tit:before { background:none;}
    [data-main-con="banner01"] .item .tit dt { font-size: 1.75rem; margin-bottom:0}
    [data-main-con="banner01"] .item .tit dd { font-size: 1rem;}

    [data-main-con="banner01"] .title { margin-bottom: 2.5rem; }
}

@media all and (max-width:468px){
    .visual .swiper-slide .img							{ padding-top:55%; }
    [data-main-con="notice"] .list li em 				{ display:none; }

    [data-main-con="banner01"] .banner_grid { grid-template-columns: 1fr;grid-gap: 20px; padding: 3px;}
    [data-main-con="banner01"] .banner_grid .item { padding: 20px 15px; }
    [data-main-con="banner01"] .title { margin-bottom:2rem; }
    [data-main-con="banner01"] .title dt { font-size: 1.25rem; }
    [data-main-con="banner01"] .title dd { font-size: 0.9rem; line-height: 1.3rem;}
    [data-main-con="banner01"] .item .tit dt { font-size: 1.5rem; margin-bottom: 10px;}
    [data-main-con="banner01"] .item .tit dd { font-size: 0.9rem;}
}