@charset "UTF-8"; * { margin: 0; padding: 0; } 

@import url("font.css"); html { margin: 0 auto; background-size: cover; background-attachment: fixed; background-position: center; } 

body { color: #000; font-weight: 300; line-height: 1.6; font-size: 1.2rem; word-break: keep-all; font-family: 'Pretendard', sans-serif; margin: 0 auto; padding: 0; overflow-x: hidden; background: url("img/22_puac_bg.jpg") no-repeat center; background-size: cover; background-attachment: fixed; background-position: center; } 

a { text-decoration:none; color:#000; box-sizing:border-box; } 
.cf:after { content:""; clear:both; display:block; } 
img { max-width: 100%; border:none; } 
table { border-collapse: collapse; border-spacing: 0; } 
p { margin: 0; padding: 0; font-size: 1.2rem; line-height: 1.6; color: #000; } 
li { list-style: none; font-size: 1.2rem; line-height: 1.6; color: #000; } 
dt { float: left; } 
dd { padding: 0 20px 5px; } 

#wrap { width: 100%; min-height: 100vh; margin: 0 auto; } 

header .front { max-width: 100%; padding: 7%; margin-top: 0%; margin-bottom: 20px; } 
header .front p { color: #fff; }


/*상단 타이틀*/
@media screen and (min-width: 900px) {
.f_1 { line-height: 30px; letter-spacing: 25px; font-size: 4rem; filter: drop-shadow(7px 3px 6px #30303069);}
.f_2 { line-height: 250px; letter-spacing: 29px; font-size: 10rem; font-weight: 900; filter: drop-shadow(7px 3px 6px #30303069);}
.f_3 { line-height: 50px; letter-spacing: 20px; font-size: 5rem; font-weight: 600; filter: drop-shadow(7px 3px 6px #30303069);}
}



header .back { max-width: 30%; position: absolute; right: 10%; top: 165px; overflow: hidden; z-index: -1; } 

header .navbar { margin-top: 1%; margin-left: 89%; position: fixed; max-width: 100%; width: 100px; height: 100px; background-color: #cfcfcfa6; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 10; } 
header .navbar a { display: block; text-align: center; } 
header .navbar a img { width: 50%; } 
header .navbar a p { font-size: 0.8rem; color: #000; font-weight: 600; margin-top: -15px; } 

footer { width: 100%; height: auto; position: relative; transform: translateY(0%); background-color: #313030; } 
footer .foot1 { float:left; width:40%; text-align: center; padding-top: 10px; } 
footer .foot2 { float:left; width:60%; color: #afafaf; padding-top: 30px; } 
footer .foot2 .address { display:block; color:#797979; font-size:.93em; line-height:1.8em; margin-bottom: 10px; } 


.tab_header { margin: 0 100px; } 
.tab_body { background: #fff; margin: 50px 100px; padding: 20px; border-radius: 30px; } 
.tab_header ul { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-evenly; padding:0; } 
.tab_header ul li { background: #E3F6FF; position: relative; cursor: pointer; font-weight: 500; color: #202020; padding: 22px 0; text-align: center; width: 25%; height:90px; display:table; table-layout:fixed; border-right:0; border-left:1px solid #ffffff; transition: background 0.5s ease, color 0.5s ease; z-index: 3; } 
.tab_header ul li span { display:table-cell; vertical-align:middle; } 
.tab_header ul li img { width: 15px; height: 15px; position: absolute; transform: translate(-6px, 69px); } 
.tab_header ul li.on { overflow: hidden; font-weight: 700; color: #ffffff; background: #000a55; -webkit-box-shadow: 1px 8px 9px 0px rgba(11, 33, 80, 0.329); -moz-box-shadow: 1px 8px 9px 0px rgba(11, 33, 80, 0.329);; box-shadow: 1px 8px 9px 0px rgb(11, 33, 80, 0.329); z-index: 2; } 
.tab_header ul li.on a { overflow: hidden; font-weight: 700; color: #ffffff; background: #000a55; z-index: 2; } 


.tab_body ul li { display: none; } 
.tab_body ul li.on { display: block; } 
.js_select_wrap { display: none; position: relative; width: 100%; height: 70px; } 
.js_select_wrap .js_select_v2 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 300; color: #fff; z-index: -4; line-height: 70px; text-align: center; margin: 0 auto; left: 0; right: 0; background-color: #FFEA20; background-position: 95% center; background-size: 17px; background-image: url(../images/sub/arr01.png); background-repeat: no-repeat; } 
.js_select { width: 100%; height: 57px; position: absolute; left: 0; right: 0; background: #FFEA20; color: #fff; text-align: center; font-weight: 300; box-sizing: border-box; letter-spacing: 0.05em; margin: 0 auto; text-align-last: center; -ms-text-align-last: center; -moz-text-align-last: center; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; opacity: 0; } 
.js_select option { text-align: center; background: #fff; color: #000; } 

.contents { padding: 20px; } 

.t_a { padding-bottom: 20px; } 
.t_b { font-weight: bold; padding-top: 20px; padding-bottom: 20px; margin-left: 15px; } 
.t1 { font-weight: bold; padding-top: 20px; padding-bottom: 20px; } 
.t1_a { font-weight: bold; padding-top: 70px; padding-bottom: 100px; } 
.t2 { padding-top: 10px; } 
.t3 { padding-top: 20px; padding-bottom: 20px; } 
.t4 { font-weight: bold; padding-top: 20px; padding-bottom: 20px; text-align: center; } 
.t5 { font-weight: bold; padding-top: 50px; padding-bottom: 50px; text-align: center; } 

.b_radius { background-color: #0b00a7; color: #fff; padding: 10px 40px; border-radius: 50px; } 
.b_radius_a { background-color: #0008a1; color: #fff; padding: 10px 40px; border-radius: 50px; } 
.b_radius_b { background-color: #FFD93D; color: #001456; padding: 30px 60px; border-radius: 50px; box-shadow: 10px 10px; -10px 0 rgba(0, 0, 0, 0.2); } 
.b_radius_c { padding: 10px 50px; border-top: 1px solid; border-bottom: 1px solid; } 
.b_border { background-color: #eeeeee; padding: 20px; border: 1px solid #cdcdcd; } 
.box_01 { background: #eef2f5; border: 1px solid #b6b6b6; padding: 20px 30px; margin: 25px 0 20px; color: #000; } 

.dot { margin: 10px 5px; padding: 10px; } 
.dot_2 { margin: 0 20px; padding: 0px 10px 10px; } 
.img_01 { text-align: center; padding-top: 50px; } 

table.cmmntb { border-top: 3px solid #023968; margin-top: 20px; margin-bottom: 20px; } 
table.cmmntb th, .cmmntb td { border: 1px solid silver; } 
table.cmmntb th { background: #eef2f5; vertical-align: middle; font-weight: bold; padding: 15px 20px; } 
table.cmmntb td { padding: 15px; vertical-align: middle; } 





/* 1. 모바일 스타일 */
@media screen and (max-width: 900px) {
  html { font-size: 80%; }
  body { background: url("img/22_puac_bg_m.jpg") no-repeat center; background-size: cover; background-attachment: fixed; background-position: center; }
  .f_1 { line-height: 25px; letter-spacing: 20px; font-size: 2.5rem; filter: drop-shadow(7px 3px 6px #30303069); }
  .f_2 { line-height: 150px; letter-spacing: 25px; font-size: 7rem; font-weight: 900; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_3 { line-height: 20px; letter-spacing: 18px; font-size: 3rem; font-weight: 300; filter: drop-shadow(7px 3px 6px #30303069);}
  header .back { max-width: 30%; position: absolute; transform: translate(-4px, -50px); overflow: hidden; z-index: -1; }
  header .navbar { display: none; }
  .tab_header ul li img {display: none;}
  .tab_header { margin: 0 auto; }
  .tab_body { margin: 10px; padding: 5px; }
  footer { width: 100%; height: auto; position: relative; transform: translateY(50%); background-color: #313030; } 
  footer .foot1 { width:100%; text-align: center; padding-top: 20px; } 
  footer .foot2 { width:100%; text-align: center; color: #afafaf; padding-top: 10px; } 
  footer .foot2 .address { color:#797979; font-size:.93em; line-height:1.8em; margin-bottom: 10px;} 

}

@media screen and (max-width: 400px) {
  html { font-size: 70%; }
  .f_1 { line-height: 10px; letter-spacing: 9px; font-size: 1.8rem; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_2 { line-height: 100px; letter-spacing: 25px; font-size: 5rem; font-weight: 900; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_3 { line-height: 10px; letter-spacing: 10px; font-size: 2rem; font-weight: 300; filter: drop-shadow(7px 3px 6px #30303069);}
   header .back { max-width: 30%; position: absolute; transform: translate(0px, -70px); overflow: hidden; z-index: -1; }
   .b_radius { padding: 10px 30px;}
}

@media screen and (max-width: 500px) {
  html { font-size: 70%; }
  .f_1 { line-height: 10px; letter-spacing: 9px; font-size: 1.8rem; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_2 { line-height: 100px; letter-spacing: 25px; font-size: 5rem; font-weight: 900; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_3 { line-height: 10px; letter-spacing: 10px; font-size: 2rem; font-weight: 300; filter: drop-shadow(7px 3px 6px #30303069);}
   header .back { max-width: 30%; position: absolute; transform: translate(0px, -70px); overflow: hidden; z-index: -1; }
}


/* 5. 인쇄용 스타일 */
@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } 
 html { font-size: 85%; }
  body { background: url("img/22_puac_bg_m.jpg") no-repeat center; background-size: cover; background-attachment: fixed; background-position: center; }
  .f_1 { line-height: 25px; letter-spacing: 20px; font-size: 2.5rem; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_2 { line-height: 150px; letter-spacing: 25px; font-size: 7rem; font-weight: 900; filter: drop-shadow(7px 3px 6px #30303069);}
  .f_3 { line-height: 20px; letter-spacing: 18px; font-size: 3rem; font-weight: 300; filter: drop-shadow(7px 3px 6px #30303069);}
  header .back { max-width: 30%; position: absolute; transform: translate(-4px, -50px); overflow: hidden; z-index: -1; }
  header .navbar { display: none; }
  .tab_header ul li img {display: none;}
  .tab_header { margin: 0 auto; }
  .tab_body { margin: 10px; padding: 5px; }
  footer { width: 100%; height: auto; position: relative; transform: translateY(50%); background-color: #313030; } 
  footer .foot1 { width:100%; text-align: center; padding-top: 20px; } 
  footer .foot2 { width:100%; text-align: center; color: #afafaf; padding-top: 10px; } 
  footer .foot2 .address { color:#797979; font-size:.93em; line-height:1.8em; margin-bottom: 10px;} 

 @page { size: A4; margin: 1cm; } 
 }