<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
@import url('font/font.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&amp;display=swap');


html{overflow-y: scroll}
/* Common */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, legend, button, select, p, blockquote, th, td, table {padding:0; margin:0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;  }
ol, ul, li { list-style:none; margin:0; padding:0}
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%}
form, fieldset, img { border:0; margin:0; padding:0}
address, caption, em { font-weight:normal; font-style:normal}
table{border-collapse: collapse}
input{vertical-align: middle}
a{text-decoration: none; color: #333333; padding: 0; border: 0; margin: 0}
a:hover{color: #333333; text-decoration: none}
*, *::before, *::after {box-sizing: border-box}
img{max-width: 100%; vertical-align: middle}
coimg {
    max-width: 100%;
    vertical-align: middle;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(56, 55, 55, 0.3);
  }

/* 서치박스 */
.search_box{max-width: 1050px; margin: 0 auto 20px}
.search_box .search_sort{text-align: right;}
.search_box .search_sort .on{color:#00afc9; }
.search_box .search_sort .on img{
    /* filter: opacity(0.5) drop-shadow(0 0 0 #00afc9); */
    width: 10px;
}
.search_box:after{content: ''; display: block; clear: both}
.search_box form{float: right}
.search_box select{width: 107px; height: 38px; padding: 5px; margin-right: 4px; display: block; float: left; font-size: 17px;  font-family: 'NotoSans KR','NotoSans', 'NanumSquare', 'Nanum Gothic', 'dotum', 'Microsoft YaHei','SimSun','Times New Roman','Arial',sans-serif; }
.search_box input[type="text"],
.search_box input[type="search"]{width: 256px; height: 38px; padding: 0 5px; margin-right: 4px; display: block; float: left; font-size: 17px;  font-family: 'NotoSans KR','NotoSans', 'NanumSquare', 'Nanum Gothic', 'dotum', 'Microsoft YaHei','SimSun','Times New Roman','Arial',sans-serif; }
.search_box input[type="image"],
.search_box input[type="submit"]{height: 38px; padding: 10px; display: block; float: left; background: #193b6a}
@media screen and (max-width:525px) {
	.search_box input[type="text"],
	.search_box input[type="search"]{width: calc(100% - 153px)}
}

/* 버튼타입 */
.btn_type01{min-width: 100px; height: 40px; padding: 7px 20px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 17px; text-align: center; background: #193b6a; cursor: pointer}
.btn_type01:hover{color: #ffffff}
.btn_type02{min-width: 100px; height: 40px; padding: 7px 20px; border: 1px solid #a7a7a7; display: inline-block; vertical-align: top; color: #4c4c4c; font-size: 17px; text-align: center; background: #ffffff; cursor: pointer}
.btn_type02:hover{color: #193b6a}
.btn_type03{padding: 20px 40px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 20px; font-weight: 700; background: #193b6a; cursor: pointer}
.btn_type03:hover{color: #ffffff}
.btn_type04{min-width: 100px; height: 40px; padding: 7px 20px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 17px; text-align: center; background: #333333; cursor: pointer}
.btn_type04:hover{color: #ffffff}
.btn_type05{min-width: 100px; height: 40px; padding: 7px 20px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 17px; text-align: center; background: #2C77B6; cursor: pointer}
.btn_type05:hover{color: #ffffff}
.btn_type06{width: 100px; height: 40px; padding: 7px 10px; display: block; color: #4c4c4c; font-size: 17px; text-align: center; background: #CDCDCD}
.btn_type07{width: calc(40% - 5px); height: 60px; line-height: 60px; margin-right: 10px; border: 1px solid #D8D8D8; display: block; float: left; color: #4c4c4c; font-size: 20px; font-weight: 700; text-align: center; background: #EAEAEA}
.btn_type07:hover{color: #4c4c4c}
.btn_type08{width: calc(60% - 5px); height: 60px; line-height: 60px; border: 1px solid #C5455C; display: block; float: right; color: #ffffff; font-size: 20px; font-weight: 700; text-align: center; background: #DF5E76}
.btn_type08:hover{color: #ffffff}
.btn_type09{width: 100px; height: 40px; padding: 7px 10px; border: 1px solid #C5455C; display: block; color: #ffffff; font-size: 17px; text-align: center; background: #DF5E76}
.btn_type09:hover{color: #ffffff}
.btn_type10{height: 27px; line-height: 27px; padding: 0 10px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 15px; text-align: center; background: #000000; cursor: pointer}
.btn_type10:hover{color: #ffffff}
/* 결제수단추가 220602 하 */
.btn_type11{height: 27px; line-height: 27px; padding: 0 10px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 15px; text-align: center; background: #2578BB; cursor: pointer}
.btn_type11:hover{color: #ffffff}
.btn_type12{height: 27px; line-height: 27px; padding: 0 10px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 15px; text-align: center; background: #DAA520; cursor: pointer}
.btn_type12:hover{color: #ffffff}
.btn_type13{height: 27px; line-height: 27px; padding: 0 10px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 15px; text-align: center; background: #DF5E76; cursor: pointer}
.btn_type13:hover{color: #ffffff}
.btn_type14{height: 27px; line-height: 27px; padding: 0 10px; border: 0; display: inline-block; vertical-align: top; color: #ffffff; font-size: 15px; text-align: center; background: #006600; cursor: pointer}
.btn_type14:hover{color: #ffffff}
/* 텍스트아이콘 */
.text_icon01{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #2578BB}
.text_icon02{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #b8bcc2}
.text_icon03{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #000000}
.text_icon04{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #ff0000}
.text_icon05{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #006600}
.text_icon06{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #DAA520}
.text_icon07{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #AD19EC}
.text_icon08{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #708090}
.text_icon09{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #000000; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #d4e3e0}
.text_icon10{padding: 0 7px; border: 0; border-radius: 4px; display: inline-block; color: #ffffff; font-size: 12px; font-weight: bold; font-family: Dotum, '돋움'; word-break: keep-all; background: #008d71}
.text_icon03:hover{color: #ffffff; text-decoration: none !important}

/* 버튼박스 */
.btn_box{margin: 0 auto 20px; display: table}
.btn_box02{max-width: 1050px; margin: 0 auto 20px; text-align: right}

/* 페이저 */
.pager_box{max-width: 1050px; margin: 0 auto}
.pager_box ul{margin: 0 auto; display: table}
.pager_box ul li{width: 30px; height: 30px; line-height: 30px; margin-left: 4px; border: 1px solid #bcbcbc; border-radius: 100%; display: inline-block; vertical-align: middle; text-align: center}
.pager_box ul li:first-child{margin-left: 0}
.pager_box ul li a{display: block; color: #4c4c4c;}
.pager_box ul li.on{border-color: #193b6a; background: #193b6a}
.pager_box ul li.on a{color: #ffffff; font-weight: 700}
.pager_box ul li:hover{border-color: #193b6a; font-weight: 700}

.ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis}

/* float */
.fL{float: left !important}
.fR{float: right !important}
.fN{float: none !important}

/* text-align */
.text-center{text-align: center !important}
.text-right{text-align: right !important}

/* font-color */
.font-red01{color: #E52125 !important}
.font-dblue01{color: #193b6a !important}
.font-user01{color: #0066cc !important}

/* font-size */
.font11{font-size: 11px !important}
.font12{font-size: 12px !important}
.font13{font-size: 13px !important}
.font14{font-size: 14px !important}
.font15{font-size: 15px !important}
.font16{font-size: 16px !important}
.font17{font-size: 17px !important}
.font18{font-size: 18px !important}
.font19{font-size: 19px !important}
.font20{font-size: 20px !important}
.font22{font-size: 22px !important}
.font23{font-size: 23px !important}
.font28{font-size: 28px !important}
.font36{font-size: 36px !important}

/* margin-top */
.mt3{margin-top: 3px !important}
.mt6{margin-top: 6px !important}
.mt7{margin-top: 7px !important}
.mt8{margin-top: 8px !important}
.mt10{margin-top: 10px !important}
.mt13{margin-top: 13px !important}
.mt15{margin-top: 15px !important}
.mt16{margin-top: 16px !important}
.mt17{margin-top: 17px !important}
.mt18{margin-top: 18px !important}
.mt20{margin-top: 20px !important}
.mt22{margin-top: 22px !important}
.mt27{margin-top: 27px !important}
.mt29{margin-top: 29px !important}
.mt30{margin-top: 30px !important}
.mt31{margin-top: 31px !important}
.mt33{margin-top: 33px !important}
.mt41{margin-top: 41px !important}
.mt42{margin-top: 42px !important}
.mt54{margin-top: 54px !important}
.mt55{margin-top: 55px !important}
.mt56{margin-top: 56px !important}
.mt62{margin-top: 62px !important}
.mt63{margin-top: 63px !important}

/* margin-right */
.mr3{margin-right: 3px !important}
.mr4{margin-right: 4px !important}
.mr6{margin-right: 6px !important}
.mr7{margin-right: 7px !important}
.mr8{margin-right: 8px !important}
.mr10{margin-right: 10px !important}
.mr12{margin-right: 12px !important}
.mr13{margin-right: 13px !important}
.mr14{margin-right: 14px !important}
.mr15{margin-right: 15px !important}
.mr16{margin-right: 16px !important}
.mr17{margin-right: 17px !important}
.mr18{margin-right: 18px !important}
.mr19{margin-right: 19px !important}
.mr20{margin-right: 20px !important}
.mr26{margin-right: 26px !important}
.mr44{margin-right: 44px !important}
.mr70{margin-right: 70px !important}
.mr74{margin-right: 74px !important}
.mr77{margin-right: 77px !important}

/* margin-bottom */
.mb4{margin-bottom: 4px !important}
.mb6{margin-bottom: 6px !important}
.mb7{margin-bottom: 7px !important}
.mb10{margin-bottom: 10px !important}
.mb12{margin-bottom: 12px !important}
.mb13{margin-bottom: 13px !important}
.mb14{margin-bottom: 14px !important}
.mb15{margin-bottom: 15px !important}
.mb16{margin-bottom: 16px !important}
.mb18{margin-bottom: 18px !important}
.mb19{margin-bottom: 19px !important}
.mb20{margin-bottom: 20px !important}
.mb21{margin-bottom: 21px !important}
.mb23{margin-bottom: 23px !important}
.mb24{margin-bottom: 24px !important}
.mb25{margin-bottom: 25px !important}
.mb26{margin-bottom: 26px !important}
.mb28{margin-bottom: 28px !important}
.mb30{margin-bottom: 30px !important}
.mb31{margin-bottom: 31px !important}
.mb33{margin-bottom: 33px !important}
.mb34{margin-bottom: 34px !important}
.mb35{margin-bottom: 35px !important}
.mb36{margin-bottom: 36px !important}
.mb38{margin-bottom: 38px !important}
.mb40{margin-bottom: 40px !important}
.mb44{margin-bottom: 44px !important}
.mb45{margin-bottom: 45px !important}
.mb46{margin-bottom: 46px !important}
.mb47{margin-bottom: 47px !important}
.mb50{margin-bottom: 50px !important}
.mb53{margin-bottom: 53px !important}
.mb54{margin-bottom: 54px !important}
.mb57{margin-bottom: 57px !important}
.mb60{margin-bottom: 60px !important}
.mb63{margin-bottom: 63px !important}
.mb64{margin-bottom: 64px !important}
.mb67{margin-bottom: 67px !important}
.mb68{margin-bottom: 68px !important}
.mb77{margin-bottom: 77px !important}
.mb80{margin-bottom: 80px !important}
.mb95{margin-bottom: 95px !important}
.mb100{margin-bottom: 100px !important}
.mb104{margin-bottom: 104px !important}
.mb109{margin-bottom: 109px !important}
.mb113{margin-bottom: 113px !important}
.mb123{margin-bottom: 123px !important}
.mb250{margin-bottom: 250px !important}

/* margin-left */
.ml0{margin-left: 0px !important}
.ml2{margin-left: 2px !important}
.ml3{margin-left: 3px !important}
.ml7{margin-left: 7px !important}
.ml9{margin-left: 9px !important}
.ml10{margin-left: 10px !important}
.ml12{margin-left: 12px !important}
.ml14{margin-left: 14px !important}
.ml18{margin-left: 18px !important}
.ml20{margin-left: 20px !important}
.ml23{margin-left: 23px !important}
.ml30{margin-left: 30px !important}
.ml40{margin-left: 40px !important}
.ml74{margin-left: 74px !important}
.ml75{margin-left: 75px !important}
.ml170{margin-left: 170px !important}

/* padding-top */
.pt8{padding-top: 8px !important}
.pt10{padding-top: 10px !important}
.pt15{padding-top: 15px !important}
.pt20{padding-top: 20px !important}
.pt21{padding-top: 21px !important}
.pt22{padding-top: 22px !important}
.pt23{padding-top: 23px !important}
.pt27{padding-top: 27px !important}
.pt28{padding-top: 28px !important}
.pt29{padding-top: 29px !important}
.pt30{padding-top: 30px !important}
.pt31{padding-top: 31px !important}
.pt36{padding-top: 36px !important}
.pt42{padding-top: 42px !important}
.pt47{padding-top: 47px !important}
.pt52{padding-top: 52px !important}
.pt54{padding-top: 54px !important}
.pt56{padding-top: 56px !important}
.pt57{padding-top: 57px !important}
.pt60{padding-top: 60px !important}
.pt81{padding-top: 81px !important}
.pt108{padding-top: 108px !important}
.pt290{padding-top: 290px !important}

/* padding-right */
.pr16{padding-right: 16px !important}
.pr22{padding-right: 22px !important}
.pr23{padding-right: 23px !important}
.pr26{padding-right: 26px !important}
.pr28{padding-right: 28px !important}

/* padding-left */
.pl14{padding-left: 14px !important}
.pl15{padding-left: 15px !important}
.pl17{padding-left: 17px !important}
.pl20{padding-left: 20px !important}
.pl22{padding-left: 22px !important}
.pl23{padding-left: 23px !important}
.pl24{padding-left: 24px !important}
.pl27{padding-left: 27px !important}
.pl37{padding-left: 37px !important}
.pl39{padding-left: 39px !important}

/* padding-bottom */
.pb20{padding-bottom: 20px !important}
.pb95{padding-bottom: 95px !important}

/*과정이미지호버*/
.course_img  img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
.course_img:hover img {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);   
    -o-transform:scale(1.1);
    transform:scale(1.1);
}


/*카드뉴스 슬라이드 css*/
.cardslider{
    width: 640px;
    height: 480px;
    position: relative;
    margin: 0 auto;
}
.cardslider input[type=radio]{
    display: none;
}
ul.imgs{
    padding: 0;
    margin: 0;
}
ul.imgs li{
    position: absolute;
    opacity: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    transition-delay: 0.9s;
}
.bullets{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    z-index: 2;
}
.bullets label{
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.55);
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.cardslider input[type=radio]:nth-child(1):checked~.bullets&gt;label:nth-child(1){
    background-color: #fff;
}
.cardslider input[type=radio]:nth-child(2):checked~.bullets&gt;label:nth-child(2){
    background-color: #fff;
}
.cardslider input[type=radio]:nth-child(3):checked~.bullets&gt;label:nth-child(3){
    background-color: #fff;
}
.cardslider input[type=radio]:nth-child(4):checked~.bullets&gt;label:nth-child(4){
    background-color: #fff;
}

.cardslider input[type=radio]:nth-child(5):checked~.bullets&gt;label:nth-child(5){
    background-color: #fff;
}

.cardslider input[type=radio]:nth-child(6):checked~.bullets&gt;label:nth-child(6){
    background-color: #fff;
}

.cardslider input[type=radio]:nth-child(1):checked~ul.imgs&gt;li:nth-child(1){
    opacity: 1;
    transition: 1s;
    z-index: 1;
}
.cardslider input[type=radio]:nth-child(2):checked~ul.imgs&gt;li:nth-child(2){
    opacity: 1;
    transition: 1s;
    z-index: 1;
}
.cardslider input[type=radio]:nth-child(3):checked~ul.imgs&gt;li:nth-child(3){
    opacity: 1;
    transition: 1s;
    z-index: 1;
}
.cardslider input[type=radio]:nth-child(4):checked~ul.imgs&gt;li:nth-child(4){
    opacity: 1;
    transition: 1s;
    z-index: 1;
}
.cardslider input[type=radio]:nth-child(5):checked~ul.imgs&gt;li:nth-child(5){
    opacity: 1;
    transition: 1s;
    z-index: 1;
}

.cardslider input[type=radio]:nth-child(6):checked~ul.imgs&gt;li:nth-child(4){
    opacity: 1;
    transition: 1s;
    z-index: 1;
}

/* 211231 반응형 조직도  */
.organization_seum_list{margin-top:15px; margin-bottom :15px; padding: 0 20px 10px;}
.organization_seum_list&gt;div{float:left; text-align:center; font-size:15px; width:19%; display: inline-block;}
.organization_seum_list&gt;div+div{margin-left:1.25%; margin-bottom:35px;}
.organization_seum_list&gt;div em{display:block; background-color:#2578BB; color:#ffffff; font-size:16px; font-weight:500; padding:8px 0;}
.organization_seum_list&gt;div ul{border-left:1px solid #bbbbbb; border-right:1px solid #bbbbbb;  border-bottom:1px solid #bbbbbb;}
.organization_seum_list&gt;div ul li{padding:6px 0; background-color:#fefefe;}
.organization_seum_list&gt;div ul li+li{border-top:1px solid #dddddd;}
.organization_seum2_list{margin-top:15px; margin-bottom :15px; padding: 0 20px 10px;}
.organization_seum2_list&gt;div{text-align:center; font-size:15px; width:18.7%; display: inline-block;}
.organization_seum2_list&gt;div+div{margin-left:1.25%; margin-bottom:5px;}
.organization_seum2_list&gt;div em{display:block; background-color:#3C3C3C; color:#ffffff; font-size:16px; font-weight:500; padding:8px 0;}
.organization_seum2_list&gt;div ul{border-left:1px solid #bbbbbb; border-right:1px solid #bbbbbb;  border-bottom:1px solid #bbbbbb;}
.organization_seum2_list&gt;div ul li{padding:6px 0; background-color:#fefefe;}
.organization_seum2_list&gt;div ul li+li{border-top:1px solid #dddddd;}
@media screen and (max-width:525px) {
    .organization_seum2_list&gt;div{text-align:center; font-size:12px; width:17.9%; }
    .organization_seum_list&gt;div{float:left; text-align:center; font-size:12px; width:19%; display: inline-block;}
    .organization_seum_list&gt;div em{display:block; background-color:#2578BB; color:#ffffff; font-size:12px; font-weight:300; padding:0px 0;}
    .organization_seum2_list&gt;div em{display:block; background-color:#3C3C3C; color:#ffffff; font-size:12px; font-weight:300; padding:0px 0;}
    .organization_seum_list&gt;div ul li{padding:0px 0; background-color:#fefefe;}
    .organization_seum2_list&gt;div ul li{padding:0px 0; background-color:#fefefe;}
}


/* 230129 sample ur; */

.btn7-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn7 {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

	.security-toggle {
		position: absolute;
		bottom: 10px;
		right: 10px;
		width: 29px;
		height: 17px;
		margin: 0;
		padding: 0;
		border: none;
		}

		.security-toggle input[type="checkbox"] {
		display: none;
		}

		.security-toggle label {
		display: block;
		width: 100%;
		height: 100%;
		background-image: url("/images/image.png");
		background-size: cover;
		cursor: pointer;
		}

		.security-toggle input[type="checkbox"]:checked + label {
		background-image: url("/images/other-image.png");
		}
/* 231116 하도빈 스터디창 상큼하게 꾸미기  */
        .info-box {
            background-color: #f2f2f2; /* 배경색 스터디창용 11-16 */
            border: 1px solid #ddd; /* 테두리 */
            border-radius: 10px; /* 둥근 테두리 */
            padding: 10px; /* 내부 여백 */
            margin-bottom: 10px; /* 아래쪽 여백 */
            display: inline-block; /* 인라인 블록 요소로 표시 */
        }
        
        .info-box i {
            margin-right: 5px; /* 아이콘과 텍스트 사이의 간격 */
            color: #2578BB; /* 아이콘 색상 */
        }

        .progress-bar-container {
            width: 100%; /* 컨테이너의 너비 */
            height: 30px; /* 컨테이너의 높이 */
            background-color: #f2f2f2; /* 배경색 */
            border: 1px solid #ddd; /* 테두리 */
            border-radius: 15px; /* 둥근 테두리 */
        }
        
        .progress-bar {
            height: 100%; /* 막대의 높이 (컨테이너와 동일) */
            border-radius: 13px; /* 둥근 테두리 (컨테이너보다 약간 작게) */
            background-color: #ff9900; /* 초기 배경색 */
            width: 0%; /* 초기 너비 */
            text-align: center; /* 텍스트 가운데 정렬 */
            line-height: 30px; /* 텍스트 세로 중앙 정렬 */
            color: white; /* 텍스트 색상 */
        }
        .help-button {
            padding: 6px 10px; /* 패딩 */
            background-color: #FF4136; /* 붉은색 배경 */
            color: white; /* 흰색 글자 */
            border: none;
            border-radius: 15px;
            font-size: 14px; /* 폰트 크기 */
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            transition: background-color 0.3s;
        }
        
        .help-button i {
            margin-right: 5px; /* 아이콘과 텍스트 간격 */
        }
        
        .help-button:hover {
            background-color: #C3272B; /* 호버 시 더 어두운 붉은색 */
        }
        .button-container {
            text-align: right;
        }
        
        
        
        </pre></body></html>