@charset "utf-8";

@import url('layout.css');
@import url('common.css');

/* main */
body{background:url(../images/m_visual.jpg) no-repeat 50% 0;}
header{position:fixed;height:159px;background:transparent}
header .header{padding-top:94px;}
header:before{top:159px;border-bottom:1px solid rgba(00,00,00,0)}
header h1{top:88px;background:url(../images/logo.png) no-repeat 0 50%;background-size:contain}
.gnb_bg{top:159px;}
header .utill a{color:#fff}
header .utill .btn_log{padding-left:22px;background:url(../images/ic_log.png) no-repeat 0 50%;}
header .utill .btn_join{padding-left:22px;background:url(../images/ic_join.png) no-repeat 0 50%;}
header .utill .btn_logout{padding-left:27px;background:url(../images/ic_log2.png) no-repeat 0 50%;}

header nav{text-align:right}
header nav .depth1 > a{color:#fff}

.main{min-height:710px;padding-top:220px;}
.main .cola{overflow:hidden;width:1300px;margin:0 auto 90px;}
.main .bannerUi{position:relative;float:left;width:540px;height:470px;}
.main .bannerUi .item{position:relative;border-radius:20px;overflow:hidden;}
.main .bannerUi .img{width:540px;height:470px;}
/*.main .bannerUi p img{display:none;}*/
.main .bannerUi .slick-controls{position:absolute;left:0;right:0;bottom:18px;margin:0 auto;width:140px;height:40px;line-height:34px;padding-right:5px;text-align:center;border-radius:20px;background:#5c5c5c}
.main .bannerUi .controls{display:inline-block;text-align:center;}
.main .bannerUi .controls > button{display:inline-block;width:25px;height:16px;font-size:0;vertical-align:middle;}
.main .bannerUi .controls > button > i{display:block;width:7px;height:14px;position:relative;margin:auto;font-size:0;}
.main .bannerUi .controls > button.slide-pause i:before, 
.main .bannerUi .controls > button.slide-pause i:after{content:'';display:block;position:absolute;background:#fff;width:2px;height:100%;top:0;box-shadow:0px 1px 1px 1px rgba(0,0,0,.1);}
.main .bannerUi .controls > button.slide-pause i:before{left:0;}
.main .bannerUi .controls > button.slide-pause i:after{right:0;}
.main .bannerUi .controls > button.slide-play{display:none;}
.main .bannerUi .controls > button.slide-play i{left:2px}
.main .bannerUi .controls > button.slide-play i:before{content:'';display:block;position:absolute;top:2px;left:0;border-top:6px solid transparent;border-left:7px solid #fff;border-bottom:6px solid transparent}
.main .bannerUi .slick-arrow{display:inline-block;vertical-align:middle;width:16px;height:16px;font-size:0}
.main .bannerUi .slick-prev{background:url(../images/btn_sPrev.png) no-repeat 50% 50%;}
.main .bannerUi .slick-next{background:url(../images/btn_sNext.png) no-repeat 50% 50%;}
.main .bannerUi .num{display:inline-block;margin-left:10px;vertical-align:middle;font-size:18px;color:#c0c0c0;font-weight:300}
.main .bannerUi .num strong{margin-right:3px;color:#fff}
.main .bannerUi .num span{margin-left:3px}

.main .board_g{position:relative;overflow:hidden;float:right;width:730px;height:470px;border-radius:20px;background:#fff}
.main .board_g .tabs{position:relative;margin:0 40px;padding:34px 0 12px 0;font-size:0;/*border-bottom:2px solid #1c1c1c*/}
.main .board_g .tabs li{position:relative;display:inline-block;}
.main .board_g .tabs li~li{margin-left:26px}
.main .board_g .tabs a{display:block;font-size:22px;color:#999}
.main .board_g .tabs .current a{color:#000;font-size:26px;font-weight:700;border-bottom: 2px solid #1c1c1c;padding: 10px; }
.main .board_g .board{position:relative;margin:0 40px;}
.main .board_g .board h2{position:absolute;font-size:0;}
.main .board_g .board .btn_more{position:absolute;top:-45px;right:0;width:22px;height:22px;font-size:0;}
.main .board_g .board .btn_more:before,.main .board_g .board .btn_more:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;background:#000}
.main .board_g .board .btn_more:before{width:2px;height:22px;}
.main .board_g .board .btn_more:after{width:22px;height:2px;}
.main .board_g .board li{overflow:hidden;position:relative;height:68px;line-height:68px;padding:0 0 0 76px;}
.main .board_g .board li~li{border-top:1px dashed #e2e2e2}
.main .board_g .board li a{height:50px;font-size:18px;font-weight:300;/*display:-webkit-box;*/overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;}
.main .board_g .board li a:hover{text-decoration:underline}
.main .board_g .board li .date{position:absolute;top:0;left:0;color:#000;font-size:22px;font-weight:700}
.main .board_g .new{font-size:12px;color:#ffffff;font-weight:500;font-style:normal;padding:2px 7px;margin-right:7px;border-radius:50px;background:#e61b3c;}
.main .board_g .part{padding:4px 14px;margin-right:10px;border-radius:20px;font-size:16px;color:#1a55cb;background:#e6f4ff;font-weight: 500}
.main .board_g .btn_g{position:absolute;left:0;bottom:0;width:100%;font-size:0;}
.main .board_g .btn_g a{display:inline-block;width:50%;height:88px;line-height:88px;text-align:center;color:#fff;font-size:22px;font-weight:500;background:#df0f3e;transition:.3s all;}
.main .board_g .btn_g a:focus{position:relative;z-index:1}
.main .board_g .btn_g a:nth-child(2){background:#3f51b5}
.main .board_g .btn_g a:before{content:"";position:relative;display:inline-block;vertical-align:middle;margin-right:15px;}
.main .board_g .btn_g a:nth-child(1):before{width:39px;height:43px;background:url(../images/ic_doc.png) no-repeat 50% 0%;}
.main .board_g .btn_g a:nth-child(2):before{top:-4px;width:46px;height:47px;background:url(../images/ic_letter.png) no-repeat 50% 50%;}

.main .colb{width:1440px;margin:0 auto;padding-top:90px;}
.main .colb .dir_go{font-size:0;text-align:center}
.main .colb .dir_go li{display:inline-block;height:150px;color:#222;font-size:22px;font-weight:500}
.main .colb .dir_go li~li{margin-left:66px;}
.main .colb .dir_go a{position:relative;display:block;line-height:150px;padding-left:180px;}
.main .colb .dir_go a:before{content:"";position:absolute;top:0;left:0;display:inline-block;width:150px;height:150px;border-radius:100%;background-color:#f7f7f7 ! important;}
.main .colb .dir_go .go1:before{background:url(../images/ic_dir1.png) no-repeat 50% 50%;}
.main .colb .dir_go .go2:before{background:url(../images/ic_dir2.png) no-repeat 50% 50%;}
.main .colb .dir_go .go3:before{background:url(../images/ic_dir3.png) no-repeat 50% 50%;}
.main .colb .dir_go .go4:before{background:url(../images/ic_dir4.png) no-repeat 50% 50%;}
.main .colb .dir_go span{position:relative;}
.main .colb .dir_go span:before{content:"";position:absolute;left:0;bottom:0;width:0;height:8px;background:rgba(0,124,217,.14);transition:.2s all;}
.main .colb .dir_go a:hover span:before{width:100%;}

.main .colc{width:1300px;margin:0 auto;margin-top:90px;}
.main .colc h2{font-size:36px;color:#000;font-weight:700;text-align:center;}
.main .colc .txt{margin:15px 0 35px 0;font-size:18px;color:#999;text-align:center;}
.main .colc .dir_go{display:flex;font-size:0}
.main .colc .dir_go li{position:relative;width:100%;height:250px;}
.main .colc .dir_go li~li{margin-left:25px}
.main .colc .dir_go a{position:relative;display:block;overflow:hidden;width:100%;height:100%;border-radius:20px;}
.main .colc .dir_go a:after{content:"";z-index:1;position:absolute;left:0;bottom:0;width:100%;height:150px;background:url(../images/mask.png) no-repeat 50% 50%;background-size:cover;transition:1s all;}
.main .colc .dir_go a:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:417px;height:250px;transition:2s all;}
.main .colc .dir_go span{z-index:2;position:relative;left:30px;top:195px;font-size:28px;color:#fff;font-weight:500;}
.main .colc .dir_go .go1:before{background:url(../images/photo_dir1.jpg) no-repeat 50% 50%;}
.main .colc .dir_go .go2:before{background:url(../images/photo_dir2.jpg) no-repeat 50% 50%;}
.main .colc .dir_go .go3:before{background:url(../images/photo_dir3.jpg) no-repeat 50% 50%;}
.main .colc .dir_go a:hover:before{transform: scale(1.1);}
.main .colc .dir_go a:hover:after{height:120%}

.main .cold{margin-top:90px;padding-bottom:90px;background:#f4f4f4}
.main .cold .box{width:1300px;margin:0 auto;padding-top:90px}
.main .cold h2{font-size:36px;color:#000;font-weight:700;text-align:center;}
.main .cold .txt{margin:17px 0 35px 0;font-size:18px;color:#999;text-align:center;}
.main .cold .dir_go{display:flex;font-size:0}
.main .cold .dir_go li{position:relative;width:100%;height:250px;text-align:center}
.main .cold .dir_go li~li{margin-left:15px}
.main .cold .dir_go a{display:block;width:100%;height:100%;padding-top:35px;font-size:22px;color:#3f51b5;font-weight:700;border-radius:20px;background:#fff;box-sizing:border-box;box-shadow:0 0 35px rgba(00, 00, 00, .1);transition:.3s all;}
.main .cold .dir_go div:before{content:"";display:block;width:65px;height:60px;margin:0 auto 15px;transition:.3s all;}
.main .cold .dir_go span{display:block;margin-top:15px;font-size:16px;color:#a3a3a3;line-height:22px;font-weight:400;transition:.3s all;}
.main .cold .dir_go .go1 div::before{background:url(../images/ic_dir2_1.png) no-repeat 50% 50%;}
.main .cold .dir_go .go2 div::before{background:url(../images/ic_dir2_2.png) no-repeat 50% 50%;}
.main .cold .dir_go .go3 div::before{background:url(../images/ic_dir2_3.png) no-repeat 50% 50%;}
.main .cold .dir_go .go4 div::before{background:url(../images/ic_dir2_4.png) no-repeat 50% 50%;}
.main .cold .dir_go .go5 div::before{background:url(../images/ic_dir2_5.png) no-repeat 50% 50%;}
.main .cold .dir_go a:hover{background:#3f51b5;color:#fff;box-shadow:0 0 35px rgba(00, 00, 00, .4);}
.main .cold .dir_go a:hover span{color:#fff;}
.main .cold .dir_go .go1:hover div::before{background:url(../images/ic_dir2_1_ov.png) no-repeat 50% 50%;}
.main .cold .dir_go .go2:hover div::before{background:url(../images/ic_dir2_2_ov.png) no-repeat 50% 50%;}
.main .cold .dir_go .go3:hover div::before{background:url(../images/ic_dir2_3_ov.png) no-repeat 50% 50%;}
.main .cold .dir_go .go4:hover div::before{background:url(../images/ic_dir2_4_ov.png) no-repeat 50% 50%;}
.main .cold .dir_go .go5:hover div::before{background:url(../images/ic_dir2_5_ov.png) no-repeat 50% 50%;}
.main .cold .dir_go a:hover div::before{animation-name:wobble-horizontalY;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:1}

.main .cole .box{width:1300px;margin:0 auto;padding-top:40px}
.main .cole h2{font-size:36px;color:#000;font-weight:700;text-align:center;height:60px;}
.main .cole .txt{margin:17px 0 35px 0;font-size:18px;color:#999;text-align:center;}
.main .cole .dir_go{display:flex;font-size:0}
.main .cole .dir_go li{position:relative;width:100%;}
.main .cole .dir_go li~li{margin-left:15px;margin-bottom:40px;}
.main .cole .dir_go a{display:block;width:100%;padding:15px 36px 15px;font-size:22px;font-weight:700;border-radius:10px;background:#fff;box-sizing:border-box;box-shadow:0 0 35px rgba(00, 00, 00, .1);transition:.3s all;}
.main .cole .dir_go .free{padding:2px 36px 2px;}

@keyframes wobble-horizontalY {16.65%{transform:translateY(-8px)}33.3%{transform:translateY(3px)}49.95%{transform:translateY(-4px)}66.6%{transform:translateY(2px)}83.25%{transform:translateY(-1px)}100%{transform:translateY(0)}}

.main .colc .txt br, .main .colc .txt  br{display:none}

@media (min-width: 1930px) { 
	.main .visual .slider1,.main .visual .slider2,.main .visual .slider3{background-size:cover}
}

@media (max-width: 1320px) { 
	.main .cola{width:auto;padding:0 30px 70px;}
	.main .board_g{width:calc(100% - 560px)}
	.main .colb{width:auto;padding:0 30px}
	.main .colb .dir_go li~li{margin-left:16px}
	.main .colc{width:auto;padding:0 30px}
	.main .cold .box{width:auto;padding:70px 30px 0}
}

@media (max-width: 1200px) {
	body{background:none}

	header h1{top:17px;background:url(../images/m/logo.png) no-repeat 50% 50%;background-size:contain}
	
	.main{padding-top:70px}
	.main .cola{width:auto;padding:0 20px 0;}
	.main .board_g .tabs{margin:0 20px}
	.main .board_g .tabs li~li{margin-left:20px}
	.main .board_g .part{display:none}
	.main .board_g .board{margin:0 20px}
	.main .board_g .board li{padding-right:0;background:none}
	.main .colb{padding:0 20px}
	.main .colb .dir_go li{height:110px;}
	.main .colb .dir_go a{padding-left:130px;line-height:110px;}
	.main .colb .dir_go a:before{width:110px;height:110px;background-size:45% auto ! important;}
	.main .colb .dir_go li~li{margin-left:20px}
	.main .colc{padding:0 20px}
	.main .cold .box{padding:70px 20px 0}
	.main .cold .dir_go li{height:220px}
	.main .cold .dir_go li~li{margin-left:8px}
}


@media (max-width: 1023px) {
	.main .cola{margin-bottom:30px}
	.main .board_g{width:auto}
	.main .bannerUi{float:none;width:auto;height:auto}
	.main .bannerUi .img{width:auto;height:auto;background:none ! important}
	.main .bannerUi p img{display:block;width:calc(100vw - 40px)}
	.main .bannerUi .slick-controls{width:50px;height:30px;line-height:27px;padding-right:10px;left:auto;right:20px;}
	.main .bannerUi .slick-controls .slick-arrow{display:none}
	.main .bannerUi .slick-controls .controls{display:none}
	.main .bannerUi .num{font-size:14px;}

	.main .board_g{float:none;height:auto;margin-top:20px;padding:25px 20px 70px;border:1px solid #eaeaea}
	.main .board_g .tabs{margin:0;padding:0;border:0}
	.main .board_g .board{margin:0}
	.main .board_g .board li{background:none}
	.main .board_g .tabs a{font-size:18px;}
	.main .board_g .tabs .current a{padding:5px;font-size:18px}
	.main .board_g .tabs li~li{margin-left:10px}
	.main .board_g .board .btn_more{top:-28px;}
	.main .board_g .board .btn_more:before{width:16px;height:4px;}
	.main .board_g .board .btn_more:after{width:4px;height:16px;}
	.main .board_g .board .btn_more:before, .main .board_g .board .btn_more:after{border-radius:20px;background:#d6d6d6}
	.main .board_g .board li{height:30px;line-height:30px;padding:0 0 0 50px;}
	.main .board_g .board li~li{border:0}
	.main .board_g .board li .date{font-size:15px;opacity:.5;font-weight:400;}
	.main .board_g .board li a{font-size:15px;}
	.main .board_g .part{display:none}
	.main .board_g .new{display:inline-block;width:18px;height:18px;padding:0;margin-right:5px;font-size:0;border-radius:100%;background:#ff4d2f}
	.main .board_g .new:before{content:"N";position:relative;top:-1px;display:inline-block;width:18px;line-height:18px;font-weight:300;color:#fff;font-size:12px;text-align:center}
	.main .board_g .btn_g a{height:50px;line-height:50px;font-size:17px;}
	.main .board_g .btn_g a:before{display:none}

	.main .colb .dir_go li~li{margin:0;}
	.main .colb .dir_go li{width:50%;height:auto;margin-bottom:35px;}
	.main .colb .dir_go a{padding:0;height:auto;line-height:16px;font-size:16px;}
	.main .colb .dir_go a:before{position:relative;width:75px;height:75px;margin-bottom:10px;background-size:33.3% auto ! important;}
	.main .colb .dir_go span{display:block;}
	.main .colb .dir_go span:before{display:none}

	.main .colc{margin-top:45px}
	.main .colc h2{font-size:21px;}
	.main .colc .txt{margin:12px 0 20px 0;line-height:16px;font-size:12px}
	.main .colc .dir_go{display:block}
	.main .colc .dir_go li{height:auto}
	.main .colc .dir_go li~li{margin:10px 0 0 0}
	.main .colc .dir_go a:before{display:none}
	.main .colc .dir_go a:after{display:none}
	.main .colc .dir_go a{height:60px;border-radius:10px;}
	.main .colc .dir_go span{display:block;left:0;top:0;line-height:60px;font-size:16px;text-align:center}
	.main .colc .dir_go .go1{background:url(../images/m/photo_dir1.png) no-repeat 50% 50%;background-size:cover}
	.main .colc .dir_go .go2{background:url(../images/m/photo_dir2.png) no-repeat 50% 50%;background-size:cover}
	.main .colc .dir_go .go3{background:url(../images/m/photo_dir3.png) no-repeat 50% 50%;background-size:cover}
	
	.main .cold{margin-top:45px;padding-bottom:45px;background:#fff}
	.main .cold .box{padding-top:0;}
	.main .cold h2{font-size:21px;}
	.main .cold .txt{margin:12px 0 20px 0;line-height:16px;font-size:12px}
	.main .cold .dir_go{display:block}
	.main .cold .dir_go li{height:auto}
	.main .cold .dir_go li~li{margin:10px 0 0 0}
	.main .cold .dir_go a{box-shadow: 0 0 35px rgb(0 0 0 / 0%);border:1px solid #cacaca;border-radius:10px;}

	.main .colc .txt br, .main .colc .txt  br{display:block}
	
	
	.main .cold .box{padding-top:0;}
	.main .cold .dir_go a{padding:22px 0 19px;font-size:17px}
	.main .cold .dir_go a div:before{position:absolute;top:0;bottom:0;left:0;display:inline-block;width:30px;height:28px;margin:auto 0;background-size:contain ! important}
	.main .cold .dir_go div{position:relative;display:inline-block;width:230px;padding-left:55px;text-align:left;box-sizing:border-box;}
	.main .cold .dir_go span{margin-top:3px;font-size:10px}
	.main .cold .dir_go span br{display:none}
	
	.main .cole .dir_go {display: block;font-size: 0;}
	.main .cole .box{width:100%;}
	.main .cole .dir_go li{margin-left: 0px;margin-bottom: 10px;}
	.main .cole .dir_go li~li {margin-left: 0px;margin-bottom: 10px;}
	.main .cole .dir_go li div img{width:0px}
	.main .cole .dir_go a {padding:23px 36px 23px;}
	.main .cole .dir_go .free{padding:23px 36px 23px;}
	
}

@media (max-width: 330px) { 
	.main .board_g .tabs a{font-size:16px;}
	.main .board_g .tabs .current a{font-size:16px}
}