/**
* 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 - #2F499C
          포인트 컬러2 - #3155a4
          검색해서 모두 바꾸기 해주세요!
 /////////////////////////////////////////////////////////////////// */

/************ tab_type ************/
.tab_type1 { position: relative;}
.tab_type1::before {position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 1px; background-color: #ddd;}
.tab_type1 > ul { margin:0 auto 60px auto; display:flex; justify-content: center;}
.tab_type1.w100 > ul { max-width: 100%;}
.tab_type1 > ul > li { width: 100%; min-height:60px;}
.tab_type1 > ul > li > a { display:flex; justify-content: center; align-items: center; text-align: center; height: 100%; width: 100%; box-sizing: border-box; color: #9d9d9d; font-weight:500; line-height: 1.2em; position: relative; padding:10px;}
.tab_type1 > ul > li > a::after { position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); content: ""; display: block; width: 0; height: 4px; background-color: #ddd; transition: all .3s ease;}
.tab_type1 > ul > li > a:hover, .tab_type1 > ul > li > a.on { color: #234491;}
.tab_type1 > ul > li > a:hover::after, .tab_type1 > ul > li > a.on::after { background-color: #234491; width: 100%;}

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


@media all and (max-width:1024px) {
    .tab_type1 > ul { flex-wrap: wrap}
    .tab_type1 > ul > li { width: auto; min-height: 48px;}
    .tab_type1 > ul > li > a { width: auto; padding: 5px 10px;}
    .tab_type2 > ul { max-width: 100%; margin:0 auto 40px auto;}
    .tab_type2 > ul > li > a { height: 48px;}

}


/************ h_type ************/
.h_type1 { font-family: "Paperlogy-7Bold"; color: #000; font-size: 32px; font-weight: 800; margin-bottom: 20px; line-height:1.2em;}
.h_type2 { display: inline-flex; font-family: "Paperlogy-7Bold"; color: #021655; font-size: 24px; font-weight: 600; align-items: center; gap: 12px; flex-wrap:wrap; margin-bottom: 10px; line-height:1.2em;}
.h_type2::after { display: block; content: ""; width: 40px; height: 2px; background-color: #021655; }
.h_type3 { font-family: "Paperlogy-6SemiBold"; color: #333; font-size: 20px; line-height:1.2em;}

@media all and (max-width:1460px) {
    .h_type1 { font-size: 23px;}
    .h_type2 { font-size: 20px;}
    .h_type3 { font-size: 18px;}
}

@media all and (max-width:1260px) {
    .h_type1 { font-size: 21px;}
    .h_type2 { font-size: 18px;}
    .h_type3 { font-size: 16px;}
}
@media all and (max-width:1024px) {
    .h_type1 { font-size: 19px; margin-bottom: 10px;}
    .h_type2 { font-size: 16px;}
    .h_type3 { font-size: 14px;}
}
@media all and (max-width:600px) {
    .h_type1 { font-size: 17px;}
    .h_type2 { font-size: 15px;}
    .h_type3 { font-size: 13px;}
}


/************ ul_type ************/
.ul_type1 { display: flex; flex-direction: column; gap: 8px; font-size: 18px; margin-left: 5px;}
.ul_type1 > li { position: relative; padding-left: 15px;}
.ul_type1 > li::before { content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 100%; background-color: #021655;}
.ul_type1 > li > ul { margin-top:10px; display: flex; flex-direction: column; gap: 4px;}
.ul_type1 > li > ul > li {position: relative; padding-left: 10px;}
.ul_type1 > li > ul > li::before { content: ""; position: absolute; left: 0; top: 10px; width: 2px; height: 2px; border-radius: 100%; background-color: #666;}

.ul_type2 { display: flex; flex-direction: column; gap: 5px; font-size: 18px; margin-left: 5px;}
.ul_type2 > li { position: relative; padding-left: 15px; line-height:1.2em;}
.ul_type2 > li::before { content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 100%; background-color: #021655;}
.ul_type2 > li > ul { margin-top:5px; display: flex; flex-direction: column; font-size: 0.95em;}
.ul_type2 > li > ul > li {position: relative; padding-left: 10px;}
.ul_type2 > li > ul > li::before { content: ""; position: absolute; left: 0; top: 10px; width: 2px; height: 2px; border-radius: 100%; background-color: #666;}

@media all and (max-width:1260px) {
    .ul_type1 { font-size: 16px;}
    .ul_type1 > li { position: relative; padding-left: 10px;}
    .ul_type1 > li::before { top: 10px;}
    .ul_type1 > li > ul > li {padding-left: 6px;}
    .ul_type2 { font-size: 16px;}
    .ul_type2 > li { position: relative; padding-left: 10px;}
    .ul_type2 > li::before { top: 10px;}
    .ul_type2 > li > ul > li {padding-left: 6px;}

}
@media all and (max-width:1024px) {
    .ul_type1 { font-size: 15px;}
    .ul_type1 > li::before { top: 8px;}
    .ul_type2 { font-size: 15px;}
    .ul_type2 > li::before { top: 8px;}

}
@media all and (max-width:600px) {
    .ul_type1 { font-size: 14px;}
    .ul_type2 { font-size: 14px;}

}
/************ a_type ************/
/* 다운로드링크 */
.a_down { color:#666; display:inline-block; border-bottom:1px dashed #666; padding:0 5px;}
.a_down::after { content: '\EC54'; font-family: "remixicon"; font-size: 1.0625rem; margin-left: 5px;}
.a_down:hover { color:#2F499C; border-bottom:1px dashed #2F499C;}

/* 새창링크 */
.a_link { color:#666; display:inline-block; border-bottom:1px dashed #666; padding:0 5px;}
.a_link::after { content: '\ECAF'; font-family: "remixicon"; font-size: 1.0625rem; margin-left: 5px;}
.a_link:hover { color:#2F499C; border-bottom:1px dashed #2F499C;}


/************ table_type ************/
.table_type1 { border-top:1px solid #000; overflow-x:auto;} /* 테이블 상단 라인과 세로라인이 겹치는 부분을 없앰, 모바일에서 가로스크롤 */
.table_type1 table, .table_type1 th, .table_type1 td { border:1px solid rgba(0,0,0,0.1); border-top:none; border-collapse:collapse; font-size:18px; line-height: 1.3em; word-break: keep-all}
.table_type1 table { width:100%;}
.table_type1 th { padding: 1rem; color:#333;}
.table_type1 thead th { background:#f0f2f6;}
.table_type1 tbody th { background:#f8f9fb;}
.table_type1 td { padding: 1rem; text-align:center;}
.table_type1 thead th:first-child, .table_type1 tbody th:first-child, .table_type1 thead td:first-child, .table_type1 tbody td:first-child { border-left:1px solid transparent;}
.table_type1 thead th:last-child, .table_type1 tbody th:last-child, .table_type1 thead td:last-child, .table_type1 tbody td:last-child { border-right:1px solid transparent;}

@media all and (max-width:1024px) {
.table_type1 table, .table_type1 th, .table_type1 td { font-size:16px;}
.table_type1 th { padding: 10px;}
.table_type1 td { padding: 10px;}
}
@media all and (max-width:600px) {
.table_type1 table, .table_type1 th, .table_type1 td { font-size:14px;}
.table_type1 table { width:800px;}
.table_type1 th { padding: 6px;}
.table_type1 td { padding: 6px;}
}

/************ box_type ************/
.box_type1 {border: 1px dashed #ccc; padding: 20px 30px; color: #666; background-color: #f9f9f9; border-radius: 16px;}
.box_type2 {border:1px solid #ddd; border-radius:24px; padding:40px; text-align:center;}

@media all and (max-width:600px) {
.box_type1 {padding: 15px; border-radius: 8px;}
.box_type2 {border-radius:12px; padding:20px;}
}


/************ btn_type ************/
/* 기본버튼 */
.btn_box_l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.btn_box_c { margin-top: 50px; display: flex; justify-content: center; align-items: center; gap: 8px;}
.btn_box_r { margin: 20px 0; display: flex; justify-content: end; align-items: center; gap: 8px;}
@media all and (max-width:800px){
    .btn_box_c { flex-direction: column;}
}

.btn { display:inline-flex; align-items: center; box-sizing: border-box; min-height:40px; padding:10px 20px; line-height:1.2em; border-radius:40px; border:1px solid #d4d4d4; background-color:#fff; color:#666; font-size: inherit; transition:all .3s ease; gap:10px;}
.btn i { font-size: 1.2em;}
.btn:hover { background-color:#f6f6f6; color:#333;}
input.btn, button.btn { cursor:pointer; vertical-align: top;}
.h_type2 .btn { font-size:0.7em}

/* 라인버튼 */
.btn.line1 { border:1px solid #000; color:#000;}
.btn.line1:hover { background-color:#000; color:#fff;}
.btn.line2 { border:1px solid #2F499C; color:#2F499C;}
.btn.line2:hover { background-color:#2F499C; 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 { background-color: #fff; color: #000;}
.btn.bg2 { border:1px solid #2F499C; background-color:#2F499C; color:#fff;}
.btn.bg2:hover { background-color: #fff; color: #2F499C;}
.btn.bg3 { border:1px solid #3155a4; background-color:#3155a4; color:#fff;}
.btn.bg3:hover { background-color: #fff; color: #3155a4;}

/* 아이콘 포함 버튼 */
.btn.down::before { content: '\EC54'; font-family: "remixicon"; font-size: 1.0625rem; margin-right: 5px;}
.btn.link::before { content: '\ECAF'; font-family: "remixicon"; font-size: 1.0625rem; margin-right: 5px;}
.btn.search::before { content: '\F0D1'; font-family: "remixicon"; font-size: 1.0625rem; margin-right: 5px;}

/* 버튼 사이즈 */
.btn.size1 { font-size: 0.875rem; min-height:30px;padding:5px 15px;}
.btn.size2 { font-size: 1.125rem; min-height:50px; padding:10px 40px;}

@media all and (max-width:500px) {
.btn { min-height:30px; padding:5px 10px; font-size:0.875em;}
input.btn, button.btn { cursor:pointer;} 
.btn.size1 { min-height:24px; padding:3px 7px;}
.btn.size2 { font-size: 1.05rem; min-height:40px; padding:5px 20px;}
}

/************ form_type ************/
/* 입력폼 기본 제목 디자인 */
.form_type1 .h_type1 { display: flex; gap:30px; align-items: center; position: relative; }
.form_type1 .h_type1 span { font-weight: 800; flex-shrink: 0; padding-left: 30px;}
.form_type1 .h_type1 p { font-size: 1.0625rem; color: #a8a9aa; flex-shrink: 0; font-weight: normal; line-height: 1em;}
.form_type1 .h_type1::after { content: ""; width: 100%; height: 1px; background-color: #ddd;}
.form_type1 .h_type1::before { position: absolute; left: 0; top: 50%; transform: translate(0,-50%); content: '\F008'; font-family: "remixicon"; font-size: 1.375rem; color: #000;}

/* 입력폼 기본 레이아웃 */
.form_write { display: flex; flex-direction: column; gap: 60px; padding-top: 30px;}
.form_write .form_item {display: flex; gap: 60px;}
.form_write .write_item { display:flex; flex-direction: column; width: 100%; gap: 15px;}
.form_write .write_item .item_title { color:#000; font-size:1.0625rem; font-weight:600;}
.form_write .write_item .item_desc { display:flex; align-items:center; gap:10px; box-sizing: border-box;}

/* 기본 폼 사이즈, 색상, 모양 변경 */
.form_type1 input[type="text"],
.form_type1 select,
.form_type1 textarea { border: 1px solid #dae1eb; background-color:#f8f9fb; color: inherit; height: 50px; width: 100%; border-radius: 5px; box-sizing: border-box; padding:10px 20px; transition: all ease 0.3s;}

/* select 화살표 변경 */
.form_type1 select { -webkit-appearance:none; background-color: #fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 24px;} 

/* textarea 사이즈 조절 */
.form_type1 textarea { height: 100px;}

/* 폼 포커스 컬러 */
.form_type1 input:focus,
.form_type1 select:focus,
.form_type1 textarea:focus { outline: 0; border: 1px solid #000}

/* 기본 radio, checkbox 사이즈 모양 변경 */
.form_type1 .checks {position:relative;}
.form_type1 input[type="radio"],
.form_type1 input[type="checkbox"] { position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0);}
.form_type1 input[type="radio"] + label,
.form_type1 input[type="checkbox"] + label { position:relative; cursor: pointer; padding-left: 30px;}
.form_type1 input[type="radio"] + label::before,
.form_type1 input[type="checkbox"] + label:before { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); font-family: "remixicon"; font-size: 1.375rem; color: #d7d6d6; }
.form_type1 input[type="radio"]:checked + label:before,
.form_type1 input[type="checkbox"]:checked + label:before { color: #18AEB8;}

.form_type1 input[type="radio"] + label::before { content: '\F04F';}
.form_type1 input[type="radio"]:checked + label:before {content: '\F04F';}

.form_type1 input[type="checkbox"] + label:before { content: '\EB7F';}
.form_type1 input[type="checkbox"]:checked + label:before { content: '\EB82';}

/* 주소폼 사이즈 조절 */
.form_write .write_item .item_desc.addr input:nth-child(2) { flex: 1;}
.form_write .write_item .item_desc.addr input:nth-child(3) { flex: 5;}
.form_write .write_item .item_desc.addr input:nth-child(4) { flex: 3;}

/* 라디오,체크박스 간격 조절 */
.form_write .write_item .item_desc.radio { gap: 50px; height: 50px;}

/* 우편번호검색 버튼 */
.form_write .btn_zip { height: 50px; border: 1px solid #000; box-sizing: border-box; background-color: #000; color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; padding: 0 35px;}
.form_write .btn_zip:hover { background-color: #fff; color: #000; }

/* 개인정보취급방침 사이즈, 스크롤 모양변경 */
.form_write .box_policy { width: 100%; display: flex; flex-direction: column; gap: 20px;}
.form_write .box_policy .box_in { border: 1px solid #ddd; padding: 20px; max-height: 200px; overflow-y: auto;}
.form_write .box_policy .box_in::-webkit-scrollbar { width: 15px;}
.form_write .box_policy .box_in::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.3); border-radius: 3px; background-clip: padding-box; border: 4px solid transparent;}
.form_write .box_policy .box_in::-webkit-scrollbar-track { background-color: #f8f9fb;}

@media all and (max-width:1000px) {
    .form_write .form_item { flex-direction: column;}    
    .form_write .write_item .item_desc.addr { flex-wrap: wrap;}
    .form_write .write_item .item_desc.addr input:nth-child(2) { flex: 0; flex-basis: 120px;}
    .form_write .write_item .item_desc.addr input:nth-child(3) { flex-basis: 100%;}

    .form_write .btn_zip { padding: 0 20px;}
}

@media all and (max-width:500px) {
    .form_type1 .h_type1 { gap:10px;}
    .form_type1 .h_type1 span { padding-left: 20px;}
    .form_type1 .h_type1::after { height: 1px;}

    .form_write { gap: 40px; padding-top: 20px;}
    .form_write .form_item {gap: 40px;}
    .form_write .write_item { gap: 10px;}    
    .form_write .write_item .item_desc { gap:5px;}
    
    .form_type1 input[type="text"],
    .form_type1 select,
    .form_type1 textarea { padding:10px;}

    .form_type1 select { background-position: calc(100% - 5px) center; background-size: 20px;}
    .form_type1 textarea { height: 100px;}

    .form_type1 input[type="radio"] + label,
    .form_type1 input[type="checkbox"] + label { padding-left: 23px;}

}