@charset "utf-8";

/* #main */

#main.wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background:url(../images/bg_main_back.png) no-repeat; background-size: cover; /*overflow-x: scroll; overflow-y: hidden;*/ min-width: 960px; min-height: 800px}
#main .header {position: fixed; width: 100%; height: 55px; background:url(../images/bg_main_header.png); z-index: 100}
#main .header h1 {display: block; float: left; margin: 20px}
#main .header a.logo {display: block; text-indent: -99999px; font-size: 0; background: url(../images/header_logo.png) no-repeat; width: 134px; height: 22px}
#main .header ul.bt_wrap  {float: right}
#main .header ul.bt_wrap li {float: left; margin: 18px 0}
#main .header ul.bt_wrap li a { display: inline-block; margin:0 15px; width: 19px; height: 19px;  display: block; text-indent: -99999px; font-size: 0}
#main .header ul.bt_wrap li:first-child {border-right: 1px solid #555; }
#main .header ul.bt_wrap li:first-child a {background: url(../images/bt_header_main_list.png) no-repeat}
#main .header ul.bt_wrap li:last-child a {background: url(../images/bt_header_search.png) no-repeat}
#main .header ul.bt_wrap li.active a {background: url(../images/bt_header_search02.png) no-repeat}

#main .container {position: absolute; width: 100%; min-width: 960px; height: 55%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 55px 0 45px;}
#main .container .content {width: 960px; /*padding: 0 10px;*/ box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; top: 50%; left: 50%; margin: -250px 0 0 -480px } 
#main .container .content .page_text h4 {font-size: 36px; margin-bottom: 5px; color: #fff; font-weight: 100; padding-left:15px; margin-bottom: 60px }
#main .container .content .page_text h4:after {content: ""; display: block; background:url(../images/logo_tuneps.png) no-repeat; width: 226px; height: 67px; position: absolute; right: 5px; top: -40px;}
#main .container .content .page_text p {font-size: 16px; color: #fff; margin-bottom: 40px; font-weight: 100; letter-spacing: 0.03em}
#main .container .content ul.bt_thumb li {float: left; margin-top: 0px; margin-right: 20px; border-radius: 5px; -webkit-border-radius: 5px; overflow: hidden; box-shadow: 1px 1px 15px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 15px rgba(0,0,0,0.5); position: relative}
#main .container .content ul.bt_thumb li a {display: block; width: 172px; height: 250px; box-sizing: border-box; -webkit-box-sizing: border-box; padding:20px 15px; font-size: 16px; line-height:160%;}
#main .container .content ul.bt_thumb li:nth-child(2n) {margin-top: 70px} 
#main .container .content ul.bt_thumb li:nth-child(2n) a:hover {color: #fff !important} 
#main .container .content ul.bt_thumb li:nth-child(5) {margin-right: 0px} 

#main .container .content ul.bt_thumb li:nth-child(6) {margin-right: 20px} 
#main .container .content ul.bt_thumb li:nth-child(6) {margin-left: 100px} 
#main .container .content ul.bt_thumb li:nth-child(6) {margin-top: 10px} 
#main .container .content ul.bt_thumb li:nth-child(7) {margin-top: 70px} 

#main .container .content ul.bt_thumb li:nth-child(8) {margin-top: 10px} 
#main .container .content ul.bt_thumb li:nth-child(9) {margin-top: 70px} 


/*#main .container .content ul.bt_thumb li:nth-child(6) {padding: 10px 30px 10px 150px}*/



#main .container .content ul.bt_thumb li a:after {content: ""; display: block; width: 26px; height: 26px; background: url(../images/icon_main_plus.png) no-repeat; position: absolute; top:25px; right: 10px}
#main .container .content ul.bt_thumb li.t2 > a:after {content: ""; display: block; width: 26px; height: 26px; background: url(../images/icon_main_plus2.png) no-repeat; position: absolute; top:25px; right: 15px}
#main .container .content ul.bt_thumb li:nth-child(1) a{background: url(../images/bg_main_thumb_00.png) no-repeat #ccc; color: #333}
#main .container .content ul.bt_thumb li:nth-child(2) a{background: url(../images/bg_main_thumb_01.png) no-repeat #3981e2; color: #fff}
#main .container .content ul.bt_thumb li:nth-child(3) a{background: url(../images/bg_main_thumb_02.png) no-repeat #fff; color: #333}
#main .container .content ul.bt_thumb li:nth-child(4) a{background: url(../images/bg_main_thumb_03.png) no-repeat #3981e2; color: #fff}
#main .container .content ul.bt_thumb li:nth-child(5) a{background: url(../images/bg_main_thumb_04.png) no-repeat #fff;  color: #333}
#main .container .content ul.bt_thumb li:nth-child(6) a{background: url(../images/bg_main_thumb_05.png) no-repeat #3981e2; color: #fff}
#main .container .content ul.bt_thumb li:nth-child(7) a{background: url(../images/bg_main_thumb_06.png) no-repeat #fff;  color: #333}
#main .container .content ul.bt_thumb li:nth-child(8) a{background: url(../images/bg_main_thumb_07.png) no-repeat #3981e2; color: #fff}
#main .container .content ul.bt_thumb li:nth-child(9) a{background: url(../images/bg_main_thumb_08.png) no-repeat #fff;  color: #333}


	
#main .footer {position: fixed; bottom: 0; width: 100%; height: 45px; background:url(../images/bg_main_footer.png); box-sizing: border-box; -webkit-box-sizing: border-box; padding: 15px 0}
#main .footer .footer_copy {margin-left: 20px; color: #fff; font-size: 12px}
#main .footer .family {color: #fff; font-size: 12px; margin-right: 40px}
#main .footer .family:after {content: ""; display: inline-block; width:6px ; height:9px ; background: url(../images/footer_arrow.png); margin-left: 10px}




