@charset "UTF-8";

body { background:#fff;}

#joinContents div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { margin:0; padding:0; list-style-type:none;}
#joinContents fieldset,img { border:0; vertical-align:bottom;}
#joinContents caption,th,td { text-align:left;}

#joinContents select { padding:1px; }
#joinContents input { vertical-align:baseline;}
#joinContents input,select { margin:2px 5px 2px 0;}

#joinContents div.error_s { background: rgba(220,0,0,1); padding: 10px; border:2px solid rgba(200,0,0,.05); margin: 0 10px 10px; }
#joinContents div.error_s li { font-weight: bold; color: #ff0; font-size: 1.0rem; }

/* ─────────────────────────────────
OPTIONS
───────────────────────────────── */
.tC{text-align:center!important;}
.tL{text-align:left!important;}
.tR{text-align:right!important;}
.fL{float:left!important;}
.fR{float:right!important;}
.mb30{margin-bottom:30px !important;}
.mb50{margin-bottom:50px !important;}

#joinContents { width:860px; margin:0 auto; padding:58px 0 0 0; overflow:hidden; line-height:150%;}
#joinContents h2 { width:860px; height:32px; line-height:30px; text-indent:14px; margin:0 0 30px 0; font-size:14px; color:#fff; border:0; background-color: #0B8CD7;}
#joinContents h3 { width:840px; margin:0 10px 10px 10px; padding:5px 0; text-indent:10px; background:#eee none 0 0 no-repeat;}
#joinContents p { margin:0 10px 10px 10px;}
#joinContents a:hover img { opacity:0.8; filter: alpha(opacity=80); }

#joinContents .joinFlow { width:840px; margin:0 10px 40px 10px;}

#joinContents table.selectBtn { width:840px; margin:0 10px 40px 10px;}
#joinContents table.selectBtn tr th { width:20px; vertical-align:top;}
#joinContents table.selectBtn tr th input { padding:0; margin:0; outline:none;}
#joinContents table.selectBtn tr td { vertical-align:top; padding:0 0 5px 0;}
#joinContents table.selectBtn tr td label { display:block;}
#joinContents table.selectBtn tr.dotLine { border-top:1px dotted #ccc;}
#joinContents table.selectBtn tr.dotLine td { padding:10px 0 10px 0;}
#joinContents table.selectBtn tr.dotLine th { padding:10px 0 0 0;}
#joinContents table.dotLine { border-bottom:1px dotted #ccc;}

#joinContents ul.entryBtn { width:840px; text-align:center; margin:0 10px 20px 10px;}
#joinContents ul.entryBtn li { width:264px; height:54px; display:inline; margin:0 1px;}

#joinContents .caution { color:#f00;}
#joinContents .caution a { color:#f00;}
#joinContents .asterisk { padding:0 0 0 1em; text-indent:-1em;}
#joinContents .sup { font-size:11px; color:#6587A6;}
#joinContents .mL { margin:2px 5px;}
#joinContents .error { color:#FD8C02;}
#joinContents .error_pass { color:#FD8C02;}
#joinContents .fs120 { font-size:120%;}

#joinContents input.txtS { width:40px;}
#joinContents input.txtM { width:200px;}
#joinContents input.txtL { width:500px;}
#joinContents input.ibox { position:relative; top:1px;}

#joinContents table.joinTable { width:840px; margin:0 10px 40px 10px; background:#ccc none 0 0 no-repeat; border-collapse:separate; border-spacing:1px;}
#joinContents table.joinTable tr th { width:220px; padding:10px 0; text-indent:10px; font-weight:100; background:#F2F2F2 none left top no-repeat; border:1px solid #fff;}
#joinContents table.joinTable.medicalCheck tr th { text-indent:0;}
#joinContents table.joinTable tr th.must { background:#F2F2F2 url(../img/join/ico_must.gif) 182px center no-repeat;}
#joinContents table.joinTable tr td { padding:10px; background:#fff none left top no-repeat;}
#joinContents table.joinTable tr td dl.check { width:580px; overflow:hidden;}
#joinContents table.joinTable tr td dl.check dt { width:20px; float:left; overflow:hidden;}
#joinContents table.joinTable tr td dl.check dt input { padding:0; margin:0; outline:none;}
#joinContents table.joinTable tr td dl.check dd { width:560px; float:right; overflow:hidden;}
#joinContents table.joinTable tr td dl.check dd label { display:block; overflow:hidden;}
#joinContents table.joinTable tr td dl.check dd ol { margin:10px 0 0 0;}
#joinContents table.joinTable tr td dl.check dd ol li {}

#joinContents .notes { width:840px; margin:-30px 10px 40px 10px;}
#joinContents .ruleArea { height:280px; overflow:auto; overflow-x:hidden; padding:10px; margin:0 10px 10px 10px; border:1px solid #ccc;}
#joinContents .ruleArea h4 { font-weight:900; margin:0 0 20px 0;}
#joinContents .ruleArea h5 { font-weight:900;}
#joinContents .ruleArea p { margin:0 0 20px 0;}
#joinContents .pdfBtn { width:840px; margin:0 10px 20px 10px; display: flex; align-items: center; justify-content: end;}
#joinContents .terms { width:840px; margin:0 10px 30px 10px;}
#joinContents .comment { width:840px; margin:0 10px 10px 10px; padding:20px 0 0 0; text-align:center;}

#joinContents .letter { width:800px; padding:20px 0 0 0; border:1px solid #ccc; background:#fafafa none 0 0 no-repeat; margin:20px 30px 40px 30px;}
#joinContents .letter h4 { width:760px; margin:0 20px 20px 20px; text-align:center; font-weight:900; font-size:16px;}
#joinContents .letter p { width:760px; margin:0 20px 20px 20px;}

#joinContents .joinFin { width:840px; margin:0 10px; padding:0 0 20px 0;}
#joinContents .joinFin p { margin:0 0 20px 0;}
#joinContents .joinFin p em { font-size:16px; color:#f00;}

#joinContents .sectionOption { margin: 0 0 50px; }
#joinContents .sectionOption label { cursor: pointer; }
#joinContents .sectionOption > p { padding: 0 0 30px; margin: 0; border-bottom: 1px dashed #ccc; }
#joinContents .sectionOption .cont { padding:15px 0; border-bottom: 1px dashed #ccc; }
#joinContents .sectionOption .cont:after { content: ""; display: block; clear: both; }
#joinContents .sectionOption .cont .img { float: right; }
#joinContents .sectionOption .cont .txt { overflow: hidden; padding: 0 30px 0 0; }
#joinContents .sectionOption .cont .txt h3 { background: none; padding: 5px 0 0 25px; margin: 0; color:#111; font-size: 15px; text-indent: 0; position: relative; }
#joinContents .sectionOption .cont .txt h3 input { vertical-align: middle; position: absolute; left: 4px; }
#joinContents .sectionOption .cont .txt h3:hover { color:#22ABBB; }
#joinContents .sectionOption .cont .txt h3 label.checked { color:#22ABBB; }
#joinContents .sectionOption .cont .txt p { padding: 0 0 13px 25px; margin: 0; font-size: 12px; text-indent: 0; }
#joinContents .sectionOption .cont .txt .aceptwrap { margin: 0 0 0 25px; padding: 25px 15px 25px 70px; position: relative; background: #F56B36 ; }
#joinContents .sectionOption .cont .txt .aceptwrap h4 { color:#fff; font-size: 12px; text-decoration: underline; font-weight: bold; }
#joinContents .sectionOption .cont .txt .aceptwrap h4 input { vertical-align: middle; }
#joinContents .sectionOption .cont .txt .aceptwrap h4 label:before { content:url(../img/join/ico_mustcheck.png); display: block; width: 42px; height: 44px; position: absolute; top:22px; left: 13px; }
#joinContents .sectionOption .cont .txt .aceptwrap p { padding: 0; margin: 0; font-size: 12px; text-indent: 0; color:#fff; }
#joinContents .sectionOption .cont .txt .aceptwrap p a { color:#fff; }

#joinContents .sectionOption .cont .txt .guidancewrap { margin:30px auto; text-align: center; }
#joinContents .sectionOption .cont .txt .guidancewrap a { border-radius: 2px; text-align: left; display: inline-block; margin: 0 auto; padding: 15px 20px 15px 60px; position: relative; background: #F56B36 ; text-decoration: none; transition: .3s; }
#joinContents .sectionOption .cont .txt .guidancewrap a:hover { background: #F5AF36; }
#joinContents .sectionOption .cont .txt .guidancewrap a:before { content:url(../img/join/ico_guidance.svg); position: absolute; top:18px; left: 20px; }
#joinContents .sectionOption .cont .txt .guidancewrap h4 { color:#fff; font-size: 12px; text-decoration: underline; font-weight: bold; }
#joinContents .sectionOption .cont .txt .guidancewrap p { padding: 0; margin: 0; font-size: 12px; text-indent: 0; color:#fff; }
#joinContents .sectionOption .cont .txt .guidancewrap p a { color:#fff; }

#joinContents .sectionOrientation { margin: 0 0 50px; }
#joinContents .sectionOrientation .pagenation { border-top:1px solid #ddd; padding: 15px; position: relative; }
#joinContents .sectionOrientation .pagenation h3 { background: none; margin: 0 100px; padding: 0; line-height: 25px; text-align: center; color: #005F99; font-size: 16px; font-weight: bold; width: auto; text-indent: 0; }
#joinContents .sectionOrientation .pagenation .prev,
#joinContents .sectionOrientation .pagenation .next { line-height: 25px; font-size: 14px; color: #444; position: absolute; top:15px; cursor: pointer; }
#joinContents .sectionOrientation .pagenation .prev:hover,
#joinContents .sectionOrientation .pagenation .next:hover { color:#005F99; text-decoration: underline; }
#joinContents .sectionOrientation .pagenation .prev:after,
#joinContents .sectionOrientation .pagenation .next:after { content: ""; display: inline-block; width: 0px; border-color: #888888; border-style: solid; border-width: 7px; position: absolute; top:50%; margin: -8px 0 0; }
#joinContents .sectionOrientation .pagenation .prev { left: 0; padding: 0 0 0 20px; }
#joinContents .sectionOrientation .pagenation .prev:after { left: 0; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
#joinContents .sectionOrientation .pagenation .next { right: 0; padding: 0 20px 0 0; }
#joinContents .sectionOrientation .pagenation .next:after { right: 0; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
#joinContents .sectionOrientation .topmessage,
#joinContents .sectionOrientation .bottommessage { background: #E3E7E9; text-align: center; font-size: 14px; font-weight: bold; padding: 10px; border:1px solid #ddd; }
#joinContents .sectionOrientation .topmessage { color: #D80000; border-bottom: none; }
#joinContents .sectionOrientation .bottommessage { color: #333333; border-top:none; }
#joinContents .sectionOrientation table { width: 100%; box-sizing: border-box; border-spacing:0; border-collapse: separate; border-left:1px solid #ddd; }
#joinContents .sectionOrientation table thead th,
#joinContents .sectionOrientation table thead td { background: #8EA0A8; color: #fff; text-align: center; padding: 5px; border-right:1px solid #B0BDC2; }
#joinContents .sectionOrientation table tbody th { vertical-align: middle; border-bottom:1px solid #ddd; border-right:1px solid #ddd; box-sizing: border-box; padding:5px 10px; color:#D80000; }
#joinContents .sectionOrientation table tbody td { vertical-align: top; width: 12%; border-bottom:1px solid #ddd; border-right:1px solid #ddd; box-sizing: border-box; padding:5px; }
#joinContents .sectionOrientation table tbody td em { font-size: 12px; color:#596B73; display: block; margin: 0 0 5px; line-height: 1.1; }
#joinContents .sectionOrientation table tbody td.sat em { color:#007FFF; }
#joinContents .sectionOrientation table tbody td.sun em { color:#f00; }
#joinContents .sectionOrientation table tbody td.hol em { color:#f00; }
#joinContents .sectionOrientation table tbody td.off { background: #e5e5e5; }
#joinContents .sectionOrientation table tbody td.off p { padding: 15px 0 15px; text-align: center; color:#aaa; }
#joinContents .sectionOrientation table tbody td.off em { color:#aaa; }
#joinContents .sectionOrientation table tbody td li { text-align: center; cursor: pointer; border-radius: 2px; }
#joinContents .sectionOrientation table tbody td li:hover { background: #eee; }
#joinContents .sectionOrientation table tbody td li.select { color:#fff; background: #FD8C01;  }
#joinContents .btn.detail { display: inline-block; font-size: .9rem; color:#666; line-height: 1.2; padding: 5px 5px 3px; border:1px solid #ddd; background: #fafafa; box-shadow: inset 0 1px 0 #fff; text-decoration: none; margin: 0; transition: all .25s ease; }
#joinContents .btn.detail:hover { border:1px solid #ccc; color:#111; background: #eee; }
.popup { display: none; position: fixed; top:0; left: 0; width: 100%; height: 100%; }
.popup .bg { position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(45,179,195,0.9); }
.popup .cont { width: 460px; height: 310px; background: #fff; border-radius: 3px; position: absolute; top:50%; left: 50%; margin: -155px 0 0 -230px; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: relative; }
.popup .cont .tit { padding: 15px; line-height: 1.1; color:#fff; text-align: center; font-weight: bold; font-size: 16px; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(to bottom, #41c1d0 42%,#22abbb 100%); }
.popup .cont table { margin: 25px 15px; width: 410px; }
.popup .cont th { font-size: 14px; padding: 10px; color:#111; }
.popup .cont td { font-size: 14px; padding: 10px; }
.popup .cont td em { color:#FF8000; font-weight: bold; }
.popup .cont td label {display: block; box-sizing: border-box; width: 100px; height: 34px; line-height: 32px; text-align: center; border:1px solid #ddd; border-radius: 2px; box-shadow: inset 0 1px 0 #fff; background: #fafafa; cursor: pointer; }
.popup .cont td label input { position: relative; top:2px; }
.popup .cont li { text-align: center; }
.popup .cont li button { display: inline-block; background: #006099; color:#fff; text-align: center; border:1px solid #006099; padding: 10px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); cursor: pointer; min-width: 120px; transition: all .25s ease;  }
.popup .cont li button:hover { opacity: 0.75; }
.popup .cont .close { position: absolute; top:-30px; right: -30px; color:#fff; font-size: 30px; cursor: pointer; }

#joinContents ul.entryBtn.v2 li { display: inline-block; width: auto; height: auto; margin: 0 5px; vertical-align: top; }
.formbtn { line-height: 1.1; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(255,153,0,1) 1%,rgba(255,102,0,1) 100%); width: 260px; height: 56px; padding: 5px 10px; text-align: center; box-sizing: border-box; border:1px solid #ff6600; box-shadow: inset 0 0 1px rgba(255,255,255,.75), 0 0 2px rgba(0,0,0,.3); border-radius: 4px; position: relative; text-decoration: none; transition: .4s; }
.formbtn:before { box-sizing: border-box; content: ""; display: block; width: 24px; height: 24px; border:1px solid #fff; border-radius: 100px; position: absolute; top: calc(50% - 12px); left: 15px; }
.formbtn:after { box-sizing: border-box; content: ""; display: block; position: absolute; top: calc(50% - 5px); left: 24px;  width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #ffffff; }
.formbtn:hover { opacity: .75; }
.formbtn span { line-height: 1.1; color:#fff; font-size: .95rem; font-weight: bold; text-decoration: none; display: inline-block; padding: 0 0 0 15px; }

.formbtn.back { background: linear-gradient(to bottom, rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); border:1px solid #dddddd; box-shadow: inset 0 0 1px rgba(255,255,255,1), 0 0 2px rgba(0,0,0,.05); }
.formbtn.back:before { border:1px solid #00A6BA; }
.formbtn.back:after { border-color: transparent transparent transparent #00A6BA; }
.formbtn.back span { color:#555; }

#joinContents .sectionText { margin: 0 0 30px; /*border-top:1px dashed #ccc;*/}
#joinContents .plan_type { font-weight: bold; color: #f00; }

.fs90rem { font-size: .9rem !important; }