/**
* OLYM Cascading Style Sheets
* File Name :contents.css
* Description :컨텐츠 스타일시트
* Author :Web business Team / Choi Hyun Mi
* Email :desingtj@olym.co.kr
* Date :2017.08.01
* Update :2017.08.01
* Copyright(c) 2017 OLYM Communications. All Rights Reserved.
*/
 /* ///////////////////////////포인트컬러 변경///////////////////////////
          포인트 컬러1 - #00987e
				  포인트 컬러2 - #3155a4
				  검색해서 모두 바꾸기 해주세요!
 /////////////////////////////////////////////////////////////////// */

/************ tab_type ************/
.tab_type1 > ul { display:flex; justify-content: center; margin:0 auto 30px auto; max-width: 60%;}
.tab_type1 > ul > li { width: 100%;}
.tab_type1 > ul > li > a { display:flex; align-items: center; justify-content: center; border:1px solid #dbdbdb; border-left: none; width: 100%; height: 60px; background:#f1f1f1; font-weight:500; color: #9d9d9d; box-sizing: border-box;}
.tab_type1 > ul > li:first-child > a { border-left:1px solid #dbdbdb;}
.tab_type1 > ul > li > a:hover { background:#f6f6f6;}
.tab_type1 > ul > li > a.on { border:1px solid #00987e; box-shadow: 0 2px 2px rgba(0,0,0,0.1); background:#fff; color: #00987e;}

.tab_type2 > ul { display:flex; margin-bottom:30px; border-top:1px solid #d4d4d4; border-left:1px solid #d4d4d4; }
.tab_type2 > ul > li {width: 100%;}
.tab_type2 > ul > li > a { display: flex; align-items: center; padding:0 10%; border:1px solid #d4d4d4; border-top: none; border-left: none; height: 50px; background:url(/project/design/template/bg_tab2_off.png) no-repeat 90% center / auto 8px; color:#666;}
.tab_type2 > ul > li > a.on, .tab_type2 > ul > li > a:hover { border:1px solid #3155a4; border-top: none;border-left: none; background:#3155a4 url(/project/design/template/bg_tab2_on.png) no-repeat 90% center / auto 8px; color:#fff;}

.tab_type3 > ul { display:flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom:30px;}
.tab_type3 > ul > li > a { display:flex; align-items: center; justify-content: center; padding:0 25px; border:1px solid #d4d4d4; height: 40px; color:#666;}
.tab_type3 > ul > li > a.on, .tab_type3 > ul > li > a:hover { border:1px solid #00987e; background:#00987e; color:#fff;}

.tab_type4 > ul { display:flex; gap: 10px; justify-content: center; margin-bottom:30px;}
.tab_type4 > ul > li { width: 100%;}
.tab_type4 > ul > li > a { display:flex; align-items: center; justify-content: center; padding:10px; background:#8a8a8a; color:#fff;}
.tab_type4 > ul > li > a:hover, .tab_type4 > ul > li > a.on { background:#3155a4;}

.tab_box { padding:40px; border:1px dashed #ddd;}

@media all and (max-width:800px) {
.tab_type1 > ul { margin:0 auto 30px auto; max-width: 100%;}
.tab_type1 > ul > li > a { height:40px; font-size:0.95em;}

.tab_type2 > ul { flex-wrap: wrap;}
.tab_type2 > ul > li { flex: 1 1 20%;}
.tab_type2 > ul > li > a { height:40px; font-size:0.95em;}

.tab_type3 > ul { gap: 5px;}
.tab_type3 > ul > li > a { padding:0 20px; font-size:0.95em;}

.tab_type4 > ul { gap: 5px;}
.tab_type4 > ul > li > a { font-size:0.95em;}

.tab_box { padding:20px;}
}

@media all and (max-width:500px) {
.tab_type2 > ul > li { flex: 1 1 50%;}
}


/************ h_type ************/
.h_type1 { margin-bottom:20px; padding-left: 30px; position: relative; font-size:24px; font-weight:600; color:#000;}
.h_type1::before { position: absolute; top: 2px; left: 0; font-family: "remixicon"; font-weight: 400; color: #3155a4; content: "\EA68";}
.h_type2 { margin-bottom:10px; padding-left:30px; background:url("/project/design/template/bg_h2.png") no-repeat 6px 2px; font-size:18px; line-height:17px; color:#444;}
.h_type3 { margin-bottom:10px; padding-left:30px; background:url("/project/design/template/bg_h3.png") no-repeat 9px 3px; font-size:16px; line-height:16px; color:#555;}

@media all and (max-width:800px) {
.h_type1 { margin-bottom:10px; padding-left: 22px; font-size:18px;}
}

/************ ul_type ************/
.ul_type1 > li { margin-bottom:7px; padding-left:15px; background:url("/project/design/template/bg_li1.png") no-repeat left 10px;}
.ul_type1 > li > ul { margin-top:5px;}
.ul_type1 > li > ul > li { margin-bottom:5px; padding-left:12px; background:url("/project/design/template/bg_li2.png") no-repeat 2px 10px;}
.ul_type1 > li:last-child { margin-bottom:0; }


/************ a_type ************/
/* 다운로드링크 */
.a_down { display:inline-block; padding:0 30px 0 5px; border-bottom:1px dashed #666; background:url("/project/design/template/bg_down2_c1.png") no-repeat; background-position:calc(100% - 7px); color:#666;}
.a_down:hover { border-bottom:1px dashed #00987e; background:url("/project/design/template/bg_down2_c2.png") no-repeat; background-position:calc(100% - 7px) center; color:#00987e;}

/* 새창링크 */
.a_link { display:inline-block; padding:0 30px 0 5px; border-bottom:1px dashed #666; background:url("/project/design/template/bg_link2_c1.png") no-repeat; background-position:calc(100% - 7px); color:#666;}
.a_link:hover { border-bottom:1px dashed #00987e; background:url("/project/design/template/bg_link2_c2.png") no-repeat; background-position:calc(100% - 7px) center; color:#00987e;}


/************ box_type ************/
/* 이미지없는 박스 */
.box_type1 { padding:20px 30px; border:1px dashed #666;}

/* 좌측이미지 박스 */
.box_type2 { padding:20px; border:1px solid #d4d4d4; position:relative;}
.box_type2 .left_img { width:15%; max-width:114px; min-height:114px; float:left; background:#f6f6f6 url("/project/design/template/bg_box1.png") no-repeat center;}
.box_type2 .right_desc { padding:10px 0 0 3%; width:82%; float:left;}

@media all and (max-width:800px) {
.box_type1 { padding:15px 20px; font-size:0.95em;}
.box_type2 .left_img { width:20%;}
.box_type2 .right_desc { padding:0 0 0 3%; width:77%; font-size:0.95em;}
}
@media all and (max-width:500px) {
.box_type2 .left_img { width:30%; background-size:50px;}
.box_type2 .right_desc { width:67%;}
}


/************ table_type ************/
.table_type1 { border-top:2px solid #000;overflow: auto;} /* 테이블 상단 라인과 세로라인이 겹치는 부분을 없앰, 모바일에서 가로스크롤 */
.table_type1 table, .table_type1 th, .table_type1 td { border-top:none; font-size:inherit; border-collapse:collapse;}
.table_type1 th, .table_type1 td {border: 1px solid #d4d4d4; }
.table_type1 table { width:100%;}
.table_type1 th { padding:15px; background:#f6f6f6; font-size: 18px; font-weight: 700; color:#333;}
.table_type1 td { padding:15px; font-size: 17px; font-weight: 500; color: #686868; text-align:center;}
.table_type1 th:nth-child(1),
.table_type1 td:nth-child(1) {
	border-left: none;
}

.table_type1 th:last-child,
.table_type1 td:last-child {
	border-right: none;
}

@media all and (max-width:800px) {
.table_type1 table, .table_type1 th, .table_type1 td { width: 800px; font-size:0.95em; word-break: keep-all;}
.table_type1 th.td1 {width: 80px !important;}
.table_type1 th { padding:10px;}
.table_type1 td { padding:10px;}
}


/************ btn_type ************/
/* 기본버튼 */
.btn { display:inline-block; padding:0 20px; border:1px solid #d4d4d4; height:38px; background-color:#fff; line-height:38px; color:#666; transition:all .3s ease; border-radius:38px;}
.btn:hover { background-color:#f6f6f6; color:#333;}
input.btn, button.btn { height:40px; vertical-align:top; background-color:#fff; line-height:auto; cursor:pointer;} 

/* 라인버튼 */
.btn.line1 { border:1px solid #666; color:#666;}
.btn.line1:hover { background-color:#666; color:#fff;}
.btn.line2 { border:1px solid #00987e; color:#00987e;}
.btn.line2:hover { background-color:#00987e; color:#fff;}
.btn.line3 { border:1px solid #3155a4; color:#3155a4;}
.btn.line3:hover { background-color:#3155a4; color:#fff;}

/* 컬러버튼 */
.btn.bg1 { border:1px solid #000; background-color:#000; color:#fff;}
.btn.bg1:hover {border:1px solid #00987e;background:#00987e;}
.btn.bg2 { border:1px solid #00987e; background-color:#00987e; color:#fff;}
.btn.bg2:hover {border:1px solid #000;background:#000;}
.btn.bg3 { border:1px solid #3155a4; background-color:#3155a4; color:#fff;}
.btn.bg3:hover {border:1px solid #000;background:#000;}

/* 다운로드버튼 */
.btn.down1:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_down_c1.png");}
.btn.down1:hover::before { content:url("/project/design/template/bg_down_c4.png")}
.btn.down2:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_down_c2.png");}
.btn.down2:hover::before { content:url("/project/design/template/bg_down_c4.png")}
.btn.down3:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_down_c3.png");}
.btn.down3:hover::before { content:url("/project/design/template/bg_down_c4.png")}
.btn.down4:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_down_c4.png");}

/* 새창링크버튼 */
.btn.link1:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_link_c1.png");}
.btn.link1:hover::before { content:url("/project/design/template/bg_link_c4.png")}
.btn.link2:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_link_c2.png");}
.btn.link2:hover::before { content:url("/project/design/template/bg_link_c4.png")}
.btn.link3:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_link_c3.png");}
.btn.link3:hover::before { content:url("/project/design/template/bg_link_c4.png")}
.btn.link4:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_link_c4.png");}

/* 검색버튼 */
.btn.search1:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_search_c1.png");}
.btn.search1:hover::before { content:url("/project/design/template/bg_search_c4.png")}
.btn.search2:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_search_c2.png");}
.btn.search2:hover::before { content:url("/project/design/template/bg_search_c4.png")}
.btn.search3:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_search_c3.png");}
.btn.search3:hover::before { content:url("/project/design/template/bg_search_c4.png")}
.btn.search4:before { padding-right:10px; vertical-align:middle; content:url("/project/design/template/bg_search_c4.png");}

/* 작은버튼 */
.btn.size1 { padding:0 15px; height:33px; font-size:0.875em; line-height:33px;}
.btn.size2 { padding:0 15px; height:28px; font-size:0.875em; line-height:28px;}

/* 작은다운로드버튼 */
.btn.size1.down1:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_down2_c1.png");}
.btn.size1.down1:hover::before { content:url("/project/design/template/bg_down2_c4.png")}
.btn.size1.down2:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_down2_c2.png");}
.btn.size1.down2:hover::before { content:url("/project/design/template/bg_down2_c4.png")}
.btn.size1.down3:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_down2_c3.png");}
.btn.size1.down3:hover::before { content:url("/project/design/template/bg_down2_c4.png")}
.btn.size1.down4:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_down2_c4.png");}

/* 작은새창링크버튼 */
.btn.size1.link1:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_link2_c1.png");}
.btn.size1.link1:hover::before { content:url("/project/design/template/bg_link2_c4.png")}
.btn.size1.link2:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_link2_c2.png");}
.btn.size1.link2:hover::before { content:url("/project/design/template/bg_link2_c4.png")}
.btn.size1.link3:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_link2_c3.png");}
.btn.size1.link3:hover::before { content:url("/project/design/template/bg_link2_c4.png")}
.btn.size1.link4:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_link2_c4.png");}

/* 작은검색버튼 */
.btn.size1.search1:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_search2_c1.png");}
.btn.size1.search1:hover::before { content:url("/project/design/template/bg_search2_c4.png")}
.btn.size1.search2:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_search2_c2.png");}
.btn.size1.search2:hover::before { content:url("/project/design/template/bg_search2_c4.png")}
.btn.size1.search3:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_search2_c3.png");}
.btn.size1.search3:hover::before { content:url("/project/design/template/bg_search2_c4.png")}
.btn.size1.search4:before { padding-right:5px; vertical-align:middle; content:url("/project/design/template/bg_search2_c4.png");}

@media all and (max-width:500px) {
.btn { padding:0 10px; height:33px; font-size:0.95em; line-height:33px;}
input.btn, button.btn { height:35px; font-size:0.95em; cursor:pointer;} 
.btn.size1 { padding:0 7px; height:28px; line-height:28px;}
}

/************ form ************/
.form_type1 { padding:30px 0; border-top:2px solid #000; border-bottom:2px solid #000;}
.form_type1 dt { padding:17px 0 0 20px; width:15%; min-height:80px; float:left; font-weight:600; color:#333; box-sizing:border-box;}
.form_type1 dd { padding-right:20px; width:35%; min-height:80px; float:left; box-sizing:border-box;}
.form_type1 dt.dt2{ width:15%;}
.form_type1 dd.dd2 { width:85%;}
.form_type1 .pc_block { display:block;}
.form_type1 .box_check { padding:10px;}

/* select */
.selectbox { display:inline-block; border:1px solid #ccc; position:relative; z-index:1; width:100%; box-sizing:border-box;}
.selectbox:before { margin-top:-4px; position:absolute; top:50%; right:15px; width:15px; height:9px; background:url(/project/design/template/bg_select.png) no-repeat center; background-size:100%; content:"";}
.selectbox label { padding:0 10px; position:absolute; top:1px; left:5px; z-index:-1; height:56px; line-height:56px; color:#b1b1b1;}
.selectbox label.label-selected{color:black; }
.selectbox select { padding:0 10px; border:0; width:100%; height:56px; line-height:56px; cursor:pointer; opacity:0; filter:alpha(opacity=0);}
.selectbox:focus{ outline:1px dotted #000;}

/* textarea */
.textareabox { padding:10px;border:1px solid #ccc; width:100%; height:150px;box-sizing:border-box; }
.textareabox:focus{ outline:1px dotted #000;} 

/* input */
.inputbox { padding-left:10px; border:1px solid #ccc; width:100%; height:58px; line-height:56px; box-sizing:border-box; }
.inputbox:focus { outline:1px dotted #000;}

/* radio, checkbox */
.checks { display:inline-block;position:relative;}
.checks input[type="radio"] { margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); position:absolute; width:1px; height:1px;}
.checks input[type="radio"] + label { display:inline-block; padding:3px 0 0 35px; position:relative; vertical-align:top; line-height:24px; cursor:pointer;}
.checks input[type="radio"] + label:before { border:1px solid #cecece; position:absolute; top:2px; left:0; width:24px; height:24px; background:#f2f2f2; text-align:center; content:''; border-radius:100%; }
.checks input[type="radio"] + label:after { box-shadow:inset 0px 0px 10px rgba(0,0,0,0.3); position:absolute; top:9px; left:7px; width:12px; height:12px; background:#bbb; content:''; border-radius:100%;} /* 선택전 */
.checks input[type="radio"]:checked + label:after { background:#00987e;} /* 선택후 */
.checks input[type="radio"]:focus + label:before { outline:1px dotted #000;}

.checks input[type="checkbox"] { margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); position:absolute; width:1px; height:1px}
.checks input[type="checkbox"] + label { display:inline-block; position:relative; cursor:pointer;}
.checks input[type="checkbox"] + label:before { display:inline-block; margin:-4px 10px 0 0; width:24px; height:24px;  vertical-align:middle; background:#cfcfcf url(/project/design/template/bg_check.png) no-repeat center; background-size:100%; line-height:24px; color:#fff; text-align:center; content:' ';} /* 선택전 */
.checks input[type="checkbox"]:checked + label:before { background:#00987e url(/project/design/template/bg_check.png) no-repeat center; background-size:100%; color:#fff;}/* 선택후 */
.checks input[type="checkbox"]:focus + label:before { outline:1px dotted #000;}

/* placeholder */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color:#b1b1b1; opacity:1; /* Firefox */}
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#b1b1b1;}
::-ms-input-placeholder { /* Microsoft Edge */ color:#b1b1b1;}

/* 그외 */
.ul_birth > li { width:32%; float:left;}
.ul_birth > li:nth-child(2) { margin:0 2%;}

@media all and (max-width:1000px) {
.form_type1 { padding:30px 20px;}
.form_type1 dt { width:25%;}
.form_type1 dd { width:75%;}
.form_type1 dt.dt2{ width:25%;}
.form_type1 dd.dd2 { width:75%;}

.selectbox:before { margin-top:-4px; right:15px; width:14px; height:10px;}
.selectbox label { height:46px; line-height:46px;}
.selectbox select { height:46px; line-height:46px;}
.inputbox { height:48px; line-height:46px; }
}

@media all and (max-width:500px) {
.form_type1 dt { padding:0 0 10px 0; width:100%; min-height:auto;}
.form_type1 dd { padding:0; width:100%;}
.form_type1 dt.dt2{ width:100%;}
.form_type1 dd.dd2 { width:100%;}
.form_type1 .pc_block { display:inline;}
}


/************ list_type1 ************/
.list_type1 > ul > li { width:25%;float:left; box-sizing:border-box;}
.list_type1 > ul > li > div { margin:0 auto;}
/* over_img */
.over_img { position: relative; width:150px; height:150px; transition: .5s ease; border-radius:100%; }
.over_img i { position: absolute;  top: 50%;  left: 50%; font-size:40px; color:#fff; transition: .5s ease;  transform: translate(-50%, -50%)}
.over_img .over img { opacity: 0;}
.over_img .out img{opacity: 1; }

.over_img:hover .over img { opacity: 1;}
.over_img:hover .out img { opacity: 0;}

.over_img.bg1 { background:#f49ac0;}
.over_img.bg1:hover { background:#887da5;}
.over_img.bg2 { background:#fecd67; }
.over_img.bg2:hover { background:#f58476;}
.over_img.bg3 { background:#7cc576; }
.over_img.bg3:hover { background:#12b1aa;}
.over_img.bg4 { background:#7accc8; }
.over_img.bg4:hover { background:#8c80ea;}

@media all and (max-width:1000px) {
.list_type1 > ul > li { padding:10px;width:50%;}
}


/************ box_btn_line ************/
.box_btn_line > ul > li { padding:10px; width:25%; float:left; box-sizing:border-box;}
.btn-1 { color: #4f5a76 !important; }
.btn-2 { color: #959e76 !important; }
.btn-3 { color: #78b152 !important; }
.btn-4 { color: #6d5a79 !important; }
.btn-5 { color: #775784 !important; }
.btn-6 { color: #a28a5c !important; }
.btn-7 { color: #4f7b81 !important; }
.btn-8 { color: #6b4c86 !important; }
.btn_line { display: block; padding: 10px; overflow: hidden; position: relative; text-align: center; }
.btn_line:before, .btn_line:after, .btn_line .btn_inner:before, .btn_line .btn_inner:after { position: absolute; top: 0; left: 0; width: 0; height: 0; background-color: currentColor; transition: 0.3s ease-in-out; content: ''; }
/* btn_cw */
.btn_cw:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_cw .btn_inner:before { right: 0; left: auto; }
.btn_cw .btn_inner:after { top: auto; bottom: 0; }
.btn_cw:before, .btn_cw:after { width: 0; height: 2px; }
.btn_cw .btn_inner:before, .btn_cw .btn_inner:after { width: 2px; height: 0; }
.btn_cw:hover:before, .btn_cw:hover:after { width: 100%; }
.btn_cw:hover .btn_inner:before, .btn_cw:hover .btn_inner:after { height: 100%; }
/* btn_ccw */
.btn_ccw:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_ccw .btn_inner:before { right: 0; left: auto; }
.btn_ccw .btn_inner:after { top: auto; bottom: 0; }
.btn_ccw:before, .btn_ccw:after { width: 2px; height: 0; }
.btn_ccw .btn_inner:before, .btn_ccw .btn_inner:after { width: 0; height: 2px; }
.btn_ccw:hover:before, .btn_ccw:hover:after { height: 100%; }
.btn_ccw:hover .btn_inner:before, .btn_ccw:hover .btn_inner:after { width: 100%; }
/* btn_tlbr */
.btn_tlbr:before, .btn_tlbr:after { width: 0; height: 2px; }
.btn_tlbr:after, .btn_tlbr .btn_inner:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_tlbr .btn_inner:before, .btn_tlbr .btn_inner:after { width: 2px; height: 0; }
.btn_tlbr:hover:before, .btn_tlbr:hover:after { width: 100%; }
.btn_tlbr:hover .btn_inner:before, .btn_tlbr:hover .btn_inner:after { height: 100%; }
/* btn_trbl */
.btn_trbl:before, .btn_trbl:after { width: 0; height: 2px; }
.btn_trbl:before, .btn_trbl .btn_inner:before { right: 0; left: auto; }
.btn_trbl:after, .btn_trbl .btn_inner:after { top: auto; bottom: 0; }
.btn_trbl .btn_inner:before, .btn_trbl .btn_inner:after { width: 2px; height: 0; }
.btn_trbl:hover:before, .btn_trbl:hover:after { width: 100%; }
.btn_trbl:hover .btn_inner:before, .btn_trbl:hover .btn_inner:after { height: 100%; }
/* btn_cw_tlbr */
.btn_cw_tlbr:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_cw_tlbr .btn_inner:before { right: 0; left: auto; }
.btn_cw_tlbr .btn_inner:after { top: auto; bottom: 0; }
.btn_cw_tlbr:before, .btn_cw_tlbr:after, .btn_cw_tlbr .btn_inner:before, .btn_cw_tlbr .btn_inner:after { transition: 0.15s ease-in-out; }
.btn_cw_tlbr:before, .btn_cw_tlbr:after { width: 0; height: 2px; transition-delay: 0.15s; }
.btn_cw_tlbr .btn_inner:before, .btn_cw_tlbr .btn_inner:after { width: 2px; height: 0; transition-delay: 0s; }
.btn_cw_tlbr:hover:before, .btn_cw_tlbr:hover:after { width: 100%; transition-delay: 0s; }
.btn_cw_tlbr:hover .btn_inner:before, .btn_cw_tlbr:hover .btn_inner:after { height: 100%; transition-delay: 0.15s; }
/* btn_ccw_tlbr */
.btn_ccw_tlbr:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_ccw_tlbr .btn_inner:before { right: 0; left: auto; }
.btn_ccw_tlbr .btn_inner:after { top: auto; bottom: 0; }
.btn_ccw_tlbr:before, .btn_ccw_tlbr:after, .btn_ccw_tlbr .btn_inner:before, .btn_ccw_tlbr .btn_inner:after { transition: 0.15s ease-in-out; }
.btn_ccw_tlbr:before, .btn_ccw_tlbr:after { width: 2px; height: 0; transition-delay: 0.15s; }
.btn_ccw_tlbr .btn_inner:before, .btn_ccw_tlbr .btn_inner:after { width: 0; height: 2px; transition-delay: 0s; }
.btn_ccw_tlbr:hover:before, .btn_ccw_tlbr:hover:after { height: 100%; transition-delay: 0s; }
.btn_ccw_tlbr:hover .btn_inner:before, .btn_ccw_tlbr:hover .btn_inner:after { width: 100%; transition-delay: 0.15s; }
/* btn_cw_trbl */
.btn_cw_trbl:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_cw_trbl .btn_inner:before { right: 0; left: auto; }
.btn_cw_trbl .btn_inner:after { top: auto; bottom: 0; }
.btn_cw_trbl:before, .btn_cw_trbl:after, .btn_cw_trbl .btn_inner:before, .btn_cw_trbl .btn_inner:after { transition: 0.15s ease-in-out; }
.btn_cw_trbl:before, .btn_cw_trbl:after { width: 0; height: 2px; transition-delay: 0s; }
.btn_cw_trbl .btn_inner:before, .btn_cw_trbl .btn_inner:after { width: 2px; height: 0; transition-delay: 0.15s; }
.btn_cw_trbl:hover:before, .btn_cw_trbl:hover:after { width: 100%; transition-delay: 0.15s; }
.btn_cw_trbl:hover .btn_inner:before, .btn_cw_trbl:hover .btn_inner:after { height: 100%; transition-delay: 0s; }
/* btn_ccw_trbl */
.btn_ccw_trbl:after { top: auto; right: 0; bottom: 0; left: auto; }
.btn_ccw_trbl .btn_inner:before { right: 0; left: auto; }
.btn_ccw_trbl .btn_inner:after { top: auto; bottom: 0; }
.btn_ccw_trbl:before, .btn_ccw_trbl:after, .btn_ccw_trbl .btn_inner:before, .btn_ccw_trbl .btn_inner:after { transition: 0.15s ease-in-out; }
.btn_ccw_trbl:before, .btn_ccw_trbl:after { width: 2px; height: 0; transition-delay: 0s; }
.btn_ccw_trbl .btn_inner:before, .btn_ccw_trbl .btn_inner:after { width: 0; height: 2px; transition-delay: 0.15s; }
.btn_ccw_trbl:hover:before, .btn_ccw_trbl:hover:after { height: 100%; transition-delay: 0.15s; }
.btn_ccw_trbl:hover .btn_inner:before, .btn_ccw_trbl:hover .btn_inner:after { width: 100%; transition-delay: 0s; }