/* ==== tab ==== */
@media screen and (max-width:1024px){
.inner {width:100%; padding:0 3%;}
.pc {display:block;}
.tab {display:block;}
.mob {display:none;}
.pc_img {display:none !important;}
.mob_img {display:block !important;}

body,th,td,input,select,textarea,button {font-size:16px; line-height:28px;}

/* === Main === */
#wrap {position:relative; width:100%; max-width:1024px; min-width:auto; margin:0 auto; overflow:hidden;}
#header {position:fixed; top:0; left:0; width:100%; height:70px; z-index: 10;}
#header h1 img {position:absolute; left:3%; top: 13px; height: 43px;}
.gnb {display:none;}
#header .join_wrap {display:none;}
#header .join_wrap2 {display:none;}

.navi {display:none; position:fixed; top: 70px; left: 0; width: 100%; height:100vh; background:rgba(0,0,0,0.5); z-index:1000;}
.navi .lnb {display:block; float:right; width:70%; height:100%; background:#fff; border-top:1px solid #eaeaea;}
.lnb h3 {position: relative; width: 100%; height: 50px; padding: 0 20px; border-bottom: 1px solid #eaeaea; box-sizing: border-box;}
.lnb h3 a {display:block; font-size: 15px; color: #222; font-weight:500; line-height:50px}
.navi h3.active {background:#D50004; transition: 0.3s}
.navi h3.active a{color: #fff; }
.navi h3.on{background:#D50004;}
.navi h3.on a {color: #fff; }
.sub_navi {display:none; padding:20px; border-bottom: 1px solid #eaeaea;}
.sub_navi li a {display:block; width:100%; line-height:30px; font-size: 14px; color: #666666;}


.lnb .join_wrap_mob {margin-top: 30px; margin-left: 20px;}
.lnb .join_wrap_mob a {display:inline-block; font-size: 15px; line-height: 32px; color: #888;}
.lnb .join_wrap_mob .orderBtn {font-size: 14px; font-weight: bold; margin-right: 20px; border:1px solid #D50004; padding: 8px 13px 8px 10px; line-height: 1;  color: #D50004;}
.lnb .join_wrap_mob .orderBtn:hover {background: #D50004; transition-duration:.4s; color: #fff;}
.lnb .join_wrap_mob .loginBtn {margin-right: 4px; padding-right: 14px; position:relative;}
.lnb .join_wrap_mob .loginBtn::after {content:''; width:1px; height: 10px; background: #999; position:absolute; right:0; top:10px;}
.lnb .join_wrap_mob > div {display:inline-block;}




.navi_btn {position:fixed; display:block; top:26px; right:3%; height:20px; width:35px; cursor:pointer; z-index:9999;}
.navi_btn span {position:absolute; display:block; width:100%; height:2px; background:#000;  transition: .25s ease-in-out;}
.navi_btn span:first-child {margin-top:0;}
.navi_btn span:nth-child(1) {top:0}
.navi_btn span:nth-child(2) {top:9px;}
.navi_btn span:nth-child(3) {top:18px;}

.navi_btn.on span:nth-child(2) {opacity:0; transition:0.3s ease-in-out; width: 0%;}
.navi_btn.on span:nth-child(1) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); 
transform: rotate(45deg); top:9px; left:0px;}
.navi_btn.on span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); 
transform: rotate(-45deg); top:9px; left:0px;}

.visual {background: url(../images/main/main_visual.jpg) no-repeat center bottom / cover;}
.visual .inner .text {width: 100%; padding: 0 3%;}
.visual .inner .text h2 {font-size:38px; line-height: 80px;}
.visual .inner .text h2 strong {font-size:60px;}
.visual .inner .text p {font-size: 20px; line-height: 40px; margin-top:30px; padding-top:30px;}
.visual .inner .text p::before {width:60px; height: 2px;}

.title span {color: #D50004; font-size: 20px; margin-bottom:15px;}
.title h2 {color: #222; font-size:40px; }

.section1 {width:100%; background: url(../images/main/sec1_bg.jpg) no-repeat center center / cover; padding:60px 0;}
.section1 .title {float:left; width: 40%;}
.section1 .title span {font-size:20px; margin-bottom:20px;}
.section1 .title h2 {font-size:38px; line-height:57px;}

.section1 .right {float:right; width: 60%;}
.section1 .right p {font-size:15px; line-height:30px; margin-top:45px; word-break:keep-all;}

.section2 {padding:60px 0;}
.section2 .title {margin-bottom:80px;}

.section2 .b_list li {float:left; width: 50%; height:300px;}
.section2 .b_list li:first-child {background: url(../images/main/sec2_01.jpg) no-repeat center center / cover; }
.section2 .b_list li:nth-child(2) {background: url(../images/main/sec2_02.jpg) no-repeat center center / cover; transform:translateY(-30px);}
.section2 .b_list li:nth-child(3) {background: url(../images/main/sec2_03.jpg) no-repeat center center / cover;}
.section2 .b_list li:nth-child(4) {background: url(../images/main/sec2_04.jpg) no-repeat center center / cover; transform:translateY(-30px);}
.section2 .b_list li h3 {font-size:25px; left:20px; bottom:40px;}
.section2 .b_list li h3::after {bottom:-15px;}

.section2 .inner > img {display:block;margin:55px auto; height:100px;}

.section2 .b_list2 {border-top:2px solid #BABABA; border-bottom:1px solid #EAEAEA; width:100%; padding:0;}
.section2 .b_list2 li {float:left; width:50%; padding:20px 30px; position:relative; height:170px; border-right:1px solid #eaeaea;}
.section2 .b_list2 li:nth-child(-n+2){border-bottom:1px solid #eaeaea;}
.section2 .b_list2 li:nth-child(2n){border-right:0;}
.section2 .b_list2 li h3 {font-size:17px; line-height:26px;}
.section2 .b_list2 li .btn {position:absolute; bottom:20px; line-height: 1; width: 100%; left: 0; padding: 0 30px;}
.section2 .b_list2 li .btn span {font-size:15px ;}
.section2 .b_list2 li .btn img {right:30px;}

.section3 {background:url(../images/main/sec3_bg.jpg) no-repeat center center / cover ; padding:60px 0;}
.section3 .title {margin-bottom:35px;}
.section3 .arrow_btns {font-size:0;}
.section3 .arrow_btns button {line-height:0;}
.section3 .arrow_btns img {height:18px;}
.section3 .arrow_btns button:first-child {margin-right:18px; padding-right:18px; position:relative;}
.section3 .arrow_btns button:first-child::before {content:''; width:1px; height: 10px; background:#BEBEBE; position:absolute; right:0; top:5px;}
.section3 .p_list {border:1px solid #D8D8D8; margin-top:20px;}
.section3 .p_list li {border:0; border-right:1px solid #D8D8D8; width: 25%; height: 200px; background: #fff; position:relative;}
.section3 .p_list li img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:100%;}

.section4 {width: 100%; padding-top:60px;}
.section4 .title p {margin-top: 30px; font-size:16px; line-height:27px;}
.section4 .title p strong {color: #222;}
.section4 iframe {width: 100%; height:400px; margin-top:40px;}

#footer {padding:30px 0;}
#footer p {font-size:15px; line-height:28px; color: #919191;}
#footer p span {margin: 0 10px;}
#footer p.copyright {color: #fff; margin-top:13px;}

/* === Sub === */

.sub_visual {width:100%; height: 500px; background: url(../images/sub/sub_visual02.jpg) no-repeat center center / cover;}
.sub_visual .text {padding-top: 185px; text-align: center;}
.sub_visual .text img {width: 170px;}
.sub_visual .text h2 {font-size: 55px;  line-height: 1; margin: 25px 0 40px; color: #fff;}
.sub_visual .text .loc li {font-size: 18px;}

#sub_contents {margin-bottom: 100px;}
#sub_contents .contop {margin: 60px 0;}
#sub_contents h3.h3_tit {font-size: 40px; padding-top: 45px; background: url(../images/sub/h3_tit.jpg) no-repeat center top;}





}