@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(300px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(300px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"경기 안성시 미양면 신두만곡로 326"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:9px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:5px; height:1px; background:#242424;}

.bg-gray {background:#f8f8f8;}
.contentwrap + .contentwrap {margin-top: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px);}

.top-text {margin-bottom: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px);font-weight: 600; line-height: 1.3;}
.top-text .mark {display: inline; position: relative;} 
.top-text .mark:after {position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: clamp(8px, calc( 14 / var(--inner) * 100vw ), 14px);border-radius: 7px; background: #f4f6f9;z-index: -1;}

.greetwrap .textbx {padding-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);letter-spacing: -0.5px; position: relative;}
.greetwrap .flxWrap {align-items: flex-end;}
.greetwrap .logobx {flex: 1 0 21.1%;max-width: 21.1%;}
.greetwrap .decbx {flex: 1 0 auto; width: 1%;}
.greetwrap .dec {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.7;}
.greetwrap .dec + .dec {padding-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.greetwrap .signbx {display: flex;align-items: center;padding-top: clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px);}
.greetwrap .signbx .name {display: inline-block;padding-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.greetwrap .signbx img {width: clamp(60px, calc( 87 / var(--inner) * 100vw ), 87px);}

.purwrap .textbx {padding-top: clamp(40px, calc( 55 / var(--inner) * 100vw ), 55px); line-height: 1.7; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center;}

.bgwrap {padding:clamp(40px, calc( 55 / var(--inner) * 100vw ), 55px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border: 1px solid var(--color-2); background-color: #f8fcfd;border-radius: 8px;}
.bgwrap.logo {background:#f8fcfd url(../images/sub/uni-logo.png) no-repeat bottom right;background-size: auto clamp(150px, calc( 490 / var(--inner) * 100vw ), 490px);}
.bgwrap .contit {margin-bottom: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; text-align: center;}
.bgwrap .descbx + .descbx {padding-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.bgwrap .destt {margin-bottom: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;}
.bgwrap .dec {color: #454545; line-height: 1.7;}
.lastdatebx {padding-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); text-align: right;}
.lastdatebx span {display: block;}
.lastdatebx .day {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500;}
.lastdatebx .name {padding-top: 10px; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);font-weight: 600;}

.historywrap {margin-top: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); }
.historywrap .bg-gray {padding: clamp(50px, calc( 110 / var(--inner) * 100vw ), 110px) 0;}
.hisbg {position: relative; background: url(../images/sub/his-bg.jpg) no-repeat center right 40%; height: clamp(200px, calc( 260 / var(--inner) * 100vw ), 260px);}
.hisbg .headtit {padding: clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px) clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px) clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); position: absolute; left: clamp(10px, calc( 70 / var(--inner) * 100vw ), 70px); top: 50%; transform: translateY(-50%); background: var(--color-2); color: #fff;width: clamp(160px, calc( 200 / var(--inner) * 100vw ), 200px);}
.hisbg .headtit span {display: block;font-weight: bold;}
.hisbg .headtit .tt {font-size: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);text-align: left;}
.hisbg .headtit .period {padding-top: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);text-align: right;}

