@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,500,500i&display=swap');

/*font-family: 'Noto Sans KR', sans-serif;*/
*{margin:0; padding:0}
li{list-style:none;margin:0;padding:0;}
img{border: none;}
a{text-decoration:none}
address{font-style:normal;}
iframe{margin:0;padding:0;border:none;}
table{border-spacing: 0;border-collapse: collapse;}
button, input, select, textarea {
    background: transparent;
    font-size: 13px;
    position: relative;
    zoom: 1;
    font-family: 'Lato','NotoSansKR','Noto Sans KR','Apple SD Gothic Neo',sans-serif; border:none
}

.xi-kakaotalk:before {
  content: "\ebee";
}
h1,h2,h3,h4,h5,h6,p,div,section,td,th,label,adddress,a,body,li, button, em{font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; color:#000;  font-style:normal;word-break:keep-all !important; letter-spacing:-1px; }

.mob{display:none !important}
.pc{display:block !important}
.tnwjd{font-size:20px; color:#F00; font-weight:bold}
#header{position:fixed; width:100%; background-color:rgba(255,255,255,0.3); z-index:9}
.logo{margin-left:20px; padding:10px 0 0}
.logo img{height:80px}
.gnb{position:absolute; right:0; bottom:0}
.gnb>ul{display:table}
.gnb>ul>li{display:table-cell; padding:0 30px; position:relative}
.gnb>ul>li>a{ font-size:24px; color:#FFF; display:block; padding:0 0 30px; transition:0.5s}
.gnb>ul>li:hover>a{color:#000}
.depth{position:absolute; width:100%; left:0; display:none}
.depth>li{background-color:rgba(0,0,0,0.7)}
.depth>li>a{display:block; width:100%; padding:5px; box-sizing:border-box; font-size:16px; color:#FFF}

.back{position:relative; background-color:#000; padding:80px 0 }
.con{position:relative; max-width:1250px; margin:0 auto}
.main_title{text-align:center}
.main_title h2{ font-weight:900; color:#FFF; font-size:40px}
.main_title h2 span{color:#22368c}
.main_title p{color:#FFF; font-size:25px; margin-top:10px; }
.main_list{margin-top:30px}
.main_list>ul{overflow:hidden}
.main_list>ul>li{float:left; width:32%; margin-left:2%; position:relative; overflow:hidden}
.main_list>ul>li:nth-child(3n+1){margin-left:0}
.main_list>ul>li:nth-child(n+4){margin-top:20px}
.main_list>ul>li img{max-width:100%; display:block; transition:0.5s}
.main_list>ul>li:hover img{transform:scale(1.1,1.1)}
.main_list>ul>li .inter_text{position:absolute; width:100%; background-color:rgba(0,0,0,0.5); bottom:-80px; padding:10px; height:130px; box-sizing:border-box; transition:0.5s}
.main_list>ul>li .inter_text p{color:#FFF; font-size:16px}
.main_list>ul>li h2{font-weight:700; font-size:20px; color:#FFF; margin-bottom:10px}
.main_list>ul>li>a>p{font-size:27px; color:#FFF; position:absolute; bottom:10px; font-weight:bold; left:10px}
.main_list>ul>li>a>p::after{position:absolute; content:""; width:50px; height:3px; background-color:#FFF; left:0; top:-10px }
.main_list>ul>li:hover .inter_text{bottom:0}


.con_p{padding:80px 0}
.con_p .main_title h2{ font-weight:900; color:#000; font-size:40px}
.con_p .main_title p{color:#312c2c}
.main_list>ul>li span{position:absolute; font-weight:900; font-size:30px; right:30px; top:10px; color:#FFF}

.ani{position:relative; width:100%; background-image:url(../image/ani.jpg); background-attachment:fixed; height:700px; background-position:0 100px; background-size:cover}
.ani_text{position:absolute; top:50%; transform:translateY(-50%); width:100%; }
.ani_text h2{font-size:50px; font-weight:900; text-align:center; color:#FFF; line-height:50px}
.ani_text h2 span{font-size:35px; color:#ff0000}
.ani_text p{color:#FFF; font-size:25px; text-align:center; margin-top:15px; font-weight:500}
.ani_text a{position:relative; margin:15px auto 0; border:2px solid #FFF; color:#FFF; font-size:20px; display:block; width:200px; text-align:center; padding:10px 0; transition:0.5s}
.ani_text a:hover{background-color:#FFF; color:#000}
.logo_list{margin-top:50px; }
.logo_list .slick-next{right:-30px}
.logo_list .slick-prev{left:-30px}
.slider-div2 .slick-slide{padding:10px}

.notice_wrap{position:relative; background-color:#161515; width:100%; padding:50px 0;}
.notice{display:table}
.notice>div{display:table-cell; width:33.33%; vertical-align:top; position:relative}
.notice>div h2, .notice>div p{color:#FFF}
.notice>div h2 span{vertical-align:middle; margin-right:5px}
.notice1 h2{font-size:25px}
.notice1 p{font-size:20px; margin-left:70px}
.notice1 img{width:60px}
.notice2{box-sizing:border-box}
.notice2 h2{letter-spacing:1px; font-weight:bold;}
.notice2 p{font-size:20px}
.notice2 p span{font-size:35px; color:#FFF; display:block; margin-bottom:10px; margin-top:-10px}
.notice1, .notice2{padding-left:30px; }
.notice3{position:relative}
.notice3 img{width:100%}
.notice3 .overbox{position:absolute; background-color:rgba(0,0,0,0.8); width:325px; left:50%; top:50%; transform:translate(-50%,-50%); height:100px; transition:0.5s}
.notice3 p{position:absolute; text-align:center; top:50%; transform:translateY(-50%); width:100%; color:#FFF; font-size:25px; font-weight:bold}
.notice3 .overbox span{display:block; border:1px solid #FFF; font-weight:normal; width:100px; font-size:20px; position:relative; margin:10px auto 0; transition:0.5s}
.notice3:hover .overbox{ width:100%; height:100%}
.notice3:hover span{background-color:#FFF; color:#000}
#footer{position:relative; width:100%; padding:30px 0; border-top:1px solid #CCC}
.footer_wrap{position:relative; width:1250px; margin:0 auto; display:table}
.footer_wrap p{display:table-cell; vertical-align:middle; line-height:24px}
.footer_wrap h1{display:table-cell; vertical-align:middle; width:210px; text-align:center}
.copy_color{color:#003399}

.quick{position:fixed; right:10px; top:50%; transform:translateY(-50%)}
.quick>ul>li{text-align:center; margin:0 auto}
.quick>ul>li:nth-child(2){width:65px; height:65px; background-color:#f4f4f4; border-radius:65px}
.quick>ul>li:nth-child(2) img{width:30px; margin-top:17px}
.quick>ul>li:last-child{cursor:pointer; width:65px; height:65px; background-color:#f4f4f4; border-radius:65px}
.quick>ul>li:last-child i{color:#CCC}
.quick>ul>li:nth-child(n+2){margin-top:10px}
.quick>ul>li i{font-size:30px; margin-top:15px}
.quick>ul>li a{display:block}

.sub{padding:100px 0; max-width:1250px; position:relative; margin:0 auto}
.sub_banner{position:relative; background-image:url(../image/sub_banner1.jpg); height:320px;animation: ani_back 20s linear;animation-iteration-count:infinite}
.sub_banner1{ background-image:url(../image/sub_banner1.jpg);}
.sub_banner2{ background-image:url(../image/sub_banner2.jpg);}
.sub_banner3{ background-image:url(../image/sub_banner3.jpg);}
.sub_banner4{ background-image:url(../image/sub_banner4.jpg);}
.sub_banner5{ background-image:url(../image/sub_banner5.jpg);}
.sub_banner h2{display:none}
.title{position:relative;}
.title h2{font-size:30px; text-align:center; font-weight:bold; margin-bottom:30px}
.title h2::after{position:absolute; content:""; width:30px; height:4px; background-color:#000; left:50%; margin-left:-15px; margin-top:-10px}
.sub_tab{position:absolute; bottom:0; width:100%; background-color:rgba(0,0,0,0.5)}
.sub_tab>ul{display:table; position:relative; margin:0 auto; }
.sub_tab>ul>li{display:table-cell}
.sub_tab>ul>li>a{color:#FFF; display:block; padding:10px 25px; font-size:16px}
.sub_tab>ul>li.select>a{background-color:#132b88}

.sub_back{position:relative; width:100%; background-image:url(../image/com-bg.png); background-position:center; background-size:cover; padding:100px 0}
.sub_back2{background-image:url(../image/com-bg2.png); background-position:center}
.sub_back3{background-image:url(../image/com-bg3.png);background-position:center}
.sub_text{position:relative; max-width:900px; margin:0 auto;}
.sub_text h2{font-size:18px; text-align:center}
.sub_text p{font-size:18px; color:#333; margin-top:15px; text-align:center}
.sub_text p span{font-size:22px; color:#003366; font-weight:bold}
.sub_text>ul>li{color:#333; font-size:16px; margin-bottom:5px; position:relative; padding-left:20px}
.sub_text>ul>li::after{position:absolute; left:0; content:"※"; top:0}


/*award*/
.award_wrap{position:relative; width:900px; margin:0 auto; padding-bottom:50px; padding-top:50px; border-top:1px solid #CCC}
.award_wrap>div:first-child{padding-top:0}
.award{position:relative; width:100%; overflow:hidden; border-bottom:1px solid #CCC; padding-bottom:50px; padding-top:50px }
.award>div{float:left}

.year{width:15%; text-align:center; font-size:20px; font-weight:bold;}
.award_content_wrap{position:relative; width:80%}
.award_content{overflow:hidden; margin-bottom:10px}
.award_content>p{float:left}
.month{width:15%; text-align:center; font-size:18px; font-weight:bold; color:#4A4A4A; }
.sub_title{font-size:20px; text-align:center; margin-bottom:50px}
.sub_title span{display:block; font-size:20px; }
.awrad_text{width:85%; font-size:18px; word-break:keep-all }

.chart_text{position:relative; padding:0 35px 20px; box-sizing:border-box}
.chart_title{font-size:20px; margin-bottom:15px; text-align:center}
.chart_title span{display:block; font-weight:600}
.max-width {width:100%; text-align:center}
.max-width img{max-width:100%}

.map_w { overflow: hidden;margin: 0 auto; width:1000px}
.cs_inner {  width: 100%;  overflow:hidden}
.cs_inner>div{float:left; width:50%}
.cs_title { display: block; font-weight: 700; font-size: 26px;line-height: 34px; margin-top:30px}
.cs_address { font-size: 16px; color: #555;line-height: 24px;}
.cs_list { height: 26px; line-height: 26px;font-size: 0;}
.cs_list dd, .cs_list dt{display:inline-block}
.cs_list dt {font-weight:bold;font-size: 16px;vertical-align: middle;}
.cs_list dd { font-size: 16px; font-weight: 300; vertical-align: middle; margin-right:20px}
.map_inner{ width:100%; margin-top:30px}
.root_daum_roughmap{width:100% !important}


/*.sub_back{position:relative; background-image:url(../image/back_img.jpg); background-position:center; background-size:cover}*/
.business_wrap{position:relative; max-width:850px; margin:0 auto}
.business_wrap h2{font-size:30px; text-align:center; background-color:#f4f4f4; padding:10px 0; font-weight:500; margin-bottom:20px}
.business{padding:0 30px}
.business>li{font-size:18px; position:relative; padding-left:15px; text-align:center}
.business>li:nth-child(n+2){margin-top:10px}
/*.business>li::after{position:absolute;  left:0; content:""; width:7px; background-color:#000; height:1px; top:13px}*/
.busi_box{position:relative; background-image:url(../image/back_img.jpg); width:1250px; margin:0 auto; background-position:center; background-size:cover; padding:130px 0 230px}
.busi_text{position:relative; max-width:700px; margin:0 auto}
.busi_text p{font-size:18px; color:#FFF}
.busi_text p:nth-child(n+2){margin-top:15px}
.busi_img{text-align:center; width:100%; position:absolute; bottom:-150px}
.busi_img img{max-width:100%}
.busi_box2{position:relative; padding-top:230px}
.busi_box3{margin-top:80px}
.busi_title{text-align:center}
.busi_title h2{font-weight:500; font-size:30px}
.busi_title p{font-size:20px; margin-top:5px; margin-bottom:30px}
.busi_list{display:flex; flex-wrap:wrap}
.busi_list>li{background-color:#f4f4f4; width:32%; margin-left:2%; padding:20px; box-sizing:border-box}
.busi_list>li:nth-child(3n+1){margin-left:0}
.busi_list>li:nth-child(n+4){margin-top:2%}
.busi_list>li h3{font-weight:bold; font-size:20px; margin-bottom:10px}
.busi_list>li p{font-size:16px}

.tab{position:relative; width:100%}
.tab>ul{overflow:hidden; border:1px solid #CCC}
.tab>ul>li{float:left; width:20%; text-align:center; font-size:18px; border-left:1px solid #CCC; box-sizing:border-box; cursor:pointer; padding:10px 0; transition:0.5s}
.tab>ul>li>a{display:block; font-size: 16px;}
.tab>ul>li:first-child{border-left:none}
.tab>ul>li.select{background-color:#132b88; color:#FFF}
.tab>ul>li.select>a{color:#FFF}
.tab>ul>li.select:hover{background-color:#132b88; color:#FFF}
.tab>ul>li:hover{background-color:#f4f4f4; color:#000}

.port_wrap{position:relative; width:100%; margin-top:50px}
.port_wrap>div{position:relative; width:100%; display:none}
.port_wrap>div.port1{display:block}
.port_wrap>div>ul{overflow:hidden}
.port_wrap>div>ul>li{float:left; width:23.5%; margin-left:2%; overflow:hidden}
.port_wrap>div>ul>li:nth-child(4n+1){margin-left:0}
.port_wrap>div>ul>li:nth-child(n+5){margin-top:30px}
.port_wrap>div>ul>li p{text-align:center; font-size:18px; padding:5px 0}
.port_wrap>div>ul>li figure{overflow:hidden}
.port_wrap>div>ul>li:hover p{font-weight:bold}
.port_wrap>div>ul>li:hover img{transform: scale(1.1,1.1)}
.port_wrap>div>ul>li img{max-width:100%; transition:0.5s; display:block}
.port_wrap>div.btn_box{position:relative; text-align:right; overflow:hidden; display:block; margin-top:50px}
.btn_box{position:relative; text-align:right; overflow:hidden; display:block; margin-top:10px}
.port_wrap>div.paging{display:block}
.btn_box>a{color:#FFF; background-color:#333; padding:5px 10px; float:right}
.btn_box>a:last-child{margin-right:5px}

/*board*/
.board_wrap{position:relative; max-width:1250px; margin:0 auto;}
th, td, button, td a, th a, .borad_view p, input[type="radio"], label{letter-spacing:0;}
.search_area{position:relative; width:100%;  padding:10px 0; text-align:right}
.search_area select{background-color:#FFF; padding:5px 0; margin-right:5px; border:1px solid #EEE}
.search_area input[type="text"]{background-color:#FFF; padding:5px 0; border:1px solid #EEE}
.search_area button{background-color:#333; color:#FFF; padding:5px 20px; margin-left:5px}
.board-list table{width:100%; border:1px solid #CCC; border-left:none; border-right:none;border-top:2px solid #000}
.board-list table th{ padding:10px 0; background-color:#f4f4f4; font-weight:bold; font-size:15px }
.board-list table td{text-align:center; padding:10px; letter-spacing:-1px; }
.board-list table td + td{border-left:1px solid #EEE}
/*.board-list table td a{ letter-spacing:-1px}*/
.board-list table td a:hover{font-weight:bold}
.board-list table td a:hover i{font-weight:bold}
.board-list table td.left{text-align:left; padding:0 20px; box-sizing:border-box}


.borad_view{position:relative; width:100%; margin:0 auto}
.view_title{border-top:2px solid #000; border-bottom:1px solid #000; border-left:none; border-right:none; padding:20px; box-sizing:border-box  }
.view_title p{font-weight:bold; font-size:16px}
.view_title p span{position:absolute; right:20px}
.view_contents{padding:30px; box-sizing:border-box; border-bottom:1px solid #CCC}
.view_contents img{max-width:100%}

.board_write{position:relative; width:100%; margin:0 auto; }
.board_write table{width:100%;border-top:2px solid #000}
.board_write th {
    border-bottom: 1px solid #dbdbdb; padding: 10px 0 10px 20px;
    text-align: left;
    font-size: 15px;
    background-color: #efefef;
    box-sizing: border-box; font-weight:bold
}
.board_write td {
    border-bottom: 1px solid #dbdbdb; padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
}
.board_write td label{margin-right:5px}
.board_write td checkbox{vertical-align:middle}
.board_write input[type="text"]{border:1px solid #CCC; padding:10px; box-sizing:border-box; background-color:#FFF}
.board_write textarea{width:100%; border:1px solid #CCC; background-color:#FFF}

#bo_v_file{padding:10px; border-bottom:1px solid #000}
#bo_v_file h3 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#bo_v_file ul {
    margin: 0;
    list-style: none;
}
#bo_v_file li {
    padding: 15px;
    position: relative;
    margin: 10px 0;
}
#bo_v_file li i {
    float: left;
    color: #b2b2b2;
    font-size: 2.35em;
    margin-right: 20px;
}
#bo_v_file a {
    float: left;
    display: block;
    text-decoration: none;
    word-wrap: break-word;
    color: #000;
}
#bo_v_file .bo_v_file_cnt {
    color: #b2b2b2;
    font-size: 0.92em;
}

.board_write{position:relative; width:100%; margin:0 auto; }
.board_write table{width:100%;border-top:2px solid #CCC}
.board_write th {
    border-bottom: 1px solid #dbdbdb; padding: 10px 0 10px 20px;
    text-align: left;
    font-size: 15px;
    background-color: #efefef;
    box-sizing: border-box; font-weight:bold
}
.board_write td {
    border-bottom: 1px solid #dbdbdb; padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
}
.board_write td label{margin-right:5px}
.board_write td checkbox{vertical-align:middle}
.board_write input[type="text"]{border:1px solid #CCC; padding:10px; box-sizing:border-box}
.board_write textarea{width:100%; border:1px solid #CCC}

/*paging*/
.port_wrap>div.paging {clear: both;text-align: center; padding: 30px 0; font-weight: 600; display:block}
.paging {clear: both;text-align: center; padding: 30px 0; font-weight: 600; display:block}
.paging .prev { background:url(../image/page_prev.png) center center no-repeat;margin-right: 30px;}
.paging .next { background: url(../image/page_next.png) center center no-repeat; margin-left: 30px;}
.paging .page {text-align: left;text-indent: -9999px;}
.paging a { display: inline-block;width: 31px;height: 31px; vertical-align: top; text-align: center; line-height: 31px;}
.paging .current {background-color: #000;color: #fff;}

.fran_list{position:relative; max-width:1250px; margin:0 auto}
.fran_list>p{text-align:center; font-size:20px; font-weight:500; margin-bottom:50px}
.fran_list>ul>li{display:table; margin-top:35px; width:100%}
.fran_list>ul>li>div{display:table-cell; vertical-align:middle}
.fran_img{width:400px}
.fran_img>img{width:100%}
.fran_text{padding-left:20px}
.fran_text h2{font-weight:bold; font-size:25px; margin-bottom:10px; margin-top:10px}
.fran_text p{font-size:18px; }
.fran_text a{display:block; width:150px; text-align:center; border:1px solid #000; padding:10px 0; transition:0.5s; font-size:16px;margin-top:15px}
.fran_text a:hover{background-color:#000; color:#FFFFFF; }

.onc{position:relative; }
.onc>ul{overflow:hidden}
.onc>ul>li{float:left; margin-left:2%; width:32%}
.onc>ul>li:first-child{margin-left:0}
.onc>ul>li img{max-width:100%}
.onc>p{text-align:center; margin-bottom:15px; font-size:20px}
.onc_box{margin-top:60px}
.onc_text h3{font-weight:bold; font-size: 25px; margin-bottom:10px;}
.onc_text>ul>li{font-size: 16px;}
.onc_img>ul{overflow:hidden; margin-top: 20px;}
.onc_img>ul>li{float:left; width: 32%; margin-left: 2%;}
.onc_img>ul>li:first-child{margin-left:0}
.onc_img>ul>li img{max-width:100%}
.sign {text-align:center; margin-top:20px}
@media all and (max-width:1400px) {
.logo_list{padding:0 40px}	
}
@media all and (max-width:1300px){
.con{width:98%; margin:0 auto}
.main_title h2{font-size:35px}
.footer_wrap{width:98%}
.sub{width:95%;}
}
@media all and (max-width:1250px) {
.sub{width:95%; margin:0 auto}
.sub_back{padding:100px 10px; box-sizing:border-box}
}

@media all and (max-width:1200px) {
.notice1, .notice2{padding-left:0}	
}
@media all and (max-width:1050px) {
.gnb>ul>li{padding:0 20px}
.gnb>ul>li>a{font-size:18px}
.main_list>ul>li span{font-size:24px}
.map_w{width:100%}
.quick{top:auto; transform:translateY(0); bottom:10px}
.quick>ul>li{width:40px; }
.quick>ul>li:nth-child(n+2){width:40px; height:40px}
.quick>ul>li:nth-child(2) img{margin-top:10px; width:20px}
.quick>ul>li:last-child{width:40px; height:40px}
.quick>ul>li img{max-width:100%}
.quick>ul>li i{font-size:20px; margin-top:10px}
}
@media all and (max-width:1000px) {
.ani{background-position:center}
.con_p{padding:40px 0}
.back{padding:40px 0}	
.main_list>ul>li>a>p{font-size:20px}
}
@media all and (max-width:950px) {
.notice{display:block; overflow:hidden}
.notice>div{display:block; width:50%; float:left; padding-left:30px; box-sizing:border-box}
.notice>div.notice3{width:100%; padding-left:0; margin-top:30px}
.float_wrap2{width:95%; margin-left:2.5%}
.float_wrap>.float_text{padding-left:2%}
.float_wrap>.float_text>ul>li{font-size:14px}

.award_wrap{width:98%; margin:0 auto}
.fran_img{width:300px}	
}
@media all and (max-width:900px) {
.float_wrap{width:100%}
.float_wrap>div{float:none}
.ceo_img>img.mob_img{display:block}
.ceo_img>img.com_img{display:none}
.ceo_img{width:60%; margin:0 auto; margin-bottom:50px}
.ceo_img2{width:90%;}

.float_div_right{width:90%; margin-left:5%}
.ceo_speech{width:90%}

.business_domain>p{width:95%; margin-left:2.5%}

.float_img{position:relative; width:50%; margin:0 auto}
.float_wrap>.float_text{ position: relative; margin: 0 auto; width: 50%;padding-left: 0;}

.paging a.num{display:none}

.busi_list>li{width:49%}
.busi_list>li:nth-child(3n+1){margin-left:2%}
.busi_list>li:nth-child(2n+1){margin-left:0}
.busi_list>li:nth-child(n+3){margin-top:2%}

}
@media all and (max-width:850px) {
.chart_text{padding:20px 20px 10px}
.chart_title{font-size:16px}	
.chart_title br{display:none}
.inter_list>ul>li{float:none; width:100%; margin-left:0}
.inter_list>ul>li img{width:100%}		
.inter_list>ul>li:nth-child(n+2){margin-top:20px}
.main_list>ul>li .inter_text{height:110px; bottom:-60px}

.busi_box{max-width:100%; padding:70px 20px 100px; box-sizing:border-box}
.busi_text p{font-size:16px}
.busi_title h2{font-size:25px}
.busi_title p{font-size:17px}
.busi_img{left:0; padding:0 20px; box-sizing:border-box; bottom:-70px}

}
@media all and (max-width:750px) {
.mob{display:block !important}
.pc{display:none !important}
.sub_banner{padding-top:64px; height:150px}
.logo img{height:50px}
.mob_btn{position:absolute; right:10px; top:15px}
.mob_btn i{font-size:35px}
.gnb{position:fixed; width:250px; height:100%; background-color:#000; z-index:999; right:-250px}
.gnb>ul{width:100%; padding-top:50px}
.gnb>ul>li{display:block}
.gnb>ul>li>a{padding:10px 0}
.gnb>ul>li>p{font-size:18px; color:#FFF; padding:10px 0}
.depth{position:relative}
.depth>li>a{color:#FFF}
.mob_close{position:absolute; right:10px; top:10px}
.mob_close i{color:#FFF; font-size:40px; cursor:pointer}
.main_title h2{font-size:25px !important}
.main_title p{font-size:18px !important; margin-top:0}
.main_title p br{display:none}

.sub_back1{background-position:500px 170px}
.sub_banner2, .sub_banner5{animation: ani_back_m 20s linear; animation-iteration-count:infinite}
.sub_banner5{animation: ani_back_m2 20s linear; animation-iteration-count:infinite}

.main_list>ul>li{width:49%}
.main_list>ul>li:nth-child(3n+1){margin-left:2%}
.main_list>ul>li:nth-child(2n+1){margin-left:0}
.main_list>ul>li:nth-child(n+4){margin-top:0}
.main_list>ul>li:nth-child(n+3){margin-top:15px}
.main_list>ul>li span{font-size:20px; right:10px}
.main_list>ul>li p{font-size:16px}
.main_list>ul>li p::after{width:25px}
.inter_list>ul>li{float:none; width:100%; margin-left:0}
.logo_list{margin-top:10px}
.ani_text h2 span img{width:60px}
.notice>div{padding-left:10px}
.notice1 img{width:40px}
.notice1 h2{font-size:22px}
.notice1 p{font-size:18px; margin-left:50px}
.notice2 p{font-size:18px}
.notice2 p span{font-size:25px}

.ani_text h2{font-size:35px; line-height:34px}
.ani_text h2 span{font-size:24px}
.ani_text p{font-size:18px}

.footer_wrap{display:block; text-align:center}
.footer_wrap h1{display:block; width:auto; margin:0 auto}
.footer_wrap p{display:block}
.footer_wrap p>span{display:block}
.footer_wrap p br{display:none}

.sub{padding:50px 0}
.sub_title span{font-size:22px}
.sub_title{font-size:16px}
.awrad_text{font-size:16px}
.year{font-size:16px}

.sub_text p br{display:none}
.business>li{font-size:16px}
.business>li::after{top:12px}
.business_wrap h2{font-size:25px}

.fran_list>p{font-size:20px}
.fran_list>p br{display:none}
.fran_list>ul>li{display:block;}
.fran_list>ul>li>div{display:block; width:100%; padding:0}
.fran_text h2{font-size:20px; margin-bottom:5px}
.fran_text p{font-size:16px}
.fran_text p br{display:none}

.port_wrap>div>ul>li{width:49%}
.port_wrap>div>ul>li:nth-child(4n+1){margin-left:2%}
.port_wrap>div>ul>li:nth-child(n+5){margin-top:0}
.port_wrap>div>ul>li:nth-child(2n+1){margin-left:0}
.port_wrap>div>ul>li:nth-child(n+3){margin-top:15px}

.tab>ul>li{font-size:14px}
.onc_text h3{font-size:20px}
}
@media all and (max-width:600px) {
.sub_text h2{font-size:20px}
.sub_text p{font-size:16px}	
.cs_inner>div{width:100%}
.cs_title{margin-top:20px}
}
@media all and (max-width:550px) {
.notice>div{float:none; position:relative; width:260px; margin:0 auto}
.notice>div.notice1{padding-left:0}
.notice>div.notice2{padding-left:50px; margin-top:30px}	
.ani_text{width:98%; left:1%}
.ani_text p br{display:none}
.ani_text a{font-size:18px}
.sub_title br{display:none}
.business{padding:0 15px}
.onc>ul>li{width:100%; margin-left:0; text-align:center}
}
@media all and (max-width:450px) {
.sub_tab>ul>li>a{font-size:14px; padding:10px 20px}	
}

@keyframes ani_back{
	0% {
		background-position: 50% 0;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 50% 0.1%;
	}	
}
@keyframes ani_back_m{
	0% {
		background-position: 20% 0;
	}
	50% {
		background-position: 20% 100%;
	}
	100% {
		background-position: 20% 0.1%;
	}	
}
@keyframes ani_back_m2{
	0% {
		background-position: 45% 0;
	}
	50% {
		background-position: 45% 100%;
	}
	100% {
		background-position: 45% 0.1%;
	}	
}