h1,h2,h3,h4{ text-align:center; line-height:1.8;}
header{ position:absolute; z-index:3; left:0; top:0;}
header > a > span{ color:#fff; }


section > div.main1{ width:100%; height:300px; background-position:center center; background-size:auto 100%;background-image:url(https://file.k-friends.kr/img/20210409/064519_0.png); background-size:cover}
section > div.main2{ margin:auto; margin-top:4em; margin-bottom:4em; width:90%; }

section > div.main2 > h2{ margin:1.5em 0;}
section > div.main2 > h3{ margin:1em 0;}
section > div.main2 .checkdiv{ border:1px solid #ddd; border-radius:1em; margin-top:1em; margin-bottom:1em; background-color:#FFC;}
section > div.main2 .checkdiv > h2{ margin-top:1em;}
section > div.main2 .checkdiv > ul{ margin:1em;}
section > div.main2 .checkdiv > ul > li{ list-style:outside; margin-left:20px;}

.info1{ margin:auto;}
.info1 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:48px;}
.info1 > div > div{ display:inline-block;}
.info1 > div > div > div:nth-child(1){ display:inline-block; float:left; margin-bottom:1em;}
.info1 > div > div > div:nth-child(2){ display:inline-block;;}
.info1 > div > div > div img{ max-width:100%;}

.info1 > div > div > div > h3{ text-align:left; font-size:30px;}
.info1 > div > div > div > ul{ width:100%; display:inline-block;}
.info1 > div > div > div > ul > li{ font-size:18px;}

.info2{ margin:auto;margin-bottom:5em; margin-top:2em;}
.info2 > div > div > div > h3{ text-align:left; font-size:30px;}
.info2 > div > div > div > ul{ display:table; border-collapse:collapse; width:100%;}
.info2 > div > div > div > ul > li{ display:table-row;}
.info2 > div > div > div > ul > li > label{ display:table-cell; padding:0.5em 0; text-align:center; background-color:#c8c8c8; border:5px solid #fff; width:140px; font-size:18px; color:#3e3e3e;}
.info2 > div > div > div > ul > li > div{ display:table-cell; padding:0.5em 1em;  border:5px solid #fff; background-color:#f4f4f4; font-size:18px; color:#6a6a6a;}



.info3 > div{ width:100%; display:inline-block;}
.info3 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}
.info3 > div > div.imglist > ul{}
.info3 > div > div.imglist > ul{ display:inline-block; width:100%; padding-bottom:3em;}
.info3 > div > div.imglist > ul > li{ background-repeat:no-repeat; display:inline-block; position:relative; float:left; width:50%; padding-top:160px; background-position: center center; height:80px; margin-bottom:2em; background-size:auto 100%;}
.info3 > div > div.imglist > ul > li:before{ content:"";width:29px; height:48px; background-image:url(https://file.k-friends.kr/img/20210415/020957_0.png); display:inline-block; position:absolute; z-index:1; margin-left:-15px; left:100%; top:50%; background-size:cover;}
.info3 > div > div.imglist > ul > li:after{ position:absolute; top:0; left:0; width:100%; text-align:center; color:#6c6c6c; font-size:25px; font-weight:900;}

.info3 > div > div.imglist > ul > li > h4{ color:#202020; font-size:24px;}
.info3 > div > div.imglist > ul > li > p{ color:#444444; font-size:12px; text-align:center;}

.info3 > div > div.imglist > ul > li.step1{ background-image:url(https://file.k-friends.kr/img/20210415/021657_0.png);}
.info3 > div > div.imglist > ul > li.step1:after{ content:"STEP. 1";}

.info3 > div > div.imglist > ul > li.step2{ background-image:url(https://file.k-friends.kr/img/20210415/021720_0.png);}
.info3 > div > div.imglist > ul > li.step2:before{ display:none;}
.info3 > div > div.imglist > ul > li.step2:after{ content:"STEP. 2";}

.info3 > div > div.imglist > ul > li.step3{ background-image:url(https://file.k-friends.kr/img/20210415/021739_0.png);}
.info3 > div > div.imglist > ul > li.step3:after{ content:"STEP. 3";}

.info3 > div > div.imglist > ul > li.step4{ background-image:url(https://file.k-friends.kr/img/20210415/021759_0.png);}
.info3 > div > div.imglist > ul > li.step4:before{ display:none;}
.info3 > div > div.imglist > ul > li.step4:after{ content:"STEP. 4";}


.info3 > div > div.text{ background-color:#f4f4f4; width:100%; display:inline-block; margin-top:2em;}
.info3 > div > div.text > div{ margin:1em 1.5em;;}

.info3 > div > div > div > ul > li{ list-style:decimal; margin-left:20px; font-size:18px; color:#444;}


.info4 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}
.info4 > div > div > div > h3{ text-align:left; font-size:22px; margin-top:-0.5em; margin-bottom:0.5em;}

.list1{margin-bottom:5em; }
.list1 > p{text-align:right; color:#ff9000; font-size:16px; font-weight:900;}
.list1 > p:before{ content:"* "}
.list1 #list1Slide .swiper-slide{ background-color:#fff;}
.list1 #list1Slide .swiper-slide .infolist1{ width:100%; display:inline-block;}
.list1 #list1Slide .swiper-slide .infolist2{ width:100%; display:inline-block;}
.list1 #list1Slide .swiper-slide .infolist3{ width:100%; display:inline-block;}
.list1 #list1Slide .swiper-slide .infolist4{ width:100%; display:inline-block;}

.list1 #list1Slide .swiper-slide .infolist1 > div{ display:inline-block; width:100%;}
.list1 #list1Slide .swiper-slide .infolist2 > div{ display:inline-block; width:100%;}
.list1 #list1Slide .swiper-slide .infolist3 > div{ display:inline-block; width:100%;}
.list1 #list1Slide .swiper-slide .infolist4 > div{ display:inline-block; width:100%;}
.list1 #list1Slide .swiper-slide  div.img{ display:inline-block; background-color:#c8c8c8; vertical-align:middle; height:372px; width:100%;}
.list1 #list1Slide .swiper-slide  div.img > img{ box-shadow:1px 1px 8px 1px gray; margin:1em; max-height:350px;}
.list1 #list1Slide .swiper-slide  div.text{ display:inline-block; background-color:#f4f4f4; font-size:19px; vertical-align:top; height:340px; width:100%;}
.list1 #list1Slide .swiper-slide  div.text > h4{ text-align:left; margin:2em 2em; margin-bottom:1em; font-size:19px;}
.list1 #list1Slide .swiper-slide  div.text > p{ margin:0 2em; font-size:16px}


.list1 .img{ text-align:center; display:inline-block;}
.list2 > ul{ display:inline-block; margin-bottom:5em; max-width:640px;}
.list2 > ul > li{ display:inline-block;}
.list2 > ul > li img{ max-width:100%;}

.list2 > ul > li table{ border-collapse:inherit; width:100%; border-spacing:3px;}
.list2 > ul > li table thead th{ background-color:#c8c8c8; color:#444; text-align:center; width:20%; padding:0.4em 0; font-size:19px;}
.list2 > ul > li table tbody td{ background-color:#f4f4f4; color:#444; text-align:center; width:20%; padding:0.3em 0; font-size:19px;}
.list2 > ul > li table tbody > tr:hover > td{ color:#039; font-weight:900;  }
.list2 > ul > li table tfoot td{ background-color:#f4f4f4; color:#444; text-align:center; padding:0.5em 0; font-size:16px; font-weight:900;}

.list3{max-width:640px;}
.list3 > p{ margin-bottom:12em; margin-top:0.5em; font-size:16px; }
.list3 > ul{ display:block; margin:auto;}
.list3 > ul > li{ display:inline-block; float:left; width:100%; margin-bottom:1em;}
.list3 > ul > li .img{ background-repeat:no-repeat; background-position:center; width:100%; height:305px; display:inline-block; float:left; background-color:#f4f4f4;}
.list3 > ul > li .text{ background-color:#c8c8c8; font-size:19px; padding:0.5em 0; width:100%; display:inline-block;}

.order1 .img{ background-image:url(https://file.k-friends.kr/img/20210409/082817_0.png);}
.order2 .img{ background-image:url(https://file.k-friends.kr/img/20210415/063703_0.png);}
.order3 .img{ background-image:url(https://file.k-friends.kr/img/20210409/082914_0.png);}
.order4 .img{ background-image:url(https://file.k-friends.kr/img/20210409/082928_0.png);}

.info4 > div > ul > li{ list-style:decimal; margin-left:20px; }


.info5 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}
.info5 > div > div{ background-color:#f4f4f4; width:100%; display:inline-block; margin-bottom:12em;}
.info5 > div > div > ul{ margin:1em 1.5em;}
.info5 > div > div > ul > li{ list-style:decimal; margin-left:20px; font-size:18px;}

.info6 > div{ margin-top:2em;}
.info6 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em; }
.info6 > div > div{ background-color:#f4f4f4; width:100%; display:inline-block;}
.info6 > div > div > div{ margin:1em 1.5em;}
.info6 > div > div > div > ul > li{ list-style:decimal; margin-left:20px; font-size:18px; color:#444;}
.info6 > div > div > div > p{ color:#444; font-size:18px; position:relative; margin-left:20px; margin-right:9em;}
.info6 > div > div > div > p:before{ content:"※ "; position:absolute; right:100%; margin-right:6px;}

.info7 > div{ margin-top:2em;}
.info7 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}
.info7 > div > div > div > ul{ display:table; border-collapse:collapse; width:100%;}
.info7 > div > div > div > ul > li{ display:table-row;}
.info7 > div > div > div > ul > li > label{ display:table-cell; padding:0.5em 0; width:235px; text-align:center; border:2px solid #fff; background-color:#c8c8c8; font-size:18px; color:#444444; }
.info7 > div > div > div > ul > li > div{ display:table-cell; padding:0.5em 1em; border:2px solid #fff; background-color:#f4f4f4; font-size:18px; color:#444444;} 

.info8 > div > ul > li{ list-style:decimal; margin-left:20px; }
.info8 > div > ul > li > ul > li{ list-style:outside; margin-left:20px; }




.info9 > div{ width:100%; display:inline-block; margin-top:2em;}
.info9 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}
.info9 > div > div{ background-color:#f4f4f4; display:inline-block; width:100%;}
.info9 > div > div > ul{  margin:1em 1.5em;}
.info9 > div > div > ul > li{ font-size:18px; color:#444;}



.info10 > div{ margin-bottom:3em; width:100%; display:inline-block;}
.info10 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}

.info10 > div > h3{ font-size:22px; text-align:center; margin:0.5em 0; text-align:left;}

.info10 > div > div > div > ul{ display:table; border-collapse:collapse; width:100%;}
.info10 > div > div > div > ul > li{ display:table-row;}
.info10 > div > div > div > ul > li > label{ display:table-cell; padding:0.5em 0; width:235px; text-align:center; border:2px solid #fff; background-color:#c8c8c8; font-size:18px; color:#444444; }
.info10 > div > div > div > ul > li > div{ display:table-cell; padding:0.5em 1em; border:2px solid #fff; background-color:#f4f4f4; font-size:18px; color:#444444;} 

.info10 .stepdiv{ width:100%; display:inline-block;}
.info10 .stepdiv .stepimg{ width:100%;; height:200px; background-image:url(https://file.k-friends.kr/img/20210409/010739_0.png); background-repeat:no-repeat; background-size:auto 100%; background-position:center center; margin-bottom:1em;}
.info10 .stepdiv .steptext > ul > li{ list-style:decimal; margin-left:20px; font-size:22px; line-height:1.8; color:#444444;}


.info10 .eventitem > ul{ display:inline-block; width:100%; text-align:center;}
.info10 .eventitem > ul > li{ display:inline-block; width:176px; height:176px; background-repeat:no-repeat; position:relative; background-size:cover;}
.info10 .eventitem > ul > li:nth-child(1){ margin-right:0.5em;}
.info10 .eventitem > ul > li:nth-child(2){ margin-right:0.5em;}
.info10 .eventitem > ul > li > h4{ position:absolute; text-align:center; font-size:18px; bottom:14px; left:0; width:100%;}

.info10 .eventitem > ul > li.running{ background-image:url(https://file.k-friends.kr/img/20210409/011204_2.png)}
.info10 .eventitem > ul > li.cycle{ background-image:url(https://file.k-friends.kr/img/20210409/011204_1.png)}
.info10 .eventitem > ul > li.hiking{ background-image:url(https://file.k-friends.kr/img/20210409/011204_0.png);}

.info10 > div.backgray{ background-color:#f4f4f4; width:100%; display:inline-block; margin-bottom:12em;}
.info10 > div.backgray > ul{ margin:1em 1.5em;}
.info10 > div.backgray > ul > li{ font-size:18px; color:#444;}
.info10 > div:nth-child(3){ margin-bottom:2em;}




.info11 > div{ margin-bottom:3em; width:100%; display:inline-block;}
.info11 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:33px; margin-bottom:1em;}
.info11 > div > div{ background-color:#f4f4f4; width:100%; display:inline-block; margin-bottom:3em; background-repeat:no-repeat;}
.info11 > div > div > h3{ font-size:22px;}
.info11 > div > div > h3:before{ content:"[";}
.info11 > div > div > h3:after{ content:"]";}
.info11 > div > div > div > div.text > h4{ display:none;}

.info11 > div > div.ev1{ background-image:url(https://file.k-friends.kr/img/20210409/024430_0.png); background-position:center center;}
.info11 > div > div.ev1 > h3{ margin-top:2em;  background-color:rgba(255,255,255,0.8); margin-left:5%; margin-right:5%; padding:0.5em 0; text-align:left; padding-left:5%; padding-right:5%; padding-top:2em;}
.info11 > div > div.ev1 > div{ background-color:rgba(255,255,255,0.8); width:80%; margin-left:5%; margin-bottom:2em; padding:0.5em 5%; min-height:400px;}
.info11 > div > div.ev1 > div > div.text > ul{ margin:1em; max-width:600px;}
.info11 > div > div.ev1 > div > div.text > ul > li{ font-size:18px; margin-left:20px; position:relative; list-style:decimal;}
.info11 > div > div > div > div.text > ul > li > span{ display:inline-block;}
.info11 > div > div.ev1 > div > div > h4{ font-size:22px; text-align:left; margin-top:2.5em;}
.info11 > div > div.ev1 > div > div > h4:before{ content:"[";}
.info11 > div > div.ev1 > div > div > h4:after{ content:"]";}
.info11 > div > div.ev1 > div > div.item > ul{ margin:1em; max-width:600px;}
.info11 > div > div.ev1 > div > div.item > ul > li{ font-size:18px; margin-left:0; position:relative;}


.info11 > div > div.ev2{ background-image:url(https://file.k-friends.kr/img/20210409/024454_0.png);}
.info11 > div > div.ev2 > h3{ margin-top:2em;  background-color:rgba(255,255,255,0.8); margin-left:5%; margin-right:5%; padding:0.5em 0; text-align:left; padding-left:5%; padding-right:5%; padding-top:2em;}
.info11 > div > div.ev2 > div{ background-color:rgba(255,255,255,0.8); width:80%; margin-left:5%; margin-bottom:2em; padding:0.5em 5%; min-height:500px;}
.info11 > div > div.ev2 > div > div.text{ }
.info11 > div > div.ev2 > div > div.text > ul{ margin:1em;}
.info11 > div > div.ev2 > div > div.text > ul > li{ font-size:18px; margin-left:20px; position:relative; list-style:decimal;}
.info11 > div > div.ev2 > div > div > h4{ font-size:22px; text-align:left; margin-top:2.5em;}
.info11 > div > div.ev2 > div > div > h4:before{ content:"[";}
.info11 > div > div.ev2 > div > div > h4:after{ content:"]";}
.info11 > div > div.ev2 > div > div.item > ul{ margin:1em;}
.info11 > div > div.ev2 > div > div.item > ul > li{ font-size:18px; margin-left:0; position:relative;}

.info11 > div > div.ev3{ background-image:url(https://file.k-friends.kr/img/20210409/084653_0.png); background-size:cover;}
.info11 > div > div.ev3 > h3{ margin-top:2em;  background-color:rgba(255,255,255,0.8); margin-left:5%; margin-right:5%; padding:0.5em 0; text-align:left; padding-left:5%; padding-right:5%; padding-top:2em;}
.info11 > div > div.ev3 > div{ background-color:rgba(255,255,255,0.8); width:80%; margin-left:5%; margin-bottom:2em; padding:0.5em 5%;}

.info11 > div > div.ev3 > div > div.text > ul{ margin:1em;}
.info11 > div > div.ev3 > div > div.text > ul > li{ font-size:18px; margin-left:20px; position:relative; list-style:decimal;}
.info11 > div > div.ev3 > div > div > h4{ font-size:22px; text-align:left; margin-top:2.5em;}
.info11 > div > div.ev3 > div > div > h4:before{ content:"[";}
.info11 > div > div.ev3 > div > div > h4:after{ content:"]";}
.info11 > div > div.ev3 > div > div.item > ul{ margin:1em; margin-bottom:0;}
.info11 > div > div.ev3 > div > div.item > ul > li{ font-size:18px; margin-left:0; position:relative;}
.info11 > div > div.ev3 > div > div.item > p{ margin:1em; margin-top:0; font-size:18px;}
.info11 > div > div.ev3 > div > div.item > p:before{ content:"* ";}

.info11 > div > div.ev4{ background-image:url(https://file.k-friends.kr/img/20210409/024540_0.png); min-height:418px;}
.info11 > div > div.ev4 > h3{ margin-top:2em;  background-color:rgba(255,255,255,0.8); margin-left:5%; margin-right:5%; padding:0.5em 0; text-align:left; padding-left:5%; padding-right:5%; padding-top:2em;}
.info11 > div > div.ev4 > div{ background-color:rgba(255,255,255,0.8); width:80%; margin-left:5%; margin-bottom:2em; padding:0.5em 5%;}

.info11 > div > div.ev4 > div > div.text{ }
.info11 > div > div.ev4 > div > div.text > ul{ margin:1em;}
.info11 > div > div.ev4 > div > div.text > ul > li{ font-size:18px; margin-left:20px; position:relative; list-style:decimal;}
.info11 > div > div.ev4 > div > div > h4{ font-size:22px; text-align:left; margin-top:2.5em;}
.info11 > div > div.ev4 > div > div > h4:before{ content:"[";}
.info11 > div > div.ev4 > div > div > h4:after{ content:"]";}
.info11 > div > div.ev4 > div > div.item{  margin-bottom:3em;}
.info11 > div > div.ev4 > div > div.item > ul{ margin:1em;}
.info11 > div > div.ev4 > div > div.item > ul > li{ font-size:18px; margin-left:0; position:relative;}

.info11 > div > div:nth-child(odd){ background-position:center right;}



section > div.main2 > ul{ display:table; border-top:1px solid #ddd; width:90%; max-width:600px; margin:auto;}
section > div.main2 > ul > li{ display:table-row;}
section > div.main2 > ul > li > label{ display:table-cell; border-bottom:1px solid #ddd; vertical-align:middle; text-align:center; font-size:14px; padding:8px; width:160px; background-color:#f1f1f1;}
section > div.main2 > ul > li > div{ display:table-cell; border-bottom:1px solid #ddd; line-height:1.6; font-size:14px; padding:8px;}

section > div.main2 > ul > li > div > ul > li{ list-style:circle; margin-left:20px;}
section > div.main2 > ul > li > div > ul.num > li{ list-style:decimal; margin-left:20px;}
section > div.main2 > ul > li > div > p{ margin-left:20px; color:#f00; position:relative;}
section > div.main2 > ul > li > div > p:before{ content:"※"; position:absolute; left:-20px; top:0; }

.checkdiv{ width:800px; max-width:90%; margin:auto; color:#f00;}


.appdownload > ul{ display:table; width:400px; margin:auto;}
.appdownload > ul > li{ display:table-cell; vertical-align:middle; text-align:center;}
.appdownload > ul > li > a.googledown > img{ height:62px; }
.appdownload > ul > li > a.appledown > img{ height:44px; }

.STRAVACLUBBtn{ background-color:#fc5200; color:#fff; display:inline-block; table-layout:fixed; padding:0.5em 2em; border-radius:3px; font-size:12px; margin:4px;}

.infoBtnNav{ width:100%; display:inline-block;  margin-top:2em; margin-bottom:12em; text-align:center;}
.infoBtnNav > a{ background-color:#000; color:#fff; width:160px; padding:1em 0; font-size:22px; display:inline-block;}