@charset "utf-8";
@import url("reset.css");
@import url("default.css");

/* login */
.login{position:relative; top:17px; width:370px; margin:0 auto;}
.login_tit{font-size:26px; color:#555; letter-spacing: -0.05em; text-align:center; margin-top:90px; margin-bottom:34px}
.logo{display:inline-block; background:url(../../images/com/login_logo.png) no-repeat; vertical-align:bottom; width:144px; height:60px; margin-right:15px; text-indent:-5000px; overflow:hidden;}
.header_tit sub{display:inline-block; background:url(../../images/com/logo_lab_w.png) 0 -2px no-repeat; width:42px; height:42px; vertical-align:middle; overflow:hidden;}

.login_set{padding:0 0 6px 0}
.login table tr th{width:150px; text-align:left}
.login table tr td{width:256px}
.login table tr td input{width:230px}
.login_link{width:100%; font-size:13px; text-align:center; color:#ccc; margin-top:30px;}
.login_link a{color:#777; text-decoration:none; margin:0 15px}
.login_link a:hover{color:#333}
.login>.btn_close{position:absolute; top:-60px; right:-70px}
.btn_close{display:block; background:url(../../images/com/btn_close.png) right 0 no-repeat; width:30px; height:30px}

.join{position:relative; top:30px; width:640px; min-height: 600px; margin:0 auto; margin-bottom:120px;}
.join_tit{font-size:26px; color:#555; text-align:center; margin-top:80px; margin-bottom:40px}
.join_set {padding:0 0 15px 0}
.join_set table tr th{position: relative; width:110px;}
.join_set table tr th sub{position: absolute; top:30px; left: 0; font-size: 11px;}
.join_set table tr td{position: relative; width:476px}
.join_set table tr td input{width:362px; margin-right:10px}
.join_set .btn_s{width: 104px; font-size: 12px;}
.placeholder_btn{position: absolute; left:330px; top:9px;}
.btn_en{position: relative; display: inline-block; width: 38px; height: 17px; font-size: 11px; font-weight: bold; color: #fff; line-height: 1.45em; text-align: center; background-color:darkgrey;border-radius: 20px; vertical-align: top; cursor:default; margin:2px 0 0 3px}
.btn_en span.textBox{position: absolute; right:0; bottom: 20px; width: 320px;font-size: 11px; font-weight: normal; text-align: left; background-color: #555; border:1px solid #eee; border-radius: 4px; color: #fff; padding:5px 10px; word-break: keep-all; opacity: 0.75;}
.mypage{padding:15px 0 36px 0; overflow:hidden;}
.mypage dl dt{float:left; width:267px; height:160px}
.mypage dl dd{float:left; width:auto;}
.mypage table{min-width:600px;}
.mypage table tr th{width:110px}
.mypage table tr td{width:470px}
.mypage table tr td input{width:340px; margin-right:10px}

/* header */
.header{position:fixed; width:100%; height:82px; background:#262626; /*border-bottom:1px solid #494949;*/ z-index:99999}
.header .inner{position:relative; display: inherit; width: 1200px; background-color: bisque}
.header_tit{position:absolute; left:0; top:22px; font-size:22px; letter-spacing:0.075em; color:#888; width:180px; height:38px}
.header_tit>.logo{background: url(../../images/com/logo2_w.png) no-repeat; background-size:auto 40px; width:96px; height:40px; vertical-align:middle; margin-right:25px}


.snb_area{position: absolute; left:990px; top:0; display: flex; flex-direction: row; flex-wrap: nowrap; height:82px;}

.snb{position:relative; top:24px;}
	.btn_login a{display:block; font-size: 13px; font-weight:600; color:#ff9000; letter-spacing: 0; line-height:2.3em; text-decoration:none; height:30px; border:1px solid #ff9000; border-radius:32px; padding:0 20px; margin-top:3px}
	.btn_login a:hover{color:#fff; background:#ff9000}

.snb1{display: flex; flex-direction: column; justify-content: center; max-width: 75px; text-align: right; padding: 14px 0 10px 0; font-family:-apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim;}
.snb1 span.profile_id{font-size: 11px; font-weight: bold; color: #fff; letter-spacing: -0.05em; line-height: 1.15em;
	display: -webkit-box;
	-webkit-line-clamp: 3;	
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	text-overflow: ellipsis;
	overflow: hidden;}
.snb1 span.profile_ticket{display: flex; flex-direction: row; justify-content: flex-end; margin-top: 5px}
span.profile_ticket span.ticket_box{display: inline-block;font-size: 11px; font-weight: normal; color: #eee; line-height: 1.35em; background-color: #5a5a5a; height:15px; border-radius: 15px; padding:0 6px 0 7px}
.profile_ticket span.text_org{padding-right: 4px}

.profile_img_box{position: relative; display: table-cell; width: 40px; height: 32px;}
.profile_img_box span.profile_img{display: block; width: 32px; height: 32px; border-radius: 32px; overflow: hidden}
.profile_img_box span.profile_img img{width:100%; height: auto; }
.profile_img_box span.profile_icon{position: absolute; bottom:0; right:0}

.snb2{position:relative; cursor: pointer}
.snb2 span.profile_img{display: block; width: 32px; height: 32px; border-radius: 32px; margin:25px 0 0 6px; overflow: hidden}
.snb2 span.profile_img img{width:100%; height: auto; }
.snb2 span.profile_icon{position: absolute; top:41px; right:-8px}
	.icon_admin{display: block; width:18px; height:18px; background:url(../../images/com/ranking_0.png) no-repeat; background-size: 18px auto}
	.icon_r1{display: block; width:18px; height:18px; background:url(../../images/com/ranking_1.png) no-repeat; background-size: 18px auto}
	.icon_r2{display: block; width:18px; height:18px; background:url(../../images/com/ranking_2.png) no-repeat; background-size: 18px auto}
	.icon_r3{display: block; width:18px; height:18px; background:url(../../images/com/ranking_3.png) no-repeat; background-size: 18px auto}
	.icon_r4{display: block; width:18px; height:18px; background:url(../../images/com/ranking_4.png) no-repeat; background-size: 18px auto}

.snb2_menu{position:absolute; right:-5px; top:71px; width:138px; height:auto; border:1px solid #aaa; border-radius:6px; background:#fff; z-index:900}
.snb2_menu span.snb_menu_img{position:absolute; top:-9px; right:11px; background:url(../../images/com/snb_menu_img.png) no-repeat; width:15px; height:12px; z-index:910}
.snb2_menu ul{padding:0 4px 4px 4px;}
.snb2_menu ul li{font-size:12px; line-height:2.5em; text-align:center; width:100%; height:30px; margin-top:4px;}
.snb2_menu ul li a{display:inherit; color:#797979}
.snb2_menu ul li a:hover{color:#333; background:#eff5f8; border-radius:4px}

.snb3{position: relative; display: inherit; }
.profile_alarm{position: relative; width: 30px; height: 30px; background: url(../../images/com/alarm.png) center no-repeat; background-size: 18px auto; margin-top:26px; margin-left:9px; cursor: pointer}
.profile_alarm span.icon_on{position:absolute; right:0; top:0; width:9px; height:9px; background-color: red; border-radius: 9px; border:1px solid #000; box-sizing: border-box;}

.snb3_menu{position:absolute; right:-5px; top:71px; width:275px; height:auto; border:1px solid #aaa; border-radius:6px; background:#fff; z-index:900}
.snb3_menu span.snb_menu_img{position:absolute; top:-9px; right:11px; background:url(../../images/com/snb_menu_img.png) no-repeat; width:15px; height:12px; z-index:910}
.snb3_menu span.title_bar{display:block; font-size:14px; font-weight:600; color:#333; border-bottom:1px solid #ddd; padding:4px 0 8px 0; margin:10px 12px 0 12px}
.snb3_menu span.title_bar sub{float:right; font-size:12px; line-height:2.3em; font-weight:normal; color:#888;}
.snb3_menu span.title_s{display:block;  font-size:12px; font-weight:600; padding:10px 12px 3px 12px; color:#666}
.snb3_menu ul{}
.snb3_menu ul li{position:relative; padding:6px 12px 6px 12px}
.snb3_menu ul li span.subject_group{display:block; width:230px; height:14px; margin-bottom:6px}
.snb3_menu ul li span.subject{display:inline-block; max-width:180px; font-size:13px; color:#666; overflow:hidden; text-overflow:ellipsis;white-space:nowrap; margin-right:6px}
.snb3_menu ul li span.subject_date{font-size:11px; color:#999; letter-spacing:-0.03em}
.snb3_menu ul li span.reply_num{display:inline-block; font-size:12px; font-weight:600; color:#f77a20; vertical-align:top}
.snb3_menu ul li span.btn_del{position:absolute; right:10px; top:1px; font-size:20px; display:block; width:20px; height:20px; text-align:center; color:#cdcdcd}
.snb3_menu span.btn{display:block; font-size:12px; font-weight:600; padding:5px 12px 20px 12px; color:#666}
.snb3_menu ul li:hover{background:#f2f2f2}
.snb3_menu span.text{display:block; font-size:13px;color:#888; text-align:center;padding:30px 0 0 0; min-height:200px}
.scroll{max-height:530px; overflow-y:auto}

.snb_lang{position: absolute; right:-16px; top:33px;}
.snb_lang a{font-size: 11px; font-weight: bold; color:#666; padding:0 6px}
.snb_lang a:nth-child(1){padding-right: 10px;border-right:1px solid #555}
.snb_lang a.on{color: #ff9900}

.sub_top{width:100%; height:230px; text-align:center}
.sub_c1{background:#ff7e45}/* api 소개 */
.sub_c2{background:#389beb}/* 개발가이드 */
.sub_c3{background:#588cee}/* 애플리케이션  557ef2*/
.sub_c4{background:#ffb140}/* 커뮤니티 f8ad00*/
.sub_c5{background:#abcd7d}/*구매문의*/
.sub_c7{background:#ff7f13}/*서포트*/
.sub_top_tit{display:block; font-size:40px; color:#fff; padding-top:52px}
.sub_top_text{font-size:15px; font-weight:normal; padding-top:9px}

/* sub_content */
.content{/*overflow:hidden*/}
/* sub_left */
.sub_content{position:relative; top:0; left:0; clear:both; padding-top:82px}
.sub_left{float:left; width:240px; margin-left:0px; padding-top:62px}
.left_nav{width:240px}
.left_nav dt{font-size:20px; font-weight:600; line-height:48px; letter-spacing: -0.0175em; color:#000; text-indent:2px; border-bottom:2px solid #000; margin-bottom:12px}
.left_nav dd{font-size:16px; padding:12px 0 4px 0}
.left_nav dd a{display:inherit; text-decoration:none; color:#666;}
.left_nav dd a:hover{color:#f58a42}
.left_nav dd.on a,.left_nav dd.on a:hover{font-weight:600; color:#f58a42}

.left_nav dd.submenu{line-height:46px; background:url(../../images/com/nav_icon_down.png) 220px 16px no-repeat; border-bottom:1px solid #e9e9e9; padding:0 0 0 0}
.left_nav dd.submenu ul{display:none; font-size:14px; letter-spacing:-0.025em; padding-bottom:20px}
.left_nav dd.submenu li a{font-size: 13px; font-weight:normal; line-height:20px; color:#777; padding: 5px 0 5px 0}
.left_nav dd.submenu li a:hover{color:#f58a42}
.left_nav dd.submenu li.on a,.left_nav dd.submenu li.on a:hover{color:#f58a42; font-weight:bold}

.left_nav dd.on1{background:url(../../images/com/nav_icon_up.png) 220px 16px no-repeat;}
.left_nav dd.on1 a{font-weight:600; color:#000;}
.left_nav dd.on1 ul{display:block; /*max-height: 330px; overflow-y: auto*/}

.left_nav dd.on2{background:url(../../images/com/nav_icon_up.png) 220px 16px no-repeat;}
.left_nav dd.on2 a{font-weight:600; color:#000;}
.left_nav dd.on2 ul{display:block; /*max-height: 330px; overflow-y: auto*/}

.release_list{}
.release_list ul.list_menu li{display: block; font-size:15px; color:#666; padding:6px 0 6px 20px}
.release_list ul.list_menu li.sustain:last-child{border-bottom: 0}
.release_list ul.list_menu li a{color:#666}
.release_list ul.list_menu li.on a,.release_list ul.list_menu li.on a:hover{font-weight: bold; color:#333}
.release_list ul.list_menu li.release{background: url(../../images/com/nav_icon_release.png) 8px 16px no-repeat; border-bottom: 1px solid #f8ad2e}
.release_list ul.list_menu li.sustain{background: url(../../images/com/nav_icon_sustain.png) 8px 16px no-repeat; border-bottom: 1px solid #e9e9e9}
.release_list ul.list_menu li.frozen{background: url(../../images/com/nav_icon_frozen.png) 8px 16px no-repeat}
.release_list ul.list_menu li sub.icon_new{display: inline-block; width:32px; height:18px; background: url(../../images/com/nav_icon_new.png) no-repeat; margin-left:10px; vertical-align: text-top}
.release_list ul.list_menu li ul.list_sub{display: none}
.release_list ul.list_menu li.on ul.list_sub{display: block; max-height: 320px; margin-top:5px; overflow: auto; background-color: aliceblue;}
.release_list ul.list_menu li ul.list_sub li{font-size: 13px; padding:0 0 0 0}
.release_list ul.list_menu li ul.list_sub li a{font-weight: normal; color: #666; padding: 3px 0 6px 8px}
.release_list ul.list_menu li.on ul.list_sub li a:hover{font-weight: normal; color: #f58a42}
.release_list ul.list_menu li.on ul.list_sub li.on a{font-weight: bold; color: #f58a42}

.submenu ul.list_sub{background-color: #f7f7f7; padding:5px 10px; border-radius: 5px; max-height: 320px; margin-top:5px; overflow: auto;}
.submenu ul.list_sub li{font-size: 13px; padding:0 0 0 0}
.submenu li.on ul.list_sub li a{font-weight: normal; color: #666; padding: 3px 0 6px 8px}
.submenu li.on ul.list_sub li a:hover{font-weight: normal; color: #f58a42}
.submenu li.on ul.list_sub li.on a{font-weight: bold; color: #f58a42}

.ver_r{background: #faac30}
.ver_s{background: #d1c1aa}
.ver_f{background: #d9d9d9}

.ver_r,
.ver_s,
.ver_f{display: inline-block; height: 18px; font-size:10px; color: #fff; letter-spacing: 0em; line-height: 18px; vertical-align: middle; margin-left:10px; padding:0 6px; border-radius: 2px}

/* sub_right */
.sub_right{float:right; width:888px;}
.right_con{position:relative; padding-bottom:200px;}

/* right_con */
.right_con h2{font-size:22px; font-weight:300; line-height:48px; color:#000; border-bottom:2px solid #000; margin-bottom:15px;padding-top:62px}
.right_con h2 sub{display:inline-block; font-size:11px; color:#ccc; margin:0 15px; vertical-align:middle; }
.right_con h2 span.stext{font-size:12px; color:#888; vertical-align: top}
.right_con h2 span.stext1{font-size:13px; font-weight: 400; color:#666; vertical-align: top}
.right_con h2>.lv_basic,.right_con h2>.lv_standard,h2>.lv_standardT,.right_con h2>.lv_premium,.right_con h2>.lv_flex{
	height:22px; font-size:12px; line-height:1.8em; color:#fff; text-align:center;
	border-radius:22px; padding:0 15px; margin:0 0 4px 12px; vertical-align:middle}
.right_con h3{font-size:17px; color:#000; padding-bottom:16px; padding-top:10px;}
.right_con h4{font-size:15px; color:#000; padding-bottom:16px; padding-top:10px;}
.right_con p{line-height:1.75em}
	.code_box{display:block; min-height:140px; background:#0d3952; color:#fff; padding:10px 20px;margin-bottom:15px}
	.map_box{display:block; height:320px; background:#CCC;margin-bottom:15px}
	
.code_tabmenu{}
.code_tabmenu ul{display: flex; background-color:#2f3640; padding:15px; border-bottom: 1px solid #81858c;}
.code_tabmenu ul li{flex-basis: 70px; text-align: center; align-self: center; padding:8px 10px; color:#fff; font-size:13px; letter-spacing: 0em; line-height: 1em; white-space: nowrap; background-color: #81858c; border-radius: 3px; margin-left: 10px; cursor: pointer;}
.code_tabmenu ul li:first-child{margin-left: 0;}
.code_tabmenu ul li.on{background-color: #ff8200; color: #fff; font-weight: bold;}

.prettyprint{padding:20px 15px; background-color:#2f3640; }

/* tab */
.tab_style{position:absolute; top:70px; right:-128px; width:102px}
.tab_style ul{position:fixed; width: 102px}
.tab_style ul li{display:block; width:102px; height: 102px; margin-bottom: 9px; text-indent: -5000px; overflow: hidden}
.tab_style ul li a{display: inherit; height: 100%}
.tab_style ul li.menu_web{background: url(../../images/guide/menu_web.png) no-repeat}
.tab_style ul li.menu_android{background: url(../../images/guide/menu_android.png) no-repeat}
.tab_style ul li.menu_ios{background: url(../../images/guide/menu_ios.png) no-repeat}

.tab_style ul li.menu_web.on{background: url(../../images/guide/menu_web_on.png) no-repeat}
.tab_style ul li.menu_android.on{background: url(../../images/guide/menu_android_on.png) no-repeat}
.tab_style ul li.menu_ios.on{background: url(../../images/guide/menu_ios_on.png) no-repeat}

.tab_area{margin-top:-20px; margin-bottom:20px}
ul.tab_style1{display: flex; width:100%; border-bottom:1px solid #999; overflow: hidden}
ul.tab_style1 li{flex: 1; font-size:15px; line-height:3.4em;  text-align:center; height:48px}
ul.tab_style1 li a{display:inherit; color:#555}
ul.tab_style1 li.on a{font-weight:600; height:48px; line-height: 2.8em; color:#fff; background-color: #888; margin-top: 5px}

ul.tab_menu{display: flex; flex-direction: row; flex-wrap: nowrap; /*background-color: #fcfcfc;*/ border-bottom: 1px solid #E1E3E6}
ul.tab_menu li{flex-basis: 20%; text-align: center; height: 41px}
ul.tab_menu li a{display: inline-block; font-size: 14px; color: #666; line-height: 2.4em; box-sizing: border-box;  margin-top:5px}
ul.tab_menu li.on a{display: inherit; color: #333; font-weight: bold; border-radius: 24px;height: 32px;background-color: #efefef}

.tab_style2{}
.tab_style2 ul{display:inline-block; width:100%; height:38px; background:#f5f6f8; border-bottom:1px solid #ddd }
.tab_style2 ul li{display:block; float:left; font-size:13px; text-align:center; line-height:2.9em; min-width:140px; height:38px; padding:0 15px }
.tab_style2 ul li.on.first{border-left:none;}
.tab_style2 ul li.on{font-weight:600; height:38px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #fff; background:#fff}
.tab_style2 ul li a{display:inherit; color:#888}
.tab_style2 ul li.on a{color:#000}

/* 애플리케이션 등록 */
table.col{width:100%; border-collapse:collapse; border:0; text-align: left }
table.col th{font-size:14px; letter-spacing: -0.01em; width:150px; color: #333; text-align: left; vertical-align: baseline; padding:10px 20px 0 0;}
table.col th.sth1{vertical-align: middle; padding:0 20px 0 0;}
table.col th.t_right{text-align: right}
table.col th.t_top{vertical-align:top}
.t_top{vertical-align:top}
table.col td{position: relative; font-size: 14px; padding:10px 0; min-width: 274px; /*height: 40px;*/  word-break: break-all; vertical-align:baseline;}
table.col td.ms{min-width: 195px; width: 217px;}
table.col td.ms input{width:195px}
table.col tr.bar{border-bottom: 1px solid #E1E3E6}
.bar{border-bottom: 1px solid #999}
table.col input.lg{width:716px}

table.col_line tr{border-bottom: 1px solid #ddd}

.check_area{margin:10px 0}
.check_area span{display: block; padding-bottom: 6px}

.row_box{border-top:1px solid #999; border-bottom: 1px solid #999}
table.row{width:100%; border-collapse:collapse; border:0; text-align: center;  }
table.row thead{border-bottom: 1px solid #E1E3E6}
table.row thead.pd_s th{padding:10px 2px; }
table.row th{font-size:13px; height: 20px; letter-spacing: -0.01em; color: #333; vertical-align: middle; padding:10px}
table.row tfoot{border-top:1px solid #999; font-weight: bold; color: #000}
.card thead.pd_s th{padding:0; min-width: 60px; white-space: nowrap }
.card thead.pd_s tr td:last-child{padding-right: 0;}

table.row td{font-size: 13px; letter-spacing: -0.03em; vertical-align: middle; padding:10px ; width: auto; min-width: inherit; height: 20px}
td input.cal_input{width:95px; height: 32px}
td input.month_input{width:32px; height: 32px; text-align: center; margin-right: 6px}
td input.num_input{width:42px; height: 32px; text-align: center; margin-right: 6px}

.info_layer{/*position: absolute; top:0; left:0;*/ display: block; font-size:12px; padding:10px 0 0}
.table_info{position: relative; display:block; /*border-top: 1px solid #E1E3E6*/}
.table_info dl{display: flex; flex-direction: row; flex-wrap: nowrap; background-color: #fafafa; font-size: 12px; color: #555; padding:15px}
.table_info dl dt{flex-basis: 30px}
.table_info dl dd{flex-grow: 1; letter-spacing: 0em;}
.table_info span.tit{display: block; font-size: 13px; font-weight: bold; padding-bottom: 5px}
.stext{display: inline-block; font-size: 12px; color: #555; padding-left:10px}
.bl_stext{display: block; font-size: 12px; padding:5px 0;}

table.board{width:100%; border-collapse:collapse; text-align: center; border-top:1px solid #999; border-bottom: 1px solid #999 }
table.board_l{width: 672px;}
table.board th{font-size: 13px; width:auto; height: 20px; color: #333; vertical-align: middle; padding:10px; border-bottom: 1px solid #E1E3E6; background: #f9f9f9}
table.board th.t_top{vertical-align: top; padding-top:20px}
table.board td{font-size: 13px; vertical-align: middle; padding:10px ; width: auto; height: 20px; border-bottom: 1px solid #E1E3E6}
table.board td.td_check{font-size: 13px; text-align: left; vertical-align: middle; padding:10px 10px 10px 20px; width: auto; height: 20px; border-bottom: 1px solid #E1E3E6}
table.board tr{border-bottom: 1px solid #E1E3E6}
table.board tbody.ho tr:hover{background-color: #f4f4f4}
table.board tbody.ho tr{cursor: pointer}
table.board tbody.std th{font-size: 12px; text-align: left; vertical-align: middle; letter-spacing: -0.03em; width: auto; height: 20px; border-bottom: 1px solid #E1E3E6; background-color: #fff; padding:10px 3px}
table.board tbody.std td{font-size: 12px; text-align: left; vertical-align: middle; /*padding:10px;*/ letter-spacing: -0.03em; width: auto; height: 20px; border-bottom: 1px solid #E1E3E6; padding:10px 3px;}
table.board tbody.std label{font-size: 12px; font-weight: bold; padding-left:25px}

table.board tbody.std td input[type="text"]{width: 36px; height: 24px; font-size:12px; font-weight: bold; color: #333; text-align: center; padding: 0 3px; margin:0}
table.board tfoot td{font-weight: 500; color: #333; background: #f9f9f9}

input.inactive[type="text"],select.inactive{background-color: #ddd; cursor: default}
input[type=radio].inactive +label, input[type=radio].inactive{background:url(../../images/com/img_radio_inactive.png) 0 0 scroll no-repeat; cursor: default; /*color: #aaa*/}
input[type=radio]:checked.inactive + label, input[type=radio]:checked.inactive{background:url(../../images/com/img_radio_inactive.png) 0 -22px scroll no-repeat; cursor: default;}
table.board tbody.std td sub{font-size: 11px; padding-left:5px}

table.board tr.off{display: none}
table.board tr.on td{font-weight: bold; color: #000}

table.table_inner{}
table.table_inner th,
table.table_inner td{min-width: auto; text-align: center;}

ul.pay_info{display: block; text-align: left; background-color: #F6F6F6; cursor: default; margin: -10px}
ul.pay_info li{display: block; font-size: 12px; color: #555; border-top:1px solid #E1E3E6; padding-left:98px; clear: both; overflow: hidden}
ul.pay_info li:first-child{border-top:0}
ul.pay_info li dl dt{float: left; width: 110px; height: 100%; font-weight: bold; padding:10px 0 0 20px;}
ul.pay_info li dl{display: flex; flex-direction: row; align-content: stretch}
ul.pay_info li dl dd.d1{width: 220px; padding-right: 20px; border-right:1px solid #E1E3E6}
ul.pay_info li dl dd.d2{width: 271px;}
ul.pay_info li dl dd.d3{width: 658px;}
ul.pay_info li dl dd.d4{width: 245px; padding-left:20px; }
ul.pay_info li dl dd{float: left; font-weight: normal; padding:10px 0 4px}
ul.pay_info li dl dd span.t1{display: block; margin-bottom: 6px}
ul.pay_info li dl dd span.t2{float: right; display: inline-block; text-align: right}
ul.pay_info li dl dd a{text-decoration: underline; color: #2a9ff6}


.table_style1{}
.table_style1 table{width:888px; border-collapse:collapse; border:0; }
.table_style1 table th{font-size:15px; letter-spacing: -0.01em; text-align:left; width:150px; height:33px; color: #333; vertical-align: top; padding:19px 20px 10px 0}
/*.table_style1 table th.t_right{text-align:right}*/
.table_style1 table td{font-size: 14px; vertical-align: top; padding:10px 0; min-width: 274px}
.table_style1 table td.text{}

.table_style1 dt{float:left; width:150px;}
.table_style1 dd{float:left;}


.tbl{border-left: 1px solid #E1E3E6}
.tbr{border-right: 1px solid #E1E3E6}
.tbb{border-bottom: 1px solid #E1E3E6}


.lv_basic{display:inline-block; height:30px; background:#aaa; font-size:15px; font-weight:600; line-height:1.9em; color:#fff; text-align:center; border-radius:30px; padding:0 24px; margin-top:3px}/* 레벨 */
.lv_standardT{display:inline-block; height:30px; background:#6ab9f2; font-size:15px; font-weight:600; line-height:1.9em; color:#fff; text-align:center; border-radius:30px;padding:0 24px; margin-top:3px}
.lv_standard{display:inline-block; height:30px; background:#76c96f; font-size:15px; font-weight:600; line-height:1.9em; color:#fff; text-align:center; border-radius:30px;padding:0 24px; margin-top:3px}
.lv_premium{display:inline-block; height:30px; background:#ff7944; font-size:15px; font-weight:600; line-height:1.9em; color:#fff; text-align:center; border-radius:30px;padding:0 24px; margin-top:3px}
.lv_flex{display:inline-block; height:30px; background:#6657c5; font-size:15px; font-weight:600; line-height:1.9em; color:#fff; text-align:center; border-radius:30px;padding:0 24px; margin-top:3px}

label span.lv_standard{width:auto; height:30px; background:#76c96f; font-size:13px; font-weight:600; line-height:2.1em; vertical-align: top; padding:0 12px; margin:-6px 0 0 -5px}
label span.lv_flex{width:auto; height:30px; background:#6657c5; font-size:13px; font-weight:600; line-height:2.1em; vertical-align: top; padding:0 12px; margin:-6px 0 0 -5px}

.icon_time{display:inline-block; background:url(../../images/com/icon_time.png) center no-repeat; width:30px; height:30px; margin-right:10px; vertical-align:middle}
.icon_up{display:inline-block; background:url(../../images/com/table_icon_up.png) center no-repeat; width:20px; height:20px; margin:0 6px; vertical-align:middle}
.icon_down{display:inline-block; background:url(../../images/com/table_icon_down.png) center no-repeat; width:20px; height:20px; margin:0 6px; vertical-align:middle}

/* 통계 */
.stats_graph{margin:15px 0 30px 0; border:1px solid #ddd; border-radius:3px}
.stats_graph_box{width:100%; /*height:250px;*/margin:6px 15px}

/* article 문서 양식 */
.article_style1{display:table; width:100%;}
.article_style1 span.tit{display:table-cell; width:150px}
.article_style1 span.text{display:table-cell; width:auto}
	div.g{display:block; padding:15px 0 18px 0}
	div.line{border-bottom:1px solid #e9e9e9;}
	div.t_line{border-top:1px solid #e9e9e9;}
.date{position:relative; background:#FFF url(../../images/com/../../images/com/icon_select.png) right 10px center no-repeat;
	width:260px;
	height: 38px;
	font-size:14px;
	line-height:2.8em;
	text-indent:15px;
	border:1px solid #d6d6d6;
	border-radius:3px; z-index:1000}
.date_choice{font-weight:bold}
.date_list{position:absolute; top:39px; left:-1px; font-size:13px; line-height:2em; z-index:100}
.date_list ul{display:block; width:260px; border:1px solid #d6d6d6; border-radius:3px; background:#fff}
.date_list ul li{border-bottom:1px solid #d6d6d6; padding:3px 0;}
.date_list ul li a{display:inherit}
	.cal_tit{font-weight:600;}
	.cal_box{ padding-top:2px; padding-bottom:8px}
	.cal_input{
	display:inline-block; 
	width:107px; height:32px; 
	font-size:13px; text-align:left; line-height:2.5em; 
	background:url(../../images/com/../../images/com/icon_cal.png) right 5px center no-repeat;
	border:1px solid #d6d6d6;border-radius:3px;text-indent:4px; overflow:hidden}
	.cal_input a{width:100%;}

.date_list ul li.bg1{color:#aaa; background:#e9e9e9}
.date_list ul li.bg1 a{color:#aaa; cursor:default}


.table_style2{padding:0 0 20px 0}
.table_style2 table{font-size:13px; width:100%; border-collapse:collapse; text-align:center; vertical-align:middle; border:1px solid #ccc;}
.table_style2 table.out{width:100%; border-collapse:collapse; text-align:center; vertical-align:middle; border:none;}
.table_style2 table tr th{color:#fff; background:#555555; padding:10px 10px 12px 10px}
.table_style2 table tr td{border-bottom:1px solid #ccc; padding:12px 10px 12px 10px}
.table_style2 table thead tr th{text-align: center}
.table_style2>.paging{padding:25px 0 40px}
.table_style2 table tbody tr th:first-child{text-align: left; padding-left: 20px;}
.table_style2 table tbody tr td:first-child{text-align: left; padding-left: 20px;}
.table_style2.t_fc_center table tbody tr th:first-child{text-align: center; padding-left: 0;}
.table_style2.t_fc_center table tbody tr td:first-child{text-align: center; padding-left: 0;}

.table_style2 a.btn_s2{text-decoration-line: none}
.btn_s2{display:inline-block; font-size:11px; line-height: 2.1em; text-align:center; min-width:40px; height:24px; color:#555; vertical-align:middle; padding:0 6px; border:1px solid #999; border-radius:3px; margin:3px; box-sizing: border-box;}
.btn_s2.on{color:#fff; background-color:#555; border:0 }
.btn_s2.on1{color:#fff; background-color:#299ff6; border:0 }
.btn_s2.on2{color:#fff; background-color:#ff6d5e; border:0 }

.table_style2_line{padding:0 0 20px 0}
.table_style2_line table{font-size:13px; width:100%; border-collapse:collapse; text-align:center; vertical-align:middle; border:1px solid #ccc;}
.table_style2_line table th{color:#333; background:#eee; padding:10px 10px 12px 10px}
.table_style2_line table tr td{border:1px solid #ccc; padding:12px 10px 12px 10px}

.article>.table_style2{padding:0 0 0 0}
.article>.table_style2 table{width:100%; border-collapse:collapse; text-align:center; vertical-align:middle; border:1px solid #ccc;}
.article>.table_style2 table tr th{font-size:13px; width:auto; border:0;color:#fff; background:#555555; padding:10px;}
.article>.table_style2 table tr td{font-size:13px; width:auto; height:auto; border-bottom:1px solid #ccc; padding:10px; border-left:none; border-right:none;}


/* 게시판 */
.board{position:relative;}
	.b_noti{background:#fffeed}
.board table tr.b_noti td.b_num{font-size:12px;font-weight:600; color:#ff4f01}
.board table tr.b_noti td.b_subject{font-weight:600; color:#000}
.board table td.b_num{font-size:11px; font-weight:normal; color:#888}
.board table td.b_subject{font-size:13px; text-align: left; padding-right: 10px;word-break: keep-all}
.board table td.b_date{font-size:11px; font-weight:normal; color:#888}
.board table td.b_view{font-size:11px; font-weight:normal; color:#888}
.board table td.b_user{text-align:left;}
.board table td.b_user>.profile span.profile_id{font-size:11px; padding-right:0;}
.board table td.b_user .profile_img_box{width: 28px; height: 28px;}
.board table td.b_user .profile_img_box span.profile_img{width: 28px; height: 28px;}
.board table td span.b_rnum{font-size:11px; color:#2a9ff6; letter-spacing:-0.02em; vertical-align:text-top; padding-left:2px}
	.bin_page{min-height:200px; text-align:center; padding-top:160px}
	
.board table{width:100%; border-collapse:collapse;font-size:12px;text-align:center; vertical-align:middle;padding:0 0 0 0; border:0;}
.board table tr th{font-size:13px;color:#fff; background:#555; padding:10px 10px 12px 10px}
.board table tr td{font-size:14px;border-bottom:1px solid #dcdcdc; padding:10px 0;letter-spacing:0em;color:#555}
.board table tr td.out{border-bottom:0;}
.board table tr td input{/*width:866px;*/}
.board table tr td textarea{/*width:866px;*/ height:380px}

.board_btn{font-size:14px; text-align:center; padding:25px 0 30px 0; overflow:hidden}
.board_btn a{display:inline-block; min-width:120px; height:42px; color:#888; border:1px solid #d6d6d6;line-height:42px; text-align:center; border-radius:3px; padding:0 10px; margin:0 8px}
.board_btn a.on{background:#555; border:1px solid #555; color:#fff}

a.btn_write{position:absolute; top:-63px; right:0; display:block; background:url(../../images/board/btn_write.png) 0 center no-repeat; height:22px; padding:12px 12px 12px 30px; font-size: 13px; font-weight: bold; color: #555;}
a.btn_list{float:left; background:url(../../images/board/btn_list.png) 0 center no-repeat; width:80px; height:22px; border:0; padding:12px 0; margin:0 0 0 0; text-indent:-5000px; /*font-size: 12px; font-weight: bold; line-height: 1.7em;*/ overflow:hidden;}
a.btn_def{border:1px solid #d6d6d6; font-weight:normal; line-height:42px; text-align:center; border-radius:3px; width:auto; padding:0 28px; margin:0 0 0 0;}


.forum_q1,
.forum_q2,
.forum_q3,
.forum_q4,
.forum_q5{display: block; width:64px; height:20px; font-family: -apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim; font-size: 12px; font-weight: bold; text-align: center; line-height: 1.8em; letter-spacing: 0em; color: #888; border:1px solid #cdcdcd; border-radius: 22px; margin:0 auto}
.forum_q1{font-size: 11px; color: #666; font-weight: normal; letter-spacing: -0.05em; line-height: 1.9em;}/* 일반 외 */
.forum_q2{color: #9b72d7;}/* web */
.forum_q3{color: #4692e6;}/* ios */
.forum_q4{color: #7dbf0a;}/* android */
.forum_q5{color: #fb8e00}/* server */

.profile{position:relative; display:table; width:100%; vertical-align:middle;}



.profile_l{position:relative; padding-left:50px}
.profile_l span.photo_l{display:table-cell; width:160px;}
.profile span.photo_m{display:table-cell; width:38px;}
.profile span.photo_s{display:table-cell; width:30px;}

.profile_l span.photo_l img{width:160px; height:160px; border-radius:160px}
.profile span.photo_m img{width:36px; height:36px; border-radius:36px}
.profile span.photo_s img{width:30px; height:30px; border-radius:30px;}

.profile span.photo_s span.ticket_label span.icon_admin,
.profile span.photo_s span.ticket_label span.icon_r1,
.profile span.photo_s span.ticket_label span.icon_r2,
.profile span.photo_s span.ticket_label span.icon_r3,
.profile span.photo_s span.ticket_label span.icon_r4{width:28px; height:28px; background-size: 28px auto;}

.profile span.profile_id{display:table-cell; font-family:'Noto Sans', sans-serif; font-size:12px; font-weight: bold; line-height:1.2em; letter-spacing:-0.04em; color:#555;  padding:0 7px; width:auto; vertical-align:middle}
.profile span.profile_id span.b_date{font-weight: normal; color: #888;}

.profile_l a.btn_photo{display:block; position:absolute; left:170px; bottom:0px; background:url(../../images/com/btn_photo.png) no-repeat; width:50px; height:50px; text-indent:-5000px; overflow:hidden; z-index:1000}

.btn_smenu{display: inherit; float: right;}
.btn_recommend{float: left; display:block; height:30px; background: url(../../images/board/icon_recommend.png) 0 -3px no-repeat; padding:0 10px 0 35px; font-size: 12px; letter-spacing: -0.04em; line-height: 2.6em; color: #777;}
.btn_edit_area{position: relative;}
.btn_recommend.on{background: url(../../images/board/icon_recommend_on.png) 0 -3px no-repeat;}

.info2 .info2_etc .btn_recommend{float:none; height:16px; background: url(../../images/board/icon_recommend.png) 2px 0 no-repeat; background-size: 16px auto; padding-left:20px; font-size: 12px; letter-spacing:0em; line-height: 1.5em; color: #777;}
.btn_recommend strong{padding-left:5px; color: #333}
.btn_edit_area{position: relative; top:0; right:0}
.btn_edit_area a.btn_edit{float:left; display: inline-block; width:32px; height: 30px; background: url(../../images/board/icon_edit.png) center no-repeat;}
.btn_edit_layer{position: absolute; right:0; top:34px; z-index: 10}
.btn_edit_layer span.edit_menu{display: flex; flex-direction: column; min-width: 64px; font-size: 12px; background-color: #fff; border:1px solid #ccc; border-radius: 5px; padding:2px 0}
.btn_edit_layer span.edit_menu a{ color: #666; padding:5px 20px; word-break: keep-all; border-bottom: 1px solid #ddd}
.btn_edit_layer span.edit_menu a:last-child{border:0}
.btn_edit_layer span.edit_menu a:hover{color: #333;}


.paging{text-align:center; background:#fff; padding:30px 0 40px}
.paging a{display:inline-block; font-size:11px; line-height:2.8em; color:#888; min-width:21px; height:28px; text-align:center; border:1px solid #dcdcdc; padding:0 3px; margin:0 0.5px; vertical-align:middle; text-decoration-line: none }
.paging a.on{background:#aaa; border:1px solid #aaa; color:#fff; font-weight:bold}
.paging a.btn_f1{ background:url(../../images/board/icon_paging.png) center -28px scroll no-repeat; width:28px; padding:0 0; background-color:#f8f8f8}
.paging a.btn_f2{ background:url(../../images/board/icon_paging.png) center 0px scroll no-repeat; width:28px; padding:0 0; background-color:#f8f8f8}
.paging a.btn_l2{ background:url(../../images/board/icon_paging.png) center -56px scroll no-repeat; width:28px; padding:0 0; background-color:#f8f8f8}
.paging a.btn_l1{ background:url(../../images/board/icon_paging.png) center -84px scroll no-repeat; width:28px; padding:0 0; background-color:#f8f8f8}

.board_search{text-align:center; background:#f4f6f7; padding:20px 0;}
.board_search input[type=text]{height:34px; border-radius:0}
.board_search select{ height:36px; border-radius:0}
.board_search span.area{display:inline-block; margin:0 2px}
.board_search span.btn_search a{display:inline-block; width:130px; height:36px; color:#fff; text-align:center; background: url(../../images/com/icon_search.png) center no-repeat; background-color:#555; margin:0 0 0 2px; line-height:2.4em;  text-indent: -5000px; overflow: hidden; vertical-align: middle}

.board_title{text-align:left; border-bottom:1px solid #dcdcdc; overflow:hidden}
.board_title span.t1{display:block; width:100%; padding:6px 0 16px 0; clear:both; overflow:hidden}
.board_title span.t1 span.t1_tit{float:left; font-size:15px; font-weight:600; color:#333; width:820px}
.board_title span.t1 span.t1_tit.text_gray{color: #999}
.board_title span.t1 span.t1_type{float:right}

.board_title span.t2{display:block; font-size:11px; color:#666; width:100%; padding-bottom:15px;overflow:hidden}
.board_title span.t2 span.t2_view{float:left}
.board_title span.t2 span.t2_date{float:right}

.board_note{min-height:100px; padding:20px 0}
.board_note p,.board_note pre{font-size:14px;}

.board_reply{ border:1px solid #d6d6d6}
.board_reply dl dt{font-size:12px; font-weight:600; background:#f9f9f9; border-bottom:1px solid #d6d6d6; padding:8px 20px}
.board_reply ul{/*padding-top:15px*/}
.board_reply ul li{position:relative; min-height:74px; border-top:1px dashed #ccc; padding:20px 0 10px}
.board_reply ul li.first{border:none}
.board_reply dl dd{padding:0 20px}

	.reply_note{position:relative; min-height: 48px; padding:14px 0 10px 0; clear:both}
	.reply_note p,.reply_note pre{font-size:13px;}
	.reply_note span.reply_box{display:inline-block; width:744px}
	.reply_note span.reply_box textarea{width:100%; height:52px; border-radius:0; background:#f9f9f9; resize: none; border-radius: 3px; overflow-x: hidden}
	.reply_note span.btn_reply_box{float:right;display:inline-block; margin-left:8px}
	.reply_note span.btn_reply_box a{display:block; font-size:13px; font-weight:600; letter-spacing: 0em; line-height:74px; background:#555; text-align:center; color:#fff; width:70px; height:74px; border-radius: 3px}


/* FAQ */
.faq{}
.faq ul{padding-top:10px}
.faq ul li{background:url(../../images/board/faq_q.png) no-repeat; padding:0 0 50px 24px}
	.faq_tit{display:block; font-size:22px; color:#f3a900; padding-bottom:10px;}
	.faq_note{display:block; font-size:14.5px; letter-spacing:0em; line-height:1.65em}
.faq a{color:#2a9ff6}
.faq a:hover{text-decoration:underline}

/* 기본, 로그인 */
.table_style3{width:100%; border-collapse:collapse; text-align:left}
.table_style3 table{width: 100%;}
.table_style3 table tr th{font-size:14px; font-weight:normal; text-align:left; vertical-align:top; padding:9px 20px 0 0}
.table_style3 table tr td{font-size:14px; height:38px; padding-bottom:14px; vertical-align:middle;}

/* 개발가이드, 콘솔 5블럭으로 나눔 */
.article{font-size:15px; margin-bottom:50px;}
.article a{color:#2a9ff6;text-decoration:underline}
.article a:hover{font-weight:bold}
.article strong{color:#333}
.article .paging a{text-decoration: none; color: #888}
.article .paging a.on{text-decoration: none; color: #fff}

.article table{width:100%; border-collapse:collapse; text-align:left; vertical-align:middle; border:1px solid #dcdcdc;}
.article table tr th{font-size:14px; font-weight:600; text-align:center; width:168px; padding:0 0 0 20px; border:1px solid #dcdcdc;}
.article table tr td{font-size:14px; width:168px; height:38px; vertical-align:middle; border:1px solid #dcdcdc; padding:8px 10px 8px 10px;}
.article table tr td input{width:158px; background:#f0f9ff; color:#000}

.article table tr td.c2{width:336px}/* colspan */
.article table tr td.c2 input{width:316px}
.article table tr td.c3{width:504px}
.article table tr td.c3 input{width:484px}
.article table tr td.c4{width:672px}
.article table tr td.c4 input{width:672px}

.article_btn{padding:12px 0}
.article_btn a,.article_btn a:hover{border:1px solid #d6d6d6; font-weight:normal; line-height:36px; text-align:center; border-radius:3px; width:auto; padding:0 28px; margin:0 0 0 0; color:#888; text-decoration:none; cursor:default}
.article_btn a.on{background:#299ff6;border:1px solid #299ff6; color:#fff;cursor:pointer}

.response_box{display:block; width:846px; min-height:140px;  background:#0d3952; color:#fff; padding:10px 20px;margin-bottom:15px}

.input_block{}
.input_block label{float:left; font-size:15px; padding:9px 20px 0 0}
.input_block input{width:auto;margin-right:10px}

.pw_block{width:490px; margin:0 auto;}
.pw_block>.check_list_row{width:410px; margin:0 auto}

/* platform */
.platform{background:#f4f6f7; padding-bottom:10px; margin-top:10px;/* margin-right:22px*/;padding-top:4px; border:1px solid #ccc; border-radius: 3px }
.platform table{width:100%; border-collapse:collapse; border:0}
.platform table tr th{width:114px; height:24px; font-size:15px; line-height:1.25em; font-weight:600; padding:10px 20px 0 18px}
.platform table tr td{width:564px; font-size:14px; padding:10px 0 0 0;}
.platform table tr td.text{padding:10px 0 0 0;}
.platform table tr td ul li{padding-bottom:10px}
.platform table tr td ul li input{width:500px; height:34px}
	.input_box{position:relative; z-index:1;}
	.btn_text_del{position:absolute; top:0; right:4px; display:block; background:url(../../images/com/btn_text_del.png) center 3px no-repeat; width:28px; height:28px; z-index:10;}
.platform table tr td ul li a.icon_del{display:inline-block; background:url(../../images/com/icon_del.png) center no-repeat; width:34px; height:34px; vertical-align:middle; margin-left:10px}

.bottom_line{border-bottom:1px solid #e9e9e9; margin-top:20px; margin-bottom:30px}

/* 약관 */
.terms{
	font-size:12px;
    border: 1px solid #dcdcdc;
	border-radius:3px;
    height: 110px;
    line-height: 18px;
    margin: 10px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
	background:#f9f9f9;
	/*margin-right:20px*/
}
.terms>.article{margin-bottom:10px}
.terms>.article>.terms_text{font-size:12px;}
.terms>.article>.terms_text h3{font-size:12px; padding:0 0 8px 0}
.terms>.article>.terms_text p{font-size:12px; padding-bottom:20px}
/* alt 확인창 */
.msg{position:fixed; top:0; position: 0 0 0 0; width:100vw; height:100vh; z-index:999999}/* 메세지, 확인창 */
.msg_box{position: absolute; top:50%; left:50%; transform: translate( -50%, -50%); z-index: 1000; display:block; width:400px; min-height: 90px; padding:35px 30px 20px 30px; background:#fff; border:1px solid #aaa; border-radius: 3px;}
.msg_box p{font-size:13px; line-height: 1.7em; text-align:center; padding-bottom: 10px}
.msg_box p.title{font-size:14px; font-weight: bold; text-align:center; padding-bottom: 10px}
.msg_box span.btn{display:block; text-align: center; padding:15px 0; text-align:center; margin:0 auto; }
.msg_box span.btn a{display: inline-block; width: auto; min-width: 140px; height: 40px; font-size: 13px; line-height: 2.75em; margin:0 5px; background-color: #fff; border:1px solid #c9c9c9; color: #404040;box-sizing: border-box;}
.msg_box span.btn a.on{background-color: #299ff6; color: #fff; border:0;}
.msg_box>.input_block{width:320px; margin:0 auto; margin-bottom: 5px}
.msg_box>.input_block label{float:left; font-size:15px; width:110px; padding:9px 0 0 0; text-align:left;}
.msg_box>.input_block input{margin-right:0}

/* btn */
.btn_bottom{display: block; text-align:center; margin-top: 40px;}
.btn_bottom a{display:inline-block; font-size:17px; font-weight: bold; line-height:1.45em; text-decoration:none; width:206px; color:#fff; border-radius:3px; background:#bac7d6; padding:15px 0; margin:0 8px; vertical-align: middle}
.btn_bottom a.on{background:#299ff6;}
.btn_bottom a.on1{background:#ff8f3c/*299ff6*/;}

.btn_bottom.sm a{width:142px;}


.btn_full{display:inline-block; width:100%; font-size:17px; line-height:54px; text-align:center; text-decoration:none; height:54px; color:#fff; border-radius:3px }
.btn_l{display:inline-block; font-size:17px; line-height:54px; text-align:center;text-decoration:none; width:206px; height:54px; color:#fff; border-radius:3px }
.btn_m{display:inline-block; font-size:15px; line-height:40px; text-align:center; text-decoration:none; height:40px; color:#fff; vertical-align:middle; padding:0 20px; border-radius:3px}
.btn_s{display:inline-block; font-size:14px; line-height:40px; text-align:center; text-decoration:none; width:84px; height:40px; color:#fff; vertical-align:middle; border-radius:3px}

.btn_s1{display:inline-block; font-size:12px; line-height: 1.915em; text-align:center; text-decoration:none; min-width:40px; height:24px; color:#555; vertical-align:middle; padding:0 10px; border:1px solid #999; border-radius:3px; margin:0 5px; box-sizing: border-box;}
.btn_s1.on{color:#fff; background-color:#555; border:0 }
.btn_s1.on1{color:#fff; background-color:#299ff6; border:0 }
.btn_s1.off,a.btn_s1.off:hover{color:#999; font-weight: normal; background-color:#eee; border:0; cursor: default}

.btn_upgrade{position: absolute; right:0; top:12px; display: inline-block; background: url(../../images/com/icon_upgrade.png) 10px center no-repeat; height: 30px; font-size: 13px; font-weight: bold; color: #333; line-height: 2.25em; padding: 0 15px 0 36px; border:1px solid #999; border-radius: 3px; margin-left: 10px;}
.btn_d_plus{ display: inline-block; background: url(../../images/com/icon_plus.png) 8px center no-repeat; height: 30px; font-size: 13px; font-weight: bold; color: #077bf9; letter-spacing: -0.05em; line-height: 2.25em; padding: 0 8px 0 34px; border:1px solid #077bf9; border-radius: 3px; margin-left: 5px;}
.btn_d{float:right;display: inline-block; height: 30px; font-size: 13px; font-weight: bold; color: #555; line-height: 2.25em; padding: 0 15px ; border:1px solid #999; border-radius: 3px; margin-left: 10px;}
.btn_d_blue{float:right;display: inline-block; height: 30px; font-size: 13px; font-weight: bold; color: #fff; line-height: 2.25em; padding: 0 15px ; border:1px solid #077bf9; background-color: #077bf9; border-radius: 3px; margin-left: 10px;}
.btn_d_blue.fl{float: left; margin-left:0; vertical-align: bottom}
.btn_active{display: inline-block; height: 30px; font-size: 13px; font-weight: bold; color: #0f92eb; line-height: 2.25em; padding: 0 15px; border:1px solid #2DA2F2; border-radius: 3px; margin-left: 10px;}

.btn_d1{background:#bac7d6}/* 취소버튼 */
.btn_d2{background:#299ff6; color: #fff}/* 등록버튼 */
.btn_d3{background:#0e62c2; color: #fff}/* 사용가능 버튼 */
.btn_d4{background:#f2685e; color: #fff}/* 경고버튼 */

.btn_default a,.btn_default a:hover{font-size:14px; font-weight:normal; text-decoration:none; text-align:center; color:#fff; background:#299ff6; padding:10px 20px; border-radius:3px}
/* common */
.tt{border:1px solid red}
.none,.disNone, div.disNone{display:none}

.bl{display:block;}
.fl{float:left}
.fr{float:right}
.pst_r{position: relative}

.inner{width:1168px; margin:0 auto}

.link1{color:#2a9ff6}

.t_bold{font-weight:bold}
.t_normal{font-weight: normal;}
.t_left{text-align:left}
.t_right{text-align:right}
.t_center{text-align:center}

.m_center{margin:0 auto}

.text_warning{color:#ff6d5e}/* 인풋 경고 */
.text_success{color:#0e62c2;}/* 성공 */
.text_ing{color:#2a9ff6}/* 진행중 */
.text_danger{color:#ff2828}/* 위험,초과 */
.text_care{color:#ec9000}/* 주의 */
.text_info{color:#56bc4e}/* 정보 */

.text_sky{color:#2a9ff6}
.text_org{color:#ff9000}
.text_gray{color: #999}

.text_l2{font-size:20px; font-weight: bold}
.text_l{font-size:15px; font-weight:normal;}
.text_m{font-size:13px; font-weight:normal;}
.text_s{font-size:12px; font-weight:normal;}
.text_xs{font-size:11px; font-weight:normal;}

.text_line{text-decoration: underline}

.check_list_col{padding:10px 0}
.check_list_col input[type="checkbox"] + label,.check_list_col input[type="radio"] + label{width:101px; margin-right:20px}
.check_list_row{padding:10px 0 0 0}
.check_list_row input[type="checkbox"] + label{display:block; width:100%; margin-top:10px; margin-left:10px}
.check_list_row .link1{font-size: 11px;}

.check_all{display:inline-block; font-weight:600; min-width:386px; height:38px; background:#f5f6f8;}

.bg_gray{background-color:#f5f6f8}/* 투명한 회색 */
.bg_blue{background-color: #f1faff;}

/* input 넓이 */
.full{width:100%}
.lg2{width:866px}
.lg{width:674px}
.lm{width:262px}
.ms{width:195px}
.ss{width:150px}
.xs{width:100px}
.xxs{width:40px}


.select_lm{width:284px}
.select_ms{width:182px}
.select_ss{width:150px}
.select_xs{width:80px; height: 34px; margin-right:6px}
.select_xxs{width:64px; height: 34px; margin-right:6px}

/* padding, margin */
.fst{padding-top:14px}
.fsts{padding-top:6px}
.mid{padding-bottom:20px}/* 문단 중간 */
.lst{padding-bottom:30px}/* 문단 마지막 */

.mtl{margin-top:30px}
.mtl2{margin-top:50px}
.mt{margin-top:20px}
.mts{margin-top:10px}
.ml{margin-left:10px}
.mb{margin-bottom:15px}
.mbl{margin-bottom:20px}
.mblg{margin-bottom:40px}
.mbs{margin-bottom:10px}
.mr{margin-right:10px}
.pr{padding-right:10px}
.pt{padding-top:10px}

.va_t{vertical-align: top}

/* input, checkbox, select */
input[type=text],
input[type=email],
input[type=password]{
	height: 38px;
	font-size:14px;
	line-height:normal;
	border:1px solid #d6d6d6;
	border-radius:3px;
	padding:0 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}
input:focus {border:1px solid #629cff;}
input:disabled {background:#fff; border:0}
input.warning{border:1px solid #f2685e;}

input[type=text]::-ms-clear{display: none;} 

input[type=checkbox],input[type=radio]{
	display:none
}
input[type=checkbox] + label{
	background:url(../../images/com/img_check.png) 0 0 scroll no-repeat;
	font-size:13px; height:20px;
	display:inline-block;
	cursor:pointer;
	vertical-align:middle;
	padding-left:30px;
}
input[type=checkbox]:checked + label{
	background:url(../../images/com/img_check.png) 0 -22px scroll no-repeat;
	height:20px;
}
input[type=radio] + label{
	background:url(../../images/com/img_radio.png) 0 0 scroll no-repeat;
	font-size:13px; height:20px;
	display:inline-block;
	cursor:pointer;
	vertical-align:middle;
	padding-left:30px;
}
input[type=radio]:checked + label{
	background:url(../../images/com/img_radio.png) 0 -22px scroll no-repeat;
	height:20px;
}
textarea{
	font-size:14px;
	padding:10px;	
	line-height:normal;
	border:1px solid #d6d6d6;
	border-radius:3px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	resize: none;
}
select{
	background:#FFF url(../../images/com/../../images/com/icon_select.png) right 10px center no-repeat ;
	width:100%;
	height: 40px;
	font-size:14px;
	line-height:normal;
	padding-left:10px;
	border:1px solid #d6d6d6;
	border-radius:3px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;	  
}
select::-ms-expand {display: none}/* ie 10,11 네이티브 화살표 숨기기 */


/* footer */
.footer{position:fixed; bottom:0; width:100%; min-width: 740px; height:45px; background:#262626; border-top:1px solid #494949; clear:both; z-index: 999}
.footer_tit{float:left; width:80px; height:30px; margin-top:10px; margin-left:20px;}
.footer_logo{display:block; background:url(../../images/com/footer_logo.png) no-repeat; background-size:58px 22px; width:58px; height:22px; text-indent:-5000px; overflow:hidden;}
.footer_snb ul{padding-top:12px;}
.footer_snb li a{float:left; font-size:11px; color:#adadad; text-decoration:none;; padding:0 18px}
.footer_snb li a:hover{color:#fff}
.copyright{float:right; font-size:10px; color:#999; letter-spacing:0.06em; margin-right:20px}
.copyright .sns_area{display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: -2px;}
.copyright .sns_area a{flex-basis: 24px; width:24px; height: 24px; margin-left: 15px; border-radius: 24px}
.copyright .sns_area a.sns1{background: url(../../images/main/front_sns_facebook.png) center no-repeat; background-size: 24px auto}/*facebook*/
.copyright .sns_area a.sns2{background: url(../../images/main/front_sns_blog.png) center no-repeat;background-size: 24px auto}/*blog*/
.copyright .sns_area a.sns3{background: url(../../images/main/front_sns_youtube.png) center no-repeat;background-size: 24px auto}/*youtuve*/

.copyright>a>strong{color:#ddd}

/* popup */
.popup {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; 의 축약형 */
  z-index: 100000;
  display: grid;
  place-items: center; /* 단 한 줄로 자식 요소를 세로/가로 완전 중앙 정렬 */
  background-color: rgba(0, 0, 0, 0.75); /* .popup_bg 통합 */
}
.popup_bg{width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75);}
.popup_area {
  position: relative;
  z-index: 1000;
}
.popup_box.w6{width: 640px;}
.popup_box {
  position:relative;
  display: block;
  min-width: 400px;
  max-width: 900px;
  max-height: 740px;
  padding: 40px 50px 60px;
  border: 1px solid #666;
  border-radius: 3px;
  background: #fff;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}
.popup_box.card{width: 360px;}
.popup_box>.article{width:528px; height:240px;font-size:13px; text-align:justify; overflow-y:auto; padding:0 15px 8px 0}
.popup_box>.article h2{font-size:22px; font-weight:300; line-height:30px; color:#000; border-bottom:2px solid #000; margin-bottom:14px; padding-bottom:8px}
.popup_box>.article h3{color:#000; padding-bottom:8px}
.popup_box>.article p{padding-bottom:30px}
.popup_box>.article p span.title{display:block; font-size:13px; font-weight:600; color:#000; padding-bottom:6px}
.popup_box textarea{max-height: 70px;}
.popup p{font-size: 13px; padding:0 0 10px}

.pr_box{position: absolute; left:0; right:0; top:40px; display: block; width:460px; max-height:740px; background:#fff; border:1px solid #666; border-radius: 3px; padding:40px 50px 50px; margin:0 auto; z-index:100}
.pr_box table.col table{margin-bottom: 10px}
.pr_box table.col th{font-size: 13px; height: inherit; vertical-align: middle; padding:10px 0 0 0;}
.pr_box table.col td{ padding:10px 0 0 0}
.pr_box table.col td input{width: 320px}
.pr_box p.box_line{font-size: 12px; border:1px solid #ccc; border-radius: 3px; padding:10px 15px; min-height: 100px;}
.pr_box a.link1{text-decoration: underline}
.pr_box .cs_area{font-size: 12px; text-align: left; padding:15px 20px; margin: 15px 0 0 0}
.pr_box .cal_input{background-position: right 10px center}
.pr_box input{font-size: 12px; height: 32px}
.btn_g{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top:20px}
.btn_g a{display:inline-block; font-size:13px; line-height: 2.1em; text-align:center; min-width:60px; height:32px; color:#555; vertical-align:middle; padding:0 15px; border:2px solid #bbb; border-radius:3px; margin:3px; box-sizing: border-box;}
.btn_g a.edit{color:#fff; background-color:#555; border:0; line-height: 2.5em; }
.btn_g a.delete{color:#fff; background-color:#ff6d5e; border:0;  line-height: 2.5em;  }
.btn_g a.save{color:#fff; background-color:#299ff6; border:0;  line-height: 2.5em;  }

.pr_guide{position: absolute; left:0; right:0; top:40px; display: block; width:764px; height:604px; background-color:#e9e9e9; border:1px solid #666; border-radius: 3px; padding:10px; margin:0 auto; z-index:100}
.pr_guide dl{display: flex}
.pr_guide dt{flex-basis: 404px; }
.pr_guide dd{flex-grow: 1; font-size: 15px; color: #222; padding:40px 25px}
.pr_guide dd p.title{font-size: 15px; font-weight: bold}
.pr_guide dd p{font-size: 12px; line-height: 1.7em; letter-spacing: -0.03em}


.calendar_layer{position: absolute; top:45px; left:0; width:340px; background-color: #fff; border: 1px solid #777; border-radius: 3px; z-index: 10}
.calendar_title{position: relative; display: block; padding:4px 14px 10px;}
.calendar_title span.cal_date{display: inline-block; font-size: 11px; color: #666;}
.calendar_title a{position: absolute; right:3px; top:3px; display: block; font-size: 11px; color:#fff; padding:5px 20px; background-color: #555; border-radius: 3px}
.calendar_area{}
.calendar_area span.month{position: relative; display: block; height: 50px; text-align: center; font-size: 16px; line-height: 3em; color: #333;}
.calendar_area span.month a.m_left{position:absolute; left:0; top:0; background:  url(../../images/com/m_icon_left.png) center no-repeat; background-size: 35px auto; width: 40px; height: 50px;}
.calendar_area span.month a.m_right{position:absolute; right:0; top:0; background:  url(../../images/com/m_icon_right.png) center no-repeat; background-size: 35px auto; width: 40px; height: 50px;}

.calendar_area table.calendar{border-collapse:collapse; border-spacing: 0; margin:0 5px;}
.calendar_area table.calendar th,
.calendar_area table.calendar td{min-width: auto; font-size: 11px; text-align: center; padding:0; }
.t_red{color: red}
.calendar_area table.calendar th{font-size: 11px; color: #666; font-weight: normal;  padding:0 0 3px 0}
.calendar_area table.calendar td a{display: block; width: 47px; height:26px; line-height: 2.4em;}
.calendar_area table.calendar td a.off{background-color: #eee; color: #999}
.calendar_area table.calendar td a.on{background-color: #a2f5ff; color: #000; font-weight: bold}

.popup span.btn_close{position:absolute; right:30px; top:30px;}
.popup_title{display: block; font-size:24px; font-weight:600; color:#000; padding-bottom: 20px}
.popup .btn{display: block; text-align: center; margin-top: 36px}
.popup .btn a{display: inline-block; width: 180px; height:45px; border:1px solid #c4c4c4; border-radius: 3px; font-size: 15px; font-weight: bold; line-height: 2.9em; color: #555; margin-left:15px}
.popup .btn a.on{color: #fff; background:#299ff6; border-color:#299ff6 }
.popup .btn a.on1{color: #fff; background:#ff8f3c; border-color:#ff8f3c }
.popup .btn a:first-child{margin-left: 0}
.popup_box>table.col table{margin-bottom: 10px}
.popup_box>table.col td textarea{width:480px; height:150px}
.popup_box>table.col td input{width: 480px}
.popup_box>table.col td input.lm{width: 252px;}
.popup_box>table.col td select{height: 40px;}

.card>table.col td{min-width: auto}
.card>table.col td input{width: 200px}
.popup_box>table.col td .p_bottom{display: block; margin:10px 0 0 0}
.popup .payment_g span{flex-basis: 33%}
.scroll_area{overflow-y: auto; max-height: 180px; border-bottom: 1px solid #eee}/*220*/
.scroll_area.scroll_s{max-height: 160px;}
.scroll_area.scroll_m{max-height: 373px;}
.scroll_area.scroll_l{max-height: 570px;}
.scroll_area.scroll_full{max-height:100%}
.scroll_area table.board{border-top:0;}

.popup select{height:34px}

.cs_area{display: block; font-size: 13px; line-height: 1.75em; text-align: center; background-color: #F6F6F6; padding:15px 20px; margin:10px 0 20px}

.popup_table>.table_style2_line table td span.cal_input{width:120px; text-indent:10px; vertical-align:middle}


.terms_text{}
.terms_text p{padding-bottom:40px;}
.terms_text span.title{display:block; font-weight:600; color:#000; padding-bottom:5px}

.terms_table{margin-top:-30px}
.terms_table table tr th{text-align:center; font-size:13px; padding:10px 5px; }
.terms_table table tr td{text-align:center; font-size:13px; padding:3px;}
.terms_table span.table_info{display:block; font-size:12px; padding:10px 0}

/* .main_area{text-align:center; padding:40px 0 150px 0}
.main_area p.main_title{font-family:'Noto Sans', sans-serif; font-size:64px; font-weight:600; letter-spacing:0.03em; text-align:center; color:#666; padding:0 0 24px 0}
.main_area p{font-size:18px; letter-spacing:0.015em} */

.main_area1{position: relative; display: block; min-height:700px; background-color: #262626 }
.main_area1_title{position: absolute; width:100%;  z-index: 3}
.main_area1_bg{position: absolute; top:0; left:0;  width:100%; min-height:700px; background: url(../../images/main/bg_top.jpg) center 0 no-repeat; background-size: cover;  z-index: 1;
	animation-name:bgani;
    animation-duration: 1.5s;
    animation-iteration-count: 15 }

@keyframes bgani {
0% {transform: translate(0,0px)}
20% {transform: translate(0,6px)}
40% {transform: translate(0,0)}
70% {transform: translate(0,4px)}
100% {transform: translate(0,0)}
}

.main_area1 span.tit{display: block; font-family: 'sans-serif', Noto Sans, Nanum Gothic; font-size: 94px; font-weight: 600; color: #fff; text-align: center; letter-spacing: -0.03em; padding-top:120px}
.main_area1 span.tit_en{font-size: 97px; font-weight: 900; color: #ff9000}
.main_area1 span.tit_body{display: block; width: 100%; font-family: 'sans-serif', Noto Sans, Nanum Gothic; font-size: 19px; color: #fff; text-align: center; letter-spacing:-0.015em; line-height: 1.85em; margin-top:37px }
span.tit_body>span.text_org{display: block; font-size: 16px; letter-spacing: 0em; margin-top:5px}
.main_area1_title>.inner>.btn_bottom{display: flex; justify-content: center; margin-top:36px}
.main_area1_title>.inner>.btn_bottom a.on{display: flex; justify-content: center; background-color: #ffa214; align-items: center; color: #252525}
.main_area1_title>.inner>.btn_bottom a.on1{background-color: #ffe31c; color: #252525}
.main_area1_title>.inner>.btn_bottom a.on1 span.stext{display: block; font-size: 11px; font-weight: normal; color: #252525; line-height: 1.4em;}

.main_area2{position: relative; display: block; width:100%; min-height:720px; background-color:#262626;}
.main_area2 span.tit{display: block; font-family: 'sans-serif', Noto Sans, Nanum Gothic; font-size: 44px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 0em; padding-top:70px}
.main_area2 span.tit{display: block; font-family: 'sans-serif', Noto Sans, Nanum Gothic; font-size: 44px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 0em; padding-top:70px}
.main_area2 span.tit1{font-weight: 100}
.main_area2 ul{display: flex; flex-direction: row; flex-wrap: nowrap; margin-top:50px}
.main_area2 li{flex-grow: 1;  flex-shrink: 1; flex-basis: 200px; padding:0 20px; font-size: 14px; color: #fff; line-height: 1.5em;}
.main_area2 li:first-child{flex-basis: 210px}
.main_area2 li span.text{display: block; padding-bottom: 10px}
.api1{display: block; background: url(../../images/main/api1.png) center -10px no-repeat; width: 100%; height:200px}
.api2{display: block; background: url(../../images/main/api2.png) center -10px no-repeat; width: 100%; height:200px}
.api3{display: block; background: url(../../images/main/api3.png) center -10px no-repeat; width: 100%; height:200px}
.api4{display: block; background: url(../../images/main/api4.png) center -10px no-repeat; width: 100%; height:200px}
.api5{display: block; background: url(../../images/main/api5.png) center -10px no-repeat; width: 100%; height:200px}

.inner>a>.more_box{margin-top:90px}
.more_box{display: block; text-align: center}
.btn_more{display: inline-block; background: url(../../images/main/icon_more.png) 10px center no-repeat; padding-left:35px; height:20px}
a span.btn_more{opacity: 0.2}
a span.more_text{display: none}
/* a:hover span.more_text{display: block; font-size:12px; color:#fff} */
a:hover span.btn_more{opacity: 1; 
	animation-name:rotate;
    animation-duration: 1.5s;
    animation-iteration-count: 1; }

@keyframes rotate {
0% {}
50% {transform: rotate(180deg)}
100% {transform: rotate(360deg)}
}

.btn_more2{display: inline-block; background: url(../../images/main/icon_more.png) 10px center no-repeat; padding-left:35px; height:20px}
a span.btn_more2{opacity: 0.6}
a:hover span.btn_more2{opacity: 1;
	animation-name:rotate;
    animation-duration: 1.5s;
    animation-iteration-count: 1;}

.main_area3{position: relative; display: block; width:100%; min-height:680px; background-color:#111; padding-bottom: 70px}
.main_area3 span.tit{display: block; font-family: 'sans-serif', Noto Sans; font-size: 44px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 0em; padding-top:70px}
.main_area3 span.tit1{font-size: 38px; font-weight: 100; letter-spacing: -0.05em}
.main_area3 ul{display: flex; flex-direction: row; flex-wrap: nowrap; margin-top:50px}
.main_area3 li{flex-grow: 1; flex-shrink: 1; flex-basis: 200px; padding:0 20px; font-size: 14px; color: #fff; line-height: 1.95em;}
.case1{display: block; background: url(../../images/main/case1.png) center 5px no-repeat; width: 100%; height:235px}
.case2{display: block; background: url(../../images/main/case2.png) center 5px no-repeat; width: 100%; height:235px}
/* .case3{display: block; background: url(../../images/main/case3.png) center 5px no-repeat; width: 100%; height:235px} */
.case4{display: block; background: url(../../images/main/case4.png) center 5px no-repeat; width: 100%; height:235px}
.case5{display: block; background: url(../../images/main/case5.png) center 5px no-repeat; width: 100%; height:235px}
.case6{display: block; background: url(../../images/main/case6.png) center 5px no-repeat; width: 100%; height:235px}
.main_area3 li span.text{display: block; font-size: 16px; font-weight: bold; color: #fff; line-height: 1.5em}
.main_area3 li span.text sub{display: block; font-size: 12px; font-weight: normal; color: #888}

.main_area4{position: relative; display: block; width:100%; min-height:760px; background-color:#efefef;}
.main_area4 span.tit{display: block; font-family: 'sans-serif', Noto Sans; font-size: 44px; font-weight: 900; color: #252525; text-align: center; letter-spacing: 0em; padding-top:70px}
.main_area4 span.tit1{font-size: 38px; font-weight: 100; letter-spacing: -0.05em}
.main_area4 ul{display: flex; flex-direction: row; flex-wrap: nowrap; margin-top:50px}
.main_area4 li{flex-grow: 1; flex-basis: 335px; height: 410px; font-size: 14px; color: #fff; line-height: 1.95em; margin:0 17px; background-color: #fff}
.story1{display: block; background: url(../../images/main/story1.png) center no-repeat; width: 100%; height:200px}
.story2{display: block; background: url(../../images/main/story2.png) center no-repeat; width: 100%; height:200px}
.story3{display: block; background: url(../../images/main/story3.png) center no-repeat; width: 100%; height:200px}
.main_area4 li span.text{display: block; font-size: 21px; font-weight: bold; color: #252525; line-height: 1em}
.main_area4 li span.text sub{display: block; font-size: 14px; font-weight: normal; color: #777; padding-top: 18px}
.main_area4 li a{display: inherit; width: 100%; height: 100%}
.main_area4 li a span.btn_more2{margin-top:45px}


.main_area5{position: relative; display: block; width:100%; min-height:700px; background-color:#efefef;}
.main_area5 .gallery{position: relative; /*height: 436px;*/ padding-left: 35px; overflow: hidden}
.main_area5 .gallery a.gallery_left{position: absolute; left:0; top:190px; width:50px; height:80px; background: url(../../images/main/event_new_btn_left.png) 0 no-repeat; cursor: pointer}
.main_area5 .gallery a.gallery_right{position: absolute; right:0; top:190px; width:50px; height:80px; background: url(../../images/main/event_new_btn_right.png) right 0 no-repeat; cursor: pointer}

.main_area5 .board_thumbnail{margin-top:50px; margin-left:10px;}
.main_area5 .board_thumbnail .thumbnail{margin-top:0}
.main_area5 .board_thumbnail .thumbnail:nth-child(3n+1){margin-left:24px}
.main_area5 .board_thumbnail .thumbnail{height: 390px}
.main_area5 .board_thumbnail{display: flex; flex-direction: row; flex-wrap: wrap;}
.main_area5 .thumbnail{display: flex; flex-direction: column; width: 280px; height: 400px; box-sizing: border-box; background-color: #fff; overflow: hidden; border:1px solid #ddd; cursor: pointer; margin-left:24px; margin-bottom: 24px; font-family:-apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim;}
.main_area5 .thumbnail:nth-child(3n+1){margin-left:0}



.main_area5 .caption span.info2_etc{display: none}
.main_area5 .caption span.info2_etc span.icon_view{display: inline-block; background: url(../../images/board/icon_view.png) 0 0 no-repeat; background-size:16px auto; padding:0 5px 0 21px;}
.main_area5 .caption span.info2_etc span.icon_comment{display: inline-block; background: url(../../images/board/icon_comment.png) 0 0 no-repeat; background-size:16px auto; padding:0 5px 0 18px; }
.main_area5 .caption span.info2_etc span.icon_rec{display: inline-block; background: url(../../images/board/icon_recommend.png) 0 0 no-repeat; background-size:16px auto; padding:0 5px 0 18px; }


.main_area5 .thumbnail{display: flex; flex-direction: column; width: 240px; height: 385px; box-sizing: border-box; background-color: #fff; overflow: hidden; border:1px solid #999; }
.main_area5 .thumb_box{display: block; width: 240px; height: 240px; overflow: hidden; vertical-align: top;}
.main_area5 .thumb_box img{width:100%; height: 100%;} /* width: 16.677vw; max-width: auto; min-height: 53.32vh; */
.main_area5 .thumb_box img.thumb{width: 238px; height:238px}
.main_area5 .caption{display: block;}

.main_area5 .caption h4{
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 라인수 */
	height:54px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 14px; font-weight: bold; color: #333; line-height: 1.5em; letter-spacing: -0.05em; padding:10px 15px; word-break:keep-all}

.main_area5 .caption span.info_g{display: flex; flex-direction: column; padding:12px 15px 15px; color: #666}
.main_area5 .caption span.info1{display: block; font-size: 12px; font-weight: bold; color: #555; padding-bottom: 10px}
.main_area5 .caption span.info2{display: flex; flex-direction: row; flex-wrap: nowrap; font-size: 11px; font-weight: normal; color: #888}
.main_area5 .caption span.info2_date{flex-grow: 1}
.main_area5 .caption span.info2_etc{}
.main_area5 .caption span.info2_etc span{display: inline-block;}




.main_area5 span.tit{display: block; font-family: 'sans-serif', Noto Sans; font-size: 44px; font-weight: 900; color: #252525; text-align: center; letter-spacing: 0em; padding-top:70px}
.main_area5 span.tit1{font-size: 38px; font-weight: 100; letter-spacing: -0.05em}
.main_area5 ul{display: flex; flex-direction: row; flex-wrap: nowrap; margin-top:50px}
.main_area5 li{flex-grow: 1; flex-shrink: 1; flex-basis: 200px; padding:0 20px; font-size: 14px; color: #fff; line-height: 1.95em;}
.case1{display: block; background: url(../../images/main/case1.png) center 5px no-repeat; width: 100%; height:235px}
.case2{display: block; background: url(../../images/main/case2.png) center 5px no-repeat; width: 100%; height:235px}
/* .case3{display: block; background: url(../../images/main/case3.png) center 5px no-repeat; width: 100%; height:235px} */
.case4{display: block; background: url(../../images/main/case4.png) center 5px no-repeat; width: 100%; height:235px}
.case5{display: block; background: url(../../images/main/case5.png) center 5px no-repeat; width: 100%; height:235px}
.case6{display: block; background: url(../../images/main/case6.png) center 5px no-repeat; width: 100%; height:235px}
.main_area5 li span.text{display: block; font-size: 16px; font-weight: bold; color: #fff; line-height: 1.5em}
.main_area5 li span.text sub{display: block; font-size: 12px; font-weight: normal; color: #888}

/* odsay 활용사례 */
/* section3 */
/*.popup_area{position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999}
.popup_dark{position:fixed; top:0; left:0; background:#000; opacity:0.275; width:100%; height:100%; z-index:1}*/
.section3{width:100%; margin:0 auto; }
	.service{/*position:absolute; top:234px; left:4px; width:1106px;*/}
	.service ul{display:block; margin:0; width:100%; overflow:hidden;}
	.service ul li{float:left; display:block; padding:20px 25px 20px 20px; height:360px; text-align:center; font-size:14px;letter-spacing:-0.025em; color:#777;font-weight:600;}
	.service ul li a span.service1{display:block;background:url(../../images/main/section3_img1.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service1{display:block;background:url(../../images/main/section3_img1_on.png) no-repeat;}

	.service ul li a span.service3{display:block;background:url(../../images/main/section3_img3.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service3{display:block;background:url(../../images/main/section3_img3_on.png) no-repeat;}
	.service ul li a span.service4{display:block;background:url(../../images/main/section3_img4.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service4{display:block;background:url(../../images/main/section3_img4_on.png) no-repeat;}
	.service ul li a span.service5{display:block;background:url(../../images/main/section3_img5.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service5{display:block;background:url(../../images/main/section3_img5_on.png) no-repeat;}
	.service ul li a span.service6{display:block;background:url(../../images/main/section3_img6.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service6{display:block;background:url(../../images/main/section3_img6_on.png) no-repeat;}
	.service ul li a span.service7{display:block;background:url(../../images/main/section3_img7.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service7{display:block;background:url(../../images/main/section3_img7_on.png) no-repeat;}
	.service ul li a span.service8{display:block;background:url(../../images/main/section3_img8.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service8{display:block;background:url(../../images/main/section3_img8_on.png) no-repeat;}
    .service ul li a span.service9{display:block;background:url(../../images/main/section3_img9.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service9{display:block;background:url(../../images/main/section3_img9_on.png) no-repeat;}
    .service ul li a span.service10{display:block;background:url(../../images/main/section3_img10.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service10{display:block;background:url(../../images/main/section3_img10_on.png) no-repeat;}
    .service ul li a span.service11{display:block;background:url(../../images/main/section3_img11.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service11{display:block;background:url(../../images/main/section3_img11_on.png) no-repeat;}
	.service ul li a span.service12{display:block;background:url(../../images/main/section3_img12.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service12{display:block;background:url(../../images/main/section3_img12_on.png) no-repeat;}
	.service ul li a span.service13{display:block;background:url(../../images/main/section3_img13.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service13{display:block;background:url(../../images/main/section3_img13_on.png) no-repeat;}
	.service ul li a span.service14{display:block;background:url(../../images/main/section3_img14.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service14{display:block;background:url(../../images/main/section3_img14_on.png) no-repeat;}
	.service ul li a span.service15{display:block;background:url(../../images/main/section3_img15.png) no-repeat; width:248px; height:248px; padding-bottom:10px;}
	.service ul li a:hover span.service15{display:block;background:url(../../images/main/section3_img15_on.png) no-repeat;}
	
	.service ul li span.title{font-size:16px; font-weight:600; color:#333;margin-bottom:2px;}
	.service span.lang_kr{display:inline-block; background:url(../../images/main/lang_kr_on.png) no-repeat; background-size:auto 34px; width:34px; height:34px;margin:10px 4px;}
	.service span.lang_en{display:inline-block; background:url(../../images/main/lang_en_on.png) no-repeat; background-size:auto 34px; width:34px; height:34px;margin:10px 4px;}
	.service span.lang_ch{display:inline-block; background:url(../../images/main/lang_ch_on.png) no-repeat; background-size:auto 34px; width:34px; height:34px;margin:10px 4px;}
	.service span.lang_jp{display:inline-block; background:url(../../images/main/lang_jp_on.png) no-repeat; background-size:auto 34px; width:34px; height:34px;margin:10px 4px;}
	
.service_popup{position:relative; top:18%; width:1024px; height:590px;  padding:30px 40px 0 40px; z-index:1000; margin:0 auto; background: url(../../images/main/section3_bg.png) center no-repeat; background-size: cover; background-color:#fff;}
.service_popup span.btn_close{position:absolute;top:0; right:0; display:block;background:url(../../images/main/btn_close.png) no-repeat; width:49px; height:49px;}
.service_popup p{font-size:29px; font-weight: 600; color:#000; padding-bottom:15px;}
.service_popup p span{font-size:17px; font-weight: 600; color:#222; padding-top:0px;}
.service_popup dl dt{float:left;width:506px;}
.service_popup dl dd{float:left;position:relative;width:465px; height:465px; margin-left:42px;}
.service_popup dl dd ul{display:block;margin:0 0 0 0;}
.service_popup dl dd ul li{float:none; width:100%;background:url(../../images/main/section3_img_head.png) 0 4px no-repeat; height:auto;padding:0 0 4px 25px; font-weight:normal;text-align:left; font-size:12px; }
.service_popup dl dd ul li.tit{height:auto; background:none; padding:0 0 10px 0;font-weight:800; font-size:18px; color:#333;}
.service_popup dl dd ul li.last{margin-bottom:20px; height:auto;}
.service_popup dl dd ul li a{color:#54bc3f; text-decoration:none;}
.service_popup span.qr{position:absolute; left:0;}

/* 2017.04.21 update */
.text_tit_big{font-size:56px; font-weight:600; text-align:center; color:#000; line-height:1.2em; padding:68px 0 50px 0}
.text_tit{ font-size:46px; color:#000; text-align:center; letter-spacing:-0.05em; line-height:1.3em; padding:94px 0 35px 0}

.line2{background:url(../../images/main/odsay_img_line.png) center bottom no-repeat; width:100%; height:2px; padding-top:106px}

/* 2017.04.25 update */
.terms>.article>.terms_text h2{font-size:16px; font-weight:600; line-height:1em; color:#000; border-bottom:2px solid #000; margin-bottom:14px; padding-bottom:8px; padding-top:0;}

/* 2017.04.26 update */
.btn_top{position:absolute; right:24px; bottom:66px; width:33px; height:33px;background:url(../../images/com/icon_top.png) no-repeat}



/* 2018.01.24 update */
#gnb {
	position:absolute; left:180px; top:30px; width:808px; height:30px;
	margin:0; padding:0;
}

/*#gnb ul{display:inline-block; width:100%;} */
#gnb ul{display:flex; justify-content: center; width:100%;}
#gnb ul li {
	position:relative; float:left; width:16%; height:51px; 
	font-size:14px; line-height:29px; text-align:center; top:0; left:0;
	list-style-type:none;
    letter-spacing: -0.03em;
}
#gnb ul li:nth-child(2),#gnb ul li:nth-child(5){width:18%; white-space: nowrap}

#gnb ul li a {
	display:inherit;
	height:30px;
	letter-spacing: -0.015em;
	color:#aaa;
	padding:0 5px;
	text-decoration:none;
}

#gnb ul li a:hover,#gnb ul li:hover a {
	color:#fff;
}/* gnb 기본 */

#gnb ul li ul {
	display:none;
	position:absolute;
	background-color:#fff;
	padding:10px 0 12px 0; border:1px solid #555;
}
#gnb ul li:hover ul {
	display: block;
	width: 154px;
	position:absolute;
	top:51px; 
}
#gnb ul li:hover span.sign{position:absolute; left:0; top:42px; background:url(../../images/com/icon_sign.png) center 0 no-repeat; width:100%; height:20px; z-index:100}

#gnb ul li:hover ul li{
	float:none;
	position:static;
	width:100%; height:auto;
	text-align:left; font-size:13px;	
	color:#888;
	white-space:normal;
}
#gnb ul li:hover ul li a{display:inherit;
	height:26px;
	padding:0 5px 0 10px;
	text-decoration:none;
	color:#555; letter-spacing: -0.03em;
}
#gnb ul li:hover ul li:hover a{
	color:#ff9000;
}
#gnb ul li:hover ul li a sub{
	 height: 26px;
}
/* sub메뉴 */

#gnb ul li ul li ul.sub2 {
	display:none;
	position:absolute;
	background-color:#fff;
	padding:10px 0 12px 0; border:1px solid #555;
	width:200px;
}

#gnb ul li ul li:hover ul.sub2 {
	display: block;
	position:absolute;
	top:-1px; left:154px; width:180px;	
}
#gnb ul li ul li:hover ul.sub2 li{
	float:none;
	position:static;
	display:inline-block;
	text-align:left; font-size:13px;
	line-height:1.4em;
	padding:0 6px 0 0;
}
#gnb ul li ul li:hover ul.sub2 li a{
	display:inherit;
	height:26px;
	padding:0 6 0 0;
	text-decoration:none;
	color:#888	
}
#gnb ul li ul li:hover ul.sub2 li:hover a{
	color:#000
}


/* sub_sub메뉴 */

#gnb ul li ul li sub{float:right;display:inline-block; font-size:9px; vertical-align:middle; padding-right:2px}

#gnb a.on {
	color:#fff;
}

/* 2017.05.19 update */
.class_type{}
.class_type ul{display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 15px}
.class_type li{flex-basis:120px; flex-shrink:1;  flex-grow: 1; align-content: stretch; font-size: 13px;  border:1px solid #ccc; border-radius:3px; box-sizing:border-box; cursor: pointer; margin-left:17px; padding:20px 20px 15px}
.class_type li:first-child{margin-left:0}
.class_type li.on{background-color: #F2F9FF; border:2px solid #35A4F1}
.class_type li span.t1{display: block; height: 20px; font-size: 15px; font-weight: bold; color: #333; vertical-align: text-top; line-height: 1.2em}
.class_type li span.t2{display: flex; flex-direction: column; justify-content: center; font-size: 14px; font-weight: bold; color: #333; text-align: center; min-height: 40px; padding:15px 0 16px}
.class_type li span.t3{display: block; font-size: 13px; letter-spacing: -0.01em; line-height: 1.65em; color: #555; padding-bottom: 20px}
.class_type li span.t4{display: block; font-size: 14px;}
.class_type li sub{display: block; letter-spacing: -0.02em; padding-top:8px}
.class_type li span.icon_paypal{height:16px; background-size:auto 16px; margin-left:10px}

.class_type li.off,.payment_g.off{cursor: default}
.class_type li.off input[type=radio] + label,
.payment_g.off input[type=radio] + label{ background: url(../../images/com/radio_none.png)0 0 scroll no-repeat; cursor: default}

.class_type span.class_box{display:block; width:228px; height:250px; padding:20px; text-align:center; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; cursor: pointer}
.class_type span.class_text{display:flex; flex-direction: column; justify-content: center; width: 100%; height: 50px; font-size: 15px; color: #333; padding:18px 0 12px}
.class_type span.class_text1{display:block; width: 100%; font-size: 14px;  color: #333; text-align: left; letter-spacing: -0.025em; padding:0 0 18px 0; }
.class_type span.class_check{display:block; font-size:15px; font-weight: bold; line-height: 1.1em; color: #333;}
.class_type:first-child{margin-left:0}
span.class_box.on{background-color: #F2F9FF; border:2px solid #35A4F1;}

.pay_type{float:left; margin-bottom:10px; margin-left:17px}
.pay_type span.class_box{display:block; width:435px; height:160px; padding:20px; text-align:center; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; cursor: pointer}
.pay_type span.class_text{display:flex; flex-direction: column; justify-content: center; width: 100%; height: 50px; font-size: 15px; color: #333; padding:18px 0 12px}
.pay_type span.class_text1{display:block; width: 100%; font-size: 14px;  color: #333; text-align: left; letter-spacing: -0.025em; padding:0 0 18px 0; }
.pay_type span.class_check{display:block; font-size:15px; font-weight: bold; line-height: 1.1em; color: #333;}
.pay_type:first-child{margin-left:0}
span.class_box.on{background-color: #F2F9FF; border:2px solid #35A4F1;}

.pass{}
.pass_box{position: relative; margin-bottom: 10px}
.pass_box.inactive{opacity: 0.25; cursor: default}
.pass_box.inactive input,.pass_box.inactive label{cursor: default}
/*
.pass_box .pass_info{display: none}
.pass_box.on .pass_info{display: block}
.pass_block{position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; border:2px solid #d6d6d6; border-radius: 10px; padding:10px 0 15px; background-color: #fff; z-index: 10}
.pass_block span.t1{position: relative; flex-basis: 160px; margin-right: 10px;}
.pass_block span.t2{flex-basis: 170px; flex-grow: 1; align-self: center;}
.pass_block span.t3{flex-basis: 130px; flex-grow: 1;}
.pass_block span.t4{flex-basis: 140px; flex-grow: 1;}
.pass_block span.t_fare{display: flex; flex-direction: column; justify-content: center; font-size: 15px; font-weight: bold; color: #000; text-align: center; width:140px }
.pass_block span.t_fare span.stext{font-size: 12px; font-weight: normal; letter-spacing: -0.05em}
.pass_block span.pass_label{position:relative; display:inline-block; color: #fff; padding:4px 20px 6px 10px; border-radius: 0 20px 20px 0; min-width:72px;}
.pass_block span.pass_label input[type=radio]{position: absolute; left:0; top:0;}
.pass_block span.t_fare_row{display: flex; flex-direction: row; font-size: 15px; font-weight: bold; color: #000; justify-content: center;}
.pass_block span.t_fare_row span.stext{font-size: 12px; font-weight: normal; letter-spacing: -0.05em; padding-left: 4px; line-height: 2em;}
.pass_block span.pass_label label{font-size: 14px; font-weight: bold; line-height: 1.3em}
.p_basic span.pass_label{background-color: #aaa; padding-left: 39px;}
.p_standardT span.pass_label{background-color: #6ab9f2}
.p_standard span.pass_label{background-color: #80c96b; padding-left: 39px}
.p_standard span.t1 span.standard_class{position: absolute; top:34px; left:39px; font-size: 13px; font-weight: bold; color: #5bac43;}
.p_premium span.pass_label{background-color: #f6783c; padding-left: 39px}
.pass_block span a{display: block; width: 80px; font-size: 13px; font-weight: bold; color:#e65a17; line-height: 2em; border:2px solid #ffc0a3; border-radius: 30px; background-color: #fff; margin: 0 auto}
.p_choice span.pass_label{background-color: #ff4a83}
.p_flex span.pass_label{background-color: #6657c5; padding-left: 39px}
*/
/* 접기/펼치기 토글 */
.pass_box .pass_info { display: none; }
.pass_box.on .pass_info { display: block; }

/* 카드 블록 메인 레이아웃 */
.pass_block {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0 15px;
  border: 2px solid #d6d6d6;
  border-radius: 10px;
  background-color: #fff;

  span {
    &.t1 { position: relative; flex-basis: 160px; margin-right: 10px; }
    &.t2 { flex: 1 1 170px; align-self: center; }
    &.t3 { flex: 1 1 130px; align-self: center;}
    &.t4 { flex: 1 1 140px; align-self: center;}

    &.t_fare, &.t_fare_row {
      display: flex;
      font: bold 15px sans-serif;
      color: #000;
      justify-content: center;

      .stext {
        font: normal 12px sans-serif;
        letter-spacing: -0.05em;
      }
    }

    &.t_fare {
      flex-direction: column;
      text-align: center;
      width: 140px;
    }

    &.t_fare_row .stext {
      padding-left: 4px;
      line-height: 2em;
    }

    &.pass_label {
      position: relative;
      display: inline-block;
      min-width: 80px;
      padding: 4px 20px 6px 16px;
      border-radius: 0 20px 20px 0;
      color: #fff;

      input[type="radio"] { position: absolute; inset: 0 auto auto 0; }
      label { font: bold 14px/1.3em sans-serif; }
    }

    a {
      display: block;
      width: 80px;
      margin: 0 auto;
      border: 2px solid #ffc0a3;
      border-radius: 30px;
      background-color: #fff;
      font: bold 13px/2em sans-serif;
      color: #e65a17;
    }
      a.apply{border-color: #b8afef; color: #897aed; margin-top:4px;}
  }
}

.p_basic .pass_label     { background-color: #aaa; padding-left: 40px; }
.p_standardT .pass_label { background-color: #6ab9f2; }
.p_standard .pass_label  { background-color: #80c96b; padding-left: 40px; }
.p_premium .pass_label   { background-color: #f6783c; padding-left: 40px; }
.p_choice .pass_label    { background-color: #ff4a83; }
.p_flex .pass_label      { background-color: #6657c5; padding-left: 40px; }

/* 기타 커스텀 포지션 */
.p_standard span.t1 span.standard_class {
  position: absolute;
  top: 34px;
  left: 39px;
  font: bold 13px sans-serif;
  color: #5bac43;
}

.pass_box.on .p_basic{border-color:#777}
.pass_box.on .p_standardT{border-color:#6ab9f2}
.pass_box.on .p_standard{border-color:#80c96b}
.pass_box.on .p_premium{border-color:#f6783c}
.pass_box.on .p_choice{border-color:#ff4a83}

.pass_option{position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; font-size: 12px; border:1px solid #ddd; border-radius: 0 0 8px 8px; border-top:0; background-color: #fff; padding:8px 15px 8px 25px; margin:0 20px; z-index: 5}
.pass_option span.t1{flex-basis: 115px; font-size: 14px; font-weight: bold; color: #333;}
.pass_option span.t2{flex-basis: 320px;flex-grow: 1;}
.pass_option span.t3{flex-basis: 150px;flex-grow: 1; text-align: right}
.pass_option span.icon_plus{position: absolute; top:8px; left:-10px;}

.btn_box_right{position: absolute; right:0; top:10px; display: inherit;  vertical-align: middle}
.icon_plus{position: relative; top:0; left:0; display: inline-block; width: 20px; height: 20px; background: url(../../images/com/icon_plus.png) no-repeat}
.icon_q{position: relative; display: inline-block; width: 18px; height: 34px; background: url(../../images/com/icon_q.png) center no-repeat; background-size: 17px auto; vertical-align: middle}
.q_tip{position: absolute; right:0; top:29px; display: inline-block; min-width: 300px; max-width:400px; font-size: 11px; padding:8px 8px 10px 10px; background-color: #fff; border:1px solid #ccc; border-radius: 3px; z-index: 10}
a.icon_q span.q_tip{display: none}
a.icon_q:hover span.q_tip{display: block}
.pass_info{position: relative; display: inherit; background-color: #f4f4f4; border-radius: 0 0 8px 8px; padding:60px 25px 20px 25px; margin-top:-50px; z-index: 1}
.pass_info p{font-size: 13px; font-weight: 500; line-height: 1.6em;}

.pass_table_box{position: relative}
.pass_table_box.bar{border-bottom:1px solid #dcdcdc;}
table.pass_table{width: 100%; font-size: 12px; border-collapse: collapse;}
table.pass_table thead{width: auto; height:30px; vertical-align: middle; background-color: #555555; border:1px solid #555555;}
table.pass_table thead th{height:30px; font-size: 12px; line-height: 1.6em; color: #fff; text-align: center; vertical-align: middle; padding:0}
table.pass_table thead td{height: 15px; font-size: 12px; line-height: 1em; color: #fff; text-align: center; vertical-align: middle;}
table.pass_table tbody{background-color: #fff; text-align: center; border:1px solid #dcdcdc;}
table.pass_table tbody th{height:30px; font-size: 12px; line-height: 1.6em; color: #fff; background-color: #555; border:1px solid #dcdcdc;}
table.pass_table tbody td{font-size: 12px; line-height: 1.6em;  border-bottom:1px solid #dcdcdc; padding:10px}
table.pass_table td{min-width: inherit; word-break: normal; padding:8px 0}
table.pass_table tfoot td{padding-top:15px; font-size: 12px;}


ul.table_total{display: flex; flex-direction: column; font-size: 13px; padding:10px;}
ul.table_total li{display: flex; flex-direction: row; flex-wrap: nowrap; letter-spacing: 0em; margin-bottom: 8px; padding-right: 10px}
ul.table_total li span.t1{flex-basis: 40%; justify-content: flex-start;  font-size: 13px; color: #666}
ul.table_total li span.t2{flex-basis: 60%; justify-content: flex-end;  font-size: 13px; font-weight: bold; color: #000; text-align: right;}

/* 2017.06.30 update */
.center_block{width:380px; margin:0 auto}

/* 2017.09.15 update */
.mark_gcs{position:absolute; right:140px; top:2px; display: inline-block; background: url(../../images/main/icon_gcs.png) center no-repeat; width:100px; height:35px }

/* 2017.09.18 update */
.box_list{position: relative; border-bottom:1px solid #555; padding:20px 30px 30px 30px; margin-bottom:20px }
.box_list>h3{font-size:30px; padding:0; margin:0}
.box_list>h3 sub{display: block; font-size:14px; font-weight: normal; color:#888; padding:6px 0 0 4px}
.box_list>h3 a{position: absolute; right:30px; top:42px; text-align: center; display:inline-block; font-size:17px; line-height:54px; text-decoration:none; width:206px; height:54px;  color:#fff; border-radius:3px; background:#299ff6}

/* popup_main */
.popup_main{position:relative; width:400px; height: 598px; border:2px solid #ffffff; background:#f57d1e; z-index: 101;}
.src_img{width:400px; height: 556px; background: #fff; overflow: hidden}
.src_img img{border-bottom: 2px solid #e9e9e9}
.popup_link{position:absolute; top:484px; width:100%; text-align: center}
.popup_link a{display: inline-block; font-size: 15px; font-weight: bold; height: 48px; line-height: 3.3em; background: #f57d1e; color: #fff; border-radius: 48px; padding: 0 35px}
.popup_bottom{position: absolute; bottom:0; display: block; width: 100%; height: 24px; overflow: hidden; clear: both; vertical-align: middle; padding:9px 0; background: #fff}
.popup_bottom span.check_today{float:left; display: inline-block; padding-left:12px; }
.popup_bottom span.check_today input[type=checkbox]+label{padding-left:25px; height:19px; background-size:18px auto; opacity: 1}
.popup_bottom span.check_today input[type=checkbox]:checked+label{background-position: 0 -20px}
.popup_bottom span.check_today label{font-size:12px; line-height: 1.55em; color: #000}
.popup_bottom span.btn{float:right; padding-right:11px}
.popup_bottom span.btn a.btn_close{display: block; width:22px; height: 22px; background: url(../../images/popup/btn_close.png) center no-repeat; background-size:auto 18px; }


.popup_main_pr{position:fixed; width:404px; height: 598px; top:80px; left:25px; border:1px solid #ddd; background:#fff; z-index: 100000;}
.pr_head{display: block; width: 404px; height: 77px; background: url(../../images/popup/pr_popup_head.png) no-repeat}

.pr_img{display: block; width: 380px; height: 475px; margin:0 0 10px 12px}

.src_text{width:400px; height: 556px; background: #fff}
.src_text p.title{font-size:24px; font-weight: bold; text-align: center; color: #fff; letter-spacing: -0.03em; padding:45px 15px 30px 15px; background: #f57d1e}
.src_text pre{font-size:14px;padding:25px 20px 20px 20px; letter-spacing: -0.02em}
.src_text pre a{font-weight: bold; color: #f57d1e}
.src_text pre strong{display: inline-block; color:#333; padding:0 0 4px 0}

/*** 20190927 ***/
.banner_left{position: fixed; left:0; top:20%}
.banner_left span{}
.banner_left span a{display: block; margin-bottom: 8px}

/*** 20191210 **/
/** aside **/
aside{position: fixed; top:140px; left:24px; z-index: 100}
aside li{font-size:18px; line-height: 21px; text-align: center}
aside li.t1{font-size:13px; line-height: 14px}
aside li.t2{font-size:14px; line-height: 7.5em}
aside li sub{display: block; font-size:9px; line-height: 21px; color: #999; font-weight: 500; padding:25px 0 2px 0}
aside li a{display:inherit; width:92px; height:104px; background: url(../../images/main/aside_link1.png) no-repeat; color: #fff}
aside li a:hover{background: url(../../images/main/aside_link1_on.png) no-repeat; font-weight: 500}
aside li a:hover sub{color: #fff}

/* body{background-color: #f9f9f9} */
.slogan_bl{display: block; background: url(../../images/main/slogan_b.png) center no-repeat; width:230px; height:18px; margin: 0 auto; margin-bottom: 0px; margin-top:10px;}
.slogan_w{display: block; background: url(../../images/main/slogan_w.png) center no-repeat; width:230px; height:18px; margin: 0 auto; margin-top: 21px}

.box_od_area{position: relative; display: block; width: 975px; height:562px; margin: 0 auto; margin-top:100px; margin-bottom: 150px}
.box_o{position: absolute; width:562px; height: 562px; background: url(../../images/main/img_o.png) no-repeat; z-index: 2}
.box_d{position: absolute; left:490px; display: block; width: 487px; height: 562px; background: url(../../images/main/img_d.png) no-repeat; z-index: 1}
.box_d_title{margin-top:122px; margin-left:96px}
.box_d_title p{padding-top:20px; font-size: 13px; color: #888; letter-spacing: -0.01em;}
.box_d_title p span.t_bold{display: block; font-size:14px; padding-top: 15px; color: #555}

.icon_check{display: inline-block; background: url(../../images/com/icon_check_gray.png) center 3px no-repeat; width: 20px; height: 20px; margin-right:3px; vertical-align: middle}
.icon_check_org{display: inline-block; background: url(../../images/com/icon_check_org.png) center 3px no-repeat; width: 20px; height: 20px; margin-right:3px; vertical-align: middle}
.icon_mail{display: inline-block; background: url(../../images/com/icon_email_w.png) center 3px no-repeat; width: 20px; height: 20px; margin-right:5px; vertical-align: middle}
.icon_paypal{display: inline-block; background: url(../../images/com/img_paypal.png) no-repeat; background-size: auto 20px; width: 70px; height: 20px; margin-right:3px; vertical-align: middle;}

.payment_g{display: flex; flex-direction: row; flex-wrap: nowrap}
.payment_g span{flex-basis: 20%}
.price_lg{font-size: 24px; font-weight: bold; color: #555; letter-spacing: -0.025em; vertical-align: middle}
.price_lg sub{font-size: 13px; font-weight: normal; vertical-align: middle; padding-left:4px}

.ticket_area{}
.ticket_area span.ticket_num{display: block; padding-bottom: 10px}
.ticket_area span.ticket_input input{width: 180px; height: 34px}
.ticket_area span.ticket_input a{font-size: 13px; height: 34px; line-height: 2.6em; margin-left:5px}

.title_head{display: block; font-size: 15px; font-weight: bold; color: #333; padding-bottom: 15px}

.btn_delete{display:inline-block; background: url(../../images/com/icon_del_red.png) 15px center no-repeat; font-size:13px; font-weight: bold; line-height:32px; text-align:center; text-decoration:none; height:32px; color:#F2685E; vertical-align:middle; padding:0 20px 0 40px; border:1px solid #F2685E; border-radius:3px}

.info_text{display: block; font-size: 12px; color: #555; line-height: 1.7em; letter-spacing: -0.0185em; padding:10px 0}
.info_text a{text-decoration: underline; color: #2a9ff6}

.tab_period{display: inline-flex; flex-direction: row; flex-wrap: nowrap; line-height: 2.5em}
.tab_period a{width: 65px; height: 32px; text-align: center; font-size: 13px;  color: #555; border:1px solid #dcdcdc; border-right:0}
.tab_period a:first-child{border-radius: 3px 0 0 3px}
.tab_period a:last-child{border-radius: 0 3px 3px 0; border-right: 1px solid #dcdcdc}
.tab_period a.on{color: #fff; background-color:#555; border-color: #555 }

a.btn_m1{display: inline-block; width:100px; height: 34px; font-size: 14px; font-weight: bold; color: #fff;  text-align: center; line-height: 2.3em; background-color: #555; border-radius: 3px; margin:0 5px }

a.btn_search{display: inline-block; width:100px; height: 34px; font-size: 14px; font-weight: bold; color: #fff;  text-align: center; line-height: 2.3em; border-radius: 3px; margin:0 5px; background: url(../../images/com/icon_search.png) center no-repeat; background-color: #555; text-indent: -5000px; overflow: hidden; vertical-align: middle}

.text_box{display: block; font-size: 13px;  padding:20px; border:1px solid #D6D6D6; border-radius: 3px; margin-bottom: 20px}
.text_box span.tit{display: block; font-size: 15px; font-weight: bold; color: #333; padding-bottom: 15px}

.price_type{padding:40px 30px 30px}
.price_type ul{display: flex; flex-direction: row; flex-wrap: nowrap; }
.price_type li{position: relative; flex-basis:228px; flex-grow: 1; align-content: stretch; font-size: 15px; text-align: left; border:2px solid #999; border-radius:8px; box-sizing:border-box; margin-left:30px; padding:45px 40px 25px; clear: both}
.price_type li:first-child{margin-left:0}
.price_type li span.t1{display: block; color: #555; line-height: 1.65em; padding:18px 0; border-top: 1px solid #E1E3E6; overflow: hidden}
.price_type li span:first-child{border-top: 0}
.price_type li span.t2{float:right; display: block; width: 165px; font-weight: bold; color: #333; }
.price_type span.tit_basic{position: absolute; top:-34px; left:44px; display: block; width: 260px; height: 60px; font-size: 20px; font-weight: bold; color: #fff; text-align: center; line-height: 3em; background-color: #aaa; border-radius: 60px}
.price_type span.tit_standard{position: absolute; top:-34px; left:44px; display: block; width: 260px; height: 60px; font-size: 20px; font-weight: bold; color: #fff; text-align: center; line-height: 3em; background-color: #76C96F; border-radius: 60px}
.price_type span.tit_premium{position: absolute; top:-34px; left:44px; display: block; width: 260px; height: 60px; font-size: 20px; font-weight: bold; color: #fff; text-align: center; line-height: 3em; background-color: #FF7944; border-radius: 60px}

.print_area{position: relative; text-align: right; width: 100%; height: 40px; margin-bottom: 10px}
.print_area a{margin-left:10px}
.card_area{width: 100%; height: auto; overflow-y: auto}
.btn_email{display: inline-block; width:40px; height: 40px; background: url(../../images/com/icon_email.png) center no-repeat}
.btn_print{display: inline-block; width:40px; height: 40px; background: url(../../images/com/icon_print.png) center no-repeat}
.btn_download{display: inline-block; width:40px; height: 40px; background: url(../../images/com/icon_download.png) center no-repeat}

.box_red{display: flex; flex-direction: column; justify-content: center; min-height: 270px; border:3px solid #F2685E; border-radius: 12px; padding:20px; text-align: center; margin-bottom: 20px}
.box_red span.title{display: block; font-size: 20px; font-weight: bold; color: #333; padding:10px 0}
.box_red p{font-size: 17px}

.tx_eng{font-size: 12px; font-weight: normal; letter-spacing: -0.02em; line-height: 1.5em; color: #888}
h2 span.tx_eng{font-size: 17px; letter-spacing: 0em; padding:0 5px}
h3 span.tx_eng{font-size: 13px; font-weight: normal; letter-spacing: 0em; padding:0 5px}
.article a span.tx_eng{font-size: 13px; color:#2a9ff6; padding: 0 5px}
.article img{max-width: 888px; height: auto; }
.tx_op{opacity: 0.9}

.faq_tit span.tx_eng{font-size: 15px; color:#f3a900;}

.dv_page{}
.dv_title{display: block; font-family:-apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim; padding:48px 0 40px; }
.dv_title span.t1{display: block; font-size: 38px; color: #000; text-align: center; letter-spacing: -0.08em; padding-bottom: 28px }
.dv_title span.t2{display: block; font-size: 18px; color: #666; text-align: center; letter-spacing: -0.04em; line-height: 1.65em; padding-bottom: 25px}
.dv_title span.t_date{display: flex; justify-content: center}
.dv_title span.t_date dl{display: flex; flex-basis: 550px; flex-direction: row; flex-wrap: nowrap; font-size: 17px; letter-spacing: -0.03em; padding:25px; background-color: #f7f7f7; border-radius: 12px;}
.dv_title span.t_date dt{flex-basis: 148px; font-weight: bold; color:#fe5f27; padding:2px 0 0 14px }
.dv_title span.t_date dd{flex-grow: 1; font-size: 16px; color: #333; line-height: 1.85em; left: -0.03em}
.dv_title span.btn_area{display: block; text-align: center; margin:32px 0 10px}
.dv_title span.btn_area a{display: inline-block; font-size: 20px; color:#fff ; line-height: 2.7em; width: 200px; height: 50px; border-radius: 50px; background-color: #ff703e}
.dv_page h3{ border-top:1px solid #666; padding: 30px 0 25px 0}
.dv_page p{font-size:15px; color: #666; line-height: 1.75em; letter-spacing:-0.02em; margin-bottom: 60px}
.dv_page p img{display: block; margin: 0 auto;}
.dv_page p.img_box{margin: 60px 0 80px;}
.dv_page p.img_box1{margin: 10px 0 60px;}
.dv_page p.img_box_text{display: block; margin: 10px auto 40px;}

.btn_contact{display: block; width: 100%; height: 50px; text-align: center; font-size: 15px; font-weight: bold; color: #fff; line-height: 3.25em; background-color: #fe9727; border-radius: 3px}
.btn_contact span.icon{display: inline-block; width: 30px; height: 30px; background: url(../../images/com/icon_mail.png) center no-repeat; background-size: 24px auto; background-color: #fff; border-radius: 30px; vertical-align: middle; margin-left:10px}

.dv_page h3.year{font-size: 42px; font-weight: bold; color: #333; text-align: center; padding-bottom: 25px;}
.dv_case{position: relative; display: inherit; padding-bottom: 50px}
.dv_case span.case_logo{position: absolute; top:0px; left:50px; width: 168px; height: 168px; border:3px solid #000; border-radius: 10px; overflow: hidden; z-index: 10}
.dv_case span.case_logo img{}
.dv_case span.case_note{position: relative; top:35px; left:95px; display: flex; flex-direction: column; width: 746px; padding:25px 0; background-color: #f7f7f7; border-radius: 6px; margin-bottom: 50px; z-index: 1}
.dv_case span.case_note span.case_text{display: flex; flex-direction: row; flex-wrap: nowrap; margin-left:166px; font-family:-apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim; }
.dv_case span.case_note span.case_text span.t1{flex-basis: 140px; flex-grow: 0; font-weight: 900}
.dv_case span.case_note span.case_text span{flex-grow: 1; font-size: 14px; color: #333; line-height: 1.75em; padding:0 0 10px 0}

.p_bottom{margin-bottom: 20px}
.p_bottom a{color: #35a4f1; text-decoration: underline;}

.page_text{text-align: center; margin-bottom: 30px}
.page_text h3{margin-bottom: 30px}

.notice_area{padding:20px 30px 30px; border:2px solid #ddd; border-radius: 8px; margin-bottom: 50px}
.notice_area span.title{display: block; font-size: 13px; font-weight: bold; text-align: center; padding-bottom: 15px}
.notice_area p{font-size: 13px; color: #666; letter-spacing: -0.01em; padding-bottom: 10px}

.notice_box{padding:60px 0}
.notice_box span.title{display: block; font-size: 24px; font-weight: bold; text-align: center; color: #333; padding:40px 0 0 0}
.notice_box .btn_bottom{margin-bottom:60px}

.h_l{display: block;height: 350px;}

.text_layer_r{position: absolute; right:10px; top:-28px;}
.table_title{display: block; font-size:14px; font-weight: bold; letter-spacing: -0.01em; color: #333; text-align: left; vertical-align: baseline; padding:0 0 10px 0;}

.ticket_box1{display: flex; flex-direction: row; flex-wrap: nowrap; margin: 30px 0 0px; background-color: #f7f7f7; border-radius: 8px; padding:30px 20px 30px 0px}
.box1{flex-basis: 50%; text-align: center; }
.box2{flex-basis: 50%; text-align: center; border-left:1px solid #dedede}
.ticket_box1 span.tit{display: block; font-size: 20px; font-weight: bold; color: #333; padding:30px 0 12px}
.ticket_box1 span.ticket{display: block; font-size: 20px; font-weight: bold; color: #f57a1f; padding-bottom: 50px}
.ticket_box1 span.ticket_label{ display: inline-block; padding-bottom: 5px}
.ticket_box1 span.ticket_label span.icon_admin,
.ticket_box1 span.ticket_label span.icon_r1,
.ticket_box1 span.ticket_label span.icon_r2,
.ticket_box1 span.ticket_label span.icon_r3,
.ticket_box1 span.ticket_label span.icon_r4{width:32px; height:32px; background-size: 32px auto}
.ticket_box1 span.ticket_month{display: block; font-size: 13px; color: #555;/*color:#0e62c2*/}


.ticket_box2{display: flex; flex-direction: row; flex-wrap: nowrap;  margin-bottom: 50px; border:2px solid #ddd; border-radius: 8px; padding:30px 20px}
.ticket_box2 span.ticket_label{display: flex; flex-basis: 20%; justify-content: center; padding-top:10px}
.ticket_box2 span.ticket_label span.icon_admin,
.ticket_box2 span.ticket_label span.icon_r1,
.ticket_box2 span.ticket_label span.icon_r2,
.ticket_box2 span.ticket_label span.icon_r3,
.ticket_box2 span.ticket_label span.icon_r4{width:64px; height:64px; background-size: 64px auto}
.ticket_box2 span.ticket_label_info{line-height: 1.8em}
.ticket_box2 span.ticket_label_info a{text-decoration: none;}

/** news **/
.board_news{display: flex; flex-direction: row; flex-wrap: wrap}
.board_news a, .board_news strong a, .board_news a strong {color: #f5901a}


.board_news_search{position: absolute; right:0; top:0;}
.board_news_search a,.board_news_search a:hover{float: right; display: inline-block; height:28px; font-size: 13px; background: #999; line-height: 28px; color: #fff; padding:0 10px}
.board_news_search input{width:150px; height: 28px}

.board_news_login{display: block; width:360px; border: 2px solid #333; padding-bottom:30px; margin: 30px auto 0}
.board_news_login input{width:200px; margin:0 auto; margin-bottom:10px}

.board_news_bottom{position:relative; display:block; margin-top:30px; height: 44px; text-align: center; overflow: hidden}
.board_news_bottom a:nth-child(1n+1){margin-left:10px}

.board_news dl{display: flex; flex-direction: column; border-top:2px solid #454545;}
.board_news dl.line_none{border-top:none; margin-top:-20px}
.board_news dt{display:flex; flex-direction: column; font-size:15px; font-weight: 500; line-height: 24px; text-align: left; color: #333; border-bottom: 1px solid #999; padding:15px 20px 10px 20px}

.board_news dt span.date{display:block; font-size: 12px; font-weight: 100; text-align: left; color: #999; padding-top:4px}
.board_news dd{text-align: left; font-size: 14px; line-height: 26px; padding:20px 20px 20px 20px; word-break: break-all}

.board_news dt span.title{flex-basis: 120px; text-align: center; padding-right:20px}
.board_news dt span.input_subject{flex-basis: 840px;}
.board_news dt span.input_subject input{width:100%}
.board_news dd span.editer{display: block; background-color:antiquewhite}
.board_news dd.line{border-bottom:1px solid #ccc; padding:20px 20px 20px 20px}
.board_news dd img, .board_news dd p img{max-width:760px; width:100%; height: auto; padding:20px 0}

ul.input_list{display:flex; flex-direction: column}
ul.input_list li{display: flex; flex-direction: row; font-size: 14px; font-weight: normal; padding-bottom: 10px}
ul.input_list li:last-child{padding-bottom: 0}

.tabmenu{padding:0 25px 25px 25px;}
.tabmenu ul{display: flex; width: 100%; flex-direction: row; flex-wrap: nowrap; justify-content: center; text-align: left;}
.tabmenu li{display: flex; flex-basis: 25%; height: 50px; cursor: pointer}
.tabmenu li span.tab_text{display: flex; flex-direction: column; justify-content: center; font-size: 15px; line-height: 1.25em; letter-spacing: -0.03em;}

.tabmenu li.on span.m1_1,
.tabmenu li.on span.m1_2,
.tabmenu li.on span.m1_3,
.tabmenu li.on span.m1_4,
.tabmenu li.on span.m2_1,
.tabmenu li.on span.m2_2,
.tabmenu li.on span.m3_1,
.tabmenu li.on span.m3_2{background-position: 0 -50px; background-color:#ed9a02; border-radius: 50px }
.tabmenu li.on span.tab_text{color:#ed8702}

.board_info{display: block; font-size:12px; color: #888; /*text-align: right;*/ padding:5px 10px 15px 10px; margin-top:-5px;}

.p_subT{display: block; padding-bottom: 10px}

.table_style2 .ticket_box2{display:flex; flex-direction: column; margin:0; border:0}
.table_style2 .ticket_box2 span.ticket_label{margin:0 auto}
.table_style2 .ticket_box2 sub{font-weight: bold; text-align: center; padding:5px 0 0 0}
	strong.text_org{text-decoration: underline}
.stext1{font-size:13px}

.contact_pass{padding:0 0}
.contact_pass .pass_box{margin-bottom: 20px}
.contact_pass .pass_box.on .pass_block.p_basic,
.contact_pass .pass_box.on .pass_block.p_standardT,
.contact_pass .pass_box.on .pass_block.p_standard,
.contact_pass .pass_box.on .pass_block.p_premium,
.contact_pass .pass_box.on .pass_block.p_choice
{border-color: #d6d6d6}
.contact_pass span.pass_label{padding-left:40px; padding-right:40px;  white-space: nowrap}
.contact_pass span.t2{padding-left:40px}
.contact_pass span.t_fare{padding-right:40px}
.contact_pass a{text-decoration: none}
.contact_pass .pass_info{padding-left:40px}

.contract{color:#000;}
.contract .scroll_area{padding: 20px 10px 30px 10px; border-bottom: 0}
.contract .popup_title{display: block; font-size:24px; font-weight:600; text-align: center; padding-bottom: 15px; border-bottom:2px solid #000; }
.contract h3{font-size: 14px; padding:20px 0 6px}
.contract p{font-size:13px; line-height: 1.65em; word-break: keep-all}
.contract ul{display: block; padding: 10px 10px 20px 30px}
.contract li{font-size: 13px; line-height: 1.65em; word-break: keep-all; padding-bottom: 10px}
.contract span.icon{display: inline-block; margin:0 6px 0 -20px}
.contract ul.style1{padding:10px 10px 20px 20px; margin:10px 0}
.contract ul.style1 li{padding-bottom: 8px}

/** 가로형 썸네일 게시판 **/
.thumbnail{display: block; text-align: left; background-color: #fff; overflow: hidden; border:2px solid #eee; cursor: pointer; margin-top:30px}
.thumbnail:first-child{margin-top:0}
.thumbnail:hover{border-color: #f6ad3c}
.thumbnail img.thumb{float:left; width:320px; height: 214px; margin-right:25px}
.thumbnail.caption{}
.thumbnail h4{
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 라인수 */
	height:48px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 17px; color: #333; line-height: 1.5em; letter-spacing: -0.03em; padding:35px 25px 0 0;}

.thumbnail p{
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 라인수 */
	height:44px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 14px; color: #666; line-height: 1.5em; padding:15px 25px 0 0;}
.caption span.date{
	position:relative;
	display: inline-block;
	font-size: 13px; color: #999; 
	padding:10px 30px 0 0;
	background-image: none;
	width:auto;
	height: auto;
	line-height:2.8em;
	text-indent:0;
	border:none;
	border-radius:0; 
	z-index:inherit

}



.icon_notice{display: inline-block; height:24px; background: url(../../images/board/icon_notice.png) no-repeat; vertical-align: text-top; padding-right:30px}

/** 세로형 썸네일 게시판 **/
.board_thumbnail_row{display: flex; flex-direction: row; flex-wrap: wrap;}
.board_total{display: block; font-size: 11px; padding-bottom: 10px}

.board_thumbnail_row .thumbnail{display: flex; flex-direction: column; width: 280px; height: 400px; box-sizing: border-box; background-color: #fff; overflow: hidden; border:1px solid #ddd; cursor: pointer; margin-left:24px; margin-bottom: 24px; font-family:-apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim;}
.board_thumbnail_row .thumbnail{margin-top:0}
.board_thumbnail_row .thumbnail:nth-child(3n+1){margin-left:0}
.board_thumbnail_row .thumbnail img.thumb{display: block; width: 280px; height: 280px;}
.board_thumbnail_row .thumb_box{display: block; width: 280px; height: 280px; overflow: hidden;  vertical-align: top;}
.board_thumbnail_row .thumb_box img{width:100%; height: auto;} 
.board_thumbnail_row .thumb_box img.thumb{}
.board_thumbnail_row .caption h4{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	max-height:30px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 14px; font-weight: bold; color: #333; line-height: 1.5em; letter-spacing: -0.05em; padding:15px; word-break:keep-all}
/*.board_news .caption p{
	display: -webkit-box;
	-webkit-line-clamp: 4; 
	height:70px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 13px; color: #666; line-height: 1.5em; letter-spacing: -0.05em; padding:6px 15px 15px; word-break:keep-all;
}*/
/*.caption{display: block; }*/
/*
.caption h4{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	max-height:50px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 14px; font-weight: bold; color: #333; line-height: 1.5em; letter-spacing: -0.05em; padding:15px; word-break:keep-all}
.board_news .caption p{
	display: -webkit-box;
	-webkit-line-clamp: 4; 
	height:70px;
    -webkit-box-orient: vertical;
	word-wrap:break-word;
	text-overflow: ellipsis; overflow: hidden;
	font-size: 13px; color: #666; line-height: 1.5em; letter-spacing: -0.05em; padding:6px 15px 15px; word-break:keep-all;
}
*/
.caption .news_date{display: block; font-size: 12px; color: #888; padding:10px 15px; overflow: hidden}

.caption span.info_g{display: flex; flex-direction: column; padding:12px 15px 15px; color: #666}
.caption span.info1{display: block; font-size: 12px; font-weight: bold; color: #555; padding-bottom: 10px}
.caption span.info2{display: flex; flex-direction: row; flex-wrap: nowrap; font-size: 11px; font-weight: normal; color: #888}
.caption span.info2_date{flex-grow: 1}
.caption span.info2_etc{}
.caption span.info2_etc span{display: inline-block; padding-left:5px}

dl.thumb_src{display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 10px; background-color: #f7f7f7; box-sizing: border-box}
dl.thumb_src span.title{display: inline-block; padding-right:20px; font-size: 14px; font-weight: bold; color: #000; vertical-align: middle}
dl.thumb_src a.btn_s1{background-color: #fff;}
dl.thumb_src dt{position: relative; flex-basis: 160px; flex-shrink: 0; flex-grow: 0; width: 160px; height: 160px; margin-right: 10px; border:1px solid #eee}
dl.thumb_src dt img{width: 100%; height: 100%}
dl.thumb_src dt a.btn_close{position:absolute; top:0; right:0; display:block;background:url(../../images/main/btn_close.png) no-repeat; background-size: 28px auto; width:28px; height:28px;}
dl.thumb_src dd{width: 600px; font-size: 12px; text-align: left; padding:10px 15px 0 15px}

.board_thumbnail table.list{width: 100%; border-collapse: collapse; border-top:2px solid #454545; vertical-align: middle}
.board_thumbnail table.list tr.on{background: #fffcf1}
.board_thumbnail table.list tr.on td.number{font-size:13px; font-weight: 500; color:#ffad17}
.board_thumbnail table.list tr:hover{background: #f9f9f9; cursor: pointer}
.board_thumbnail table.list td{padding:15px 0; line-height: 26px; vertical-align: middle; border-bottom: 1px solid #ccc}
.board_thumbnail table.list td.number{/*width:100px;*/ font-size: 12px; font-weight: 100; text-align: center; color: #999}
.board_thumbnail table.list td.subject{max-width:700px; font-size:15px; font-weight: normal; text-align: left; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left:10px; padding-right:70px}
.board_thumbnail table.list td.date{/*width:120px;*/ font-size: 12px; font-weight: 100; text-align: center; color: #999}

.board_thumbnail .thumbnail{height:425px}
.board_thumbnail .thumb_box{display: block; width: 280px; height:280px}
.board_thumbnail .thumb_box img{width: 100%; height:100%;}

.board_thumbnail_view table{/*width: 100%; border-collapse: collapse; border:0; vertical-align:middle*/}
.board_thumbnail_view table tr.on{/*background: ;*/}
.board_thumbnail_view table tr.on td.number{/*font-size:13px; font-weight: 500; color:#ffad17*/}
.board_thumbnail_view table tr:hover{/*background: #f9f9f9; cursor: pointer*/}
.board_thumbnail_view table td{/*padding:15px 0; line-height: 26px; vertical-align: middle; border-bottom: 1px solid #ccc*/}

.board_thumbnail_search{position: absolute; right:0; top:0;}
.board_thumbnail_search a,.board_thumbnail_search a:hover{float: right; display: inline-block; height:28px; font-size: 13px; background: #999; line-height: 28px; color: #fff; padding:0 10px}
.board_thumbnail_search input{width:150px; height: 28px}

.board_thumbnail_login{display: block; width:360px; border: 2px solid #333; padding-bottom:30px; margin: 30px auto 0}
.board_thumbnail_login input{width:200px; margin:0 auto; margin-bottom:10px}

.board_thumbnail_bottom{position:relative; display:block; margin-top:30px; height: 44px; text-align: center; overflow: hidden}
.board_thumbnail_bottom a:nth-child(1n+1){margin-left:10px}

.board_thumbnail dl{display: flex; flex-direction: column; border-top:2px solid #454545;}
.board_thumbnail dl.line_none{border-top:none; margin-top:-20px}
.board_thumbnail dt{display:flex; flex-direction: column; font-size:15px; font-weight: 500; line-height: 24px; text-align: left; color: #333; border-bottom: 1px solid #999; padding:15px 20px 10px 20px}

.board_thumbnail dt span.date{display:block; font-size: 12px; font-weight: 100; text-align: left; color: #999; padding-top:4px}
.board_thumbnail dd{text-align: left; font-size: 14px; line-height: 26px; padding:20px 20px 20px 20px; word-break: break-all}

.board_thumbnail dt span.title{flex-basis: 120px; text-align: center; padding-right:20px}
.board_thumbnail dt span.input_subject{flex-basis: 840px;}
.board_thumbnail dt span.input_subject input{width:100%}
.board_thumbnail dd span.editer{display: block; background-color:antiquewhite}
.board_thumbnail dd.line{border-bottom:1px solid #ccc; padding:20px 20px 20px 20px}
.board_thumbnail dd img, .board_thumbnail dd p img{max-width:760px; width:100%; height: auto; padding:20px 0}

ul.input_list{display:flex; flex-direction: column}
ul.input_list li{display: flex; flex-direction: row; font-size: 14px; font-weight: normal; padding-bottom: 10px}
ul.input_list li:last-child{padding-bottom: 0}

.board_thumbnail_list{margin-top:60px}
.board_thumbnail_list ul{display: block; width:100%; border-top:1px solid #ccc;}
.board_thumbnail_list li{text-align: left; border-bottom:1px solid #ccc; padding:15px 20px}
.board_thumbnail_list li span.icon_before{display: inline-block; background: url(../../images/board/icon_before.png) center no-repeat;  width:15px; height:15px; margin-right:15px}
.board_thumbnail_list li span.icon_next{display: inline-block; background: url(../../images/board/icon_next.png) center no-repeat; width:15px; height:15px; margin-right:15px}
.board_thumbnail_list li span.list_text{display: inline-block; width:760px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap}
.board_thumbnail_list li:hover{background: #f7f7f7; cursor: pointer}


.file_form {
    position: relative;
    display: inline-block;
    width: 330px;
    height: 32px;
    border: 1px solid #d6d6d6;
	border-radius: 3px;
    font-size: 12px;
    line-height: 2.5em;
	padding-left:10px
}
.file_form span.text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 60px 0 5px;
}
.file_form:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    content: '';
	background: url(../../images/com/icon_file.png) center no-repeat;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    background-color: #555;
    border: 1px solid #fff;
	border-radius: 3px
}

.file_form input[type="file"] {
    position: absolute;
    /*width: 48px;*/
    height: 32px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}

::-webkit-file-upload-button { 
    cursor:pointer; 
}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 14px; color: #888
}
input::-moz-placeholder { /* Firefox 19+ */
  font-size: 14px; color: #888
}
input:-ms-input-placeholder { /* IE 10+ */
  font-size: 14px; color: #888
}
input:-moz-placeholder { /* Firefox 18- */
  font-size: 14px; color: #888
}

.bottom_copyright{position: relative; bottom:0; display: flex; flex-direction: row; flex-wrap: nowrap; width: 98%; min-width: 740px; background-color: #262626; padding: 20px 1% 65px;}
.copyright_logo{display: block; background: url(../../images/com/logo_white.png) no-repeat; background-size: 91px auto; opacity: 0.6}
.bottom_copyright span{font-size: 11px; color: #adadad; line-height: 1.8em; letter-spacing: 0}
.bottom_copyright span.sp1{flex-basis: 136px;}
.bottom_copyright span.sp2{flex-grow: 1;}
.bottom_copyright span.sp3{justify-content: flex-end}
.bottom_copyright a.mark_kg{display: block; width:80px; height: 56px; background: url(../../images/com/bottom_button_kg.png) center 3px no-repeat;}

.login .btn_bottom{margin-top:15px}

.left_banner{margin-top:15px;}
ul.ban_txt{position: relative; border:4px solid #e2e2e2; width: 232px; height: 50px; overflow:hidden; }
ul.ban_txt li{font-family:-apple-system,applesdgothicneo,apple sd gothic neo,Helvetica,noto sans kr,malgun gothic,맑은 고딕,sans-serif,돋움,Dotum,굴림,Gulim; font-size: 13px; color: #555; letter-spacing: -0.05em; padding:15px 10px 15px 15px; }
ul.ban_txt span.icon_update{display: inline-block; width:38px; height:20px; background: url(../../images/com/left_banner_icon_update.png) 0 0 no-repeat; vertical-align: middle;}
ul.ban_txt a{display: inherit; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
ul.ban_txt a:hover{text-decoration: underline; color: #000}

.list_board{}
.list_board ul{border-top:1px solid #666}
.list_board li{display: flex; flex-direction: row; flex-wrap: nowrap; padding: 25px 0; border-bottom:1px solid #666; cursor: pointer}
.list_board span.t1{flex-basis: 296px; margin-right:32px}
.list_board span.t1 img{width: 100%; height: auto}
.list_board span.t2{padding:20px 0 0 0}
.list_board span.tit{display: block; font-size: 21px; font-weight: bold; color:#333; padding-bottom: 15px}
.list_board p{font-size: 13px; color: #666; line-height: 2em; padding:0; margin:0 }

.title_h1{font-size: 38px; font-weight: bold; text-align: center; color: #333; padding:30px 0 20px 0}
.article span.img_info{display: block; text-align: center; font-size: 12px; color: #888; padding:0 0 40px 0; }

.service_state{position:relative; border:3px solid #eee; padding:15px 20px; margin-top:20px}


.tab_menu2{}
.tab_menu2 ul{display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around}
.tab_menu2 li{flex-grow: 1; flex-shrink: 1; font-size: 16px; line-height: 44px; border:1px solid #ccc; border-left:0; }
.tab_menu2 li:first-child{border-left:1px solid #ccc}
.tab_menu2 li a{display: inherit; height: 100%; color: #666; padding:0 10px; text-align: center}
.tab_menu2 li.on{border-color: #f7af02}
.tab_menu2 li.on a{background: #f7af02; color: #fff}

.history{position:relative; width:100%; height:60px}
.history div{position:absolute; top:0}

.article2{font-size:15px; margin-bottom:50px;}
span.i_check:before{content: ''; background: url(../../images/main/i_check.png) 0 -4px no-repeat; background-size: 20px auto; height: 24px; padding-left:30px;}

.stat{display: flex; flex-wrap: wrap; padding:0; overflow:hidden;}

.api_graph{width: 886px; margin-bottom: 25px;}
.api_ip{/*width: 302px; margin-left:30px;*/ margin-bottom: 25px}
.table_style4.api_ip .table_box{min-height: 58px; padding-bottom: 30px;}
.api_qna{flex: 1;}
.api_over{flex: 1; margin-left:20px}

.table_style4{}
.table_style4 .table_bar{position: relative; display: flex; height: 47px; font-size: 14px; font-weight: bold; color: #999; align-items: center; border:#dfdfdf 1px solid; border-radius: 2px 2px 0 0; padding:0 20px;}
.table_style4 .table_box{min-height: 270px; border:#dfdfdf 1px solid; border-radius: 0 0 2px 2px; border-top:0; }

.tab_menu3{position: absolute; right:20px; display: block; border-radius: 2px; overflow: hidden;}
.tab_menu3 a{float:left; min-width: 59px; height: 28px; font-size: 12px; text-align: center; line-height: 2.2em; font-weight: normal; border:1px solid #ddd; background-color: #fff; box-sizing: border-box;}
.tab_menu3 a.on{ background-color: #555; border-color: #555; color: #fff; font-weight: bold; border}

h2 span.id_name{font-weight: bold;}
h2 span.id_name::after{content: '님 환영합니다.'; font-size: 15px; font-weight: normal; margin-left: 5px; line-height: 0;}


.ip_info{position: relative; top:15px; left: 20px; width: 846px; background-color: #f4f4f4; border-radius: 2px;}
.ip_info ul{display: flex; justify-content: center; align-items:center;}
.ip_info li{display: flex; flex-direction: column; flex: 1;  text-align: left; font-size: 12px; color: #999; padding:10px;}
.ip_info li:first-child{flex: 3;}
.ip_info li:last-child{}
.ip_info span.t1{font-size: 11px; margin-bottom: 2px;}
.ip_info span.t2{font-size: 13px; font-weight: bold; color: #000;}

.ip_paging{position: absolute; top:10px; right:22px; display: flex; align-content: stretch;  line-height: 0em; }
.ip_paging span.page_text{display: flex; align-items: center; font-size: 11px; margin-right: 10px; margin-bottom: 0;}
.ip_paging span.page_text span.on{font-weight: bold; color: #000;}
.btn_before{display: inline-block; background: url(../../images/com/chevron_left.png) center no-repeat; width: 28px; height: 26px; background-color: #fff; border:1px solid #ddd; border-radius: 2px 0 0 2px;}
.btn_next{display: inline-block; background: url(../../images/com/chevron_right.png) center no-repeat;width: 28px; height: 26px; background-color: #fff; border:1px solid #ddd; border-radius: 0 2px 2px 0;}

.btn_list{display: inline-block; width: 40px; height: 32px; background: url(../../images/com/chevron_right.png) center no-repeat;}
.table_bar .btn_list{position: absolute; top:8px; right:5px;}
.table_bar .btn_list::before{content: '전체'; position: absolute; display: block; white-space: nowrap; right:30px; top:7px;font-size: 12px; font-weight: normal;}

.api_qna .table_box,
.api_over .table_box{height: 310px; padding:0 20px; }
.api_qna .table_box table{border-bottom: 1px solid #ccc;}
.api_over .table_box table tr td,
.api_qna .table_box table tr td{font-size: 11px;}
.api_over .table_box table tr td:last-child,
.api_qna .table_box table tr td:last-child{font-size: 10.5px; color: #757575;}

.table_style4 table{width: 100%; font-size: 11px; text-align: center; vertical-align: center; border-collapse: collapse;}
.table_style4 thead{height: 36px; border-bottom: 1px solid #ccc;}
.table_style4 th{font-size: 12px; color: #252525;}
.table_style4 tbody{}
.table_style4 tbody tr{border-bottom: 1px solid #eee}
.table_style4 tbody tr:last-child{border-bottom: 0;}
.table_style4 td{font-size: 12px; color: #252525; padding:10px 0;}
.t_q{display: inline-block; max-width: 120px; padding-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.t_q_reply{display: inline-block; font-size: 11px; color: #2a9ff6; vertical-align: super}
.t_over{color: #FD0000;}
.t_end{color: #999;}

.scroll_box{width: 100%; overflow-y: auto; max-height: 273px; /*padding-right:-20px;*/}
.table_box .scroll_box{padding-right:20px}

.table_bottom{margin:15px 0; text-align: right;}
.table_bottom a{display: inline-block; padding:0 15px;
    height: 28px;
    font-size: 12px;
    text-align: center;
    line-height: 2.2em;
    font-weight: normal;
    border: 1px solid #ddd;
    background-color: #fff;
    box-sizing: border-box; border-radius: 2px;}

.case_g{display: flex; justify-content: center; flex-wrap: wrap; margin-top:70px; margin-bottom: -60px;}
.case_g a{margin:0 20px 40px;}
.case{position: relative; width: 348px; height: 200px; background-color: #fff; border-radius: 32px; }
.case span.t1{position: absolute; top:35px; left:35px;display: block; font-size:28px; font-weight: bold; letter-spacing: -0.02em;}
.case span.t1_img{position: absolute; top:27px; right:25px;}
.case span.t1_img img{width: 60px; height: 60px; border-radius: 8px;}
.case span.t2{position: absolute; bottom:35px; left:35px; display: block; font-size:18px; font-weight: bold; letter-spacing: -0.02em;}
.case span.t2_go{position: absolute; right:30px; bottom: 30px; display: block; width: 42px; height: 42px; background: url(../../images/com/btn_go.png) center no-repeat;}
.case_g a:hover span.t2_go{background: url(../../images/com/btn_go_on.png) center no-repeat;}
.case_g a:hover span.t1_img img{animation-name:case_ani;
    animation-duration: 1.0s;
    animation-iteration-count: 1}

@keyframes case_ani {
0% {transform: translate(0,0px)}
20% {transform: translate(0,6px)}
100% {transform: translate(0,0)}
}


.section3{}
.section3 .case_g{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top:45px; margin-bottom: 0;}
.section3 .case_g a{margin:0 10px 30px;}
.section3 .case{position: relative; width: 274px; height: 160px; background-color: #fff; border-radius: 22px; border:1px solid #333; }
.section3 .case span.t1{position: absolute; top:25px; left:25px;display: block; font-size:20px; font-weight: bold; color: #222; letter-spacing: -0.03em;}
.section3 .case span.t1_img{position: absolute; top:17px; right:15px;}
.section3 .case span.t2{position: absolute; bottom:25px; left:25px; display: block; font-size:15px; font-weight: bold; letter-spacing: -0.02em; color: #888;}
.section3 .case span.t2_go{position: absolute; right:15px; bottom: 15px;}
.section3 .case_g a:hover span.t2{color: #222;}

.mainBanner{position: fixed; bottom:70px; right:40px; line-height: 0em; border-radius: 10px; overflow: hidden;z-index: 1000;}
.mainBanner img{width: 400px; height: 260px;}
.banner_bottom{position: absolute; bottom:0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; background-color:rgba(0, 0, 0, 0.3); z-index: 1;}
.banner_bottom a{display: inline-block; font-size: 13px; color: #fff; margin:0 20px;}

/* 20260730 */
.info-box{border: 1px solid #b6d6ec;border-radius: 5px;padding: 15px 20px;background: #f0f7fb;font-size: 13px; font-weight: 500;}
.info-box a{color: #2a9ff6;text-decoration: underline; font-weight: bold;}
.info-box ol li{list-style:disc; list-style-position:inside;}

.card_box{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 30px; border:2px solid #ddd; border-radius: 8px; padding:20px;}
.card_save{display:flex; align-items: center; justify-content: center; width:200px; height:126px; border:1px solid #ccc; border-radius:8px; margin-right: 30px;}
.card_save.plus::before{content:'+'; font-size:22px; font-weight: normal; line-height:1.3em; color:#fff; text-align:center; text-decoration: none; width:30px; height:30px; border-radius: 50%; background-color:#077bf9;}
.article .card_box a {text-decoration:none; }
.card_text{flex: 1;}
.card_btn .btn_d{color: #555;}

.search_bar{display:flex; gap: 8px;}
.search_bar .select_xs{margin-right: 0;}
.state {
  font-size: 12px;
  color:#777;
}
.state.ing,
.state.complete,
.state.card{
  display: inline-block;
  font-weight: 500;
  text-align: center;
  padding: 0.25em 0.5em;
  border-radius: 0.25rem;
  min-width: 32px;
}
.state.ing {
  background-color: #e3ecf9;
  color: #1c5eb9;
}
.state.complete {
  background-color: #e3f5e0;
  color: #2a8525;
}
.state.card {
  background-color: #077bf9;
  color: #fff;
}

.api_choice{
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    max-height: 70px;
    overflow-y: auto;
    font-size:13px;
	gap:5px;
    margin-bottom: 15px;}
.api_choice span {
    display: flex;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    padding: 4px 8px;
    background-color: #f4f4f4;
}
.board_bottom{display: flex; justify-content: flex-end; margin-top:20px;}

.price td:nth-child(1),
.price td:nth-child(2) {
  text-align: left;
}

/* 토글 컨테이너 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0 6px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bbb;
  transition: 0.3s;
  border-radius: 24px;
}

/* 동그란 스위치 버튼 */
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2; /* 텍스트 위에 위치하도록 설정 */
}

.slider:after {
  content: "OFF";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 11px;
  line-height: 2.5em;
  font-weight: 600;
  font-family: sans-serif;
  user-select: none;
}

input:checked + .slider {
  background-color: #7abfff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

input:checked + .slider:after {
  content: "ON";
  left: 8px;
  right: auto;
}

input:focus + .slider {
  box-shadow: 0 0 1px #999;
}
.middle{display: flex; align-items: center;}