@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.inner{width: 94%; max-width:1600px; position: relative; margin-left: auto; margin-right: auto;}

.intro{background: url(/images/intro/intro_bg.webp) no-repeat center center / cover; min-height: 100vh;}
.intro .top{display: flex; align-items: center; justify-content: center; padding-top: 80px; position: relative; z-index: 9;}
.intro .top .l_cont{color: #fff; position: absolute; left: 0;}
.intro .top .l_cont p{font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.intro .top .l_cont h3{font-family: 'Poppins', 'SUIT', 'Noto Sans KR', sans-serif; font-size: 30px;}
.intro .top #logo{}
.intro .top #logo img{}
.intro .top .r_cont{position: absolute; right: 0;}
.intro .top .r_cont .sns{display: flex; gap:18px; margin-bottom: 25px;}
.intro .top .r_cont .sns li{}
.intro .top .r_cont .sns li a{}
.intro .top .r_cont .sns li a img{}
.intro .top .r_cont .lang{font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: #fff; position: relative; cursor: pointer; text-align: right;}
.intro .top .r_cont .lang .tit{cursor: pointer;}
.intro .top .r_cont .lang .tit::after{content: ''; width: 12px; height: 6px; background: url(/images/common/lang_arrow.webp) no-repeat center center / cover; display: inline-block; margin-left: 16px; filter: grayscale(1) brightness(10);}
.intro .top .r_cont .lang .list{text-align: center;display: none;position: absolute;background-color: #6454aa;width: 90px; right: 0; top: 32px;}
.intro .top .r_cont .lang .list li{}
.intro .top .r_cont .lang .list li a{display: block; padding: 10px 0; color: #fff;}
.intro .top .r_cont .lang .list li a img{max-width: 20px; margin-right: 5px;}
.intro .top .r_cont .lang .list li a:hover{background-color: #4d3c98;}
.intro .top .r_cont .lang > ul{display: none;}
.intro .top .r_cont .lang > ul li{}
.intro .top .r_cont .lang > ul li a{}

.intro .mid{ display: flex; gap:20px;}
.intro .mid li{width: 100%; height: 25vw; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; margin-top: 60px; transition: .4s; box-shadow: 0px 6px 20px rgba(0,0,0,0.1); min-height: 420px; max-height: 480px;}
.intro .mid li:hover{margin-top: 50px;}
.intro .mid li:nth-child(1){background-image: url(/images/intro/intro_bg1_pc.webp);}
.intro .mid li:nth-child(2){background-image: url(/images/intro/intro_bg2_pc.webp);}
.intro .mid li:nth-child(3){background-image: url(/images/intro/intro_bg3_pc.webp);}
.intro .mid li:nth-child(4){background-image: url(/images/intro/intro_bg4_pc.webp);}
.intro .mid li:nth-child(5){background-image: url(/images/intro/intro_bg5_pc.webp);}
.intro .mid li .txt{position: absolute; bottom: 0; width: 100%; text-align: center; padding: 50px 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25), rgba(0,0,0,0.4)); transition: .4s;}
.intro .mid li:hover .txt{padding: 60px 0;}
.intro .mid li .txt h3{font-size: 28px; color: #fff; margin-bottom: 20px;}
.intro .mid li .txt a{background-color: #6454aa; line-height: 38px; font-size: 16px; font-weight: 700; color: #fff; display: inline-block; padding: 0 30px; border-radius: 5px;}

.intro{}
.intro .bottom{margin-top: 65px;}
.intro .bottom .copy{text-align: center; color: #fff; font-size: 15px;}

.intro #google_translate_element,
.intro #goog-gt-tt{opacity: 1; visibility: hidden; height: 0; width: 0; text-indent: -9999px; position: absolute; left: -9999px; top: -9999px;}


@media all and (max-width:1280px){
	.intro .top{padding-top: 30px;}
	.intro .top .l_cont p{font-size: 15px; margin-bottom: 7px;}
	.intro .top .l_cont h3{font-size: 28px;}
	.intro .top .r_cont .sns{margin-bottom: 20px;}
	.intro .top #logo img{max-width: 160px;}
	.intro .mid{flex-wrap: wrap; margin-top: 50px; gap:0 20px; justify-content: center;}
	.intro .mid li{width: calc(100% / 3 - 40px / 3); margin-top: 20px; min-height: 0; height: 40vw;}
	.intro .mid li:hover{margin-top: 10px;}
	.intro .mid li .txt{padding: 40px 0;}
	.intro .mid li:hover .txt{padding: 50px 0;}
	.intro .mid li .txt h3{font-size: 25px; margin-bottom: 15px;}
	.intro .bottom{padding-bottom: 60px;}
}
@media all and (max-width:976px){
	.intro .top{justify-content: flex-start;}
	.intro .top .l_cont{display: none;}
	.intro .top #logo img{max-width: 120px;}
	.intro .mid{margin-top: 35px;}
	.intro .mid li{width: calc(100% / 2 - 20px / 2); margin-top: 20px; min-height: 0; height: 50vw;}
	.intro .mid li:hover{margin-top: 20px;}
	.intro .mid li .txt{padding: 30px 0;}
	.intro .mid li:hover .txt{padding: 40px 0;}
	.intro .mid li .txt h3{font-size: 22px; margin-bottom: 12px;}
	.intro .mid li .txt a{padding: 0 25px; font-size: 15px; line-height: 36px;}
	.intro .bottom{padding-bottom: 50px; margin-top: 40px;}
	.intro .bottom .copy{font-size: 14px;}
}
@media all and (max-width:640px){
	.intro .top .r_cont .sns{margin-bottom: 17px;}
	.intro .top #logo img{max-width: 100px;}
	.intro .mid{margin-top: 20px;}
	.intro .mid li{width: 100%; height: 40vw; border-radius: 10px;}
	.intro .mid li:nth-child(1){background-image: url(/images/intro/intro_bg1_mo.webp);}
	.intro .mid li:nth-child(2){background-image: url(/images/intro/intro_bg2_mo.webp);}
	.intro .mid li:nth-child(3){background-image: url(/images/intro/intro_bg3_mo.webp);}
	.intro .mid li:nth-child(4){background-image: url(/images/intro/intro_bg4_mo.webp);}
	.intro .mid li:nth-child(5){background-image: url(/images/intro/intro_bg5_mo.webp);}
	.intro .mid li .txt{height: 100%; width: 50%; right: 0; justify-content: center; flex-direction: column; display: flex; align-items: center; background: linear-gradient(to right, transparent, rgba(0,0,0,0.25), rgba(0,0,0,0.4));}
	.intro .mid li .txt h3{font-size: 20px;}
	.intro .mid li .txt a{line-height: 34px; font-size: 14px; padding: 0 22px;}
	.intro .bottom .copy{font-size: 13px;}
}



/* 수정 */
.intro_ver2{background: url(/images/intro/intro_bg.webp?v=1) no-repeat center center / cover; min-height: 100vh;}
.intro_ver2 .top{display: flex; align-items: center; padding: 140px 0 0; position: relative; z-index: 9;}
.intro_ver2 .top .l_cont{color: #fff; position: absolute; left: 0;}
.intro_ver2 .top .l_cont p{font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.intro_ver2 .top .l_cont h3{font-family: 'Poppins', 'SUIT', 'Noto Sans KR', sans-serif; font-size: 30px;}
.intro_ver2 .top #logo{}
.intro_ver2 .top #logo img{}
.intro_ver2 .top .r_cont{position: absolute; right: 0;}
.intro_ver2 .top .r_cont .sns{display: flex; gap:18px; margin-bottom: 25px;}
.intro_ver2 .top .r_cont .sns li{}
.intro_ver2 .top .r_cont .sns li a{}
.intro_ver2 .top .r_cont .sns li a img{}
.intro_ver2 .top .r_cont .lang{font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: #fff; position: relative; cursor: pointer; text-align: right;}
.intro_ver2 .top .r_cont .lang .tit{cursor: pointer;}
.intro_ver2 .top .r_cont .lang .tit::after{content: ''; width: 12px; height: 6px; background: url(/images/common/lang_arrow.webp) no-repeat center center / cover; display: inline-block; margin-left: 16px; filter: grayscale(1) brightness(10);}
.intro_ver2 .top .r_cont .lang .list{text-align: center;display: none;position: absolute;background-color: #6454aa;width: 90px; right: 0; top: 32px;}
.intro_ver2 .top .r_cont .lang .list li{}
.intro_ver2 .top .r_cont .lang .list li a{display: block; padding: 10px 0; color: #fff;}
.intro_ver2 .top .r_cont .lang .list li a img{max-width: 20px; margin-right: 5px;}
.intro_ver2 .top .r_cont .lang .list li a:hover{background-color: #4d3c98;}
.intro_ver2 .top .r_cont .lang > ul{display: none;}
.intro_ver2 .top .r_cont .lang > ul li{}
.intro_ver2 .top .r_cont .lang > ul li a{}

.intro_ver2 .qbtns{margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.intro_ver2 .qbtns a{display: block; padding: 10px 0; width: 32%; background-color: #2f245d99; color: #fff; text-align: center;}
.intro_ver2 .qbtns a p.eng{font-size: 14px; color: #cbbfff; opacity: 0.8;}
.intro_ver2 .qbtns a p.t1{font-size: 25px; font-weight: 600;}
.intro_ver2 .qbtns a:hover{background-color: #6b50dd;}

.intro_ver2 .qbtns div{position: relative; width: 32%;}
.intro_ver2 .qbtns div ul{position: absolute; width: 100%; display: none; z-index: 999;}
.intro_ver2 .qbtns div ul li{}
.intro_ver2 .qbtns div ul li a{background-color: #533ab8; display: block; padding: 20px 0; font-size: 17px; font-weight: 500;}

.intro_ver2 .qbtns.ver2 a{width: auto;}

.intro_ver2 .mid{ display: flex; gap:20px;}
.intro_ver2 .mid li{width: 100%; height: 25vw; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; margin-top: 30px; transition: .4s; box-shadow: 0px 6px 20px rgba(0,0,0,0.1); min-height: 420px; max-height: 480px;}
.intro_ver2 .mid li:hover{margin-top: 20px;}
.intro_ver2 .mid li:nth-child(1){background-image: url(/images/intro/intro_bg1_pc.webp?v=2);}
.intro_ver2 .mid li:nth-child(2){background-image: url(/images/intro/intro_bg2_pc.webp?v=1);}
.intro_ver2 .mid li:nth-child(3){background-image: url(/images/intro/intro_bg3_pc.webp?v=2);}
.intro_ver2 .mid li:nth-child(4){background-image: url(/images/intro/intro_bg4_pc.webp?v=2);}
.intro_ver2 .mid li:nth-child(5){background-image: url(/images/intro/intro_bg5_pc.webp?v=1);}
.intro_ver2 .mid li .txt{position: absolute; bottom: 0; width: 100%; text-align: center; padding: 50px 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25), rgba(0,0,0,0.4)); transition: .4s;}
.intro_ver2 .mid li:hover .txt{padding: 60px 0;}
.intro_ver2 .mid li .txt h3{font-size: 28px; color: #fff; margin-bottom: 20px;}
.intro_ver2 .mid li .txt a{background-color: #6454aa; line-height: 38px; font-size: 16px; font-weight: 700; color: #fff; display: inline-block; padding: 0 30px; border-radius: 5px;}

.intro_ver2{}
.intro_ver2 .bottom{margin-top: 20px; overflow: hidden;}
.intro_ver2 .bottom .l_cont{color: #fff; }
.intro_ver2 .bottom .copy{color: #fff; font-size: 15px; text-align: center;}
.intro_ver2 .bottom h3{font-family: 'Poppins', 'SUIT', 'Noto Sans KR', sans-serif; font-size: 30px;}
.intro_ver2 .bottom p{font-size: 16px; font-weight: 600; margin-bottom: 10px;}

.intro_ver2 #google_translate_element,
.intro_ver2 #goog-gt-tt{opacity: 1; visibility: hidden; height: 0; width: 0; text-indent: -9999px; position: absolute; left: -9999px; top: -9999px;}


@media all and (max-width:1280px){
	.intro_ver2 .top{padding-top: 100px;}
	.intro_ver2 .top .l_cont p{font-size: 15px; margin-bottom: 7px;}
	.intro_ver2 .top .l_cont h3{font-size: 28px;}
	.intro_ver2 .top .r_cont .sns{margin-bottom: 20px;}
	.intro_ver2 .top #logo img{max-width: 160px;}
	.intro_ver2 .mid{flex-wrap: wrap; margin-top: 50px; gap:0 20px; justify-content: center;}
	.intro_ver2 .mid li{width: calc(100% / 3 - 40px / 3); margin-top: 20px; min-height: 0; height: 40vw;}
	.intro_ver2 .mid li:hover{margin-top: 10px;}
	.intro_ver2 .mid li .txt{padding: 40px 0;}
	.intro_ver2 .mid li:hover .txt{padding: 50px 0;}
	.intro_ver2 .mid li .txt h3{font-size: 25px; margin-bottom: 15px;}
	.intro_ver2 .bottom{padding-bottom: 60px;}
}
@media all and (max-width:976px){
	.intro_ver2 .top{justify-content: flex-start;}
	.intro_ver2 .top .l_cont{display: none;}
	.intro_ver2 .top #logo img{max-width: 120px;}
	.intro_ver2 .mid{margin-top: 35px;}
	.intro_ver2 .mid li{width: calc(100% / 2 - 20px / 2); margin-top: 20px; min-height: 0; height: 50vw;}
	.intro_ver2 .mid li:hover{margin-top: 20px;}
	.intro_ver2 .mid li .txt{padding: 30px 0;}
	.intro_ver2 .mid li:hover .txt{padding: 40px 0;}
	.intro_ver2 .mid li .txt h3{font-size: 22px; margin-bottom: 12px;}
	.intro_ver2 .mid li .txt a{padding: 0 25px; font-size: 15px; line-height: 36px;}
	.intro_ver2 .bottom{padding-bottom: 50px; margin-top: 40px;}
	.intro_ver2 .bottom .copy{font-size: 14px;}

    .intro_ver2 .qbtns a p.eng{font-size: 13px; }
    .intro_ver2 .qbtns a p.t1{font-size: 20px;}

}
@media all and (max-width:640px){
	.intro_ver2 .top{padding-top: 70px;}
	.intro_ver2 .top .r_cont .sns{margin-bottom: 17px;}
	.intro_ver2 .top #logo img{max-width: 100px;}
	.intro_ver2 .mid{margin-top: 20px;}
	.intro_ver2 .mid li{width: 100%; height: 40vw; border-radius: 10px;}
	.intro_ver2 .mid li:nth-child(1){background-image: url(/images/intro/intro_bg1_mo.webp?v=2);}
	.intro_ver2 .mid li:nth-child(2){background-image: url(/images/intro/intro_bg2_mo.webp?v=1);}
	.intro_ver2 .mid li:nth-child(3){background-image: url(/images/intro/intro_bg3_mo.webp?v=2);}
	.intro_ver2 .mid li:nth-child(4){background-image: url(/images/intro/intro_bg4_mo.webp?v=2);}
	.intro_ver2 .mid li:nth-child(5){background-image: url(/images/intro/intro_bg5_mo.webp?v=1);}
	.intro_ver2 .mid li .txt{height: 100%; width: 50%; right: 0; justify-content: center; flex-direction: column; display: flex; align-items: center; background: linear-gradient(to right, transparent, rgba(0,0,0,0.25), rgba(0,0,0,0.4));}
	.intro_ver2 .mid li .txt h3{font-size: 20px;}
	.intro_ver2 .mid li .txt a{line-height: 34px; font-size: 14px; padding: 0 22px;}
	.intro_ver2 .bottom .copy{font-size: 13px;}

    .intro_ver2 .qbtns{flex-wrap: wrap;}
    .intro_ver2 .qbtns a{}
    .intro_ver2 .qbtns a p.eng{display: none;}
    .intro_ver2 .qbtns a p.t1{font-size: 17px;}
    .intro_ver2 .qbtns div ul li a{font-size: 14px; padding: 10px 0;}
}