.swiper-slide img{ width:100%; max-width:100%;}

header{ position:absolute; z-index:5; left:0; top:0;}
header > a > span{ color:#fff;}

.MenuBtn{ background-color:transparent;}
.MenuBtn:hover{ background-color:transparent;}
.MenuBtn_on{ background-color:transparent;}
.MenuBtn_on:hover{ background-color:transparent;}


section{ width:100%; display:inline-block;}

#HotSlide .swiper-slide{ text-align:center; width:100%; height:100vh; position:relative; display:inline-block; overflow:hidden; position:relative;}

#HotSlide .swiper-slide > .mainImage{ width:100%; height:100vh;; display:inline-block;; background-position:center center; background-repeat:no-repeat; position:relative; position:absolute; left:0; background-size:cover;}
#HotSlide .swiper-slide > .mainImage.img1{background-image:url(https://file.k-friends.kr/img/20210406/015957_0.png);}
#HotSlide .swiper-slide > .mainImage.img2{background-image:url(https://file.k-friends.kr/img/20210406/020036_0.png);}
#HotSlide .swiper-slide > .mainImage.img3{background-image:url(https://file.k-friends.kr/img/20210406/020056_0.png);}




#HotSlide .swiper-slide .maininfo{ position:absolute; left:1em; bottom:1em; color:#000; text-align:left; z-index:4; background-color:rgba(255,255,255,0.7); border-radius:12px; padding:0.5em 1em; display:none;}
#HotSlide .swiper-slide .maininfo > p{ font-size:14px; color:#000;}
#HotSlide .swiper-slide .maininfo > a{ font-size:18px; color:#000; font-weight:900;}
#HotSlide .swiper-slide .maininfo > span{ font-size:18px; color:#000; margin:0 0.3em;}


.main2{ text-align:center; width:100%; display:inline-block; float:left;;}
.main2 > div{ width:100%; display:inline-block;  background-color:#f0f1f1; padding:2em 0; padding-bottom:3em; background-image:url(/file/img/backlogo.png); background-repeat:no-repeat; background-position:top center; background-size:400px auto;}
.fment1{ margin-top:3.2em;}
.fment1 > p{ font-size:14px; color:#414042;}
.fment1 > h3{ font-size:19px; color:#d0621b; font-weight:900; margin-left:2em; margin-right:2em;}
.fment1 > h3 > span{ display:block;}
.fment1 > hr{ width:80px; height:4px; background-color:#838383; margin-bottom:1.5em; }

.fment2{ margin-top:1.6em;}
.fment2 > p{ font-size:14px; color:#58595b; margin:0 3em;}
.fment2 > p > br{ display:none;}

.flistdiv{ margin-top:3.8em;; width:100%; display:inline-block;}
.flistdiv > ul{ display:inline-block; width:100%; margin:auto;}
.flistdiv > ul > li{ display:block; width:90%; position:relative; margin:auto; margin-bottom:11px;}
.flistdiv > ul > li .firstline{ display:flex; position:relative;}
.flistdiv > ul > li .firstline:before{ content:""; border:3px solid #fff; width:100%; height:100%; left:0; top:0; position:absolute; display:inline-block;}
.flistdiv > ul > li .img{ width:150px; display:inline-block; float:left; z-index:1; position:relative; background-size:cover; background-position:center center;}
.flistdiv > ul > li .text{ display:inline-block; float:left; background-color:#fff; z-index:1; position:relative; text-align:center; flex-grow:1; }
.flistdiv > ul > li .text h3{ font-size:19px; font-weight:900; color:#58595b; margin-top:1em;}
.flistdiv > ul > li .text p{ font-size:12px; color:#808184;}
.flistdiv > ul > li .text a{ width:80%; display:inline-block; padding:0.2em; color:#fff; font-size:14px; margin-top:1em; margin-bottom:2em;}
.flistli1 .img{ background-image:url(/file/img/running.png);}
.flistli2 .img{ background-image:url(/file/img/cycle.png);}
.flistli3 .img{ background-image:url(/file/img/hiking.png);}
.flistli1 .text a{ background-color:#f9a71d;}
.flistli2 .text a{ background-color:#ce4d98;}
.flistli3 .text a{ background-color:#319259;}

.main3{ text-align:center; width:100%; display:inline-block; float:left; }
.main3 > div{ background-color:#fff2cc; width:100%; display:inline-block; padding:5em 0; padding-bottom:6em;}

.main3 > div > h3{ font-size:16px; font-weight:900; color:#414042; line-height:1.4;}
.main3 > div > .fafter1 > hr{ width:80px; height:4px; background-color:#838383; margin-bottom:1.5em; }
.main3 > div > .fafter1 > p{ font-size:12px; color:#6d6e71; margin:0 3em;}
.main3 > div > .fafter1 > p > br{ display:none;}
.main3 > div > .fafter1 > p > span{ margin:1em 0; font-size:11px; display:inline-block;}

.main12 .maininfo{ color:#000; padding:0.5em 2em; text-align:right;}
.main12 .maininfo > div > p{ font-size:14px; color:#000;}
.main12 .maininfo > div > a{ font-size:18px; color:#000; font-weight:900;}
.main12 .maininfo > div > span{ font-size:18px; color:#000; margin:0 0.3em;}

.main13 .backtext{ margin-left:1em; }
/*
.fafter2{}
.fafter2 ul{ display:inline-block; width:310px; height:182px; margin-top:3em;}
.fafter2 ul > li{background-size:310px 132px;}
.fafter2 ul.fafterul1 > li{ display:inline-block; float:left; background-repeat:no-repeat; background-image:url(/file/img/after1.png); }
.fafter2 ul.fafterul1 > li:nth-child(1){ width:75px; height:132px; background-position:0 0;}
.fafter2 ul.fafterul1 > li:nth-child(2){ width:75px; height:65px; background-position:-78px 0; margin-left:3px;}
.fafter2 ul.fafterul1 > li:nth-child(3){ width:75px; height:65px; background-position:-157px 0; margin-left:3px;}
.fafter2 ul.fafterul1 > li:nth-child(4){ width:75px; height:65px; background-position:-235px 0; margin-left:3px; }
.fafter2 ul.fafterul1 > li:nth-child(5){ width:75px; height:65px; background-position:-76px -67px; margin-left:3px; margin-top:3px; }
.fafter2 ul.fafterul1 > li:nth-child(6){ width:153px; height:65px; background-position:-157px -67px; margin-left:3px; margin-top:3px;}

.fafter2 ul.fafterul2 > li{ display:inline-block; float:left; background-repeat:no-repeat; background-image:url(/file/img/after2.png);}
.fafter2 ul.fafterul2 > li:nth-child(1){ width:75px; height:132px; background-position:0 0;}
.fafter2 ul.fafterul2 > li:nth-child(2){ width:75px; height:65px; background-position:-78px 0; margin-left:3px;}
.fafter2 ul.fafterul2 > li:nth-child(3){ width:75px; height:65px; background-position:-157px 0; margin-left:3px;}
.fafter2 ul.fafterul2 > li:nth-child(4){ width:75px; height:65px; background-position:-235px 0; margin-left:3px; }
.fafter2 ul.fafterul2 > li:nth-child(5){ width:153px; height:65px; background-position:-78px -67px; margin-left:3px; margin-top:3px; }
.fafter2 ul.fafterul2 > li:nth-child(6){ width:71px; height:65px; background-position:-235px -67px; margin-left:2px; margin-top:3px;}

.fafter2 ul.fafterul3{ width:310px;}
.fafter2 ul.fafterul3 > li{ display:inline-block; float:left; background-repeat:no-repeat; background-image:url(/file/img/after3.png);}
.fafter2 ul.fafterul3 > li:nth-child(1){ width:75px; height:65px; background-position:0 0;}
.fafter2 ul.fafterul3 > li:nth-child(2){ width:75px; height:65px; background-position:-78px 0; margin-left:3px;}
.fafter2 ul.fafterul3 > li:nth-child(3){ width:75px; height:65px; background-position:-157px 0; margin-left:3px;}
.fafter2 ul.fafterul3 > li:nth-child(4){ width:75px; height:132px; background-position:-235px 0; float:right;  }
.fafter2 ul.fafterul3 > li:nth-child(5){ width:153px; height:65px; background-position:0 -67px; margin-top:3px; }
.fafter2 ul.fafterul3 > li:nth-child(6){ width:75px; height:65px; background-position:-157px -67px; margin-left:3px; margin-top:3px;}

*/
.fafter2{}
.fafter2 ul{ display:inline-block; width:307px; height:600px; margin-top:3em; overflow:hidden; position:relative; transform:scale(1.1)}
.fafter2 ul > li{background-size:620px 264px;position:absolute;}
.fafter2 ul.fafterul1 > li{ display:inline-block; float:left; background-repeat:no-repeat; background-image:url(/file/img/after1.png); }
.fafter2 ul.fafterul1 > li:nth-child(1){ width:150px; height:264px; background-position:0 0; top:0; left:0;}
.fafter2 ul.fafterul1 > li:nth-child(2){ width:150px; height:130px; background-position:-157px 0; top:0; right:0; }
.fafter2 ul.fafterul1 > li:nth-child(3){ width:150px; height:130px; background-position:-314px 0; right:0; top:135px;}
.fafter2 ul.fafterul1 > li:nth-child(4){ width:150px; height:130px; background-position:-471px 0; left:0; top:270px; }
.fafter2 ul.fafterul1 > li:nth-child(5){ width:150px; height:130px; background-position:-157px -135px; right:0; top:270px;}
.fafter2 ul.fafterul1 > li:nth-child(6){ width:307px; height:130px; background-position:-314px -135px; left:0; top:406px;}

.fafter2 ul.fafterul2 > li{ display:inline-block; float:left; background-repeat:no-repeat; background-image:url(/file/img/after2.png);}
.fafter2 ul.fafterul2 > li:nth-child(1){ width:150px; height:264px; background-position:0 0; left:0; top:0;}
.fafter2 ul.fafterul2 > li:nth-child(2){ width:150px; height:130px; background-position:-157px 0; top:0; right:0;}
.fafter2 ul.fafterul2 > li:nth-child(3){ width:150px; height:130px; background-position:-314px 0; top:135px; right:0;}
.fafter2 ul.fafterul2 > li:nth-child(4){ width:150px; height:130px; background-position:-471px 0; top:406px; left:0; }
.fafter2 ul.fafterul2 > li:nth-child(5){ width:307px; height:130px; background-position:-157px -135px; top:270px; left:0; }
.fafter2 ul.fafterul2 > li:nth-child(6){ width:152px; height:130px; background-position:-471px -135px; top:406px; right:0; }

.fafter2 ul.fafterul3 > li{ display:inline-block; float:left; background-repeat:no-repeat; background-image:url(/file/img/after3.png);}
.fafter2 ul.fafterul3 > li:nth-child(1){ width:150px; height:130px; background-position:0 0; left:0; top:0;}
.fafter2 ul.fafterul3 > li:nth-child(2){ width:150px; height:130px; background-position:-157px 0; top:0; right:0;}
.fafter2 ul.fafterul3 > li:nth-child(3){ width:150px; height:130px; background-position:-314px 0; top:136px; left:0; }
.fafter2 ul.fafterul3 > li:nth-child(4){ width:150px; height:264px; background-position:-471px 0; top:136px; right:0;  }
.fafter2 ul.fafterul3 > li:nth-child(5){ width:307px; height:130px; background-position:0 -135px; top:406px; left:0; }
.fafter2 ul.fafterul3 > li:nth-child(6){ width:150px; height:130px; background-position:-314px -135px; left:0; top:270px;}


.swiper-pagination-bullet{ width:14px; height:14px;}
.swiper-pagination-bullet-active{ background-color:#ffc000;}

.main3 > div > nav{ width:320px; display:block; margin:auto; text-align:left;}
.main3 > div > nav > a{ display:inline-block; text-align:left; margin-top:3.2em;}
.main3 > div > nav > a > span{ font-size:14px;}
.main3 > div > nav > a > img{ width:45px; height:45px; border-radius:0px; float:left; margin-right:0.5em; margin-top:0.2em;}



.main5{ width:100%; display:inline-block; float:left;}
.main5 > div{ width:100%; display:inline-block;  background-repeat:no-repeat;background-image:url(/file/img/backlogo2.png); background-repeat:no-repeat; background-position:center center; background-size:320px auto;}
.main5 > div > div{ width:100%; display:block; margin:auto; text-align:center; margin:10vh 0;}
.main5 > div > div > h3{ font-size:30px; font-weight:900; color:#231f20; margin-bottom:0.3em;}
.main5 > div > div > hr{ width:80px; height:4px; background-color:#838383;  margin-bottom:2em;}
.main5 > div > div > p{ font-size:14px;  color:#6d6e71; width:100%; display:inline-block; margin-bottom:1.5em; }



.main6{ width:100%; display:inline-block; float:left;}
.main6 > div{ width:100%; display:flex; height:200px; background-image:url(/file/img/main5img.png); background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative;}
.main6 > div > div{ width:50%; display:block; margin:auto; border-left:6px solid #ffc000; padding-left:12px; margin-top:2.7em; margin-left:1.6em;}
.main6 > div > div > h3{ font-size:16px; font-weight:900;  color:#231f20;  margin-bottom:0.23em; line-height:1.4;}
.main6 > div > div > hr{ width:80px; height:4px; background-color:#838383; float:left; margin-bottom:1.58em;}
.main6 > div > div > p{ font-size:12px; color:#6d6e71; width:100%; display:inline-block; line-height:1.8; }

.main6 > div > nav{ width:50%; display:block; margin:auto; text-align:right;}
.main6 > div > nav > a{ font-size:14px; border:2px solid #6d6e71; color:#6d6e71; font-weight:900; padding:0.5em 1.45em; background-color:#fff;  display:inline-block; margin-top:6em; position:absolute; right:0.5em; bottom:0.5em;}
.main6 > div > nav > a:hover{ border:3px solid #7182f9; color:#7182f9;}


.main7{ width:100%; display:inline-block; float:left; margin-top:3em;}
.main7 > div{ width:90%; display:block; margin:auto;}
.main7 > div > div.main7text{ display:block; width:100%; margin:auto;}
.main7 > div > div.main7text > h3{ display:inline-block; font-size:32px; color:#23369f; font-weight:900; line-height:1.4;}
.main7 > div > div.main7text > h3 > span{ display:inline-block;}
.main7 > div > div.main7text > h3 > br{ display:none;}

.main7 > div > div.main7text > div{ display:inline-block; padding-top:0.6em;}
.main7 > div > div.main7text > div > p{ font-size:14px; color:#242527; margin-bottom:0.5em; line-height:1.7;}
.main7 > div > div.main7text > div > p > br{ display:none;}
.main7 > div > div.main7text > div > ul > li{ font-size:14px; color:#6d6e71; margin-left:20px; position:relative;}
.main7 > div > div.main7text > div > ul > li:before{ content:"-"; position:absolute; left:-16px;}
.main7 > div > div.main7img{ background-image:url(/file/img/aka.png); width:310px; height:167px; display:block; margin:auto; margin-top:3em; margin-bottom:0.5em; background-repeat:no-repeat; background-size:cover;}
.main7 > div > nav{ margin-top:0em; margin-bottom:10em;}
.main7 > div > nav > a{ background-color:#23369f; color:#fff; display:inline-block; padding:0.5em 1em; font-size:14px; float:right; margin:0.5em 0; }
.main7 > div > nav > a:nth-child(2){ margin-left:10%;}
.main8 > div{ width:100%; text-align:center; position:relative;}
.main8 > div > img{ max-width:100%;}
.main8 img{ max-width:100%;}
.main8 .web{ display:none; max-width:100%;}
.main8 .evebtn1{ position:absolute; left:0; top:0; width:100%; display:inline-block; height:100%;}
.main8 .evebtn2{ position:absolute; right:4%; bottom:0; width:40%; display:inline-block; height:40%;}


.main9{ float:left; width:100%; display:inline-block; text-align:center; position:relative;}
.main9 > div{ display:inline-block;}
.main9 #VideoDiv{ position:absolute; z-index:3; width:100%; height:100%; background-color:#000; display:none;}
.main9 #VideoDiv > video{  width:100%; height:100%;}
.main9 #vimgSlide .swiper-slide > img{ float:left; width:100%;}
.main9 #vimgSlide .swiper-slide > a{ position:absolute; left:50%; top:50%; display:inline-block; margin-left:-30px;background-repeat:no-repeat; width:60px; margin-top:-0;}
.main9 #vimgSlide .swiper-slide > a:hover{ background-image:url(/file/img/v0hover.png); background-size:60px 60px;;}
.main9 #vimgSlide .swiper-slide > a:hover > img{ opacity:0;}

.main9 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background-image:url(/file/img/btn1.png); width:48px; height:86px; background-size:48px 86px; }
.main9 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ background-image:url(/file/img/btn2.png); width:48px; height:86px; background-size:48px 86px; }

.main9 #VideoDiv{ }
.main9 .VidiotextDiv{width:100%; display:inline-block; height:180px;}
.main9 .backimg{ display:inline-block; background-size:cover;}
.main9 .backtext{  background-repeat:no-repeat; display:inline-block; background-position:5vh 8vh; background-size:13vh auto;}
.main9 .backtext > img{ opacity:1;}
.main9 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ width:24px; height:43px; background-size:cover;}
.main9 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ width:24px; height:43px; background-size:cover;}

.main12{ width:100%; display:inline-block; float:left; background-color:#8e8e8e;}
.main12 .maininfo{ display:table; width:100%; padding:0;}
.main12 .maininfo > div{ display:table-cell;}
.main12 .maininfo > div:nth-child(1){ text-align:left; padding:0.5em 0; padding-left:1em;}
.main12 .maininfo > div:nth-child(2){ text-align:right; flex-grow: 1; padding:0.6em 0; padding-right:1em; vertical-align:middle;}
.main12 .maininfo > div > p{ font-size:14px; color:#fff;}
.main12 .maininfo > div > span{ font-size:16px; color:transparent;}
.main12 .maininfo > div > a{ font-size:19px; font-weight:900; color:#fff;}

.main13{ display:inline-block; width:100%; margin:3em 0;}
.main13 .backimg{ width:100%; background-image:url(/file/img/main1img.png); display:inline-block; background-position:center center; background-repeat:no-repeat; text-align:center; background-size:cover;}
.main13 .backtext{  background-repeat:no-repeat; width:100%; height:300px; display:inline-block; text-align:left;}
.main13 .backtext > img{ }
.main13 .backtext > h2{ color:#5e01a6; font-size:18px; font-weight:900; margin-left:0.5em; margin-top:2.7em;}
.main13 .backtext > p{ font-size:11px; margin-left:1em;}
.main13 .backtext > p > span{ display:block;}


.main14{ width:100%; display:inline-block; text-align:center; float:left; margin-bottom:2em 0;}
.main14 > div{ width:100%; display:inline-block; text-align:left; background-repeat:no-repeat; background-size:80% auto;}
.main14 > div > div > h3{ margin-top:5em; margin-bottom:1em; text-align:center;}
.main14 > div > div > h3 > span{ font-size:74px; display:block; line-height:1; text-align:center;}
.main14 > div > div > h3 > span:nth-child(1){ font-weight:900; letter-spacing:5px;}
.main14 > div > div > h3 > span:nth-child(2){ font-weight:100;}
.main14 > div > div > div{ text-align:center;}
.main14 > div > div > div > img{ max-width:80%; margin:auto;}
.main14 > div > div > div > p{ margin-bottom:1em; text-align:center;}
.main14 > div > div > div > p.text1{ font-size:14px; color:#323232; margin-left:3em; margin-right:3em;}
.main14 > div > div > div > p.text1 > br{ display:none;}
.main14 > div > div > div > p.text2{ font-size:14px; font-weight:900; color:#323232; margin-left:3em;margin-right:3em;}
.main14 > div > div > div > p.text2 > br{ display:none;}
.main14 > div > div > div > p.text3{ font-size:12px; color:#edb905;}
.main14 > div > div > div > p.text3:before{ content:"- ";}
.main14 > div > div > div > p.text3:after{ content:" -";}
.main14 > div > div > div > nav{ margin-top:40px; background-repeat:no-repeat; background-position:20px bottom; padding-bottom:84px;}
.main14 > div > div > div > nav > a{ font-size:30px; font-weight:900; width:280px; text-align:center; padding:0.5em 0; border-radius:100px; color:#fff; background-color:#423eaf; display:inline-block;}

nav.rightNav{ position:fixed; right:1em; bottom:50px;; display:inline-block; z-index:99;}
nav.rightNav > a{ display:inline-block; background-color:rgba(122,122,122,0.7); padding:0.5em; border-radius:0.5em; margin-right:0.2em;}
nav.rightNav > a > svg{ width:32px; height:32px; float:left;}
nav.rightNav > a > span{ padding:7px 0; padding-left:0.3em; font-size:22px; display:inline-block; padding-right:0.5em; color:#fff; display:none;}


.main15{ width:100%; display:inline-block; float:left; text-align:center; margin:5em 0;}
.main15 > div{ width:100%; max-width:1920px; display:inline-block;}
.main15header{ position:relative; width:100%; }
.main15header > img{ margin-top:22px; position:relative; z-index:2; width:50px;}
.main15header > h4{  font-family:'Nanum Myeongjo'; font-size:24px; position:relative; z-index:2; color:#003964; font-weight:900;}

.main15header:before{ content:""; background-image:url(https://file.k-friends.kr/img/20210416/044914_0.png); background-repeat:no-repeat; position:absolute; left:0; top::0; width:132px; height:129px; display:inline-block; background-size:cover;}
.main15header:after{ content:""; background-image:url(https://file.k-friends.kr/img/20210416/045119_0.png); background-repeat:no-repeat; position:absolute; right:0; top:0; width:132px; height:129px; display:inline-block; background-size:cover;}

.main15footer{ width:100%; display:inline-block; background-image:url(https://file.k-friends.kr/img/20210416/052530_0.png); background-repeat:no-repeat; background-position:bottom center; background-size:100% 45px; padding-bottom:45px; z-index:2; position:relative;}

.viewtable{ margin-top:4em; margin-bottom:2em;  position:relative; z-index:3; width:100%; display:inline-block; height:200px;}
.viewtable > table{ border-collapse:collapse; width:100%; table-layout:fixed;}
.viewtable > table > thead > tr > th{ border-bottom:3px solid #003964; padding:0.5em 0; text-align:center; font-size:13px; font-family:'Nanum Myeongjo';}
.viewtable > table > tbody > tr > td{ padding:0.5em 0; text-align:center; font-size:11px; font-family:'Nanum Myeongjo';}

.main15footer > p{ text-align:center; display:block; margin:0 2em;}
.main15footer > p > span{ font-family:'Nanum Myeongjo'; display:inline-block; font-size:14px; font-weight:900;}
.main15footer > p > br{ display:none;}