@charset "utf-8";
@import url("common.css");

/* header */
#wrap {position:relative; width: 100%; height: 100%;}
#header { position:relative; width:1200px; margin: 0 auto; background:#ffffff; height:140px; z-index:999;}
#header > h1 { position:relative; width:300px; height:60px;}
#header .logo { position:absolute; top:40px; left: 15px;}
#header .logo a { display: block;  width:300px; height:60px; background:url(../images/common/logo.png) no-repeat;}

#header .menu_btn {position:absolute; right:20px; top:20px; display:none;}
#header .menu_btn div {position: relative; width: 30px; height: 3px; background-color:#000; margin: 8px 0px; transition:all .8s ease;}
#header .menu_btn.lijo div {position:absolute; transition:all .8s ease;}
#header .menu_btn.lijo div:nth-child(1){transform: rotate(45deg);top: 7px;right: 0px;}
#header .menu_btn.lijo div:nth-child(2){width:0px;top: 7px;right: 0px;}
#header .menu_btn.lijo div:nth-child(3){transform: rotate(-45deg);top: 7px; right: 0px;}

#header .nav ul {position: absolute; top:40px; right: 0;}
#header .nav ul.gnb {display: flex;}
#header .nav ul.gnb li{position: relative; color:#000; text-align:center;}
#header .nav ul.gnb li a {display:block; box-sizing: border-box; transition:.5s ease;}
#header .nav ul.gnb li a:hover { color: #007544;}
#header .nav ul.gnb > li > a {display: inline-block; font-size: 20px; font-weight: 700; padding: 20px 30px;}
#header .nav ul.gnb li ul.sub {width: 100%; padding-top: 50px; opacity:0; visibility: hidden; z-index: 3;}
#header .nav ul.gnb li ul.sub li {display: block; position: relative;}
#header .nav ul.gnb li ul.sub li a{padding:10px; font-size: 18px; font-weight: 500;}
#header .nav ul.gnb li ul.sub li a:hover { color: #999;}

