@charset "utf-8";

/* 전체 리뉴얼 시, 삭제할 수 있도록 하기 */
input[type="checkbox"], input[type="radio"] {	
    -webkit-appearance: button;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-size: 100% 100%;
    background-color: #dbdbdb;
    background-position: center center;
    border-left-color: #dbdbdb;
    border-right-color: #dbdbdb;
    border: 1px double #dbdbdb;
	background-image: url(/mobile2017/resource/images/common/check_input01.png);
	background-repeat:no-repeat;
	margin-bottom:-4px;
	vertical-align: text-top;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {	
    background-size: 100% 100%;
    background-color: #dbdbdb;
    background-position: center center;
    border-left-color: #dbdbdb;
    border-right-color: #dbdbdb;
    border: 1px double #dbdbdb;
	background-image: url(/mobile2017/resource/images/common/check_input02.png);
	background-repeat:no-repeat;
	margin-bottom:-4px;
	vertical-align: text-top;
}

/*iframe { width:100%; height:auto;}*/

	/* 2023 리뉴얼_이전 css 상쇄시키기 위해 작성. 리뉴얼 시 삭제 */
.content_wrap .content_section .cont_list, .content_wrap .content_section .cont_view {padding-top: 40px;}
.history_wrap {padding-top: 60px;}
.teacher_wrap {padding-top: 45px;}

.content_wrap [class^=cont_]:not(.cont_view, .cont_form) table th, .content_wrap [class^=cont_]:not(.cont_view, .cont_form) table td {border-bottom: var(--margin-common) solid var(--color-bg-gray); }

.content_wrap .content_section .list_bt a, .content_wrap .content_section .view_bt a, .content_wrap .content_section .cont_btn .twobtn, .content_wrap .content_section .more a {margin-bottom: 0; background: var(--color-blue);}
.content_wrap #more {background: var(--color-blue);}
	/* 인터뷰, 포폴, 모의면접 */
#content.cont_company, #content.cont_project, #content.cont_interview, #content.cont_board {padding-top: 0 !important;}
.cont_view table td {background: #fff;}
.cont_view table.interview_table4 td, .cont_view #interview_view4 td {background: transparent;}
	/* 기술자문위원 */
.content_wrap .cont_advice .advice_list_warp {width: 100%;}
.content_wrap .cont_advice .advice_list_warp .open .advice_list {padding: 8% 0 0; background: transparent;}
.content_wrap .cont_advice .history_advice, .content_wrap .cont_advice .history_advice .table_a_history, .content_wrap .cont_advice .history_advice .table_a_history table#a_history td img.dot {background: transparent;}


/* //전체 리뉴얼 시, 삭제할 수 있도록 하기 */


/* 2023리뉴얼 */
:root {
	--width-swipe-content: 264px;
	--margin-common: 8px;
	--padding-common: 20px;
/* 	--padding-common: 6%; */
	--border-radius-common: 18px;
	--border-radius-common2: 26px;
	
	--color-blue: #2c5ae9;
	--color-blue2: #2750dc;
	--color-blue3: #1443d9;
	--color-red: #ec1313;
/* 	--color-gray: #cecece; */
	--color-gray: #d7d7d7;
	--color-bg-gray: #f1f3f8;
	--color-border-gray: #dae0e9;
	
/* 	--font-size-sectiontitle: 23px; */
	--font-size-sectiontitle: 25px; /* 700 */
	--font-size-contenttitle: 17px; /* 500 */
	--font-size-content: 14px; /* 400. 폰트 기본은 14px > 15px */
}

body {background: var(--color-bg-gray);}
.scrollLock {/* overflow: hidden; */ position: fixed;}
body.scrollLock *:not(.popup_wrap) { touch-action: none; }


/* 공통 */
.hidden {display:none;}
.header img, .content_wrap img {/* object-fit: cover; */ vertical-align: middle;}
.sr-only, input[type="checkbox"].sr-only, input[type="radio"].sr-only {position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0);} /* 스크린리더에만 읽히고, 화면에서는 제외 */
.img_wrap {overflow: hidden;}

/* float을 해제할 부모요소에 .cf_2023 */
.cf {zoom:1; /* ie 6,7 */}
.cf::before, .clearfix::after {content:" "; display:table;}
.cf::after {clear:both;}


	/* 기본 구성 .content_wrap */
.content_wrap {overflow: hidden; padding-bottom: 40px; margin-top: -15px;} /* 상단 여백(40px) 맞추기 위함 */
.content_wrap.content_wrap_mt {margin-top: 0;} /* 상단 여백(40px) 맞추기 위함 */
.content_wrap.content_wrap_pb {padding-bottom: 0;} /* 하단 여백 2번 들어가서 맞추기 위함 */
.content_wrap.list_wrap {margin-top: 0;} /* 상단 여백(네비 아래 15px) */
.page_title {}

.content_section {}
.content_section .section_title {/* padding-top:80px; */padding-top:40px; color: #222; font-weight: 700; font-size: var(--font-size-sectiontitle); line-height: 1.8;line-height: 1.25; text-align: center;}
.content_section .hrd-padding{padding-top:0 !important;}

/* .content_section .section_subtitle {padding: 6px 0 30px; color: #444; font-weight: 400; font-size: 14px;font-size: 15px; text-align: center;} */
.content_section .section_subtitle {padding: 8px 0 32px; color: #444; font-weight: 400; font-size: 15px; line-height: 1.2; text-align: center;}
	/* 메인 개강일정처럼 큰 #fff박스로 섹션타이틀 감쌀 경우 */
.content_section_box {margin: 0 var(--padding-common); padding: 43px 0; border-radius: var(--border-radius-common2); background: #fff;}
.content_section_box .section_title {padding-top: 0;}
.content_section_box .content {padding: 0 16px;}
.content_section .content {padding: 0 23px;}
.content_section .content.paddingN {padding: 0;}
	/* 큰 #fff박스로 섹션타이틀 아래 컨텐츠들 감쌀 경우 */
.content_section .content_box {margin: 0 6%; border-radius: var(--border-radius-common2); background: #fff;}

.content_title {color:#222; font-weight: 500; font-size: var(--font-size-contenttitle); line-height: 23px;}
.content_title_sm{font-size:13px; font-weight:400; margin-top:-5px;}
.content_explain {color:#444; font-size: var(--font-size-content); line-height: 20px;}
.content_explain_sm{font-size:12px;}
.content_explain_blue {color: var(--color-blue); font-size: 12px;font-size: 13px;}


.content_wrap table {width: 100%;}

/* 헤더 */
/* .header_area {width: 100%; height: 93px;} */
.header {position: -webkit-sticky; position: sticky; top: -1px; left: 0; z-index: 890;/* 사이트맵이 900 */ width: 100%; /* height: 93px; */ background: var(--color-bg-gray); transition: all .2s ease-out;}
.header a {display: inline-block; height: 100%;}

/* .header_top a {display: inline-block; height: 100%;} */
/* .header_top {display: -webkit-box; display: -moz-box; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; justify-content: space-between; height: 46px; padding: 7px 20px 9px;} */
.header_top {height: 46px; padding: 8px 20px;padding: 8px 6%;}
.header_top img {width: auto; height: 100%;}
.header_top .header_top_logo {float: left; height: 30px;}
.header_top .header_top_right {float: right; height: 30px;}
.header_top .header_top_right a {height: 100%; margin-right: 22px;}
/* .header_top .header_top_right a {height: 100%; margin-right: 22px; background-image: url(/mobile2017/resource/images/common/header_call.svg);} */
.header_top .header_top_right button {height: 100%;}

.header ul li a {width: 100%;}
.header .header_nav_gnb {display: -webkit-box; display: -moz-box; display: flex; overflow-x: auto; height: 100%;height: 52px; padding: 0 20px;padding: 0 6%; border-bottom: 1px solid #0001; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;}
.header_nav_gnb::-webkit-scrollbar, .header_nav_gnb .nav_gnb::-webkit-scrollbar {display: none; width: 0; height: 0;}
.header_nav_gnb::-webkit-scrollbar {width: 0; height: 0; background: transparent; -webkit-appearance: none;}
.header_nav_gnb .nav_gnb {display: -webkit-box; display: -moz-box; display: flex; height: 100%; font-weight: 500; font-size: 15px;}
.header_nav_gnb .nav_gnb li {padding: 14px 4px 14px 3px;}
.header_nav_gnb .nav_gnb li:not(:last-of-type) {margin-right: 18px;}

.header_nav_gnb .nav_gnb li.active {position: relative; font-weight: 600;}
.header_nav_gnb .nav_gnb li.active::after {content: ""; position: absolute; bottom: -1px;bottom:0; left: 0; width: 100%; height: 3px; background: #222;}

/* .header .header_nav_lnb {display: -webkit-box; display: -moz-box; display: flex; overflow-x:auto; padding:0 20px; white-space:nowrap;} */
/* .header .header_nav_lnb {overflow-x: auto; padding: 0 20px;padding: 15px 6%; white-space: nowrap;} */
.header .header_nav_lnb {overflow-x: auto; display: -webkit-box; display: -moz-box; display: flex; /* padding: 0 20px;padding: 15px 6%; */ white-space: nowrap;}
.header_nav_lnb::-webkit-scrollbar, .header_nav_lnb ul::-webkit-scrollbar {display: none; /* width: 0; height: 0; */}
.header_nav_lnb ul.nav_lnb {display:none; color: #999; font-size: 13px;}
.header_nav_lnb ul li {height: 40px; padding: 9px 15px 11px; border-radius: 20px; background: #d5d7de;}
.header_nav_lnb ul li:not(:last-of-type) {margin-right: 4px;}

.header_nav_lnb ul.nav_lnb.active:not(.nav_lnb_home) {display: -webkit-box; display: -moz-box; display: flex; padding: 15px 6%;}
.header_nav_lnb ul li.active {background: #222; color: #fff;}

/* 푸터 */
.footer {padding: var(--padding-common) var(--padding-common) /*기존 bottom 64px*/110px; background: #222;}
.footer a, .footer button {display: inline-block;}
.footer_top {padding: var(--padding-common) 0; border-bottom: 1px solid #333; color: var(--color-gray); font-size: 12px;}
.footer_sns {margin-bottom: var(--margin-common);}
.footer_sns a {width: 36px; height: 36px; border-radius: 50%; margin-right: var(--margin-common); background-color: #fff2; background-position: center; background-repeat: no-repeat;}
.footer_sns .sns_blog {background-image: url(/resources/images/common/sns_blog.svg);}
.footer_sns .sns_insta {background-image: url(/resources/images/common/sns_insta.svg);}
.footer_sns .sns_talk {background-image: url(/resources/images/common/sns_talk.svg);}
.footer_want * {line-height: 26px;}
.footer_want :not(:last-child)::after, .footer_clause :not(:last-child)::after {content: ""; display: inline-block; width: 1px; height: 8px; margin: 0 10px 0 12px; background: #444;}
.footer_bottom {padding: 24px 0 0; color: #999; font-size: 11px; line-height: 12px;}
.footer_clause {padding: 14px 0 16px;}
.footer_bottom .footer_title {line-height: 18px;}
.footer_bottom .footer_address {line-height: 16px;}
.footer_bottom .footer_copy {padding-top: 14px; letter-spacing: 0;}


/* 우측 하단 상담퀵 */
#quick_consult.quick_consult {position: fixed; bottom: 85px; right: var(--padding-common); z-index: 100; width: 60px; height: 60px;}
.quick_consult button {width: 100%; height: 100%; border-radius: 50%; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35); background: var(--color-blue); color: #fff; font-weight:500; font-family:'GmarketSans'; font-size:10px;}
.quick_consult button img {width: 24px; margin: 2px 0 4px;}


/* 레이아웃 */
	/* 레이아웃 - 카드형	 */
.l_card_item {padding: var(--padding-common); background: #fff;}

	/* 카드형 1개씩 * n줄 형식 */
		/* border X */
.l_card {width: 100%;}
.l_card .l_card_item {border-radius: var(--border-radius-common2);}
.l_card .l_card_item:not(:last-of-type) {margin-bottom: var(--margin-common);}
.l_card .l_card_item p {}
		/* border O */
.l_card_b {width: 100%; margin: 0 auto;}
.l_card_b .l_card_item {width: 100%; height:auto; padding: 30px 0; border-radius: 12px; border: 1px solid var(--color-gray); background: #fff;}
.l_card_b .l_card_item:not(:last-of-type) {margin-bottom: var(--margin-common);}
.l_card_b .l_card_item .img_wrap {width: 10%; min-width: 32px; max-width: 64px; margin: 0 auto;}
.l_card_b .l_card_item .content_title {padding: 10px 0;}

	/* 카드형 2개씩 * n줄 형식 */
.l_card_2 {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--margin-common);} 
.l_card_2 .l_card_item {display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--border-radius-common); word-break: keep-all;}
.l_card_2 .l_card_item .img_wrap {text-align: center;}
.l_card_2 .l_card_item .content_title {padding: 8px 0 16px;}
.l_card_2 .l_card_item div p:last-of-type:not(.content_title) {font-size: 13px;}
.l_card_2 .l_card_item > p {font-weight: 500;}
.l_card_2 .l_card_item > p:not(.s_date) {font-size: 13px;}

	/* 레이아웃 - swipe */
.content_wrap .swiper {overflow: visible;}
.content_wrap .swiper-wrapper {transition-timing-function: linear;}
.l_swipe_auto {} /* 자동으로 흐르게 할 경우 해당 클래스 추가 */
.l_swipe_item {width: var(--width-swipe-content); height: auto; border-radius: var(--border-radius-common); background: #fff;}
.l_swipe_item:not(:last-child) {margin-right: 16px;}
.l_swipe_item .img_wrap {overflow: hidden;}
.l_swipe_item .content_title {padding-top: var(--margin-common);}
.l_swipe_item .content_explain {}

	/* 스와이프.bulletN_swiper - bullet X, loop X */
.l_swipe {}
.l_swipe .l_swipe_item {overflow: hidden; border-radius: var(--border-radius-common2);}
.l_swipe .l_swipe_item .item_content {padding: var(--padding-common) var(--padding-common) 26px;}
.l_swipe .l_swipe_item .content_title {overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2;/* ellipsis line 보이게 할 줄 수 */ -webkit-box-orient: vertical; height: 54px;/* line-height * 보이게 할 줄 수 */}

	/* 스와이프.bullet_swiper - bullet O, loop O */
.l_swipe_bullet {}
.l_swipe_bullet .l_swipe_item {padding: var(--padding-common) var(--padding-common) 26px;}
.l_swipe_bullet .l_swipe_item .content_title {}

	/* 띠배너/리스트 형식 - 좌 img, 우 p 두줄 */
.l_list {}
.l_list :not(.content_title) {color: #666; font-size: var(--font-size-content);}
	/* 메인 띠배너 / 우수훈련기관은 따로 이름 변경함*/
.event_banner {min-height: 72px;min-height: 84px; padding: 14px 28px; margin: 16px 0; border-radius: var(--border-radius-common); background: #e0e5f2;}
.event_banner .content_title {font-weight: 700;}
/*우수훈련기관*/
.excellent_banner_section{margin-top: 17px;}
.excellent_banner_wrap{background: #e0e5f2; padding: 15px 0 !important;}
.excellent_banner {min-height: 70px; margin: 0 22px; line-height: 21px; padding-top:8px;}
.excellent_banner .content_title {font-weight: 700;}
.excellent_banner p:first-child{color:#666666; font-size: 14px;}
.excellent_banner_wrap .excellent_bar{background-color:#CCD1E3 !important; width:335px !important; height: 1px !important; border:none;}

.l_list_2 {padding: 0 24px; border-radius: var(--border-radius-common2); background: #fff;}
/* .l_list_2 > div {padding: 22px 22px 30px;padding: 22px 0 30px;} */
.l_list_2 > div {}
.l_list_2 .l_list_item {position: relative; border-bottom: 1px solid var(--color-bg-gray);}
.l_list_2 .l_list_item .content_title {}
.l_list_2 .l_list_item p:not(.content_title) {font-size: var(--font-size-content);}


/* 탭 */
.tab {display: table; width: auto; height: 42px; border-radius: 22px; margin: 0 auto; background: var(--color-bg-gray); font-weight: 500; font-size: var(--font-size-content); text-align: center;}
.tab .tablinks {display: inline-block; height: 100%; padding: 10px 30px; border-radius: 22px; color: #999;}
.tab .tablinks.active {background: var(--color-blue); color: #fff;}
div.tabcontent {display: none;}


/* 스타일 */
	/* 버튼 */
.btn {display: inline-block; width: 100%; height: 50px; padding: 14px 0; border-radius: 11px; font-size: 14px; text-align: center;}
.btn_large {display: inline-block; width: 100%; height: 60px; padding: 14px 0; border-radius: 12px; font-size: 16px; text-align: center;}
.btn_consult {display: inline-block; width: 100%; height: 55px; border-radius: 7px; font-weight: 500; font-size: 16px; line-height: 55px; text-align: center;}
.btn_blue {background: var(--color-blue); color: #fff;}
.btn_gray {background: #f3f4f5; color: #222;}
.btn_darkgray {background: #222; color: #fff;}

	/*  */
/* [class^=mark_bubble] {display: inline-block; padding: 0px 10px 1px; margin-bottom: 10px; font-weight: 500; font-size: 12px; line-height: 2; letter-spacing: -0.035em;} */
[class^=mark_bubble] {display: block; width: fit-content; padding: 0px 10px 1px; margin: 0 auto 10px; font-weight: 500; font-size: 12px; line-height: 2; letter-spacing: -0.035em;}
.mark_bubble_r {border-radius: 13px; background: #f4dee4; color: var(--color-red);}
.mark_bubble_rs {position: relative; border-radius: 8px; background: #cee0ff; color: var(--color-blue);}
.mark_bubble_rs::after {content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: 8px solid #cee0ff; border-right: 4px solid transparent; border-left: 4px solid transparent;}


.s_edu {font-weight: 700; font-size: 13px;}
.s_edu span {padding: 1px 5px; border-radius: 3px; margin-right: 4px; background: var(--color-bg-gray); font-weight: 400;}

.s_date {color: #444; font-weight: 500; /* font-size: 14px; */}
.s_date span {font-weight: 700;}

.s_red {color: var(--color-red);}
.s_blue {color: var(--color-blue);}
.s_black {color: #444;}

.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;}

/*kh채널on 영상팝업*/
.video_popup{ position: fixed; width: 100%; height: 100vh; background-color: rgba(0, 0,0,0.7); z-index:600; visibility: hidden; opacity: 0; }
.video_popup .video_cont{ width: 100%; position: relative; overflow: hidden; box-sizing: border-box; padding: 85px 394px 50px; }
.video_popup .video_cont img.arrow_next{position: absolute; right: 404px; top: 46%; width:18px; height:32px; z-index:605;}
.video_popup .video_cont img.arrow_prev{position: absolute; left: 404px; top: 46%; width:18px; height:32px; z-index: 605;}
.video_popup .video_cont .close_btn { position: absolute;  cursor: pointer; max-width: 32px; left: 48%; top: 43px;}
.video_popup .video_play{ justify-content: center; align-items: center;  position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); width: 1130px; position: relative; overflow: hidden; box-sizing: border-box; padding: 85px 0 50px;}
.video_popup .video_play iframe{ position: relative; width: 100%; height:190px; outline: none; display: flex; margin:0 auto;}
.video_popup.active{ visibility: visible; opacity: 0.99; }
.video_popup .popup_text_cont{ margin: 10px 0 auto; width:100%; white-space:nowrap; text-overflow:ellipsis;}
.video_popup .popup_text_cont p{ color:#fff; text-align: center; }

/* //2023리뉴얼 */

/* 모바일사이트 전체 기본 설정값, 폰트, 배경, 제목 요소 등 스타일 가이드, 통일성 부여 */
.join_hidden { display: none; font-size: 12px; color: #fa5c3f; padding:0.2em 0 0 0.2em;}

.bar { width: 2em; height: 1px; background: #dedede; margin: 5% auto; }

/* imagemap */
img[usemap] {border: none; height: auto;max-width: 100%; width: 100%;}

/* left sitemap */
div#mobile_sideMenu { width: 90%; height: 100%; position:fixed; z-index:900; top:0; left:-90%; background-color:white; overflow-x:hidden; transition:0.5s;}
/* div#mobile_sideMenu a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s} */
div#mobile_sideMenu table#tbl_sideMenu { width:100%; border-collapse: collapse;}
div#mobile_sideMenu td.iHeight { padding-left:20px; }
div#mobile_sideMenu td.iHeight a { color:#fff; font-size:17px; }
div#mobile_sideMenu td.iHeight a>img { width:5%; padding-right:2%; vertical-align:bottom; }
div#mobile_sideMenu td.iHeight a>span { color:#fff; font-size:17px; }
div#mobile_sideMenu td.iHeight a>.allDays{font-size:15px; margin-left:2px;}
div#mobile_sideMenu td.fir { background:#283444; }
div#mobile_sideMenu td.sec { background:#54c5b8; background: var(--color-blue);}
div#mobile_sideMenu section#leftNav { width:40%; float:left; text-align:right;}
div#mobile_sideMenu section#leftNav li { padding-right:12%; font-weight: bold; font-size: 18px; vertical-align: middle; background:#f8f8f8; border-bottom:1px solid #dedede; border-right:1px solid #dedede;}
div#mobile_sideMenu section#leftNav li a { color:#4a4a4a; font-size:16px; }
/* div#mobile_sideMenu section#leftNav li.on {border-right: 5px solid #54c5b8; } */
div#mobile_sideMenu section#leftNav li.on a { color:#54c5b8;color: var(--color-blue);}
div#mobile_sideMenu section#rightNav { width:58%; float:left; padding-left:2%; padding-top:3%; }
div#mobile_sideMenu section#rightNav li { vertical-align: middle;}
div#mobile_sideMenu section#rightNav .detailedNav table { width:100%; }
div#mobile_sideMenu section#rightNav .navTitle{color:#54c5b8; font-size:15px; border-bottom:1px solid #dedede; text-align:left;}
div#mobile_sideMenu section#rightNav td>a { color:#4a4a4a; font-size: 13px;}
/* div#mobile_sideMenu a:hover, .offcanvas a:focus{ color: #f1f1f1; }  */
div#mobile_sideMenu .closebtn { position:absolute; top:0; right:25px; font-size:36px;font-size: 30px; margin-left:50px; color:#fff; }
#bg_mobile_sideMenu {position:fixed; width:100%; height: 100%; /* right: -100% */; top:0; z-index:489;z-index: 899; background:#000; opacity:0; filter:alpha(opacity=50);/* transition:0.4s; */}

@media screen and (max-height: 450px) {
  div#mobile_sideMenu a {font-size: 18px;}
}

/* animation 효과는 transform:rotate를 이용, opacity는 transition으로 준다. */
#title .right img {position:absolute; }

#title .right a img.on{
	animation-name : btn_rotate;
	-webkit-animation-name : btn_rotate;
	-moz-animation-name : btn_rotate;
	-ms-animation-name : btn_rotate;
	-o- animation-name : btn_rotate; 
	
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o- animation-duration: 1s;
	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o- animation-fill-mode: forwards;
	
}
#title .right a img.top {
	transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o- transition: opacity 1s ease-in-out;
}

#title .right a img.top.on {
	opacity:0;
}

#title .right a img.off{
	animation-name : btn_rotate_back;
	-webkit-animation-name : btn_rotate_back;
	-moz-animation-name : btn_rotate_back;
	-ms-animation-name : btn_rotate_back;
	-o- animation-name : btn_rotate_back; 
	
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o- animation-duration: 1s;
	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o- animation-fill-mode: forwards;
	
}

@keyframes btn_rotate {
	to {
		transform : rotate(180deg);
		-webkit-transform : rotate(180deg);
		/* content:url(/mobile2017/resource/images/sub/sub_title_bt03.png); */
	}
}
@keyframes btn_rotate_back {
	from{
		transform : rotate(180deg);
		-webkit-transform : rotate(180deg);
		/* content:url(/mobile2017/resource/images/sub/sub_title_bt03.png); */
	}
	to {
		transform : rotate(0deg);
		-webkit-transform : rotate(0deg);
		/* content:url(/mobile2017/resource/images/sub/sub_title_bt.png); */
	}
}

.fixed-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #001f6a;
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.fixed-bottom-bar a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.fixed-bottom-text-section {
    display: flex;
    flex-direction: column;
    color: white;
    flex-grow: 1;
    margin-right: 15px;
    padding: 5px 0;
    width: auto;
}

.fixed-bottom-text-section .main-text {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixed-bottom-text-section .sub-text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inquiry-button {
    background-color: #e74c60;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: 100%;
    max-width: 230px;
}