@charset "utf-8";
/* common */
body{width:100%; height:100%; overflow:hidden;-webkit-text-size-adjust: 100%;}
.hidden{display:none;}
.show{display:block;}

/* header */
header{position:fixed; top:0; left:0; width:100%; font-size:20px; box-sizing:border-box; background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter: blur(20px);z-index:3;}
header .wrap{display:flex; width:90%; padding:7px 0 13px; margin:0 auto; flex-wrap:wrap; justify-content:space-between; align-items:center;}
header a{display:inline-block;}
header.other .btn_logo{visibility:hidden;}
header.other .language_area{visibility:hidden;}
.btn_logo .m .logo{width: 45px;height: 11px;}
.btn_logo .p{display:none;}

.mainSearch{display:flex; position:relative; width:90%; max-width:1200px; margin:0 auto; align-items:center; border-bottom:1px solid #000;}
.mainSearch input{width:100%; height:35px; padding:0 10px; border:none; outline:none; background-color:transparent; font-size:18px;}
.mainSearch .btn_search{margin-left:5px;}
.mainSearch .btn_search img{width: 14px;}

.subSearch{display:none; position:fixed; top:50px; left:0; width:100%; padding:24px 40px; margin-left:auto; border:1px solid #dddcdb; font-size:16px; box-sizing: border-box; background-color:#ccc; z-index:5;}
.subSearch input{width:100%; height:35px; padding:0 30px 0 15px; border:none; outline:none;}
.subSearch .btn_search_etc{position:absolute; top:28px; right:46px;}
.subSearch .btn_search_etc img{width:17px;}

.btn_search_all{display:block; margin-left:auto; margin-right:18px;}
.btn_search_all img{width:14px;}
.btn_search_close{display:none; width:14px; margin-left:auto; margin-right:20px; z-index:5;}

.btn_font{width:20px;}
.btn_nav{display:none; position:relative; width:20px; height:14px; padding:0px; margin-top:1px; margin-left:20px; background-color:transparent; cursor:pointer; text-align:center; border:none;}
.btn_nav span{display:block; width:100%; height:2px; position:absolute; background-color:#000;  transition: transform .15s;}
.lineT{top:0;}
.lineC{top:47%;}
.lineB{bottom:-1px;}

.btn_nav.other .lineT{top:50%; transform: rotate(45deg);  transition: transform .3s;}
.btn_nav.other .lineC{opacity:0; transition: transform .3s;}
.btn_nav.other .lineB{top:50%; transform: rotate(-45deg);  transition: transform .3s;}

.main_btn_nav{display:block;}
.btn_nav img{width:auto;}
.btn_home{width:20px;}
.btn_home svg{vertical-align:middle;}

.autocomplete-items{position:absolute; max-height:170px; box-sizing: border-box; outline:1px solid #dddcdb; overflow-y:auto; z-index:0;}
.subSearch .autocomplete-items{top:59px; left:40px; width:calc(100% - 80px); }
.mainSearch .autocomplete-items{top:35px; left:0px; width:100%; color:#333;}

.autocomplete-items div{padding:5px 15px; background-color: #fff; cursor:pointer;}
.autocomplete-items div:hover{background-color: #e7ebf5;}
.autocomplete-items .autocomplete-active{background-color:#e7ebf5;}

.autocomplete-items::-webkit-scrollbar{width: 15px;background: #ccc;}
.autocomplete-items::-webkit-scrollbar-thumb{background: #05141f;}

.on .subSearch{display:block;}
.on .btn_search_all{display:none;}
.on .btn_search_close{display:block;}
.on .btn_font{margin-top:0px;}
.btn_nav.on{display:block;}



/* nav */
nav{display:none; position:fixed; top:0; width:100%; height:100%; background:#e7e7e7; z-index:30;}
.nav_header{position:relative; height:50px; border-bottom:1px solid #e5e5e5; background: #fff;}
.nav_header .wrap{display:flex; width:90%; height:100%; margin: 0 auto;flex-wrap: wrap; justify-content: space-between; align-items: center;}
.nav_header .btn_close{width:14px; height:14px; margin-left:auto;}
.nav_header .btn_close img{vertical-align: top;}
.nav_body{position:relative; height:calc(var(--vh, 1vh) * 100  - 50px);}
nav #view_container{width:90%; height:93%; overflow-y:scroll; position:absolute; left:5%; bottom:4%;}
nav #id_toc1{display: grid;grid-template-columns: repeat(1, 1fr);grid-template-rows: minmax(auto, auto); gap:50px 20px;}
nav .toc-sect .toc-sect{display:none;}
nav .toc-chap a{pointer-events: none; cursor: default;}

nav.on{display:block;}
nav.other{display:block; margin-top:50px;}
nav.other .nav_header{display:none;}

#top_kind_toc{display:flex; width:100%; height:60px; padding:0 30px; justify-content:flex-end; border-bottom: 2px solid rgba(0, 0, 0, 0.8);}
.toc_close{order:2; width:15px; background:url("../images/btn_close.png") center center no-repeat; background-size:100% auto; cursor:pointer;}
.toc_search{order:1; width:15px; margin-right:30px; background:url("../images/btn_search.png") center center no-repeat; background-size:100% auto; cursor:pointer;}

.toc-chap{padding: 18px 15% 18px 20px; word-wrap: break-word; color: #333; font-size:16px;}
.toc-chap:first-child{padding-top: 0;border-top: 0 !important;}
nav .toc-chap a.borderOn{border-bottom: 3px solid #000;}
nav ul.toc-sect li{padding-bottom:12px;}
nav ul.toc-sect li a{padding: 0 15% 0 20px; font-weight: normal;display: block;word-wrap: break-word;color:#333; line-height:1.4; font-size: 16px; -webkit-tap-highlight-color:transparent;}
nav ul.toc-sect li a:hover{-webkit-tap-highlight-color: transparent; text-decoration: none; color: #05141f; font-weight: bold;}
nav ul.toc-sect li a:visited{text-decoration: none;}



/* layout */
.conWrap{position:relative; display:flex; width:100%;}
.leftWrap{display: none; position:relative; width:300px; height:calc(var(--vh, 1vh) * 100  - 149px); margin-top:70px;}
.leftWrap::before{content:''; display:block; position:absolute; top:0; width:100%; height:50px; background:rgba(231, 231, 231, 0.95); ;}
.rightWrap{position:relative; width:100%; height:calc(var(--vh, 1vh) * 100);}
.centerWrap{width:100%; padding-top:100px;}



/* section header */
#scroll_nav{position:fixed; top:50px; width:100%; height:50px; background:rgba(231, 231, 231, 0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter: blur(20px);z-index:2;}
#scrollmask {position:relative; display:flex; width: 90%; height:100%; align-items:center; margin:0 auto; overflow:hidden;}
.btn_back{display:block; width:16px; margin-top:-2px;}
#chapter {padding-right:5px; margin-left:12px; line-height:1.5;overflow:hidden; white-space:nowrap; cursor:default;margin-right: 1px;}


/* section nav */
.leftWrap #view_container{position:relative; width:300px; height:calc(var(--vh, 1vh) * 100  - 199px); margin-top:50px; border-right: 1px solid #eee; overflow-y:scroll; background: #fff;  z-index:1;}
.leftWrap #id_toc1 ul li {margin-bottom:0;}
.leftWrap .toc-chap {clear:both; position:relative; padding:18px 60px 18px 40px; margin-top:0; font-weight:normal; line-height:26px; font-size:14px; border-bottom: 1px solid #f6f3f2; background:url("../images/btn_but1.png") no-repeat; background-size:15px auto; background-position:right 28px top 50%;}
.leftWrap .chapter_text2{font-size:16px; line-height:1; color: #000;}
.leftWrap .toc-sect{padding:10px 0; color:#333; background:#e7e7e7;}
.leftWrap .toc-sect li a {display:block; position:relative; padding:7px 60px 8px 40px; line-height: 1.3; font-size:16px; word-wrap:break-word;}
.leftWrap .toc-chap.on{background:#05141f url("../images/btn_but2.png") no-repeat; background-size:15px auto; background-position:right 28px top 50%;}
.leftWrap .toc-chap.on2{background:#05141f url("../images/btn_but3.png") no-repeat; background-size:15px auto; background-position:right 28px top 50%;}
.leftWrap .toc-chap.on span{color:#fff; }
.leftWrap .caution_txt{line-height:1.4; padding:18px 20px 50px; font-size:14px;}



/* section body */
.swipe_inner_wrap{position:relative; width: 90%; margin: 0 auto;}
div.Heading2:last-of-type{padding-bottom:100px;}
div.Heading2-Safety:last-of-type{padding-bottom:100px;}
div.Heading2-HyundaiUSA:last-of-type{padding-bottom:100px;}
#wrapper{position:relative; width:100%; max-width:100%; height:calc(var(--vh, 1vh) * 100); background-color:#fff; overflow:hidden;}
#root{position:relative; width:100%; height:calc(var(--vh, 1vh) * 100); padding-top:100px; margin:0 auto; overflow-y:auto; }
.oneWrap{min-height:calc(var(--vh, 1vh) * 100  - 168px);}



/* footer */
footer{width:100%; background:#262626; z-index:2;}
footer .wrap{padding:19px 0 20px; text-align:center; background:#05141f;} 
footer p{min-height:29px; padding:0; font-size:11px; color:#fff;}
footer .logo_footer{width:auto; height:17px; margin-bottom:8px;}
footer .copyright span{display:block; line-height:1.3;}



/* article */
.mask{display:none; position:fixed; top:50px; left:0; width:100vw; height:calc(var(--vh, 1vh) * 100); overflow:hidden; background:rgba(0, 0, 0, 0.7);  z-index:2;}
.mask.on{display:block;}
#count{display:none; position:absolute; left:18px; height:40px; line-height:49px; font-size:16px; color:#fff;}
.type_a .btn_page{display:inline-block; width:10px; height:10px; margin:5px 8px; border-radius:10px; letter-spacing:0; color:#CCC; background:#ccc; overflow:hidden;}
.type_a .btn_page.on{width:10px; height:10px; letter-spacing:0.1px; color:#bb162b; background:#bb162b; }
.type_b .btn_page{display:inline-block; width:8px; height:8px; margin:6px 3px; border-radius:10px; letter-spacing:0; color:#CCC; background:#ccc; overflow:hidden;}
.type_b .btn_page.on{width:8px; height:8px; letter-spacing:0.1px; color:#bb162b; background:#bb162b;}

.btn_top{display:none; position:fixed; bottom:88px; right:20px; width:52px; z-index:2;}
.btn_top span{display:none;}
.btn_top .m{display:block;}
.btn_top img{border-radius: 50%; background-color: rgba(204, 204, 204, 0.6);}

.btn_menu{position:fixed; bottom:20px; right:20px; width:52px; z-index:1;}
.btn_page a{position:fixed; top:50%; width:44px; margin-top:-16px; opacity:0.7; z-index:2;}
.btn_prev{left:10px; animation: moveL 0.4s ease;}
.btn_next{right:10px; animation: moveR 0.4s ease;}

.settingBox{display:none; position:absolute; top:50%; left:50%; width:74%; padding:20px 30px 30px; transform:translate(-50%, -50%); background-color:#fff; z-index:3;}
.settingBox.on{display:block;}

.settingBox .settingHeader{display:flex; justify-content: space-between;}
.settingBox .setting_title{font-weight:bold; font-size:20px;}
.settingBox .btn_font_close{display:inline-block; width:17px;}
.settingBox .settingBody{border-top:2px solid #7c8191; border-bottom:2px solid #7c8191;}
.settingBox .fontBox{padding:10px 20px 20px; border-bottom:1px solid #ccc;}
.settingBox .lineBox{padding:10px 20px 20px;}
.settingBox p{margin-bottom:8px; font-size:16px;}
.settingBox .setting_input{display:flex; align-items: center;}
.settingBox .setting_input img{width:auto; height:20px; margin-top:-3px;}

.alertBox{display:none; position:fixed; top:50%; left:50%; max-width:360px; width:90%;min-width:300px; padding:20px; transform:translate(-50%, -50%);  background-color:#fff; z-index:3;}
.alertBox.on{display:block;}
.alertBox p{margin-bottom:20px;}
.alertBox a{float:right; display:inline-block; color:rgb(0, 170, 210);}


input[type=range] {width:75%;  line-height: 100%; margin: 0 auto;}
input[type=range]::-webkit-slider-runnable-track {height:15px; border-radius:15px; background-color: #ddd;}
input[type=range]::-webkit-slider-thumb {position:relative; width:15px; height:15px; border-radius:50%; background:#132b5f; appearance: none;}

@keyframes moveL {
	from {left:-40px;}
	to {left:10px}
}

@keyframes moveR {
	from {right:-40px;}
	to {right:10px}
}

@media screen and (min-width:480px) {	
	.logo{width:auto; height:21px;}
	header .wrap{height:70px; padding:14px 0 19px;}
	header .btn_logo .m{display:none;}
	header .btn_logo .p{display:inline-block;}	
	.toc-chap{font-size:20px;}
	.subSearch{top:70px;}
	.settingBox{width:450px; padding:30px 50px 40px; top:288px; animation: moveUp 0.3s ease;}
	.settingHeader{padding-bottom:12px;}
	.settingBox .fontBox{padding:30px;}
	.settingBox .lineBox{padding:30px;}
	nav.other{margin-top:70px;}
	.nav_header{height:70px;}
	.nav_header .btn_close{width: 19px;height: 19px;}
	.nav_body{height:calc(var(--vh, 1vh) * 100  - 70px)}

	.mainSearch .btn_search img{width: 16px;}

	.rightWrap{height:calc(var(--vh, 1vh) * 100  - 87px);}
	.oneWrap{min-height:calc(var(--vh, 1vh) * 100  - 211px);}
	#scroll_nav{top:70px;}
	#root{padding-top:120px;}

	footer .wrap{padding:36px 0 37px;}
	footer .logo_footer{height:25px; margin-bottom:12px;}	
	footer .copyright span{display:inline-block;}
	footer p{min-height:18px; font-size:12px;}
	
	.mask{top:70px;}
	input[type=range] {width: 80%;}

	@keyframes moveUp {
		from { top:320px; }
		to { top:288px; }
	}
}

@media screen and (min-width:768px) {	
	.swipe_inner_wrap{width:95%;}
	header .btn_nav{display:block;}	
	#scrollmask{width:95%;}

	.mainSearch{width:95%;}
	.subSearch{display:block; position:relative; top:2px; left:10px; width:0; padding:0; background-color:inherit; }
	.subSearch input{display:none; width:calc(100% - 60px);}	
	.subSearch .btn_search_etc{display:none; top:4px; right:35px;}
	.subSearch .autocomplete-items{top:36px; left:0; width:100%;}

	header.on .subSearch{width:375px; height:37px; padding:0; margin-right:-35px; border:1px solid #dddcdb; transition: width 0.3s ease-in-out;}
	header.on .subSearch input{display:block}
	header.on .subSearch .btn_search_etc{display:block; transition: right 0.1s ease-in-out;}
	header.on .btn_search_close{margin-left:20px;}
	.settingBox{top:110px; left:auto; right:4%; transform:none;}

	.btn_page a{width: 52px;}

	nav #id_toc1{grid-template-columns: repeat(3, 1fr)}

	.oneWrap{min-height:calc(var(--vh, 1vh) * 100  - 200px);}
	.btn_menu{display:none}
	.btn_top{bottom:12px; right:12px; width:60px; }
	.btn_top .m{display:none;}
	.btn_top .p{display:block;}

	footer .wrap{padding:31px 0;}

	@keyframes moveUp {
		from { top:140px; }
		to { top:110px; }
	}
}



@media screen and (min-width:900px) {
	header .wrap{width:100%; padding:14px 40px 19px;}
	.nav_header .wrap{width:100%; padding:0 40px;}

	.btn_prev{left:310px;}
	.leftWrap{display: block;}	
	.rightWrap{width:calc(100% - 300px);  padding-bottom:79px;}
	#scrollmask{width: 100%; padding-left:15%;}
	#root{padding-right:20%; padding-left:20%;}
	div.Heading2:last-of-type{padding-bottom:130px;}
	div.Heading2-Safety:last-of-type{padding-bottom:130px;}
	div.Heading2-HyundaiUSA:last-of-type{padding-bottom:130px;}

	
	footer{position:relative; left:0; bottom:0;}

	@keyframes moveL {
		from {left:270px;}
		to {left:310px}
	}
}

@media screen and (min-width:1024px) {
	nav #view_container{padding:1% 5% 2% 7%;}
	nav #id_toc1{grid-template-columns: repeat(4, 1fr); gap:30px;}
	.swipe_inner_wrap{width:100%;}
	#scrollmask{padding-left:15.5%;}
}


@media screen and (orientation: landscape) and (max-height: 412px) {
	.mask{z-index:2;top: 0;}
	.settingBox{display:none; position:absolute; top:50%; left:50%; width:50%; max-width:400px;padding:20px 30px 20px; transform:translate(-50%, -50%); background-color:#fff; z-index:3;height:calc(var(--vh, 1vh) * 100  - 80px);animation: none;}
	.settingBox .fontBox,
	.settingBox .lineBox{padding: 18px 30px;}
	.settingBox p{margin-bottom: 0;}
}