@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
* { margin:0px; padding:0px; box-sizing: border-box; }

html{ font-size:18px; height:100vh; }
body {
	font-family: 'Noto Sans KR', sans-serif; font-size:0.78rem; width:100%; display:flex; align-items:center; flex-direction:column; 
	background:#fff;
}
ol, ul { list-style: none; }
a {color:inherit;}
a, a:hover, a:active, a:focus {text-decoration: none;}
em, address { font-style: normal;}
img {vertical-align: top;}
button { border:0; outline:0; background:none; cursor:pointer; font:inherit; user-select: none;}
input::-ms-clear { display:none; } 
input::placeholder { color:#9F9F9F; }
input{ width:100%; height:100%; outline: none; border: 0px; background:transparent; touch-action:none; }
input:focus::placeholder { color:transparent; }
input[type="file"] { position:absolute; overflow:hidden; clip:rect(0,0,0,0); }
input[type=range] {-webkit-appearance:none; width:100%; height:100%; background:transparent; cursor:pointer; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; opacity:0;}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px white inset; }

.popup{ position:fixed; display:none; width:100%; height:100%; left:0; z-index:110; }
.popup > div{ position:absolute; }
.popup > .background{ position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); cursor:pointer; pointer-events: none; }
.popup > .layer { position:absolute; background:#fff; overflow:auto; }
.popup > .layer > form { width:100%; height:100%; }
.popup.show{ display:inline-block; }
.popup.show > .background{ animation: fadein 0.2s;  }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }

