@charset "utf-8";
@font-face {
    font-family:'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:20px;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;background:#fff;font-weight: 400;color: #333}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;}
a {color:#333;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

table,tr,td,th{border: 0;padding: 0;margin: 0;border-spacing: 0}

.placeholdersjs {color:#333 !important}
.con{max-width:1200px;margin: 0 auto;width:100% }
.con02{max-width: 1200px;margin: 0 auto}
.fontB{font-weight: 700}
.pc{display: block !important;}
.mobile{display: none !important;}
.jalnan{font-family:'yg-jalnan';}

.line1{text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:100%;overflow:hidden;}
.line2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.2em;height: 2.4em;}

/* 공통 css */
.main .scroll{position: absolute;left: 0;bottom:20px;height: 100px}

.main00{background-image: url('../img/main00_bg.png');background-size: cover;}
.main00 .con{position: relative;height: 100%}
.main00 .img{position: absolute;right: 0;top:0;height: 100%}
.main00 .txt{width:70%;margin-top: 10%}

.main01{background-image: url('../img/main01_bg.png');background-size: cover;}
.main01 .con{position: relative;height: 100%;overflow: hidden;background-image: url('../img/main01_img.png');background-size: auto 95%;background-position: center bottom;background-repeat: no-repeat;}

.main02{background-image: url('../img/main02_bg.png');background-size: cover;}
.main02 .con{position: relative}
.main02 .img{position: absolute;right: 0;top:-30px;}
.main02 .area{width:340px;box-shadow: 0px 4px 10px 0px #D7D7D780;height:50px;border-radius: 5px;border: 1px solid #A6B0D4;background: white;box-sizing: border-box;padding: 0 20px;margin:50px 0}
.main02 .area select{display: block;width:100%;height: 100%;line-height: 48px;border: none;background: none;}
.main02 input[name="tab"]{display: none;}
.main02 label{display: block;width:160px;float: left;position: relative}
.main02 label span{width:100%;display: block;height: 45px;line-height: 45px;background: #FF9EA4;color: white;text-align: center;font-size: 20px;border: 1px solid #FF9EA4;border-radius: 23px;box-sizing: border-box;position: relative;z-index: 3;}
.main02 label::after{width:50px;height: 45px;background: #FF9EA4;position: absolute;top:0px;right: 0px;content: '';z-index: 1}
.main02 label.want::after{right: auto;left: 0px;}
.main02 input:checked+label span{background: white;color: #FF9EA4;z-index: 5;}
.main02 .box02{display: none;}
.main02 #tab01:checked ~ .box01{display: block;}
.main02 #tab01:checked ~ .box02{display: none;}
.main02 #tab02:checked ~ .box02{display: block;}
.main02 #tab02:checked ~ .box01{display: none;;}
.main02 .box{margin-top: 120px;}
.main02 .box dl{overflow: hidden;line-height: 30px;margin-bottom: 20px;height: 30px;}
.main02 .box dt{float: left;width:160px;}
.main02 .box dd{float: left;width:300px;font-size: 24px;}
.main02 .box dd input{display: block;width:100%;height: 100%;height: 30px;background: none;border: none;}
.main02 .box button{display: block;width:200px;height: 60px;line-height: 60px;text-align: center;background: #FF9EA4;color: white;border-radius: 30px;border: none;box-shadow: none;font-size: 22px}
.main02 .box button img{padding-left: 5px}
.main02 .txt{background: #FFFFFF99;padding: 20px 30px;margin-top: 50px;border-radius: 10px}
.main02 .txt p{font-size: 16px;line-height: 25px;color: var(--5, #4B5563);position: relative;padding-left: 10px}
.main02 .txt p::before{width:4px;height: 4px;background: var(--4, #AFB2B7);position: absolute;left: 0;top:10px;content: '';border-radius: 3px}

.main03{background-image: url('../img/main03_bg.png');background-size: cover;}
.main03 .tit{display: block;margin-bottom: 80px}
.main03 .swiper-slide{width:33.333%;padding: 0 30px;}
.main03 .swiper-slide img{width:100%;}
.main03 .swiper-pagination{bottom: 0;}
.main03 .swiper-container{padding-bottom: 50px}

.main04{background-image: url('../img/main04_bg.png');background-size: cover;}
.main04 .tit{display: block;margin: 0 auto;margin-bottom: 80px;width:90%;max-width: 650px}
.main04 .swiper-slide{width:33.333%;padding: 0 30px;}
.main04 .swiper-slide img{width:100%;}
.main04 .swiper-pagination{bottom: 0;}
.main04 .swiper-container{padding-bottom: 50px}

.main05{background-image: url('../img/main05_bg.png');background-size: cover;}
.main05 .con{position: relative}
.main05 .img{position: absolute;right: 0;top:0;height: 100%}
.main05 .tit{display: block;margin-bottom: 30px}
.main05 p{font-size: 24px;color: #373737;line-height: 1.5em;}
.main05 a{display: block;width:300px;line-height: 60px;text-align: center;border-radius: 25px;color: white;background: #80A1D8;margin-top: 100px}
.main05 a img{padding-left: 5px}

.main06{background-image: url('../img/main06_bg.png');background-size: cover;}
.main06 .tit{display: block;margin-bottom: 50px;max-width: 718px;width:90%}
.main06 input[name="gen"]{display: none;}
.main06 label{display: block;width:160px;float: left;position: relative}
.main06 label span{width:100%;display: block;height: 45px;line-height: 45px;background:#80A1D8;color: white;text-align: center;font-size: 20px;border: 1px solid #80A1D8;border-radius: 23px;box-sizing: border-box;position: relative;z-index: 3;}
.main06 label::after{width:50px;height: 45px;background: #80A1D8;position: absolute;top:0px;right: 0px;content: '';z-index: 1}
.main06 label.woman::after{right: auto;left: 0px;}
.main06 input:checked+label span{background: white;color: #80A1D8;z-index: 5;}
.main06 .swiper-container{width:100%;margin-top: 150px}
.main06 .swiper-container .w_img{display: none;}
.main06 .swiper-slide{width:25%;padding: 0 30px;}
.main06 .swiper-slide img{width:100%;}
.main06 #man:checked ~ .swiper-container .m_img{display: block;}
.main06 #man:checked ~ .swiper-container .w_img{display: none;}
.main06 #woman:checked ~ .swiper-container .w_img{display: block;}
.main06 #woman:checked ~ .swiper-container .m_img{display: none;;}

.main07{background-image: url('../img/main07_bg.png');background-size: cover;}
.main07 .con{padding: 80px 0;}
.main07 .tit{display: block;margin-bottom: 50px;text-align: center}
.main07 .tit img{display: block;margin: 0 auto;margin-bottom: 30px;max-width: 650px;width:90%}
.main07 .tit p{font-size: 24px;color: #373737;}
.main07 .img{overflow: hidden}
.main07 .img img{display: block;float: left;width:49%;}
.main07 .img .right{float: right;}

.main08{background-image: url('../img/main08_bg.png');background-size: cover;}
.main08 .tit{margin-bottom: 50px;text-align: center}
.main08 .tit span{display: block;font-size: 40px;margin-bottom: 20px;color: black}
.main08 .tit p{font-size: 24px;color: #373737;}
.main08 .con{overflow: hidden;}
.main08 .img{position: relative;overflow: hidden;width:90%;margin: 0 auto;}
.main08 .ico01{position: absolute;left: 0;top:0;}
.main08 .ico02{position: absolute;right: 0;bottom: 0;}
.main08 .left{width:33%;float: left;margin-left: 12%;display: block;}
.main08 .right{width:33%;float: right;margin-right: 12%;display: block;}

.main09{background-image: url('../img/main09_bg.png');background-size: cover;}
.main09 .con{overflow: hidden;position: relative;padding-bottom: 50px}
.main09 .con .ico{position: absolute;left: 31%;bottom:0px;z-index: 9}
.main09 .left{float: left;width:38%;}
.main09 .left .tit{display: block;width:90%;max-width:283px}
.main09 .right{float: right;width:60%;}
.main09 .left p{font-size: 30px;color: #393939;margin: 20px 0}
.main09 .left span{display: block;color: #777;font-size: 16px;line-height: 1.8em}
.main09 .left .btn{position: relative;margin-top: 100px;overflow: hidden}
.main09 .left .btn .swiper-button-prev{width:35px;height: 35px;background-image: url('../img/main_left.png');position: relative;top:0;margin-top: 0;background-size: 100%;left:0;float: left;}
.main09 .left .btn .swiper-button-next{width:35px;height: 35px;background-image: url('../img/main_right.png');position: relative;top:0;margin-top: 0;background-size: 100%;left:0;right: 0;margin-left: 15px;float: left}
.main09 .right .swiper-slide{width:44%;margin: 0 3%;height: 450px;border-radius: 20px;overflow: hidden;position: relative}
.main09 .right .swiper-slide img{height:100%;}
.main09 .right .swiper-slide::after{width:100%;height: 100%;background: #0000004D;content: '';position: absolute;left: 0;top:0;}
.main09 .right .swiper-slide p{position: absolute;z-index: 5;bottom:80px;font-size: 32px;color: white;left: 5%;font-weight: bold}
.main09 .right .swiper-slide a{position: absolute;z-index: 5;display: block;width:80%;left: 5%;bottom:20px;background: #4C7CC3;color: white;line-height: 50px;text-align: center;border-radius: 50px;font-size: 18px}
.main09 .swiper-pagination{display: none;}

.main10{background-image: url('../img/main10_bg.png');background-size: cover;}
.main10 .tit{text-align: center;margin-bottom: 100px}
.main10 .tit img{;display: block;margin: 0 auto;margin-bottom: 20px}
.main10 .tit p{font-size: 24px;color: #373737}
.main10 ul{overflow: hidden}
.main10 li{float: left;width:22%;text-align: center;margin-right: 3%;}
.main10 li:last-child{margin-right: 0;}
.main10 li b{display: block;font-size: 80px;color: #3E5FB5;margin-bottom: 20px;letter-spacing: -1px}
.main10 li p{font-size: 20px;line-height: 1.4em;color: #777}

.main11{background-image: url('../img/main11_bg.png');background-size: cover;}
.main11 .tit{text-align: center;margin-bottom: 100px}
.main11 .tit img{margin: 0 auto; margin-bottom: 20px;display: block}
.main11 .tit p{font-size: 24px;color: #373737}
.main11 ul{overflow: hidden}
.main11 li{float: left;width:26%;text-align: center;}
.main11 li img{width:100%}
.main11 li p{font-size: 22px;color: #373737;text-align: center;margin-top: 20px}
.main11 li.arrow{width:11%;height: 250px;background-image: url('../img/main11_arrow.png');background-position: center;background-repeat: no-repeat;}

.mobile{display: none !important;}
.pc{display: block !important;}
.w-100{width:100%}

.head{position: fixed;top:0;left: 0;width:100%;height: 80px;background: white;z-index: 99;border-bottom: 1px solid #dfdfdf;text-align: center}
.head .logo{position: absolute;left: 5%;height: 28px;top:26px}
.head .logo img{height: 100%}
.head .my{position: absolute;right: 5%;text-align: left;top:0}
.head .my a{display: inline-block;font-size: 16px;line-height: 40px;margin-top: 20px;margin-left: 15px}
.head .menu{display: inline-block;}
.head .menu li{display: inline-block;margin: 0 20px;line-height: 40px;font-size: 18px;padding: 20px 0}
.head .menu .depth2{position: absolute;background: white;width:100%;height: 60px;left: 0;top:80px;display: none;border-bottom: 1px solid #dfdfdf}
.head .menu .depth2 ul{margin-left: 25%;line-height: 60px;}
.head .menu .depth2 li{font-size: 16px;position: relative;padding: 0;}
.head .menu .depth2 li::after{width:1px;height: 10px;top:15px;background: #ccc;position: absolute;right: -20px;content: ''}
.head .menu .depth2 li:last-child::after{display: none;}
.head .menu li:hover>a{color: var(--Primary-1, #A0B8E0);}
.head .menu li:hover .depth2{display: block;}
.head .menu_on{display: none;}
.head .menu_close{display: none}
.head .m_my{display: none;}


.footer{background: #8589A9;padding: 50px 0}
.footer .con{overflow: hidden}
.footer .logo{float: left;}
.footer .txt{float: left;margin-left:60px;font-size: 15px;color: white;line-height: 20px;font-weight: 300}
.footer .txt ul{overflow: hidden;}
.footer .txt li{float: left;margin-right: 15px;position: relative}
.footer .txt li:last-child::after{display: none;}
.footer .txt li::after{width: 1px;height: 10px;background: white;position: absolute;right: -7px;top:5px;background: white;content: ''}
.footer .txt p{margin: 10px 0}

.sub_top{background-size: cover;background-position: center;text-align: center;background-repeat: no-repeat;padding-top: 80px}
.sub01_top{background-image: url('../img/sub01_bg.png');}
.sub02_top{background-image: url('../img/sub02_bg.png');}
.sub03_top{background-image: url('../img/sub03_bg.png');}
.sub04_top{background-image: url('../img/sub04_bg.png');}
.sub05_top{background-image: url('../img/sub05_bg.png');}

.sub_top .con{padding: 100px 0}
.sub_top b{display: block;font-size: 50px;}
.sub_top p{padding: 30px 0;font-size:22px; }
.sub_top .con div{line-height: 24px;overflow: hidden;display: inline-block;}
.sub_top .con div img{padding: 0 2px;display: block;float: left}
.sub_top .con div span{line-height: 24px;display: block;float: left;font-size: 18px}

.sub .link{display: block;width:300px;height: 60px;line-height: 60px;color: white;background: #80A1D8;border-radius: 30px;margin: 50px auto;text-align: center}
.sub .link img{padding-left: 5px}
.sub02 .con{padding: 80px 0}
.sub03 .link01{margin-bottom: 30px}
.sub03 .txt{display: block;color: #3F5E92;text-align: center;margin-bottom: 50px;font-size: 16px}

.sub{margin: 80px auto;}

.review_list ul{overflow: hidden;border-top: 1px solid #111;border-bottom: 1px solid #111;padding: 50px 0}
.review_list li{float: left;width:32%;margin: 20px 0;margin-right: 2%;}
.review_list li:nth-child(3n){margin-right: 0;}
.review_list li .th{padding:10px;box-sizing: border-box;;border: 1px solid #ddd;box-shadow: 0 4px 10px 0 #F0F2F4;position: relative;height: 500px;overflow: hidden}
.review_list li .th::before{width:100%;height: 100%;background-image: url('../img/review_bg.png');background-repeat: no-repeat;background-size: 100%;content: '';position: absolute;left: 0;top:0;}
.review_list li .th img{width:100%;}
.review_list li .txt{padding: 20px 0;}
.review_list li .txt span{display: block;font-size: 18px;color: #333;line-height: 25px;height: 25px}
.review_list li .txt p{font-size:24px;color: #333;margin:10px 0;line-height: 32px;height: 32px}
.review_list li .txt span:last-child{color: #777;line-height: 22px;height: 22px;}

.event_list ul{margin:50px 0;overflow: hidden;border-bottom: 2px solid #111}
.event_list li{float: left;width:32%;margin:20px 0;margin-right: 2%;}
.event_list li a{display: block;}
.event_list li:nth-child(3n){margin-right: 0;}
.event_list li .th{width:100%;height: 350px;overflow: hidden;border: 1px solid #ddd;position: relative}
.event_list li .th img{position:absolute; top:50%; transform:translateY(-50%);width:100%}
.event_list li .txt{padding: 20px 0;}
.event_list li .txt p{font-size: 24px;color: #333;line-height: 30px;height: 30px}
.event_list li .txt span{display: block;font-size: 16px;color: #777;margin-top: 10px;line-height: 20px;height: 20px}

.board_list .list_tit{font-size: 30px;color: #333;border-bottom: 1px solid #CFD3DC;padding:20px 0;font-weight: bold}
.board_list .list_top{padding: 20px 0;overflow: hidden}
.board_list .list_top .now{font-size: 18px;color: #333;float: left;line-height: 50px;}
.board_list .list_top .search{float: right;overflow: hidden}
.board_list .list_top .search select{width:125px;display: block;float: left;background: #F9F9F9;border-radius: 4px;height: 50px;border: none;padding: 0 10px}
.board_list .list_top .search .box{width:340px;margin-left: 10px;border-radius: 4px;height: 50px;padding: 0 10px;float: left;overflow: hidden;background: #F9F9F9;padding-right: 50px;position: relative}
.board_list .list_top .search .box input{width:300px;float: left;display: block;border: none;background: none;height: 100%;}
.board_list .list_top .search .box button{width:50px;height: 50px;background-image: url('../img/search_ico.png');background-position: center;background-repeat: no-repeat;text-indent: -999px;float: right;border: none;position: absolute;right: 0;top:0;background-color:inherit}
.board_list .list{border-top: 2px solid #000;}
.board_list .list table{width:100%;font-size: 16px}
.board_list .list th{line-height: 55px;border-bottom: 1px solid #dfdfdf;}
.board_list .list td{line-height: 55px;border-bottom: 1px solid #dfdfdf;color: #777;text-align: center}
.board_list .list td a{color: #777;text-align: left;display: block}

.board_list .pagi{text-align: center;margin: 50px 0}
.board_list .pagi a{display: inline-block;width:30px;height: 30px;margin: 0 5px;font-size: 18px;color:#888;text-align: center;line-height: 30px;border-radius: 4px}
.board_list .pagi a.on{color: white;background: #A0B8E0;}
.board_list .pagi .prev{border: 1px solid #CFD3DC;}
.board_list .pagi .next{border: 1px solid #CFD3DC;}
.board_list .pagi img{margin-top: -5px}
.board_list .wr_btn{text-align: right;}
.board_list .wr_btn a{display: inline-block;width:150px;height: 65px;line-height: 65px;background: #80A1D8;text-align: center;border-radius: 4px;color:white;}

.cs_list .list td a{padding: 0 20px}
.cs_list .list .answer span{line-height: 22px;display: inline-block;background: #F8F8F8;border: 1px solid #dedede;border-radius: 4px;padding: 0 5px;font-size: 14px;color: #4B5563;}
.cs_list .list .answer span.end{color: #EC5555;border: 1px solid #FFBDC5;background: #FFFBF9}

.board_write .wr_tit{font-size: 30px;color: #333;;border-bottom: 1px solid #CFD3DC;padding:20px 0;font-weight: bold;margin-bottom: 10px}
.board_write .write{border-top:2px solid black}
.board_write .write .tit{padding: 10px 20px;position: relative;overflow: hidden;border-bottom: 1px solid #CFD3DC}
.board_write .write .label{line-height: 50px;float: left;width:20%;}
.board_write .write .box{width:100%;line-height: 50px;height: 50px;width:80%;float: left;background: #f9f9f9;padding:10px}
.board_write .write .box input{display: block;width:100%;height: 100%;border: none;background: none;font-size: 18px}
.board_write .write .txt{padding: 10px 20px;overflow: hidden;border-bottom: 1px solid #CFD3DC}
.board_write .write .txt .label{height: 450px;}
.board_write .write .txt .box{height: 450px;}
.board_write .write .txt textarea{width:100%;height: 100%;display: block;border: none;background: none;font-size: 18px}
.board_write .write .txt .label span{line-height: 450px}
.board_write .btn{text-align: right;margin: 30px 0;}
.board_write .btn button{display: inline-block;width:150px;height: 65px;line-height: 65px;background: #80A1D8;text-align: center;border-radius: 4px;color:white;font-size: 18px;border: none;}



.board_detail .detail_tit{font-size: 30px;color: #333;border-bottom: 1px solid #CFD3DC;padding:20px 0;font-weight: bold;margin-bottom: 10px}
.board_detail .tit{border-top: 2px solid #111;padding: 10px 20px;font-size: 24px;color: #333;line-height: 50px}
.board_detail .detail_infor{border-top:1px solid #CFD3DC;padding: 10px 20px;overflow: hidden;}
.board_detail .detail_infor dl{float: left;font-size: 16px;line-height: 30px;overflow: hidden}
.board_detail .detail_infor dt{float: left;color: #333;}
.board_detail .detail_infor dd{float: left;margin-left: 50px;color: #777}
.board_detail .detail_infor dl:last-child{float: right}

.board_detail .inner{padding:50px 0;border-top: 1px solid #CFD3DC; border-bottom: 1px solid #CFD3DC}
.board_detail .list div{border-bottom: 1px solid #CFD3DC;padding: 0 20px;line-height: 50px; overflow: hidden;font-size: 16px;}
.board_detail .list p{float: left;color: #333;position: relative;padding-right:15px;}
.board_detail .list p img{;margin-left: 100px;margin-top: -5px;}
.board_detail .list p::after{width:1px;height: 16px;background: #ddd;position: absolute;right: 0;top:18px;content: ''}
.board_detail .list a{display: block;float: left;padding-left: 15px;color:#777;}
.board_detail .list_btn{margin: 50px 0;text-align: center}
.board_detail .list_btn a{display: inline-block;width:150px;height: 65px;line-height: 65px;background: #80A1D8;color: white;;border-radius: 4px;}

.login .inner{width:90%;margin: 150px auto;max-width: 660px;border: 1px solid #CFD3DC;border-radius: 6px;box-shadow: 0 4px  10px 0 #D7D7D7;padding: 80px 100px }
.login p{text-align: center;font-size: 40px;color: #333;margin-bottom: 60px;font-weight: bold}
.login .box{background: #f9f9f9;height: 50px;line-height: 30px;padding: 10px 15px;overflow: hidden;margin-bottom: 20px}
.login .box label{width:30%;float: left;font-size: 16px;color: #7A818F;display: block;line-height: 30px;}
.login .box label img{padding-right: 10px}
.login .box input{display: block;float: left;width:70%;line-height: 30px;height: 30px;border: none;background: none;}
.login  button{width:100%;line-height: 60px;height: 60px;text-align: center;border-radius: 4px;background: #80A1D8;color: white;font-size: 20px;border: none;}
.login ul{margin-top: 40px;text-align: center}
.login li{display: inline-block;margin: 0 10px;font-size: 16px;position: relative;line-height: 30px}
.login li a{color: #666;}
.login li::after{width:1px;height: 10px;top:10px;right: -10px;background: #999;position: absolute;content: ''}
.login li.join a{color: #111;font-weight: bold}
.login li:last-child::after{display: none;}

.join .tit{font-size: 54px;text-align: center;color: #333;font-weight: bold;margin-top: 150px;margin-bottom: 30px}
.join .inner{width:90%;margin: 80px auto;max-width:900px;border: 1px solid #CFD3DC;border-radius: 6px;box-shadow: 0 4px  10px 0 #D7D7D7;padding: 80px }
.join .sub_tit{font-size: 24px;color: black;line-height: 50px;border-bottom: 1px solid #000;font-weight: 700;margin-bottom: 40px}
.join01 .ck_tab{line-height:55px;padding:0 15px;font-size: 16px;}
.join01 .ck_tab input{margin-right: 10px;}
.join01 .all{background:#f9f9f9;line-height: 45px }
.join01 .txt{border: 1px solid #C2C7CC;padding: 15px;box-sizing: border-box;height: 150px;overflow: auto}
.join01 .txt div{font-size: 15px;color: #777;line-height: 1.5em;}
.join .submit{width:160px;background: #80A1D8;line-height: 65px;height: 65px;text-align: center;color: white;font-size: 20px;border-radius: 4px;margin: 0 auto;margin-top: 50px;border:none ;display: block}

.join02 dl{overflow: hidden;margin-bottom: 20px}
.join02 dt{float: left;width:30%;line-height: 50px;font-size: 16px;}
.join02 dt span{color: #D92A44;padding-left: 5px}
.join02 dd{width:70%;float: left;font-size: 16px;;}
.join02 dd.w-100{background: #F9F9F9;border-radius: 4px;height: 50px;padding: 10px 15px;}
.join02 dd.w-100 input,.join02 dd.w-100 select{width:100%;line-height: 30px;height: 30px;border: none;display: block;background: none;}
.join02 dd.birth select{width:20%;float: left;margin-right: 3%;line-height: 50px;height: 50px;padding: 0 15px;display: block;background: #f9f9f9;border: none;}
.join02 dd.birth select:first-child{width:30%}
.join02 .sel input{display: none;}
.join02 .sel label{display: block;float: left;position: relative;padding-left: 33px;line-height: 50px;margin-right: 15px}
.join02 .sel label::before{width:24px;height: 24px;border: 1px solid #C2C7CC;top:13px;left: 0;content: '';border-radius: 12px;position: absolute;}
.join02 .sel input:checked+label::after{width:10px;height: 10px;position: absolute;background: #7F7FDD;left: 7px;top:20px;content: '';border-radius: 5px}
.join02 .gen label{margin-right: 0}
.join02 .gen .army{float: left;margin: 0 15px;margin-top: 5px}
.join02 .gen .army label::before{display: none}
.join02 .gen .army label{width:60px;border: 1px solid #7F7FDD;text-align: center;line-height: 38px;color: #7F7FDD;padding-left: 0;height: 40px;margin-right: 0;}
.join02 .gen .army label:nth-child(2){border-right: 0;}
.join02 .gen .army input:checked+label{background:#7F7FDD;color: white }
.join02 .gen .army input:disabled+label{opacity: .3}
.join02 dd .box{background: #F9F9F9;border-radius: 4px;height: 50px;padding: 10px 15px;}
.join02 dd .box input{display: block;line-height: 30px;height: 30px;border: none;display: block;background: none;width:100%}
.join02 .w-70>div{overflow: hidden;margin-bottom: 10px;}
.join02 .w-70 .box{width:70%;float: left;}
.join02 .w-70 button{float: right;width:28%;height: 50px;line-height: 50px;color: white;background: #80A1D8;border: none;border-radius: 4px;}
.join02 .w-70 button.line{border: 1px solid #80A1D8;background: white;color: #80A1D8}
.join02 .num p{font-size: 14px;color: #828382;}
.join02 .num p span{color: #D92A44;padding-right: 10px}
.join02 .con01{margin-bottom: 50px;}
.join02 .w-40 .box{width:40%;float: left}
.join02 .w-40 span{float: left;display: block;margin-left: 10px;line-height: 50px;color: #7A818F}
.join02 .file #file,.join02 .file #file01,.join02 .file #file02{display: none;}
.join02 .file label{float: right;width:28%;height: 50px;line-height: 50px;text-align: center;border: 1px solid #80A1D8;background: white;color: #80A1D8;border-radius: 4px}

.join02 .rest{margin-top: 40px;text-align: left;overflow: hidden}
.join02 .rest p{float: left;font-size: 14px;color: #777;line-height: 50px;}
.join02 .rest button{float: right;height: 50px;line-height: 48px;text-align: center;width:160px;color: #80A1D8;border: 1px solid #80A1D8;background: none;;border-radius: 4px;display: block;}


.join03 {text-align: center}
.join03 .inner{margin-bottom: 50px}
.join03 .inner p{margin-bottom: 40px;}
.join03 .inner img{margin-bottom: 40px;}
.join03 .inner .txt p{font-size: 30px;margin-bottom: 10px;}
.join03 .inner .txt span{display: block;font-size: 18px;color: #828382;}
.join03 .inner a{display: block;margin: 0 auto;background: #80A1D8;color: white;line-height:65px;height: 65px;border-radius: 4px;font-size: 20px;width:315px;margin-top: 50px}
.join03 .apply{text-align: center;margin-bottom: 180px}
.join03 .apply p{font-size: 16px;margin-top: 30px;font-weight: normal;}
.join03 .apply a{display: block;margin: 0 auto;border: 1px solid #80A1D8;color: #80A1D8;line-height: 63px;height: 65px;border-radius: 4px;font-size: 20px;width: 315px}

.find dl{overflow: hidden;margin-bottom: 20px;font-size: 16px;}
.find dt{float: left;width:25%;line-height: 50px;}
.find dd{float: right;width:75%;overflow: hidden}
.find dd .box{background: #F9F9F9;border-radius: 4px;height: 50px;padding: 10px 15px;margin-bottom: 0;}
.find dd .box input{width:100%;height: 100%;background: none;border: none;display: block;}
.find .num{overflow: hidden;margin-bottom: 10px}
.find .num .box{width:60%;float: left}
.find .num button{width:35%;float: right;display: block;height: 50px;line-height: 50px;font-size: 16px}
.find .num button.line{color: #80A1D8;border: 1px solid #80A1D8;background: white}
.find form p{font-size: 14px;color: #888;text-align: left;margin-bottom: 20px}
.find form p span{color: #D92A44;padding-right: 5px;}
.find form .grey{width:100%;height: 1px; background: #CFD3DC;margin-bottom: 30px}

.landing_top{background-image: url('../img/landing01_bg.png');background-size: cover;background-position: center;padding-top:100px;padding-bottom: 50px;border-bottom-left-radius:200px;}
.landing_top02{background-image: url('../img/landing02_bg.png');padding-bottom: 0;}
.landing_top img{max-width: 1200px;width:94%;margin: 0 auto;display: block;}
.landing_top03 {background-image: url('../img/landing03_bg.png');padding-bottom: 0;}

.landing{width:94%;max-width: 900px;margin: 80px auto;}
.landing .inner{width:98%;border-radius: 20px;margin-top: 50px;}
.landing .txt{background: #F9F9F9;border-radius: 4px;padding: 10px 15px;height: 190px;}
.landing .txt textarea{display: block;width:100%;height: 100%;border: none;background: none;font-size: 16px;}
.landing .submit{width:240px}
.landing .mm .box{float: left;width:120px;}

/* 썸메이트 관련 추가 */
.mate_list ul{overflow: hidden;border-top: 1px solid #111;border-bottom: 1px solid #111;padding: 50px 0}
.mate_list li{float: left;width:30%;margin: 20px 0;margin-right: 5%;}
.mate_list li:nth-child(3n){margin-right: 0;}
.mate_list li .th{box-sizing: border-box;position: relative;height: 300px;overflow: hidden;border-radius: 10px;margin-bottom: 10px;}
.mate_list li .th img{width:100%;position: absolute;top:50%; transform:translateY(-50%)}
.mate_list li .txt{padding: 20px ;background: #dcd0ee;border-radius: 10px;text-align: right}
.mate_list li .txt span{display: block;font-size: 24px;color: #111;font-weight: 700;margin-bottom: 10px;text-align: left}
.mate_list li .txt p{font-size:16px;color: #333;line-height: 1.5em;text-align: left}
.mate_list li .txt a{display: inline-block;background: #e7def3;font-size: 14px;width:130px;height:45px;line-height: 45px;text-align: center;border-radius: 5px;margin-top: 10px}

@media screen and (max-width:960px){
    .con{width:94%}
    
    .head{height: 60px;padding-top: 16px;}
    .head .logo{position: relative;left: 0;top:0;}
    .head .menu_on{display: block;position: absolute;left: 3%;height: 30px;top:15px;z-index: 3;}
    .head .menu_on img{height: 100%}
    .head .menu{position: fixed;left: 0;width:100%;background:white;height: 100%;box-sizing: border-box;z-index:9;top:0;padding-top: 20px;left: -100%;}
    .head .menu li{display: block;margin: 0;;padding:15px 3%;font-size: 18px;border-bottom: 1px solid #eee;text-align: left}
    .head .menu li .depth2{display: block;position: relative;height: auto;top:0;border-bottom: none;margin-top: 10px}
    .head .menu .depth2 ul{margin-left: 0;}
    .head .menu .depth2 li{padding:0;font-size: 16px;border-bottom: none;padding-left: 30px}
    .head .menu li:hover>a{color: #333}
    .head .menu .depth2 li::after {display: none;}
    .head .menu .depth2 li a{position: relative;color: #777;display: inline-block;}
    .head .menu .depth2 li a::before{content: '-';position: absolute;left: -15px;height:40px;line-height: 40px}
    .head .my{display: none;}
    .head .m_my{display: block;text-align: center;margin-top: 20px}
    .head .m_my a{display: inline-block;width:40%;border: 1px solid #ddd;line-height: 40px;margin: 0 5px;border-radius: 20px}
    .head .menu_close{display: block;position: absolute;right: 3%;height: 30px;top:15px;}
    .head .menu_close img{height: 100%;}
    
    .review_list li .th{height: 350px}
    .event_list li .th{height: 250px}
}



@media screen and (max-width:640px){
    .con{width:94%;}
    .mobile{display: block !important;}
    .pc{display: none !important;}
    body{font-size: 16px}
    .m_tit{text-align: center;padding-top: 50px}
    .m_tit span{display: block;font-size: 22px;margin-bottom: 10px;line-height: 1.4em}
    
    .main00 .con{height: auto}
    .main00 .con img{width:100%;}
    
    .main01 .con{background-image: none;}
    .main01 .scroll{display: none;}
    .main01 .con img{width: 100%;position: absolute;bottom:0;}
    
    .main02 .img{position: relative;width:70%;top: auto;display: block;margin: 0 auto}
    .main02 .area{width:80%;margin: 20px auto;height: 40px;padding: 0 10px}
    .main02 .area select{line-height: 38px}
    .main02 label{width:35%;}
    .main02 label span{height: 40px;line-height: 40px;font-size: 18px}
    .main02 label::after{height: 40px}
    .main02 label:nth-child(3){margin-left: 15%}
    .main02 .box{margin: 0 auto;margin-top: 80px;width:70%;}
    .main02 .box dt{width:30%}
    .main02 .box dd{width:70%}
    .main02 .box button{width:60%;display: block;height: 45px;line-height: 45px;margin: 0 auto;font-size: 16px}
    .main02 .txt{padding: 10px;margin-top: 20px;margin-bottom: 30px}
    .main02 .txt p{font-size: 14px;line-height: 20px}
    .main02 .txt p::before{top:8px}
    .main02 .box dd input{font-size: 16px;}
    
    .main03 .swiper-container{margin-top: 50px}
    .main03 .swiper-slide{width:70%;padding: 0 10px}
    
    .main04 .swiper-container{margin-top: 50px}
    .main04 .swiper-slide{width:70%;padding: 0 10px}
    
    .main05 .jalnan{display: block;margin-top: 50px;font-size: 22px;text-align: center}
    .main05 p{font-size: 16px;text-align: center;margin-top:10px;line-height: 1.3em}
    .main05 .img{position: relative;height: auto;width:80%;margin: 0 auto;margin-top: 20px;display: block}
    .main05 a{width:80%;margin: 0 auto;margin-top: 20px;line-height: 50px}
    
    .main06 span.jalnan{display: block;margin-top: 50px;font-size: 22px;text-align: center;margin-bottom: 20px}
    .main06 label{width:40%;}
    .main06 label span{height: 40px;line-height: 40px;font-size: 18px}
    .main06 label::after{height: 40px}
    .main06 label:nth-child(4){margin-left: 10%}
    .main06 .swiper-container{margin-top: 100px}
    .main06 .swiper-slide{width:55%;padding: 0 10px}
    
    .main07 .con{padding: 40px 0;}
    .main07 .tit span{display: block;font-size: 22px;text-align: center;margin-bottom: 20px}
    .main07 .tit p{font-size: 16px}
    .main07 .img{width:90%;margin: 0 auto}
    .main07 .img img{width:100%;float: none;}
    .main07 .swiper-container{margin-top: 20px;padding-bottom: 30px}
    .main07 .swiper-slide{width:80%;padding: 0 10px;}
    .main07 .swiper-slide img{width:100%;}
    
    .main08{padding: 50px 0}
    .main08 .tit{margin-bottom: 30px}
    .main08 .tit span{font-size: 22px;margin-bottom: 20px;word-break:keep-all}
    .main08 .tit p{font-size: 16px}
    .main08 .ico01,.main08 .ico02{display: none;}
    .main08 .left{width:100%;float: none;margin-left: 0;}
    .main08 .right{float: none;width:100%;margin-top: 20px;margin-right: 0;}
    
    .main09 .con .ico{display: none;}
    .main09 .jalnan.mobile{display: block;font-size: 22px;}
    .main09 .left{float: none;width:100%;text-align: center}
    .main09 .left p{font-size: 18px;margin: 10px 0}
    .main09 .left .btn{display: none;}
    .main09 .right{width:100%;float: none;margin-top: 20px}
    .main09 .swiper-container{padding-bottom: 30px}
    .main09 .swiper-pagination{display: block;}
    .main09 .right .swiper-slide{width:70%;padding: 0 10px;height: 250px}
    .main09 .right .swiper-slide img{width:100%;height: auto}
    .main09 .right .swiper-slide p{font-size: 18px}
    .main09 .right .swiper-slide a{line-height: 45px;font-size: 16px}
    
    .main10 .tit{margin-bottom: 40px}
    .main10 .tit .jalnan{font-size: 22px}
    .main10 .tit p{font-size: 16px}
    .main10 li{width:49%;margin-right: 2%;margin-bottom: 20px}
    .main10 li:nth-child(2),.main10 li:nth-child(4){margin-right: 0;}
    .main10 li b{font-size: 50px;margin-bottom: 00px}
    .main10 li p{font-size: 16px;}
    
    .main11{padding: 50px 0}
    .main11 .tit{margin-bottom: 40px}
    .main11 .tit span{font-size: 22px}
    .main11 .tit p{font-size: 16px;margin-top: 10px}
    .main11 ul{width:80%;margin: 0 auto;}
    .main11 li{float: none;width:100%}
    .main11 li p{font-size: 16px;margin-top: 10px}
    .main11 li.arrow{width:100%;height: 50px;background-image: url('../img/m_main11_arrow.png');margin: 15px 0;background-size: auto 70%}
    
    .footer{padding: 30px 0}
    .footer .logo{float: none;}
    .footer .txt{float: none;margin-left: 0;margin-top: 20px;font-size: 14px}
    .footer .txt p{margin: 0;}
    .fp-scrollable{height: auto !important}
    
    .sub_top{background-size: cover;background-position: left center;padding-top: 60px}
    .sub_top .con{padding: 40px 0;width:94%;margin: 0 auto;}
    .sub_top b{;font-size: 26px;}
    .sub_top p{padding:15px 0;font-size:15px; }
    .sub_top .con div img{height: 20px}
    .sub_top .con div span{font-size: 15px;line-height: 20px}
    
    .sub .link{width:80%;height: 50px;line-height: 50px;;margin: 30px auto}
    .sub02 .con{padding:50px 0}
    .sub03 .txt{font-size: 14px;margin-bottom: 30px}
    
    .review_list ul{padding: 30px 0}
    .review_list li{width:49%;margin-right: 0;margin: 10px 0}
    .review_list li:nth-child(2n){float: right}
    .review_list li .txt span{font-size: 14px;}
    .review_list li .txt p{font-size: 18px}
    .review_list li .th{height: 230px}
    .board_list .wr_btn{text-align: center}
    .board_list .wr_btn a{height: 50px;line-height: 50px}
    
    .board_detail .tit{font-size: 18px;padding: 10px;line-height: 40px;}
    .board_detail .list div{padding: 0 10px}
    .board_detail .inner img{width:100%}
    .board_detail .list div{font-size: 14px}
    .board_detail .list p{padding-right: 10px}
    .board_detail .list p img{margin-left: 20px}
    .board_detail .list a{padding-left: 10px}
    .board_detail .list_btn a{height: 50px;line-height: 50px}
    
    .board_list .list_tit{font-size: 20px;padding: 10px 0}
    .board_list .list_top .now{display: none;}
    .board_list .list_top .search{float: none;}
    .board_list .list_top .search select{width:32%;height: 40px;}
    .board_list .list_top .search .box{float: right;width:65%;height: 40px;margin-left: 0;}
    .board_list .list_top .search .box button{width: 40px;height: 40px;}
    .board_list .list_top .search .box input{width:85%}
    .board_list .num{display: none;}
    .board_list .hit{display: none;}
    .board_list .date{width:100px}
    .board_list .list table{font-size: 14px}
    
    .board_detail .detail_tit{font-size: 20px;padding: 10px 0}
    .board_detail .detail_infor{padding: 10px;}
    .board_detail .detail_infor dl{font-size: 14px;}
    .board_detail .detail_infor dd{margin-left: 20px}
    
    .event_list li{width:49%;margin-right: 0;margin: 10px 0;}
    .event_list li:nth-child(2n){float: right}
    .event_list li .th{height: 200px}
    .event_list li .txt p{font-size: 18px}
    .event_list li .txt span{font-size: 14px;margin-top: 5px}
    
    .cs_list .date{display: none;}
    .cs_list .answer{width:110px}
    .board_list .list td{line-height: 30px;padding: 10px}
    .cs_list .list td a{padding: 0;}
    
    .login .inner{margin: 100px auto;padding: 40px 20px}
    .login p{font-size: 30px;margin-bottom: 30px}
    .login label span{display: none}
    .login .box label{width:15%;}
    .login .box input{width:80%;font-size: 16px}
    .login button{line-height: 45px;height: 45px;font-size: 18px;}
    .login ul{margin-top: 30px}
    .login li{font-size: 15px;}

    .join .tit{font-size: 30px;margin-bottom: 30px;margin-top:100px}
    .join .inner{margin: 40px auto;padding:20px}
    .join .sub_tit{font-size: 20px;line-height: 40px;margin-bottom: 20px}
    .join01 .ck_tab{font-size: 14px}
    .join01 .ck_tab input{margin-right: 5px}
    .join01 .txt div{font-size: 14px;}
    .join .submit{line-height: 45px;height: 45px;font-size: 18px;margin-top: 30px}
    
    .join02 .con01{margin-bottom: 30px}
    .join02 dt{float: none;width:100%;font-size: 14px;line-height: 40px;}
    .join02 dd{float: none;width: 100%}
    .join02 dd.w-100{padding: 5px 10px;height: 40px;}
    .join02 dd.birth select{width:30%;height: 40px;line-height: 40px;margin-right: 3%;}
    .join02 dd.birth select:first-child{width:34%;}
    .join02 dd.birth select:last-child{margin-right: 0;}
    .join02 .sel label{line-height: 40px;padding-left: 30px;}
    .join02 .sel label::before{width:20px;height: 20px;top:10px}
    .join02 .sel input:checked + label::after{top:15px;left: 5px;}
    .join02 .gen .army{margin-top: 0;}
    .join02 dd .box{padding: 5px 10px;height: 40px;}
    .join02 .w-70 button{height: 40px;line-height: 40px;}
    .join02 .w-70 .box{width:65%;}
    .join02 .w-70 button{width:33%;}
    .join02 .w-40 span{line-height: 40px;font-size: 16px;}
    .join02 .file label{width:33%;height: 40px;line-height: 40px}
    
    .join02 .rest p{float: none;line-height: 1.5em;}
    .join02 .rest button{float: none;margin: 20px auto;}
    
    .join03 .inner{margin-bottom: 50px}
    .join03 .inner .txt p{font-size: 20px;}
    .join03 .inner .txt span{font-size: 14px;}
    .join03 .inner a{width:100%;height: 50px;line-height: 50px;margin-top: 30px;font-size: 18px}
    .join03 .apply a{width:80%;height: 50px;line-height:48px;font-size: 18px}
    .join03 .apply p{font-size: 14px;margin-top: 20px}
    
    .find dt{float: none;width:100%;line-height: 40px;}
    .find dd{float: none;width:100%;}
    .find dd .box{;height: 40px;padding: 5px 10px}
    .find .num button{height: 40px;line-height: 40px;width:38%;}
    
    .landing_top{background-image: none;padding: 0;border-radius: 0}
    .landing_top img{width:100%;}
    
    .landing{margin: 50px auto;width:92%;}
    .landing .inner{width:100%;border-radius: 0;border: none;box-shadow: none;padding: 0;margin-top: 20px}
    .landing .txt{height: 100px;padding: 5px 10px;font-size: 16px}
    
    /*썸메이트 추가  css */
    .mate_list ul{padding: 30px 0}
    .mate_list li{width:49%;margin-right: 0;margin: 10px 0}
    .mate_list li:nth-child(2n){float: right}
    .mate_list li .txt{padding: 10px}
    .mate_list li .txt span{font-size: 16px;}
    .mate_list li .txt p{font-size: 12px}
    .mate_list li .txt a{font-size: 12px;width:100px;height: 35px;line-height: 35px}
    .mate_list li .th{height: 200px}

}