.history-list {position:relative; margin-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);margin-left: clamp(10px, calc( 65 / var(--inner) * 100vw ), 65px);}
.history-line { position: absolute; left:120px; width: 1px; top:10px; bottom: 0; background: #ddd;text-align: center;}
.history-line .line { width: 1px;height: 0; background:var(--color-1); transition: height 0.3s ease-out;}
.history-list .contFlx {display:flex; flex-wrap:wrap;}
.history-list .history-detailitem {padding-bottom:clamp(40px, calc( 55 / var(--inner) * 100vw ), 55px);}
.history-list .history-detailitem:last-child {padding-bottom:0;}
.history-list .cont-wrap1 {flex:1 0 120px; max-width:120px; position:relative;}
.history-list .cont-wrap2 {flex: 1 0 auto ; width: 1%; padding-left:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.history-list .dot {position:absolute; right:-8px; top:5px; width:16px; height:16px;  border:1px solid var(--color-2); border-radius:50%; z-index:10;}
.history-list .dot:after {position: absolute;content: '';top: 50%;left: 50%; transform: translate(-50%, -50%);width: 8px;height: 8px;background:var(--color-2);border-radius: 50%;}
.history-list .bullet-list {display:flex; justify-content:flex-start; padding-left: 0; margin-top:5px;color: #454545;}
.history-list .bullet-list:first-child {margin-top:0;}
.history-list .bullet-list:before {display: none;}
.history-list .bullet-list .month {flex:1 0 clamp(70px, calc( 87 / var(--inner) * 100vw ), 87px); max-width:clamp(70px, calc( 87 / var(--inner) * 100vw ), 87px); font-weight:600;font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.history-list .bullet-list .dec {flex:1 0 auto; width:1%; font-size: clamp(15px, calc( 17 / var(--inner) * 100vw ), 17px);}
.history-list .year { font-size:clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:bold;  line-height:1;}

.mapitem {display: flex;flex-wrap: wrap;border: 1px solid #ddd;}
.maplist {flex: 1 0 33.33%; max-width: 33.33%;border-right: 1px dashed #ddd;height: clamp(120px, calc( 200 / var(--inner) * 100vw ), 200px);}
.maplist:last-child {border-right: 0;}
.maplist .inner {display: flex; align-items: flex-end; padding: clamp(20px, calc( 46 / var(--inner) * 100vw ), 46px); padding-right: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); height: 100%;}
.maplist.bg1 {background:url(../images/sub/loca-icn1.png) no-repeat right bottom; background-size: auto clamp(70px, calc( 160 / var(--inner) * 100vw ), 160px);}
.maplist.bg2 {background:url(../images/sub/loca-icn2.png) no-repeat right bottom; background-size: auto clamp(70px, calc( 160 / var(--inner) * 100vw ), 160px);}
.maplist.bg3 {background:url(../images/sub/loca-icn3.png) no-repeat right bottom; background-size: auto clamp(70px, calc( 160 / var(--inner) * 100vw ), 160px);}
.maplist .inner span {display: block;}
.maplist .inner .name {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);font-weight: bold;color:var(--color-1);}
.maplist .inner .dec {padding-top: 10px;font-size: clamp(17px, calc( 22 / var(--inner) * 100vw ), 22px);font-weight: 600; letter-spacing: -0.5px;}
.maplist .inner .dec.type2 {font-size: clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px);}

.textbottom {margin-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); text-align: center;}
.textbottom .text {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.7;}
.textbottom .text + .text {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.stepitem {display: flex; justify-content: center; flex-wrap: wrap; padding-top: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}
.steplist {flex: 1 0 25%; max-width: 25%;text-align: center; position: relative;}
.steplist:after {position: absolute; content: ''; right: 0; top: 25%; width: clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px); height: clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px); background: url(../images/sub/next.png) no-repeat; background-size: contain;}
.steplist:last-child:after {display: none;}
.steplist .icn {display: flex; align-items: center; justify-content: center; margin:auto; width: clamp(95px, calc( 140 / var(--inner) * 100vw ), 140px); height: clamp(95px, calc( 140 / var(--inner) * 100vw ), 140px); border-radius: 50%; }
.steplist .icn img {width: clamp(40px, calc( 64 / var(--inner) * 100vw ), 64px);}
.steplist .textbx {padding-top:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.steplist .textbx  span {display: block;}
.steplist .step {font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-style: italic;font-weight: 500;}
.steplist .dec {padding-top: 5px; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}
.steplist:nth-child(odd) .icn {border: clamp(2px, calc( 6 / var(--inner) * 100vw ), 6px) solid var(--color-1);} 
.steplist:nth-child(odd) .step {color:var(--color-1);}
.steplist:nth-child(even) .icn {border: clamp(2px, calc( 6 / var(--inner) * 100vw ), 6px) solid var(--color-2);} 
.steplist:nth-child(even) .step {color:var(--color-2);}
.sysbtn {padding-top: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); }
.sysbtn .btn-form {display: flex; align-items: center; justify-content: center; margin: 0 auto;border-radius: 27px; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; background:var(--color-1); color: #fff; width: clamp(200px, calc( 240 / var(--inner) * 100vw ), 240px); height: clamp(46px, calc( 54 / var(--inner) * 100vw ), 54px);}
.syswrap {overflow:hidden;}

.syswrap .middle {padding-top:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.syswrap .middle .txt {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.7;}