@charset "utf-8";

html, body {font-family: "SUIT Variable", "Pretendard", "Noto Sans KR", "Nanum Gothic",'나눔 고딕','Malgun Gothic','돋움', sans-serif;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
  	font-family: "SUIT Variable", sans-serif;
	vertical-align: baseline;
  	box-sizing: border-box;
}
img {vertical-align: top;border:0;width:100%;}
input, button {box-sizing: border-box;outline: none;border: none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%}
body{color: var(--color-basic);overflow-y:auto;}
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td,select{margin:0;padding:0}
table{border-spacing:0;border-collapse:collapse}
ol,ul,li{list-style:none}
h1, h2, h3, h4, h5, h6 {font-weight:normal;font-size:100%}
hr, legend, .hidden{position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0; }
.hide{text-indent:-9999px;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0}
abbr,acronym,img,fieldset{border:0 none;width:100%;}
button{padding:0;margin:0;border:0;cursor:pointer;vertical-align:top;background-color:#fff;font-weight:500 !important;font-family: "SUIT Variable", "Pretendard", "Noto Sans KR",'Nanum Gothic', sans-serif;}
label{cursor:pointer}
em,address{font-style:normal}
a {text-decoration:none;cursor: pointer;/*color:#777;*/}
a:link,a:visited{color:var(--color-basic);text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none} 
table{border-spacing:0;border-collapse:collapse;width:100%;table-layout:fixed}
.skip_nav{position:relative;}
.skip_nav a{display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:0;color:transparent; color:#fff; font-weight:700; white-space:nowrap;}
.skip_nav a:focus,.skip_nav a:active{height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;font-size:20px; background:#2466a6;z-index:10}

form { padding:0; margin:0;}
a:hover,a:active,a:focus{text-decoration:none;/*color: inherit;*/} 
input, input[type=text], input[type=password], select {font-family: "SUIT Variable", "Pretendard", sans-serif;box-sizing:border-box;/*margin: 0 -2px;height:36px;*/line-height:36px;padding-left:12px;padding-right:12px;/*margin-top:-1px;*/ background-color:#fff; border: 1px solid var(--color-gray)  !important; outline: none !important;}
select{-webkit-border-radius:0; -moz-appearance: none;appearance: none;/* -webkit-appearance:none;아이폰에서 셀렉트 아이콘 안나와서 주석처리*//*margin: 0 -2px; text-indent: -2px;*/background-color: #fff;
border: 1px solid var(--color-gray)  !important;outline: none !important;}
/* select {-webkit-appearance:none; } */
select::-ms-expand{display:none;/*for IE10,11*/}
textarea {border: 1px solid var(--color-gray) !important;outline: none !important;padding: 12px;font-family: "SUIT Variable", "Pretendard", sans-serif;}

input::placeholder {color:#999;}
input::-webkit-input-placeholder {color:#999;}
input:-ms-input-placeholder {color:#999;}
textarea::placeholder {color:#999;}

/* padding */

.pd0{padding:0 !important;}
.pd5{padding:5px !important;}
.pd10{padding:10px !important;}
.pd15{padding:15px !important;}
.pd20{padding:20px !important;}
.pd25{padding:25px !important;}
.pd30{padding:30px !important;}
.pd35{padding:35px !important;}
.pd40{padding:40px !important;}
.pd45{padding:45px !important;}
.pd50{padding:50px !important;}

.pt0{padding-top:0 !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}

.pb0{padding-bottom:0 !important;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb50{padding-bottom:50px !important;}

.pr0{padding-right:0 !important;}
.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr25{padding-right:25px !important;}
.pr30{padding-right:30px !important;}
.pr35{padding-right:35px !important;}
.pr40{padding-right:40px !important;}
.pr50{padding-right:50px !important;}

.pl0{padding-left:0 !important;}
.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl35{padding-left:35px !important;}
.pl40{padding-left:40px !important;}
.pl50{padding-left:50px !important;}
.pl110{padding-left: 110px !important;}

/* margin */
.mt0{margin-top:0 !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}

.mauto {margin: 0 auto;}
.mb0 {margin-bottom: 0 !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}

.mr0{margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr35{margin-right:35px !important;}
.mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;}

.ml0{margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml35{margin-left:35px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}

/* line-hegiht */
.lh10 {line-height: 10px !important;}
.lh20 {line-height: 20px !important;}
.lh25 {line-height: 25px !important;}
.lh30 {line-height: 30px !important;}
.lh35 {line-height: 35px !important;}
.lh40 {line-height: 40px !important;}
.lh45 {line-height: 45px !important;}
.lh50 {line-height: 50px !important;}

/* width */
.w30 {width: 30px !important;}
.w40 {width: 40px !important;}
.w50 {width: 50px !important;}
.w55 {width: 55px !important;}
.w60 {width: 60px !important;}
.w80 {width: 80px !important;}
.w100 {width: 100px !important;}
.w120 {width: 120px !important;}
.w140 {width: 140px !important;}
.w150 {width: 150px !important;}
.w160 {width: 160px !important;}
.w180 {width: 180px !important;}
.w200 {width: 200px !important;}
.w250 {width: 250px !important;}
.w280 {width: 280px !important;}
.w300 {width: 300px !important;}
.wfull {width: 100% !important;}
.whalf {width: 50% !important;}

/* height */
.h20 {height: 20px !important;}
.h40 {height: 40px !important;}
.h60 {height: 60px !important;}
.h80 {height: 80px !important;}
.h100 {height: 100px !important;}
.h120 {height: 120px !important;}
.h140 {height: 140px !important;}
.h150 {height: 150px !important;}
.h160 {height: 160px !important;}
.h180 {height: 180px !important;}
.h200 {height: 200px !important;}
	

/* text-align */
.ta-c {text-align: center !important;}
.ta-l {text-align: left !important;}
.ta-r {text-align: right !important;}

/* font-size */
.fz10 {font-size: 10px !important;}
.fz11 {font-size: 11px !important;}
.fz12 {font-size: 12px !important;}
.fz13 {font-size: 13px !important;}
.fz14 {font-size: 14px !important;}
.fz15 {font-size: 15px !important;}
.fz16 {font-size: 16px !important;}
.fz18 {font-size: 18px !important;}
.fz20 {font-size: 20px !important;}
.fz22 {font-size: 22px !important;}
.fz24 {font-size: 24px !important;}
.fz28 {font-size: 28px !important;}
.fz30 {font-size: 30px !important;}
.fz32 {font-size: 32px !important;}
.fz36 {font-size: 36px !important;}
.fz40 {font-size: 40px !important;}
.fz48 {font-size: 48px !important;}

.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}


.input_class{width:100%;margin-bottom:10px;border-radius:5px;padding:5px;font-size:16px;}

.board08-parent{
	display:grid;grid-template-columns: 1fr 1fr  1fr; 
}

.board08-parent div{padding:5px;}

.detailed_part {display:grid;grid-template-columns:70px 1fr;padding-top:10px;}

.detailed-content{border:1px solid #ddd;margin:30px 10px;padding:30px;font-size:18px;border-radius:10px;background:#fafafa}

.detailed_part > div:nth-child(1) {font-weight:bold;}

.detailed-multi{display:grid;grid-template-columns:200px 1fr; padding-top:10px;padding:10px;}
.detailed-multi > div:nth-child(odd) {text-align:right; font-weight:bold; background:#fafafa;border-top:1px solid #ddd;padding:10px;color:#555}
.detailed-multi > div:nth-child(even){border-top:1px solid #ddd;;padding:10px;}
.detailed-multi > div:last-child{border-bottom:1px solid #ddd;}
.detailed-multi > div:nth-last-child(2){border-bottom:1px solid #ddd;}

.detailed-img{display:grid;grid-template-columns:1fr 1fr 1fr; padding-top:10px;}
.detailed-img > div{display:grid; justify-content: space-evenly;}
.detailed-img > div img{border-radius:10px;}

.top-line{border-bottom:2px solid #000;margin-bottom:20px;padding-bottom:5px;text-align:right;color:#999;}
.detailed-list{border-bottom:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;padding:5px 20px 20px 20px;border-radius:0 0 10px 10px;}
.detailed-list-img{width:300px;border-radius:10px 10px 0 0 ;}

.tabs {
	display: flex;
	justify-content: center;
	padding-bottom: 10px;
	margin-top: -30px;
	margin-bottom: 30px;
}
.tab-button {
	padding: 12px 24px;
	font-size: 18px;
	font-weight: bold;
	border: none;
	background-color: #e0e0e0;
	color: #333;
	cursor: pointer;
	margin:10px;
	border-radius:5px;
	transition: all 0.3s ease;
}
.tab-button.active {
	background-color: var(--color-main01);
	color: white;
}
#tab1{ width:200px; }
#tab2{ width:200px; }

@media all and (max-width:1024px) { 
  .detailed-img{grid-template-columns:1fr 1fr;}
  .detailed-img > div img{margin-bottom:20px;}
  .detailed-multi{grid-template-columns:200px 1fr; }
} 

@media all and (max-width:767px) {
    .detailed-img{grid-template-columns:1fr; }
	.detailed-img > div img{margin-bottom:20px;}
  .detailed-multi{grid-template-columns:100px 1fr; }
} 

@media all and (max-width:480px) {
  .detailed-img{grid-template-columns:1fr; }
  .detailed-img > div img{margin-bottom:20px;}
  .detailed-multi{grid-template-columns:100px 1fr; }
  #tab1{ width:145px; }
  #tab2{ width:145px; }
}