/* iframe 동영상 반응형 */ .vd_rep{position: relative;width: 100%;padding-bottom: 56%;margin-bottom: 5px;} .vd_rep iframe {position: absolute;width: 100%;height: 100%;} .vd_rep iframe, .vd_rep object, .vd_rep embed{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* tab menu*/ .tabMenu{display: flex;} .tabMenu li{cursor: pointer;} .tabContent{height: 0;overflow: hidden;visibility: hidden; padding: 0;} .tabContent.on{height: auto; overflow: visible; visibility: visible;} /* s_content */ .s_content{padding: 75px 0;} .s_section{max-width: 1300px; margin: 0 auto;} .s_tit h5{padding-bottom: 75px; text-align: center; font-size: 42px; font-weight: 500; color: #333;} .svisual{width: 100%;height: 350px; position: relative; display: flex; flex-direction:column; justify-content:space-between;padding-top:135px; overflow: hidden;} .svisual .g_title{position: relative; font-family:'GmarketSansBold', sans-serif; font-weight: normal; font-size: 48px; color: #fff;text-align: left; word-break: keep-all; padding-left:100px; display: inline-block; line-height: 1.3;} .svisual .g_title small{font-family:'GmarketSansMedium', sans-serif; font-weight: normal; font-size: 18px; color: #fff; display:block;} .svisual .g_title::before{position: absolute; display: block;content: ""; top:-35px; left:25px; width:64px; height:42px; background: url(/images/slog/mslog_ico02.png) 0 0 no-repeat; background-size: contain;} /* 서브 비쥬얼 커스텀 */ .svisual .s_visual_bg{position: absolute; left: 0; top: 0; z-index: -1; overflow: hidden;} .svisual .s_visual_bg.contest.enchat{display:none;} /* 경진대회용-영어스피치 */ .svisual .s_visual_bg.contest.dron{display:none;} /* 경진대회용-드론축구 */ .svisual .s_visual_bg img.mo{display:none;} .svisual .s_visual_bg img{animation: mymove 5s;} @keyframes mymove{ from{transform:scale(1.2)} to{transform:scale(1)} } .svisual .g_title .char{ animation: text-active-animation 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(60ms * var(--char-index)); } @keyframes text-active-animation { from{opacity:0; transform: translateY(50%);} to{opacity:1.0; transform: translateY(0px);} } .svisual #lnb_wrap{} .s_container{max-width: 1300px; margin: 0 auto; padding: 120px 0; width:90%; min-height: 450px;} @media (max-width: 1240px){ .s_section{padding: 0 20px;} .s_container{padding:100px 0;} .svisual{height: 320px; padding-top:135px;} .svisual .g_title{font-size: 42px; padding-left:80px;} .svisual .g_title small{font-size: 17px;} .svisual .g_title::before{top:-30px; left:15px; width:57px; height:35px;} } @media (max-width: 1024px){ .s_tit h5{font-size: 32px;} .s_container{padding:80px 0;} .svisual{height: 280px; padding-top:120px; overflow: initial;} .svisual .g_title{font-size: 36px; padding-left:60px;} .svisual .g_title small{font-size: 15px;} .svisual .g_title::before{top:-22px; left:10px; width:50px; height:27px;} .svisual .s_visual_bg img.pc{display:none;} .svisual .s_visual_bg img.mo{position: absolute; display: block; top: 0; right: 0; height:280px;} .svisual .s_visual_bg{height: 100%; width: 100%; background:linear-gradient( 50deg, #036eb8, #4694d1);} .svisual .s_visual_bg.enchat{background:#0d0938;} .svisual .s_visual_bg.dron{background:#0b0d24;} } @media (max-width: 640px){ .s_content{padding: 50px 0;} .svisual{height: 200px; padding-top:65px;} .svisual .g_title{font-size: 32px; padding-left:40px;} .svisual .g_title small{font-size: 14px;} .svisual .g_title::before{top:-17px; left:0; width:35px; height:23px;} .svisual .s_visual_bg img.mo{height:240px;} } @media (max-width: 520px){ .svisual .g_title{font-size: 27px} .svisual .s_visual_bg img.mo{right: inherit; left: 0;} } /* ------------------------------ 서브메뉴 ------------------------------ */ .sMenu{} .sub_menu{} .sub_menu ul.tab_ul {border-top: 1px solid rgba(255,255,255,0.4);text-align: center;} .sub_menu ul.tab_ul > li{position: relative;display: inline-block;} .sub_menu ul.tab_ul > li::before{} .sub_menu ul.tab_ul > li:first-child{} .sub_menu ul.tab_ul > li:first-child::before{} .sub_menu ul.tab_ul > li a{display: block;padding:17px;color: #fff;opacity: 0.5;border-top:0 solid #fff;position: relative;top: -2px; font-size: 18px;} .sub_menu ul.tab_ul > li.on{} .sub_menu ul.tab_ul > li.on a{opacity: 1;border-width: 3px;} .sub_menu ul.tab_ul > li.on i{} .sub_menu ul.tab_ul > li i{display: none;} .sub_menu ul.tab_ul > li:hover a{opacity: 1; } .tab_view{display: none;} @media (max-width:1024px){ .tab_view{display:block;font-weight: 500;cursor:pointer;/*background:var(--color-bg);*/color: #fff;text-align: center;width: 100%;margin: auto;border-top: 1px solid #eee;padding: 15px;} .tab_view span{margin-left: 25px;} .tab_view i{position: relative;top:2px;margin-left: 15px;} .tab_view.on{cursor:pointer; } .tab_view.on span i{transform:rotateX(180deg);} .sub_menu {position:relative;box-sizing:border-box; height:0;} .sub_menu ul.tab_ul{padding: 0;display:none; z-index:100;position:absolute;width:100%;left:50%;transform:translateX(-50%); margin:0 auto; line-height:0; background:var(--color-point); box-sizing:border-box;box-shadow: 6px 6px 6px 0px rgba(25, 25, 25, 0.15);-webkit-box-shadow: 6px 6px 6px 0px rgba(25, 25, 25, 0.15); -moz-box-shadow: 6px 6px 6px 0px rgba(25, 25, 25, 0.15);border: none; padding:.5rem 1rem;text-align: center;} .sub_menu ul.tab_ul > li {display: inline-block;padding: .5rem;padding: 0;padding-right: 0; width: 100%;} .sub_menu ul.tab_ul > li > a {display:block;color: #fff;opacity: 0.3;line-height: 1;font-size: 1.1em;border: none;font-size: 0.9em; padding: 10px;} .sub_menu ul.tab_ul > li > i{right: 33%;} .sub_menu ul.tab_ul > li:before{display:none;} .sub_menu ul.tab_ul > li.on > a{opacity: 1;color: #fff;} .sub_menu ul.moreMenu{display: none;} .sub_menu ul.tab_ul > li.on ul.m_moreMenu{display: block;margin-top: 10px; display: flex; justify-content: center; flex-wrap: wrap;} .sub_menu ul.tab_ul > li ul.m_moreMenu li{padding: 4px 7px;} .sub_menu ul.tab_ul > li ul.m_moreMenu li a{display: inline-block;padding: 5px 10px;opacity: 0.3;line-height: 1;color: #fff;font-weight: 500;font-weight: 600;border: 1px solid #ddd;} .sub_menu ul.tab_ul > li ul.m_moreMenu li a.active{opacity: 1;color: #347f92;background: #fff;} .sub_menu ul.tab_ul > li:hover a {color:#fff;} .sub_menu ul.tab_ul > li:hover i{color: #fff;} .sub_menu ul.tab_ul > li i{opacity: 0.3;right: 1rem;color: #fff;} .sub_menu ul.tab_ul > li.on i{opacity: 1;} } nav .tab_menu li {width: 32%;} .tab_menu{max-width:700px; margin: 0 auto;display: flex;justify-content:space-between;} .tab_menu li{width: 49%;} .tab_menu li.on{} .tab_menu li a{display: block;width: 100%;padding: 15px;text-align: center;border: 1px solid #ddd;font-weight: 600;color: #999;font-size: 24px;} .tab_menu li a#bo_cate_on{border-color: var(--color-main);background: var(--color-main);color: #fff;} .tab_menu li:hover a{border-color: var(--color-main);color: var(--color-main);} .tab_menu li:hover a#bo_cate_on{color: #fff;} /* ------------------------------ 공통 ------------------------------ */ h2.sb_tit{font-size: 38px; font-family: 'GmarketSansMedium', sans-serif; font-weight: 600; text-align: center; line-height: 1; margin-bottom:45px;} .sub_tit{margin-bottom:25px;} .sub_tit h2{display: block; font-weight: 700; font-size: 28px; color: #006fc1; letter-spacing: -1px; line-height: 1.2; font-family: 'GmarketSansMedium', sans-serif; font-weight: normal;} .sub_tit h2 small{font-weight:400; font-size: 17px; color: #555; padding-left:10px; font-family: 'GmarketSansMedium', sans-serif; font-weight: normal;} .sub_tit p{font-weight: 400; font-size: 17px; color: #555; letter-spacing: -0.5px; line-height: 1.6;} .sub_tit b{font-weight: 500; color: #333;} .sub_tit h2 + p{margin-top:15px;} @media (max-width:1280px) { .sub_tit p{font-size: 17px;} .sub_tit p.sub_p{font-size: 15px;} h2.sb_tit{font-size: 32px; margin-bottom:38px;} } @media (max-width:980px) { .sub_tit{margin-bottom:25px;} .sub_tit h2{font-size: 25px;} .sub_tit h2 small{font-size: 15px; padding-left:10px;} .sub_tit h2:before{width: 33px; height: 34px; top: -10px; left: -15px;} .sub_tit p{font-size: 16px;} .sub_tit p.sub_p{font-size: 14px;} h2.sb_tit{font-size: 30px; margin-bottom:30px;} } @media (max-width:720px) { .sub_tit h2 small{display:block; padding-left:0; margin-top:10px;} .sub_tit p{display: flex; align-items: flex-start; flex-direction: column;} } @media (max-width:640px) { .sub_tit{margin-bottom:25px;} .sub_tit h2{font-size: 21px; margin-bottom:12px;} .sub_tit h2:before{width: 30px; height: 31px; top: -10px; left: -15px;} .sub_tit p{font-size: 14px; margin-bottom: 3px;} .sub_tit p.sub_p{font-size: 13px;} h2.sb_tit{font-size: 25px; margin-bottom:20px;} } @media (max-width:400px) { h2.sb_tit{font-size: 22px; margin-bottom:20px;} } .ani-up{transform:translateY(15px); opacity:0;} .ani-up.in-view{transform:translateY(0px); opacity:1; transition:all 1s;} .ani-down{transform:translateY(-15px); opacity:0;} .ani-down.in-view{transform:translateY(0px); opacity:1; transition:all 1s;} .a-left{transform:translateX(15px); transition:.8s; opacity:0; transition-delay:.5s;} .a-left.in-view{transform:translateX(0px); opacity:1;} .a-right{transform:translateX(-15px); transition:.8s; opacity:0; transition-delay:.5s;} .a-right.in-view{transform:translateX(0px); opacity:1;} .a-:nth-child(1){transition-delay:.1s;} .a-:nth-child(2){transition-delay:.2s;} .a-:nth-child(3){transition-delay:.3s;} .a-:nth-child(4){transition-delay:.4s} .a-:nth-child(5){transition-delay:.5s} .a-:nth-child(6){transition-delay:.6s} .a-:nth-child(7){transition-delay:.7s} .a-:nth-child(8){transition-delay:.8s} .a-:nth-child(9){transition-delay:.9s} .a-:nth-child(10){transition-delay:1s} .a-:nth-child(11){transition-delay:1.2s} .a-:nth-child(12){transition-delay:1.3s} .a-:nth-child(13){transition-delay:1.4s} .a-:nth-child(14){transition-delay:1.5s} .a-:nth-child(15){transition-delay:1.6s} /* ------------------------------ 테이블 디자인 ------------------------------ */ .tacss table{width: 100%; text-align: center; border-top: 2px solid #222; border-spacing: 0;} .tacss table thead tr th{padding: 17px 15px; border-right: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; background-color: #f6f6f6; color: #333; font-weight: 500; text-align: center;} .tacss table thead tr th:last-child {border-right: none;} .tacss table tbody tr th , .tacss table tbody tr td{padding: 15px 10px; border-bottom: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; font-weight: 400; color: #555;} .tacss table td:last-child {border-right: none;} .tacss table td.bdr{border-right: 1px solid #e9e9e9;} .tacss table tbody tr th{color:#333; font-weight:400; background-color:#fafafa;} .tacss table tbody tr td.exfirst{font-weight: 500; color: #444; border-left: none;} .tacss table tbody tr td.extwo{font-weight: 500; color: #444;} .tacss table tbody tr td a{color: #444;} .tacss table tbody tr td h2{font-size: 16px; color: #222; line-height: 1.3; word-break: keep-all;} .tacss table tbody tr td p{font-size: 15px; color: #555; line-height: 1.3; word-break: keep-all;} .tacss table tbody tr td p i{color: #666;} /* 안에 이미지 있는경우-평생학습축제 */ .tacss table tbody tr td.img_td{padding:15px !important;} .tacss table tbody tr td.img_td .img_box{border-radius:10px; overflow:hidden; display:block; margin-bottom:8px} .tacss table tbody tr td.img_td .img_box img{width:100%;} .tacss table tbody tr td.img_td p{font-size: 18px; color: #222; font-weight:600; line-height: 1.25; word-break: keep-all;} .tacss table tbody tr td.img_td p small{display: block; font-size: 15px; color: #555; font-weight:400;} .tacss table tbody tr td p b{font-weight: 600; color: #666;} .tacss table tbody tr td p a{display: inline-block; color: #666;} .tacss table tbody tr td p a i{margin-right: 4px;} .tacss table tbody tr td p a:hover{color: #036eb8; text-decoration: underline;} .tacss table .blnone{border-left: none!important;} .tacss table.twoline thead tr th{border-left: 1px solid #e8e8e8;} .tacss table.twoline thead tr th.bbe8e8{border-bottom: 1px solid #e8e8e8;;} .tacss .table_wrap{position: relative;} .tacss .table_wrap .table_prev_mo{display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 2;} .tacss .table_wrap .table_prev_mo ul{position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -75px;} .tacss .table_wrap .table_prev_mo ul:after{content: ''; display: block; clear: both;} .tacss .table_wrap .table_prev_mo ul li{float: left; padding-left: 0; margin-top: 0;} .tacss .table_wrap .table_prev_mo ul li::before{display:none;} .tacss .table_wrap .table_prev_mo ul li p{font-size: 15px; color: #fff; margin-top: 0;} .tacss .table_wrap .table_prev_mo ul li i{margin-top: 4px; font-size: 12px; color: #fff; animation: prevarrow .5s ease-in infinite alternate; padding-left:10px;} .tacss table tbody tr td a:hover p{color: #036eb8; text-decoration: underline;} /* 모바일에서 가로스크롤 안나오는부분 수정 */ dl.no_flex {display:block !important} .rpoint{color:#105a99; font-size:15px; word-break: keep-all;} .view_mo{display:none;} @media (max-width: 980px){ .tacss table thead tr , .tacss table tbody tr{font-size:14px;} .tacss table thead tr th{padding: 14px 7px} .tacss table thead tr th h5{line-height: 20px; font-size: 15px;} .tacss table tbody tr td{height: 50px; padding: 10px 20px;} .tacss table tbody tr td p{font-size: 13px; line-height: 23px;} .tacss table tbody tr td p a i{margin-right: 4px;} .tacss .table_wrap .table_prev_mo ul{ margin: -11px 0 0 -75px;} .tacss .table_wrap .table_prev_mo ul li p{font-size: 15px;} .tacss .table_wrap .table_prev_mo ul li i{margin-top: 4px; font-size: 12px;} } @media (max-width: 620px){ .tacss table thead tr th{height: 55px; padding: 10px 20px} .tacss table thead tr th h5{line-height: 20px; font-size: 12.5px;} .tacss table tbody tr td{height: 50px; padding: 5px 5px;} .tacss table tbody tr td p{font-size: 10.5px; line-height: 18px;} .tacss table tbody tr td p a i{margin-right: 4px;} .tacss .table_wrap .table_prev_mo ul{ margin: -11px 0 0 -75px;} .tacss .table_wrap .table_prev_mo ul li p{font-size: 15px;} .tacss .table_wrap .table_prev_mo ul li i{margin-top: 4px; font-size: 12px;} } @media (max-width: 990px){ .tacss .table_wrap{width: 100%;} .tacss .table_wrap:not(.no_scroll){overflow-x: scroll;} .tacss .table_wrap table{width: 981px !important;} .tacss .table_wrap.no_scroll table{width: 100% !important;} .tacss .table_wrap .table_prev_mo{display: block;} .view_mo{display:block;} } @media (max-width: 660px){ .tacss .table_wrap table{width: 651px !important;} .tacss .table_wrap.no_scroll table{width: 100% !important;} } @media (max-width: 450px){ .tacss .table_wrap table{width: 400px !important;} .tacss .table_wrap.no_scroll table{width: 100% !important;} } /* -------------------------------- sub1_1 : 박람회소개 -------------------------------- */ #int{} #int .cont-sec{position:relative;} #int .greeting{position:relative; margin-top:60px;} #int .greeting .img-area{z-index:5; overflow:hidden; position:absolute; top:0; left:0; width:30%; border-radius:0 35px 0 35px; box-shadow:0 5px 20px 0 rgba(75, 96, 118, 0.15);} #int .greeting .img-area img{width:100%; max-width:100%;} #int .greeting .btn-area{padding-left:60px; font-size:0; line-height:0; text-align:right;} #int .greeting .text-area{padding:40px 0 0 0;} #int .greeting .text-area .title{padding-left:35%; position:relative; padding-bottom:43px; font-size:38px; line-height:1.3; color:#161515;} #int .greeting .text-area .title big{display:block; color:#444; font-size:40px; font-family:'GmarketSansBold', sans-serif; font-weight:normal; letter-spacing:1px;word-break: keep-all;} #int .greeting .text-area .title big strong{color:#0094d5; font-weight:normal;} #int .greeting .text-area .title small{display:block; margin-top:30px; font-size:19px; line-height:1.5; color:#333; letter-spacing:-0.025em;} #int .greeting .text-area .text{padding-left:35%; padding-right:45px; padding-top:40px; padding-bottom:50px; position:relative;} #int .greeting .text-area .text::before{background:#f2fbff; top:0; right:0; width:80%; height:100%; border-radius:30px; display:block; content: ""; z-index:-10; position:absolute;} #int .greeting .text-area .text p{font-size:18px; color:#555; word-break:keep-all;} #int .greeting .text-area .text p.first-text{padding-right:10px; font-size:19px; line-height:1.5; font-weight:600; color:#07587d; letter-spacing:-0.025em; word-break:keep-all;} #int .greeting .text-area .text p.first-text span{display:inline-block; font-style:normal; position:relative; z-index:1; font-weight:600;} #int .greeting .text-area .text p.first-text span:before{position:absolute; left:-3px; right:-3px; width:100%; bottom:6px; height:11px; content:""; z-index:-1; background-color:#ffe9e9;} #int .greeting .text-area .text p.first-text + p{margin-top:20px; line-height:28px;} #int .greeting .text-area .text p + p{margin-top:20px;} #int .greeting .ceo-name{text-align:right; padding-right:45px; margin-top:30px; font-size:18px; color:#555; line-height: 1.4;} #int .greeting .ceo-name span{margin-left:10px; font-size:26px; color:#333; font-weight:600;} @media (max-width: 1024px){ #int .greeting .text-area .text{padding:45px;} #int .greeting .text-area .text:before{width:100%; border-radius:10px;} } @media (max-width: 767px){ #int .greeting{margin-top:0;} #int .greeting .img-area{position:relative; width:100%;} #int .greeting .text-area{padding:20px 0 0 0;} #int .greeting .text-area .title{padding-left:0; padding-bottom:15px;} #int .greeting .text-area .title big{font-size:24px;} #int .greeting .text-area .title small{margin-top:10px; font-size:15px;} #int .greeting .text-area .title small br{display:none;} #int .greeting .text-area .first-text{padding-right:0; font-size:17px;} #int .greeting .text-area .text .first-text + p{margin-top:10px; line-height:1.5;} #int .greeting .text-area .text p + p{line-height:1.5; color:#494949; margin-top:10px;} #int .greeting .ceo-name{text-align:center; padding-right:0; margin-top:15px; font-size:14px;} #int .greeting .ceo-name span{margin-left:5px; font-size:18px;} } /* ------------------------------ sub1_2 : 박람회 개요 ------------------------------ */ #outl{position:relative; margin: 0 auto;} #outl:after{content: ''; display: block; clear: both;} #outl > div{float: left;} #outl .otimg{width: 37%;} #outl .otimg img{width:100%;} #outl .otcon{width: 63%; padding-left: 50px;} #outl .ottxt{display: flex; align-items: center; padding: 20px 10px; border-bottom: 1px solid #eee;} #outl .ottxt:nth-of-type(1){border-top: 1px solid #eee;} #outl .ottxt h5{ flex: 0 0 150px; font-size: 17px; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; color: #fff; text-align: center; padding:0 5px; border-radius: 10px 0; height: 38px; line-height: 40px; background: rgb(82,190,197); background: linear-gradient(130deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%); } #outl .ottxt p{padding-left: 20px; font-size: 19px; font-weight: 500; color: #333; line-height:1.35; word-break: keep-all;} #outl .ottxt p.ot_point{font-size: 22px; font-family:'GmarketSansBold', sans-serif; font-weight: normal; background: rgb(82,190,197); background: linear-gradient(190deg, rgba(82,190,197,1) 20%, rgba(0,152,219,1) 100%); color: transparent; -webkit-background-clip: text;} #outl .ottxt p.ot_point span{background: rgb(82,190,197); background: linear-gradient(190deg, rgba(82,190,197,1) 20%, rgba(0,152,219,1) 100%); color: transparent; -webkit-background-clip: text;} #outl .ottxt p small{font-size: 16px; font-weight: 400; color: #888;} #outl .ottxt p.ottxt_img{display: flex; align-items: center; gap:5px;} #outl .ottxt p.ottxt_img img{width:135px;} /* 슬로건 애니메이션 */ #outl .ottxt p.ot_point .char{ animation: text-active-animation 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(60ms * var(--char-index)); } @keyframes text-active-animation { from{opacity:0; transform: translateY(50%);} to{opacity:1.0; transform: translateY(0px);} } @media (max-width: 991px){ #outl > div{float: none;} #outl .otimg{width: 50%; margin: 0 auto;} #outl .otcon{width: 100%; padding: 50px 0 0;} } @media (max-width: 640px){ #outl .ottxt{flex-wrap: wrap; justify-content: center;} #outl .ottxt h5{font-size: 16px; margin-bottom:10px;} #outl .ottxt p{width:100%; padding-left:0; font-size: 17px; text-align: center; } #outl .ottxt p.ot_point{font-size: 19px;} #outl .ottxt p small{font-size: 15px;} #outl .ottxt p.ottxt_img { flex-wrap: wrap; justify-content: center;} } /* ------------------------------ sub1_3 : 행사장 배치도 ------------------------------ */ #sMab{position: relative; max-width:1100px; margin:0 auto;} #sMab .sM_wr{overflow: hidden; width:100%; border-radius:50px; box-shadow: 0 5px 20px 0 rgba(75, 96, 118, 0.15);} #sMab .sM_wr img{width:100%;} /* ------------------------------ sub1_4 : 오시는길 ------------------------------ */ #map{font-size: 16px;} #map .part1 iframe{width: 100%; height:520px; border-radius: 30px; box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.2);} #map .btn_part{margin-top: 45px; text-align: center;} #map .btn_part > a{padding: 10px 15px; border-radius:30px; background-color: #fff; transition:0.3s; display:inline-block; margin-right: 20px;} #map .btn_part > a:first-child{border: 2px solid #2bcd15; font-size: 16px; font-weight: 500; color:#2bcd15;} #map .btn_part > a:last-child{border: 2px solid #f0db0f; font-size: 16px; font-weight: 500; color:#d2b406;} #map .btn_part > a i{margin-left: 20px;} #map .btn_part > a:first-child:hover{background-color: #2bcd15; color:#fff;} #map .btn_part > a:last-child:hover{background-color: #f0db0f; color:#fff;} #map .loca-list{} #map .loca-list ul{} #map .loca-list li{display:flex; padding:50px 0 50px 40px;} #map .loca-list li + li{border-top:1px dashed #ddd;} #map .loca-list .icon{ width:120px; text-align:center; display:flex; flex-direction:column; align-items:center; font-size:21px; font-family:'GmarketSansBold', sans-serif; font-weight: normal; background: rgb(82,190,197); background: linear-gradient(300deg, rgba(82,190,197,1) 50%, rgba(0,152,219,1) 100%); color: transparent; -webkit-background-clip: text; } #map .loca-list .icon i{font-size:70px; margin-top:10px;} #map .loca-list .txt-wrap{width:calc(100% - 120px); padding-left:100px;} #map .loca-list .txt-wrap p{position: relative; font-size:17px; color:#555; font-weight:400; margin-bottom:20px; line-height:1.8; word-break:keep-all;} #map .loca-list .txt-wrap p b{color:#222; position:absolute; top:0; left:0; display:inline-block; font-size:19px; letter-spacing:-.5px;} #map .loca-list .txt-wrap .point{display:inline-block; color:#0098db; font-weight:500;} #map .loca-list .txt-wrap p a{} #map .loca-list .txt-wrap p.shot-txt{padding-left:90px;} #map .loca-list .txt-wrap p.long-txt{padding-left:130px;} @media (max-width: 1240px){ #map .loca-list .txt-wrap{padding-left:60px;} } @media (max-width: 767px){ #map .part1 iframe{height: 360px!important;} #map .loca-list li{padding:20px 0; flex-direction:column;} #map .loca-list .icon{width:100%; text-align:left; flex-direction:row; align-items:flex-start; font-weight:700; justify-content:flex-start; margin-bottom:15px;} #map .loca-list .icon i{display:none;} #map .loca-list .icon br{display:none;} #map .loca-list .txt-wrap{padding-left:0; width:100%;} #map .loca-list .txt-wrap p b{position:relative; top:auto; left:auto; font-size:18px; display:block;} #map .loca-list .txt-wrap p{font-size:15px; margin-bottom:15px; line-height:1.6;} #map .loca-list .txt-wrap p.shot-txt{padding-left:0;} #map .loca-list .txt-wrap p.long-txt{padding-left:0;} } @media (max-width: 480px){ #map .btn_part > a{padding: 5px 10px; margin-right: 7px;} #map .btn_part > a:first-child{font-size: 13px; margin-bottom:10px;} #map .btn_part > a:last-child{font-size: 13px;} } /* ------------------------------ sub2_1 : 행사 구성맵 ------------------------------ */ #Comp{} #Comp .Comp_wr{} #Comp .Comp_wr .Ctop{text-align: center; margin-bottom: 20px; display:none;} #Comp .Comp_wr .Ctop img{} #Comp .Comp_wr .Cmid{position: relative; width:100%; margin:0 auto;padding-bottom: 30px;} #Comp .Comp_wr .Cmid::before{position: absolute; display:block; content:''; background:#0098db; height:73%; width:1px; top: 32%; left: 8%; z-index:-1;} #Comp .Comp_wr .Cmid::after{position: absolute; display:block; content:''; background:#0098db; height:73%; width:1px; top: 32%; right: 8%; z-index:-1;} #Comp .Comp_wr .Cmid .C_box{position: relative; margin:0 auto; text-align: center;} #Comp .Comp_wr .Cmid .C_box::after{position: absolute; display:block; content:''; background:#0098db; height:1px; width:84%; top: 45%; left: 50%; transform: translateX(-50%); z-index:-1;} #Comp .Comp_wr .Cmid .C_box h2{ font-family:'GmarketSansBold', sans-serif; font-weight: normal; font-size:25px; color:#fff; line-height: 1; display:inline-block; width:30%; padding: 25px; background:linear-gradient(90deg, rgba(82,190,197,1) 20%, rgba(0,152,219,1) 100%); border-radius: 15px 0; } #Comp .Comp_wr .Cbot{} #Comp .Comp_wr .Cbot ul{display: flex; justify-content: space-between; align-items: flex-start;} #Comp .Comp_wr .Cbot ul li{width:16%;} #Comp .Comp_wr .Cbot ul li .Ctit{border-top: 6px solid #ddd; border-bottom: 2px solid #ddd; background:#fff; padding: 25px 10px 22px; text-align: center;} #Comp .Comp_wr .Cbot ul li .Ctit{border-image:linear-gradient(90deg, rgba(82,190,197,1) 20%, rgba(0,152,219,1) 100%); border-image-slice: 1;} #Comp .Comp_wr .Cbot ul li .Ctit h3{font-family:'GmarketSansBold', sans-serif; font-weight: normal; font-size:22px; letter-spacing:-0.01em; color:#222; line-height: 1;} #Comp .Comp_wr .Cbot ul li dl{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin-top:10px;} #Comp .Comp_wr .Cbot ul li dl dt{width:100%;} #Comp .Comp_wr .Cbot ul li dl dd{width:49%;} #Comp .Comp_wr .Cbot ul li dl dt a , #Comp .Comp_wr .Cbot ul li dl dd a{position:absolute; width:100%; height:100%; display:block; z-index:4; left:0; top:0;} #Comp .Comp_wr .Cbot ul li dl dt , #Comp .Comp_wr .Cbot ul li dl dd{ position: relative; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; text-align: center; font-size:16px; color:#444; line-height: 1.3; word-break: keep-all; padding:17px 10px 15px; margin-bottom:5px; border: 1px solid #ddd; border-radius: 10px 0; overflow:hidden; } #Comp .Comp_wr .Cbot ul li.Ccont01{} #Comp .Comp_wr .Cbot ul li.Ccont02{} #Comp .Comp_wr .Cbot ul li.Ccont03{width:30%;} #Comp .Comp_wr .Cbot ul li.Ccont04{} #Comp .Comp_wr .Cbot ul li.Ccont05{} #Comp .Comp_wr .Cbot ul li dl dt::before , #Comp .Comp_wr .Cbot ul li dl dd::before{ position:absolute; content: ''; width:110%; height:110%; background:linear-gradient(90deg, rgba(82,190,197,1) 20%, rgba(0,152,219,1) 100%); top:50%; left:-1px; transform:translate(-100%, -50%); transition: transform 0.65s cubic-bezier(.7,0,.9,1); z-index: -1; transition:all .5s; } #Comp .Comp_wr .Cbot ul li dl dt:hover::before , #Comp .Comp_wr .Cbot ul li dl dd:hover::before{transform: translate(0, -50%);} #Comp .Comp_wr .Cbot ul li dl dt:hover , #Comp .Comp_wr .Cbot ul li dl dd:hover{color:#fff;} #Comp .Comp_wr .Cbot ul li dl dt.noa:hover::before , #Comp .Comp_wr .Cbot ul li dl dd.noa:hover::before{transform:translate(-100%, -50%);} #Comp .Comp_wr .Cbot ul li dl dt.noa:hover , #Comp .Comp_wr .Cbot ul li dl dd.noa:hover{color:#444;} @media (max-width:1400px) { #Comp .Comp_wr .Cbot ul {flex-direction: column;} #Comp .Comp_wr .Cbot ul li { width: 100%;} #Comp .Comp_wr .Cbot ul li.Ccont03 { width: 100%;} #Comp .Comp_wr .Cbot ul li dl dd { width: 100%;} #Comp .Comp_wr .Cmid .C_box h2 {width:100%;} #Comp .Comp_wr .Cbot ul li + li{margin-top:40px;} /* 추가 */ #Comp .Comp_wr .Cmid::before {display:none;} #Comp .Comp_wr .Cmid::after {display:none;} #Comp .Comp_wr .Cmid .C_box::after {display: none;} } @media (max-width:500px) { #Comp .Comp_wr .Cmid .C_box h2 {font-size: 20px;} } @media (max-width:300px) { #Comp .Comp_wr .Cmid .C_box h2 {font-size: 20px;} } /* ------------------------------ sub2_2 : 프로그램 안내 ------------------------------ */ /* 상단 공지박스 */ .tit-box{width:100%; padding:30px 20px; border: 1px solid #ddd; margin-bottom:80px; text-align: center; border-radius:15px;} .tit-box h2{font-size: 22px; font-weight:500; color: #222; letter-spacing: -0.02em; word-break: keep-all;} .tit-box small{font-size: 18px; font-weight:400; color: #555;} .tit-box .f_ytb{position: relative; margin-top:20px; line-height:1.8; font-size: 20px; display: inline-block;} .tit-box .f_ytb b{font-weight:500; color: #fff; font-size: 18px; padding: 3px 5px; margin:0 5px; border-radius: 8px; background: #fe0303;} .tit-box .f_ytb img{position: relative; left: 0; top: -3px; width:34px;} .s_container .tit-box{opacity: 0;transform:translateY(-30px);transition:all .8s;} .s_container .in-view .tit-box{opacity: 1;transform:translateY(0);} /* 안에 내용 반반일때 - 포스터 */ .Pc_harf{position:relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top:20px;} .Pc_harf > div{width:calc(100% - 420px)!important; padding-right:20px;} .Pc_harf > div.Pc_poster_box{width:420px!important; overflow:hidden;} .Pc_harf > div.Pc_poster_box img{width:100%;} /* 좌측 따라다니는 nav */ #Prog .lt-wrap{} #Prog .lt-wrap .left-tab:after{content:""; display:block; clear:both;} #Prog .lt-wrap .left-tab ul{display:none; flex-direction:column; align-items: flex-start; padding:15px 0; opacity:0; transition:all 0.3s;} #Prog .lt-wrap .left-tab ul h2.lt-tit{position:relative; line-height:1; padding-left:20px; font-size:20px; font-family:'GmarketSansMedium', sans-serif; font-weight:600; color:#121a1d; margin-bottom:10px;} #Prog .lt-wrap .left-tab ul h2.lt-tit::before{position:absolute; display:block; content:''; display:block; width:5px; height:5px; border-radius:50%; background:#0098db; top:-8px; right:-8px;} #Prog .lt-wrap .left-tab ul li{position:relative;} #Prog .lt-wrap:not(.lt-wrap_mo) .left-tab ul li + li{margin-top:8px;} #Prog .lt-wrap .left-tab ul li.bod{padding-bottom:20px; margin-bottom:25px; border-bottom:1px dashed #ddd;} #Prog .lt-wrap .left-tab ul li a{ line-height:20px; padding-left:20px; font-size:16px; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; color:#888; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s; } #Prog .lt-wrap .left-tab.fixed{position:fixed; z-index:100; top:10%; transform:translate(0%, -50%); left:45px; -webkit-transform:translate3d(0,0,0); transition:all 0.3s; border-left:1px solid #a1a1a1;} #Prog .lt-wrap .left-tab.fixed ul{display:flex; opacity:1;} #Prog .lt-wrap .left-tab.fixed ul li.selected a{color:#0098db;} #Prog .lt-wrap .left-tab.fixed ul li.selected a::before{content:""; display:block; background:#0098db; position:absolute; width:3px; height:24px; box-sizing:border-box; left:-2px; top:-1px; z-index:10;} /* 모바일 상단 픽스 nav */ #Prog .lt-wrap_mo{opacity:0;} #Prog .lt-wrap_mo .left-tab_mo:after{content:""; display:block; clear:both;} #Prog .lt-wrap_mo .left-tab_mo ul{display:none; opacity:0; transition:all 0.3s;} #Prog .lt-wrap_mo .left-tab_mo ul li{position:relative; width:calc(100% / 5); word-break: keep-all; text-align: center;} #Prog .lt-wrap_mo .left-tab_mo ul li a{display:inline-block; font-size:16px; line-height:1.25; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; color:#888; padding:20px 0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s;} #Prog .lt-wrap_mo .left-tab_mo.fixed{position:fixed; z-index:100; top:0; left:0; width: 100%; border-left:0; background:#fff; box-shadow: 2px 2px 12.45px 1.2px rgba(0, 0, 0, 0.125); transition:all 0.3s;} #Prog .lt-wrap_mo .left-tab_mo.fixed ul{display:flex; opacity:1; flex-direction: row; align-items: stretch;} #Prog .lt-wrap_mo .left-tab_mo.fixed ul li.selected a{color:#0098db;} #Prog .lt-wrap_mo .left-tab_mo.fixed ul li.selected a::before{position:absolute; content:""; display:block; background:#0098db; width:100%; height:3px; bottom:-1px; left: 0; z-index:10;} @media (max-width:1260px) { #Prog .lt-wrap{opacity:0;} #Prog .lt-wrap_mo{opacity:1;} } @media (max-width:860px) { #Prog .lt-wrap_mo .left-tab_mo ul li a{font-size:15px; padding:15px 0;} } @media (max-width:520px) { #Prog .lt-wrap_mo .left-tab_mo ul li a{font-size:13.5px; padding:14px 0;} } /* 섹션별 박스 */ #Prog .Pcon{position:relative; border-radius: 40px; background: #fff; padding: 75px 50px; box-shadow: 0 5px 25px 0 rgba(75, 96, 118, 0.1);} #Prog .Pcon + .Pcon{margin-top:40px;} #Prog .Pcon .Pc_wr{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 50px;} #Prog .Pcon .Pc_tit{position:relative; width: 100%; display: block; text-align: center; margin-bottom:50px;} #Prog .Pcon .Pc_tit p{position:relative; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; font-size:22px; color: #444; line-height: 1.3; letter-spacing:-0.025em;} #Prog .Pcon .Pc_tit p.point{ font-family:'GmarketSansBold', sans-serif; font-weight: normal; font-size:34px; color: transparent; display:inline-block; word-break: keep-all; background:rgb(0,152,219); background:linear-gradient(-90deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%); -webkit-background-clip: text; } #Prog .Pcon .Pc_tit p.bar{padding-top: 15px; margin-top:10px; word-break: keep-all} #Prog .Pcon .Pc_tit p.bar::before{position:absolute; display:block; content:''; width:100%; height:3px; left:0; top:0; background:linear-gradient(-90deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%);} #Prog .Pcon .Pc_tit p.pc_ytb span{position:absolute; display:block; width:34px; height:34px; top:-20px; right:-35px;} #Prog .Pcon .Pc_tit p.pc_ytb span img{width:100%} #Prog .Pcon .Pc_wr + .Pc_wr{margin-top:35px; padding-top:35px;} #Prog .Pcon .Pc_wr .Pc_subj{position:relative; width: 100%;} #Prog .Pcon .Pc_wr .Pc_subj + .Pc_subj{margin-top:15px;} /* 좌우 나뉠때 사용-연사소개부분 */ #Prog .Pc_subj.flex{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; padding: 30px 20px 0;} #Prog .Pc_subj.flex .Pc_subj_inner{width:59%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #Prog .Pc_subj.flex2 .Pc_subj_inner{position:relative; width:46%;} #Prog .Pc_subj.flex-no .Pc_subj_inner{position:relative; width:70%; margin: 0 auto;} #Prog .Pc_subj.flex2 .Pc_subj_inner + .Pc_subj_inner{width:50%; padding-left:4%;} #Prog .Pc_subj.flex2 .Pc_subj_inner + .Pc_subj_inner::before{position:absolute; display:block; content:''; width:2px; height:100%; border-left: 1px dashed #ddd; top:0; left:0;} #Prog .Pc_subj.flex .Pc_left{width:calc(100% - 230px);} #Prog .Pc_subj.flex .Pc_left{} #Prog .Pc_subj.flex ul.Psubj_flex_txt{text-align: left;} #Prog .Pc_subj.flex ul.Psubj_flex_txt li.point_bg{ font-family:'GmarketSansMedium', sans-serif; font-weight: normal; font-size:15px; color: #fff; line-height:1; display:inline-block; padding: 8px 12px 5px; border-radius: 5px; background: linear-gradient(315deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%); } #Prog .Pc_subj.flex ul.Psubj_flex_txt li.Sname{font-family:'GmarketSansBold', sans-serif; font-weight: normal; font-size:24px; color: #222; line-height:1; margin:15px 0 10px; word-break: keep-all} #Prog .Pc_subj.flex ul.Psubj_flex_txt li.Scont{font-family:'GmarketSansLight', sans-serif; font-weight: 600; font-size:16px; color:#888; line-height:1.5; word-break: keep-all;} #Prog .Pc_subj.flex2 ul.Psubj_flex_txt li.Sname small{font-family:'GmarketSansMedium', sans-serif; font-weight: normal; font-size:18px; color: #555;} #Prog .Pc_subj.flex2 ul.Psubj_flex_txt li.Scont{font-family:'GmarketSansLight', sans-serif; font-weight: 600; font-size:18px; color:#555; line-height:1.5; word-break: keep-all;} #Prog .Pc_subj.flex .Pc_right{position:relative; width:218px; height:218px; border-radius:50%;transform: translateX(0);} #Prog .Pc_subj.flex .Pc_right a{position:absolute; width:100%; height:100%; display:block; z-index:9;} #Prog .Pc_subj.flex .Pc_right::before{ position:absolute; display:block; content:''; width:100%; height:100%; background: conic-gradient(#fff 30deg, #0098db 30deg 240deg, #fff 240deg 360deg); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); z-index:-5; transition: all .6s; } #Prog .Pc_subj.flex .Pc_right::after{position:absolute; display:block; content:''; width:100%; height:100%; background:#0098db; opacity:0; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); z-index:-5; transition: all .6s;} #Prog .Pc_subj.flex .Pc_right .img_inner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:215px; height:215px; overflow:hidden; border-radius:50%; z-index: 5; border:10px solid #fff;} #Prog .Pc_subj.flex .Pc_right .img_inner img{background:#ddd;width:100%; transition: all .6s;} #Prog .Pc_subj.flex .Pc_mc{width:38%; border-left:1px dashed #ddd; padding-left:3%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #Prog .Pc_subj.flex .Pc_mc img{width:110px;} #Prog .Pc_subj.flex .Pc_mc ul{width:calc(100% - 125px);} #Prog .Pc_subj.flex .Pc_right:hover{transition: all .6s;} #Prog .Pc_subj.flex .Pc_right:hover .img_inner img{transform:scale(1.1); transition: all .6s;} #Prog .Pc_subj.flex .Pc_right:hover::before{transform: translate(-50%, -50%) rotate(45deg); transition: all .6s;} #Prog .Pc_subj.flex .Pc_right:hover::after{opacity:1; transform: translate(-50%, -50%) rotate(45deg); transition: all .6s;} #Prog .Pc_subj.flex .Pc_right + .Pc_left{margin-top:30px;} #Prog .Pc_subj.flex .Pc_right + .Pc_left + .Pc_right{margin-top:30px;} /* 접수버튼 */ #Prog a.applyBtn{ font-weight: 500; font-size: .85em; background:linear-gradient(130deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%); display: inline-block; padding:5px 15px; color: #fff !important; -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; margin-left: 5px; transform: translateY(-3px); transition: all .4s;} #Prog a.applyBtn:hover{box-shadow: 0px 5px 8px 0.5px rgba(0, 0, 0, 0.1); transform: translateY(-5px); transition: all .4s;} /* 콘텐츠 기본 틀 */ #Prog .Pcon .Pc_infotit{position:relative; font-size:32px; color: #222; font-family:'GmarketSansMedium', sans-serif; font-weight: normal;padding-bottom: 15px; width: 100%; word-break: keep-all;} #Prog .Pcon .Pc_infotit::before{position:absolute; display:block; content:''; width:100%; height:3px; left:0; bottom:0; background:linear-gradient(-90deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%);} #Prog .Pcon .Pc_infotit i{ display: inline-block; width: 40px;height: 40px; line-height: 40px; color:#fff; font-size:20px; margin-right:10px; transform: translateY(-3px); background: linear-gradient(130deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; } #Prog .Pcon .Pc_infosub{font-size:22px; color: #444; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; margin-top: 15px; width: 100%; word-break: keep-all;} #Prog .Pcon .Pc_subj{font-size: 20px; line-height: 1.4; color: #333;} #Prog .Pcon .Pc_subj dl{display: flex; align-items: center; border-bottom: 1px solid #ddd; padding:28px;} #Prog .Pcon .Pc_subj dl dt{width: 170px;flex-shrink:0; font-family:'GmarketSansMedium', sans-serif; font-weight: normal; font-size:24px;line-height: 1.2;color: #222; letter-spacing: 0.1em;} #Prog .Pcon .Pc_subj dl dd{flex-grow:1; margin-bottom: 5px; word-break: keep-all;} #Prog .Pcon .Pc_subj dl dd ul li{font-size: 17px;} #Prog .Pcon .Pc_subj dl dd p.rpoint{font-size:17px; color:#ff1900; margin-top:10px;} #Prog .Pcon .Pc_subj dl dd p.sm_p{font-size:17px; } #Prog .Pcon .Pc_subj dl dd a{color: #333;} #Prog .Pcon .Pc_subj dl dd small{display: block;color: #777;font-size: .9em;margin-top: 2px;} #Prog .Pcon .Pc_subj .Pc_tList{margin-top: 10px;background-color: #f5f5f5;border: 1px solid #ddd;padding:30px 50px;text-align: center;} #Prog .Pcon .Pc_subj .Pc_tList img {width:100%;} #Prog .Pcon .Pc_subj .Pc_tList.Pc_tList2{padding:30px 25px;} #Prog .Pcon .Pc_subj .Pc_tList h3{font-weight:500;} #Prog .Pcon .Pc_subj .Pc_tList table{margin-top: 15px; border-top: 1px solid #000; font-size: 0.85em;} #Prog .Pcon .Pc_subj .Pc_tList table tr{border-bottom: 1px solid #ddd; background-color: #fff;} #Prog .Pcon .Pc_subj .Pc_tList table tr th{font-weight: bold; background-color:#e0e6ee; border-color: #c3cad4; color: #333;} #Prog .Pcon .Pc_subj .Pc_tList table tr td{padding: 10px;color: #555;} #Prog .Pcon .Pc_subj dl.Pc_dlmore dt{font-size: 1.1em; width: auto;margin-right:25px;} #Prog .Pcon .Pc_subj ul.not_list{margin-top: 30px;} #Prog .Pcon .Pc_subj ul.not_list{} #Prog .Pcon .Pc_subj ul.not_list li{margin: 5px 0;padding:3px 20px;position: relative;} #Prog .Pcon .Pc_subj ul.not_list li p{position: relative; padding-left: 17px; word-break: keep-all;} #Prog .Pcon .Pc_subj ul.not_list li p::before{width: 5px;height: 5px;background-color: #aaa;left:0;top: 12px;position: absolute;content: '';} #Prog .Pcon .Pc_subj ul.not_list li span{color: #777;display: block;padding-left: 17px;font-size: .9em;} @media (max-width:1260px) { #Prog a.applyBtn {margin: 10px 0 10px; } #Prog .Pcon .Pc_tit { margin-bottom: 30px;} #Prog .Pcon .Pc_subj {font-size: 18px;} #Prog .Pc_subj.flex .Pc_left { width: calc(100% - 160px);} #Prog .Pc_subj.flex .Pc_right .img_inner { width: 150px; height: 150px;} #Prog .Pc_subj.flex .Pc_right {width: 152px;height: 152px; margin: 20px 0;} #Prog .Pc_subj.flex .Pc_subj_inner {/*flex-direction: column-reverse;*/ align-items: center;} #Prog .Pc_subj.flex .Pc_mc {justify-content: center; flex-direction: column-reverse;} #Prog .Pc_subj.flex .Pc_mc ul {width: calc(100% - 20px);} #Prog .Pc_subj.flex .Pc_mc img {width: 90px;} .Pc_harf > div.Pc_poster_box {width: 300px!important;} .Pc_harf > div {width: calc(100% - 340px)!important;} } @media (max-width:1024px) { #Prog .Pcon {padding: 50px 30px;} #Prog .Pcon .Pc_subj{font-size: 18px;} #Prog .Pcon .Pc_infotit{font-size: 31px;} #Prog .Pcon .Pc_infosub{font-size:20px;} #Prog .Pcon .Pc_infotit .icon{width: 34px;height: 34px;-webkit-background-size: 14px;background-size: 14px;} #Prog .Pcon .Pc_subj dl{padding: 17px 20px;} #Prog .Pcon .Pc_subj dl dt {width: 125px; font-size: 24px;padding-top:5px;} #Prog .Pc_subj.flex .Pc_mc ul { width: calc(100% - -40px);} #Prog .Pc_subj.flex ul.Psubj_flex_txt li.Scont {font-size: 14px;} #Prog .Pc_subj.flex ul.Psubj_flex_txt li.Sname {font-size: 21px;} #Prog .Pc_subj.flex2 ul.Psubj_flex_txt li.Sname small{font-size:16px;} #Prog .Pc_subj.flex2 ul.Psubj_flex_txt li.Scont{font-size:16px;} } @media (max-width:960px) { .tit-box h2 {font-size: 20px;} .tit-box .f_ytb {font-size: 18px;} #Prog .Pcon .Pc_tit p.point {font-size: 30px;} #Prog .Pcon .Pc_tit p {font-size: 20px;} #Prog .Pcon .Pc_infotit {font-size: 28px;} #Prog .Pcon .Pc_infosub{font-size:18px;} #Prog .Pcon .Pc_subj dl dt { font-size: 22px;} #Prog .Pcon .Pc_subj dl dd {margin-bottom: 0; word-break: keep-all;} #Prog .Pcon .Pc_wr {padding: 20px 0 0 0;} .Pc_harf { flex-direction: column-reverse;} .Pc_harf > div.Pc_poster_box {width: 70%!important;} .Pc_harf > div { width:100%!important;} .Pc_harf > div.Pc_poster_box img {margin: 0 0 20px;} #Prog a.applyBtn {margin-left: 10px;} #Prog .Pcon .Pc_subj .Pc_tList{padding:20px 30px;text-align: center;} #Prog .Pc_subj.flex {flex-direction: column;} #Prog .Pc_subj.flex .Pc_subj_inner { width: 100%; padding: 0 0 20px;} #Prog .Pc_subj.flex2 .Pc_subj_inner + .Pc_subj_inner{ width: 100%; padding: 0 0 20px;} #Prog .Pc_subj.flex2 .Pc_subj_inner + .Pc_subj_inner::before{display: none;} #Prog .Pc_subj.flex .Pc_mc { width: 100%;} #Prog .Pc_subj.flex .Pc_mc {border-top: 1px dashed #ddd; border-left: none; padding: 20px 0 0;} #Prog .Pc_subj.flex .Pc_right + .Pc_left{margin-top:40px;} #Prog .Pc_subj.flex .Pc_right + .Pc_left + .Pc_right{margin-top:0;} #Prog .Pc_subj.flex .Pc_mc ul.Psubj_flex_txt{margin-top: 10px;} } @media (max-width:720px) { #Prog .Pcon .Pc_subj dl{flex-wrap:wrap;} #Prog .Pcon .Pc_subj dl dt {width: 100%!important;} #Prog .Pcon .Pc_subj dl dt br{display: none;} #Prog .Pcon .Pc_subj dl .Pc_tList{padding: 20px 30px;} #Prog .Pcon .Pc_subj dl .Pc_tList p{margin: 0;} #Prog .Pcon .Pc_infotit {font-size: 24px;} #Prog .Pcon .Pc_infotit i {width: 35px;height: 35px;line-height: 34px;} #Prog .Pcon .Pc_infosub{font-size:17px;} } @media (max-width:550px) { #Prog .Pcon {padding: 45px 20px;} #Prog .Pcon .Pc_subj{font-size: 16px; /*margin-top: 50px;*/} #Prog .Pcon .Pc_infotit{font-size: 22px;} #Prog .Pcon .Pc_subj dl dt{font-size: 19px;padding-top: 0;} #Prog .Pcon .Pc_subj dl{padding:20px 10px 10px 10px;} #Prog .Pcon .Pc_subj dl .Pc_tList{padding: 15px 18px;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr{margin-top:0;display: flex;justify-content:space-between;flex-wrap:wrap;border-top: 0;align-items: baseline;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li.head{display: none;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li{width: 100%;flex-wrap:wrap;margin-top: 2%;} #Prog .Pcon .Pc_subj dl .Pc_tList h3{font-size: 1em;} /*#Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li {border: 1px solid #ddd;border-top-color: #000;}*/ #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li p{border: none;/*border-top: 1px solid #ddd;*/ border-top:none;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li p.one{width:100%;border-top: 0;background-color: #f5f5f5;font-weight: bold;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li p.two{width: 50%;border-right: 1px solid #ddd;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li p.thr{width: 50%;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li p.fiv{width: 100%} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li p.six{width: 100%;border-right: 0;font-weight: bold;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li:nth-of-type(5) p.fiv,#Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li:nth-of-type(5) p.six{display: none;} #Prog .Pcon .Pc_subj ul.not_list{margin-top: 15px;} #Prog .Pcon .Pc_subj ul.not_list li{padding: 3px 10px;margin: 2px 0;} #Prog .Pcon .Pc_subj ul.not_list li p::before { width: 3px; height: 3px;top: 9px;} #Prog .Pcon .Pc_subj ul.not_list li p{padding-left: 10px;} #Prog .Pcon .Pc_tit p {font-size: 18px;} #Prog .Pcon .Pc_tit p.point {font-size: 26px;} #Prog .Pcon .Pc_tit p.pc_ytb span {right: -25px;} #Prog .Pcon .Pc_infotit {font-size: 21px; padding-bottom:8px} #Prog .Pcon .Pc_infotit i {width: 30px;height: 30px;line-height: 30px; transform: translateY(0px);} #Prog .Pcon .Pc_infosub{font-size:16px; margin-top:8px;} #Prog .Pc_subj.flex ul.Psubj_flex_txt {text-align: center;} #Prog .Pc_subj.flex .Pc_left{width:100%;} #Prog .Pc_subj.flex .Pc_right{margin: 0 auto;} } @media (max-width:470px) { #Prog .Pcon {padding:30px 15px;} #Prog .Pcon .Pc_subj dl .Pc_tList .table_wr li{width: 100%;margin-top: 4%;} #Prog a.applyBtn {margin-left: 0;} #Prog .Pcon .Pc_tit p.point {font-size: 24px;} #Prog .Pcon .Pc_tit p {font-size: 16px;} #Prog .Pcon .Pc_infotit {font-size: 18px;} #Prog .Pcon .Pc_infotit i {width: 25px;height: 25px;line-height: 23px; font-size:15px;} } @media (max-width:330px) { .tit-box {padding: 15px;} .tit-box h2 {font-size: 15px;} .tit-box small {font-size: 15px;} .tit-box .f_ytb {font-size: 15px;} .tit-box .f_ytb b {font-size: 15px;} .tit-box .f_ytb img {width: 20px;} h2.sb_tit {font-size: 22px;} #Prog .Pcon .Pc_subj dl dt { font-size: 17px;} #Prog .Pcon .Pc_subj dl dd { font-size: 15px;} } /* 프로그램 다이어그램 및 이미지들 */ #Prog .Pcon .Pc_subj ul.not_list .p_box {margin-left:30px; line-height: 30px;} #Prog .Pcon .Pc_subj dl .Pc_tList_4nd { padding: 30px 50px 50px;} #Prog .Pcon .Pc_subj dl .Pc_tList h3 {font-weight: 500;flex-shrink: 0;font-family: 'GmarketSansMedium', sans-serif;font-weight: normal;font-size: 24px;line-height: 1.2; color: #222;letter-spacing: 0.1em;} #Prog .Pcon .Pc_subj dl .Pc_tList .tacss {margin-top:20px;} #Prog .Pcon .Pc_subj dl .Pc_tList .tacss table td:last-child {border-right: 1px solid #e9e9e9;} #Prog .Pcon .Pc_subj dl .Pc_tList .ttcon {flex: 0 1 70%;} #Prog .Pcon .Pc_subj dl .Pc_tList .ttcon .pl_02 {font-size: 15px; margin: 20px 30px 0 0;text-align: right; font-family: 'GmarketSansMedium', sans-serif;font-weight: normal;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul {display: flex;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li {flex: 0 1 33.33%;position: relative;text-align: center;background-color: #fff; border-radius: 20px;padding: 20px;margin: 0 30px;display: flex; flex-direction: column; justify-content: center;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li h2 {font-size: 15px;font-weight: 500;color: #0098db; margin-bottom:6px;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li h3 {font-size: 14px;font-weight: 500;color: #222;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li h3 b{font-size: 17px;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li h5 {padding: 10px 0 0 0;font-size: 14px;font-family: 'GmarketSansMedium', sans-serif;color: #777; font-weight: 400;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li:after{ content: ''; position: absolute; top: 50%; right: -35px; transform: translateY(-50%); width: 9px;height: 12px; background-color:#0098db; clip-path: polygon(0 0, 0% 100%, 100% 50%); animation: vd_arrow 0.5s alternate infinite ease; } @keyframes vd_arrow{ from{right: -32px; opacity: 0.5;} to{right: -37px; opacity: 1;} } #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li:nth-last-of-type(1):after{display: none;} #Prog .Pcon .Pc_subj dl dd .pl {font-size: 15px; margin-top:10px; color: #0c93d4; text-align: center;} #Prog .Pcon .Pc_wr .Pc_subj + .Pc_subj {margin-top: 0;} .ex-wrap{position:relative; z-index:10;} .ex-wrap .ex-cont{display:flex;justify-content: space-between;position:relative;flex-wrap:wrap;} .ex-wrap .ex-cont li{width:18%;} .ex-wrap .ex-cont li:nth-child(1) .item{background-color: #0c93d4;} .ex-wrap .ex-cont li:nth-child(2) .item{background-color: #265eac;} .ex-wrap .ex-cont li:nth-child(3) .item{background-color: #6b83cf;} .ex-wrap .ex-cont li:nth-child(4) .item{background-color: #2eba94;} .ex-wrap .ex-cont li:nth-child(5) .item{background-color: #ff9900;} .ex-wrap .ex-cont .item{transition:.2s ease-out;display:flex;flex-direction:column;align-items:center; justify-content: center; padding: 20px 10px; height:100%;gap:10px;box-shadow:3px 3px 20px 0px rgba(0,0,0,0.08); transition: all .3s;} .ex-wrap .ex-cont .item .icon{ transition:.2s ease-out; } .ex-wrap .ex-cont .item .icon img {width:45px; height: 100%;} .ex-wrap .ex-cont .item .icon span{} .ex-wrap .ex-cont .item .icon span img {width:45px; height: 100%;} .ex-wrap .ex-cont .item .txt-wrap{display:flex; flex-direction:column; align-items:center; text-align:center;} .ex-wrap .ex-cont .item .txt-wrap small{color: #fff !important;} .ex-wrap .ex-cont .item .txt-wrap small{transition:.2s ease-out; } .ex-wrap .ex-cont .item .txt-wrap big{transition:.2s ease-out; font-size: 18px;color: #fff;font-weight:600;} /* 일정시간마자 알아서 hover효과 */ .ex-wrap .ex-cont > li.on .item{background: linear-gradient(130deg, rgba(82,190,197,1) 0%, rgba(0,152,219,1) 100%); box-shadow:0px 10px 20px 0px rgba(18,92,171,0.5); transform:translateY(-10px); transition: all .3s;} @media (max-width: 1340px){ .ex-wrap .ex-cont{justify-content:center; gap:30px; margin:0 auto;} .ex-wrap .ex-cont:before{display:none;} .ex-wrap .ex-cont li{width:45%;} } @media (max-width: 860px){ #Prog .Pcon .Pc_subj dl .Pc_tList_4nd { padding: 30px;} #Prog .Pcon .Pc_subj dl dd small {padding: 0;} #Prog .Pcon .Pc_subj dl .Pc_tList h3 {font-size: 20px;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul {flex-wrap: wrap;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li {flex: 0 1 100%; margin: 0;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li + li{margin-top:40px;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li:after{top: inherit; right:inherit; left: 50%; bottom:-25px; transform: translateX(-50%) translateX(-50%) rotate(90deg);} @keyframes vd_arrow{ from{bottom: -23px; opacity: 0.5;} to{bottom: -27px; opacity: 1;} } .mRsch{padding:40px 0;} .ex-wrap{padding-top:30px;} .ex-wrap .ex-cont{flex-direction:column; justify-content:flex-start; align-items:center; gap:10px;} .ex-wrap .ex-cont li{width:100%;} .ex-wrap .ex-cont .item{flex-direction:row; align-items:center; padding:20px; height:auto; justify-content:center;} .ex-wrap .ex-cont .item .txt-wrap{gap:5px; align-items:flex-start; text-align:left;} .ex-wrap .ex-cont .item .txt-wrap small{border-radius:5px; padding:5px 10px;} .ex-wrap .ex-cont .item .txt-wrap big{font-size:19px;} .ex-wrap .ex-cont .item .icon{width:50px; height:50px; background-size:45% auto !important;} } @media (max-width:500px){ .ex-wrap .ex-cont .item .txt-wrap big{font-size:15px;} #Prog .Pcon .Pc_subj dl .Pc_tList .ttcon .pl_02 {font-size: 13px;} #Prog .Pcon .Pc_subj dl .Pc_tList_4nd { padding: 0;} #Prog .Pcon .Pc_subj dl .Pc_tList .vdcon3 ul li h3 b{font-size: 15px;} } a.cl_btn{position: relative; font-size: 20px; display: inline-block; padding: 5px 20px; background: #0f49ad; border-radius: 5px; color: #fff; transition: all .3s;} a.cl_btn i{position: absolute; top: 9px; right: 12px; opacity:0; transition: all .3s;} a.cl_btn:hover{padding-right:35px; transition: all .3s;} a.cl_btn:hover i{opacity:1; transition: all .3s;} #Prog ul.img-box{position: relative; display: flex; justify-content: space-between; flex-wrap:wrap; margin-top: 25px;} #Prog ul.img-box li{border:1px solid #ddd; padding:35px;} #Prog ul.img-box.dep1 li{width:100%;} #Prog ul.img-box.dep1 li img{width:49%;} #Prog ul.img-box.dep2 li{width:49%;} #Prog ul.img-box.dep3 li{width:32.5%;} #Prog ul.img-box.dep4 li{width:24.5%;} #Prog ul.img-box li span{font-size:17px; color:#555; width:100%; display: block;} #Prog ul.img-box li img{margin:6px 0 10px; width:100%;} #Prog ul.img-box li p{font-size:24px; font-weight:700; color:#222; text-align:center;} #Prog ul.img-box li p small{font-size:.75em; font-weight:400; display:block; width:100%;} #Prog ul.img-box.dep2.aut li{width:70%} #Prog ul.img-box.dep2.aut li.mn{width:28%;} #Prog ul.img-box.dep2.aut li.mov{display:none;} @media (max-width:1080px){ #Prog ul.img-box li{padding:25px;} #Prog ul.img-box.dep2 li, #Prog ul.img-box.dep3 li, #Prog ul.img-box.dep4 li{width:49%;} #Prog ul.img-box li span{font-size:16px;} #Prog ul.img-box li img{margin:4px 0 8px; } #Prog ul.img-box li p{font-size:20px;} } @media (max-width:680px){ #Prog .Pcon .Pc_subj ul.img-box{padding:0;} #Prog ul.img-box li{padding:15px;} #Prog ul.img-box li + li{margin-top:10px;} #Prog ul.img-box.dep2 li, #Prog ul.img-box.dep3 li, #Prog ul.img-box.dep4 li{width:100%;} #Prog ul.img-box.dep1 li img{width:100%;} #Prog ul.img-box li span{font-size:15px;} #Prog ul.img-box li img{margin:4px 0 8px; } #Prog ul.img-box li p{font-size:17px;} #Prog ul.img-box.dep2.aut li{display:none; width:100% !important} #Prog ul.img-box.dep2.aut li.mov{display:block;} }