.loading { position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; color:#fe8130; font-size:10px; }
.loading  > div { position:absolute; width:80px; height:80px; display:flex; justify-content:center; align-items:center; } 
.loading::after{ content: ""; position:absolute; width:80px; height:80px; border-radius: 50%; border: 2px solid transparent; border-color: transparent #fe8130; animation: rotateloading 1.5s linear 0s infinite normal; }
@keyframes rotateloading { 0%{ transform: rotate(0deg); transform-origin: 50% 50%;} 100%{ transform: rotate(360deg); transform-origin: 50% 50%;} } 

.ic_close{ position:relative; width:24px; height:24px; cursor:pointer; display:flex; justify-content:center; align-items:center; transition-duration: 0.5s; }
.ic_close::after{ content:""; position:absolute; width:2px; height:100%; background: var(--bg); transform: rotate(45deg); }
.ic_close::before{ content:""; position:absolute; width:2px; height:100%; background: var(--bg); transform: rotate(-45deg); }
.ic_close:hover{ transform: rotate(360deg); }

.ic_hamberg { position:relative; width:var(--s, 30px); height:var(--s, 30px); cursor:pointer; }
.ic_hamberg > i { position:absolute; width:20px; height:2px; background:var(--bg, #ccc); left:50%; transform:translate(-50%, -50%); transition: all 0.2s ease; }
.ic_hamberg > i:nth-child(1) { top:calc(0% + 5px); }
.ic_hamberg > i:nth-child(2) { top:50%; }
.ic_hamberg > i:nth-child(3) { top:calc(100% - 5px); }

.ic_hamberg.on > i:first-child{ top:50%; left:50%; transform:translate(-50%, -50%) rotate(45deg); }
.ic_hamberg.on > i:nth-child(2){ top:50%; left:50%; transform:translateX(-50%, -50%); opacity:0; }
.ic_hamberg.on > i:last-child{ top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); }

.ic_arrow { position:relative; cursor:pointer;}
.ic_arrow::after { content:""; position:absolute; top:-2px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(45deg); }
.ic_arrow::before { content:""; position:absolute; top:2.5px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(-45deg); }

.ic_arrow_left { position:relative; cursor:pointer;}
.ic_arrow_left::after { content:""; position:absolute; top:-3px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(-45deg); }
.ic_arrow_left::before { content:""; position:absolute; top:3px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(45deg); }

/********************************************************/
.inputbox{ overflow:hidden; position:relative; width:100%; height:50px; }
.inputbox input{ width:100%; height:100%; padding-top:20px; border: none; outline:none; }
.inputbox label{ position:absolute; bottom:0px; left:0px; width:100%; height:100%; pointer-events: none; border-bottom: 1px solid #CCCCCC; }
.inputbox label::after{ content:""; left:0px; bottom:-1px;  position:absolute; width:100%; height:100%; border-bottom: 3px solid #1574aa; transform: translateX(-100%); transition: transform 0.3s ease; }
.inputbox .content_name { position:absolute; bottom:5px; left:0px; transition: all 0.3s ease; }
.inputbox input:focus + .label_name .content_name, .inputbox input:valid + .label_name .content_name { transform: translateY(-120%); font-size:12px; color:#3f63ad; }
.inputbox input:focus + .label_name::after, 
.inputbox input:valid + .label_name::after { transform: translateX(0%); }

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset;
}
/********************************************************/
input::placeholder{ color:transparent; }
input:focus::placeholder { color:#cccccc; }

.sub04_d01_select.selecthidden { display:none; visibility:hidden; }
.sub04_d02_select.selecthidden { display:none; visibility:hidden; }

/********************************************************/
.select_A { display:inline-block; position:relative; width:100%; height:100%; cursor:pointer; }

.select_A .styled { position: absolute; top:0; right:0; bottom:0; left: 0; background: #FFFFFF; display:flex; justify-content:flex-start; align-items:center; text-indent: 15px; transition: all 0.2s ease-in; }
.select_A .styled:after { content: ""; position: absolute; right:10px; width:6px; height:6px; 
	transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); border: 1px solid transparent;
	border-color: transparent transparent #000000 #000000; transition: all 0.2s ease-in;
}
.select_A .styled:hover { background: #FFFFFF; }
.select_A .styled:active, .styled.active { background: #FFFFFF; }
.select_A .styled:active:after, .styled.active:after { margin-top:4px; transform:rotate(-225deg); -webkit-transform:rotate(-225deg); -ms-transform:rotate(-225deg); }

.select_A .options {
	display: none;
	position: absolute;
	top: calc(100%);
	right: 0;
	left: 0;
	z-index: 999;
	margin: 0;
	padding: 0;
	max-height:300px; 
	overflow:auto;
	list-style: none;
	background: #FFFFFF;
	border-top: 3px solid #1574aa;
	border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	
}
.select_A .options li {
	margin: 0;
	padding: 10px 0;
	text-indent: 15px;
	border-top: 1px solid #FFFFFF;
	transition: all 0.15s ease-in;
	font-weight:300;
}
.select_A .options li:hover { font-weight:bold; }
.select_A .options li[rel="hide"] { display: none; }

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


::-webkit-scrollbar {
    width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(77, 94, 171,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(77, 94, 171, 0.4); 
}

section{ position:relative; width:100%; max-width:1120px; padding:20px; }

.quickmenu { position:absolute; top:100px; right:-170px; }
.quickmenu > ul > li { position:relative; width:170px; height:40px; padding-left:10px; }
.quickmenu > ul > li:first-child { height:100px; }
.quickmenu > ul > li a { width:100%; height:100%; display:flex; align-items:center; font-size:16px; }
.quickmenu > ul > li button { width:100%; height:100%; display:flex; align-items:center; font-size:16px; }

.quickmenu .link1 { border-radius:5px; color:#000; background:pink; display:flex; justify-content:center; align-items:center; }
.quickmenu .underline { border-bottom: 1px solid #ccc; }

.top { display:flex; margin-top:50px; }
.top .title { font-size:20px; font-weight:bold; }
.contectus{ display:flex; align-items:center; }
.contectus > div:nth-child(1){ font-size:18px; }
.contectus > div:nth-child(2){ font-size:30px; font-weight:bold; margin-left:30px; }

h1 { position:relative; margin-top:50px; font-size:34px; font-weight:bold; }
h1 > a { position:absolute; right:0; top:0; width:200px; height:40px; border-radius:5px; background:#4375c0; color:#fff; font-size:14px; display:flex; justify-content:center; align-items:center; } 

.h1line { margin-top:5px; height:2px; background:#000000; }

.btnset{ margin-top:20px; display:flex; justify-content: space-around; gap:10px; }
.btnset > div { flex:1; cursor:pointer; height:42px; background:#eeeeee; display:flex; justify-content:center; align-items:center; border-radius:5px; }
.btnset > div.show { background:#88a8d7; color:#FFFFFF; font-weight:bold; }

form[name='search'] { margin-top:50px; display:flex; justify-content:center; align-items:center;  }
form[name='search2'] { margin-top:10px; display:flex; justify-content:center; align-items:center;  }
form .submit { cursor:pointer; color:#FFFFFF; margin-left:30px; width:95px; height:32px; border-radius:5px; background:#88a8d7; display:flex; justify-content:center; align-items:center; }


.inputM{ position:relative; display:flex; align-items:center; width:100%; height:100%; }
.inputM > .box{ position:relative; width:100%; height:100%; display:flex; align-items:center; }
.inputM > .box > input{ flex:1; font-size:14px; }
.inputM > .box > .text{ position:absolute; top:0; left:0px; width:100%; height:100%; display:flex; align-items:center; pointer-events: none; transition: all 0.3s ease; color:#cccccc; }
.inputM > .box > input:focus + .text { top:-50%; font-size:9px; color:#ff0000; }
.inputM > .box > input:valid + .text { top:-50%; font-size:9px; color:#ff0000; }
.inputM > .box > input:read-only + .text { top:-50%; font-size:9px; color:#ff0000; }
.inputM > .line{ position:absolute; width:calc(100% ); left:0; height:1px; bottom:-1px; display:flex; justify-content:center; align-items:center; }
.inputM > .line > div{ width:0%; height:100%; background:#1574aa; transition: width 0.3s ease; }
.inputM:focus-within > .line > div { width:100%; }

.inputM2{ position:relative; display:flex; align-items:center; width:100%; height:100%; }
.inputM2 > .box{ position:relative; width:100%; height:100%; display:flex; align-items:center; }
.inputM2 > .box > input{ flex:1; font-size:14px; text-align:center;}
.inputM2 > .box > .text{ position:absolute; top:0; right:0; width:100%; height:100%; display:flex; justify-content:flex-end; align-items:center; pointer-events: none; transition: all 0.3s ease; }
.inputM2 > .line{ position:absolute; width:calc(100% ); left:0; height:1px; bottom:-1px; display:flex; justify-content:center; align-items:center; }
.inputM2 > .line > div{ width:0%; height:100%; background:#1574aa; transition: width 0.3s ease; }
.inputM2:focus-within > .line > div { width:100%; }



datalist { position:absolute; left:0; top:100%; width:calc(100% - 20px); max-height:200px; border-radius:5px; background:rgba(0, 0, 0, 0.8); overflow:auto; z-index:1000;}
datalist > option {	height:35px; color:#FFFFFF; display:flex; align-items:center; padding-left:10px; cursor:pointer; position:relative; }
datalist > option:hover, datalist > option:focus { background:rgba(255, 255, 255, 0.5); color:#000000; }

datalist::-webkit-scrollbar { width:4px; }
datalist::-webkit-scrollbar-track { border-radius:2px; background:rgba(255, 255, 255, 0.2); }
datalist::-webkit-scrollbar-thumb { border-radius:2px; background:rgba(255, 255, 255, 0.8); }
input::-webkit-calendar-picker-indicator {opacity: 0;}


.calc_list{ border: 1px solid #88a8d7; }
.calc_list > div:not(:last-child) { border-bottom:1px solid #88a8d7; }
.calc_list .title { height:34px; color:#FFFFFF; background:#88a8d7; display:flex; justify-content:center; align-items:center; }
.calc_list .title > div:nth-child(1){ width:455px; }
.calc_list .title > div:nth-child(2){ flex:1; }
.calc_list .title > div{ display:flex; justify-content:center; align-items:center; }

.calc_list .title2 { height:34px; display:flex; justify-content:center; align-items:center; background:#f0ede1; }
.calc_list .title2 > div:nth-child(1){ width:455px;  }
.calc_list .title2 > div:not(:first-child){ flex:1; border-left:1px solid #88a8d7; }
.calc_list .title2 > div{ height:100%; display:flex; justify-content:center; align-items:center; }

.calc_list_contents { display:flex; }
.calc_list_contents > .t { width:71px; display:flex; justify-content:center; align-items:center; border-right:1px solid #88a8d7; }
.calc_list_contents > .d { flex:1; }
.calc_list_contents > .d > .type1 { display:grid; grid-template-columns:70px calc(455px - 70px - 70px) repeat(5, 1fr); grid-auto-rows:minmax(25px, auto); }
.calc_list_contents > .d > .type1.t2 { grid-template-columns:70px calc(455px - 70px - 70px) repeat(2, 1fr); }
.calc_list_contents > .d > .type1 > .t { display:flex; justify-content:center; align-items:center; }
.calc_list_contents > .d > .type1 > .price { display:flex; justify-content:flex-end; align-items:center; padding-right:30px; }
.calc_list_contents > .d > .type1 > div { border-bottom:1px solid #88a8d7; }
.calc_list_contents > .d > .type1 > div.list { padding-left:10px; }
.calc_list_contents > .d > .type1 > div:not(.end) { border-right:1px solid #88a8d7; }

.calc_list_contents > .d > .type2 { }
.calc_list_contents > .d > .type2 > div { height:25px; display:flex; align-items:center; font-size:13px;  }
.calc_list_contents > .d > .type2 > div:not(:last-child) { border-bottom:1px solid #88a8d7; }
.calc_list_contents > .d > .type2 > div > div:nth-child(1){ width:calc(455px - 70px); justify-content:flex-start; padding-left:10px; padding-right:10px; }
.calc_list_contents > .d > .type2 > div > div:not(:first-child){ flex:1; justify-content:flex-end; padding-right:30px; }
.calc_list_contents > .d > .type2 > div > div:not(:last-child){ border-right:1px solid #88a8d7; }
.calc_list_contents > .d > .type2 > div > div{ height:100%; display:flex; justify-content:center; align-items:center; }

.calc_list_price { display:flex; }
.calc_list_price > .t { width:70px; display:flex; justify-content:center; align-items:center; }
.calc_list_price > ul { flex:1; }
.calc_list_price > ul > li { display:flex; align-items:center; height:25px; }
.calc_list_price > ul > li:not(:last-child) { border-bottom:1px solid #88a8d7; }
.calc_list_price > ul > li:nth-child(odd) { background:#f3f3f3; }
.calc_list_price > ul > li > div:nth-child(1){ width:calc(455px - 70px); }
.calc_list_price > ul > li > div:not(:first-child){ flex:1; justify-content:flex-end; padding-right:30px; color:#325a96; }
.calc_list_price > ul > li > div{ height:100%; border-left:1px solid #88a8d7; display:flex; justify-content:center; align-items:center; }
.calc_list_price > .datanone { flex:1; border-left:1px solid #88a8d7; height:100px; display:flex; justify-content:center; align-items:center; }


.calc_list2{ margin-top:10px; border: 1px solid #88a8d7; }
.calc_list2 > div:not(:last-child) { border-bottom:1px solid #88a8d7; }

.calc_list2 .title { height:34px; color:#FFFFFF; background:#88a8d7; display:flex; justify-content:center; align-items:center; }
.calc_list2 .title > div:nth-child(1){ flex:1; }
.calc_list2 .title > div:nth-child(2){ flex:1; }
.calc_list2 .title > div{ display:flex; justify-content:center; align-items:center; }

.calc_list2 .title2 { height:34px; display:flex; justify-content:center; align-items:center; background:#f0ede1; }
.calc_list2 .title2 > div:nth-child(1){ flex:1;  }
.calc_list2 .title2 > div:not(:first-child){ flex:1; border-left:1px solid #88a8d7; }
.calc_list2 .title2 > div{ height:100%; display:flex; justify-content:center; align-items:center; font-size:11px; }

.calc_list_contents2 { display:flex; }
.calc_list_contents2 > ul { flex:1; }
.calc_list_contents2 > ul > li { display:flex; align-items:center; flex-direction:column; font-size:13px;  }
.calc_list_contents2 > ul > li:not(:last-child) { border-bottom:1px solid #88a8d7; }
.calc_list_contents2 > ul > li > div{ width:100%; height:30px; display:flex; justify-content:center; align-items:center; }
.calc_list_contents2 > ul > li > div:first-child{  background:#cddffa; border-bottom:1px solid #88a8d7; }
.calc_list_contents2 > ul > li > div > div{ flex:1; height:100%; display:flex; justify-content:center; align-items:center; font-size:11px; }
.calc_list_contents2 > ul > li > div > div:not(:last-child){ border-right:1px solid #88a8d7; }

.calc_list_price_title { height:34px; background:#cddffa; display:flex; justify-content:center; align-items:center;  }
.calc_list_price2 { display:flex; }
.calc_list_price2 > div { width:70px; display:flex; justify-content:center; align-items:center; }

.calc_list_price2 > ul { flex:1; }
.calc_list_price2 > ul > li { display:flex; align-items:center; height:25px; }
.calc_list_price2 > ul > li:not(:last-child) { border-bottom:1px solid #88a8d7; }
.calc_list_price2 > ul > li:nth-child(even) { background:#f3f3f3; }
.calc_list_price2 > ul > li > div{ flex:1; height:100%; display:flex; justify-content:center; align-items:center; }

.calc_list_price2 > ul > li > div:not(:first-child){ border-left: 1px solid #88a8d7;}







.footer_1{ width:100%; height:130px; margin-top:100px; display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:14px; color:#FFFFFF; background:#656673; }
.footer_2{ width:100%; max-width:1300px; padding-top:20px; padding-bottom:20px; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:14px; color:#FFFFFF; background:#656673; }

.btn1 { padding:0 10px; height: 32px; border-radius: 5px; background: #88a8d7; display:flex; justify-content:center; align-items:center; color: #FFFFFF; }



#calc_essentials { padding:20px 20px 120px 20px; }
#calc_essentials h2 { margin-top:20px; font-size:18px; font-weight:bold; }
#calc_essentials .d { margin-top:40px; }

#warranty { margin:20px 20px 120px 20px; display:grid; grid-template-columns:60px 60px 80px 100px 1fr 350px; border-top: 1px solid #ccc; }
#warranty > div { padding:5px; border-bottom: 1px solid #ccc; font-size:13px; border-right: 1px solid #ccc;}
#warranty > div.start { border-left: 1px solid #ccc; }

#sample_insurance { position:relative; }
#sample_insurance > .content { margin:20px 20px 50px 20px; }
#sample_insurance > .content > .h1 { font-weight:bold; font-size:14px; }
#sample_insurance > .content > .h2 { font-size:14px; display:flex; justify-content:space-between; }
#sample_insurance > .content > .box_1 { display:grid; grid-template-columns:repeat(9, 1fr); grid-auto-rows:minmax(30px, auto); border : 1px solid #dbdee2; }
#sample_insurance > .content > .box_1 > div { display:flex; justify-content:center; align-items:center; }
#sample_insurance > .content > .box_1 > div:not(.noline_right) { border-right : 1px solid #ccc; }
#sample_insurance > .content > .box_1 > div:not(.noline_bottom) { border-bottom : 1px solid #ccc; }

#sample_insurance > .content > .box_2 { display:grid; grid-template-columns:200px 1fr; grid-auto-rows:minmax(30px, auto); }
#sample_insurance > .content > .box_2 > div { display:flex; align-items:center; padding-left:10px; border-bottom:1px solid #dbdee2; }
#sample_insurance > .content > .box_2 > div:nth-child(1) { border-bottom:2px solid #6c7786; }
#sample_insurance > .content > .box_2 > div.line { border-right:1px solid #dbdee2; }

#sample_insurance > .content > .box_3 { display:grid; grid-template-columns:100px 1fr 120px 120px 120px; grid-auto-rows:minmax(30px, auto); border : 1px solid #dbdee2; }
#sample_insurance > .content > .box_3 > div { display:flex; justify-content:center; align-items:center; padding:0 10px;}
#sample_insurance > .content > .box_3 > div:not(.noline_right) { border-right : 1px solid #ccc; }
#sample_insurance > .content > .box_3 > div:not(.noline_bottom) { border-bottom : 1px solid #ccc; }
#sample_insurance > .content > .box_3 > div.bold { font-weight:bold;}
#sample_insurance > .content > .box_3 > div.text_left { justify-content:flex-start; }
#sample_insurance > .content > .box_3 > div.text_right { justify-content:flex-end; }

#bottomicon_1 { display:flex; flex-direction:column; gap:10px; }
#bottomicon_1 button { width:100%; outline:0; background:none; cursor:pointer; font:inherit; -webkit-user-select: none; user-select: none; height:44px; border-radius:5px; background:#f1f4ff; border: 1px solid #a1aeb7; }