@charset "utf-8";

.tabmenu {position:relative; margin-bottom:5rem;}
.tabmenu ul {display:flex; flex-wrap:wrap; justify-content: space-between;}
.tabmenu ul li {width:calc(25% - 1rem); margin-bottom:1rem;}
.tabmenu ul li a {background:#f8f8f8; display:block; text-align: center; border-radius:1rem; font-size:2.6rem; color:#333; padding:3rem 0;}
.tabmenu ul li.active a {background:#333; color:#fff;}
.tabmenu ul.n2 li {width:calc(50% - 1rem);}
.tabmenu ul.n5 {justify-content: flex-start;}
.tabmenu ul.n5 li {width:calc(20% - 1rem);  margin:0 0.5rem 1rem 0.5rem;}

.tab-content {display:none;}
.tab-content.active {display:block;}

.tab-content1 {display:none;}
.tab-content1.active {display:block;}

.arealist {position:relative;}
.arealist ul {display:flex; flex-wrap:wrap; }
.arealist ul li {width:calc(33.33% - 3rem); margin-right:4.5rem; margin-bottom:8rem;}
.arealist ul li:nth-child(3n) {margin-right:0;}

.arealist ul li a {display:block; text-align:center;}
.arealist ul li a .thum {display:flex; align-items:center; justify-content: center; overflow:hidden; border-radius:3rem; max-height:35rem;}
.arealist ul li a .thum img { width:100%; transition:all .2s;}
.arealist ul li a:hover .thum img {transform: scale(1.1);}
.arealist ul li a span {font-size:2.6rem; line-height:1em; display:block; margin-top:3rem; font-weight:600; color:#000;} 

@media (max-width:1280px) {
  .arealist ul li {width:calc(33.33% - 2rem); margin-right:3rem; margin-bottom:5rem;}
  
}
@media (max-width:768px) {
  .tabmenu ul li a {font-size:2rem;}
  .tabmenu ul.n5 li {width:calc(33.3% - 1rem);}
  .arealist ul li {width:calc(50% - 1rem); margin-right:2rem!important;}
  .arealist ul li:nth-child(2n) {margin-right:0!important;}
}
@media (max-width:480px) {
  .tabmenu ul li {width:calc(50% - 0.5rem);}
  
}


.areaview {background:#fbfbfb; padding:7rem; border-radius: 0.5rem;}

.areatit {position:relative; padding:0 7rem 5rem 2rem; border-bottom:1px solid #000;  margin-bottom:7rem;}
.areatit h4 {font-weight:700; font-size:4rem; color:#000; line-height:1.2em; margin-bottom:3rem; word-break: initial;}
.areatit div span {font-size:1.8rem; margin-right:3rem;opacity:0.2;}
.areatit div span i {font-size:1.8rem; border:2px solid #000; border-radius:0.5rem; color:#000!important;  margin-right:0.5rem;}
.areatit div span.check {opacity:1;}
.areatit div span.check i { background:#000;  color:#fff!important;}
.areatit a.list_btn {position:absolute; top:50%; right:2rem; transform:translateY(-50%);}

.areacon {padding:0 2rem; display:flex; flex-wrap:wrap; justify-content: space-between;}
.areacon .ainfo {width:calc(25% - 5rem); line-height:1.2em;}
.areacon .ainfo p.alogo {margin-bottom:3rem;}
.areacon .ainfo p.alogo img {max-width:100%;}
.areacon .ainfo dl dt {font-size:2rem; font-weight:700; margin-top:3rem; margin-bottom:1.5rem; text-transform: uppercase;}
.areacon .ainfo dl span.line {font-size:1rem; transform: translateY(-0.4rem); display:inline-block; margin:0 0.5rem; color:#666;}
.areacon .ainfo dl dd a,
.areacon .ainfo dl dd {font-size:1.8rem; color:#333;}
.areacon .ainfo dl dd a i {font-size:2.2rem; color:#000; transform: translateY(0.1rem); display:inline-block; margin-right:0.3rem;}
.areacon .ainfo dl dd a:nth-of-type(1) i {font-size:2.2rem; }
.areacon .ainfo dl dd a:nth-of-type(2) i {font-size:2rem; transform: translateY(0rem); }

.areacon .ainfo dl dd a {margin:0.5rem 0; transform: translateY(-0.2em); display:inline-block;}
.areacon .ainfo dl dd a:hover span {text-decoration: underline;}
.areacon .ainfo dl dd span {display:inline-block;}
.areacon .ainfo dl dd span.line {transform: translateY(-0.8rem);}

.areacon .ainfo dl dd a i.blog{width:2rem; height:2rem;  display:inline-block; text-align:center;}
.areacon .ainfo dl dd a i.blog:before {content:'b'; font-weight:800; font-size:2rem;}

.areacon .ainfotext {width:75%; background:#fff; padding:7rem; border-radius:2rem; box-shadow:0 0 1rem rgba(0,0,0,0.1); font-size:2rem; color:#000; line-height:1.7em;}

.imggroup {position:relative; margin-top:5rem;}
.imggroup img {width:100%; vertical-align: top;}
.imggroup .imgslide {overflow:hidden;}
.imggroup .imgslide .swiper-slide {border-radius:3rem; overflow: hidden;}

.imggroup .imgthum {overflow:hidden;  background:#fbfbfb; border-radius:2rem; margin-top:2.7rem; position:relative; padding:2rem 5rem;} 

.imggroup .imgthum div[class^=img] {background:#f4f4f4; position:absolute; top:0;  z-index:1; height:100%; display:flex; align-items: center; width:4rem; justify-content: center;}
.imggroup .imgthum div[class^=img]  span {text-indent:-9999px;}
.imggroup .imgthum div.imgprev {left:0;}
.imggroup .imgthum div.imgnext {right:0;}

.imggroup .imgthum .swiper-wrapper { display:flex; justify-content: center; flex-wrap:wrap; margin-left:5px;}
.imggroup .imgthum .swiper-slide { opacity: 0.4; width:calc(9% - 10px)!important; margin:1rem 0; border-radius:0.5rem; overflow: hidden;}
.imggroup .imgthum .swiper-slide-thumb-active { opacity: 1;}

.areaview .btn_wrap{padding:4.5rem 2rem 0 2rem; border-top:1px solid #000;  display: flex;  align-items: center;  justify-content: space-between; }
.areaview .bnt_arr {display: flex;  justify-content: center;  align-items: center; }
.areaview .bnt_arr a {width:4rem; height:4rem; background-color:#fff; box-shadow: 0 0px 20px  rgb(0 0 0 / 10%); border-radius:1rem; display:flex; justify-content: center; align-items:center; margin:0 1rem; transition:all .2s;}
.areaview .bnt_arr a span {width:0; height:0; text-indent:-9999px;}
.areaview .bnt_arr a i {font-size:2.4rem; color:#000;}
.areaview .bnt_arr a.prev-month {transform:rotate(45deg);}
.areaview .bnt_arr a.next-month {transform:rotate(-45deg);}
.areaview .bnt_arr a:hover {background-color:#17255c; color:#fff;}
.areaview .bnt_arr a:hover i {color:#fff;}

/* @media (max-width:1280px) {
  .areaview {padding:2rem;}
  .areacon .ainfo {width:calc(35% - 5rem);}
  .areacon .ainfotext {width:65%;}  
} */
@media (max-width:1280px) {
  .areaview {padding:2rem;}
  .areacon .ainfo {width:100%; display:flex; flex-wrap:wrap; justify-content: space-between;}
  .areacon .ainfo p.alogo {width:100%;}
  .areacon .ainfo dl {margin-right:2rem;}
  .areacon .ainfotext {width:100%; padding:3rem; margin-top:3rem;} 
  
}
@media (max-width:768px) {
  .areaview {padding:1rem;}  
  .imggroup .imgthum .swiper-slide {  width:calc(20% - 10px)!important;  margin:0.2rem 0;}
}


.introTit {text-align:center;}
.introTit .intrologo {width:13rem; }
.qmark {position:relative; display:flex; justify-content: center; align-items:flex-end;}
.qmark:before,
.qmark:after {content:''; display:block; width:15rem; height:10rem; background:#ff000020; margin:0 1rem; background-size:contain!important;}
.qmark:before {background:url(/bb/images/sub/introqmark.png) no-repeat 50% bottom;}
.qmark:after {background:url(/bb/images/sub/introqmark2.png) no-repeat 50% bottom;}
.qmark img {max-width:100%;}

.introTit .introcopy01 {font-size:5rem; line-height:1.2em; font-weight:700; margin-top:7rem;}
.introTit .introcopy01 span {color:#0166d8;
  background: linear-gradient(90deg, #0166d8, #3aa7b8); /* 그라디언트 색상 설정 */
  -webkit-background-clip: text; /* 웹킷 브라우저 지원 */
  background-clip: text; /* 텍스트에만 배경 적용 */
  color: transparent; /* 텍스트 색상 투명 처리 */
}
.introTit .introcopy02 {font-size:2.2rem; line-height:1.5em; margin-top:2rem; letter-spacing:-0.1rem; color:#000; font-weight:500;}
@media (max-width:1280px) {
  .introTit .introcopy01 {font-size:4rem; }
}


.introsec1 {display:flex; flex-wrap:wrap; justify-content: space-between; margin-top:10rem;}
.introsec1 > div { text-align:center; width:31%;}
.introsec1 > div .tit {font-size:2.6rem; font-weight:600; line-height:1.2em; margin-top:3.5rem;}
.introsec1 > div .hash {font-size:1.2rem; font-weight:600; line-height:1.2em; margin-top:2rem;}
.introsec1 > div .hash span {background:#f0f0f0; padding:0.7rem 0 0.5rem; width:8rem; margin:0 0.3rem; display:inline-block; border-radius:10rem; font-family: 'GmarketSansMedium'; color:#333;}
.introsec1 > div p.thum {display:flex; justify-content: center; align-items:center; overflow:hidden; max-height:35rem;}
.introsec1 > div p.thum img {width:100%;}
.introsec1 > div:nth-of-type(1) p.thum {border-radius:30rem 2rem 2rem 2rem;}
.introsec1 > div:nth-of-type(2) p.thum {border-radius:4rem;}
.introsec1 > div:nth-of-type(3) p.thum {border-radius: 2rem 30rem 2rem 2rem ;}
@media (max-width:768px) {
  .introsec1 {margin-top:5rem;}
  .introsec1 > div {width:100%; margin-bottom:5rem;}
  .introsec1 > div p.thum {border-radius:3rem!important; max-height:30rem;}
  .introsec1 > div .tit {margin-top:2rem;}
}


.introsec2 { margin-top:3rem;}
.introsec2 h4 {font-size:4rem; color:#2c2e3d; font-family: 'RiaSans-ExtraBold'; text-align:center; line-height:1.2em; margin-bottom:10rem;}
.guyuc {display:flex; justify-content:space-between; flex-wrap:wrap; width:90%; margin:0 auto;}
.guyuc > div {width:48%; position:relative;}
.guyuc .thum {position:relative;}
.guyuc .thum img {border-radius:2rem; width:100%;}
.guyuc .thum span {width:10rem; height:10rem; position:absolute; top:-3rem; right:-3rem; background:#000; color:#fff; display:flex;align-items:center; justify-content: center; font-size:2.2rem; line-height:1.1em; text-align:Center; border-radius:50% 50% 50% 0;}
.guyuc > div:nth-of-type(1) .thum span {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #124676), color-stop(1, #048451));
	background: -moz-linear-gradient(-45deg, #124676 0%, #048451 100%);
	background: -webkit-linear-gradient(-45deg,  #124676 0%, #048451 100%);
	background: -o-linear-gradient(-45deg,  #124676 0%, #048451 100%);
	background: -ms-linear-gradient(-45deg,  #124676 0%, #048451 100%);
	background: linear-gradient(-45deg,  #124676 0%, #048451 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#124676', endColorstr='#048451', gradientType=1);
}
.guyuc > div:nth-of-type(2) .thum span {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #a12e73), color-stop(1, #1d64b5));
	background: -moz-linear-gradient(-45deg, #a12e73 0%, #1d64b5 100%);
	background: -webkit-linear-gradient(-45deg,  #a12e73 0%, #1d64b5 100%);
	background: -o-linear-gradient(-45deg,  #a12e73 0%, #1d64b5 100%);
	background: -ms-linear-gradient(-45deg,  #a12e73 0%, #1d64b5 100%);
	background: linear-gradient(-45deg,  #a12e73 0%, #1d64b5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a12e73', endColorstr='#1d64b5', gradientType=1);
}
.guyuc .gcon {margin-top:3rem; padding:0 2rem;}
.guyuc .gcon .gtype {font-weight:600; color:#000; font-size:2rem; line-height:1.2em;}
.guyuc .gcon .gtit {font-weight:600; color:#000; font-size:2.6rem; line-height:1.2em; margin-top:2.2rem;}
.guyuc .gcon .ghash {font-weight:500; color:#7d7d7d; line-height:1.2em; margin-top:2rem;}

.guyuc > div .gcon .gtype:before {content:''; display:inline-block; width:1.4rem; height:1.4rem; background:#333; border-radius:100%; margin-right:0.5rem;}
.guyuc > div:nth-of-type(1) .gcon .gtype:before {background:#217357;}
.guyuc > div:nth-of-type(2) .gcon .gtype:before {background:#2360b7;}
@media (max-width:1600px) {
  .guyuc {width:100%;}
}
@media (min-width:769px) and (max-width:1280px)  {
  .introsec2 h4 {margin-bottom:6rem;}
  .guyuc > div {width:100%; display:flex; flex-wrap:wrap; margin-bottom:5rem; justify-content: space-between;}
  .guyuc > div .thum {width:48%;}
  .guyuc > div .gcon {width:48%; margin-top:1rem;}
  .guyuc > div:nth-of-type(2) {flex-direction:row-reverse;}
  .guyuc .thum span {border-radius:50%!important; top:calc(50% - 5rem)!important; right:-3rem; }
  .guyuc > div:nth-of-type(2) .thum span {right:auto; left:-3rem;}
}
@media (max-width:768px) {
  .guyuc > div {width:100%; margin-bottom:5rem;}
  .guyuc .thum span {right:-1rem;}
}

.introsec3 {position:relative; min-height:88rem; margin-top:10rem; padding-top:13rem;}
.introsec3 > * {position:relative; z-index:1;}
.introsec3:before {content:''; display:block; width:2560px; height:88rem; background:url(/bb/images/sub/introsec3bg1.jpg) no-repeat 50% 0; position:absolute; top:0; left:calc(50% - 1280px);}
.introsec3:after {content:''; display:block; width:1200px; background:url(/bb/images/sub/introsec3bg2.jpg) no-repeat 50% 0; height:57rem; position:absolute; top:0; left:calc(50% + 10rem); border-radius:30rem 0 0 30rem;}

.sunsetwrap {width:50%; }
.sunsetwrap > .tit {font-size:4.5rem; font-family: 'RiaSans-ExtraBold'; color:#2c2e3d; line-height:1.42em;}
.sunsetwrap > .tit:after {content:''; display:block; width:15rem; height:10rem;  margin:0 1rem; background-size:contain!important; background:url(/bb/images/sub/introqmark3.png) no-repeat 50% bottom; position:absolute; top:-5rem; left:40rem; opacity:0.03;}

.sunsetwrap > span {display:inline-block; background:#2b5cac; color:#fff; border-radius:3rem 3rem 0 3rem; padding:1.6rem 4rem; font-size:1.7rem;margin-top:5.2rem;}
.sunsetwrap > p.copy {font-size:2.6rem; font-weight:500; line-height:1.5em; margin-top:2rem}
.sunsetwrap > p.copy2 {border-top:1px solid #000; margin-top:2.8rem; padding-top:2.5rem; font-size:1.5rem; color:#333; position:relative; padding-left:3rem;}
.sunsetwrap > p.copy2:before {content:'!'; display:flex; justify-content: center; align-items:center; margin-right:0.5rem; width:2rem; height:2rem; background:#000; color:#fff; border-radius:0.5rem; position:absolute; top:2.3rem; left:0; font-size:1.2rem; font-weight:600;}
.sunsetwrap > .hashbox {background:#fff; display:inline-block; font-weight:700; font-size:2rem; padding:3.3rem 4.7rem; margin-top:3.5rem; border-radius:1rem; box-shadow: 0 0 1rem rgba(0,0,0,0.1);}
.sunsetwrap > .hashbox strong {font-weight:700; color:#2b5cac; margin-right:3rem;}
.sunsetwrap > .hashbox span {line-height:1.2em;}
@media (max-width:1520px) {
  .introsec3 {padding-top:8rem;  min-height:auto; padding-bottom:10rem; }
  .introsec3:before { left:-2rem; background:url(/bb/images/sub/introsec3bg1.jpg) no-repeat 50% bottom;  height:100%;}
  .sunsetwrap {width:90%; margin:0 auto;}
  .introsec3:after { width:600px; height:30rem; top:-5rem;; left:calc(60% + 10rem); background-size:cover;}
  .sunsetwrap > .hashbox {width:100%;}
}
@media (max-width:1024px) {
  .sunsetwrap {width:95%;}
  .introsec3:after { width:600px; height:25rem; top:-5rem; left:calc(60% + 10rem);background:url(/bb/images/sub/introsec3bg2.jpg) no-repeat 0 0;  background-size:contain; }
}
@media (max-width:768px) {
  .sunsetwrap {width:100%;}
  .introsec3:after {left:40%; top:-8rem;  width:100%; height:15rem; background:#091f2a url(/bb/images/sub/introsec3bg2.jpg) no-repeat 0 50%; background-size:cover!important;}
  .sunsetwrap > .hashbox strong {display:block; margin-bottom:1.5rem;}
  .sunsetwrap > .tit {font-size:4rem;}
  /* .sunsetwrap > .tit br {display:none; opacity:0;} */
}

.introsec4 .intrologo {margin-top:7rem;}
.introsec4 .introTit {position:relative;}
.introsec4 .introTit:before {content:'GUIDE'; font-size:19rem; color:#5a5f84; font-family: 'RiaSans-ExtraBold'; opacity:0.05; position:absolute; bottom:0; left:calc(50% - 60rem); width:120rem; text-align:center; line-height:1em;}
.introsec4 h4 {font-size:4rem; color:#2c2e3d; font-family: 'RiaSans-ExtraBold'; text-align:center; line-height:1.2em; margin:5rem 0;}

.guideList {width:70%; margin:5rem auto;}
.guideList ol li {background:#f8f9fa url(/bb/images/sub/bbl.png) no-repeat 95% 120%; border-radius:5rem; padding:3rem 3rem 3rem 10rem; margin-bottom:2rem; position:relative;}
.guideList ol li em {width:6rem; height:6rem; border-radius:50% 50% 0 50%; display:flex; align-items:center; justify-content: center; color:#fff; font-family: 'RiaSans-ExtraBold'; font-size:1.4rem; position:absolute; top:-1rem; left:-1rem;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0.5, #4644c0), color-stop(1, #7c44b0));
	background: -moz-linear-gradient(-45deg, #4644c0 40%, #7c44b0 100%);
	background: -webkit-linear-gradient(-45deg,  #4644c0 40%, #7c44b0 100%);
	background: -o-linear-gradient(-45deg,  #4644c0 40%, #7c44b0 100%);
	background: -ms-linear-gradient(-45deg,  #4644c0 40%, #7c44b0 100%);
	background: linear-gradient(-45deg,  #4644c0 40%, #7c44b0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4644c0', endColorstr='#7c44b0', gradientType=1);
}
.guideList ol li span {font-size:1.8rem; display:flex; align-items:center; line-height:1.2em;}
.guideList ol li span:before {content:''; display:inline-block; width:3.5rem; height:2.8rem; background:url(/bb/images/sub/introsec4check.png) no-repeat 50% 50%; transform: translateY(-0.3rem); margin-right:0.5rem; background-size:contain;}

@media (max-width:1024px) {
  .introsec4 .intrologo {margin-top:0;}
  .introsec4 h4 {margin:2rem 0;}
  .guideList {width:100%;}
  .guideList ol li { padding:2rem 3rem 2rem 7rem; background:#f8f9fa;}
  .guideList ol li span {align-items:flex-start; }
}

.introsec5 {display:flex; justify-content: center; flex-wrap:wrap; padding-top:15rem; position:relative; margin-bottom:10rem;}
.introsec5:before {content:''; display:block; width:1676px; height:20rem; background:url(/bb/images/sub/timebg.png) no-repeat 50% bottom; position:absolute; left:50%; top:0; transform:translateX(-50%);}
.introsec5 .optit {position:absolute; top:18rem; left:50%; transform:translateX(-50%); z-index:2; }
.introsec5 .opbox {position:relative; width:50%;  color:#fff; z-index:1;}
.introsec5 .opbox > * {position:relative; z-index:1;}
.introsec5 .opbox:before {content:''; display:block; width:1280px; height:100%;position:absolute; top:0; z-index:0; }
.introsec5 .opbox.left:before { background:#26293d; right:0; border-radius:0 30rem 30rem 0;}
.introsec5 .opbox.right:before { background:#4079c7; left:0; border-radius:30rem 0 0 30rem;}
.introsec5 .opbox.left {display:flex; justify-content: flex-end; padding:7rem 18rem 7rem 0;}
.introsec5 .opbox.right {display:flex; justify-content: flex-start; padding:7rem 0 7rem 18rem;}

.introsec5 .opbox .opcon {width:80%; font-weight:500; line-height:1.2em;}
.introsec5 .opbox .opcon div {border-bottom:1px solid #fff;}
.introsec5 .opbox .opcon div span {font-size:1.8rem; display:inline-block;}
.introsec5 .opbox .opcon div p {font-size:1.8rem; margin:2rem 0 3rem; }
.introsec5 .opbox .opcon div p strong {font-size:3rem; font-weight:700; margin-right:2rem;}
.introsec5 .opbox .opcon p.oppoint {position:relative;  margin-top:3rem; padding-left:2.5rem;}
.introsec5 .opbox .opcon p.oppoint:before {content:'!'; display:flex; justify-content:center; align-items:center; width:1.8rem; height:1.8rem; background:#fff; color:#091f2a; border-radius:0.5rem; margin-right:1rem; font-size:1.2rem; position:absolute; top:0.1rem; left:0;}
.introsec5 .opbox .opcon p.oppoint span {opacity:0.5; font-size:1.5rem;}
@media (max-width:1024px) {
  .introsec5 .opbox .opcon {width:100%;}
}
@media (max-width:768px) {
  .introsec5 {padding-top:20rem;}
  .introsec5 .optit {position:absolute; top:0; left:100%; transform:translateX(-100%); z-index:4;}
  .introsec5 .opbox {width:100%;}
  .introsec5 .opbox.left { padding:4rem 6rem 4rem 0;  z-index:3;}
  .introsec5 .opbox.right { padding:4rem 0 4rem 10rem; margin-top:-2rem; z-index:2;}
}

.view_info ul li {line-height:2em;}
.view_file dd {margin-top:1rem;}

.lecture_wrap {position:relative; display:flex; justify-content:space-between; flex-wrap:wrap;}

.lecture_wrap .lecture_img {width:35%;}
.lecture_wrap .lecture_img:not(:has(img)) {background:#fbfbfb url(/bb/images/sub/area-none.jpg) no-repeat 50% 50%;}
.lecture_wrap .lecture_img img {width:100%;}
.lecture_wrap .lecture_con {width:calc(65% - 5rem);}


@media (max-width:768px) {
	.lecture_wrap .lecture_img {width:100%;}
	.lecture_wrap .lecture_con {width:100%;}
	}




/*설문조사*/
.bod_poll .cont .tit{font-size:2.5rem;     font-weight: 700;}
.bod_poll .cont dl{font-size:1.8rem;}
.bod_poll .cont dt{font-weight: 500;}
.poll_view .info >dl{font-size:1.8rem;}
.poll_view .tit,
.poll_view .agree_wrap dl,
.poll_view .agree_wrap .choose{font-size:1.8rem;}
.poll_view .agree_wrap dt, .poll_view .agree_wrap dd{padding: 1.5rem 0;}
.poll_view h5{font-size:2.0rem;}

.poll_view .agree_wrap .choose{padding: 1.5rem 0;}
.btn_wrap .btn.red{border:1px solid #b71f25; color:#fff; background:#b71f25;}


.view_cont >img{width:100%}