@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'Cafe24Ssurround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*,*::before,*::after{color: #333;padding: 0; margin: 0; box-sizing: border-box; border: 0; vertical-align: baseline; line-height: 1; font-family: 'Noto Sans KR', sans-serif; list-style: none; text-decoration: none; letter-spacing: -0.2px; word-spacing: -1px;}
.clearFix::after{clear: both; content: ''; display: block;}
select { border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none; background-image: url(/support/img/select_arr.png); background-repeat: no-repeat; background-position: top 50% right 20px;}
select::-ms-expand{ display:none}
h2{font-size: 26px; font-family: 'Cafe24Ssurround';}
h2 span{color: #b71f25; font-family: 'Cafe24Ssurround';}
h2~p{margin-top: 10px;}
p.grey{color: #666;}
p.light{font-weight: lighter}
p b.red{color: #b71f25}
p b.blue{color: #0d486b}
br.mob{display: none;}

body{background-color: #f7f7f7; background-image: url(/support/img/background_head_img.jpg); background-repeat: no-repeat;}
header > .wrap{max-width: 1200px; margin: 0 auto; padding: 50px 20px 50px 10px;}
header > .wrap > #logo{float: left;}
header > .wrap > nav{float: right}
header > .wrap > nav li{float: left;}
header > .wrap > nav a{font-family: 'Cafe24Ssurround'; color: #fff; font-size: 20px; padding: 20px;}
header > .wrap > nav a:hover{color: #ffea00;}
header > .wrap > nav a.on{color: #ffea00; border-bottom: 3px solid #ffea00;}
#container{max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 65px 85px 50px 85px;}
#container.container02{padding-bottom: 75px;}

ul.dot li{position: relative; padding-left: 15px;margin-bottom:12px }
ul.dot li::before{ width: 4px; height: 4px; background-color: #666; border-radius: 50%; position: absolute; content: ''; top: 7px; left: 0}

ul.icon{padding: 30px 25px; ;}
ul.icon::-webkit-scrollbar {display: none;}
ul.icon li{width: 50%; float: left; padding-left: 185px; position: relative; margin-bottom: 25px;}
ul.icon > li:first-child{width: 100%; float: none;}
ul.icon > li:last-child{margin-bottom: 0px;}
ul.icon li b{position: absolute;left: 0; top: 0; padding-left: 42px;}
ul.icon li::before{position: absolute;left: 0; top: -5px; content: ''; display: block; width: 28px; height: 28px; border-radius: 50%; background-color: #e1f1fa; background-repeat: no-repeat; background-position: center;}
ul.icon > li:nth-child(1)::before{background-image: url(/support/img/ul_icon01.png);}
ul.icon > li:nth-child(2)::before{background-image: url(/support/img/ul_icon02.png);}
ul.icon > li:nth-child(3)::before{background-image: url(/support/img/ul_icon03.png);}
ul.icon > li:nth-child(4)::before{background-image: url(/support/img/ul_icon04.png);}
ul.icon > li:nth-child(5)::before{background-image: url(/support/img/ul_icon05.png);}
ul.icon > li:nth-child(6)::before{background-image: url(/support/img/ul_icon06.png);}

footer {background-color: #343434; padding: 30px 20px; text-align: center;}
footer img{display: block; margin: 0 auto 20px auto;}
footer p{color: #868686; line-height: 2;}


.pagenation{display:flex; justify-content: center; margin-top:40px}
.pagenation > span, .pagenation > a {display:flex;justify-content:center; align-items:center;width: 42px;height: 42px;}
.pagenation > span{background-color:#6e7884; color:#fff}
.pagenation a.btn_first,
.pagenation a.btn_10prev,
.pagenation a.btn_10next,
.pagenation a.btn_end{border:1px solid #6e7884; background-repeat:no-repeat; background-position:center; text-indent:-9999px;}
.pagenation a.btn_first{background-image:url("/portal/images/sub/pagenation-first-btn.jpg")}
.pagenation a.btn_10prev{margin-right:20px; border-left:0; background-image:url("/portal/images/sub/pagenation-prev-btn.jpg")}
.pagenation a.btn_10next{margin-left:20px; border-right:0; background-image:url("/portal/images/sub/pagenation-next-btn.jpg")}
.pagenation a.btn_end{background-image:url("/portal/images/sub/pagenation-last-btn.jpg")}

/*
.pagenation {width: 520px; margin: 40px auto 0 auto;}
.pagenation li {float: left;}
.pagenation a{width: 42px; height: 42px; border-radius: 50%; padding-top: 12px; color: #666; display: inline-block; text-align: center; margin-right: 7px; background-repeat: no-repeat; background-position: center;}
.pagenation a.prev{margin-right: 40px; background-image: url(/support/img/prev.jpg);}
.pagenation a.next{margin-left: 40px; background-image: url(/support/img/next.jpg);}
.pagenation a.first{background-image: url(/support/img/page_first.jpg);}
.pagenation a.last{background-image: url(/support/img/page_last.jpg)}
.pagenation a.on{background-color: #b71f25; color: #fff;}
.pagenation a:hover{background-color: #ececec;}
.pagenation a.on:hover{background-color: #b71f25;}
.pagenation a.prev,
.pagenation a.first,
.pagenation a.next,
.pagenation a.last:hover{background-color: transparent;}
.pagenation a.prev,
.pagenation a.first,
.pagenation a.next,
.pagenation a.last{border: 1px solid #e0e0e0;}
*/
.harm-container .harm-btn{font-size: 22px; padding: 30px 20px; border-top: 1px solid #ddd; font-weight: bold; cursor: pointer; pointer-events: none; line-height: 1.5;}
.harm-container .harm-btn.no-res{font-size: 18px; text-align: center; font-weight:normal}
.harm-container .harm-btn:hover{background-color: #f2f2f2;}
.harm-container .harm .harm-btn{border-bottom: 2px dashed #ddd;}
.harm-container .harm:first-child .harm-btn{border-top: 2px solid #333;}
.harm-container .harm-content{transition: 0.3s; overflow:auto;scrollbar-width: none}
.harm-container .harm-content::-webkit-scrollbar {display: none;}
.harm-container .harm:last-child .harm-content{border-bottom: 1px solid #ddd;}


/* skip navigation */
#skipNav {position: absolute;margin: 0 auto;z-index: 99999;top: 0;left: 0;right: 0;}
#skipNav a {position:absolute;display: block;text-align: center;color:#fff;font-size:1em;top:-10000px;left:0;z-index:10000;}
#skipNav a:hover,  #skipNav a:focus, #skipNav a:active {position:absolute;top:0;height:7px;padding:12px 0 31px;background:#2f3a70;z-index:10000;width:100%;overflow: hidden;}



.container01 .sec01{margin-top: 40px; border: 5px solid #ededed; padding: 30px 40px; position: relative;}
.container01 .sec01 fieldset{margin-right: 110px;}
.container01 .sec01 fieldset:first-child{margin-bottom: 10px;}


.container01 .sec01 input,
.container01 .sec01 select{border: 1px solid #ddd; font-size: 16px; padding: 0 15px; height: 45px;margin-right: 8px; display: block; float: left; cursor: pointer; background-color: #fff;}



.container01 .sec01 select.year,
.container01 .sec01 select.key{width: calc(20% - 8px);}/* 諛묒쨪 */
.container01 .sec01 select.buis{width: calc(48% - 8px);}
.container01 .sec01 select.field{width: calc(18% - 8px);}
.container01 .sec01 select.man{width: 14%; margin-right: 0;}
.container01 .sec01 input.search{width: 80%; margin-right: 0;}/* 諛묒쨪 */



.container01 .sec01 button{background: url(/support/img/btn_back.png)no-repeat; position: absolute; top: 30px; right: 30px; width: 110px; height: 100px; font-size: 20px; text-align: center; padding-top: 35px; color: #fff; cursor: pointer;}
.container01 .sec01 hr{margin: 30px 0; background-color: #ddd; height: 1px;}

.container01 .sec02{margin-top: 40px;}
.container01 .sec02 > p{margin-bottom: 20px;}

.container02 .sec01{background-color:#fafafa; padding: 50px 35px 75px 35px; margin-top: 40px; position: relative;}
.container02 .sec01 > .block{float: left; position: relative; padding-top: 305px; width: 50%; text-align: center;}
.container02 .sec01 > .block img{position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);}
.container02 .sec01 > .block p{border-top: 1px solid #ddd; font-size: 18px; padding-top: 22px; font-weight: bold; font-family: 'GmarketSansMedium';}
.container02 .sec01 > .block:nth-child(1) p{color: #532963;}
.container02 .sec01 > .block:nth-child(2) p{color: #4e57ab;}
.container02 .sec01 > .block:nth-child(3) p{color: #4eaba8;}
.container02 .sec01 > .block:nth-child(4) p{color: #76933e;}
.container02 .mob{display: none;}
.container02 .sec01 .num{width: 144px; color: #fff; padding: 12px 0 8px 0; text-align: center; position: relative; font-family: 'Cafe24Ssurround'; border-radius: 10px; margin: 0 auto; margin-bottom: 20px;}
.container02 .sec01 .num::before{width: 12px; height: 12px; position: absolute; transform: translateX(-50%) rotate(-45deg); left: 50%; bottom: -6px; display: block; content: ''}
.container02 .sec01 > .block:nth-child(1) .num{background-color: #532963;}
.container02 .sec01 > .block:nth-child(2) .num{background-color: #4e57ab;}
.container02 .sec01 > .block:nth-child(3) .num{background-color: #4eaba8;}
.container02 .sec01 > .block:nth-child(4) .num{background-color: #76933e;}
.container02 .sec01 > .block:nth-child(1) .num::before{background-color: #532963;}
.container02 .sec01 > .block:nth-child(2) .num::before{background-color: #4e57ab;}
.container02 .sec01 > .block:nth-child(3) .num::before{background-color: #4eaba8;}
.container02 .sec01 > .block:nth-child(4) .num::before{background-color: #76933e;}
.container02 .sec01 .arr{position: absolute; background: url(./img/container02_sec01_arr.png); background-repeat: no-repeat; width: 141px; height: 94px; bottom: -45px; left: 90px;}

.container02 .sec02{margin-top: 55px; border: 1px dotted #b2b2b2; padding: 50px 60px 45px 60px; position: relative;}
.container02 .sec02 .tit{top: -25px;position: absolute; width: 100%; text-align: center;}
.container02 .sec02 .tit .inner{background-color: #532963; color: #fff; padding: 15px 5px; border-radius: 50px 50px 50px 0; text-align: center;font-family: 'Cafe24Ssurround'; width: 250px; font-size: 18px;}
.container02 .sec02 .tit span{font-family: 'Cafe24Ssurround'; color: #ffbf55}
.container02 .sec02 .img-wrap > .img{float: left; width: 33%; text-align: center}
.container02 .sec02 .img-wrap .bar{display: none; height: 40px; color: #532963; background-repeat: no-repeat; background-position: center; text-align: right; color: #7c3f94; font-size: 18px; padding-top: 13px;font-family: 'Cafe24Ssurround'; padding-right: 10px;}
.container02 .sec02 .img-wrap .img:nth-child(1) .bar{background-image: url(/support/img/container02_sec02_bar01_mob.jpg);}
.container02 .sec02 .img-wrap .img:nth-child(2) .bar{background-image: url(/support/img/container02_sec02_bar02_mob.jpg);}
.container02 .sec02 .img-wrap .img:nth-child(3) .bar{background-image: url(/support/img/container02_sec02_bar03_mob.jpg);}
.container02 .sec02 .img-wrap .img:nth-child(4) .bar{background-image: url(/support/img/container02_sec02_bar04_mob.jpg);}
.container02 .sec02 .img hr{border-top: 1px solid #ddd;margin:15px auto 30px auto; height: 1px; width: 45px; display: block;}
.container02 .sec02 .img p{font-family: 'GmarketSansMedium'; line-height: 1.4;}
.container02 .sec02 .img p b{font-family: 'GmarketSansMedium';}
.container02 .sec02 .img b{display: block; font-size: 18px; margin-bottom: 10px;}

@media (max-width: 1240px){
    #container {margin: 0 20px;padding: 50px 20px 50px 20px;}
}

@media (max-width: 1000px){
    .container02 img{width: 100%; padding: 0 10px;}
    .container02 .sec01 {padding: 50px 25px 50px 25px;}
    .container02 .sec01 > .block p{font-size: 16px;}
    .container02 .sec01 .arr{display: none;}
}

@media (max-width: 768px){
    p{font-size: 15px;}
    .harm-container .harm .harm-btn{pointer-events: all; border-bottom:0; background-image: url(/support/img/harm_arr_on.png); background-repeat: no-repeat; background-position: right 10px top 50%; font-size: 18px;padding: 20px 10px;}
    .harm-container .harm .harm-btn.on {border-bottom: 2px dashed #ddd;background-image: url(/support/img/harm_arr.png)}
    .harm-container .harm-content{height: 0; overflow: auto;}
    ul.icon {padding: 20px 10px;}
    ul.icon li{width: 100%;padding-left: 160px; font-size: 15px; line-height: 1.4; margin-bottom: 15px;}
    ul.icon li b{top: 2px}
    ul.icon li::before {top: -3px;}
    ul.dot li p{line-height: 1.4;}
    ul.dot li::before{top: 10px;}

    header > .wrap > nav a{padding: 15px;}

    footer img{width: 230px;}
    footer p{font-size: 13px;line-height: 1.5;}
    #container.container02{padding-bottom: 50px;}
    .container01 .sec01{margin-top: 30px; border:0; padding: 0px 10px;}
    .container01 .sec01 fieldset{margin-right: 0;}
    .container01 .sec01 fieldset:first-child{margin-bottom: 0;}
    .container01 .sec01 button {position: static;width: 100%;height: 45px;padding-top: 0px;font-size: 15px;background: url(/support/img/btn_back_mob.jpg)no-repeat; background-position: center;}
    .container01 .sec01 input, .container01 .sec01 select {font-size: 15px;margin-right: 0; margin-bottom: 10px;}


    .container01 .sec01 select.year,
    .container01 .sec01 select.key {width: calc(100% - 0px);}


    .container01 .sec01 select.buis {width: calc(100% - 0px);}
    .container01 .sec01 select.field {width: calc(50% - 5px); margin-right:5px}
    .container01 .sec01 select.man {width: calc(50% - 5px); margin-left:5px}

    .container01 .sec01 input.search{width: 100%;}


    .container01 .sec01 hr {margin: 20px 0;}
    
    .container02 img{display: none;}
    .container02 .sec01 {padding: 50px 25px 10px 25px;}
    .container02 .sec01 > .block p {border-top: 0px;padding-top: 0;}
    .container02 .sec01 > .block{padding-top: 0; width: 50%; margin-bottom: 40px;}
    .container02 .sec01 {margin-top: 30px;}

    .container02 .sec02 .img-wrap hr{display: none;}
    .container02 .sec02 .img-wrap .bar{display: block;}
    .container02 .sec02 .img-wrap > .img{width: 100%;}
    .container02 .sec02 .img-wrap p{margin: 20px 0 30px; }
    .container02 .sec02 .img-wrap .img:last-child p{margin-bottom: 0;}
    .container02 .sec02 .img-wrap p b{margin-bottom: 5px;}
    .container02 .sec02 .tit{text-align: center; left: 0;}
    .container02 .sec02 .tit .inner{width: 270px; margin: 0 auto;}
}

@media (max-width: 640px){
    body{background-image: url(/support/img/background_head_mob_img.jpg); background-position: top 0 left 50%;}

    .pagenation {width: 320px;margin: 30px auto 0 auto;}
    .pagenation a.first, .pagenation a.last{display: none;}
    .pagenation a.prev{margin-right: 10px;}
    .pagenation a.next{margin-left: 10px;}
    .pagenation a{margin-right: 3px; width: 40px; height: 40px;padding-top: 10px;}

    #container {margin: 0px;}

    header > .wrap {padding: 0; text-align: center;}
    header #logo{float: none; padding: 25px 0; width: 210px;}
    header > .wrap > nav{float: none; border-top: 1px solid rgba(0, 0, 0, 0.1)}
    header > .wrap > nav li{width: 50%;}
    header > .wrap > nav a{padding: 0; font-size: 17px; height: 100%;padding: 20px 0; display: block;}

    .container02 .sec02 {padding: 50px 25px 40px 25px;}
}

@media (max-width: 460px){
    br.mob{display: block;}
    ul.dot li{margin-bottom: 10px; padding-left: 10px;}
    ul.icon li{padding-left: 100px; font-size: 14px;}
    ul.icon li::before{display: none;}
    ul.icon li b{padding-left: 0;}
    .container02 .mob{display: block}
    #container { padding: 30px 20px 40px 20px;}
    h2{text-align: center; font-size: 20px;}
    h2 ~ .grey{text-align: center; line-height: 1.4; margin-top: 10px;}

    .container01 .sec02{margin-top: 26px; padding-top: 26px; border-top: 1px solid #ddd;}

    .container02 .sec01 > .block {width: 100%;margin-bottom: 30px;}
    .container02 .sec01 { padding: 30px 20px 10px 20px;}
    .container02 .sec02 .img-wrap .bar{text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
}