/* #sub  */

#sub .header {position: fixed; width: 100%; height: 55px; background:url(../images/bg_main_header.png); z-index: 100}
#sub .header h1 {display: block; float: left; margin: 20px}
#sub .header a.logo {display: block; text-indent: -99999px; font-size: 0; background: url(../images/header_logo.png) no-repeat; width: 134px; height: 22px}
#sub .header ul.bt_wrap  {margin: 0; float: right}
#sub .header ul.bt_wrap li {float: left; margin: 18px 0}
#sub .header ul.bt_wrap li a { display: inline-block; margin:0 15px; width: 19px; height: 19px;  display: block; text-indent: -99999px; font-size: 0}
#sub .header ul.bt_wrap li:first-child {border-right: 1px solid #eee; }
#sub .header ul.bt_wrap li:first-child a {background: url(../images/bt_header_main_list.png) no-repeat}
#sub .header ul.bt_wrap li:last-child a {background: url(../images/bt_header_search.png) no-repeat}
#sub .header ul.bt_wrap li.active a {background: url(../images/bt_header_search02.png) no-repeat}

#sub .container {width: 100%;  position:relative; min-width: 960px; padding-top: 55px; box-sizing: border-box; -webkit-box-sizing: border-box; min-height: 720px; /*overflow-x:scroll;*/  top: 0; bottom: 0}

#sub .container .lnb {width: 270px; position: absolute; top: 55px; bottom: 0; left: 0; /*overflow-y: scroll; overflow-x: hidden;*/ background: #e9e9e9; z-index: 3}

#sub .container .content {position: relative; width: 100%; max-width: 1080px; padding: 30px; padding-left: 300px; box-sizing: border-box; -webkit-box-sizing: border-box;  background: #fff; z-index: 2}
#sub.search .container .content {position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 30px; box-sizing: border-box; -webkit-box-sizing: border-box;  background: #fff; z-index: 2}

#sub .footer .family {width: 65px; height: 40px; background: url(../images/footer_logo.png) no-repeat; display: block; font-size: 0; text-indent: -99999px; position: relative; top: -10px}

