@charset "utf-8";

/*intro1*/
.intro1{}
.intro1 .greeting{display: flex; justify-content: space-between; align-items: center;}
.intro1 .greeting .txt{width: 50%;}
.intro1 .greeting .txt h3{font-size: 4.8rem; color: #777777; line-height: 1.2em; letter-spacing: -0.05em;}
.intro1 .greeting .txt h3 span{color: #ee3335;}
.intro1 .greeting .txt p{margin:40px 0; color: #777777; line-height: 2em; word-break: keep-all;}
.intro1 .greeting .txt p span{font-weight: 500; color: #444444; font-size: 1.9rem;}
.intro1 .greeting .img{width: 50%; text-align: center;}
.intro1 .greeting .img img{max-width: 100%;}

@media all and (max-width:999px){
    .intro1 .greeting .txt{width: 100%;}
    .intro1 .greeting .img{display: none;}
    .intro1 .greeting .txt h3{font-size: 3.2rem;}
    .intro1 .greeting .txt p{margin: 2rem 0;}
}

.intro1_bg{background: url(/images/sub/intro1_bg.jpg) no-repeat top; margin-top: 90px;}
.intro1_bg > .tit{text-align: center; padding: 100px 0 80px; color: #fff; font-size: 3.2rem; font-weight: 500; line-height: 1.8em;}
.intro1_bg > .tit span{font-size: 4.8rem; color: #faa737; font-weight: 600;}

.intro1_bg .s-inner{background-color: #fff; padding: 80px;}
.intro1_bg .s-inner ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.intro1_bg .s-inner ul li{width: calc(50% - 60px);display: flex; justify-content: space-between; margin-bottom: 60px;}
.intro1_bg .s-inner ul li .year{font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 3.6rem; background: url(/images/sub/year_bg.png) no-repeat center center; background-size: 140px !important; width: 140px; height: 162px; color: #fff; display: flex; justify-content: center; align-items: center;}
.intro1_bg .s-inner ul li .content{width: calc(100% - 200px); margin-top: 40px;}
.intro1_bg .s-inner ul li .content dl{display: flex; margin-bottom: 10px;}
.intro1_bg .s-inner ul li .content dl .month{font-family: 'Montserrat', sans-serif;font-weight: 600; font-size: 2.4rem; color: #000000; width: 60px;}
.intro1_bg .s-inner ul li .content dl .txt{width: calc(100% - 60px); word-break: keep-all; font-size: 1.8rem; color: #777777; line-height: 1.6em;}
.intro1_bg .s-inner ul li .content dl .txt span{font-size: 1.6rem; color: #999;}

@media all and (max-width:1280px){
    .intro1_bg .s-inner{padding: 50px;}
    .intro1_bg .s-inner ul li{width: calc(50% - 30px);}
    .intro1_bg .s-inner ul li .year{background-size: 100px !important; font-size: 2.4rem; width: 100px;}
    .intro1_bg .s-inner ul li .content{width: calc(100% - 140px); margin-top: 50px;}
}
@media all and (max-width:999px){
    .intro1_bg{margin-top: 10%;}
    .intro1_bg > .tit{padding: 10% 0 8%; font-size: 2.4rem;}
    .intro1_bg > .tit span{font-size: 3.2rem;}
    .intro1_bg .s-inner ul li{width: 100%; margin-bottom: 30px;}
    .intro1_bg .s-inner ul li:nth-child(even){flex-direction: row-reverse;}
    .intro1_bg .s-inner ul li:nth-child(even) .content dl{flex-direction: row-reverse; text-align: right;}
}
@media all and (max-width:640px){
    .intro1_bg .s-inner{padding: 6%; width: 100%;}
    .intro1_bg .s-inner ul li{margin-bottom: 40px;}
    .intro1_bg .s-inner ul li .year{background-size: 70px !important; font-size: 2rem; width: 70px; height: 81px;}
    .intro1_bg .s-inner ul li .content{width: calc(100% - 100px); margin-top: 20px;}
    .intro1_bg .s-inner ul li .content dl .month{width: 40px; font-size: 2rem;}
    .intro1_bg .s-inner ul li .content dl .txt{font-size: 1.6rem; width: calc(100% - 40px);}
    .intro1_bg .s-inner ul li .content dl .txt span{font-size: 1.4rem;}
}
@media all and (max-width:480px){
    .intro1_bg .s-inner ul li{flex-direction: column !important;}
    .intro1_bg .s-inner ul li .content{width: 100%;}
    .intro1_bg .s-inner ul li .content dl .month{width: 35px;}
    .intro1_bg .s-inner ul li .content dl .txt{width: calc(100% - 35px);}
    .intro1_bg .s-inner ul li:nth-child(even) .content dl{flex-direction: row; text-align: left;}
}

h3.tit{font-size: 2.4rem; font-weight: 600; color: #ee3335; margin-bottom: 3rem;}
h3.tit::before{
    content: '';
    width: 18px;
    height: 13px;
    background: url(/images/sub/title.png) no-repeat left top;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.cert_tit{font-size: 2rem; color: #232323; margin-bottom: 1.5rem; font-weight: 600;}
.cert_tit a{display: inline-block; margin-left: 1rem; font-size: 1.3rem; color: #ee3335; background: transparent; border:1px solid #ee3355; padding: 1em 2em; font-family: 'Noto Sans KR', sans-serif; cursor: pointer}
.cert_tit span{font-size: 1.6rem; color: #555; font-weight: 300;}

.tb-style2 { position: relative; width: 100%; border: 0px; border-top: 2px solid #ee3335;}
.tb-style2.green { position: relative; width: 100%; border: 0px; border-top: 2px solid #4dbf70;}
.tb-style2.min720{min-width: 720px;}
.tb-style2 th { background: #f5f5f3; font-weight: 500; color:#242424; padding: 0.75em .375em; border: 0px; border-bottom: 1px solid #e0e1e3; position: relative;}
.tb-style2.green th{background-color: #f6fdf7;}
.tb-style2 th.cate{background: transparent;  color:#ee3335; font-weight: 600; border-right: 1px solid #ccc;}
.tb-style2 td { padding: 0.9em 1em; border: 0px; border-bottom: 1px solid #e0e1e3; border-left: 1px solid #e0e1e3; word-break: keep-all;}
.tb-style2 td span{font-weight: 500; color: #333;}
.tb-style2 td span.price{color: #ee3335; display: inline-block; margin-left: 10px;}
.tb-style2 td span.on{display:block; color:#fff; line-height:2em; background:  #4dbf70;}
.tb-style2 td span.off{display:block; color:#999; line-height:2em; border:1px solid #999;}
.tb-style2 td.number{padding-left: 0; padding-right: 0;}
.tb-style2 td a.check{color: cadetblue;}
.tb-style2 td a.check:hover{color: #232323;}
.tb-style2 td span#copy{font-weight: 600;}
.tb-style2 td small{font-size: 1.3rem; color: indianred}
.tb-style2 td .download{font-size: 1.4rem; color: red; border: 1px solid red; padding: .5rem; display: inline-block; margin-right: 1rem; margin-top: 1rem;}
.tb-style2 td.red{color: #ee3335;}
.tb-style2 td.blue{color: darkblue;}

div.flex{display: flex;}
.n_line{margin: 0 .5em; font-size: 1.125em; line-height: 30px;}
.bullet_red{color: #ee3335; font-weight: 300; position: absolute; right: 10px; top: 10px;}

.tb-write tr th { width: 15%; word-break: keep-all;}
.tb-write tr th.w7 { width: 7%; word-break: keep-all;}
.tb-write tr th.red{color: #ee3335; background-color: #f8f8f8;}
.tb-write tr th.cate { width: 15%; }
.tb-write tr th.cate.num { width: 5%; background-color: transparent;}
.tb-write p { line-height: 1.25em; font-size: 0.9em; margin-top: 3px; }
.wr_input { border: 1px solid #e0e1e3; width: 100%; height: 30px; line-height: 30px; padding: .5em;}
.wr_input[type = "radio"] {height: 16px; width: 16px; cursor: pointer}
.wr_select { border: 1px solid #e0e1e3; height: 30px; line-height: 30px;  font-size: 0.9em; padding: 0 5px;   }
.wr_input.wid70 { width: 70%; }
.wr_input.wid40 { width: 40%; }
.wr_select.wid40 { width: 40%; }
.wr_txt { border: 1px solid #e0e1e3; width: 100%; margin: 0; }
.wr_btn { border-radius: 3px; padding: 0 1em; line-height: 30px; height: 30px;
              background: #ee3335; color:#fff; border:0; }
.btn_box{text-align: center; margin-top: 2em;}
.btn_box input{text-align: center; background: #ee3335; color: #fff; border: 0px; padding: 1em 2em; font-family: 'Noto Sans KR', sans-serif; cursor: pointer}
.btn_box ul{display: flex; justify-content: center;}
.btn_box a{text-align: center; background: #ee3335; color: #fff; border: 0px; padding: .5em 2em; font-family: 'Noto Sans KR', sans-serif; cursor: pointer; margin: 0 .5em; display: inline-block;}
.btn_box.line a{text-align: center; background: #fff;  color: #007FCA; border: 1px solid #007fca; padding: .5em 2em; font-family: 'Noto Sans KR', sans-serif; cursor: pointer; margin: 0 .5em; display: inline-block; font-size: 1.125em;}
.btn_box a.green{background: #4dbf70;}
.btn_box a.gray{text-align: center; background: #444; color: #fff; border: 0px; padding: .5em 2em; font-family: 'Noto Sans KR', sans-serif; cursor: pointer}
.btn_box.st1 input{text-align: center; color: #ee3335; background: transparent; border:1px solid #ee3355; padding: 1em 2em; font-family: 'Noto Sans KR', sans-serif; cursor: pointer}

.cert2 p{font-size: 1.8rem; font-weight: 300; color: #444; line-height: 1.8em;}
.cert2 .box{padding: 2rem 3rem; border: 1px solid #ccc; margin-top: 1rem;}
.cert2 p span{font-weight: 500; color: #232323; display: inline-block;}

.textarea{margin-top: 2rem;}
.textarea textarea{width: 100%; resize: none; font-family: 'Noto Sans KR', sans-serif; border: 1px solid #ccc; max-height: 100px; padding:1rem 2rem; text-align: left;text-indent: 0px; font-size: 16px; color: #333;}

@media all and (max-width:999px) {
  .tb-write tr th { width: 30%; }
    .tb-write tr th.w7{width: 30%;}
  .tb-write .wr_select { width: 100%; }
  .wr_select.mo90 { width: calc(100% - 70px); }
  .wr_select.wid10 { width: 45px; }
    
    .tb-style2.mob tr{display: flex; flex-wrap: wrap;}
  .tb-style2.mob tr th { clear: both; float: left; line-height: 30px; padding:10px; line-height: 1.5em; word-break:keep-all;}
    .tb-write tr th.cate { width: 100%; border-right: 0;}
    .tb-write tr th.cate.num { width: 100%; border-right: 0;}
  .tb-style2.mob tr td { float: left; width: 70%; line-height: 30px; padding: 10px; border-left:0; display: flex; align-items: center; flex-wrap: wrap; line-height: 1.5em; word-break:keep-all;}

  .tb-style2.mob tr.row2 th { line-height: 60px; }
  .tb-style2.mob tr.row2 th + td { height: 82px; }
  .tb-style2.mob tr.row5 th { line-height: 100px; }
  .tb-style2.mob tr.row5 th + td { height: 122px; }

  .tb-style2.mob tr.row5 .wr_txt { height: 89px; }

}
@media all and (max-width:720px){
    .of{overflow-x:scroll}
    .min720 tr th { width: 20%; }
}

@media all and (max-width:320px) {
  .tb-style2.mob { border-left: 1px solid #e0e1e3; border-right: 1px solid #e0e1e3; }
  .tb-style2.mob tr th { display: block; width: 100%; padding: 0.7em; line-height: 1.2em !important; height: auto !important;   }
  .tb-style2.mob tr td { display: block; width: 100%; height: auto !important;  }
}

/* 정관 */
.intro3{}
.intro3 .article{ margin-bottom: 2em;}
.intro3 .article h3{border: 1px solid #ee3335; padding: 1em 2em; margin-bottom: 1em; color: #ee3335}
.intro3 .article .txt{line-height: 1.8em; font-weight: 300; color: #444; margin-left: 1em;}
.intro3 .article .txt span{font-weight: 500; display: inline-block; margin-right: .75em; margin-top: 1em; font-size: 1.125em;}
.intro3 .article .txt b{font-weight: 500;}
.intro3 .article .txt ul{margin-left: 1em; margin-top: .5em;}
.intro3 .article .txt ul li{color: #666;}
.intro3 .article .txt ul li ol{margin-left: 1em;}
.intro3 .article .txt ul li ol li{}

/* 특별후원사 */
.special_title{margin: 1% 1% 2%;  border: 12px solid;
    border-image: linear-gradient(to right, #f12711, #f5af19);
    border-image-slice: 1; border-bottom: 0;}
.special_title .txt{text-align: center; padding: 2em;}
.special_title .txt h3{margin-bottom: 5px; font-size: 1.5em; color: #F37015;}
.special_title .txt p{font-weight: 300; font-size: 1.125em; word-break: keep-all;}
.special_dona{display: flex; flex-wrap: wrap;}
.special_dona li{text-align: center; width: 31.33333%; padding: 1em; border: 1px solid #dedede; margin: 1% 1%; transition: .2s ease-in-out;}
.special_dona li:hover{border: 1px solid #F37015;}
.special_dona li .img{margin-bottom: .5em;}
.special_dona li .img img{}
.special_dona li p{transition: .2s; font-size: 1.125em;}
.special_dona li p span{font-size: .875em; font-weight: 300;}
.special_dona li:hover p{color: #F37015;}

@media all and (max-width:720px){
    .special_dona li{width: 48%;}
}
@media all and (max-width:480px){
    .special_title .txt{padding: 2em 1.75em;}
    .special_dona li{width: 98%;}
}

/* 오시는 길 */
.root_daum_roughmap .wrap_controllers{display: none;}
.intro5{}
.map_add_wrap{text-align:center; width:100%; overflow:hidden; margin-bottom:30px; padding:30px 0; /* border-bottom:1px solid #ddd; */ }
.map_add_wrap .add{font-size:2em;  color:#212121;  }
.map_add_wrap .tel{margin-top:1.5em; text-align:Center;}
.map_add_wrap .tel>div{ display:inline-block; margin:0 10px;}
.map_add_wrap .tel .icon{width:50px; height:50px; background:#ee3335 url(/images/sub/sub0104_img_01.png) no-repeat center center; float:left}
.map_add_wrap .tel .f .icon{background:#F37015 url(/images/sub/sub0104_img_02.png) no-repeat center center; }
.map_add_wrap .tel .c{float:left; text-align:Center; height:50px; line-height:50px; background-color:#f4f4f4; padding:0 25px ;}
.map_add_wrap .tel .c .hidden{opacity: 0;}

@media all and (max-width:650px) {
	.map_wrap .root_daum_roughmap .wrap_map{height:350px !important}
	.map_add_wrap .add{font-size:1.6em;}
}
@media all and (max-width:450px) {
	.map_wrap .root_daum_roughmap .wrap_map{height:300px !important}
}


/* 회원안내 */
.profile1{}
.profile1 p.txt{font-size: 1.125em; font-weight: 300; -ms-word-break: keep-all;
word-break: keep-all;}
.profile1 p.txt span{font-weight: 500;}
.profile1 p.txt.bg1{}
.profile1 .text{margin-bottom: 1em; border: 1px solid #ccc; padding: 1em 2em;}
.profile1 .text span{color: #ff6301; font-weight: 500; font-size: 1.125em; border-bottom: 1px solid #ff6301; display: inline-block; margin-bottom: .25em;}
.step {text-align:center;}
.step ul {display:table; width:1240px; text-align:center; margin:0 auto}
.step li {display:table-cell; padding-top:110px; width:105px; font-size:17px; line-height:1.4em; font-weight:300;}
.step .arrow {width:19px; height:28px; background:url(/images/sub/step_arrow.png) no-repeat center center; padding:0;}
/*.step .border{border: 1px solid #dedede;}*/
.step .step1 {background:url(/images/sub/sec3_img1.png) no-repeat center top;}
.step .step2 {background:url(/images/sub/sec3_img2.png) no-repeat center top;}
.step .step3 {background:url(/images/sub/sec3_img3.png) no-repeat center top;}
.step .step4 {background:url(/images/sub/sec3_img4.png) no-repeat center top;}
.step .step5 {background:url(/images/sub/sec3_img5.png) no-repeat center top;}
.step .step6 {background:url(/images/sub/sec3_img6.png) no-repeat center top;}

@media all and (max-width:1239px){
    .step ul{width: 94%;}
}
@media all and (max-width:999px){
    .step{margin-top: 40px}
    .step ul{display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
    .step .arrow{margin: 0 2%;}
    .step .arrow.none{display: none;}
    .step .step1,.step .step2,.step .step3,.step .step4,.step .step5,.step .step6{width: 28%; background-size: 9vw;}
    .step li{padding-top: 80px;}
    .step .step4,.step .step5{margin-top: 30px;}
    .profile1 p.txt br{display: none;}
}
@media all and (max-width:640px){
    .step .step1,.step .step2,.step .step3,.step .step4,.step .step5,.step .step6{width: 45%; background-size: 12vw;}
    .step .arrow.none{display: block;}
    .step .arrow.odd{display: none;}
    .step li{font-size: 15px; padding-top: 64px;}
}
@media all and (max-width:480px){
    .step .step1,.step .step2,.step .step3,.step .step4,.step .step5,.step .step6{background-size: 14vw;}
    .step li{padding-top: 52px;}
}

ul.list{}
ul.list li{ border-bottom: 1px dotted #ccc; margin-bottom: .75em; font-size: 1.125em; color: #444; font-weight: 300; letter-spacing: -0.05em; padding-bottom: .5em;}
ul.list li span{font-weight: 400; color: #888; margin-right: .25em;}

/* 이용약관 개인정보 */
.member { box-sizing: border-box; line-height: 1.5em; }
.member .stit { color:#212121; font-weight: 600; font-size: 1.2em;  }
.member .stit2 { color:#212121; font-weight: 600; }

h3.title{text-align: center; margin-top: 2em; font-size: 1.25em; margin-bottom: .5em}
h3.title span{font-weight: 400;}

ul.tab{display: flex; justify-content: center; margin-top: 2em;}
ul.tab li{border: 1px solid #ccc; padding: .5em 2em; margin-left: -1px; cursor: pointer; transition: .2s;}
ul.tab li.on{color: #fff; font-weight: 500; background-color: #444; border: 1px solid #444;}
ul.tab li:hover{color: #fff; font-weight: 500; background-color: #444; border: 1px solid #444;}

.tabcontent{display: none;}
.tabcontent.on{display: block;}

@media all and (max-width:999px){
    ul.tab{flex-wrap: wrap; justify-content: flex-start;}
    ul.tab li{width: 25%;margin-top: -1px;}
}
@media all and (max-width:720px){
    ul.tab li{width: 33.33333%;}
}
@media all and (max-width:480px){
    ul.tab li{width: 50%;}
}