@import url("common.css");
/* CSS Document */
/* Web Standardization Abadon */
body{background:#f5f6f7;font-size:.75em;line-height:1.7em;font-family:Arial,Helvetica,sans-serif;color:#666}
#wrap{overflow:hidden;position:relative;min-width:300px;margin:0 auto;padding:0}

/* ************** header ************** */
#header{position:relative;width:100%;min-width:300px;margin-bottom:20px;border-bottom:3px solid #81c0d8;background:#1d2d3d}
#header .header_block{position:relative;max-width:980px;min-width:300px;height:51px;margin:0 auto;line-height:51px}
#header h1{position:absolute;top:12px;left:16px}

/* ************ container ************* */
#container{clear:both}
#content{width:60%; max-width:980px;min-width:300px; margin:0 auto; position:relative;}
#content.my_wns { width:100%; max-width:940px; padding:15px 0 25px;}

/* *************** gnb **************** */
#gnb{float:right;background:url(../img/bg_gnb.gif) repeat-y 100% 0}
#gnb li{display:inline;float:left}
#gnb a{display:block;padding:0 20px;background:url(../img/bg_gnb.gif) repeat-y 0 0;color:#8e9eae}
#gnb a:hover,#gnb a:active,#gnb a:focus,#gnb a.current{color:#fff !important}

/* ************** Common ************** */
.page_tit{margin-bottom:30px;font-size:200%;color:#657483;text-align:center}
.con_block{margin:0 auto;border-radius:3px;border:1px solid #d4d9dd;-moz-box-shadow:2px 2px 2px #eceeef;-webkit-box-shadow:2px 2px 2px #eceeef;box-shadow:2px 2px 2px #eceeef;padding:0 30px 20px; background:#fff;}
.con_tit{margin:0 -30px 20px;padding:6px 0;border-radius:3px 3px 0 0;border-bottom:1px solid #d4d9dd;background:#fff url(../img/bg_con_tit.gif) repeat-x 0 100%;font-size:150%;text-align:center}
.con_text{margin-bottom:30px;font-weight:bold;line-height:normal;color:#657483}
.con_text.bg_color{padding:5px 10px;background:#f2dede;font-weight:bold;color:#c14a48}
.con_etc{margin-top:80px}
.con_etc a{font-size:110%;color:#15c;text-decoration:underline}
.con_etc .btn_pack a{text-decoration:none !important}

/* page_btn */
.page_btn{clear:both;margin-top:35px}
.page_btn.account{margin:0;padding:6px 0;border-radius:3px;border:1px solid #d4d9dd;background:#fff url(../img/bg_btn_account.gif) repeat-x 0 100%;font-weight:bold;font-size:125%;color:#657483;text-align:center}
.page_btn.account a{display:block;color:#657483 !important}
.page_btn.account a:hover,.page_btn.account a:active,.page_btn.account a:focus{color:#15c !important}

/* set_account */
.set_account{display:inline-block;clear:both;width:100%;margin-bottom:10px;line-height:normal;vertical-align:top}
.set_account .tit,.category_tit{margin-bottom:5px;font-size:110%;font-weight:bold;color:#656565}
.set_account .con{}
.set_account .con input[type=text]{width:94%;height:35px;padding:0 3%;border-radius:3px;border:1px solid #d4d9dd;line-height:35px;font-weight:bold;color:#333}
.set_account .con input[type=password]{width:94%;height:32px;padding:0 3%;border-radius:3px;border:1px solid #d4d9dd;line-height:32px;font-weight:bold;color:#333}
.set_account .con input[type=number]{width:94%;height:32px;padding:0 3%;border-radius:3px;border:1px solid #d4d9dd;line-height:32px;font-weight:bold;color:#333}
.set_account .con input[type=email]{width:94%;height:35px;padding:0 3%;border-radius:3px;border:1px solid #d4d9dd;line-height:35px;font-weight:bold;color:#333}

input[readonly]{background:#e9e9e9 !important;color:#333 !important}
input[disabled]{background:#e9e9e9 !important;color:#333 !important}
.member_leave input[readonly]{background:#ffe !important;color:#333 !important}
.member_leave input[disabled]{background:#ffe !important;color:#333 !important}

/* set_account */
.set_account .fl{width:70%}
.set_account .fr{position:relative;width:28%}
.set_account .con_help{display:inline-block;width:15px;padding-top:10px;}

/* con_help_block */
.con_help_block{position:absolute;top:0;z-index:999;padding-bottom:7px;background:url(../img/bg_arrow.png) no-repeat 50% 100%;font-size:90%;color:#fff;text-align:center}
.con_help_block .block{padding:10px;background:#ea6757;text-align:center;}
.con_help_block .close_btn{margin:10px 0 0}
.con_help_block .close_btn img{width:11px}

/* sign_info */
.sign_info{clear:both;margin-top:10px}
.sign_info .fr{height:38px;line-height:38px}
.sign_info .fr a{color:#15c}
.sign_info .fr a:hover,.sign_info .fr a:active,.sign_info .fr a:focus{color:#15c !important;text-decoration:underline}

/* m_btn */
.m_btn_scroll{display:none}

/* media_block */
#media_block{display:none;position:absolute;top:52px;right:0;left:0;z-index:999;padding:5px 0 10px;border-bottom:3px solid #81C0D8;background:#282F39;font-size:90%;font-weight:bold}
#media_block .media_menu{}
#media_block .media_menu li{height:30px;border-bottom:1px solid #404954;line-height:30px;text-align:left}
#media_block .media_menu li a{display:block;padding:0 10px;color:#8E9EAE}
#media_block .media_sns{display:inline-block;clear:both;width:100%;margin:10px 0}
#media_block .media_sns li{display:inline;float:left;width:33.3333%;text-align:center}
#media_block .media_sns li a{display:block;color:#fff}
#media_block a:hover,#media_block a:active,#media_block a:focus,#media_block a.current{color:#fff !important}
#media_block.block{display:none}
#media_block p a{display:block;padding:25px 0 5px;line-height:normal;text-align:center}

/* tooltip */
.tooltip{z-index:9999;width:142px;padding:0 0 7px;background:url(../img/bg_arrow.png) no-repeat 50% 100%;font-size:95%;color:#363636}
.tooltip span{display:inline-block;width:100%;height:100%;padding:10px;background:#ea6757;color:#fff}

.tip_window{margin-left:-100px;padding-top:6px;background:url(../img/bg_arrow.png) no-repeat 50% 0;color:#fff;text-align:center}
.tip_window p{width:150px;padding:5px;background-color:#ea6757}

/* b_list */
table.respond{clear:both;width:100%}
.my_wns table.respond{border:1px solid #d4d9dd;}
table.respond th{padding:7px;border-radius:3px 3px 0 0;border:1px solid #d4d9dd;background:#fff url(../img/bg_table_th.gif) repeat-x 0 100%;font-weight:bold;text-align:center}
table.respond td{padding:7px;border-bottom:1px solid #d4d9dd;line-height:normal;text-align:center;word-break:break-all}

/* Responsive Data-List */
.webks-responsive-table dl{display:inline-block;width:100%;margin-bottom:10px;border-top:2px solid #00aeef;border-bottom:1px solid #d4d9dd}
.webks-responsive-table dl:nth-of-type(odd){background:#f1f1f1}
.webks-responsive-table dt,.webks-responsive-table dd{display:inline-block;/* instead use floats */float:left;width:60%;margin:0 0 1px;padding:5px 1%;border-top:1px solid #d4d9dd;word-break:break-all}
.webks-responsive-table dt{float:left;width:35%;border-top:1px solid #d4d9dd;font-weight:bold;text-align:left;vertical-align:top}

/* ************* btn_pack ************* */
.btn_pack{vertical-align:top}
.btn_pack *{cursor:pointer;_cursor:hand}
.btn_pack a{display:inline-block;width:auto;height:35px;padding:0 13px;border:1px solid #d5d5d5;border-radius:3px;background:#fcfcfc url(../img/btn_pack.png) repeat-x 0 -86px;line-height:35px;font-size:100%;font-weight:bold;color:#555 !important;text-align:center; white-space:nowrap;}
.btn_pack.d_yellow a{display:inline-block;width:auto;height:35px;padding:0 13px;border:1px solid #d2c49c;border-radius:3px;background:#ffefc3 url(../img/btn_pack.png) repeat-x 0 -128px;line-height:35px;font-size:100%;font-weight:bold;color:#ab3d3d !important;text-align:center}
.btn_pack.gray a{display:inline-block;width:auto;height:36px;padding:0 13px;border:1px solid #a0a0a0;border-radius:3px;background:#b9b9b9 url(../img/btn_pack.png) repeat-x 0 -43px;line-height:36px;font-size:140%;font-weight:bold;color:#fff !important;text-align:center}
.btn_pack.blue a{display:inline-block;width:auto;height:36px;padding:0 13px;border:1px solid #457bb2;border-radius:3px;background:#5191d1 url(../img/btn_pack.png) repeat-x 0 0;line-height:36px;font-size:140%;font-weight:bold;color:#fff !important;text-align:center}
.btn_pack.small a {display:inline-block;width:auto;height:28px;padding:0 13px;border:1px solid #ccc;border-radius:3px;line-height:28px;font-size:120%;font-weight:bold;color:#333 !important;text-align:center}

.btn_pack.small.icon a { padding-left:28px;}
.btn_pack.small.icon { height:28px; line-height:28px; display:inline-block;}
.btn_pack.small.icon span.plus { position:absolute; top:9px; left:10px; width:15px; height:14px; overflow:hidden; display:inline-block;}

/* pop_con
.pop_con { position:absolute; top:100px; left:50%; width:80%; padding:30px 25px 20px; margin-left:-46%; border:1px solid #d4d9dd;border-radius:3px; background:#fff; z-index:999; font-size:110%; color:#657483; line-height:normal; text-align:center; display:none;}
.pop_con .page_btn a { width:80px;} */

#pop_con { position:fixed; top:0; left:0; width:100%; height: 100%; display:none; z-index:9999;}
.pop_bg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.7; FILTER: alpha(opacity=70);  background:#000;}
.pop_box { position:absolute; top:110px; left:50%; margin-left:-20%; width:36%; padding:30px 25px 20px; text-align:center; line-height:normal; border:1px solid #d4d9dd;border-radius:3px; background:#fff;}
.pop_con { position:relative; width:100%; height:100%; display:inline-block;}

/* sortable */
.sortable_tit td {padding:7px;border-radius:3px 3px 0 0;border:1px solid #d4d9dd;background:#fff url(../img/bg_table_th.gif) repeat-x 0 100%;font-weight:bold;text-align:center}
.my_wns .scroll_left ,
.my_wns .scroll_right { display:none;}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { clear:both; margin:0; padding:0; border-bottom:1px solid #d4d9dd; display:inline-block; width:100%; cursor:pointer; vertical-align:top;}
#sortable li div { float:left; display:inline; text-align:center; padding:7px 0; position:relative;word-break:break-all; line-height:normal;}
#sortable li div a { margin:0 2px;}
#sortable li em { display:none;}

.ui-state-highlight { height:15px; line-height:15px; background:#00aeef;}

#sortable  .tit_no { width:7%;}
#sortable  .tit_domain { width:29%; text-align:left; padding-left:1%;}
#sortable  .tit_des { width:23%; text-align:left; padding-left:1%;}
#sortable  .tit_edit { width:12%; font-size:95%;}
*+ html #sortable  .tit_edit { margin-left:-2px;}
#sortable  .tit_status { width:7%;}
#sortable  .tit_update { width:13%;}
#sortable  .tit_position { width:7%;}

/* ************* sign_in ************** */
.txt_etc {clear:both;margin-top:10px;padding:8px;background:url(../img/bg_line.gif) repeat-x 0 0;color:#999;text-align:left}

/* ************* settings ************* */
.settings .block{clear:both;margin-top:10px;padding:8px 0;background:url(../img/bg_line.gif) repeat-x 0 0}

/* *********** member_leave *********** */
.warning{clear:both; border-radius:3px;margin:20px 0;padding:15px;border:1px solid #dbcaca;background:#f2dede;color:#c14a48}
.warning h3{margin-bottom:15px;padding-left:25px;background:url(../img/bg_warning.png) no-repeat 0 50%;font-weight:bold;font-size:120%;line-height:normal}
.warning p{line-height:normal}

/* ************** my_wns ************** */
.my_wns .con_block  { width:96%;}

/*.my_wns .con_block { width:50%; min-width:920px; background:#e9e9e9; padding:15px 15px 25px;}*/

/* con_header */
.my_wns .con_header{ width:100%; margin:0 auto 10px; padding:0;}
.my_wns .con_header .page_tit { margin-bottom:0; text-align:left;}

.my_wns .con_header .con_top { clear:both; display:inline-block; width:100%; vertical-align:top; text-align:center; position:relative; margin:0 0 15px;}
.my_wns .con_header .con_top .info {}
.my_wns .con_header .con_top .fl { width:auto; text-align:left;}
.my_wns .con_header .con_top .fr { position:relative; width:220px; height:28px; line-height:28px; text-align:left; border-radius:3px; border:1px solid #ccc; background:#fff;}
.my_wns .con_header .con_top .fr input[type=text] {width:83%;height:28px; line-height:28px;padding:0 15% 0 2%;border:0 none;font-weight:bold;color:#333;}
.my_wns .con_header .con_top .fr input[type=image] { position:absolute; top:6px; right:10px;}

.my_wns .con_header .con_btm { clear:both; display:inline-block; width:100%; vertical-align:top; text-align:center; position:relative; height:30px; line-height:30px;}
.my_wns .con_header .con_btm .fl { width:auto;text-align:left;}
.my_wns .con_header .con_btm .fl .page_btn { margin-top:0;}
/*.my_wns .con_header .con_btm .fr { width:240px; text-align:right;}*/
.my_wns .con_header .con_btm .fr { width:auto; text-align:right; padding-top:8px;}
.my_wns .con_header .con_btm .fr ul {}
/*.my_wns .con_header .con_btm .fr li { float:left; display:inline; width:120px; font-size:95%; color:#666; height:16px; line-height:16px; vertical-align:text-bottom; text-align:left;}*/
.my_wns .con_header .con_btm .fr li { float:left; display:inline; width:auto; margin-left:10px; font-size:95%; color:#666; height:16px; line-height:16px; vertical-align:text-bottom; text-align:left;}
.my_wns .con_header .con_btm .fr li span { margin-right:3px; position:relative; top:2px;}
.my_wns .con_header .con_btm .fr li span img { width:11px; height:11px;}

/* con_btm */
.my_wns .con_footer { clear:both; display:inline-block; width:100%; vertical-align:top; text-align:center; position:relative; height:40px; line-height:40px; margin:15px 0 0;}
.my_wns .con_footer .info {}
.my_wns .con_footer .info a { font-size:200%; font-weight:bold; color:#a1acb7 !important; background:url(../img/bg_arrow_d.png) no-repeat 100% 60%; padding-right:17px; display:inline-block;}
.my_wns .con_footer .fl { width:150px; position:absolute; top:0; left:0; text-align:left;}
.my_wns .con_footer .fr { width:80px; position:absolute; top:0; right:0; text-align:right;}
.my_wns .con_footer .fr .page_btn { margin-top:0;}
.my_wns .con_footer .fr .page_btn a { color:#656565 !important;}

/* ************ language ************* */
.con_language { margin-bottom:10px; text-align:right;}
.con_language a { font-size:95%; font-weight:bold; padding:0 7px 0 5px; display:inline-block; background:url(../img/icon_between.gif) no-repeat 0 50%;background-size:2px auto}

/* ************** footer ************** */
#footer{clear:both;margin:30px 0 0;font-size:90%;color:#999;text-align:center}

/* ************** media *************** */
@media all and (max-width: 979px){
	.set_account .fl{width:60%}
	.set_account .fr{position:relative;width:38%}
	#content{width:97%;}
	#content.my_wns { width:98%; margin:0 auto; min-width:inherit;}
	.my_wns .sort_box { background:#F5F6F7 width:100%; position:relative;}
	.my_wns .scroll_left { display:block; position:absolute; top:30%; left:0; width:37px; height:32px; display:inline-block; background:url(../img/bg_scroll.gif) no-repeat 0 0;}
	.my_wns .scroll_right { display:block; position:absolute; top:30%; right:0; width:37px; height:32px; display:inline-block; background:url(../img/bg_scroll.gif) no-repeat 0 0;}
	.my_wns .sort { width:90%; margin:0 auto; background:#fff;}	
	.my_wns .con_block { width:92%;}	
	.pop_box { width:80%; margin-left:-42%;}
}

@media all and (max-width: 699px){
	.my_wns .sort { width:80%;}
	.sortable_tit { display:none !important;}
	#sortable {}
	#sortable li { margin-bottom:10px; border-top:2px solid #00aeef;}
	#sortable li div { float:none; display:block; width:auto !important; text-align:left; padding:3px 0 3px 100px; border-bottom:1px dotted #D4D9DD;}
	#sortable li div em { display:block; position:absolute; top:0; left:0; width:100px; padding:3px 0;}
	#sortable  .tit_domain,
	#sortable  .tit_des  {  padding:3px 0 3px 100px;}
	.my_wns .scroll_left { left:3px;}
	.my_wns .scroll_right { right:3px;}

	.con_language { text-align:center;}
	#sortable li div a { margin:0 15px 0 0;}
}

@media all and (min-width: 641px){
	#media_block{display:none !important}
}

@media all and (max-width: 640px){
	#header h1{position:absolute;top:12px;left:50%;margin-left:-61px}
	#gnb{display:none}
	.con_block{padding:0 10px 20px}
	.con_tit{margin:0 -10px 20px}
	.page_tit{margin-bottom:15px;font-size:160%}
	.m_btn_scroll{display:block;position:absolute;top:17px;right:20px}
	#sortable li:nth-of-type(odd){background:#f1f1f1}
}

@media all and (max-width: 480px){
	.sign_info .fl,.sign_info .fr{display:block;float:none;width:100%;text-align:center}
	.pop_con { width:75%;}
	.my_wns .con_block { width:88%;}
	
	#sortable  .tit_des { display:none;}
	#sortable  .tit_update  { display:none;}
	#sortable  .tit_position  { display:none;}
	.pop_box { width:80%; margin-left:-46%;}
	.my_wns .scroll_left { left:0;}
	.my_wns .scroll_right { right:0;}
	
	.my_wns .con_header .con_btm .fl .page_btn { text-align:center;}
	.my_wns .con_header .con_btm .fl .page_btn .btn_pack { position:relative;}
	.my_wns .con_header .con_btm .fr { text-align:center;}
	.my_wns .con_header .con_btm .fr li { float:none; display:inline-block; *display:inline; zoom:1;}
	/*
	.my_wns .con_header .con_btm .fl .page_btn .btn_pack.small.icon span.plus { top:1px;}
	*+ html .my_wns .con_header .con_btm .fl .page_btn .btn_pack.small.icon span.plus { top:9px;}
	*/
	.my_wns .con_header .con_btm {  height:auto; line-height:normal;}
	.my_wns .con_header .con_btm .fl,
	.my_wns .con_header .con_btm .fr { float:none; width:100%; display:inline-block;}
}

@media all and  (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)  and (-webkit-min-device-pixel-ratio: 2){
	.my_wns .con_header .con_btm .fl .page_btn .btn_pack.small.icon span.plus { top:9px;}
}
@media all and (max-width: 400px){
	.set_account .fl{width:50%}
	.set_account .fr{width:49%}
	
	.my_wns .con_header .con_top .fl,
	.my_wns .con_header .con_top .fr { float:none; display:block; width:99%;}
	.my_wns .con_header .con_top .fl { margin-bottom:8px;}
	/*.my_wns .con_header .con_top .fr { width:99%;}
	.my_wns .con_header .con_btm .fr { width:210px;}
	.my_wns .con_header .con_btm .fr li { width:105px;}*/
	.pop_box { width:75%; margin-left:-46%;}
}