@charset "UTF-8"; /* 스킨명 : fast itcider 버전 : V9.0 제작자 : itcider 쉽고 시원한 it 제작자 웹사이트 : itcider.com 사용 조건 : itcider license 사용 주의점 : ㄴ주석 수정 및 삭제 불가 ㄴfi스킨 문구 삭제 불가 ㄴ스킨은 무제한적으로 사이트에 적용 가능 ㄴ재배포 및 코드 무단 사용 절대 불가 ㄴitcider 공식 웹사이트에서만 배포 가능 위 주의사항을 어기실 경우 사용 불가합니다. */ /* fi skin dark mode start*/ /*fi skin dark mode end*/ /* ellipsis */ /* thumbnail background */ /* break point */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ .revenue_unit_wrap:first-child{height:300px} html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ --itcider-size: 100px; --itcider-color: #333; } body { margin: 0; padding-top: 60px; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } a { background-color: transparent; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } .article_view img { border-radius: 20px; } iframe, #tt-body-page iframe, figure iframe { border-radius: 20px!important; } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ outline: none; } button, input { /* 1 */ overflow: visible; } button, select { /* 1 */ text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } /* common */ article, aside, canvas, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; } body { font-family: pretendard, Avenir, SpoqaHanSans, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; } /* theme_pink */ .theme_pink .thema_apply .link_detail { background: #ff567a; } .theme_pink .thema_apply .btn_arrow:hover { background-color: #ff567a; color: #fff; } .theme_pink .thema_apply .active { background: #ff567a; } .theme_pink .thema_apply .slick-active button { background: #ff567a; } .theme_pink .thema_apply .btn_register { background: #ff567a; border-radius: 12px; color: #fff; } .theme_pink .thema_apply .btn_register { background: #ff567a; border-radius: 12px; color: #fff; } .theme_pink .thema_apply .title_sidebar { color: #ff567a; } .theme_pink .thema_apply .box_tag a:hover { border: 1px solid #ff567a; color: #ff567a; } .theme_pink .area_category .title_section span { color: #ff567a; } .theme_pink .article_view a { color: #ff567a; } .theme_pink .article_view blockquote { color: #ff567a; } .theme_pink .article_view .moreless_fold span, .theme_pink .article_view .moreless_top span { color: #ff567a; } .theme_pink .article_view .footnote a { color: #ff567a!important; } /* theme_blue */ .theme_blue .thema_apply .link_detail { background: #4167d9; } .theme_blue .thema_apply .btn_arrow:hover { background-color: #4167d9; color: #fff; } .theme_blue .thema_apply .active { background: #4167d9; } .theme_blue .thema_apply .slick-active button { background: #4167d9; } .theme_blue .thema_apply .btn_register { background: #4167d9; border-radius: 12px; color: #fff; } .theme_blue .thema_apply .btn_register { background: #4167d9; border-radius: 12px; color: #fff; } .theme_blue .thema_apply .title_sidebar { color: #4167d9; } .theme_blue .thema_apply .box_tag a:hover { border: 1px solid #4167d9; color: #4167d9; } .theme_blue .area_category .title_section span { color: #4167d9; } .theme_blue .article_view a { color: #4167d9; } .theme_blue .article_view blockquote { color: #4167d9; } .theme_blue .article_view .moreless_fold span, .theme_blue .article_view .moreless_top span { color: #4167d9; } .theme_blue .article_view .footnote a { color: #4167d9!important; } /* theme_green */ .theme_green .thema_apply .link_detail { background: #11998e; } .theme_green .thema_apply .btn_arrow:hover { background-color: #11998e; color: #fff; } .theme_green .thema_apply .active { background: #11998e; } .theme_green .thema_apply .slick-active button { background: #11998e; } .theme_green .thema_apply .btn_register { background: #11998e; border-radius: 12px; color: #fff; } .theme_green .thema_apply .btn_register { background: #11998e; border-radius: 12px; color: #fff; } .theme_green .thema_apply .title_sidebar { color: #11998e; } .theme_green .thema_apply .box_tag a:hover { border: 1px solid #11998e; color: #11998e; } .theme_green .area_category .title_section span { color: #11998e; } .theme_green .article_view a { color: #11998e; } .theme_green .article_view blockquote { color: #11998e; } .theme_green .article_view .moreless_fold span, .theme_green .article_view .moreless_top span { color: #11998e; } .theme_green .article_view .footnote a { color: #11998e!important; } /* theme_gray */ .theme_gray .thema_apply .link_detail { background: #1d2129; } .theme_gray .thema_apply .btn_arrow:hover { background-color: #1d2129; color: #fff; } .theme_gray .thema_apply .active { background: #1d2129; } .theme_gray .thema_apply .slick-active button { background: #1d2129; } .theme_gray .thema_apply .btn_register { background: #1d2129; border-radius: 12px; color: #fff; } .theme_gray .thema_apply .btn_register { background: #1d2129; border-radius: 12px; color: #fff; } .theme_gray .thema_apply .title_sidebar { color: #1d2129; } .theme_gray .thema_apply .box_tag a,.tag_zone a,.link_footer { color: #1d2129; padding: 10px!important; background: #f9f9f9; } .theme_gray .thema_apply .box_tag a:hover { border: 1px solid #1d2129; color: #1d2129; } .theme_gray .area_category .title_section span { color: #1d2129; } .theme_gray .article_view a { color: #1d2129; } .theme_gray .article_view a { color: #1d2129; } .theme_gray .article_view blockquote { color: #1d2129; } .theme_gray .article_view .moreless_fold span, .theme_gray .article_view .moreless_top span { color: #1d2129; } .theme_gray .article_view .footnote a { color: #1d2129!important; } /* media query - mobile */ @media screen and (max-width: 1023px) { .theme_pink .thema_apply .selected { color: #ff567a !important; } .theme_blue .thema_apply .selected { color: #4167d9 !important; } .theme_green .thema_apply .selected { color: #11998e !important; } .theme_gray .thema_apply .selected { color: #000 !important; } } /* html */ html, body { position: relative; height: 100%; -webkit-text-size-adjust: 100%; color: #333; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } #wrap { position: relative; overflow: hidden; } /* container */ #container { position: relative; width: 100%; } #container:after { content: ''; display: block; clear: both; } /* main */ #main { width: 100%; } /* box_header */ .box_header { position: fixed; width: 100%; height: 10%; z-index: 21; transition: top 0.5s ease-in-out; background: #fff; display: block; box-shadow: 0px 1px 20px rgba(0,0,0,0.2); color: #000; top: 0; border-radius: 0 0 1rem 1rem !important; } .box_header button { background-color: transparent; filter: brightness(0%); } .nav-up { top: -100px; } .box_header .link_logo { display: block; max-width: 300px; color: #333; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25;} .box_header .link_logo img { max-height: 48px; } .box_header .title_logo { position: absolute; top: 50%; display: flex; -ms-display: flexbox; /* IE 10 */ display: -webkit-flex; /* Safari */ flex-direction: column; justify-content: center; width: 200px; height: 48px; margin: -24px 0 0 80px; font-size: 24px; font-weight: 900; } .box_header .btn_menu, .box_header .btn_search { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border: none; background-repeat: no-repeat; background-position: center; color: #666; transition: color .2s ease-out; cursor: pointer; } .box_header .btn_menu { right: 56px; } .box_header .btn_search { right: 116px; } .box_header .btn_menu { background-image: url(./images/ico_menu_b.svg); } .box_header .btn_search { background-image: url(./images/ico_search_b.svg); } .box_header .btn_menu:hover, .box_header .btn_search:hover { color: #333; } .white .box_header { border-bottom: none; } .white .box_header .link_logo, .white .box_header .btn_menu, .white .box_header .btn_search { color: #000; transition: opacity .2s ease-out; } .white .box_header .link_logo:hover, .white .box_header .btn_menu:hover, .white .box_header .btn_search:hover { color: #000; opacity: .6; } .white .box_header .btn_menu { background-image: url(./images/ico_menu.svg); } .white .box_header .btn_search { background-image: url(./images/ico_search.svg); } .white .area_cover { margin-top: 0; } .white .type_featured { margin-top: 0; } /* media query - mobile */ @media screen and (max-width: 1023px) { .box_header { height: 70px; } .box_header .title_logo { margin: -24px 0 0 24px; font-size: 20px; padding-top: 4px;} .box_header .btn_menu, .box_header .btn_search { width: 22px; background-size: 22px auto; } .box_header .btn_menu { right: 24px; } .box_header .btn_search { right: 60px; } } @media screen and (max-width: 1023px) { .white .box_header .title_logo { margin: -25px 0 0 24px; } } /* // box_header */ /* area_sidebar */ .area_sidebar { position: relative;} .area_sidebar a { text-decoration: none; } .area_sidebar ul { list-style: none; margin: 0; padding: 10px; } .area_sidebar button { background: transparent; border: 0; border-radius: 0; overflow: visible; cursor: pointer; } .area_sidebar .inner_sidebar { display: flex; height: 100%; flex-direction: column; position: fixed; top: 0; right: 0; width: 360px; height: 100%; padding: 0 48px; background: #fff; box-sizing: border-box; overflow: auto; z-index: 31; } .area_sidebar .sidebar_contents { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .area_sidebar .dimmed_sidebar { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 21; } .area_sidebar .sidebar_header { margin: 30px -10px 30px 0; } .area_sidebar .sidebar_header:after { content: ''; display: block; clear: both; } .area_sidebar .title_logo { float: left; margin: 0; font-size: 24px; font-weight: 800; } .area_sidebar .link_logo { color: #333; } .area_sidebar .btn_close { float: right; width: 48px; margin-right: 20px; font-size: 24px; text-align: right; padding: 0 7px 2px 7px;} .area_sidebar .tt_category { margin-bottom: 40px; padding-bottom: 40px; } .area_sidebar .tt_category:after { content: ''; display: block; clear: both; } .area_sidebar .link_item { display: block; margin-top: 10px; padding: 15px 0 12px 0; font-size: 18px; font-weight: 700; color: #333; transition: all .2s ease-out; } s .area_sidebar .link_item:last-child { margin-bottom: 0; } .area_sidebar .link_item .c_cnt { color: rgba(0, 0, 0, 0.56); } .area_sidebar .box_gnb { margin-bottom: 60px; } .area_sidebar .box_gnb li:last-child { margin-bottom: 0; } .area_sidebar .link_sub_item { display: block; padding: 5px 0 5px 12px; font-size: 14px; color: rgba(0, 0, 0, 0.75); } .area_sidebar .sub_category_list { margin-left: 6px; } .area_sidebar .t_menu_home a, .area_sidebar .t_menu_tag a, .area_sidebar .t_menu_guestbook a, .area_sidebar .t_menu_medialog a, .area_sidebar .t_menu_location a, .area_sidebar .t_menu_page a, .area_sidebar .t_menu_category a, .area_sidebar .t_menu_link_1 a, .area_sidebar .t_menu_link_2 a, .area_sidebar .t_menu_link_3 a, .area_sidebar .t_menu_link_4 a, .area_sidebar .t_menu_link_5 a, .area_sidebar .t_menu_link_6 a, .area_sidebar .t_menu_link_7 a, .area_sidebar .t_menu_link_8 a, .area_sidebar .t_menu_link_9 a, .area_sidebar .t_menu_link_10 a { display: block; margin-bottom: 28px; font-size: 16px; font-weight: normal; color: #333; transition: all .2s ease-out; } .area_sidebar .tt_category .link_sub_item:hover { text-decoration: underline; } .area_sidebar .sidebar_menu:after { content: ''; display: block; clear: both; } .area_sidebar .list_sns { color: rgba(0, 0, 0, 0.87); font-size: 14px; } .area_sidebar .link_add { display: block; margin-bottom: 28px; font-size: 16px; font-weight: normal; color: #888; } .area_sidebar .link_add:hover { color: rgba(0, 0, 0, 0.87); } .area_sidebar .box_sns, .area_sidebar .add_link { margin-bottom: 18px; } .area_sidebar .btn_search { margin-top: 12px; padding: 10px 0; background-color: transparent; font-size: 14px; font-weight: 700; color: rgba(0, 0, 0, 0.87); } .area_sidebar .icon-Search { margin-left: 5px; font-size: 20px; color: rgba(0, 0, 0, 0.54); vertical-align: -2px; } .area_sidebar .box_tool { padding: 20px; background: white; margin: 20px; } .area_sidebar .link_tool { position: relative; display: inline-block; margin-left: 40px; font-size: 14px; font-weight: bold; color: #888; } .area_sidebar .link_tool:first-child { margin-left: 0; } .area_sidebar .link_tool:first-child::before { content: ''; } .area_sidebar .link_tool:hover { color: #666; } .area_sidebar .link_tool:before { content: '|'; position: absolute; top: 3px; bottom: 0; left: -48px; right: 0; width: 10px; margin-left: 20px; font-size: 11px; font-weight: lighter; color: #d3d4d7; } .area_sidebar .link_tit { display: none; } .area_sidebar ul > li > a:hover { color: rgba(0, 0, 0, 0.56); } @media screen and (max-width: 1023px) { .area_sidebar .inner_sidebar { width: 100%; left: 0; padding: 0 24px; } .area_sidebar .area_sidebar .btn_close { margin-right: -16px; } .area_sidebar .area_sidebar .title_logo { margin-bottom: 30px; } .area_sidebar .title_logo{ font-size: 20px;} .area_sidebar .sidebar_header { margin: 24px -10px 24px 0; padding-top:1px;} .area_sidebar .btn_close { margin-top: -2px; margin-right: 0px; } .area_sidebar .link_item{ font-size:16px; } .area_sidebar .link_sub_item{ font-size:13px; } .area_sidebar .tt_category { padding-bottom: 50px;} } /* media query - only mobile */ @media screen and (max-width: 768px) { .area_sidebar .inner_sidebar { width: 100%; left: 0; padding: 0 24px; } .area_sidebar .area_sidebar .btn_close { margin-right: -16px; } .area_sidebar .area_sidebar .title_logo { margin-bottom: 30px; } .area_sidebar .title_logo{ font-size: 20px;} .area_sidebar .sidebar_header { margin: 24px -10px 24px 0; padding-top:1px;} .area_sidebar .btn_close { margin-top: -2px; margin-right: 0px; } .area_sidebar .link_item{ font-size:16px; } .area_sidebar .link_sub_item{ font-size:13px; } .area_sidebar .tt_category { padding-bottom: 50px;} } /* media query - only mobile */ @media screen and (max-width: 768px) { .area_sidebar .inner_sidebar { width: 100%; left: 0; padding: 0 24px; } .area_sidebar .area_sidebar .btn_close { margin-right: -16px; } .area_sidebar .area_sidebar .title_logo { margin-bottom: 30px; } .area_sidebar .title_logo{ font-size: 20px;} .area_sidebar .sidebar_header { margin: 24px -10px 24px 0; padding-top:1px;} .area_sidebar .btn_close { margin-top: -2px;} .area_sidebar .link_item{ font-size:16px; } .area_sidebar .link_sub_item{ font-size:13px; } .area_sidebar .tt_category { padding-bottom: 50px;} } /* // area_sidebar */ /* media query - sidebar height */ @media screen and (max-height: 851px) { .area_sidebar .box_tool { position: relative; padding: 30px 0; bottom: auto; } } /* area_popup */ .area_popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 31; overflow: auto; } .area_popup .search_header { padding: 22px 40px 0 80px } .area_popup .search_header:after { content: ''; display: block; clear: both; } .area_popup .title_logo { float: left; margin: 0; font-size: 24px; font-weight: 900; } .area_popup .link_logo { color: #333; text-decoration: none; } .area_popup .area_search .btn_close { float: right; width: 48px; height: 48px; margin-right: 75px; background: transparent; border: none; font-size: 24px; cursor: pointer; } .area_popup .search_content { max-width: 1180px; margin: 60px auto; padding: 0 40px; font-size: 0; } .area_popup .search_content:after { content: ''; display: block; clear: both; } .area_popup .box_form { position: relative; margin-bottom: 60px; padding-top: 10px; padding-bottom: 10px; border-radius: 12px; background:#f9f9f9; } .area_popup .box_form .icon-Search { display: inline-block; margin-left: 10px; margin-right: 10px; font-size: 36px; vertical-align: -10px; } .area_popup .box_form .inp_search { width: 80%; margin-top: 5px; margin-bottom: 5px; border: none; font-size: 24px; font-weight: 900; color: #333; line-height: 1; } .area_popup .box_form .btn_search_del { position: absolute; top: 0; right: 0; margin-top: 10px; margin-right: 10px; width: 36px; height: 36px; padding: 6px; border: none; background-color: transparent; cursor: pointer; fill-opacity: 1; } .area_popup .title_sidebar { margin: 51px 0 29px 0; font-size: 18px; } .area_popup .tag_zone { display: inline-block; width: 50%; padding-right: 50px; min-height: 150px; box-sizing: border-box; vertical-align: top; } .tag_zone a { display: inline-block; margin-right: 10px; margin-bottom: 10px; padding: 5px 10px; border: solid 1px rgba(0, 0, 0, 0.25); font-size: 16px; color: #333; text-decoration: none; } .tag_zone a:hover { border: solid 1px #4167d9; color: #4167d9; } .list_sidebar { margin: 0; padding: 0; list-style: none; } .list_sidebar .item_sidebar { margin-bottom: 20px; } aside .list_sidebar .item_sidebar { margin-bottom: 10px; } .list_sidebar .item_sidebar a { display: block; font-size: 16px; color: #333; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag_board { display: inline-block; box-sizing: border-box; vertical-align: top; } aside .tag_board { width: 100%; } .area_popup .tag_board { width: 50%; } .area_popup div:nth-child(3) { padding-left: 50px; } .area_popup div:nth-child(4) { padding-right: 50px; } .area_popup div:nth-child(5) { padding-left: 50px; } .area_popup .box_gnb, .area_popup .box_sns, .area_popup .add_link { display: none; } /* media query - mobile */ @media screen and (max-width: 1023px) { .area_popup .area_search { padding-left: 24px; padding-right: 24px; } .area_popup .search_header { margin: 24px -10px 24px 0; padding: 1px 0 0; } .area_popup .box_form .icon-Search { display: none; } .area_popup .box_form .inp_search { margin-top: 20px; font-size: 18px; } .area_popup .box_form .btn_search_del { top: 5px; right: 20px; } .area_popup .search_content { margin-top: 34px; padding: 0; } .area_popup .box_form { padding: 0 20px 10px 20px; } .area_popup .title_sidebar { margin-top: 32px; font-size: 12px; } .area_popup .tag_zone a { border: none; padding: 5px 10px 5px 10px; font-size: 16px; } .area_popup .tag_zone a:hover { border: none; } .area_popup .tag_zone, .area_popup .tag_board { width: 100%; } .area_popup .item_sidebar { margin-bottom: 10px; } .area_popup .item_sidebar a { font-size: 16px; } .area_popup div:nth-child(3), .area_popup div:nth-child(4), .area_popup div:nth-child(5) { padding: 0; } .area_popup .area_search .btn_close { margin: -2px 0 0; text-align: right; margin-right: 40px; padding: 0 7px 2px 7px; height: 30px; } .area_popup .title_logo { font-weight: 900; font-size: 20px; }} /* // area_popup */ /* footer */ #footer { clear: both; margin-top: 120px; padding: 50px 0 50px 0; border-top: 1px solid #ebebeb; font-size: 14px; font-weight: normal; color: #999; } #footer .inner_footer { max-width: 1180px; margin: 0 auto; padding: 0 20px 20px; text-align: center;} #footer .link_footer { position: relative; font-weight: 700; color: #777; line-height: 1.27; text-decoration: none; padding: 5px 10px 5px 10px; border-radius: 8px; display: inline-block; margin-right: 10px; margin-bottom: 10px; } #footer p { margin-top: 20px; color: rgb(0, 0, 0); font-size: 18px; font-style: normal; text-align: center; } #footer .inner_footer .link_footer:first-child { margin-left: 0;} /* // footer */ /* media query - mobile */ @media screen and (max-width: 1023px) { #footer { margin-top: 60px; } #footer .info_footer:after { content: ''; display: block; clear: both; } } /* area_paging */ .area_paging { text-align: center; } .area_paging a { text-decoration: none; } .area_paging .link_page { display: inline-block; margin-top: 2px; font-size: 24px; color: rgba(0, 0, 0, 0.25); } .area_paging .link_page:hover { color: rgba(0, 0, 0, 0.54); } .area_paging .paging_num { display: inline-block; vertical-align: top; } .area_paging .link_num span { display: inline-block; min-width: 28px; height: 28px; margin: 0 5px; font-size: 13px; font-weight: 600; line-height: 31px; color: #000; } .area_paging .link_num:hover span { color: rgba(0, 0, 0, 0.87); } .area_paging .selected { display: block; border-radius: 999em; background: #000; color: #fff !important; font-size: 13px; line-height: 32px; } .area_paging .selected:hover { text-decoration: none; } .area_paging .paging_slash { display: none; } /* media query - mobile */ @media screen and (max-width: 1023px) { .area_paging .link_page { color: rgba(0, 0, 0, 0.75); } .area_paging .link_page.no-more-prev, .area_paging .link_page.no-more-next { color: rgba(0, 0, 0, 0.15); } .area_paging .link_page span { font-size: 24px; font-weight: 600; } .area_paging .link_num { font-size: 14px; font-weight: 900; } .area_paging .link_num span { position: relative; } .area_paging .selected { position: relative; width: auto; font-size: 14px; } .area_paging .link_num:last-child span:before { content: ''; position: absolute; top: 0; left: -10px; width: 10px; height: 29px; background: url(./images/ico_slash.png) no-repeat left center; } .area_paging .link_num:last-child span.selected:before { background: none; } .area_paging .link_num:last-child .selected { background: none; } .area_paging .link_num span:not(.selected) { display: none; } .area_paging .link_num:last-child span { display: inline-block; } .area_paging .link_ellipsis { display: none; } .area_paging .selected { color: #333; background: transparent; } } /* // area_paging */ /* area_view - 상세 페이지 */ .area_view { position: relative; } .area_view .area_article { padding-bottom: 60px; } .area_view .article_header { position: relative; width: 100vw; left: 50%; margin-left: -50vw;} .area_view .article_header:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .area_view .article_header .inner_header { width: 100%; background-size: cover; background-position: 50% 50%; text-align: center; } .area_view .article_header .info_text { max-width: 700px; margin: 0 auto; left: 0; right: 0; color: #fff; z-index: 10; text-align: center; } .type_article_header_common .info_text { /* position: absolute; bottom: 32px; */ position: relative; display: flex; height: 100%; -ms-display: flexbox; display: -webkit-flex; flex-direction: column; justify-content: center; z-index: 20;} .type_article_header_cover .info_text { position: relative; display: flex; height: 100%; -ms-display: flexbox; /* IE 10 */ display: -webkit-flex; /* Safari */ flex-direction: column; justify-content: center; z-index: 20; } .article_content { max-width: 700px; margin: 0 auto; } /* area_tag - 상세페이지 태그 */ .area_tag { padding: 30px!important; border-radius : 20px; /*! background:#f1f1f1; */ margin-bottom: 30px; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); } .area_tag:after { content: ''; display: block; clear: both; } .area_tag .title_tag { float: left; margin: 0px 10px 0px 10px; padding: 0 0 0 0; font-size: 16px; font-weight: 900; color: #333; text-align: center; padding-top: 6px; } .tag_content{ padding: 0 0 0 10px; } .area_tag .tag_content a { display: inline-block; color: #333; margin-right: 5px; margin-bottom: 5px; border-radius: 8px; text-decoration: none!important; background: #fff; font-size: 16px; height: 100%; line-height: 30px; padding: 7px 14px; } .area_tag .tag_content a:first-child { margin-left: 0} /* media query - mobile */ @media screen and (max-width: 1023px) { .area_tag { padding: 20px 0; } .area_tag .title_tag { font-size: 16px; line-height: normal; } } /* area_related - 상세페이지 관련글 */ .area_related { overflow: hidden; } .area_related a { text-decoration: none; } .area_related button { border: 0; border-radius: 0; background-color: transparent; cursor: pointer; overflow: visible; } .area_related .title_related { margin: 40px 0 20px 0; font-size: 16px; font-weight: 900; } .area_related .list_related { list-style: none; margin: 0 -8px; padding: 0; border: none; box-sizing: border-box; padding: 1rem; } .area_related .list_related:after { content: ''; display: block; clear: both; } .area_related .item_related { float: left; width: 25%; margin-bottom: 40px; /*! box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); */ /*! padding: 10px; */ /*! border-radius: 1rem; */ } .area_related .link_related { display: block; margin: 0 8px; padding: 10px; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); padding: 15px; border-radius: 1.5rem; } .area_related .thumnail { display: block; width: 100%; padding-top: 100%; border-radius: 5%; background-size: cover; background-position: 50% 50%; } .area_related .link_related strong { display: block; max-height: 45px; margin: 12px 0 0; line-height: 1.47; font-size: 16px; font-weight: 500; color: #333; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .area_related .info { display: inline-block; font-size: 13px; color: rgba(0, 0, 0, 0.38); } /* media query - mobile */ @media screen and (max-width: 1023px) { .area_related .title_related { margin: 30px 0 0 0; font-size: 16px; line-height: normal; } .area_related .item_related { width: 50%; /*! padding: 10px 10px; */ margin-bottom: 0;} .area_related li:first-child { border: none; padding-bottom: 16px; } .area_related .link_related strong { margin: 12px 0 2px 0; } .area_related .item_related:last-child{ margin-bottom:30px; } } /* // area_related */ /* area_reply - 상세페이지 댓글*/ .area_reply { width: 100%; overflow: hidden; } .area_reply ul { list-style: none; margin: 0; padding: 0; } .area_reply a { text-decoration: none; } .area_reply .box_reply_info { margin: 40px 0 20px 0; } .area_reply .reply_events { margin: 0; font-size: 16px; font-weight: 900; color: #333; } .area_reply .btn_more { margin-top: 5px; padding: 3px 0 0 15px; border: 0; background-color: transparent; background-size: 10px 10px; font-size: 16px; font-weight: 600; cursor: pointer; } .area_reply .item_reply { padding: 30px 0; border-bottom: 1px solid #eee; } .area_reply li:first-child { padding-top: 0; } .area_reply li:last-child { border: none; } .area_reply .thumbnail_reply { float: left; width: 45px; height: 45px; margin-right: 16px; background: none; } .area_reply .thumbnail_reply img { width: 100%; height: 100%; border-radius: 50%;} .area_reply .box_reply_content { overflow: hidden; } .area_reply .item_reply .user a { display: inline-block; margin-bottom: 8px; font-size: 16px; font-weight: bold; color: #333; } .area_reply .item_reply .date { display: inline-block; padding-top: 10px; padding-left: 3px; } .area_reply .item_reply .date a { font-weight: 300; font-size: 14px; padding-left: 4px;} .area_reply .box_reply_content .txt { margin: 10px 0 0 0; font-size: 16px; } .area_reply .item_reply .modify { margin-top: 8px; font-size: 15px; } .area_reply .modify a { color: #9b9b9b; } .area_reply .modify .slash { color: #e1e1e1; } .area_reply .list_reply_comment { margin-top: 30px !important; } .area_reply .ico_commnent { float: left; width: 43px; margin-right: 10px; color: rgba(51, 51, 51, 0.6); text-align: right; } .area_reply .item_comment { padding: 10px; } .area_reply .reply_write:after { content: ''; display: block; clear: both; } .area_reply .form_content { padding-bottom: 10px; } .area_reply .form_content textarea { width: 100%; height: 102px; border-radius: 12px; padding: 12px 14px; border: 1px solid #e1e1e1; font-size: 14px; vertical-align: top; } .area_reply .form_guest { margin: 0 -4px; } .area_reply .form_guest:after { content: ''; display: block; clear: both; } .area_reply .box_inp { float: left; width: 100%; margin-bottom: 8px; } .area_reply .box_inp:nth-child(-n+2) { width: 50%; } .area_reply .inner_inp { margin: 0 4px; padding: 9px 14px; border-radius: 12px; border: 1px solid #e1e1e1; box-sizing: border-box; } .area_reply .inner_inp input { width: 90%; border-radius: 12px; border: none; font-size: 14px; line-height: 1.25;} .area_reply .form_reg { text-align: right; } .area_reply .form_reg label { display: inline-block; margin-right: 20px; padding-top: 7px; font-size: 14px; color: #9b9b9b; } .area_reply .form_reg label input { vertical-align: -1px; } .area_reply .btn_register { width: 115px; height: 42px; border: none; color: #fff; cursor: pointer; } /* media query - mobile */ @media screen and (max-width: 1023px) { .area_reply .box_reply_info { margin: 30px 0 10px 0; } .list_reply_comment .ico_commnent { width: 10px; } .list_reply_comment li:first-child { padding-top: 30px; } .item_comment.reply { padding: 15px; } .list_reply_comment .item_comment { background: #fafafa; } .list_reply .item_reply .user a { margin-bottom: 5px; } .list_reply .item_reply .date { display: block; padding: 0; font-size: 14px; } .list_reply .item_reply .dot { display: none; } } /* // area_reply */ /* area_common - 티스토리 사이드바 공통 영역 */ .area_common { max-width: 1180px; min-height: 200px; margin: 40px auto 0 auto; padding: 0 20px; } .area_common .title_common { padding-bottom: 30px; font-size: 24px; font-weight: 900; color: #333; text-align: center; } /* 미디어 로그 티스토리 스타일 수정 */ #mediaLogNest { max-width: 1180px; height: auto !important; margin: 200px auto 0 auto; padding: 0 20px; } /* media query - only mobile */ @media screen and (max-width: 768px) { .area_common { margin-top: 36px; padding-top: 60px; } } .item-thumbnail { background: url(./images/ico_no.png); } .no-img { background: url(./images/ico_no.png); } .btn-for-guest { display: none; } .btn-for-user { display: none; } /* area_cover */ .area_cover { margin-top: 268px; } .area_cover a { text-decoration: none; } .area_cover button { border: 0; border-radius: 0; background-color: transparent; cursor: pointer; overflow: visible; } /* media query - mobile */ @media screen and (max-width: 1023px) { .area_cover { margin-top: 130px; } } /* // area_cover */ /* title_section */ .title_section { position: relative; width: 100%; margin: 0 0 30px 0; font-size: 20px; font-weight: 900; color: #333; } /* type_featured - 슬라이드 커버 */ .type_featured { position: relative; margin-top: 120px; } .type_featured:after { content: ''; display: block; clear: both; } .type_featured .slide_zone { position: relative; width: 100%; height: calc(100vh - var(--vh-offset, 0px)); } .type_featured .inner_main_slide { position: absolute; left: 0; right: 0; max-width: 1180px; margin: 0 auto; padding: 0 80px; } .type_featured .box_arrow { position: absolute; top: 50%; left: 0; right: 0; width: 100%; margin-top: -18px; padding: 0 65px 0 80px; z-index: 10; box-sizing: border-box; } .type_featured .btn_arrow { width: 64px; height: 64px; padding-top: 4px; border-radius: 64px; background-color: rgba(0, 0, 0, 0.7); background-repeat: no-repeat; background-position: center; color: white; transition: .2s ease-out; } .type_featured .btn_arrow:hover { color: #fff; } .type_featured .btn_prev { float: left; background-image: url(./images/arr_left.png); } .type_featured .btn_next { float: right; background-image: url(./images/arr_right.png); } .type_featured .slide_item { z-index: 1; overflow: hidden; } .type_featured .link_slide { position: relative; display: block; width: 100%; height: 100vh; height: calc(100vh - var(--vh-offset, 0px));; background-size: cover; background-position: 50% 50%; overflow: hidden; z-index: 1; } .type_featured .link_slide:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.54); transition: background-color .3s ease-in-out; } .type_featured .text_slide { position: relative; display: flex; -ms-display: flexbox; /* IE 10 */ display: -webkit-flex; /* Safari */ flex-direction: column; justify-content: center; max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 76px; font-size: 44px; color: #fff; z-index: 10; } .type_featured .text_slide strong { display: block; max-height: 130px; max-width: 1024px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .type_featured .text { width: 60%; max-height: 85px; margin: 20px 0 40px 0; font-size: 16px; line-height: 28px; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .type_featured .link_detail { display: inline-block; width: 194px; height: 50px; line-height: 53px; box-sizing: border-box; font-size: 16px; font-weight: 700; color: #fff; text-align: center; } .type_featured .slide_page { position: absolute; left: 37px; bottom: 60px; font-size: 0; text-align: center; z-index: 10; } .type_featured .slide_page li { display: inline-block; } .type_featured .ico_circle { width: 10px; height: 10px; margin: 0 3px; padding: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.54); cursor: pointer; outline: none; } /* // type_featured */ /* media query - tablet */ @media screen and (max-width: 1406px) { .type_featured { margin-top: 60px; } .type_featured .text_slide { padding: 0 80px; font-size: 40px; } .type_featured .box_arrow { display: none; } } /* media query - mobile */ @media screen and (max-width: 1023px) { .type_featured .text_slide strong { max-height: 140px; font-size: 30px; -webkit-line-clamp: 3; } .type_featured .text_slide { position: absolute; bottom: 100px; height: auto; padding: 0 24px; font-size: 32px; } .type_featured .text_slide .text { width: 100%; margin: 20px 0 30px 0; line-height: 28px;} .type_featured .slide_page { left: 24px; bottom: 40px; padding: 0; } } /* media query - only mobile */ @media screen and (max-width: 768px) { .type_featured .link_detail { padding-top: 2px; font-size: 13px; line-height: 40px; height: 40px; width: 120px; } .type_featured .ico_circle{ width: 8px; height: 8px; } } /* type_post - 갤러리 커버 */ .type_post { max-width: 1180px; margin: 120px auto -20px auto; overflow: hidden; } .type_post:after { content: ''; display: block; clear: both; } .type_post .list_post, .category_type_post .list_category { margin: 0 -10px; padding: 0; list-style: none; } .list_post .item_post, .category_type_post .item_category { float: left; width: 25%; margin-bottom: 20px; } .list_post .link_post, .category_type_post .link_category { position: relative; display: block; margin: 0 10px; padding-top: 143%; background-size: cover; background-position: 50% 50%; } .list_post .item_post:hover .link_post:before, .category_type_post .item_category:hover .link_category:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.65); } .list_post .info .date, .category_type_post .date { display: none; margin-top: 40px; font-size: 16px; font-weight: 400; line-height: 1.31; } .list_post .link_post:hover .info, .category_type_post .link_category:hover .info { display: flex; } .list_post .link_post .info, .category_type_post .link_category .info { position: absolute; display: none; flex-direction: column; align-items: center; justify-content: center; top: 0; width: 100%; height: 100%; color: #fff; text-align: center; } .list_post .link_post .info .name, .category_type_post .link_category .info .name { display: block; width: calc(100% - 80px); max-height: 65px; margin: 0 auto; font-size: 20px; font-weight: 500; line-height: 1.33; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* media query - mobile */ @media screen and (max-width: 1023px) { .type_post { margin: 60px auto 0 auto; } .title_section { margin: 0 0 20px 0; font-size: 16px; text-align: left; } .type_post .title_section { text-align: center;} .list_post, .category_type_post { margin: 0 -1px; } .list_post .item_post, .category_type_post .item_category { margin-bottom: 1px; } .list_post .link_post, .category_type_post .link_category { margin: 0 0.5px; } .item_post .link_post:before, .category_type_post .item_category .link_category:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.65); } .list_post .link_post .info, .category_type_post .link_category .info { display: flex; } .list_post .link_post .info .name, .category_type_post .link_category .info .name { width: calc(100% - 32px); font-size: 16px; } } /* media query - mobile specific */ @media screen and (max-width: 375px) { .list_post .link_post .info .name, .category_type_post .link_category .info .name { width: calc(100% - 32px); font-size: 13px; } } /* // type_post */ /* type_card - 섬네일 커버*/ .type_card { max-width: 1180px; margin: 120px auto -60px auto; overflow: hidden; } .type_card:after { content: ''; display: block; clear: both; } .list_type_card { margin: 0 -10px; padding: 0; list-style: none; font-size: 0; } .list_type_card .item_card { display: inline-block; width: 25%; margin-bottom: 58px; vertical-align: top; } .list_type_card .link_card { display: block; margin: 0 10px; color: #333; line-height: 1.33; transition: all .2s ease-out; } .list_type_card .link_card:hover { opacity: 0.6; } .list_type_card .link_card strong { display: block; margin: 18px 8px 6px 0; font-size: 16px; font-weight: 700; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .list_type_card .link_card .thumnail { display: block; width: 100%; padding-top: 100%; border-radius: 5%; background-size: cover; background-position: 50% 50%; } .list_type_card .link_card .text { max-height: 78px; margin: 0; font-size: 14px; color: #777; line-height: 1.71; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* media query - mobile */ @media screen and (max-width: 1023px) { .type_card { margin: 60px auto -30px auto; padding: 0 24px; } .type_card .list_type_card { margin: 0 -8px; } .type_card .item_card { width: 50%; margin-bottom: 30px; } .type_card .link_card strong { margin: 16px 8px 4px 0; -webkit-line-clamp: 1; } .type_card .link_card { margin: 0 8px; } .type_card .link_card .text { -webkit-line-clamp: 2; line-height: 1.5;} .list_type_card .link_card .thumnail{ padding-top: 65%;} } /* // type_card */ /* type_banner - 와이드패널 커버 */ .type_banner { max-width: 1180px; margin: 120px auto 0 auto; } .list_type_banner { margin: 0; padding: 0; list-style: none; } .list_type_banner .link_banner { position: relative; display: block; height: 280px; font-size: 24px; color: #333; background-size: cover; background-position: 50% 50%; transition: all .2s ease-out; } .list_type_banner li:nth-child(even) .box_content { float: right; text-align: right; } .list_type_banner li:nth-child(even) .btn_go { right: 50px; left: auto; } .list_type_banner .box_content { width: 70%; padding: 47px 45px 50px 48px; } .list_type_banner .link_banner:hover { opacity: 0.6; } .list_type_banner .link_banner strong { display: block; max-height: 58px; font-size: 50px; font-weight: 900; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .list_type_banner .link_banner .text { max-height: 80px; margin: 12px 4px 0 2px; font-size: 16px; color: #fff; line-height: 1.62; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .list_type_banner .link_banner .btn_go { position: absolute; left: 50px; bottom: 48px; width: 42px; height: 42px; background: #000; border-radius: 42px; font-size: 17px; font-weight: 400; color: #fff; } /* media query - mobile */ @media screen and (max-width: 1023px) { .type_banner { margin-top: 60px; padding: 0 24px;} .list_type_banner .link_banner { height: 100px; } .list_type_banner .box_content { width: 100%; padding: 25px; } .list_type_banner .link_banner strong { display: block; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 26px; overflow: hidden; } .list_type_banner .link_banner .btn_go { display: none; } .list_type_banner .link_banner .text { display: inline-block; width: 100%; margin: 2px 0 0 0; line-height: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } /* // type_banner */ /* type_notice - 리스트 커버 */ .type_notice { max-width: 1180px; margin: 120px auto 0 auto; } .type_notice:after { content: ''; display: block; clear: both; } .type_notice .thumnail, .category_type_notice .thumnail { float: left; display: block; width: 280px; padding-top: 100%; margin-right: 24px; background-size: cover; background-position: 50% 50%; } .type_notice .info, .category_type_notice .info { padding-top: 8px; overflow: hidden; } .list_type_notice, .category_type_notice .list_category { margin: 0; padding: 0; list-style: none; border-top: solid 2px #333; } .list_type_notice:after, .category_type_notice .list_category:after { content: ''; display: block; clear: both; } .list_type_notice .item_notice, .category_type_notice .item_category { padding: 30px 0; border-bottom: 1px solid #ebebeb; } .list_type_notice .item_notice:after, .category_type_notice .item_category:after { content: ''; display: block; clear: both; } .list_type_notice .link_notice, .category_type_notice .link_category { display: block; color: #333; transition: all .2s ease-out; } .list_type_notice .link_notice:hover, .category_type_notice .link_category:hover { color: rgba(0, 0, 0, 0.6); } .list_type_notice .link_notice strong, .category_type_notice .link_category strong { display: block; font-size: 22px; line-height: 32px; font-weight: 700; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .list_type_notice .link_notice .text, .category_type_notice .link_category .text { font-size: 14px; line-height: 24px; margin: 6px 0 12px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #777; width: 95%; } .list_type_notice .link_notice .date, .category_type_notice .link_category .date { display: block; font-size: 13px; line-height: 20px; opacity: .5; } .category_type_notice .item_category:after { content: ''; display: block; clear: both; } /* media query - mobile */ @media screen and (max-width: 1023px) { .type_notice, .category_type_notice { margin-top: 60px; padding: 0 24px;} .type_notice .thumnail, .category_type_notice .thumnail { width: 160px; padding-top: 100%; margin-right: 16px; } .list_type_notice .item_notice, .category_type_notice .item_category { padding: 20px 0; } } /* // type_notice */ /* media query - only mobile */ @media screen and (max-width: 768px) { .list_type_notice .link_notice strong, .category_type_notice .link_category strong { font-size: 16px; line-height: normal; } .list_type_notice .link_notice .text, .category_type_notice .link_category .text { margin: 4px 0 8px 0; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; } .type_notice .thumnail, .category_type_notice .thumnail { width: 100px; padding-top: 100%; } .type_notice .info, .category_type_notice .info { padding-top: 20px; } } /* area_category */ .area_category { max-width: 1180px; margin: -30px auto 30px auto; padding: 120px 24px 0 24px; } .area_category a { text-decoration: none; } .area_category ul { list-style: none; margin: 0; padding: 0; border: none; box-sizing: border-box; } .area_category .title_section span { padding-left: 8px; font-size: 16px; /* vertical-align: 2px; */ } .category_type_notice, .category_type_post { margin-bottom: 60px; } /* category_type_post - list_category */ .category_type_post .list_category:after { content: ''; display: block; clear: both; } .category_type_notice .link_category { background: none !important; } .category_type_post .link_category .text { display: none; } /* // category_type_post - list_category */ /* media query - mobile */ @media screen and (max-width: 1023px) { .area_category { padding-top: 60px; } .area_category .title_section { text-align: left; } } /* type_related */ .category_type_related .list_category { list-style: none; margin: 0 -8px; padding: 0; border: none; box-sizing: border-box; font-size: 0; } .category_type_related .thumnail { display: block; width: 100%; padding-top: 100%; border-radius: 5%; background-size: cover; background-position: 50% 50%; } .category_type_related .item_category { display: inline-block; width: 33.3%; margin-bottom: 16px; vertical-align: top; } .category_type_related .link_category { display: block; padding: 0 8px; background: none !important; color: #333; } .category_type_related .box_content { width: 100%; } .category_type_related .link_category strong { display: block; margin: 18px 0 6px 0; line-height: 28px; font-size: 18px; color: #333; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .category_type_related .link_related .info { display: inline-block; margin-top: 20px; font-size: 14px; color: rgba(0, 0, 0, 0.38); line-height: 1.71; } .category_type_related .link_category .text { max-height: 70px; margin: 0 0 13px 0; font-size: 14px; line-height: 20px; overflow: hidden; opacity: 0.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width: 95%;} .category_type_related .link_category .date { display: block; font-size: 13px; line-height: 20px; color: rgba(0, 0, 0, 0.38); } @media screen and (max-width: 1023px) { .category_type_related .item_category { width: 50%; }} .category_type_related .link_category strong { display: block; margin: 12px 0 4px 0; font-size: 17px; } .category_type_related .link_category .text { margin: 0 0 10px 0; } /* // area_category */ /* // category_type_post - list_category */ .area_view { max-width: 1180px; margin: 0 auto; padding: 0 24px; word-break: break-word;} /* area_index_category */ .area_index_category a { text-decoration: none; } .area_index_category .list_category { list-style: none; border: none; box-sizing: border-box; } /* // area_index_category */ .area_view .article_header .title_post { display: block; font-size: 40px; line-height: 1.5em; } .area_view .article_header .info { margin: 20px 0 0 0; font-size: 14px;} .area_view .txt_post { height: 160px; margin: 40px 0 30px 0; -webkit-line-clamp: 6; } /* area_view - area_post_btn */ .area_view .article_modify { padding-bottom: 13px; border-bottom: 1px solid #eee; } .area_view .article_modify:after { content: ''; display: block; clear: both; } .area_view .list_share { margin: 60px 0 48px 0; font-size: 0; text-align: center; } .area_view .list_share:after { content: ''; display: block; clear: both; } .area_view .list_share .item_share { display: inline-block; margin-right: 12px; list-style: none; } .area_view .list_share .link_share { display: flex; -ms-display: flexbox; /* IE 10 */ display: -webkit-flex; /* Safari */ flex-direction: column; justify-content: center; align-items: center; width: 48px; height: 48px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 48px; font-size: 28px; color: rgba(0, 0, 0, 0.54); text-decoration: none; text-align: center; } .area_view .article_modify .box_util { float: left; } .area_view .article_modify button { background: none; padding: 5px; border: 0; border-radius: 0; overflow: visible; } .area_view .article_modify i { display: inline-block; width: 14px; height: 14px; background: url(http://t1.daumcdn.net/tistory_admin/static/admin/editor/ico_postbtn.png) no-repeat; overflow: hidden; vertical-align: top; } .area_view .article_modify .btn_like { padding-right: 10px; background: url(images/ico_dot.gif) no-repeat center right; line-height: 14px; } .area_view .article_modify .btn_share { margin-top: 15px; } .area_view .article_modify .btn_like .icon { background-position: 0 0; } .area_view .article_modify .btn_like .icon_like { background-position: -20px 0; } .area_view .article_modify .btn_share .icon { margin-top: 1px; background-position: -40px 0; } .area_view .article_modify .box_ccl { float: right; padding-top: 20px; } /* area_view - box_ccl */ .area_view .box_ccl .link_ccl { display: inline-block; } .another_category { display: none; } /* media query - mobile */ @media screen and (max-width: 1023px) { .area_view { padding: 0 24px; } .area_view .article_header { text-align: left; } .area_view .article_header .inner_header { padding: 0 20px; box-sizing: border-box; } .type_article_header_common .inner_header { height: 520px; } .area_view .article_header .info_text { width: 100%; padding: 0 20px; box-sizing: border-box; } .area_view .article_header .title_post { width: 100%; font-size: 28px; line-height: 38px; } } .article_view { max-width: 700px; margin: 80px auto 0 auto; } .article_view p { margin-bottom: 28px; font-size: 16px; line-height: 1.88; color: #666; } .article_view h1, .article_view h2, .article_view h3, .article_view h4 { font-weight: 900; color: rgba(0, 0, 0, 0.87); } .article_view h1 { font-size: 32px; line-height: 1.33; } .article_view h2 { font-size: 24px; line-height: 1.38; } .article_view h3 { font-size: 20px; line-height: 1.4; } .article_view h4 { font-size: 18px; line-height: 1.33; } .article_view blockquote[data-ke-style="box"], #tt-body-page blockquote[data-ke-style="box"], blockquote[data-ke-style="style2"], blockquote[data-ke-style="style3"], #tt-body-page blockquote[data-ke-style="style2"], #tt-body-page blockquote[data-ke-style="style3"]{ margin: 0; padding-left: 19px; border-left: 1px solid; font-size: 16px; line-height: 1.75; color: rgba(0, 0, 0, 0.54); /*! border-radius: 20px!important; */ /*! border: #000 1px solid; */ /*! padding: 30px 10px 10px 10px!important; */ } .article_view blockquote[data-ke-style="style1"], #tt-body-page blockquote[data-ke-style="style1"]{ margin: 0; padding-left: 19px; font-size: 16px; line-height: 1.75; color: rgba(0, 0, 0, 0.54); padding: 30px 10px 10px 10px!important; } .og-image , .og-image:before{ border-radius: 20px 0 0 20px!important; } .og-text{ border-radius: 0 20px 20px 0!important; } .tt_article_useless_p_margin p a{ word-break: break-all; color: #2f7fff; transition: color .25s ease-in; color: #2f7fff; background-repeat: no-repeat; background-size: 100% 0.2em; background-position: 0 100%; background-image: linear-gradient(to right,#2f7fff,#5B9AFF,#aecdff); transition: all .25s ease-in; padding: 2px 0; font-weight: bold; border-radius:0px!important; } .tt_article_useless_p_margin p a:hover{ background-size: 100% 100% !important; color: #fff !important; border-radius: 5px!important; padding:5px; font-weight: bold; } .article_view a:not(.tt_article_useless_p_margin p a){ margin: 0; border-radius: 20px!important; } .tt-box-total{ margin-top:30px; } .tt-area-reply{ margin-bottom:10px!important; } pre { border-radius: 20px!important; } .article_view ul, .article_view ol { margin: 0; padding: 0 0 0 19px; } .article_view ul { margin-top: 18px; } .article_view ul li { font-size: 16px; line-height: 24px; color: rgba(0, 0, 0, 0.87); word-break: break-all; } .article_view ol { margin-bottom: 32px; } .article_view ol li { margin-bottom: 6px; font-size: 16px; line-height: 1.75; color: rgba(0, 0, 0, 0.87); word-break: break-all; } .article_view figure { margin: 0; } .article_view table { border-radius: 12px!important; border-style:hidden!important; box-shadow: 0 0 0 1px #dadce0; border: 1px solid #dadce0; border-collapse: collapse; } .article_view table thead tr { background: rgba(0, 0, 0, 0.05); font-size: 16px; color: #000; } .article_view table tr th, .article_view table tr td { padding: 7px; border-left: 1px solid #dadce0; } .article_view table tr { border-bottom: 1px solid #dadce0; } .article_view pre { background: #f9f9f9; font-size: 16px; color: rgba(34, 85, 51, 0.87); white-space: pre-wrap; padding: 20px; } .article_view pre code.hljs { padding: 20px; } .article_view .cap1 { font-size: 14px; color: rgba(0, 0, 0, 0.54); } .article_view hr { margin: 30px 0; } .article_view a { display: inline-block; color: #3d62ce; } .article_view a:hover { opacity: 0.7; } .article_view .moreless_fold span, .article_view .moreless_top span { font-size: 16px; line-height: 2.5; } .article_view .moreless_top { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .article_view .moreless_bottom { border-top: 1px solid rgba(0, 0, 0, 0.15); } .article_view .moreless_bottom span { display: none; } .article_view .footnote a { text-decoration: none; } .article_view .footnotes li { font-size: 12px; color: rgba(0, 0, 0, 0.38); } .article_view .table-overflow { overflow-x: auto; -webkit-overflow-scrolling: touch; } .article_view .table-overflow { overflow-x: auto; -webkit-overflow-scrolling: touch; } .article_view img { max-width: 100%; } /* 보호글 비밀번호 입력 */ .protected_form input{ border: 1px solid #e1e1e1; padding: 9px 14px; font-size: 14px; } /* area_view - 유튜브 사이즈 제어 */ @media screen and (max-width: 743px) { .article_view iframe { width: 100%; height: 56vw; -ms-height: 56vmax; } } /* media query - only mobile */ @media screen and (max-width: 768px) { .article_view { margin-top: 40px; } } /* 커버 미사용시 리스트 */ .list_index a { text-decoration: none; } .list_index { margin-bottom: 0; margin-top: 0; padding: 0 } .list_index:first-child { margin-top: 168px; } .list_index:last-child { margin-bottom: 60px; } @media screen and (max-width: 1023px){ .list_index:first-child { margin-top: 100px; } } /* 커버 미사용시 리스트-블로그형 */ .list_index.category_type_related { display: inline-block; width: 33.3%; margin-left: -2px; margin-right: -2px; } .list_index.category_type_related:first-child{ margin-top:200px } .list_index.category_type_related:last-child{ margin-bottom:0 } .list_index.category_type_related .item_category { width: 100%; } @media screen and (max-width: 1023px){ .list_index.category_type_related { width: 100%; margin: 0;} .list_index.category_type_related:first-child { margin-top: 120px } .list_index.category_type_related .link_category { padding: 0} } /* absent_post */ .area_view .absent_post{ margin-top:240px } @media screen and (max-width: 1023px) { .area_view .absent_post{ margin: 200px 0 90px 0; } } .revenue_unit_wrap.position_list{ max-width: 1180px; margin: 30px auto } .book-toc p { font-weight: 550; margin-bottom: 7px; } #toc * { text-decoration: none; font-size: 1em; margin-top: 5px; border-radius: 3px; } #toc ul { margin-bottom: 0px; margin-top: 5px; } #toc a { border-radius: 5px!important; } #toc { padding: 20px 20px 35px 35px; /* border-radius: 15px; */ margin-bottom: 20px; /*! background: #f9f9f9; */ border-radius: 1rem !important; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); } #toc > li { margin-left: 22px; padding: 5px; background: #fff; border-radius: 8px; } #toc > li > ul li { margin-left: 0px; margin-bottom: 5px !important; } .postbtn_like , .btn_menu_toolbar{ border-radius: 12px!important; } .itciderbanner{ border-radius: 20px; border: #000 solid 1px; } .cloud1, .cloud2, .cloud3, .cloud4, .cloud5, .cloud6, .cloud7, .cloud8, .cloud9{ border-radius: 8px!important; } .bf-breadcrumb .bf-breadcrumb-items { padding: 0; margin: 0; list-style: none; } .bf-breadcrumb .bf-breadcrumb-item:not(.bf-breadcrumb-end):after { display: inline-block; font-style: normal; font-weight: 400; line-height: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '>'; margin-left: 5px; margin-right: 5px; color: #fff; vertical-align: top; } .bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span { color: #fff; display: inline-block; } li.bf-breadcrumb-item { display: inline-block; } .tt-box-total { padding-top: 12px; border-bottom: 3px solid #999 !important; text-align: center!important; border-radius: 0px!important; } .tt-btn_register { border-radius: 8px!important; } .tt-area-write .tt-box-account input, .tt-box-textarea .tt-inner-g { border-radius: 12px!important; } .tt-btn_register:disabled{ background-color: #777!important; } .tt-btn_register:hover{ border: #000!important; } .tt-item-reply, .tt-list-reply-comment{ border: none!important; } li .tt-item-reply,.tt-wrap-cmt{ border-radius : 12px; } .tt_form_pwd .tt_inp_g{ border-radius: 8px 0 0 8px!important; } .tt_form_pwd .tt_btn_submit{ border-radius: 0 8px 8px 0!important; } .tt-box-tooltip, .tt-show-box-tooltip{ background-color: #fff!important; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.12); } .tt-box-tooltip, .tt-show-box-tooltip .tt_txt_g{ color: #000!important; } .tt-wrap-cmt .tt_box_pwd{ border-radius:12px!important; } .rp_general{ border-bottom: 1px #888 solid!important; } .tt_ico_lock{ margin-left: 10px; } .layer_post{ border-radius: 10px!important; } /* .box_tool > a { padding: 10px 20px 10px 20px; border: 1px solid #000; border-radius: 12px; } */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .sharesns { display: block; position: fixed; right: 10px; bottom: 10px; z-index: 300; font-size:2.375em; line-height: 1; width:56px; height:56px; padding: 10px; box-sizing: border-box; opacity: 0.5; transition: opacity 0.33s linear; scroll-behavior: smooth; } .corner-round .sharesns { border-radius: 15%; } .corner-big-round .sharesns { border-radius: 30%; } .hideanim { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.33s linear; } .postbtn_ccl{display:none;} #waiting { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: flex; background: white; z-index: 999; opacity: 1; justify-content: center; align-items: center; } .itcider-center { margin: auto; } .itcwait { width: var(--itcider-size); height: var(--itcider-size); position: relative; animation: itcwait 2.5s infinite linear both; } input,.tt-inner-g{ background:transparent; } .tt-comment-cont{ background: white; border-radius:20px; padding:20px; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); padding: 1rem; border-radius: 1.5rem; } .itcwait-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: itcwait-dot 2.0s infinite ease-in-out both; } .itcwait-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: var(--itcider-color); border-radius: 100%; animation: itcwait-dot-before 2.0s infinite ease-in-out both; } .itcwait-dot:nth-child(1) { animation-delay: -1.1s; } .itcwait-dot:nth-child(2) { animation-delay: -1.0s; } .itcwait-dot:nth-child(3) { animation-delay: -0.9s; } .itcwait-dot:nth-child(4) { animation-delay: -0.8s; } .itcwait-dot:nth-child(5) { animation-delay: -0.7s; } .itcwait-dot:nth-child(6) { animation-delay: -0.6s; } .itcwait-dot:nth-child(1):before { animation-delay: -1.1s; } .itcwait-dot:nth-child(2):before { animation-delay: -1.0s; } .itcwait-dot:nth-child(3):before { animation-delay: -0.9s; } .itcwait-dot:nth-child(4):before { animation-delay: -0.8s; } .itcwait-dot:nth-child(5):before { animation-delay: -0.7s; } .itcwait-dot:nth-child(6):before { animation-delay: -0.6s; } @keyframes itcwait { 100% { transform: rotate(360deg); } } @keyframes itcwait-dot { 80%, 100% { transform: rotate(360deg); } } @keyframes itcwait-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1.0); } } .link_category .thumnail img, .link_related .thumnail img { display: block; width: 100%; margin-top: -100%; border-radius: 5%; } .lefttoolbox{ float: left; position: fixed; left: 10px; bottom: 10px; } .righttoolbox{ float: right; position: fixed; right: 10px; bottom: 10px; } .shareBtn { position: fixed; left: 0; right: 0; bottom: 10px; padding: 0 10px; } .shareBtn ul { display: flex; align-items: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .shareBtn li>* { flex-direction: row; position: relative; } .shareBtn li>* { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; opacity: 0.5; transition: opacity 0.33s linear; } @media screen and (max-width: 768px) { .article_view a { margin: 0; border-radius: 12px!important; } .og-image , .og-image:before{ border-radius: 12px 0 0 12px!important; } .og-text{ border-radius: 0 12px 12px 0!important; } .article_view blockquote[data-ke-style="box"], #tt-body-page blockquote[data-ke-style="box"], blockquote[data-ke-style="style2"], blockquote[data-ke-style="style3"], #tt-body-page blockquote[data-ke-style="style2"], #tt-body-page blockquote[data-ke-style="style3"]{ border-radius: 12px!important; } .itciderbanner{ border-radius: 12px!important; margin-bottom: 20px; } #toc{ border-radius: 12px!important; } .article_view img { border-radius: 12px!important; } .area_tag { border-radius: 12px!important; } } figure[data-ke-type="opengraph"] a, #tt-body-page figure[data-ke-type="opengraph"] a{ z-index: 0!important; } .tt-area-write .tt-box-thumb{ display: none; } h2#_{ background: none!important; } h2#__1{ background: none!important; } h2#__2{ background: none!important; } h2#__3{ background: none!important; } h2#__4{ background: none!important; } h2#__5{ background: none!important; } h2#__6{ background: none!important; } h2#__7{ background: none!important; } h2#__8{ background: none!important; } h2#__9{ background: none!important; } h2#__10{ background: none!important; } h3#_{ background: none!important; } h3#__1{ background: none!important; } h3#__2{ background: none!important; } h3#__3{ background: none!important; } h3#__4{ background: none!important; } h3#__5{ background: none!important; } h3#__6{ background: none!important; } h3#__7{ background: none!important; } h3#__8{ background: none!important; } h3#__9{ background: none!important; } h3#__10{ background: none!important; } h3#_{ background: none!important; } h3#__1{ background: none!important; } h3#__2{ background: none!important; } h3#__3{ background: none!important; } h3#__4{ background: none!important; } h3#__5{ background: none!important; } h3#__6{ background: none!important; } h3#__7{ background: none!important; } h3#__8{ background: none!important; } h3#__9{ background: none!important; } h3#__10{ background: none!important; } h4#_{ background: none!important; } h4#__1{ background: none!important; } h4#__2{ background: none!important; } h4#__3{ background: none!important; } h4#__4{ background: none!important; } h4#__5{ background: none!important; } h4#__6{ background: none!important; } h4#__7{ background: none!important; } h4#__8{ background: none!important; } h4#__9{ background: none!important; } h4#__10{ background: none!important; } .category_list > li{ padding:10px 20px; background:white; border-radius:1rem; color:black; margin-bottom:10px; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); border-radius: 1rem; } .sub_category_list:hover{ background:#fff; border-radius:10px; } .btn-for-user { padding-bottom: 10px; } .t_menu_guestbook a,.t_menu_home a,.t_menu_tag a ,.t_menu_link_1 a,.t_menu_link_2 a,.t_menu_link_3 a,.t_menu_link_4 a,.t_menu_link_5 a { background: #f1f1f1; padding: 20px; border-radius: 10px; margin: 10px; margin-bottom: 5px !important; } .area_sidebar .link_add{ background: #f1f1f1; padding: 20px; border-radius: 10px; margin: 20px; } .category_type_notice .thumnail{ width: 160px!important; padding-top: 160px!important; border-radius:8px; } @media screen and (max-width: 768px) { .category_type_notice .thumnail{ width: 100px!important; padding-top: 100px!important; } .type_notice .info, .category_type_notice .info{ padding-top:10px!important; } } @media screen and (max-width: 500px) { .category_type_notice .thumnail{ width: 90px!important; padding-top: 90px!important; } .type_notice .info, .category_type_notice .info{ padding-top:0px!important; } } .category_type_notice .item_category{ border:none!important; background:white; padding:10px!important; margin:10px; border-radius:1.5rem; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); } .tt-box-textarea .tt-inner-g, .tt-area-write .tt-box-account input{ background: white; } .tt_box_namecard{ border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1); background-color: white!important; } .article_view h2{ border-radius: 1rem!important; } .shareBtn li{ border: 0.5px solid #efefff!important; border-radius: 12px!important; background: #fff!important; box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1)!important; } /* 스킨명 : fast itcider 버전 : V9.0 제작자 : itcider 쉽고 시원한 it 제작자 웹사이트 : itcider.com 사용 조건 : itcider license 사용 주의점 : ㄴ주석 수정 및 삭제 불가 ㄴfi스킨 문구 삭제 불가 ㄴ스킨은 무제한적으로 사이트에 적용 가능 ㄴ재배포 및 코드 무단 사용 절대 불가 ㄴitcider 공식 웹사이트에서만 배포 가능 위 주의사항을 어기실 경우 사용 불가합니다. */