.invisual {position: relative;}
.visual { position: relative;}
.visual a { display:block; width:100%; height:630px;}
.visual1 { background:url("../images/main/visual_1.jpg") center top no-repeat;}
.visual2 { background:url("../images/main/visual_2.jpg") center top no-repeat;}
.visual3 { background:url("../images/main/visual_3.jpg") center top no-repeat;}
.visual4 { background:url("../images/main/visual_4.jpg") center top no-repeat;}
.visual5 { background:url("../images/main/visual_5.jpg") center top no-repeat;}
.visual6 { background:url("../images/main/visual_6.jpg") center top no-repeat;}
.visual button { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; border: none;  font: 0; color: transparent;}
.visual button:before { font-family:"xeicon"; font-size: 60px; color:#ffffff;}
.visual .slick-prev { left: 30px;}
.visual .slick-prev:before { content:"\e93d";}
.visual .slick-next { right: 30px;}
.visual .slick-next:before { content:"\e940";}
.visual .slick-dots { position: absolute; bottom: -30px;  display: block; text-align: center; width: 100%; }
.visual .slick-dots li { position: relative; display: inline-block;  width: 20px; height: 10px;}
.visual .slick-dots li button { display: block; width: 10px; height: 10px; outline: none; cursor: pointer; }
.visual .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1;}
.visual .slick-dots li button:before {position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; background:#000; border-radius: 100%; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.visual .slick-dots li button:hover, .slick-dots li button:focus {outline: none;}
.visual .slick-dots li.slick-active button:before {color: black; opacity: 0.75;}

.mission {position:relative; width:1200px; margin: 100px auto 0; text-align: center; overflow: hidden;}
.mission > h2 { width: 300px; height: 110px; margin: 0 auto; padding: 50px 0 0 25px; font-size: 55px; font-weight: 900; letter-spacing: -1px; }
/*.mission > h2 { width: 300px; height: 110px; margin: 0 auto; padding: 50px 0 0 25px; font-size: 55px; font-weight: 900; letter-spacing: -1px; background: url("../images/main/bg_mission.png") no-repeat;}*/
.mission > h3 {font-size: 25px;}
.missionbn ul { position: relative; color: #ffffff; margin-top: 5%;}
.missionbn ul li { float: left; width: 24%; margin:0 0.5%; display: table-cell; vertical-align: middle; text-align:center;}
.missionbn ul li a { display: block; background: #fb7958; padding:70px 5px; border-radius: 20px;}
.missionbn ul li a:hover  {background:#007544; -webkit-transition:background .5s ease-in-out; -moz-transition:background .5s ease-in-out; transition:background .5s ease-in-out;}
.missionbn ul li h4 {font-size: 28px; font-weight: 600; letter-spacing: -1px; padding: 10px 0; color: #ffffff;}
.missionbn ul li .m-text {font-size: 15px; letter-spacing: -0.5px; color: #ffffff;}

.photostory { position: relative; width: 100%; height: 1150px; padding-top: 180px; background: url("../images/main/bg_photo.jpg") no-repeat center top; text-align: center; overflow: hidden;}
.photostory > h2 {font-size: 55px; font-weight: 900; letter-spacing: -1px;}
.photostory > h3 {font-size: 25px;}
.photo-img {position:relative; width:1200px; margin: 0 auto; text-align: center;}
.support {position:relative; width:1200px; margin: 0 auto; text-align: center; overflow: hidden;}
.support ul li { float: left; text-align: left;}
.support ul li:first-child { width: 60%;}
.support ul li:last-child { width: 40%; padding-top: 60px;}
.support h2 {font-size: 72px; letter-spacing: -1px; font-weight: 500;}
.support h3 {font-size: 43px; letter-spacing: -1px; font-weight: 900;}
.support h4 {font-size: 24px; letter-spacing: -1px; padding: 20px 0;}
.support h5 {font-size: 29px; letter-spacing: -1px; font-weight: 700; color: #007544;}
.btn-sp { position: absolute; right:20px; bottom: 45px; width: 280px; height: 87px; padding: 30px 0 0 45px; background: url("../images/main/btn_support.png") no-repeat;}
.btn-sp a {font-size: 42px; letter-spacing: -1px; font-weight: 800; color: #007544;}
.green {color: #007544;}
.dspnoweb { display:none;}
.dspnom { display:block;}

#footer { margin-top: 10%;}
#footer .ftlinkin { position: relative; width: 100%; height: 60px; border-top: #e5e5e5 solid 1px; border-bottom: #e5e5e5 solid 1px; padding-top: 20px;}
#footer .ftlink { width: 1200px; margin: 0 auto; text-align: right;}
#footer .ftlink a { display:inline-block; font-weight: 500;}
#footer .copyright { position: absolute; position:relative; width:1200px; margin: 0 auto; padding: 40px 0; letter-spacing: -0.5px; }
#footer .copyright p {line-height: 1.8;}
#footer .copyright strong {line-height: 1.8;}
#footer .text-tel { font-size: 30px; font-weight: 900; letter-spacing: -0.5px;}
#footer .ftlogo { position: absolute; top: 68px; right: 0;}
.partner { position: relative; width: 100%; height: 150px; border-top: #e5e5e5 solid 1px; border-bottom: #e5e5e5 solid 1px; padding-top: 35px;}
.pttitle { position: absolute; left: 0; top: 50px; width: 150px; height: 45px; line-height: 45px; text-align: center; background: #007544; color: #ffffff; border-radius: 0px 50px 50px 0px; font-size: 23px; font-weight: 500;}
.ptlogo { margin:0 20px 0 170px}
.ptlogo img { padding-left: 5px;}
.ptlogo .slider { width: 100%; margin: 0 auto;}
.ptlogo .slick-slide { margin: 0px 20px;}
.ptlogo .slick-slide img {width: 100%;}
.ptlogo button {font: 0; color: transparent;}

.subvisual1 { position: relative; width: 100%; height: 330px; background: url("../images/sub/sub_visual.jpg") center top no-repeat;}
.subvisual2 { position: relative; width: 100%; height: 330px; background: url("../images/sub/sub_visual_2.jpg") center top no-repeat;}
.subvisual3 { position: relative; width: 100%; height: 330px; background: url("../images/sub/sub_visual_3.jpg") center top no-repeat;}
.subvisual4 { position: relative; width: 100%; height: 330px; background: url("../images/sub/sub_visual_4.jpg") center top no-repeat;}

#container {width: 1200px; margin: 0 auto; padding-top: 5%;}
#container h2 {font-size: 40px; letter-spacing: -1px; font-weight: 800;}
#container h3 {font-size: 30px; letter-spacing: -2px; font-weight: 500; font-family: "Noto Serif KR", serif;}
#container h4 {font-size: 30px; letter-spacing: -1px; font-weight: 700; margin-bottom: 1%; }
#container .cnttext {font-size: 24px; letter-spacing: -0.5px; line-height: 150%; color: #666;}
#container .acts { position: relative; margin-top: 10%; overflow: hidden;}
#container .majotact {float: left; width: 580px;}
#container .majotact dd { height: 210px; padding-top: 30px; padding-right: 1%;}
#container .actstext {font-size: 22px; letter-spacing: -0.5px; line-height: 150%; color: #666;}
#container .actstext2 { clear: both; font-size: 28px; letter-spacing: -1px;  border-top: #00b398 solid 1px; border-bottom: #00b398 solid 1px; padding: 4% 0; text-align: center;}
#container .bgvision { position: relative; height: 590px; background: url("../images/sub/vision_1.jpg") no-repeat; margin-top: 12%; color: #ffffff; padding: 270px 155px 0 155px;}
#container .bgvision > h2 {font-size: 40px; letter-spacing: -1px; font-weight: 800; color: #ffffff;}
#container .ico-smile { position: absolute; top: 190px; left: 210px;}
#container .visiontext { position: absolute; top: 270px; left: 435px; padding-right: 80px;}
#container .visiontext1 {font-size: 24px; letter-spacing: -0.5px; line-height: 150%;}
#container .imgbox { padding: 5% 0; margin: 5% 0; text-align: center; border: #eee solid 1px;}
#container .textbox { padding: 5% 0; margin: 5% 0; text-align: center; border: #eee solid 1px;}
#container .missionin {float: left; width: 580px; margin-bottom: 4%;}
#container .missionin dt { background: #00b398; text-align: center; padding: 2% 0;}
#container .missionin dd { text-align: left; height: 210px; padding: 30px; border: #eee solid 1px;}
#container .missionin dd > h4 { text-align: center;}
#container .map {width:100%; height:500px;}
#container .adressin {position: relative; height: 145px; padding: 2% 5%; border: #eee solid 1px; font-size: 18px;}
#container .adress dl { width: 100%;}
#container .adress dt { float: left; width: 10%; font-weight: 700; padding: 5px;}
#container .adress dd { float: left; width: 90%; text-align: left; padding: 5px;}

#container .boardinner { position: relative; margin-top: 40px;  overflow: hidden;}
#container .photolist { position:relative; margin-bottom: 30px; border:#CCC solid 1px; overflow:hidden;}
#container .photolist > dt {float:left; width: 50%; line-height:0;}
#container .photolist > dt a { display:block;}
#container .photolist > dt a:hover  {opacity: .7; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease;}
#container .photolist > dd {float:left; width: 50%; padding:50px 30px; font-size:20px;}
#container .photolist .subject { padding:0 0 1%; font-size:40px; font-weight: 600; letter-spacing: -1px;}
#container .noticelist { position:relative; float:left; width: 49%; margin:0 1% 5% 0; border:#CCC solid 1px; overflow:hidden;}
#container .noticelist > dt {line-height:0; text-align: center;}
#container .noticelist > dt a { display:block;}
#container .noticelist > dt a:hover  {opacity: .7; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease;}
#container .noticelist > dd {padding:30px; font-size:20px;}
#container .noticelist .subject { padding:0 0 1%; font-size:30px; font-weight: 600; letter-spacing: -1px;}
#container .btn-more { display: block; width: 200px; line-height: 45px; color: #007544; font-weight: 600; border: #007544 solid 1px; text-align: center; margin-top: 5%; font-size: 16px;}
#container .btn-more:hover  {background:#007544; color:#FFF; -webkit-transition:background .5s ease-in-out; -moz-transition:background .5s ease-in-out; transition:background .5s ease-in-out;}
#container .sptable { position: relative; border: #e5e5e5 solid 1px; padding:5%;}
#container .sptable th {width: 23%; text-align: left; padding: 15px 0px 15px 20px; font-size: 20px;}
#container .sptable td { padding: 15px 0px;  font-size: 20px; vertical-align:middle;}
#container .sptable td a { display: inline-block;}
#container .sptable td img { vertical-align:middle;}
#container .spselect {border: #cccccc solid 1px; padding: 10px 20px; font-size: 16px;}
#container .spinput {border: #cccccc solid 1px; padding: 10px 20px; font-size: 16px;}
#container .btnon {background:#007544; color:#FFF; line-height: 50px; padding:0 50px; font-size: 16px;}
#container .btnoff {border: #cccccc solid 1px; line-height: 50px; padding:0 50px; font-size: 16px;}
#container .boardscroll { position: relative; margin-top: 40px;}
#container .boardscroll > h5 {  font-size: 26px; font-weight: 700; margin-bottom: 1%;}
#container .won {position:absolute; top:0; right:0;}
#container .tabinner { position: relative; padding-top: 3%; overflow: hidden;}
#container .tabinner .tab li { float: left; margin-right: 5px;}
#container .tabinner .tab li a { display: block; padding: 10px 50px; text-align: center; font-size: 22px; font-weight: 700; border: #cccccc solid 1px;}
#container .tabinner .tab li a:hover {background:#007544; color: #ffffff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
#container .tabinner .tab li .on {background:#007544; color: #ffffff; border: #007544 solid 1px;}

/* board */
.tableType {width:100%;}
.tableType thead th{ padding:20px 0; font-weight:700; border:1px solid #007544; letter-spacing:-1px; text-align: center; font-size: 24px; color: #007544;}
.tableType tbody td{ padding:3% 0; color:#535353; border-bottom:1px solid #ddd; line-height:150%; font-size: 18px; letter-spacing:-0.5px;}
.tableType tbody td img { max-width:1200px;}

.tableType2{width:100%;border-top:2px solid #007544;}
.tableType2 thead th{ padding:10px; background:#ebf4f0; font-weight:700; border:1px solid #ddd; line-height:30px; color: #007544; display: table-cell; vertical-align: middle;}
.tableType2 thead td{ padding:10px; background:#fff; border:1px solid #ddd; line-height:30px;}
.tableType2 tbody th{ padding:10px; background:#f9f9f9; font-weight:700; border:1px solid #ddd; line-height:30px;}
.tableType2 tbody td{ padding:10px; background:#fff; border:1px solid #ddd;}
.tableType2 thead td input { height:30px; border:#999 solid 1px;}
.tableType2 tbody td input { height:30px; border:#999 solid 1px;}
.tableType2 tbody td input[type="radio"]  { height:auto; border:0;}
.tableType2 tbody td input[type="checkbox"]  { height:auto; border:0;}
.tableType2 tbody td textarea { width:100%; border:#999 solid 1px;}
.tableType2 tbody td select { height:30px; font-weight:normal; font-size:14px;}
.tableType2 tbody td img { max-width:1000px;}
.tdwd {width: 14%;}

.boardbtns {text-align:right; margin-top:40px;}
.boardbtns a{border:#000 solid 1px; text-align:center;display:inline-block;width:170px;height:50px;line-height:50px;font-size:16px;font-weight:700;}
.boardbtns a:hover { background:#333; border:#00714c solid 1px; color:#FFF; -webkit-transition:background .5s ease-in-out; -moz-transition:background .5s ease-in-out; transition:background .5s ease-in-out;}

.boardbtnsc {text-align:center;margin:50px 0;}
.boardbtnsc a{ border:#007544 solid 1px; text-align:center;display:inline-block;width:200px;height:50px;line-height:50px; font-weight:700; color: #007544; font-size:19px;}
.boardbtnsc a:hover { background:#007544; color:#FFF; -webkit-transition:background .5s ease-in-out; -moz-transition:background .5s ease-in-out; transition:background .5s ease-in-out;}

.paging {font-size:0;line-height:0;text-align:center;margin:50px 0;}
.paging span{display:inline-block;font-size:0;line-height:0;margin:0 3px;}
.paging span a{display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;}
.paging ul{display:inline-block;vertical-align:top;margin:0 10px;}
.paging li{display:inline-block;vertical-align:top;margin:0 3px;}
.paging li a{display:inline-block;width:32px;height:32px;line-height:32px;border:1px solid #ddd;text-align:center; font-size:14px; color:#000;}
.paging li.on a{border:1px solid #7f7f7f;background:#7f7f7f;color:#fff;}

.clear{clear:both;}
.tal { text-align:left;}
.tac { text-align:center;}
.tar { text-align:right;}
.pdtb1 { padding: 1% 0;}
.pdb3 { padding-bottom: 3%;}
.mgr40 { margin-right: 40px;}
.mgt2 { margin-top: 2%;}
.mgt5 { margin-top: 5%;}
.mgt6 { margin-top: 6%;}
.grey { color: #666666;}
.ptgreen { color: #00b398;}
.font20 { font-size:20px;}

input[type="radio"] {width:17px; height:17px; margin-right:10px; vertical-align:middle;}

#wrap .use_area { width:100%; text-align:left; font-weight:normal; margin:50px 0; line-height: 150%;}
#wrap .use_area:last-child { margin-bottom:0;}
#wrap .use_area .use_before { padding-bottom:10px;}
#wrap .use_area .use_before .use_term {padding-right:10px; }
#wrap .use_area .use_before a {text-decoration:underline; }
#wrap .use_area .use_box {width:100%; height:400px; overflow-x:hidden; overflow-y:scroll; padding:20px 20px; border:2px solid #F3F3F3; font-size:13px; line-height:20px; letter-spacing:0; }
#wrap .use_area .use_box p{padding-bottom:6px;}
#wrap .use_area .use_box ul {margin:5px 0 5px 0; padding-left:5px; font-size:13px; color:#555;}
#wrap .use_area .use_box ul li {margin-bottom:3px;}
#wrap .use_area .use_box ul ul {margin:0;}
#wrap .use_area .use_box ul ul li {padding-left:10px;}
#wrap .use_area .use_box ul ul ul li {padding-left:15px;}
#wrap .use_area .use_box ul > ul {font-size:13px; color:#777;}
#wrap .use_area .use_box ul > ul > ul {font-size:12px;}
#wrap .use_area .use_box p {margin:5px 0 5px 0; padding-left:5px; font-size:14px; color:#555;}
#wrap .email_box { padding:30px 20px;  border:2px solid #F3F3F3; text-align:center; font-size:14px; line-height:24px; letter-spacing:-0.5px; }
#wrap .use_area .use_box ol {margin:5px 0 5px 0; padding-left:5px; font-size:14px; color:#555;}
#wrap .use_area .use_box ol li {margin-bottom:20px; font-size:13px;}
#wrap .use_area .use_box ol ul {margin:0;}
#wrap .use_area .use_box ol ul li {padding-left:10px; line-height:24px;}
#wrap .use_area .use_box ol ol {margin:0;}
#wrap .use_area .use_box ol ol li {padding-left:10px;}
#wrap .use_area .text_title {position:relative; margin-bottom:15px; font-size:24px; font-weight:bold; line-height:1; letter-spacing:-0.5px; color:#3c3c3c;}
#wrap .use_area .use_title_area {width:100%; color:#3c3c3c; }
#wrap .use_area .use_title_area:after {content:''; display:block; clear:both;}
#wrap .use_area .use_title_area .use_term2 {float:right; padding-right:6px; }
#wrap .use_area .use_box .etc_part {margin:10px 0 10px 0; font-weight:bold; color:#222;}
#wrap .use_area .use_box .etc_tit {margin:6px 0 6px 0; font-weight:bold; color:#444;}



@media(min-width:1024px){
    #header .nav ul.gnb:hover li ul.sub {visibility:visible; opacity:1; transform:translateY(0px);} 
    #header .nav ul.gnb li:hover {display:inline-block; margin-bottom:0px;}
    #header.open .hd_bg {position: absolute; width: 100%; background: #ffffff; z-index: 1;}
    #header .nav ul.gnb li ul.sub li a {text-align: center;}
    #header .nav .active {position: relative;}
    #header .nav .active:hover:after {content: '';display: block; width: 100%; height: 2px; background: #000; position: absolute; left: 0; bottom: 0;}
}

@media (max-width:1024px){

#header {position: fixed; width: 100%; top: 0; left: 0; height:90px;}
#header .logo { top:23px;}
#header .logo a { background-size: 80%;}
    
#header .menu_btn {display:block; top:50%; transform: translateY(-50%);}
#header .menu_btn.lijo {top: 30%;}
#header .nav ul.gnb {position: absolute; top: 90px; transform: translateX(100%);left: 0;transition:.8s ease;width:100%; height: calc(100vh - 65px);background: #fff;overflow-y: auto;display: block; z-index:9999;}
#header .nav ul.gnb li a{ width: 98%; border: #ddd solid 1px; margin: 1% 1% 0 1%;}
#header .nav ul.gnb li a:hover {border: #007544 solid 3px; color: #007544;}
#header .nav ul.gnb.surya {transform: translateX(0%);}
#header .nav ul.gnb li ul.sub {opacity: 1; visibility: visible; display:none; position:relative; padding-top:20px; transition:0s; transform: translateY(-50px);}
#header .nav ul.gnb li ul.sub:after{display:none;}
#header .nav ul.gnb li ul.sub li a{border: 0;}
#header .hd_bg{display: none !important;}

.invisual { margin-top: 90px;}
.visual a { display:block; width:100%; height:600px;}
.visual1 { background:url("../images/main/visual_1m.jpg") center top no-repeat; background-size: cover;}
.visual2 { background:url("../images/main/visual_2m.jpg") center top no-repeat; background-size: cover;}
.visual > button:before { display: none;}
    
.dspnoweb { display:block;}
.dspnom { display:none;}
    
.mission {width:100%; margin: 6% auto 0;}
.mission > h2 { width: 180px; height: 100px; font-size: 36px; background: url("../images/main/bg_mission.png") left bottom no-repeat; background-size: 30%;}
.mission > h3 {font-size: 20px;}
.missionbn ul { margin-top: 5%;}
.missionbn ul li { float: none; width: 92%; margin:2% 4%; display: block;}
.missionbn ul li:last-child { margin:2% 4% 0 4%;}
.missionbn ul li a { padding:20px 0; border-radius: 20px;}
.missionbn ul li h4 {font-size: 26px; padding: 5px 0; }
.missionbn ul li .m-icon img { width: 15%;}
.missionbn ul li .m-text {font-size: 18px;}

.photostory { height: 750px; padding-top: 17%; background: url("../images/main/bg_photo_m.jpg") no-repeat; background-size: cover;}
.photostory > h2 {font-size: 36px;}
.photostory > h3 {font-size: 20px;}
.photo-img {width:100%;}
.photo-img img {width:100%;}

.support {width:100%;}
.support ul li { float: none;}
.support ul li:first-child { width: 100%;}
.support ul li:last-child { width: 100%; padding: 50px 20px;}
.support ul li img { width: 100%;}
.support h2 {font-size: 52px;}
.support h3 {font-size: 36px;}
.support h4 {font-size: 18px; padding: 20px 0;}
.support h5 {font-size: 20px; margin-bottom: 30px;}
.btn-sp { right:10px; bottom: 0px; width: 170px; height: 87px; padding: 40px 0 0 35px; background-position: center bottom;background-size: 100%;}
.btn-sp a {font-size: 32px;}

#footer { margin-top: 10%;}
#footer .ftlinkin { height: 50px; padding: 15px 0;}
#footer .ftlink { width: 100%; text-align: center;}
#footer .copyright { width:100%; padding: 30px 15px; text-align: center;}
#footer .text-tel { font-size: 30px;}
#footer .ftlogo { position: relative; top: 30px; padding-bottom: 30px;}
#footer .ftlogo img { height: 55px;}
#footer p {line-height: 1.8;}

.pttitle { top: 0px; width:100%; height: 40px; line-height: 40px; font-size: 18px; border-radius: 0;}
.ptlogo { margin:20px 10px;}
.ptlogo .slider { width: 100%; margin: 0 auto;}
.ptlogo .slick-slide { margin: 0px 5px;}
.ptlogo .slick-slide img {width: 85%;}

.subvisual1 { height: 180px; background: url("../images/sub/sub_visual_m.jpg") no-repeat; background-size: 100%; margin-top: 90px;}
.subvisual2 { height: 180px; background: url("../images/sub/sub_visual_2m.jpg") no-repeat; background-size: 100%; margin-top: 90px;}
.subvisual3 { height: 180px; background: url("../images/sub/sub_visual_3m.jpg") no-repeat; background-size: 100%; margin-top: 90px;}
.subvisual4 { height: 180px; background: url("../images/sub/sub_visual_4m.jpg") no-repeat; background-size: 100%; margin-top: 90px;}

#container {width: 100%; padding:10% 3%;}
#container h2 {font-size: 25px;}
#container h3 {font-size: 23px;}
#container h4 {font-size: 24px;}
#container .cnttext {font-size: 19px; line-height: 150%;}
#container .acts { margin-top: 10%;}
#container .majotact {float: none; width: 100%;}
#container .majotact dt img { width: 100%;}
#container .majotact dd { height: 190px;}
#container .actstext {font-size: 19px;}
#container .actstext2 { font-size: 20px; letter-spacing: -0.5px; padding: 7% 0;}

#container .bgvision { clear: both; width: 100%; height: 400px; background: url("../images/sub/vision_1_m.jpg") no-repeat; margin-top: 20%; padding: 0; background-size: 100%;}
#container .bgvision > h2 { position: absolute; top: 110px;left: 34%; font-size: 30px; border-bottom: rgba(251,251,251,.5) solid 1px;}
#container .ico-smile { top: 50px; left: 45%;}
#container .ico-smile img { width: 75%;}
#container .visiontext { top: 160px; left: 15px; padding:0 38px; text-align: center;}
#container .visiontext > h4 {font-size: 24px;}
#container .visiontext1 {font-size: 18px; line-height: 130%;}

#container .imgbox { border:0;}
#container .textbox { padding: 10% 0;}
#container .mobileimg { width: 100%;}

#container .missionin {float: none; width: 100%;}
#container .missionin dt img { width: 13%;}
#container .missionin dd { height: 180px; padding: 20px;}

#container .map {height:300px;}
#container .adressin {height: 200px; padding: 2%;}
#container .adress dl { width: 100%;}
#container .adress dt { float: none; width: 100%; padding: 3px;}
#container .adress dd { float: none; width: 100%; padding: 3px;}

#container .boardinner { margin-top: 20px;}
#container .photolist > dt {float: none; width: 100%; line-height:0;}
#container .photolist > dt img { width: 100%;}
#container .photolist > dd {float: none; width: 100%; padding:30px; font-size:18px;}
#container .photolist .subject { font-size:22px;}
    
#container .noticelist { float: none; width: 98%; margin:0 1% 5% 1%;}
#container .noticelist > dt img { width: 100%;}
#container .noticelist > dd {padding:20px; font-size:18px;}
#container .noticelist .subject { font-size:22px;}
    
#container .btn-more { width: 180px; margin: 20px auto 0;}

#container .sptable th { width: 32%; padding: 15px 10px; font-size: 16px; font-weight: 300;}
#container .sptable td { width: 68%; padding: 15px 0;  font-size: 16px;}
#container .sptable td a { line-height: 40px; padding:0; font-size: 16px; margin: 0.5%; min-width: 130px; text-align: center;}
#container .spselect {padding: 10px 20px; font-size: 16px;}
#container .spinput {padding: 5px 10px; font-size: 16px; width: 75%;}
#container .tabinner { margin-top: 5%;}
#container .tabinner .tab li a { padding: 10px 35px; font-size: 20px;}
#container .boardscroll { overflow-x: scroll;}
#container .boardscroll > h5 {  font-size: 22px;  margin-bottom: 2%;}
    
.tableType thead th { font-size: 19px;}
.tableType tbody td { padding:5% 0;}
.tableType tbody td img { width:100%;}
.tableType tbody td iframe { width:100%; height:220px; left:0;}

.tableType2 {width:800px;}
.tableType2 thead th{ padding:1%; font-size:16px;}
.tableType2 thead td{ padding:1%; font-size:16px;}
.tableType2 tbody th{ padding:1%; font-size:16px;}
.tableType2 tbody td{ padding:1%; font-size:14px;}
.tableType2 tbody td input { height:30px;}
.tableType2 tbody td select { height:30px;}
.tableType2 tbody td img { width:100%;}
    
.pdtb1 { padding: 2% 0;}

#wrap .use_area .use_box {height:auto; overflow-x:hidden; overflow-y:scroll;}

}

@media (max-width:400px)
{

.mission > h2 { font-size: 33px;}
.mission > h3 {font-size: 18px;}
.missionbn ul li { float: none; width: 92%;}
.missionbn ul li h4 {font-size: 25px; padding: 5px 0; }
.missionbn ul li .m-text {font-size: 17px;}
.photostory { height: 650px; padding-top: 15%;}
.photostory > h2 {font-size: 33px;}
.photostory > h3 {font-size: 18px;}
.support h2 {font-size: 50px;}
.support h3 {font-size: 33px;}
.support h4 {font-size: 18px;}
.support h5 {font-size: 19px;}
    
#footer .ftlink a { font-size: 14px;}
#footer .copyright { font-size: 14px; line-height: 1.8px;}
#footer .text-tel { font-size: 28px;}

#container h2 {font-size: 24px;}
#container h3 {font-size: 20px;}
#container h4 {font-size: 22px;}
#container .cnttext {font-size: 18px;}
#container .actstext {font-size: 18px;}
#container .bgvision { height: 350px;}
#container .visiontext > h4 {font-size: 20px;}
#container .visiontext1 {font-size: 15px;}
#container .actstext2 { font-size: 18px;}
#container .photolist .subject { font-size:20px;}
#container .photolist > dd {font-size:17px;}
#container .noticelist .subject { font-size:20px;}
#container .noticelist > dd {font-size:17px;}
#container .tabinner .tab li a { padding: 10px 30px; font-size: 18px;}
#container .sptable td a { font-size: 15px; min-width: 120px;}

.tableType thead th { font-size: 18px;}
.tableType tbody td iframe { height:200px;}
.tableType2 thead th{font-size:12px;}
.tableType2 tbody th{font-size:12px;}
.font20 { font-size:18px;}
    
}