@charset "utf-8";
@import url('//fonts.googleapis.com/css?family=Saira');

/* font */
body, input, textarea, button, table	{font-family: "Saira", sans-serif; line-height: 1.0em;}

/* basic */
body, html	{width: 100%; height: 100%;}
body	{margin: 0; padding: 0; -webkit-text-size-adjust: none; width: 100%; font-size: 0.95em; color: #333;}

a, input, textarea, button, table	{text-decoration: none; color: #333;}
input, textarea, button, table	{outline: none; margin: 0; font-size: 1.0em; line-height: 1.0em;}
input[type=text], input[type=url], input[type=tel], input[type=email], input[type=password], textarea	{-webkit-appearance: none; border-radius: 0;}
select	{outline: none;}
button	{background: none; border: none; cursor: pointer; padding: 0; margin: 0; border-radius: 0; -webkit-font-smoothing: subpixel-antialiased !important;}
section, aside, nav, header, footer	{display: block;}
textarea	{resize: vertical;}
ul, ol, dl, dd, dt	{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, p, figure, input	{margin:0; padding:0;}

.hide	{visibility: hidden; padding: 0; margin: 0; height: 0; width: 0; overflow: hidden;}
.num	{font-family: "Saira", sans-serif;}
.round5	{border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.round10	{border-radius: 10px; -webkit-border-radius:10px; -moz-border-radius: 10px;}
.round50p	{border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
.pf	{display: inline-block; background-image: url('../images/profile.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%; overflow: hidden;}
.pf,
.pf_img	{width: 40px; height: 40px;}
.a_link	{color: #326fba;}

.a_left	{text-align: left;}
.a_right	{text-align: right}
.a_center	{text-align: center;}	

.table_cell	{display: table-cell; width: 100%; text-align: center; vertical-align: middle;}

.bt	{display: inline-block; box-sizing: border-box; text-align: center;}
.bt_bs	{background-color: #DDD; color: #888;}
.bt_bs2	{background-color: #FFF; border: 1px solid #e5e5e5; color: #AAA;}
.bt_smt	{color: #FFF;}
.bt_pd	{padding: 10px 15px;}
.ip_bs	{display: inline-block; padding: 0 10px; border: 1px solid #e5e5e5; background-color: #FFF; box-sizing: border-box;}
.bd_bs	{background-color: #FFF;}

/* color changer */
#color_changer	{position: fixed; bottom: -195px; left: 0; width: 100%; padding: 5px 0 5px; background-color: #FFF; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2); text-align: center; font-size: 0.8em; z-index: 99;}
#color_changer .bt_close	{display: none;}
.color_wrap	{margin: 5px auto 0; width: 330px; }
#color_changer li	{display: inline-block; width: 64px; margin-bottom: 10px;}
#color_changer .color_sample	{display: inline-block; width: 40px; height: 40px; margin-bottom: 5px; border-radius: 50%;}
.g_dream .color_sample	{background: linear-gradient(#88cfbc, #f0ae7d);}
.g_grapefruit .color_sample	{background: linear-gradient(#6fb7ed, #f37d7d);}
.g_midnight .color_sample	{background: linear-gradient(#616baf, #57abeb);}
.g_unicorn .color_sample	{background: linear-gradient(#fdaed6, #80d2c7);}
.g_vine .color_sample	{background: linear-gradient(#769ad9, #faa391);}
.s_beigepink .color_sample	{background-color: #cba49d;}
.s_blue .color_sample	{background-color: #769ad9;}
.s_mint .color_sample	{background-color: #a1bfb7;}
.s_navy .color_sample	{background-color: #2e3a4d;}
.s_orange .color_sample	{background-color: #f5850c;}
.s_pink .color_sample	{background-color: #fdaed6;}
.s_red .color_sample	{background-color: #c24938;}
.s_brown .color_sample	{background-color: #6a4938;}
.s_marineblue .color_sample	{background-color: #1b4585;}

/* layout */
.wrap	{width: 100%; min-height: 100%; -webkit-overflow-scrolling: touch;}
.ctn	{padding-top: 50px; background-position: center top; background-repeat: repeat-x;}
.hd	{position: fixed; left: 0; top: 0; width: 100%; height: 50px; z-index: 90; -webkit-transform: translate3d(0,0,0);}
.gnb_area	{display: none; left: -280px; width: 280px; z-index: 200;}
.ctt	{background-color: #FFF; padding-top: 1px; margin-top: -1px;}
.dummy	{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; z-index: 100;}
.loading	{display: none ;position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #AAA; z-index: 201;}

/* header */
.hd_bg_col	{position: fixed; left: 0; top: 0; width: 100%; height: 50px; z-index: -1; opacity: 0;}
.hd_sub .hd_bg_col	{opacity: 1.0;}
.hd,
.hd a	{color: #FFF;}
.hd .logo_wrap	{text-align: center; line-height: 50px; font-size: 1.0em;}
.hd .logo	{display: inline; font-size: 1.0em;}

.bt_hd_menu,
.bt_hd_right	{display: inline-block; width: 50px; height: 50px; text-align: center; color: #FFF;}
.bt_hd_menu i,
.bt_hd_right i	{font-size: 24px; line-height: 50px;}
.bt_hd_menu	{position: fixed; left: 0; top: 0;}
.bt_hd_right	{position: fixed; right: 0; top: 0; z-index: 91;}
.bt_hd_right .num	{display: inline-block; position: absolute; right: 25px; top: 5px; padding: 0 6px; border-radius: 8px; font-size: 0.6em; line-height: 16px;}

.hd .bt_login	{font-size: 0.6em; line-height: 1.0em;}
.hd .bt_login i	{line-height: 36px; margin-bottom: -4px; font-size: 24px;}

.hd .bt_ctg	{position: relative; margin-left: 5px; padding: 6px 6px 6px 10px; font-size: 0.9em; color: #FFF;}
.hd .bt_ctg::after	{content: ''; position: absolute; left: 0 ;top: 0; width: 100%; height: 100%; border-radius: 3px; background-color: #FFF; opacity: 0.2;}
.hd .bt_ctg .up	{display: none;}
.hd .bt_ctg.active .up	{display: inline-block;}
.hd .bt_ctg.active .down	{display: none;}

/* main header */
.hd_main	{position: relative; width: 100%; height: 280px; text-align: center;}
.hd_main_basic	{display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -20px;}
.hd_main_basic span	{position: relative; overflow: hidden;}
.hd_main_basic img	{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.hd_main_logo	{width: 130px; height: 130px; padding: 20px; border-radius: 50%;}
.hd_main_logo span	{display: block; width: 100%; height: 100%; background-color: #FFF; border-radius: 50%; line-height: 130px;}
.hd_main_logo img	{max-width: 260px; height: auto; zoom: 50%;}
.hd_main_logo2	{padding: 10px; width: 150px; height: 100px;}
.hd_main_logo2 span	{display: block; width: 100%; height: 100%; background-color: #FFF;}
.hd_main_logo2 img	{max-width: 300px; height: auto; zoom: 50%;}
.hd_main_image img	{zoom: 50%;}

.hd_main_full	{height: 100%; background-size: cover;}

/* main unit */
.main_unit	{position: relative; padding-top: 45px;}
.main_unit .bt_go	{position: absolute; right: 15px; top: 15px; padding: 0 10px; line-height: 30px; color: #FFF; z-index: 2}
.main_unit_body	{padding: 20px 15px 15px; background-color: #FFF;}
.main_unit_body a	{display: inline-block;}

/* main notify */
.ctt_notify	{margin-top: -10px;}
.ctt_notify .pf	{position: absolute; left: 15px; top: 52px; z-index: 2;}
.point_bar	{position: absolute; left: 0; top: 35px; width: 100%; z-index: 1;}
.point_current	{height: 10px;}
.ctt_notify .main_unit_body	{position: relative; padding-left: 65px; padding-bottom: 0;}
.ctt_notify .main_unit_body p	{padding-bottom: 20px;}
.ctt_notify .main_unit_body .bt_notify	{font-weight: bold;}
.ctt_notify .main_unit_body .bt_notify .zero	{display: none;}
.ctt_notify .bt_mb	{display: inline-block; position: absolute; right: 0; top: 0; width: 50px; height: 60px; text-align: center; z-index: 1;}
.ctt_notify .mb_menu	{display: none; position: absolute; left: 0; top: 100%; width: 100%; padding: 10px 15px 5px; box-sizing: border-box; background-color: #f7f7f7; border-top: 1px solid #EEE; border-bottom: 1px solid #e5e5e5; text-align: center; z-index: 3;}
.ctt_notify .mb_menu li	{display: inline-block; height: 28px; line-height: 28px; margin: 0 2px 5px 0; border-radius: 14px;}
.ctt_notify .mb_menu li a	{padding: 0 8px;}

/* popup style */
.popup_area	{display: none; position: fixed; left: 0; top: 100px; width: 100%; height: calc(100% - 100px); padding: 0 15px 15px; box-sizing: border-box; z-index: 101;}
.popup_body	{position: relative; width: 100%; height: 100%; padding: 30px 0 30px; box-sizing: border-box; background-color: #FFF; overflow: hidden;}
.popup_body h3,
.popup_body .bt_close	{position: absolute; left: 0; top: 0; width: 100%; height: 30px; background-color: #f7f7f7; text-align: center; font-size: 0.8em; font-weight: normal; line-height: 30px;}
.popup_body .bt_close	{top: auto; bottom: 0; border-radius: 0 0 10px 10px;}
.popup_scroll	{width: 100%; height: 100%; border-top: 1px solid #e5e5e5; overflow: auto; -webkit-overflow-scrolling: touch;}

/* notify list */
.notify_list .bt_del_all	{display: inline-block; width: 100%; padding: 5px 0;}
.notify_list li	{position: relative; min-height: 70px; border-bottom: 1px solid #EEE; line-height: 1.4em;}
.notify_list .pf	{position: absolute; left: 15px; top: 15px;}
.notify_list li	a	{display: inline-block; padding: 15px 15px 15px 70px;}
.notify_list .ago	{font-size: 0.8em; color: #AAA;}
.notify_list .bt_more	{display: block; width: 100%; padding: 10px 0; text-align: center;}

.no_notify	{text-align: center; padding-top: 30px; line-height: 1.6em; color: #AAA;}
.no_notify i	{margin-bottom: 15px; color: #DDD;}

/* popup warn style */
.popup_warn	{display: none; position: fixed; top: 50%; left: 50%; width: 240px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #FFF; text-align: center; overflow: hidden; z-index: 101;}
.hd_warn	{padding: 10px 0; font-size: 36px; color: #FFF;}
.popup_warn p	{padding: 15px 10px; line-height: 1.4em;}
.popup_warn .bt_area	{padding: 0 0 15px;}
.popup_warn button	{display: inline-block; padding: 10px 15px; margin: 0 5px;}

/* gnb area */
.gnb_area	{position: fixed; top: 0; height: 100%; background-color: #FFF; overflow: auto; }

.mb_area	{height: 50px;}
.mb_area a	{position: relative; display: inline-block; width: 50%; line-height: 50px; color: #FFF; text-align: center;}
.mb_area.not_logged a::after	{content: ''; position: absolute; top: 0; right: 100%; width: 1px; height: 100%; background-color: #FFF; opacity: 0.2;}
.mb_area.logged a	{width: 100%; padding-left: 55px; box-sizing: border-box; text-align: left;}
.mb_area.logged .pf	{position: absolute; left: 5px; top: 5px;}
.mb_area.logged .bt_logout	{position: absolute; right: 0; top: 0; width: 50px; padding: 0; font-size: 0.6em; text-align: center; line-height: 1.0em; z-index: 1;}
.mb_area i	{line-height: 36px; margin-bottom: -4px; font-size: 24px; }

.srch_area	{height: 38px; padding: 6px; background-color: #f7f7f7; border-bottom: 1px solid #e5e5e5;}
.srch_area .ip_gb_srch	{display: block; width: 100%; height: 38px; padding: 0 5px; border: 1px solid #e5e5e5; box-sizing: border-box; text-align: center;}
.srch_area .lb_i	{left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.gnb	{margin-top: -1px; border-bottom: 1px solid #e5e5e5;}
.gnb li	{position: relative; border-top: 1px solid #e5e5e5;}
.gnb a	{display: inline-block; width: 100%; padding: 12px 8px; box-sizing: border-box;}
.gnb>ul>li>ul li	{background-color: #f7f7f7;}
.gnb>ul>li>ul>li a	{padding-left: 12px; border-left: 5px solid #e5e5e5;}
.gnb>ul>li>ul>li>ul	{padding-left: 25px; border-top: 1px solid #e5e5e5; background-color: #FFF;}
.gnb>ul>li>ul>li>ul>li:first-child	{border-top: none;}

.gnb .bt_tgg	{position: absolute; right: 0; top: 0; padding: 12px 10px 12px 20px;}
.gnb .bt_home	{text-transform: uppercase;}

.gnb i	{color: #AAA;}
.gnb i.close,
.gnb i.down	{display: none;}

.closed i.close,
.closed i.down	{display: inline-block;}
.closed i.open,
.closed i.up	{display: none;}
.closed>li>ul	{display: none;}

.gnb .mobile_hide	{display: none;}

/* overlay label style */
.box_i	{position: relative;}
.lb_i	{position: absolute; top: 50%; left: 5px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #AAA; z-index: 1;}
.ip_i:focus + .lb_i	{visibility: hidden;}

/* footer */
.ft	{font-size: 0.9em; text-align: center; color: #FFF;}
.ft a	{color: #FFF;}
.ft .bt_top	{display: block; position: relative; width: 100%; padding: 8px 0; color: #FFF; text-transform: uppercase; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 1;}
.ft .bt_top::after	{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; opacity: 0.2; z-index: -1;}

.ft_body	{padding: 20px 15px;}
.ft_menu	{margin-bottom: 15px;}
.ft_menu li	{display: inline-block; position: relative; margin: 0 3px; z-index: 1;}
.ft_menu1 li::after	{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 5px; background-color: #FFF; opacity: 0.2; z-index: -1;}
.ft_menu1 a	{display: inline-block; padding: 6px 10px;}
.ft_menu2 li	{padding: 0 6px;}
.ft_menu2 li::after	{content: ''; position: absolute; right: -3px; top: 2px; width: 1px; height: 12px; background-color: #FFF; opacity: 0.2;}
.ft_menu2 li:last-child::after	{content: none;}

.ft .copyright	{font-size: 0.85em;}
.ft .copyright a	{text-decoration: underline;}

.ft .lang	{text-align: left; color: #333;}
.ft .lang ul	{padding: 15px 15px 5px;}
.ft .lang li	{margin-bottom: 10px;}
.ft .lang .bt_area	{text-align: center; padding-bottom: 15px;}
.ft .lang .i_radio>span>span	{margin-bottom: 0;}

/* switch */
.i_switch	{position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.i_switch input	{position: absolute; opacity: 0;}
.i_switch span	{display: inline-block;}
.i_switch>span	{width: 40px; height: 20px; margin-right: 5px; background-color: #DDD; border-radius: 999px; vertical-align: middle; -webkit-transition-duration: .4s; -webkit-transition-property: background-color, box-shadow;}
.i_switch>span>span	{float: left; width: 18px; height: 18px; border-radius: inherit; background-color: #FFF; -webkit-transition-duration: 0.4s; -webkit-transition-property: transform, background-color, box-shadow; -moz-transition-duration: 0.4s; -moz-transition-property: transform, background-color;  pointer-events: none; margin-top: 1px; margin-left: 1px;}
.i_switch input:checked + span>span	{-webkit-transform: translate3d(20px, 0, 0); -moz-transform: translate3d(20px, 0, 0); background-color: #FFF;}

/* i check */
.i_check	{position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.i_check input	{position: absolute; opacity: 0;}
.i_check>span	{display: inline-block; width: 18px; height: 18px; line-height: 20px; margin-right: 5px; border-radius: 3px; border: 1px solid #e5e5e5; background-color: #FFF; text-align: center; -webkit-transition-duration: .4s; -webkit-transition-property: background-color;}
.i_check span>i	{color: #FFF;}

.i_radio span	{border-radius: 50% !important;}
.i_radio>span>span	{display: inline-block; width: 10px; height: 10px; margin-bottom: 1px;}
.i_radio input:checked + span	{background-color: #FFF !important;}
.i_radio input:checked + span>span	{border: none;}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
 
.clearfix:after {
    clear: both;
}