@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css?family=SUIT');
/*

img{width:100%;}
body { font-weight: 400; color:#333;padding:0; margin:0; font-size:18px; letter-spacing: -1px; height:100%; font-family: 'SUIT', sans-serif, 'Noto Sans KR', sans-serif; background:#ffffff;min-width:320px;-webkit-text-size-adjust: none; }
body.is_hidden{overflow:hidden}
html, h1, h2, h3, h4, h5, h6, form, fieldset, td, tr, table ,tbody {margin:0;padding:0;border:0; border-spacing: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
label, input, button, select {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=submit] {cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {-webkit-appearance:none}
textarea, select {font-size:1em;}
textarea {border-radius:0;-webkit-appearance:none}
select{background:#fff}
p {margin:0;padding:0;}
hr {display:none;}
button {background-color:unset; border:0; }
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {text-decoration:none;}
ul,li,dl,dt,dd {padding:0;margin:0; list-style: none;}
ul {list-style:none;}
*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
} */


.clear::after{content:""; display:table; clear:both;}
.suit_en{letter-spacing: normal;}
.digital_youtube_ref_index .section{width:100%; padding-bottom:160px;}
.digital_youtube_ref_index{width:100%; height: 100%; font-size: 1.8rem; background-color: #111124; color:#ffffff;}
.digital_youtube_ref_index .main_banner{width:100%; ;padding-top:90px;}
.digital_youtube_ref_index .main_banner_img{ margin:0 auto; width:100%; max-width: 690px; text-align: center; }
.digital_youtube_ref_index .main_banner_tit{ margin:0 auto; width:100%; max-width: 1024px; text-align: center; padding:40px 0;}
.digital_youtube_ref_index .main_banner_tit h4{font-size: 2.4rem;  color:#b9afe5;}
.digital_youtube_ref_index .main_banner_tit h1{font-weight: 800;  font-size: 4rem; padding:20px 0; line-height: 1.4;
 background: linear-gradient(170deg, #00ffea 5%, hsl(278, 100%, 63%) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.digital_youtube_ref_index .main_banner .contact_btn{ width:90%; max-width: 240px; display: block; padding:15px 30px; background-color:#333333; border-radius: 100px;  margin-top:40px;}
.digital_youtube_ref_index .main_banner .contact_btn a{color:#ffffff;}
.digital_youtube_ref_index .section01{max-width: 1024px; margin:0 auto;}
.digital_youtube_ref_index .section01_tit{width:30% !important; padding-top:80px;}
.digital_youtube_ref_index .section_con{width:70% !important; margin:0 auto;}
.digital_youtube_ref_index .section_img{width:100%; max-width: 360px; margin:10px auto;}
.digital_youtube_ref_index .section01 h3{font-size: 3.4rem; line-height: 1.2; color:#b9afe5;}
.digital_youtube_ref_index .section01 h5{font-size: 2.2rem;}
.digital_youtube_ref_index .callme{padding:60px 0 100px; line-height: 1.8; border-top:2px solid rgb(57, 45, 99); margin-top:40px;
width:100; max-width: 1024px;}
.hover-effect-container {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 그림자 효과를 줘서 입체감을 더한다. */
    /* perspective는 관찰자와 객체 사이의 거리를 설정하여 3D 변형에 깊이감을 준다. */
    perspective: 1000px;
    transition: transform 0.2s ease-out;
    /* 이미지의 기본 변형 상태: 초기에는 아무런 변형을 주지 않는다. */
    transform:
        scale(1)
        rotateX(0deg)
        rotateY(0deg);
}

/* 3. 이미지 기본 스타일 및 변형 설정 */
.hover-effect-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 컨테이너에 꽉 차게 만든다. */
    display: block;

    /* 트랜지션 설정: 모든 변화(확대, 기울임)가 0.4초 동안 부드럽게 일어나게 한다. */
    transition: transform 0.2s ease-out;

    /* 이미지의 기본 변형 상태: 초기에는 아무런 변형을 주지 않는다. */
    transform:
        scale(1)
        rotateX(0deg)
        rotateY(0deg);
}
.hover-effect-container:hover{
    transform:
        scale(1.1)
        rotateX(-5deg)
        rotateY(-12deg);
}
.digital_youtube_ref_index .section_img p{ color:#b9afe5; font-size: 1.6rem; text-align: center; padding:10px 0;}
.digital_youtube_ref_index .section_img h6{ float:right; color:royalblue; font-size: 1.4rem; display: inline-block; background-color: #000000; padding:2px 6px; border-radius: 3px; margin-bottom:5px;}




.digital_youtube_ref_index .glass{backdrop-filter:saturate(180%) blur(5px);  background:rgba(235, 248, 255, 0.5);
 border-radius: 10px;  padding:16px 28px; border:0; justify-content: space-between; display: flex; align-items: center; text-align: center;}
.digital_youtube_ref_index .glass a{margin-left:20px;}
.digital_youtube_ref_index .sticky{position:fixed; z-index: 111; left:50%; transform: translateX(-50%); bottom:40px; border:1px solid#f2f2f2;
border-radius: 10px; box-sizing: border-box;}



@media (max-width: 960px) {

.digital_youtube_ref_index .layout2{width:90%; }
}

@media (max-width: 767px) {
.digital_youtube_ref_index .section{ padding-bottom:100px;}
.digital_youtube_ref_index .section01_tit{width:100% !important; padding-top:20px; margin:0 auto; text-align: center;}

}

@media (max-width: 480px) {
    .digital_youtube_ref_index .main_banner_tit h1{font-size: 3.2rem;}
    .digital_youtube_ref_index .main_banner_tit h4{font-size: 2rem;}
    .digital_youtube_ref_index .callme{width:95%;}
    .digital_youtube_ref_index .section_con{width:inherit !important;}
}