@charset "utf-8";

.hyundai_btn {display:block; width:250px; line-height:59px; border:3px solid #0377bf; border-radius:5px; padding:0 50px; position:relative; font-size:1em; color:#0377bf; font-weight:500; text-align:left; transition:all 0.4s; transition-property:background, color;}
.hyundai_btn:before {content:'\f067'; font-size:1em; font-weight:400; font-family:'Font Awesome 5 Pro'; position:absolute; right:24px; top:0;}
.hyundai_btn:hover {background:#0377bf; color:#fff;}
.hyundai_btn.case2 {border-color:#fff; color:#fff;}
.hyundai_btn.case2:hover {border-color:#0377bf;}

.hyundai_btn2 {display:block; width:250px; line-height:65px; border-radius:5px; background:#0377bf; text-align:center; font-size:1em; color:#fff; font-weight:500; font-family:'Noto Sans KR'}
.hyundai_btn2.auto {margin:0 auto;}

@media screen and (max-width:1024px){
	.hyundai_btn {width:200px; line-height:49px; padding:0 20px;}
	.hyundai_btn:before {right:15px;}

	.hyundai_btn2 {width:200px; line-height:55px;}
}

@media screen and (max-width:767px){
	.hyundai_btn {width:170px; border-width:2px; line-height:45px; padding:0 13px;}

	.hyundai_btn2 {width:170px; line-height:49px;}
}


/* header */
#hyundai_header {width:100%; height:102px; background:#fff; position:absolute; left:0; top:0; z-index:300; transition:box-shadow 0.4s}
#hyundai_header .s-inner {position:relative;}
#hyundai_header .s-inner > div {float:right; position:relative; z-index:10;}

#hyundai_header .h_util {float:left; overflow:hidden; margin-right:40px;}
#hyundai_header .h_util > li {float:left;}
#hyundai_header .h_util > li:before {content:''; display:inline-block; width:1px; height:10px; background:#a4a4a4; vertical-align:middle; margin:0 15px;}
#hyundai_header .h_util > li:first-child:before {display:none;}
#hyundai_header .h_util > li > a {display:inline-block; font-size:0.75em; color:#666; line-height:102px;}

#hyundai_logo {float:left; width:77px; height:90px; background:url(../images/logo.jpeg) no-repeat center center; background-size:contain; margin-top:6px; position:relative; z-index:10;}
#hyundai_logo a {display:block; width:100%; height:100%;}

#hyundai_gnb {width:100%; position:absolute; left:0; top:0;}
#hyundai_gnb > ul {display:flex; justify-content:center;}
#hyundai_gnb > ul > li {float:left; display:flex; align-items:center; position:relative; text-align:center; height:102px;}
#hyundai_gnb > ul > li > a {display:block; font-size:1em; line-height:33px; font-weight:500; padding:0 25px; position:relative;}
#hyundai_gnb > ul > li > a:before {content:''; display:block; width:5px; height:5px; background:#0377bf; border-radius:50%; position:absolute; right:15px; top:50%; margin-top:2px; opacity:0; transition:opacity 0.3s;}
#hyundai_gnb > ul > li > ul {width:180px; background:#0377bf; position:absolute; top:90px; left:50%; margin-left:-90px; padding:20px 0; opacity:0; visibility:hidden; transition:all 0.3s; transition-property:opacity, visibility; border-radius:5px;}
#hyundai_gnb > ul > li > ul > li > a {display:block; font-size:1em; color:#fff; padding:7px 10px; line-height:1.5em; transition:background 0.15s}
#hyundai_gnb > ul > li > ul > li > a:hover {background:#02629d}
#hyundai_gnb > ul > li:hover a:before {opacity:1;}
#hyundai_gnb > ul > li:hover > ul {opacity:1; visibility:visible;}
#hyundai_gnb > ul > li.on > a:before {opacity:1; visibility:visible;}

#menuOpen {float:right; width:30px; height:20px; position:relative; margin-top:42px;}
#menuOpen span {display:block; width:100%; height:2px; background:#191919; position:absolute; right:0;}
#menuOpen span:nth-child(1) {top:0;}
#menuOpen span:nth-child(2) {width:calc(100% - 10px); top:50%; margin-top:-1px;}
#menuOpen span:nth-child(3) {bottom:0;}

#menuClose {width:20px; height:20px; position:absolute; top:40px; right:40px;}
#menuClose span {display:block; width:100%; height:2px; background:#666; position:absolute; left:0; top:50%;}
#menuClose span:nth-child(1) {transform:rotate(45deg)}
#menuClose span:nth-child(2) {transform:rotate(-45deg)}

#all_gnb {width:100%; background:#fff; position:fixed; left:0; top:0; z-index:20; transition:all 0.5s;}
#all_gnb > ul {width:calc(100% - 100px); overflow:hidden;}
#all_gnb > ul > li {float:left; width:33.33%; height:100vh; border-right:1px solid #ddd; padding-top:120px; position:relative;}
#all_gnb > ul > li:after {content:''; display:block; width:100%; height:100%; background:#353535; position:absolute; right:0; top:0; z-index:30; transition:width 0.6s;}
#all_gnb > ul > li > a {display:block; font-size:1.125em; line-height:1.5em; font-weight:500; padding:20px 50px; margin-bottom:10px; transition:color 0.15s}
#all_gnb > ul > li:hover > a {color:#0377bf;}
#all_gnb > ul > li > ul > li {position:relative;}
#all_gnb > ul > li > ul > li:before {content:''; display:block; width:0; height:100%; background:#0377bf; position:absolute; left:0; top:0; transition:width 0.4s;}
#all_gnb > ul > li > ul > li > a {display:block; font-size:1em; color:#666; line-height:1.5em; padding:15px 50px; position:relative; z-index:10; transition:color 0.15s;}
#all_gnb > ul > li > ul > li:hover:before {width:100%;}
#all_gnb > ul > li > ul > li:hover > a {color:#fff;}

.menuDim {display:none; width:100%; height:100%; background:#191919; opacity:0.7; position:fixed; left:0; top:0; z-index:18;}

#hyundai_header.scroll_on {position:fixed; box-shadow:0 0 10px rgba(25,25,25,0.1)}

@media screen and (min-width:1025px){
	#all_gnb {opacity:0; visibility:hidden; z-index:-10; transition-property:opacity, visibility, z-index;/* transition-delay:0.4s*/}

	#hyundai_header.on #all_gnb {opacity:1; visibility:visible; z-index:30; transition-delay:0s;}
	#hyundai_header.on #all_gnb > ul > li:after {width:0; transition-delay:0.2s}

	#all_gnb > ul > li > ul {display:block !important;}
}

@media screen and (max-width:1399px){
	#hyundai_header .h_sns {margin:0 30px 0 20px;}

	#hyundai_gnb > ul > li > a {padding:0 15px;}
	#hyundai_gnb > ul > li > a:before {right:7px;}

	#menuClose {top:30px; right:20px;}

	#all_gnb > ul {width:calc(100% - 60px)}
	#all_gnb > ul > li {padding-top:40px;}
	#all_gnb > ul > li > a {font-size:1em; padding:15px 20px; }
	#all_gnb > ul > li > ul > li > a {font-size:0.875em; padding:10px 20px;}
}

@media screen and (max-width:1199px){
	#hyundai_header .h_util > li:before {margin:0 10px;}

	#hyundai_header .h_sns > li {margin-right:10px;}

	#hyundai_gnb > ul {width:93%}
	#hyundai_gnb > ul > li > a {font-size:0.93em; padding:0 13px;}
	#hyundai_gnb > ul > li > a:before {right:3px;}
}

@media screen and (max-width:1024px){
	#hyundai_header {height:55px;}

	#hyundai_header .s-inner .h_util {display:none;}

	#hyundai_logo {width:39px; height:45px; margin-top:5px;}

	#hyundai_gnb {display:none;}

	#menuOpen {width:20px; height:16px; margin-top:22px;}
	#menuOpen span:nth-child(2) {width:calc(100% - 5px)}

	#menuClose {width:55px; height:55px; top:0; right:0; background:#0377bf;}
	#menuClose span {width:20px; background:#fff; left:50%; margin-left:-10px;}

	#all_gnb {width:240px; height:100vh; left:auto; right:-240px; transition-property:right; transition-delay:0s; opacity:1; visibility:visible;}
	#all_gnb > ul {width:100%; margin-top:54px; border-top:1px solid #ddd;}
	#all_gnb > ul > li {float:none; width:100%; height:auto; padding-top:0; border-right:0;}
	#all_gnb > ul > li:after {display:none;}
	#all_gnb > ul > li > a {font-size:1em; padding:13px 10px; border-bottom:1px solid #ddd; margin-bottom:0;}
	#all_gnb > ul > li > ul {display:none; padding:0; background:#f7f8f9}
	#all_gnb > ul > li > ul > li:before {display:none;}
	#all_gnb > ul > li > ul > li > a {font-size:0.93em; padding:13px 10px; border-bottom:1px solid #eee;}
	#all_gnb > ul > li > ul > li > a:hover {color:#191919;}
	
	#hyundai_header.on #all_gnb {right:0; transition-property:right;}
	#hyundai_header.on .menuDim {display:block;}

	#all_gnb .h_util {margin-left:10px; margin-top:10px;}
	#all_gnb .h_util > li > a {font-size:0.93em; color:#191919; line-height:30px; font-weight:400; font-family:'Noto Sans KR'}
}


/* footer */
#hyundai_footer {display:flex; justify-content:center; align-items:center; width:100%; height:100px; background:#222225; position:relative;}
#hyundai_footer .f_info li {display:inline-block; font-size:0.875em; color:#7e7e7e; line-height:2em; margin-right:10px;}
#hyundai_footer .f_info li strong {color:#a4a4a4; font-weight:700;}
#hyundai_footer .f_info li a {color:#7e7e7e;}
#hyundai_footer .copy {font-size:0.875em; color:#a4a4a4;}
#hyundai_footer .go_top {display:block; width:50px; line-height:50px; background:#0377bf; text-align:center; font-size:1em; color:#fff; position:absolute; right:40px; top:50%; transform:translateY(-50%)}

@media screen and (max-width:1399px){
	#hyundai_footer .go_top {right:6%;}
}

@media screen and (max-width:1024px){
	#hyundai_footer {height:50px;}
	#hyundai_footer .go_top {width:40px; line-height:40px;}
}

@media screen and (max-width:767px){
	#hyundai_footer {height:40px;}
	#hyundai_footer .go_top {width:30px; line-height:30px;}
}


/* main */
@media screen and (max-width:1024px){
	.main_content > div {height:auto !important;}
}

#mVisu {width:100%; height:100vh; padding-top:102px; position:relative;}
#mVisu .swiper-slide {background:#fff;}
#mVisu .txt_box {height:45%; min-height:400px; padding-top:90px; position:relative;}
#mVisu .txt_box h2 {font-size:3.75em; line-height:1.2em; font-weight:700; font-family:'S Dream'; margin:-25px 0 20px;}
#mVisu .txt_box .t1 {white-space:nowrap; font-size:4.7em; color:#fff; line-height:1em; letter-spacing:0; font-weight:900; font-family:'S Dream'; text-transform:uppercase; text-shadow: -1px -1px 0 rgb(3 119 191 / 25%), 1px -1px 0 rgb(3 119 191 / 25%), -1px 1px 0 rgb(3 119 191 / 25%), 1px 1px 0 rgb(3 119 191 / 25%);}
#mVisu .txt_box .t2 {font-size:1em; line-height:1.75em; font-weight:500;}
#mVisu .txt_box > div {position:absolute; right:0; top:223px;}
#mVisu .img_box {width:100%; height:55%; max-height:calc(100% - 400px); background-repeat:no-repeat; background-position:center center; background-size:cover;}
#mVisu .mVisu_slide {height:100%; position:relative;}
#mVisu .swiper-pagination {width:1364px; text-align:left; left:50%; bottom:0; top:327px; margin-left:-682px;}
#mVisu .swiper-pagination-bullet {width:50px; height:3px; border-radius:0; opacity:1; background:#dcdcdc;}
#mVisu .swiper-pagination-bullet-active {background:#0377bf;}

#mVisu .txt_box h2, #mVisu .txt_box .t1, #mVisu .txt_box .t2 {opacity:0; transform:translateY(60px);}
#mVisu .swiper-slide-active .txt_box h2, #mVisu .swiper-slide-active .txt_box .t1, #mVisu .swiper-slide-active .txt_box .t2 {opacity:1; transform:translateY(0); transition:all 1s; transition-property:opacity, transform;}

@media screen and (max-width:1399px){
	#mVisu .swiper-pagination {width:88%; left:6%; margin-left:0;}
}

@media screen and (max-width:1199px){
	#mVisu .txt_box h2 {font-size:3.5em;}
	#mVisu .txt_box .t1 {font-size:4em;}
}

@media screen and (max-width:1024px){
    #mVisu {padding-top:55px;}
	#mVisu .txt_box {min-height:330px; padding-top:70px;}
	#mVisu .txt_box h2 {font-size:3em; margin:-20px 0 2vw;}
	#mVisu .txt_box .t1 {font-size:3.7em;}
	#mVisu .txt_box > div {top:175px;}
	#mVisu .img_box {max-height:calc(100% - 330px);}
	#mVisu .swiper-pagination {top:260px;}
}

@media screen and (max-width:767px){
	#mVisu .txt_box {height:310px; min-height:0; padding:50px 0 70px;}
	#mVisu .txt_box h2 {font-size:2.2em; margin-top:-10px;}
	#mVisu .txt_box .t1 {font-size:2.2em;}
	#mVisu .txt_box > div {position:relative; top:0; margin-top:15px;}
    #mVisu .img_box {height:calc(100% - 310px); max-height:100%;}
	#mVisu .swiper-pagination-bullet {width:35px; height:2px;}
}


#mWith {width:100%; height:calc(100vh - 100px); background:url(../images/mWith_img1.jpg) no-repeat center center; background-size:cover; position:relative; overflow:hidden; padding-top:320px;}
#mWith:before {content:''; display:block; width:100%; height:100%; background:#2a2b32; opacity:0.5; position:absolute; left:0; top:0; z-index:1;}
#mWith h2 {position:absolute; right:-20px; bottom:0; z-index:2;}
#mWith .s-inner {position:relative; z-index:10;}
#mWith .t1 {font-size:2.875em; color:#fff; line-height:1.5em; font-weight:700; font-family:'S Dream';}
#mWith .t2 {font-size:1em; color:#fff; line-height:1.75em; font-weight:500; margin-top:15px;}
#mWith .btn_box {overflow:hidden; margin-top:50px;}
#mWith .btn_box .hyundai_btn {float:left; margin-right:10px;}
#mWith .btn_box .hyundai_btn:last-child {margin-right:0;}

@media screen and (max-width:1399px){
	#mWith h2 img {height:140px;}
}

@media screen and (max-width:1024px){
	#mWith {height:clac(100vh - 50px); padding-top:100px;}
	#mWith h2 {text-align:right;}
	#mWith h2 img {height:auto; width:70%;}
	#mWith .t1 {font-size:1.5em;}
	#mWith .t2 {margin-top:1vw;}
	#mWith .btn_box {margin-top:5%;}
	#mWith .btn_box .hyundai_btn {float:none; display:inline-block; margin-right:5px;}
}

@media screen and (max-width:767px){
    #mWith {height:calc(100vh - 40px); padding-top:150px;}
}

@media screen and (max-width:500px){
	#mWith .btn_box .hyundai_btn {width:45%;}
}



/* sub */
#sub_menu_wrap {width:100%; background:#0377bf; margin-top:102px;}
#sub_menu_wrap ul {overflow:hidden;}
#sub_menu_wrap ul li {float:left; font-size:0.875em; color:#fff; line-height:50px;}
#sub_menu_wrap ul li a {display:inline-block; color:#fff;}
#sub_menu_wrap ul li:after {content:'\f054'; font-size:0.71em; color:#6cb5e2; font-weight:300; font-family:'Font Awesome 5 Pro'; margin:0 20px;}
#sub_menu_wrap ul li:last-child:after {display:none;}

@media screen and (max-width:1024px){
	#sub_menu_wrap {margin-top:55px;}
	#sub_menu_wrap ul li {line-height:40px;}
	#sub_menu_wrap ul li:after {margin:0 10px;}
}


#sub_content {padding-top:70px; min-height:70vh;}

.sub_section {padding:100px 0;}
.sub_section.bg1 {background:#f7f7f8;}

.sub_title {margin-bottom:70px;}
.sub_title p {font-size:2.5em; color:#fff; line-height:1.3em; letter-spacing:0;; font-weight:900; font-family:'S Dream'; text-shadow:-1px -1px 0 rgb(3 119 191 / 25%), 1px -1px 0 rgb(3 119 191 / 25%), -1px 1px 0 rgb(3 119 191 / 25%), 1px 1px 0 rgb(3 119 191 / 25%); text-transform:uppercase;}
.sub_title h3 {font-size:2.5em; line-height:1.5em; font-weight:700; font-family:'S Dream'; margin-top:-25px; position:relative; z-index:10;}

.s_tit1 {font-size:1.5em; line-height:1.45em; font-weight:500;}

.s_txt1 {font-size:1em; color:#666; line-height:1.8em;}

@media screen and (max-width:1024px){
	#sub_content {padding-top:7%;}

	.sub_section {padding:10vw 0;}

	.sub_title {margin-bottom:7vw;}
	.sub_title p, .sub_title h3 {font-size:2.3em;}
	.sub_title h3 {margin-top:-20px;}

	.s_tit1 {font-size:1.3em;}

	.s_txt1 {line-height:1.7em;}
}

@media screen and (max-width:767px){
	.s_tit1 {font-size:1.125em;}
}


.sub_img_box1 {width:100%; height:350px; background-repeat:no-repeat; background-position:center center; background-size:cover; margin-bottom:50px;}

@media screen and (max-width:1220px){
	.sub_img_box1 {height:28vw;}
}

@media screen and (max-width:1024px){
	.sub_img_box1 {margin-bottom:5%;}
}


.sub_sns_box1 {display:flex; justify-content:center; width:100%; margin-top:70px;}
.sub_sns_box1 li {margin-right:50px; text-align:center;}
.sub_sns_box1 li:last-child {margin-right:0;}
.sub_sns_box1 li .icon {display:block; width:70px; height:70px; border-radius:10px; background-repeat:no-repeat; background-position:center center; background-size:contain; margin:0 auto;}
.sub_sns_box1 li .icon.kakao {background-color:#ffdd00; background-image:url(/images/icon_kakao.png)}
.sub_sns_box1 li .icon.band {background-color:#1bcc21; background-image:url(/images/icon_band.png)}
.sub_sns_box1 li .icon.hyundai {background-color:#01326d; background-image:url(/images/icon_hyundai.png)}
.sub_sns_box1 li p {font-size:1.125em; font-weight:500; margin-top:10px;}

@media screen and (max-width:1024px){
	.sub_sns_box1 {margin-top:7%;}
	.sub_sns_box1 li {margin-right:30px;}
	.sub_sns_box1 li .icon {width:55px; height:55px;}
	.sub_sns_box1 li p {font-size:1em; margin-top:5px;}
}

@media screen and (max-width:767px){
	.sub_sns_box1 li .icon {width:35px; height:35px; border-radius:5px;}
}


.sub_table_box1 {width:100%; border-top:2px solid #191919; border-collapse:collapse;}
.sub_table_box1 tbody th {width:300px; background:#fbfbfb; border-bottom:1px solid #ccc; font-size:1.125em; font-weight:500; text-align:center; padding:30px 0;}
.sub_table_box1 tbody td {border-bottom:1px solid #ccc; font-size:1em; color:#666; line-height:1.8em; padding:30px 50px;}
.sub_table_box1 tbody td .img_box {display:flex; align-items:center; width:100%; margin-bottom:30px;}
.sub_table_box1 tbody td .img_box:last-of-type {margin-bottom:0;}
.sub_table_box1 tbody td .img_box ul {padding-left:40px;}
.sub_table_box1 tbody td .img_box ul li span {color:#191919; font-weight:500;}
.sub_table_box1 tbody td .img_box ul li a {color:#666;}
.sub_table_box1 tbody td .list1 li {padding-left:22px; position:relative;}
.sub_table_box1 tbody td .list1 li:before {content:''; display:block; width:6px; height:6px; background:#0377bf; position:absolute; left:0; top:13px;}
.sub_table_box1 tbody td .kakao_link {color:#191919; font-weight:500; padding-left:45px; position:relative;}
.sub_table_box1 tbody td .kakao_link:before {content:''; display:block; width:30px; height:30px; background:#ffdd00 url(../images/icon_kakao.png) no-repeat center center; background-size:cover; border-radius:5px; position:absolute; left:0; top:50%; transform:translateY(-50%)}

@media screen and (max-width:1220px){
	.sub_table_box1 tbody th {width:230px;}
}

@media screen and (max-width:1024px){
	.sub_table_box1 tbody th {width:160px; font-size:1em; padding:15px 0;}
	.sub_table_box1 tbody td {padding:15px; line-height:1.7em;}
	.sub_table_box1 tbody td .img_box {margin-bottom:20px;}
	.sub_table_box1 tbody td .img_box.case1 img {height:40px;}
	.sub_table_box1 tbody td .img_box.case2 img {height:60px;}
	.sub_table_box1 tbody td .img_box ul {padding-left:20px;}
	.sub_table_box1 tbody td .list1 li {padding-left:15px;}
	.sub_table_box1 tbody td .list1 li:before {width:4px; height:4px; top:11px;}
	.sub_table_box1 tbody td .kakao_link {padding-left:35px}
	.sub_table_box1 tbody td .kakao_link:before {width:25px; height:25px;}
}

@media screen and (max-width:767px){
	.sub_table_box1 tbody th {width:115px;}
	.sub_table_box1 tbody td .img_box {display:block;}
	.sub_table_box1 tbody td .img_box.case1 img {height:30px;}
	.sub_table_box1 tbody td .img_box.case2 img {height:40px;}
	.sub_table_box1 tbody td .img_box ul {padding-left:0; margin-top:5px;}
	.sub_table_box1 tbody td .img_box ul li {margin-bottom:5px;}
	.sub_table_box1 tbody td .img_box ul li:last-child {margin-bottom:0;}
	.sub_table_box1 tbody td .img_box ul li a {display:block;}
	.sub_table_box1 tbody td .list1 li {padding-left:10px;}
	.sub_table_box1 tbody td .list1 li:before {width:3px; height:3px; top:9px;}
	
}