@charset "UTF-8"; /*//////////////////////////////////////////////////////////////////////////////*/ /*PC////////////////////////////////////////////////////////////////////////////*/ /*공통 css ----------------------------------------------------------------------*/ .chtml { } .chtml p { padding:0px; margin:0px; letter-spacing:-1px; } .chtml .cimg_area .cimg_change { display:none; } .note-editable .chtml .cimg_area .cimg_change { display:inline-block; position:absolute; z-index:49; background-color:#007bff; color:#fff; margin-top:-5px; padding:3px 5px; font-size:11px; white-space:nowrap; cursor:pointer; } .note-editable .chtml > .cimg_area .cimg_change { margin-top:0px; } .note-editable .chtml .cimg_area .cimg_change:before { content:"\f364"; display:inline-block; font-family:"Font Awesome 5 Pro"; margin-right:5px; } .chtml .admTip { display:none; font-size:11px !important; letter-spacing:0px; } .note-editable .chtml .admTip { display:inline-block; font-size:11px !important; letter-spacing:0px; } /*해당템플릿 css ----------------------------------------------------------------------*/ .chtml_grtngTemp01 { position:relative; padding:30px 15px 10px 15px } .chtml_grtngTemp01 .cimg_area { position:absolute; right:0px; top:0px; z-index:5; width:100%; height:100%; overflow:hidden; } .chtml_grtngTemp01 .cimg_area img { } .chtml_grtngTemp01 .chtml_chead { position:relative; z-index:15; } .chtml_grtngTemp01 .chtml_chead:after { content:""; display:block; clear:both; overflow:hidden; height:0px; } .chtml_grtngTemp01 .chtml_chead .ch_text01 { padding-top:15px; font-size:25px; font-family:"Noto Serif KR", serif; font-weight:bold; color:#292c71; } .chtml_grtngTemp01 .chtml_chead .ch_text01 p { font-size:25px !important; font-family:"Noto Serif KR", serif; font-weight:bold; color:#292c71; } .chtml_grtngTemp01 .chtml_cbody { position:relative; z-index:15; padding-top:30px; } .chtml_grtngTemp01 .chtml_cfoot { position:relative; z-index:15; padding-top:30px; text-align:right; } .chtml_grtngTemp01 .chtml_cfoot .cf_text01 { } .chtml_grtngTemp01 .chtml_cfoot .cf_text02 { font-weight:bold; } .chtml_grtngTemp01 .chtml_cfoot .cf_text02 p { font-weight:bold; color:#1b55a9; } .chtml_grtngTemp01 .chtml_cfoot .cf_text02 strong { display:inline-block; padding-left:5px; padding-top:0px; font-size:30px; font-weight:normal; letter-spacing:1px; color:#000; } .chtml_grtngTemp02 { } .chtml_grtngTemp02 .chtml_chead { } .chtml_grtngTemp02 .chtml_chead:after { content:""; display:block; clear:both; overflow:hidden; height:0px; } .chtml_grtngTemp02 .chtml_chead .ch_deco01 { content:"l"; display:block; font-size:130px !important; line-height:90px; font-family:dotum; color:#292c71; height:90px; position:relative; margin-left:-5px; overflow:hidden; } .chtml_grtngTemp02 .chtml_chead .ch_text01 { padding-top:15px; font-size:30px; font-weight:bold; color:#292c71; } .chtml_grtngTemp02 .chtml_chead .ch_text01 p { font-size:30px !important; font-weight:bold; color:#292c71; } .chtml_grtngTemp02 .chtml_chead .ch_text02 { padding-top:15px; font-size:20px; font-weight:bold; } .chtml_grtngTemp02 .chtml_chead .ch_text02 p { font-size:20px !important; font-weight:bold; } .chtml_grtngTemp02 .chtml_chead .ch_img01 { } .chtml_grtngTemp02 .chtml_chead .ch_img01 img { width:160px; height:215px; margin:15px 0px 10px 10px; background-color:#ddd; } .chtml_grtngTemp02 .chtml_cbody { padding-top:20px; } .chtml_grtngTemp02 .chtml_cfoot { padding-top:20px; font-weight:bold; } .chtml_grtngTemp02 .chtml_cfoot p { font-weight:bold; } .chtml_grtngTemp02 .chtml_cfoot strong { display:inline-block; padding-left:10px; padding-top:20px; font-family:"East Sea Dokdo", cursive; font-size:40px; font-weight:normal; letter-spacing:1px; } .chtml_grtngTemp03 { } .chtml_grtngTemp03 .chtml_chead { } .chtml_grtngTemp03 .chtml_chead:after { content:""; display:block; clear:both; overflow:hidden; height:0px; } .chtml_grtngTemp03 .chtml_chead .ch_text01 { padding-top:80px; padding-left:50px; font-size:30px; font-family:"Nanum Brush Script", cursive; letter-spacing:1px; color:#292c71; } .chtml_grtngTemp03 .chtml_chead .ch_text01 p { font-size:30px !important; font-family:"Nanum Brush Script", cursive; color:#292c71; font-weight:bold; } .chtml_grtngTemp03 .chtml_chead .ch_text01 p.topLine { font-family:dotum; font-weight:bold; letter-spacing:-10px; font-size:50px !important; line-height:20px; margin-left:-10px; color:#ec300a; } .chtml_grtngTemp03 .chtml_chead .ch_text01 strong { color:#ec300a; font-weight:bold; } .chtml_grtngTemp03 .chtml_chead .ch_text01 b { font-size:40px; font-weight:bold; } .chtml_grtngTemp03 .chtml_chead .ch_img01 { } .chtml_grtngTemp03 .chtml_chead .ch_img01 img { width:160px; height:215px; margin:15px 0px 10px 10px; background-color:#ddd; border:8px solid #e1e1e1; } .chtml_grtngTemp03 .chtml_cbody { padding-top:20px; } .chtml_grtngTemp03 .chtml_cfoot { padding-top:20px; text-align:right; } .chtml_grtngTemp03 .chtml_cfoot p.ch_text01 { display:inline-block; font-weight:bold; } .chtml_grtngTemp03 .chtml_cfoot p.ch_text02 { display:inline-block; padding-right:10px; } .chtml_grtngTemp03 .chtml_cfoot p.ch_text02 strong { display:inline-block; padding-left:10px; padding-top:20px; font-family:"Nanum Pen Script", cursive; font-size:60px; font-weight:normal; letter-spacing:1px; } /* 이미지 확대보기 */ html.overflow-lock {overflow: hidden;} .COMMON_OKDC_TEXT_FORM img {cursor: pointer;} .COMMON_IMG_EXPAND_VIEW_WRAP ul {padding-left: 0;} .COMMON_IMG_EXPAND_VIEW_WRAP ul > li {list-style: none;} .ui-dialog.ui-widget.img_expand_view_popup {max-width: none; height: 100vh !important; border-radius: 0; background: none; box-shadow: inherit; background-color: transparent !important;} .ui-dialog.ui-widget.img_expand_view_popup .ui-dialog-titlebar, .ui-dialog.ui-widget.img_expand_view_popup .ui-dialog-buttonpane {display: none;} .COMMON_IMG_EXPAND_VIEW_WRAP {width: 100%; height: 100vh; position: fixed; z-index: 9000; top: 0; left: 0;} .COMMON_IMG_EXPAND_VIEW_MASK {width: 100%; height: 100%; background-color: #00000099; position: relative;} .img_expand_view_close_btn {position: absolute; top: 15px; right: 30px; color: #fff !important; font-size: 3rem; z-index: 100;} .img_expand_view_close_btn:hover {color: #fff;} .img_expand_view_close_btn:focus {outline: none;} .COMMON_IMG_EXPAND_VIEW_WRAP .swiper-button-prev {background-image: url("/common/css/images/okdc_arrow_left.png"); background-size: 27px 50px; left: 45px;} .COMMON_IMG_EXPAND_VIEW_WRAP .swiper-button-next {background-image: url("/common/css/images/okdc_arrow_right.png"); background-size: 27px 50px; right: 45px;} .COMMON_IMG_EXPAND_VIEW_WRAP .hama_slide_counter_wrap {position: absolute; bottom: 5%; left: 50%; transform: translatex(-50%); z-index: 99; display: none;} .COMMON_IMG_EXPAND_VIEW_WRAP .hama_slide_counter {display: inline-block; padding: 0.125rem 0.75rem; background-color: #ffffffc9; border-radius: 1rem; font-size: 1rem; font-weight: 600; box-shadow: 0 0 1.5px rgb(0 0 0 / 40%);} .main_img_expand_view_wrap {position: absolute; top: 72px; bottom: 220px; width: 100%; max-height: 940px;} .main_img_expand_view_wrap .img_expand_view_main_form, .main_img_expand_view_wrap .img_expand_view_main_form ul, .main_img_expand_view_wrap .img_expand_view_main_form ul > li {height: 100%;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_FORM {max-width: 940px; width: 100%; height: 100%; max-height: 940px; margin: 0 auto;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP {width: 100%; height: 100%; text-align: center; position: relative;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP > img {width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .sub_img_expand_view_wrap {position: absolute; bottom: 6%; left: 5%; width: 90%;} .sub_img_expand_view_wrap .swiper-slide.swiper-slide-active > .COMMON_IMG_EXPAND_VIEW_IMG_WRAP:after {content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid red;} .sub_img_expand_view_wrap .swiper-slide {width: 150px;} .sub_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP {height: 0; padding-bottom: 100px; background-color: #fff; text-align: center; cursor: pointer; position: relative;} .sub_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP > img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}