@charset "utf-8";
/*--------------------------------------------------

title: layout.css

version: 0.1
2015.07.30
onmakers

---------------------------------------------------*/
audio{display:none;}
/*layout*/
body{position:relative; float:left; overflow-x:hidden; height:auto; font-family: 'Arial', Sans-serif;}
#wrap{width:100%; height:100%; position:relative; overflow-x:hidden;}
#header{width:100%; display:block; min-height:auto !important; position:relative; text-align:center; float:left;}
#container{width:100%; float:left; clear:both;}
#footer{width:100%; float:left; clear:both; background-color:#2a2a2a;}
.inner{width:100%; position:relative; float:left;}
.ccp_layout_frame{width:100%; float:left;}
.header_frame{display:inline-block; width:100%; height:60px; background-color:#333; box-sizing:border-box; position:relative; float:left;}

/*로고*/
.logo{display:inline-block; float:left; position:absolute; top:50%; margin-top:-12.5px; left:5%; font-size:0;}
.logo .pc_logo{display:none;}
.logo .m_logo{display:inline-block; width:150px;}


/*모바일 메뉴*/
.m_btn_open{position:absolute; right:5%; top:50%; width:27px; margin-top:-10px;}
.m_btn_open img{width:100%;}

.m_menu_frame{position:absolute; width:100%; height:100%; top:0; left:0; background:url(../img/bg/bg_opacity_black.png) repeat; z-index:9999; display:none;}
.mobile_menu{width:220px; height:100%; background-color:#3283dd; position:absolute; right:-220px; top:0;}
.m_btn_close{floaT:left; width:100%; margin:20px 0; box-sizing:border-box; padding:0 5%;}
.m_btn_close a{float:right;}
.m_join_menu{float:left; width:100%; box-sizing:border-box; padding:0 5%; text-align:center;}
.m_join_menu a{display:inline-block; width:45%; box-sizing:border-box; text-align:right; color:#fff; font-size:12px; border:1px solid #fff; border-radius:5px; margin:10px 1% 0 1%;}
.m_join_menu a.m_login{background:url(../img/icon/icon_key.png) no-repeat 10px 50%; padding:8px 15px;}
.m_join_menu a.m_member{background:url(../img/icon/icon_person.png) no-repeat 10px 50%; padding:8px 10px;}
.m_join_menu a.m_link_ms{width:94%; margin:10px 0 0 0; padding:10px 10px; text-align:center;}
.m_join_menu p.m_user_info{display:inline-block; height:16px; color:#fff; background:url(../img/icon/icon_fff_person.png) no-repeat 0 15%; padding:6px 0 0 23px;}

.m_menu_list{float:left; width:100%; margin-top:15px;}
.m_menu_list ul{float:left; width:100%;}
.m_menu_list ul.m_main_menu > li{float:left; width:100%; border-bottom:1px solid #3283dd;}
.m_menu_list ul.m_main_menu > li.mmenu_on a{background:#0d3656 url(../img/icon/icon_arrow_mmenu.png) no-repeat 95% 50%; color:#fff;}
.m_menu_list ul.m_main_menu > li > a{float:left; width:100%; box-sizing:border-box; padding:15px 10%; background:#0c5b94 url(../img/icon/icon_arrow_mmenu.png) no-repeat 95% 50%; color:#81b5db; font-size:14px; font-weight:bold;}
.m_menu_list ul.m_main_menu > li ul.m_sub_menu{display:none; padding:0 10%; box-sizing:border-box; background-color:#0a4877; border-top:1px solid #3283dd;}
.m_menu_list ul.m_main_menu > li ul.m_sub_menu li{float:left; width:100%;}
.m_menu_list ul.m_main_menu > li ul.m_sub_menu li a{float:left; width:100%; color:#fff; padding:15px; border-top:1px solid #3b6d92; box-sizing:border-box; background:url(../img/icon/icon_white_dat.png) no-repeat 5px 50%;}
.m_menu_list ul.m_main_menu > li ul.m_sub_menu li:first-child a{border:none;}

/*PC 메뉴*/
.menu{display:none;}
.sub_menu{display:none;}

/*slogan*/
.slogan{width:100%; height:315px; box-sizing:border-box; float:left; text-align:center; padding:25px; text-align:right; position:relative;}
.slogan_text{width:100%;}
.slogan img{max-width:600px; width:100%;}
.main_background{position:absolute; width:100%; height:100%; top:0; left:0; z-index:-1;}
.main_background ul{width:100%; height:100%;}
.main_background ul li{position:absolute; top:0; left:0; width:100%; height:100%; text-indent:-9999px; font-size:0; opacity:0;}
.main_background ul li:first-child{background:url(../img/bg/bg_index_01.jpg) no-repeat 50% 50%; background-size:cover;}
.main_background ul li:nth-child(2){background:url(../img/bg/bg_index_02.jpg) no-repeat 50% 50%; background-size:cover;}
.main_background ul li:nth-child(3){background:url(../img/bg/bg_index_03.jpg) no-repeat 50% 50%; background-size:cover;}

/*인덱스페이지의 모든 컨텐츠 틀*/
.position_frame{width:100%; float:left; position:relative;}

/*공지사항 / 언론보도*/
.index_board_frame .ibt_frame{float:left; width:100%;}
.ib_moving_frame{position:absolute; width:200%; height:100%; float:left; left:0;}

.ib_title{display:inline-block; width:100%; height:155px; background:#11c382 url(../img/bg/bg_indexnotice02.png) no-repeat 50% 100%; position:relative; float:left; padding-bottom:14px;}
.ib_title h2{float:left; width:100%; height:100%; box-sizing:border-box; color:#fff; text-align:center; background:url(../img/icon/icon_mike.png) no-repeat 50% 30%; padding-top: 95px; font-size:16px;}
.ib_title > div{width:90%; position:absolute; top:50%; left:0; margin-top:-11px; font-size:0; box-sizing:border-box; padding:0 15px;}
.ib_title > div a{display:inline-block; width:22px; height:22px;}
.ib_title > div a.btn_prev{float:left; background:url(../img/icon/icon_in_arrow_set.png) no-repeat 0 50%; display:none;}
.ib_title > div a.btn_next{float:right; background:url(../img/icon/icon_in_arrow_set.png) no-repeat 100% 50%;}

.ib_contents{float:left; width:100%; height:180px; box-sizing:border-box; background:#fff; position:relative;}
.ib_contents a.btn_ib_more{position:absolute; right:15px; top:20px;}
.ib_contents ul{float:left; width:100%; margin-top:30px;}
.ib_contents ul li{floaT:left; width:100%; box-sizing:border-box; padding:10px 0 10px 10px; background:url(../img/icon/icon_black_dat.png) no-repeat 0 50%; border-bottom:1px dotted #bebcbc;}
.ib_contents ul li:first-child{margin-top:0;}
.ib_contents ul li a{width:100%; floaT:left; font-size:13px; color:#787877; overflow:hidden; word-break:break-all; text-overflow:ellipsis; white-space:nowrap;}

.ib_moving_frame > div{width:50%; height:100%; box-sizing:border-box; padding:20px 15px 20px 15px; float:left; position:relative;}

/*CCP융합연구단장 인사말 / 연구단 일정*/
.ccp_greeting_link{display:inline-block; width:50%; height:155px; background:#f36b35; position:relative; float:left;}
.ccp_greeting_link a{float:left; width:100%; height:100%; box-sizing:border-box; color:#fff; text-align:center; background:url(../img/icon/icon_tb.png) no-repeat 50% 30%; padding-top:105px; font-size:16px;}
.ccp_greeting_link a h2{font-size:17px; letter-spacing: -0.2px;}

.ccp_calender_link{display:inline-block; width:50%; height:155px; background:#e6e6e6; position:relative; float:left;}
.ccp_calender_link a{float:left; width:100%; height:100%; box-sizing:border-box; color:#fff; text-align:center; background:url(../img/icon/icon_monitor.png) no-repeat 50% 30%; padding-top:105px;}
.ccp_calender_link a h2{font-size:16px; color:#494949;}

/*관련사이트*/
.partner_site{display:none;}
/*PC footer*/
.pc_footer{display:none;}

/*mobile footer*/
.footer_contents{display:block; position:relative; padding:0;}

.address{display:block; margin:30px 0;}
.address p{font-size:11px; font-weight:bold; color:#A0A0A0; margin-bottom:10px; text-align:center;}
.address .copyright{display:block; font-size:12px; color:#A0A0A0;}

/* CCP 주요 기술 */
.ccp_main_tech{width:100%; float:left; position:relative;}
.ccp_main_tech a.btn_cmtech{position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; text-indent:-9999px; z-index:1; background:url(../img/bg/bg_opacity_0.png) repeat;}
.ccp_main_tech a.btn_cmtech:hover{border:7px solid #0f5bb0;}
.ccp_main_tech > div{float:left; width:100%; height:100%; background:url(../img/bg/bg_opacity_white.png) repeat; box-sizing:border-box; padding:25px 23px;}
.ccp_main_tech > div .cmt_frame{float:left; width:100%; height:100%;}
.ccp_main_tech > div h2{float:left; width:100%; font-size:16px; color:#3677bf; font-weight:bold;}
.ccp_main_tech > div em{float:left; width:100%; font-size:13px; color:#000; font-weight:bold; margin:0px 0 5px 0; letter-spacing: -0.2px;}
.ccp_main_tech > div p{float:left; width:100%; font-size:12px; color:#666666; line-height:18px;}
.ccp_main_tech > div a.btn_cmt_more{float:left; clear:both; margin-top:10px; width:66px; text-align:center; padding:3px 0; border:1px solid #c7c7c7; box-sizing:border-box; font-size:11px; color:#666; font-weight:bold; background-color:#e7e7e7;}

.ccp_main_tech > div.cmt_01 .cmt_frame{background:url(../img/other/index_tech_01.png) no-repeat 100% 100%;}
.ccp_main_tech > div.cmt_02 .cmt_frame{background:url(../img/other/index_tech_02.png) no-repeat 100% 100%;}
.ccp_main_tech > div.cmt_03 .cmt_frame{background:url(../img/other/index_tech_03.png) no-repeat 100% 100%;}

.ccp_main_tech > div.cmt_02{background:#468fe0;}
.ccp_main_tech > div.cmt_02 h2{color:#fff;}
.ccp_main_tech > div.cmt_02 em{color:#fff;}
.ccp_main_tech > div.cmt_02 p{color:#fff;}
.ccp_main_tech > div.cmt_02 a.btn_cmt_more{color:#468fe0; background:#fff; border-color:#fff;}
.ccp_main_tech > div{position:relative;}
.ccp_main_tech > div > a{position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; text-indent:-9999px;}
.ccp_main_tech > div > a:hover{border:7px solid #0f5bb0;}
/*.ccp_main_tech > div:hover{border:7px solid #0f5bb0; padding:18px 16px;}*/

/* 전체 메뉴 */
.all_menu_frame{display:none;}

/**********************************************************************************************************************************************가장 작은 모바일 뷰포트*/
@media all and (min-width:350px){
/*slogan*/
.slogan img{max-width:600px; width:90%;}
}
/**********************************************************************************************************************************************모바일 뷰포트*/
@media all and (min-width:600px){

/*slogan*/
.slogan{height:415px;}
.slogan img{max-width:600px; width:80%;}

/* 소개 배너 */
.intro_banner{width:50%;}

/*CCP융합연구단장 인사말 / 연구단 일정*/
/*.ccp_link_frame{width:100%;}*/
.ccp_greeting_link{width:50%;}
.ccp_calender_link{width:50%;}


/* CCP 주요 기술 */
.ccp_main_tech{height:309px;}
.ccp_main_tech > div{width:33.333333%;}

/*CCP융합연구단장 인사말 / 연구단 일정*/
.ccp_greeting_link{width:33.333333%;}
.ccp_calender_link{width:33.333333%;}

/*공지사항 / 언론보도*/
.index_board_frame .ibt_frame{width:33.333333%;}

}
/**********************************************************************************************************************************************모바일 뷰포트*/
/**********************************************************************************************************************************************태블릿 뷰포트*/
@media all and (min-width:768px){
/*layout*/
body{font-size:13px;}

/*slogan*/
.slogan{height:465px;}

/*관련사이트*/
.partner_site{width:100%; float:left; display:inline-block; font-size:0; box-sizing:border-box; margin-top:1px;}
.ps_frame{width:100%; box-sizing:border-box; position:relative; float:left; padding:0 50px 0 100px; background-color:#fff;}
.ps_frame > a{float:left; width:21px; height:21px; text-indent:-9999px; position:absolute; top:50%; margin-top:-10.5px;}
.btn_pause{background:url(../img/icon/icon_pause.png) no-repeat 50% 50%; left:15px; }
.btn_play{background:url(../img/icon/icon_play.png) no-repeat 50% 50%; left:15px;}
.btn_rewind{background:url(../img/icon/icon_rewind.png) no-repeat 50% 50%; left:55px;}
.btn_fastforward{background:url(../img/icon/icon_fastforward.png) no-repeat 50% 50%; right:15px;}

.ps_frame ul{width:100%; height:70px; overflow:hidden; float:left; position:relative;}
.ps_frame ul li{width:200px; height:70px; text-indent:-9999px; float:left; position:absolute; top:0;}
.ps_frame ul li a{float:left; width:100%; height:100%;}
.ps_frame ul li.pl_01{background:url(../img/other/fs_01.jpg) no-repeat 50% 50%; left:0;}/*국가과학기술연구원*/
.ps_frame ul li.pl_02{background:url(../img/other/fs_02.jpg) no-repeat 50% 50%; left:200px;}/*한국화학연구원*/
.ps_frame ul li.pl_03{background:url(../img/other/fs_03.jpg) no-repeat 50% 50%; left:400px;}/*한국에너지기술연구원*/
.ps_frame ul li.pl_04{background:url(../img/other/fs_04.jpg) no-repeat 50% 50%; left:600px;}/*한국과학기술연구원*/
.ps_frame ul li.pl_05{background:url(../img/other/fs_05.jpg) no-repeat 50% 50%; left:800px;}/*한국기계연구원*/

}
/**********************************************************************************************************************************************태블릿 뷰포트*/
/**********************************************************************************************************************************************PC 뷰포트*/
@media all and (min-width:1300px){
/*layout*/
body{background-color:#e7ecef; height:100%; float:none; overflow:inherit;}
#wrap{width:100%; height:100%; position:relative; overflow-x:hidden;}
#header{width:175px; height:100%; display:block; position:absolute; text-align:center; float:left; z-index:9; left:0; top:0; background:#fff;}
#container{width:100%; height:100%; float:left; clear:both; margin:0;}
#footer{display:none;}
.inner{width:100%; height:100%; max-width:1000px; min-width:1000px; margin:0 auto; position:relative; float:none;}

/*헤더 프레임*/
.header_frame{display:inline-block; width:175px; height:100%; min-height: 915px; max-width:1070px; box-sizing:border-box; background-color:#333333; position:relative; z-index:91;}

/*로고*/
.logo{display:inline-block; float:left; position:relative; top:0; left:0; margin:0; width:100%; text-align:center; padding:45.5px 0; background:url(../img/bg/bg_menu_border.png) no-repeat 0 100%}
.logo .pc_logo{display:inline-block;}
.logo .m_logo{display:none;}

/* PC 메뉴 */
.menu{display:inline-block; float:left; width:100%; background:url(../img/bg/bg_menu_border.png) no-repeat 0 100%; position:relative; top:0; right:0; margin:0; text-align:left;}
.menu a.all_menu{float:left; display:block; width:100%; box-sizing:border-box; padding:15.5px 0 15.5px 10px; font-size:15px; font-weight:bold; color:#e0e0e0; background:url(../img/icon/icon_pc_allmenu.png) no-repeat 85% 50%;}
.menu a.all_menu:hover{color:#3283dd;}
.menu > ul{
    clear: both;
 }
.menu > ul > li{
    display: table;
    width: 100%;
    background:url(../img/bg/bg_menu_border.png) no-repeat 0 0;
}
.menu > ul > li > a{
    display: table-cell;
    height: 45px;
    box-sizing: border-box;
    padding: 0 35px 0 10px;
    vertical-align: middle;
    font-size:13px; letter-spacing: -0.2px; font-weight:bold; color:#e0e0e0;
    background:url(../img/icon/icon_pc_menuarrow.png) no-repeat 90% 50%;
}
.menu > ul > li > a:hover{color:#3283dd;}
.menu > ul > li.menu_on a{color:#3283dd;}

.sub_menu{width:175px; height:100%; min-height:800px; float:left; display:block; position:absolute; top:0; left:0; box-sizing:border-box; padding-top:230px; background:#fff; text-align:left; border-right:1px solid #dadada; z-index:8;}
.sub_menu_list{width:100%; float:left; position:relative;}
.sub_menu_list > li{position:absolute; top:0; left:0; width:100%; floaT:left; display:none;}
.sub_menu_list ul li{width:100%; floaT:left; clear:both;}
.sub_menu_list ul li a{width:100%; float:left; font-size:13px; font-weight:bold; color:#666666; box-sizing:border-box; padding:16px 0 16px 20px; border-bottom:1px solid #dadada;}
.sub_menu_list ul li a:hover{background-color:#458ee0; color:#fff;}

/*모바일 메뉴*/
.m_menu_frame{display:none !important;}
.m_btn_open{display:none;}

/*container*/

/*index contents frame*/
.index_contents{
    width:100%;
    float:left;
    box-sizing:border-box; padding-left:175px;
    position:absolute; top:50%; left:0; margin-top:-430px;
}

/*슬로건*/
.slogan{height:auto; padding:0; margin:25px 0;}
.slogan img{width:auto; max-width: 100%;}
.main_background{position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1;}
.main_background ul{width:100%; height:100%; position:relative;}
.main_background ul li{position:absolute; top:0; left:0; width:100%; height:100%;}
.main_background ul li:first-child{background:url(../img/bg/bg_index_01.jpg) no-repeat 50% 50%; background-size:cover;}
.main_background ul li:nth-child(2){background:url(../img/bg/bg_index_02.jpg) no-repeat 50% 100%; background-size:cover;}
.main_background ul li:nth-child(3){background:url(../img/bg/bg_index_03.jpg) no-repeat 50% 50%; background-size:cover;}
/* 소개 배너*/
.intro_banner{width:311px;}

/*CCP융합연구단장 인사말 / 연구단 일정*/
.ccp_link_frame{width:207px; floaT:left; position:relative;}
.ccp_greeting_link{width:207px; position:absolute; top:-100%; left:0; background:#f36b35;}
.ccp_calender_link{width:100%; background:#f36b35 url(../img/bg/bg_opacity_white.png) repeat;}

/*공지사항 / 언론보도*/
.index_board_frame{float:left; width:100%; height:155px; position:relative; overflow:hidden;}
.index_board_frame .ibt_frame{position:absolute; left:0; top:0; z-index:9; float:left; width:100%; max-width:220px;}
.ib_moving_frame{position:absolute; width:200%; height:100%; float:left; left:0;}

.ib_title{background:#11c382 url(../img/bg/bg_indexnotice.png) repeat-y 100% 0;}
.ib_title h2{padding-right:20px; background:url(../img/icon/icon_mike.png) no-repeat 45% 30%;}

.ib_contents{height:100%;}
.ib_contents ul li{padding:5px 0 5px 10px;}
.ib_contents ul li a{font-size:12px;}

.ib_moving_frame > div{width:50%; height:100%; box-sizing:border-box; padding:20px 15px 20px 240px; float:left; position:relative;}

.index_board_frame{float:left; width:618px; height:155px; z-index:1;}
.index_board_frame .ibt_frame{position:relative; left:0; top:0;}
.ib_contents{width:398px;}
.ib_moving_frame > div{padding:20px 15px 20px 15px;}

/*PC footer */
.pc_footer{display:block; width:100%; padding:20px 5px; box-sizing:border-box; position:absolute; left:0; bottom:0; font-size:12px; color:#a0a0a0; text-align:center;}
.pc_footer .address{float:left; width:100%; border-bottom:1px solid #4c4c4c; padding:10px 0; margin:0 0 10px 0;}
.pc_footer .address p{margin:0 0 2px 0; text-align:left; padding-lefT:5px;}
.pc_footer .copyright{float:left; width:100%;}
.pc_footer .copyright p{text-align:left; padding-lefT:5px; float:left; clear:both;}
.pc_link_ms{float:left; margin:0 0 0 3px; border:1px solid #000; background:#202020; color:#a9a9a9; font-size:10px; font-weight:bold; padding:2px;}
.pc_login{width:100%; text-align:center;}
.pc_login a{display:inline-block; border:1px solid #a0a0a0; padding:5px 8px; color:#a0a0a0; margin:10px 4px 0 4px;}
.pc_login p.pc_user_info{width:135px; height:16px; box-sizing:border-box; padding:3px 0 0 15px; color:#468fe0; display:inline-block; background:url(../img/icon/icon_468fe0_person.png) no-repeat 0 50%;}

/*mobile footer*/
.footer_contents{display:none;}

/* CCP 주요 기술 */
.ccp_main_tech{width:618px; height:309px; float:right;}
.ccp_main_tech > div{width:206px;}

/* 전체 메뉴 */
.all_menu_frame{width:1235px; height:100%; position:absolute; top:0; left:-1235px; background:#458ee0 url(../img/bg/bg_all_menu.png) no-repeat 25% 0; z-index:9; display:block; text-align:left;}
.am_title{width:100%; text-align:center; paddinG:60px 0; position:relative; float:left;}
.am_title a{position:absolute; top:45%; margin-top:-25.5px; right:10%;}
.am_list{width:100%; float:left; box-sizing:border-box; padding:0 5%;}
.am_lt{width:100%;  float:left;}
.am_lt > li{width:20%; float:left;}
.am_lt > li > p{
    float:left;
    width:100%; max-width:180px; box-sizing: border-box;
    padding:16.5px 15px; background-color:#0f5bb0;
    text-align:center;
    color:#0f5bb0; font-size:14px; color:#fff; font-weight:bold; letter-spacing: 0.5px;
}
.am_ltt{
    display: table;
    width: 180px; height: 50px;
}
.am_ltt > div{
    display: table-cell;
    padding: 0 15px;
    background-color:#0f5bb0;
    text-align:center; vertical-align: middle;
    color:#0f5bb0; font-size:14px; color:#fff; font-weight:bold; letter-spacing: -0.3px;
}
.am_lcl{float:left; width:100%; max-width:180px; border-top:1px solid #7db0e9; margin-top:15px;}
.am_lcl > li{float:left; width:100%; clear:both; border-bottom:1px solid #7db0e9; background:url(../img/icon/icon_white3_dat.png) no-repeat 5px 20px;}
.am_lcl > li > a{float:left; width:100%; color:#fff; font-size:13px;  padding:15px 0 15px 20px; box-sizing:border-box;}
.am_lcl > li > a:hover{background:#0f5bb0 url(../img/icon/icon_white3_dat.png) no-repeat 5px 20px;}
.am_lcl > li > ul{float:left; width:100%;}
.am_lcl > li > ul li{float:left; width:100%;}
.am_lcl > li > ul li a{float:left; width:100%; color:#fff; padding:10px 0 10px 20px;}
.am_lcl > li > ul li a:hover{background:#0f5bb0;}

}
/**********************************************************************************************************************************************PC 뷰포트*/

/* 18.12.04 */
.other-lang{ /* 국/영문페이지 이동 링크블럭 */
    position: absolute; left: 50%; bottom: 10px; margin-left: -30px;
    display: block;
    width: 60px; height: 25px;
    line-height: 25px;
    box-sizing: border-box;
    /* border: 1px solid #000;
    background: #202020;
    color: #a9a9a9; */
    font-size: 13px; font-weight: bold; text-align: center;
    font-family: Arial;
    border: 1px solid #a0a0a0;
    color: #a0a0a0 !important;
}
.other-lang.mobile{display: none;}
@media all and (max-width: 1300px){
    .other-lang{display: none;}
    .other-lang.mobile{
        display: inline-block;
        margin-right: 45px; margin-top: -12.5px;
        right: 5%; left: inherit; top: 50%;

    }
}