@charset "utf-8";
/* CSS Document */

body{
	background-image: url("../images/back01.gif"),  url(../images/pgback.jpg);
	background-repeat: repeat-x, repeat-x;
	background-position: 0px 86px, top;
}
#navbar {background:#088FAC; position:absolute; z-index:1; top:135px; left:0px; width:100%; height:0px; }

#wrap{width:1080px;margin:0px auto;color:#636363; background:url("../images/ttback.png") no-repeat; background-position: 100% 173px;}
header{height:135px;position:relative;z-index:auto; text-align: center; margin-bottom: 45px;}
header>h1{ padding: 20px 0px 18px 0px; text-align: center; }
header>h1>a>img{ display:block; margin:auto; }
#topmn { position:absolute;z-index:auto;top:55px;right:15px; font-size:95%; letter-spacing:-0.05em; color:#ccc; }
#topmn>a>img{ vertical-align:-2px; opacity:0.7 }
#topmn>a>img:hover{opacity:1 }
#since1998 { position:absolute; z-index:auto; top:40px; left:10px; font-family:Lusitana;  }
#since1998>span:first-child{ font-size: 150%;}
#s1998 { display:inline-block; border-radius:10px; background:#00a99d; color:#fff; font-size:250%; padding:10px 5px 10px 10px; }

/*navigation*/
#nav {height:48px;line-height:48px;display:block; position: absolute; z-index: auto; top:86px; left:15px; font-family: "Noto Sans KR"; }
#nav>li{list-style:none;float:left;position:relative;z-index:3}
#nav>li>a {display:inline-block;margin:0px 40px 10px 40px; font-size:130%; font-weight:500; color:#fff; padding:0px 7px; letter-spacing:-0.02em}
#nav>li>a.nvon { color:#FFFCCC; }
#nav>li>section{position:absolute;z-index:4;top:20px; font-size: 115%; line-height:35px; height:35px; display:none; padding:0px 10px }
#nav>li>section>a{float:left;display:block;padding:0px 10px;font-weight:500;letter-spacing:-0.03em;color:#fff; opacity:0.7}
#nav>li>section>a:hover{color:#fff; opacity:1}
.onm{ font-weight: 400; }

#midzone{ overflow: auto; background:url(../images/leftback.gif) repeat-y; }

/*menu*/
aside {width:210px;float:left; min-height:350px; border-top:2px solid #13827a; font-family: "Noto Sans KR"; }
#wLeft >h1 { text-align:center;color:#555; font-size:170%; font-weight: 500; letter-spacing: -0.03em; border-bottom:1px solid #ddd; padding:35px 0px 30px 0px;}
#realleft{ width: 208px; margin: 0px auto; }
#realleft>a, #realleft>span{ display:block; padding-left:20px; line-height: 35px; font-size: 110%; border-bottom:1px solid #ddd; }
#realleft>a.onm{ background:url(../images/lfon.png) no-repeat 100% 100% #00a99d; color:#fff; }
#wLeft >div>div>a, #wLeft >div>div>span{
	display:block; line-height: 35px; padding-left:25px; border-bottom:1px dotted #ccc;font-size: 110%; 
	background:url(../images/ico_arrow1.png) no-repeat 15px 50% #f7f7f7; 
}
#wLeft >div>div>a.onm{ color:#008a80;}

#ctsWrap { float:right; width: 840px; min-height:500px; }
 
#ctstitle { height:90px; border-bottom:1px solid #ccc; margin-bottom: 25px; position:relative; z-index: auto; font-family:'Noto Sans KR';  }
#ctstitle>h1 { font-size: 300%; line-height: 100%; letter-spacing: -0.05em; color: #333; padding-top:10px; }
#ctstitle>h1>span { color:#00a99d; }
#ctstitle>h2 { font-size: 120%; color:#7d7d7d; font-weight: 400; padding: 7px 0px 15px 0px;}