/* content */
.content h1 {font-size: 36px; font-weight: 700; color: #333; margin: 20px 0 40px}
.content h2 {font-size: 24px; font-weight: 700; color: #333; margin: 20px 0 20px}
.content h2 span {color: #e02929}
.content h3 {font-size: 20px; font-weight: 700; color: #333; /* margin-bottom: 20px*/}
.content h4 {font-size: 16px; font-weight: 700; color: #333; margin-bottom: 20px}

.content b {font-weight: 700; color: #333}

div.text_group {margin-bottom: 20px; padding-top: 20px }

span.t2 {display: block; background: #f1f1f1; padding: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; font-weight: 400; font-size: 14px; position: relative}
span.t2:before {content: ""; display: block; width: 12px; height: 12px; background:  url(../images/bg_span_t2.png) left top no-repeat; position: absolute; top: 0; left: 0}
span.t2:after {content: ""; display: block; width: 12px; height: 12px; background:  url(../images/bg_span_t2.png) right top no-repeat; position: absolute; bottom: 0; right: 0}
span.t3 {display: block; padding:10px 20px; padding-left: 30px;  box-sizing: border-box; -webkit-box-sizing: border-box; font-weight: 400; font-size: 14px; position: relative; border: 1px solid #ec000e; color: #333; margin-bottom: 20px;}
span.t3:before {display: block; width: 20px; height: 100%; background:url(../images/icon_NB.png) center center no-repeat #ec000e; content: ""; position: absolute; top: 0; left: 0}
span.t4 {display: block; padding:10px 20px; padding-left: 30px;  box-sizing: border-box; -webkit-box-sizing: border-box; font-weight: 400; font-size: 14px; position: relative; border: 1px solid #555; color: #333; margin-bottom: 20px;}
span.t4:before {display: block; width: 20px; height: 100%; background:url(../images/icon_NB.png) center center no-repeat #555; content: ""; position: absolute; top: 0; left: 0}
span.t5 {display: block; padding: 20px 20px 20px 20px; border: 1px solid #ccc; background: #f1f1f1; margin-bottom: 20px}
span.t5 b {display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #333; }
span.t5 strong {font-weight: bold; color: #333}

h4.t2 {border-bottom: 1px solid #ec000e; color: #ec000e ; padding-bottom: 5px}

.content a {color: #358bff;}
.content p {margin: 10px 0 ; color: #555}
.content ul {list-style: disc; padding-left: 15px; margin-bottom: 20px; font-size: 14px; padding-top: 20px}
.content ol	{list-style: decimal; padding-left: 15px; margin-bottom: 20px; font-size: 14px;}
.content ul li,	.content ol li {margin: 10px 0 ; color: #555; font-size: 14px}
.content ul li ul, .content ol li ul {list-style: none; padding-left: 0;}
.content ul li ul li, .content ol li ul li {position: relative; padding-left: 10px;}
.content ul li ul li:before, .content ol li ul li:before {content: ""; display: block; border-left: 5px solid #ec000e; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; left: 2px;  top: 5px; }
.content ul li ul li:after, .content ol li ul li:after {content: ""; display: block; border-bottom: 2px solid #ec000e; position: absolute; left: -1px; top: 9px; width: 4px; z-index: 2; }
.content ul li ol li:before {content: ""; display: none;  }
.content ul li ol li:after {content: ""; display: none; }
.content ul li ol li {padding-left: 0}

.content ul li ul li ul, .content ol li ul li ul {padding-left: 0;}
.content ul li ul li ul li:before, .content ol li ul li ul li:before {content: "-"; border: 0; display: block; position: absolute; left: 1px;  top: 0px; }
.content ul li ul li ul li:after, .content ol li ul li ul li:after {display: none }

li.list_none {list-style: none !important}
li.list_none:before, li.list_none:after {display: none !important}

.content span.caption {font-size: 14px; color: #777; font-weight: 400}
.content img.big {width: 100%; height: auto; max-width: 740px; margin-bottom: 20px}
span.small_img {text-align: center; display: block; margin: 20px 0}
li img.big, span img.big {margin-top: 20px;}
.content img.border {border: 1px solid #ccc; }


.content div.flow_step {border: 1px solid #ccc; display: inline-block; padding: 20px; margin: 20px 0 }
.content div.flow_step > ul {padding: 0 }
.content div.flow_step > ul li.step {float: left; padding-right: 30px; padding-left:0;  position: relative}
.content div.flow_step > ul li.step:before {content: ""; display: block;  border-left: 5px solid #ec000e; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; right: 15px !important; left: auto; top:7px !important}
.content div.flow_step > ul li.step:after {content: ""; display: block;  border-left: 5px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; right: 16px !important; left: auto; top:7px !important; z-index: 2 }

.content div.flow_step > ul li:last-child {padding: 0}
.content div.flow_step > ul li:last-child:after, .content div.flow_step > ul li:last-child:before {display: none}

p.check {display: inline-block;}
p.check:before {content: ""; display: inline-block; width: 16px; height: 13px; background:url(../images/text_check.png) no-repeat; margin-right: 5px; margin-top: 4px; vertical-align: top}

span.exemple {margin-left: -15px; position: relative; padding-left: 62px; box-sizing: border-box; -webkit-box-sizing: border-box;  color:#ec000e }
span.exemple:before {content: "Exemple"; display: inline-block; padding: 1px 6px; border-radius: 15px 15px 0 15px; border: 1px solid #ec000e; background: #ec000e; color: #fff; margin-right: 5px; font-size: 11px; position: absolute; left: 0; bottom: 0}
span.exemple_text {display: block; padding: 10px; border: 1px solid #ec000e; margin-top: -10px;}

table.code, table.code2 {margin: 20px 0; width: auto; }
table.code tr td {padding: 5px 10px; color: #fff; background: #000; font-size: 14px;border-right: 1px solid #fff; height: 50px; width: 40px; box-sizing: border-box; -webkit-box-sizing: border-box }
table.code2 tr td {padding: 5px 10px; color: #333; background: #fff; font-size: 14px;border: 1px solid #fc9651; border-left: 0; height: 50px; width: 40px;  box-sizing: border-box; -webkit-box-sizing: border-box }
table.code2 tr td:first-child {border-left: 1px solid #fc9651}

.tipue_search_content_url {display: none;}

h3.search_title {    border-bottom: 1px solid #333; padding-bottom: 30px; margin-bottom: 20px;}
h3.search_title:before {content: ""; display: inline-block; padding-left: 2px; height: 15px; background: #358bff; margin-right: 10px}

span.table_img img {height: 35px;}