/* 제목 */

    /* HEADING  */
    h1 { }
    h2 { }
    h3 { }
    h4 { }
    h5 { }
    h6 { }

	/* TEXT */
    .f_green { color:#279966 !important;}
    .f_yellow { color:#e5a700 !important;}
    .f_red { color:#e45f5e !important;}
	
	p.txt {color:#212225; line-height:160%;}

/* 버튼 */

    .btn { cursor:pointer; transition:0.2s; width:100%; overflow: hidden; display: inline-block; vertical-align: middle; text-align: center;border:1px solid #ccc ; font-size: 1rem; letter-spacing: -0.05em;}
    .btn:active { border:none; }
    .btn:visited { border:none; }
    .btn:hover { border-radius: 0 0 15px 0;}

    /* SIZE */
    .btn.sm { max-width:80px; height: 40px; line-height: 40px;}
    .btn.md { max-width:140px; height: 50px; line-height: 50px; }
    .btn.lg { max-width:150px; height: 50px; line-height: 50px; border-radius: 0 0 15px 0;}
    .btn.xl { max-width: 200px; height: 40px; line-height: 40px;}
	.btn.xl02 { max-width: 300px; height: 60px; line-height: 60px;}
    .btn.block { max-width: 100%; height: 60px; line-height: 60px;}
    .btn.auto { padding:9px 15px; width:auto; }

    /* COLOR */
    .btn.basic { background-color: #e3e8f3; border-color:#e3e8f3; color:#7887a4; }
    .btn.basic:hover { background-color: #234ba1; border-color:#234ba1; color:#fff; }
    .btn.blue { background-color: #234ba1; border-color:#234ba1; color:#fff; }
    .btn.blue:hover { background-color: #1951b9; color:#fff; }
    .btn.gray { background-color: #646876; color:#fff; border-color:#646876;}
    .btn.gray:hover { background-color: #3d4049; color:#fff; }
    .btn.green { background-color: #3cb47e; border-color:#3cb47e; color:#fff; }
    .btn.green:hover { background-color: #36a070; color:#fff; }
    .btn.black { background-color: #212225; border-color:#212225; color:#fff; }
    .btn.black:hover { background-color: #41434b; color:#fff; border-radius: 0;}



    /* btn-align */
    .btn-align { display: flex; width: 100%; margin:15px 0;}
    .btn-align.left { justify-content: flex-start;}
    .btn-align.left a.btn:not(:last-child) { margin-right:10px;}
    .btn-align.center { justify-content: center;}
    .btn-align.center a.btn:not(:last-child) { margin-right:10px;}
    .btn-align.right { justify-content: right;}
    .btn-align.right a.btn:not(:last-child) { margin-right:10px;}

/* 테이블 */

    /* table */
    .table { border-collapse: collapse; width:100%; text-align: center;}

    /* table-style */
    .table.style1 { border-top:2px solid #303f81;}
    .table.style1 tr { }
    .table.style1 tr th { background-color:#f4f4f8; color:#303f81; border-right: 1px solid #e1e1ec;}
    .table.style1 tr td { background-color:#ffffff; color:#262b32; border:1px solid #e1e1ec; }
    .table.style1 tr td .a_link { position: relative; z-index: 1; display: inline-block; transition: all 300ms ease;}
    .table.style1 tr td .a_link::before { content: ''; display:block; background-color: #001d70;  position: absolute; left:-5px; top:0; height: 100%; width: 0; z-index: -1; transition: all 300ms ease;}
    .table.style1 tr td .a_link:hover { color:#fff !important;}
    .table.style1 tr td .a_link:hover::before { width: calc(100% + 10px); transition: all 300ms ease;}
    .table.style1 tr td a { font-weight: bold;}
    .table.style1 tr td a:hover { color:#23b69c; text-decoration: underline;}
    .table.style1 tr td:first-child { border-left:none;}
    .table.style1 tr td:last-child { border-right:none;}
    .table.style1 tr:hover td { background-color: #f8f8f8;}

    .table.style2 { border-radius: 5px; overflow: hidden; }
    .table.style2 tr { }
    .table.style2 tr th { background-color:var(--table-bg-th); color:var(--table-ft-th); border-right:1px solid var(--table-bd); }
    .table.style2 tr th:last-child { border-right:none;}
    .table.style2 tr td { background-color:var(--table-bg-td); color:var(--table-ft-td); border-right:1px solid var(--table-bd); border-bottom:1px solid var(--table-bd);}
    .table.style2 tr td:last-child { border-right: none;}
    .table.style2 tr:last-child td { border-bottom: none;}

    .table.style3 { border-top:2px solid var(--table-top-line); }
    .table.style3 tr { }
    .table.style3 tr th { background-color:var(--table-bg-th); color:var(--table-ft-th); border-right:1px solid var(--table-bd); }
    .table.style3 tr th:last-child { border-right:none;}
    .table.style3 tr td { background-color:var(--table-bg-td); color:var(--table-ft-td); border-right:1px solid var(--table-bd); border-bottom:1px solid var(--table-bd);}
    .table.style3 tr td:last-child { border-right: none;}

	.table.style4 { border-top:2px solid #303f81;}
    .table.style4 tr {border-bottom:1px solid #e1e1ec; }    
    .table.style4 tr th { background-color:#f0f3fb; color:#303f81; border-right: 1px solid #e1e1ec;}
	.table.style4 tr:last-child > th {border-bottom: none;}
    .table.style4 tr td { background-color:#ffffff; color:#262b32; }
    .table.style4 tr td a:hover { color:#23b69c; text-decoration: underline;}
    .table.style4 tr td:first-child { border-left:none;}
    .table.style4 tr td:last-child { border-right:none;}
    .table.style4 tr:hover td { background-color: #f8f8f8;}


    /* table-padding */
    .table.high5 tr th,.table.high5 tr td { padding-top:0.3125rem; padding-bottom:0.3125rem;}
    .table.high10 tr th,.table.high10 tr td { padding-top:0.625rem; padding-bottom:0.625rem;}
    .table.high15 tr th,.table.high15 tr td { padding-top:0.9375rem; padding-bottom:0.9375rem;}
    .table.high20 tr th,.table.high20 tr td { padding-top:1.25rem; padding-bottom:1.25rem;}

    .table.wide5 tr th,.table.wide5 tr td {  padding-left:0.3125rem; padding-right:0.3125rem;}
    .table.wide10 tr th,.table.wide10 tr td { padding-left:0.625rem; padding-right:0.625rem;}
    .table.wide15 tr th,.table.wide15 tr td { padding-left:0.9375rem; padding-right:0.9375rem;}
    .table.wide20 tr th,.table.wide20 tr td { padding-left:1.25rem; padding-right:1.25rem;}

    /* table-align */
    .table.left tr th,.table.left tr td { text-align: left; }
    .table.right tr th,.table.right tr td { text-align: right; }
    .table.center tr th,.table.center tr td { text-align: center; }

    .table.td-right1 tr td:nth-of-type(1),.table.th-right1 tr th:nth-of-type(1) { text-align: right; }
    .table.td-right2 tr td:nth-of-type(2),.table.th-right2 tr th:nth-of-type(2) { text-align: right; }
    .table.td-right3 tr td:nth-of-type(3),.table.th-right3 tr th:nth-of-type(3) { text-align: right; }
    .table.td-right4 tr td:nth-of-type(4),.table.th-right4 tr th:nth-of-type(4) { text-align: right; }
    .table.td-right5 tr td:nth-of-type(5),.table.th-right5 tr th:nth-of-type(5) { text-align: right; }
    .table.td-right6 tr td:nth-of-type(6),.table.th-right6 tr th:nth-of-type(6) { text-align: right; }
    .table.td-right7 tr td:nth-of-type(7),.table.th-right7 tr th:nth-of-type(7) { text-align: right; }
    .table.td-right8 tr td:nth-of-type(8),.table.th-right8 tr th:nth-of-type(8) { text-align: right; }
    .table.td-right9 tr td:nth-of-type(9),.table.th-right9 tr th:nth-of-type(9) { text-align: right; }

    .table.td-left1 tr td:nth-of-type(1),.table.th-left1 tr th:nth-of-type(1) { text-align: left; }
    .table.td-left2 tr td:nth-of-type(2),.table.th-left2 tr th:nth-of-type(2) { text-align: left; }
    .table.td-left3 tr td:nth-of-type(3),.table.th-left3 tr th:nth-of-type(3) { text-align: left; }
    .table.td-left4 tr td:nth-of-type(4),.table.th-left4 tr th:nth-of-type(4) { text-align: left; }
    .table.td-left5 tr td:nth-of-type(5),.table.th-left5 tr th:nth-of-type(5) { text-align: left; }
    .table.td-left6 tr td:nth-of-type(6),.table.th-left6 tr th:nth-of-type(6) { text-align: left; }
    .table.td-left7 tr td:nth-of-type(7),.table.th-left7 tr th:nth-of-type(7) { text-align: left; }
    .table.td-left8 tr td:nth-of-type(8),.table.th-left8 tr th:nth-of-type(8) { text-align: left; }
    .table.td-left9 tr td:nth-of-type(9),.table.th-left9 tr th:nth-of-type(9) { text-align: left; }

    .table.td-center1 tr td:nth-of-type(1),.table.th-center1 tr th:nth-of-type(1) { text-align: center; }
    .table.td-center2 tr td:nth-of-type(2),.table.th-center2 tr th:nth-of-type(2) { text-align: center; }
    .table.td-center3 tr td:nth-of-type(3),.table.th-center3 tr th:nth-of-type(3) { text-align: center; }
    .table.td-center4 tr td:nth-of-type(4),.table.th-center4 tr th:nth-of-type(4) { text-align: center; }
    .table.td-center5 tr td:nth-of-type(5),.table.th-center5 tr th:nth-of-type(5) { text-align: center; }
    .table.td-center6 tr td:nth-of-type(6),.table.th-center6 tr th:nth-of-type(6) { text-align: center; }
    .table.td-center7 tr td:nth-of-type(7),.table.th-center7 tr th:nth-of-type(7) { text-align: center; }
    .table.td-center8 tr td:nth-of-type(8),.table.th-center8 tr th:nth-of-type(8) { text-align: center; }
    .table.td-center9 tr td:nth-of-type(9),.table.th-center9 tr th:nth-of-type(9) { text-align: center; }

    .table tr.tc td,.table tr.tc th { text-align: center;}
    .table tr.tl td,.table tr.tl th { text-align: left;}
    .table tr.tr td,.table tr.tr th { text-align: right;}

    /* table-reactive */
    .table-reactive { overflow-x: auto;}
    .table-reactive .table { min-width: 800px;}
	
    /* table-scroll */
    .table-scroll { overflow-x: auto;}
    .table-scroll .table-thead { border-radius: 15px; overflow: hidden; padding-right: 15px; min-width: 600px; background-color: var(--table-bg-th);}
    .table-scroll .table-thead .table tr { }
    .table-scroll .table-thead .table tr th { color:var(--table-ft-th); }

    .table-scroll .table-tbody { border-bottom: 1px solid var(--table-bd);  min-width: 600px; overflow-y: auto;}
    .table-scroll .table-tbody .table tr {}
    .table-scroll .table-tbody .table tr:last-child td { border-bottom: none;}
    .table-scroll .table-tbody .table tr td { background-color:var(--table-bg-td); color:var(--table-ft-td); border-right:1px solid var(--table-bd); border-bottom: 1px solid var(--table-bd);}
    .table-scroll .table-tbody .table tr td:last-child { border-right: none;}
    .table-scroll .table-tbody .table tr:hover td { background-color: #eee;}
    /* scroll-style */
    .table-scroll .table-tbody::-webkit-scrollbar { width: 15px;}
    .table-scroll .table-tbody::-webkit-scrollbar-thumb { background-color: #bebebe; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; }
    .table-scroll .table-tbody::-webkit-scrollbar-track { background-color: #d8d8d8; border-radius: 10px; overflow: hidden; }
    /* scroll-height */
    .table-scroll .table-tbody.mh280 { height: 280px;}
    .table-scroll .table-tbody.mh375 { height: 375px;}
    .table-scroll .table-tbody.mh420 { height: 420px;}

    :root {
        /* table */
        --table-bg-th:#4d4c51;
        --table-bg-td:#fff;
        --table-ft-th:#fff;
        --table-ft-td:#4d4c51;
        --table-bd:#ddd;
        --table-top-line:#000;
    }

/* 체크박스 */

    /* checkbox1 */
    .checkbox.style1 { height: 20px; line-height: 20px; vertical-align: middle;}
    .checkbox.style1 input { display: none; }
    .checkbox.style1 .text { cursor: pointer; color:#333333; font-weight: 500;}
    .checkbox.style1 .icon { display:inline-block; width:20px; height:20px;position:relative; cursor: pointer; margin:0 5px 2px 0; vertical-align: middle; background-color: #eceef1; border-radius: 5px; border:1px solid #d0d4db;}
    .checkbox.style1 .icon::before,
    .checkbox.style1 .icon::after { content: ''; display: inline-block; background-color: #fff;  width:2px;  position:absolute; transform-origin: left top; border-radius:5px;}
    .checkbox.style1 .icon::before {top: 8px;left: 3px;transform: rotate(-45deg);}
    .checkbox.style1 .icon::after {top: 13px;left: 9px;transform: rotate(-135deg);}
    .checkbox.style1 input:checked ~ .icon { background-color: #5288fa; border-color: #5288fa;}
    .checkbox.style1 input:checked ~ .icon::before {transition:all .15s ease;height: 7px;}
    .checkbox.style1 input:checked ~ .icon::after {transition:all .1s ease .15s;height: 9px;}


/* 라디오 */

    /* radio1 */
    .radio.style1 { height: 24px; line-height: 24px; vertical-align: middle;}
    .radio.style1 input { display: none; }
    .radio.style1 .text { cursor: pointer; font-size:1rem; color:#333333; font-weight: 500;}
    .radio.style1 .icon { display:inline-block; width:24px; height:24px;position:relative; cursor: pointer; margin-right: 5px; vertical-align: middle; background-color: #f5f5f5; border-radius: 50%; border:1px solid #c5c5c5;}
    .radio.style1 .icon::before,
    .radio.style1 .icon::after {content: '';display: inline-block;background-color: #fff;width:3px;position:absolute;transform-origin: left top;}
    .radio.style1 .icon::before {top: 11px;left: 3px;transform: rotate(-45deg);}
    .radio.style1 .icon::after {top: 17px;left: 9px;transform: rotate(-135deg);}
    .radio.style1 input:checked ~ .icon { background-color: #5288fa; border-color: #5288fa;}
    .radio.style1 input:checked ~ .icon::before {height: 6px;}
    .radio.style1 input:checked ~ .icon::after {height: 13px;}

    /* radio2 */
    .radio.style2 { height: 24px; line-height: 24px; vertical-align: middle;}
    .radio.style2 input { display: none; }
    .radio.style2 .text { cursor: pointer; font-size:1rem; color:#333333; font-weight: 500;}
    .radio.style2 .icon { display:inline-block; width:24px; height:24px;position:relative; cursor: pointer; margin-right: 5px; vertical-align: middle; background-color: #f5f5f5; border-radius: 50%; border:1px solid #c5c5c5;}
    .radio.style2 .icon::before {content: '';display: inline-block;background-color: #fff; width:10px; height: 10px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); display: none; border-radius: 50%;}
    .radio.style2 input:checked ~ .icon { background-color: var(--font-point); border-color: var(--font-point);}
    .radio.style2 input:checked ~ .icon::before { transition:all .15s ease; display: block;}

/* 토글버튼 */

    /* toggle button */
    .toggle.style1 { position: relative; display: inline-block; width: 55px; height: 30px; }
    .toggle.style1 input { opacity: 0; width: 0; height: 0; }
    .toggle.style1 .icon { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius:20px; background-color: #8b8b8b; box-shadow: inset 1px 2px 1px #5f5f5f; -webkit-transition: .4s; transition: .4s; }
    .toggle.style1 .icon:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .5s; transition: .4s; border-radius:20px; }
    .toggle.style1 input:checked + .icon { background-color: #154194; box-shadow: inset 1px 2px 1px #0e2d68; }
    .toggle.style1 input:checked + .icon:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }

    .toggle.style2 { position: relative; display: inline-block; width: 40px; height: 20px; }
    .toggle.style2 input { opacity: 0; width: 0; height: 0; }
    .toggle.style2 .icon { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius:20px; background-color: #8b8b8b; box-shadow: inset 1px 2px 1px #5f5f5f; -webkit-transition: .4s; transition: .4s; }
    .toggle.style2 .icon:before { position: absolute; content: ""; height: 14px; width: 14px; left: 4px; bottom: 3px; background-color: #fff; -webkit-transition: .5s; transition: .4s; border-radius:20px; }
    .toggle.style2 input:checked + .icon { background-color: #5288fa; box-shadow: inset 1px 2px 1px #0e2d68; }
    .toggle.style2 input:checked + .icon:before { -webkit-transform: translateX(26px); -ms-transform: translateX(18px); transform: translateX(18px); }


/* 리스트 */
.txtlist { display: block; letter-spacing: -0.02em; line-height: 160%; margin:10px 0;}

    /* list1 */
    .txtlist.style1 > li { position: relative; padding-left: 10px; color:#333;}
    .txtlist.style1 > li::before { content: ''; display: block; position: absolute; left:0; top:10px; width: 4px; height: 4px; border-radius: 50%; background-color: #154194; }
    .txtlist.style1 > li.none::before { display: none; }
    .txtlist.style1 > li > ul {margin:10px 0; }
    .txtlist.style1 > li > ul > li { position: relative; padding-left:15px; color:#666;}
    .txtlist.style1 > li > ul > li::before {  content: ''; display: block; position: absolute; left:0; top:11px;  width: 7px; height: 2px; background-color: #999; }
    .txtlist.style1 > li > ul > li.none::before { display: none; }
	.txtlist.style1 > li > p {margin:10px 0; position:relative; padding-left:15px; color:#666;}
	.txtlist.style1 > li > p:before {content: ''; display: block; position: absolute; left:0; top:11px;  width: 7px; height: 2px; background-color: #999; }
	
	/* list2 */
	.txtlist.style2 > li { position: relative; padding-left: 10px; color:#333;}
	.txtlist.style2 > li.none::before { display: none; }
	.txtlist.style2 > li > ul {margin:10px 0; }
	.txtlist.style2 > li > ul > li { position: relative; padding-left:15px; color:#666;}
	.txtlist.style2 > li > p {margin:10px 0; position:relative; padding-left:15px; color:#666;}
	.txtlist.style2 > li > p:before {content: ''; display: block; position: absolute; left:0; top:11px;  width: 7px; height: 2px; background-color: #999; }

	/* list3 */
	.txtlist.style3 { margin-left: 25px;}
	.txtlist.style3 > li {position: relative; }
	.txtlist.style3 > li::before {content: ''; display: block; position: absolute; left:-11px; top:11px;  width: 7px; height: 2px; background-color: #333; }

/* 탭메뉴 */

    /* tab menu */
    .tab-menu { display: flex; max-width: 1055px; width: 100%;  margin:0 auto; justify-content: space-between; align-items: center;}
    .tab-menu > li { flex: 1;}
    .tab-menu > li > a { display: block; background-color: #e3e8f3; text-align: center; line-height: 60px; height: 60px; width: 100%; /*max-width: 200px;*/ color:#7887a4;}
    .tab-menu > li:first-child a { border-radius: 20px 0 0 0 ;}
    .tab-menu > li:last-child a { border-radius: 0 0 20px 0 ;}
    .tab-menu > li.active a,
    .tab-menu > li:hover a{ background-color:#5288fa ; color:#fff; }



/* 페이징 */

    /* paging */
    .paging { display: flex; justify-content: center; align-items: center; width: 100%; margin:6.25rem 0;}
    .paging li:not(:first-child) { margin-left: 5px;}
    .paging li a {width: 3.125em; height: 3.125em; border-radius: 50%; border:none; color:#666; font-size: 1rem; display: flex; justify-content: center; align-items: center;}
    .paging li a:hover,
    .paging li.active a { background-color: #212225; color:#fff;}
    .paging li a:hover i,
    .paging li.active a i{ background-position-y: -81px;}
    .paging li.disable a,
    .paging li.disable a:hover { background-color: transparent; cursor: default;}
    .paging li.disable a i,
    .paging li.disable a:hover i { background-position-y:-94px ; }

/* FORM */

    /* INPUT */
    .input1 { background-color: #fff; border-radius: 15px; height: 50px; width: 100%; max-width: 300px; border:1px solid #ccc; padding:0 15px;}
    input.auto { width: 50px;}

    /* SELECT */
    .select1 { background-color: #fff; border-radius: 15px; height: 50px; width: 100%; max-width: 300px; border:1px solid #ccc; padding:0 15px; position: relative;}
    .select1 select { width:100%; height:100%; border:0; -webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/ appearance:none; box-sizing: border-box; background:transparent; }
    .select1::before,
    .select1::after { content: ''; display: block; width: 6px; height: 2px; background-color:#000; position: absolute; left:95%; top:50%;  pointer-events: none; }
    .select1::before { transform: rotate(-45deg);}
    .select1::after {transform: rotate(45deg);}


/* ICON */
i { text-decoration: none; display:inline-block; background-image:url(../img/www_logo.png); background-repeat:no-repeat; background-size: contain; vertical-align: middle;}

    i.i_close { width: 12px; height: 12px; background-position: -52px -17px ;}
    i.i_search { width: 20px; height: 20px; background-position: 1px -0px ;}
    i.i_plus { width: 10px; height: 10px; background-position: -19px -0px ;}
    i.i_minus { width: 10px; height: 2px; background-position: -19px -10px ;}
    i.i_refresh { width: 14px; height: 16px; background-position: -67px -0px ;}
    i.i_parking { width: 17px; height: 17px; background-position: -50px -0px ;}
    i.i_address { width: 12px; height: 15px; background-position: -58px -56px ;}
    i.i_call { width: 12px; height: 12px; background-position: -58px -44px ;}
    i.i_road { width: 19px; height: 21px; background-position: -0px -20px ;}
    i.i_road_sm { width: 15px; height: 16px; background-position: -19px -25px ;}
    i.i_gps { width: 21px; height: 21px; background-position: -29px -0px ;}
    i.i_pin { width: 12px; height: 23px; background-position: -64px -17px ;}
    i.i_parking_tip { width: 28px; height: 29px; background-position: -0px -41px ;}
    i.i_join_user { width: 11px; height: 12px; background-position: -7px -71px ;}
    i.i_logout { width: 14px; height: 14px; background-position: -4px -107px ;}
    i.i_user { width: 13px; height: 15px; background-position: -18px -107px ;}
    i.i_go_back { width: 23px; height: 9px; background-position: -77px -62px ;}
    i.i_download { width: 14px; height: 14px; background-position: -81px -0px ;}
    i.i_logo { width: 50px; height: 50px;}
    i.i_main_p { width: 29px; height: 31px; background-position: -0px -125px  ;}
    i.i_main_search { width: 30px; height: 31px; background-position: -27px -125px  ;}
    i.i_map_pk { width: 10px; height: 11px; background-position: -100px -58px ; margin-left:2px;}
    i.i_map_pin { width: 21px; height: 38px; background-position: -115px -118px ; }

    i.i_nav_set { width: 17px; height: 17px; background-position: -57px -125px ;}
    i.i_nav_close { width: 16px; height: 16px; background-position: -74px -125px ;}

    /* arrow */
    i.i_arrow.blue { width: 7px; height: 13px; background-position: -70px -40px ;}
    i.i_arrow.black { width: 7px; height: 13px; background-position: -70px -53px ;}
    i.i_arrow.sky { width: 7px; height: 13px; background-position: -77px -42px ;}
    i.i_arrow.top {transform: rotate(270deg);}
    i.i_arrow.left {transform: rotate(180deg);}
    i.i_arrow.bottom {transform: rotate(90deg);}
    i.i_arrow.right {transform: rotate(0deg);}

    i.i_tip { width: 30px; height: 30px; background-position: -28px -41px ;}
    i.i_tip_sm { width: 18px; height: 18px; background-position: -34px -23px ;}

    i.i_view { width: 16px; height: 18px; background-position: -49px -71px ;}
    i.i_share { width: 12px; height: 18px; background-position: -65px -71px ;}
    i.i_bookMark { width: 18px; height: 17px; background-position: -31px -71px ;}

    i.i_filter { width: 20px; height: 22px; background-position: -77px -71px ;}
    i.i_hamber { width: 21px; height: 13px; background-position: -77px -93px ;}
    i.i_mList { width: 20px; height: 13px; background-position: -89px -17px ;}
    i.i_way { width: 12px; height: 12px; background-position: -76px -17px ;}
    i.i_linkCopy {width: 11px; height: 13px; background-position: -77px -29px ;}
    i.i_car {width: 17px; height: 14px; background-position: -89px -44px ;}

    i.i_start {width: 13px; height: 13px; background-position: -98px -94px;}
    i.i_prev {width: 7px; height: 13px; background-position: -112px -94px;}
    i.i_next {width: 7px; height: 13px; background-position: -119px -94px;}
    i.i_end {width: 13px; height: 13px; background-position: -127px -94px;}

    i.i_triple_arw {width: 33px; height: 13px; background-position: -49px -107px;}

    i[class*="intro_i0"] { background: url(../img/process.png)no-repeat; }
    i.intro_i01 {width: 148px; height: 120px; background-position: -0px -0px;}
    i.intro_i02 {width: 164px; height: 121px; background-position: -148px -0px;}
    i.intro_i03 {width: 157px; height: 128px; background-position: -312px -0px;}
    i.intro_i04 {width: 171px; height: 145px; background-position: -469px -0px;}

    i.i_slide_btn {width: 22px; height: 40px; background-position: -140px -76px;}
    i.i_slide_btn.prev { transform: rotate(180deg);}
    i.i_slide_btn.next { transform: rotate(0);}


a.btn2.ani { display:block; position: relative; width: 150px; height: 50px; line-height: 50px; text-align: center; color: inherit;  overflow: hidden; background-color:#154194; border-radius: 0 0 15px 0; color:#fff; font-weight: 700; font-size: 1rem;}
a.btn2{overflow: hidden; }
a.btn2::before { z-index: 7000; content: '앱 다운로드'; text-align: center; display: block; position: absolute; left:0; top:0; height: 100%; line-height: 50px; text-align: center; width: 100%;}
a.btn2 span {width: 20px; height: 20px; background: #3b9e5d; display: none; position: absolute; border-radius: 50%; }
a.btn2 span.btn2Ani{animation: btn2Ani 0.5s linear 1; transform: scale(20,20)}
@keyframes btn2Ani {
    0%{transform: scale(1,1)}
    100%{transform: scale(20,20)}
}