.page{ font-size: 120%; line-height: 150%; letter-spacing: -0.05em; padding-bottom: 30px; }
.page>h1 { font-size: 130%; font-family: "Noto Sans KR"; font-weight: 500; color:#000; text-align: center; padding:20px; border-bottom: 1px solid #ddd; }
.divtype1 { margin-bottom: 15px; padding-bottom: 15px; }
.divtype1>h1 { font-size: 150%;  font-weight: 400; color:#333; font-family: "Noto Sans KR";  margin:15px 0px; line-height: 140%; background: url(../images/ico_arrow2.png) no-repeat 0% 50%; padding-left: 20px; }
.divtype1>h2 { font-size: 130%;  font-weight: 400; color:#333; font-family: "Noto Sans KR";  margin:20px 0px 10px 0px; line-height: 140%; background: url(../images/ico_arrow3.png) no-repeat 0% 50%; padding-left: 20px; }
.divtype1>ol, .divtype1>ul{ margin-left: 20px; word-break: keep-all; }
.divtype1>ol>li, .divtype1>ul>li{ padding:3px 0px; }
.divtype1>ul>li>ul{ padding-left: 10px;}
.divtype1>ul>li>ul>li{ position: relative; padding-left: 5px; }
.divtype1>ul>li>ul>li::marker { content: "\2578 "; font-size: 0.5em; }

.divtype2{ margin: 15px 0px; padding: 15px 20px; border:5px solid #f1f1f1; }
.divtype2>h1{ font-family: "Noto Sans KR"; font-size: 125%; margin:5px 0px 10px 0px; color:#000; font-weight: 400 }
.divtype2>ul{ margin: 5px 0px 0px 20px; }

.order{ border:1px solid #ccc; background: #f7f7f7; padding: 19px; border-radius:10px; overflow: auto;}
.order > div{ float: left; background: #fff; border:2px solid #FF9153; color:#FF9153; font-family: "Noto Sans KR"; font-weight: 500; font-size: 110%; text-align: center; vertical-align: middle; line-height: 70px;; min-height: 70px; padding: 10px; border-radius: 10px; }
.order > span { float: left; display: block; padding: 33px 5px;}

.order2{ border:1px solid #ccc; background: #f7f7f7; padding: 19px; border-radius:10px; overflow: auto;}
.order2 > div{ float: left; background: #fff; border:2px solid #00A99D; color:#00A99D; font-family: "Noto Sans KR"; font-weight: 500; font-size: 110%; text-align: center; min-height: 70px; padding: 20px 10px 0px 10px; border-radius: 10px; }
.order2 > span { float: left; display: block; padding: 33px 5px;}

.order3{ border:1px solid #ccc; background: #f7f7f7; padding: 19px; border-radius:10px; overflow: auto;}
.order3 > div{ float: left; text-align: center; }
.order3 > div>h1{ font-size: 115%; font-family: "Noto Sans KR"; margin: 5px;  }
.order3 > span { float: left; display: block; padding: 33px 10px;}

.pgfilez{ clear: both; background:#f1f1f1; border:1px solid #ccc; padding:20px 30px; border-radius: 3px; }
.pgfilez>h1{ padding-bottom: 10px; color:#333;  }
.pgfilez>img{ vertical-align: middle; }

.rposition{ position: relative; z-index: auto; }
.rposition>div { position:absolute ; z-index: auto; top:0px; right: 0px; }

.glrzone>div{ width: 32%; float: left; margin-bottom: 2%;}
.glrzone>div:not(:nth-of-type(3n)){ margin-right: 2%;}
.glrzone>div>div:first-child{ border:1px solid #ddd; padding: 9px 9px 20px 9px; }
.glrzone>div>div:first-child>img{ display: block; width: 100%; margin-bottom: 10px; }
.glrzone>div>div:first-child>h1{ font-size: 110%; font-family: "Noto Sans KR"; font-weight: 500; }

.rbox20p{ border:2px solid #00A99D; padding: 15px; border-bottom-right-radius: 50px; font-family: "Noto Sans KR"; font-size: 140%; overflow: auto;  }
.rbox20p>h1{ background:#0B948A; color:#fff; display: inline-block; padding: 25px; margin-right: 20px;  border-bottom-right-radius: 50px; }
.rbox20p>ul{ font-size: 80%; float: right; width: 670px; line-height: 170%; }

table.ltype1{ margin:auto; border-top:1px solid #262626; color:#555; width: 100%; }
table.ltype1>thead>tr>th { background:#f6f6f6; border-bottom:1px solid #ccc; color:#555; font-weight: 500; padding:8px 5px; font-family: "Noto Sans KR"; border-right:1px solid #ccc; }
table.ltype1>thead>tr>th:last-child{ border-right:0px; }
table.ltype1>tbody>tr>td { border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:7px 5px;  font-family: "Malgun Gothic","Myriad Pro", Dotum,  Tahoma; text-align:center }
table.ltype1>tbody>tr>td:last-child { border-right:0px; }
table.ltype1 td>ul { margin:10px 0px 10px 20px }
table.ltype1 td>ul>li{ padding: 3px;}
table.ltype1 td>ul>li>h1{ font-family: "Noto Sans KR"; font-size: 105%; font-weight: 500; }

.h1rbox{ 
    position: relative; text-align: center; font-family: "Noto Sans KR"; font-size: 1.2rem;
    border-top: 2px solid rgba(0, 0, 0, 0.2); margin-top: 65px;
}
.h1rbox>h1{ 
    position: absolute; top:-50px; left:calc(50% - 50px);
    display: flex; align-items: center; justify-content: center; margin-top: 1rem;
    width: 100px; height: 100px; box-sizing: border-box; background-color: #37958A; color: white; 
    border-radius: 50%; margin: auto; font-size: 1.3rem; font-weight: 500;
}
.h1rbox>h1+p{ padding: 85px 0 1em 0; font-size: 1.7rem; }
.h1rbox>.flex{
    display: flex; margin-top: 85px; font-size: 1rem; gap: 4px; word-break: keep-all; box-sizing: border-box;
}
.h1rbox>.flex>div{ 
    width: calc((100% - 16px)/5); padding: 0px; box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px 5px 5px 5px;
    position: relative; overflow: hidden; 
}
.h1rbox>.flex>div:nth-child(1){ background-color: rgba(71, 147, 172, 0.1) }
.h1rbox>.flex>div:nth-child(2){ background-color: rgba(138, 173, 106, 0.1) }
.h1rbox>.flex>div:nth-child(3){ background-color: rgba(91, 173, 164, 0.1) }
.h1rbox>.flex>div:nth-child(4){ background-color: rgba(169, 172, 107, 0.1) }
.h1rbox>.flex>div:nth-child(5){ background-color: rgba(105, 173, 120, 0.1) }
.h1rbox>.flex>div>h1{ 
    padding: 10px; border-bottom: 1px dotted rgba(0, 0, 0, 0.1); font-weight: 500; font-size: 1.1rem; 
    min-height: 76px; display: flex; justify-content: center; align-items: center; color: #fff;
}
.h1rbox>.flex>div:nth-child(1)>h1{ background-color: #3491AC; }
.h1rbox>.flex>div:nth-child(2)>h1{ background-color: #85AD69; }
.h1rbox>.flex>div:nth-child(3)>h1{ background-color: #47ACA4; }
.h1rbox>.flex>div:nth-child(4)>h1{ background-color: #A9AD6A; }
.h1rbox>.flex>div:nth-child(5)>h1{ background-color: #5BAD78; }
.h1rbox>.flex>div>h2{ 
    padding: 10px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-weight: 400; color:rgba(0, 0, 0, 0.6)
}
.h1rbox>.flex>div>ul{ 
    text-align: left; box-sizing: border-box; color:rgba(0, 0, 0, 0.6);
    padding: 20px 10px 20px 30px;
} 

#pgw01_01 .order2>h1{ float: left; line-height: 70px;; min-height: 70px; padding: 10px; width: 70px;text-align: center; font-size: 120%; font-family: "Noto Sans KR"; color:#000;  }
#pgw01_01 .order2>div{ margin:10px 0px; width: 70px; }
.trp10{ text-align: right; padding: 10px 0px;}
#pgw01_01 .divtype1:not(:last-child) { border-bottom: 1px solid #ddd; }
#pgw01_01 .pgfilez{ margin:10px 0px; }

#pgw01_02 .rposition>div{ width: 300px; }
#pgw01_02 div.divtype2{ overflow: auto; }
#pgw01_02 div.divtype2>img{ width: 180px; float: right; }

#pgw01_03 .rposition+ol{ width: calc(100% - 380px); }

#pgw01_04_01>div>table{ margin:10px 0px; }
#pgw01_04_01>div>table tr>td:nth-last-of-type(3){ font-weight: 400; font-size: 110%; background: #f6f6f6; font-family: 'Noto Sans KR'; }
#pgw01_04_01>div>table tr>td:last-child{ text-align: left; }
#pgw01_04_01 .order2>div { width: 120px; }
#pgw01_04_01 .order2{ background: #fff; border:0px; padding: 15px 0px; }

.stepbasic{ margin: 3em 0; text-align: center; counter-reset: icout; }
.stepbasic>div{ border:5px solid rgba(0, 0, 0, 0.1); padding: 1em; border-radius: 3em; width: 80%; margin:0 auto; font-family: "Noto Sans KR"; font-size: 1.3em; font-weight: 500; position: relative; 
}
.stepbasic>div::before{
    counter-increment: icout; content: "STEP"counter(icout);
    position: absolute; display: block; width: 80px; background-color: #3DAA9D; color:#fff;
    padding: 5px ; top:13px; left:15px; font-size: 0.8em; border-radius: 2em;
}
.stepbasic>div>img{ display:block;border:1px solid rgba(0,0,0,0.1); margin:1em auto; }
.stepbasic>p{ padding: 5px 0; font-weight: 700; color:#3DAA9D; }



#pgw01_05_01 img{ display:block; margin:auto; max-width: 100%; }
#pgw01_05_01 ul{ margin-top: 10px; margin-bottom: 10px;}
#pgw01_05_01>div:nth-of-type(2)>div{ margin: auto; max-width: 100%; padding: 20px 0px; }
#pgw01_05_01>div:nth-of-type(2)>div>p{ text-align: center; font-size: 120%; font-family: "Noto Sans KR"; font-weight: 400; color:#000; margin-top: 10px; }
.rbox-b5 { display: block; box-sizing: border-box; border:5px solid; border-radius: 10px; }
#pgw01_05_01>div:nth-of-type(1) .rbox-b5{ border-color: #7390D3;}
#pgw01_05_01>div:nth-of-type(2) .rbox-b5{ border-color: #39BCCE;}

#pgw01_05_02{ padding-bottom: 20px; overflow: auto; }
#pgw01_05_02 dl{ width: 47%; margin:5px 10px; display: block; float: left; border-top:1px solid #00A99D; border-bottom:1px solid #00A99D; padding:15px 0px; overflow: auto; line-height: 170%;   }
#pgw01_05_02 dl>div{ float:left; width: 50%; height:100px; }
#pgw01_05_02 dt{ float: right; width: 50%; font-family: "Noto Sans KR"; font-size: 115%; font-weight: 500; border-bottom: 1px dotted #ccc; padding-bottom: 10px; margin-bottom: 10px; }
#pgw01_05_02 dd{ float: right; width: 50%; }

#pgw01_05_04 .order2>div { width: 120px; }
#pgw01_05_04 .order2{ background: #fff; border:0px; padding: 15px 0px; }

#pgw02_01_01>div>div, #pgw02_01_01>div>div{ margin-bottom: 10px; }
#pgw02_01_01>div>div, #pgw02_01_01>div>div{ margin-bottom: 10px; }

#pgw03_01>#tab1>div:nth-of-type(3) div.order>div{ width: 14.5%; }
#pgw03_01>#tab1>div:nth-of-type(3) div.order>div:first-child{ margin-left: 10px; }
#pgw03_01>#tab1>div:nth-of-type(3)>div{ overflow: auto; margin-bottom: 10px; }
#pgw03_01>#tab1>div:nth-of-type(3)>div>h3{ float: left; width: 14.5%; height: 135px; line-height: 135px; text-align: center; font-size: 150%; border-radius: 10px; background: #00A99D; color:#fff; }
#pgw03_01>#tab1>div:nth-of-type(3)>div>h3+span{ float: left; padding: 50px 10px 0px 10px }
#pgw03_01>div:not(:first-of-type){ display: none}

#pgw03_03>div:last-child > .order2>div{ width: 15%; }

#pgw03_04 .order3>div { width:170px; }
#pgw03_04 .order3>div:first-child{ margin-left: 15px;}
#pgw03_04 .order3>span { padding-top:70px; }
#pgw03_04 > div >a{ margin-top:10px; }

/* #pgw06_01{ background: url(../images/img06_0101_200727.jpg) no-repeat right 30px;} */
#pgw06_01{ background: url(../images/img06_0101_230310.png) no-repeat calc(100% + 30px) -10px / 60%; padding: 20px 0px 50px 0px;}

#pgw06_02_01>div:last-child>table{ width: 100%; border-top:2px solid #036E67}
#pgw06_02_01>div:last-child>table tr>td:nth-of-type(2n-1){background: #f7f7f7; }

/* 
#pgw06_02_02>table tr>td:last-child{ text-align: left; }
#pgw06_02_02>table tr>td>div{ margin-top:10px; } 
*/
.rbox4{ 
    width: 520px; display: flex; flex-wrap: wrap; gap: 10px; color:#fff; font-family: 'Noto Sans KR'; 
    word-break: keep-all; position: relative; /* margin: 50px auto 50px auto; */
    /* transform: rotate(45deg); */ margin: 0px auto 0px auto; padding-bottom: 70px;
    position: absolute; left:calc(50% - 150px);
}
/* .rbox4::before{ 
    content: ""; display: block; width: 490px; height: 490px; top:15px; left: 15px;
    position: absolute; z-index: -1; border:3px dotted rgba(0, 0, 0, 0.1); border-radius: 500px;
} */
.rbox4>div{ 
    background-color: #EC4259; flex: 1 0 45%; border-radius: 200px; height: 250px; box-sizing: border-box;
    display: flex;  justify-content: center;  padding: 55px 40px; text-align: center;
}
.rbox4>div>h1{ 
    font-size: 1.5em; line-height: 1.3; font-weight: 400;
    /* transform: rotate(-45deg); */
}
.rbox4>div>h1::before{ 
    content: attr(data-num); display: block; width: 100%; height: 40px; font-weight: 300; opacity: 0.5;
}
.rbox4>div:nth-child(1){ border-bottom-right-radius: 0; }
.rbox4>div:nth-child(2){ border-bottom-left-radius: 0; background-color: #223453; }
.rbox4>div:nth-child(3){ border-top-right-radius: 0; background-color: #4B5A74; }
.rbox4>div:nth-child(4){ border-top-left-radius: 0; background-color: #E07139; }
.rbox4+div{ padding-top: 570px;}



#pgw06_02_03 table>tbody>tr>td>ul{ text-align: left; }


#pgw06_03>div:first-child{ 
    background:url('../images/img06_03_2022.gif') no-repeat 50% 50px;
    width: 760px; margin: auto; height: 570px; position: relative; z-index: auto; 
}
#pgw06_03 p.tt{
    position: absolute; z-index: auto; width: 170px; border:5px solid #fff; border-radius: 40px; line-height: 60px; box-shadow: 1px 1px 8px #ccc; 
    text-align: center; color:#fff; font-family: "Noto Sans KR"; font-weight: 500; font-size: 120%; text-shadow: 1px 1px 2px #000;
}
#ort01{ left: 294px; top:5px; background: url("../images/clpt01.jpg");}
#ort02{ left: 294px; top:90px; background: url("../images/clpt02.jpg");}
#ort03{ left: 294px; top:175px; background: url("../images/clpt03.jpg");}
#ort04{ left: 294px; top:260px; background: url("../images/clpt04.jpg");}
#ort05{ left: 494px; top:90px; background: url("../images/clpt05.jpg");}
#ort06{ left: 94px; top:175px; background: url("../images/clpt05.jpg");}

#pgw06_03 .orgul{
    position: absolute; z-index: auto; width: 230px; border:1px solid #ccc; padding:10px 5px; background:#f1f1f1; min-height: 230px;
    border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
#pgw06_03 .orgul>h1{
    width: 210px; margin:auto; border:5px solid #fff; border-radius: 40px; background: #f7f7f7; line-height: 60px; box-shadow: 1px 1px 8px #ccc; 
    text-align: center;  font-family: "Noto Sans KR"; font-weight: 500; font-size: 120%;
}
#pgw06_03 .orgul>h1+ul{ list-style: none; text-align: center; padding:20px 0px; }
#pgw06_03 .orgul>h1+ul>li{ line-height: 200%; }
#pgw06_03 .orgul>h1+ul>li:not(:last-child){ border-bottom:1px dotted #ccc; }

#thisyimg { width: 285px; }
#pgw06_04 div.divtype1>.pictype>img{ width: 184px; height: 229px;}

#ort07{ top:290px; left:0px }
#ort08{ top:290px; left:260px }
#ort09{ top:290px; left:520px }

/*
#pgw06_03>div:first-child>ul{ list-style: none; text-align: center;width: 200px; padding: 20px; position: absolute; z-index: auto; }
#pgw06_03>div:first-child>ul>li{ border-bottom: 1px dotted #ccc; padding: 3px;  }
#pgw06_03>div:first-child>ul>li:last-child{ border-bottom: 0px; }
*/
#pgw06_03 tr>td:last-child{ text-align: left}
#pgw06_03 .textleft{ padding-left: 20px; }
#pgw06_03 .textleft>ul{ text-align: left; }
.hulm1{ margin:10px 0px; line-height: 170%;}
.hulm1>h1{ font-size: 110%; padding:10px 0px;}
.hulm1>h1+ul{ margin-left: 20px;}

#pgw06_04{ margin-top: 20px; }
#pgw06_04>div:not(:first-child){ display: none; }
#pgw06_04>#tab1>div>div{ overflow: auto}
#pgw06_04>#tab1>div:first-child div.pictype{ float: left; }
#pgw06_04>#tab1>div:first-child div.pictype+div{ float: right; width: 510px; }
#pgw06_04>#tab1>div:first-child div.pictype+div>h1{ margin: 5px 0px;}
#pgw06_04>#tab1>div:first-child div.pictype+div>ul{ margin-left: 20px; }
#pgw06_04>#tab2>div>div{ margin-bottom: 10px; }

#pgw06_06 ul>li>ul{ list-style: disc;}
#pgw06_06 ul>li>ul>h1{ margin: 7px 0px 4px 0px; color:#000; }
#pgw06_06 ul>li>ul>li{ margin-left: 20px;}

#pgw06_07>img{ display: block; }

footer { min-height:135px; border-top:1px solid #ddd; background: url(../images/footback.jpg) repeat-x;  }
footer>div{ width: 1080px; margin:30px auto 10px auto; }
footer>div>div{ float: right; width: 840px; margin-top: 18px; color:#777;  }
footer>div>div>p{ margin-top:15px}

/*error.php*/
#errMsgbox{ margin:30px 20px;}
#errMsgbox>hgroup>h6{ font-size:12px; color:#000; }
#errMsgbox>hgroup>h5{margin:10px 0px;padding:5px 0px;border-bottom:1px dotted #ccc;border-top:1px dotted #ccc}
#errMsgbox>p{margin:15px 0px}