/******************************************************************************************************************************************************************************************** * Producer : FUNNYWEB * Caution : CORE 스크립트에는 URL 추적 코드가 압축되어 있으며, 파일 호출 시 해당 URL이 Google Analytics에 Referral 됩니다. Referral에 기록된 IP와 URL은 철저하게 감시하여 저작권 침해시,"대한변리사회" (응용미술저작물) 침해로 처벌 될 수 있으니 유의하시기 바랍니다. * FONT SET : NotoSansKr(100,300,400,500,700,900), celmonKr(100,200,300,400,500,700,900), Roboto(100,300,400,500,700,900), celmonHG(100,200,400,600,800,900), GongGothic(200,400,900), Noto Sans KR(100,300,400,500,700,900) * Max/Min-width : 100%/1460px - Responsive : 1903(1920) | *1460(1460) | 1297(1280) | 997(980) | 767(750) | 517(500) | 357(340) [px : +17px] * IE Hack : @media screen\0 {} *********************************************************************************************************************************************************************************************/ @charset "utf-8"; :root { --IDTcolor:#0C61D5; --IDTcolor_dark:#0453c0; --IDTcolor-darker:#0453c0; --lightgray_color:#DDDDDD; --gray_color:#444444; --deepsky_color:#34a2f7; --deepsky2_color:#048cf6; --max-width:1460px; --FS-xx-small:0.563rem; /* 9px (xx-small) */ --FS-x-small:0.625rem; /* 10px (x-small) */ --FS-mm-small:0.688rem; /* 11px - ADD. */ --FS-m-small:0.750rem; /* 12px - ADD. */ --FS-small:0.813rem; /* 13px (small) */ --FS-mm-medium:0.875rem;/* 14px - ADD. */ --FS-m-medium:0.938rem; /* 15px - ADD. */ --FS-medium:1.0rem; /* 16px (medium)*/ --FS-large:1.125rem; /* 18px (large) */ --FS-m-large:1.250rem; /* 20px - ADD. */ --FS-x-large:1.500rem; /* 24px (x-large) */ --FS-xx-large:2.000rem; /* 32px (xx-large) */ --font-size:14px; } html {padding:0; margin:0; width:100%; height:100%;} *,::after,::before {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} /** {-webkit-text-size-adjust:none;} 모바일 웹, 아이폰 사파리에서 화면회전시 폰트 확대방지 */ body {height:100%; font-family:'celmonKr', 'Roboto', 'GongGothic', 'Noto Sans KR', 'celmonHG', 'Apple Gothic', sans-serif; color:#545454; font-size:16px; font-weight:400; letter-spacing:-0.04em; line-height:1.5; font-style:normal; overflow-x:hidden; word-wrap:break-word; word-break:keep-all; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:none; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent; /*-webkit-font-smoothing: subpixel-antialiased; font-variant-ligatures:normal; font-variant-caps:normal; font-variant-numeric:normal; font-variant-east-asian:normal; font-synthesis:none; text-rendering:optimizeLegibility; -moz-font-feature-settings: 'liga', 'kern';*/} table {width:100%; border-collapse:collapse; padding:0px; border-spacing:0px;} blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, select, td, textarea, th, ul {margin:0; padding:0;} legend {overflow:hidden; visibility:hidden; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0} article, aside, footer, header, hgroup, main, nav, section {margin:0; padding:0; display:block;} dl, li, menu, ol, ul {list-style:none;} a {text-decoration:none; border:none; color:#1a1a1a;} em {font-style:normal;} fieldset {margin:0; padding:0; border:none;} legend {display:none;} button {font-family:inherit; vertical-align:top; cursor:pointer; white-space:nowrap; text-decoration:none; background:transparent; border:none; outline-style:none;} input, textarea {font-family:inherit; border:none; outline-style:none; border-radius:0; -webkit-appearance:none;} input {outline-style:none;} img {border:none; vertical-align: top;} .hide, caption {display:none;} .cboth {clear:both; width:0; height:0; font-size:0; line-height:0;} * {box-sizing:border-box;} body ::-moz-selection {background-color:var(--IDTcolor); color:#FFFFFF;} body ::-webkit-selection{background-color:var(--IDTcolor); color:#FFFFFF;} body ::-ms-selection {background-color:var(--IDTcolor); color:#FFFFFF;} body ::selection {background-color:var(--IDTcolor); color:#FFFFFF;} /* Scroll in All Layer Box */ .inBoxScroll::-webkit-scrollbar {width:8px; height:8px; border:none;} .inBoxScroll::-webkit-scrollbar-track {background:rgba(239,239,239,1); -webkit-border-radius:5px; border-radius:5px; /*-webkit-box-shadow: inset 0 0 4px rgba(255,255,255,1)*/} .inBoxScroll::-webkit-scrollbar-thumb {background:rgba(127,127,127,0.3); -webkit-border-radius:5px; border-radius:5px; /*-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.4);*/} .inBoxScroll {scrollbar-width:thin; scrollbar-color:#CCCCCC transparent;} /* Firefox scrollbar */ .inBoxScroll {scrollbar-face-color:#EEEEEE; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-highlight-color:none; scrollbar-3dlight-color:none; scrollbar-shadow-color:none; scrollbar-darkshadow-color:none;} /* Only IE */ .inBoxScroll::-webkit-scrollbar-thumb:hover {background:rgba(127,127,127,0.6); -webkit-border-radius:5px; border-radius:5px; /*-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.6);*/} /* Wide Row Scroll*/ @media screen and (max-width:997px) { .wide_scroll {display:inline-block; overflow:hidden; overflow-x:auto; padding:0px; width:100%;} } /* Common Hover */ .will-change {will-change:all; /*will-change:auto; will-change:scroll-position; will-change:contents; will-change:transform; will-change:top, left;*/} /****************************************************************************************************************************************** * [Important] Transform objects unconditionally when responsive : 2020.06.17 /******************************************************************************************************************************************/ /* It can only be viewed on mobile, not on PC */ .onlyMobile {display:none !important;} .onlyKorean {display:none !important;} @media screen and (max-width:997px) { .onlyMobile {display:block !important;} } @media screen and (max-width:997px) { .Rbr {display:block;} .Rper100 {display:inline-block !important; width:100% !important; margin:1px 0px !important; float:none !important;} /* BR */ .Rper50 {display:inline-block !important; width:calc(50% - 2px) !important; margin:1px 0px !important;} .Rper33 {display:inline-block !important; width:calc(33.33% - 2px) !important; margin:1px 0px !important;} .RM980 {display:none !important} .RPadding {padding:0px !important;} .RMargin {margin:0px !important;} } /* Table Align */ .tLeft {text-align:left !important;} .tCenter {text-align:center !important;} .tRight {text-align:right !important;} .vTop {vertical-align:top;} .vMiddle {vertical-align:middle;} .vBottom {vertical-align:bottom;} .WD100 {display:inline-block; width:100%;} .FR {float:right;} .FL {float:left;} .hide {display:none;} .hand {cursor:pointer;} .gapBar01 {display:inline-block; margin:5px 9px 0 9px; width:1px !important; height:14px; border-left:1px solid #CCC;} .nodata {width:100%; padding:50px 0 50px 0 !important; color:#858585; font-size:14px !important; font-weight:500; line-height:1.4em !important; letter-spacing:-1px !important; text-align:center; border-bottom:1px solid #DDD;} /* A class */ a {selector-dummy: expression(this.hideFocus=true); text-decoration:none; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;} a {blr:expression(this.onFocus=this.blur());} /* 세로 공백 */ .h03 {display:block; height:3px; font-size:0px; border:0;} .h05 {display:block; height:5px; font-size:0px; border:0;} .h09 {display:block; height:9px; font-size:0px; border:0;} .h10 {display:block; height:10px; font-size:0px; border:0;} .h15 {display:block; height:12px; font-size:0px; border:0;} .h20 {display:block; height:20px; font-size:0px; border:0;} .h30 {display:block; height:30px; font-size:0px; border:0;} .h50 {display:block; height:50px; font-size:0px; border:0;} /* 가로 공백 */ .w10 {display:inline-block; width:10px; font-size:0px; border:0;} .w20 {display:inline-block; width:20px; font-size:0px; border:0;} /* COL Division */ .col-10 {float:left; width:10% !important; box-sizing:content-box; box-sizing:border-box;} .col-20 {float:left; width:20% !important; box-sizing:content-box; box-sizing:border-box;} .col-30 {float:left; width:30% !important; box-sizing:content-box; box-sizing:border-box;} .col-33 {float:left; width:33.3333% !important; box-sizing:content-box; box-sizing:border-box;} .col-40 {float:left; width:40% !important; box-sizing:content-box; box-sizing:border-box;} .col-50 {float:left; width:50% !important; box-sizing:content-box; box-sizing:border-box;} .col-60 {float:left; width:60% !important; box-sizing:content-box; box-sizing:border-box;} .col-70 {float:left; width:70% !important; box-sizing:content-box; box-sizing:border-box;} .col-80 {float:left; width:80% !important; box-sizing:content-box; box-sizing:border-box;} .col-90 {float:left; width:90% !important; box-sizing:content-box; box-sizing:border-box;} .col-100 {float:left; width:100% !important; box-sizing:content-box; box-sizing:border-box;} @media screen and (max-width:980px) { .col-10 {float:none; width:100% !important;} .col-20 {float:none; width:100% !important;} .col-30 {float:none; width:100% !important;} .col-33 {float:none; width:100% !important;} .col-40 {float:none; width:100% !important;} .col-50 {float:none; width:100% !important;} .col-60 {float:none; width:100% !important;} .col-70 {float:none; width:100% !important;} .col-80 {float:none; width:100% !important;} .col-90 {float:none; width:100% !important;} .col-100 {float:none; width:100% !important;} } /* LAYOUT */ #WRAP {position:relative; margin:0 auto; width:100%; height:100%;} #CONTAINER {margin:0px auto; width:100%; padding:0; height:100%; min-height:100%;} #CONTENTS {margin:0px auto 0px auto; padding:20px 0 50px 0; /*height:100%; max-height:100%;*/} /* WRAPPER */ .wrapper {position:relative; width:100%; max-width:var(--max-width); margin-left:auto; margin-right:auto; padding:0px; box-sizing:content-box; box-sizing:border-box;} @media screen and (max-width:997px) { .wrapper {width:calc(100% - 20px);} .wrapper.wide {width:calc(100% - 0px);} } /****************************************************************************************************************************************** * HEADER - 2021.02.15 /******************************************************************************************************************************************/ .pc-header {position:absolute; top:0; left:0; width:100%; height:100px;} [id*='WRAP'] .pc-header .headerBar {transform:translateY(40px);} html .pc-header .headerBar {position:fixed; width:100%; height:100px; line-height:100px; background-color:rgba(0,0,0,0); /*background-color:rgba(0,0,0,.2);*/ transform:translateY(0px); -webkit-transition:all 1s cubic-bezier(0.215, 0.61, 0.355, 1); transition:all 1s cubic-bezier(0.215, 0.61, 0.355, 1); will-change:all; z-index:1000;} /* Header Fixed */ .pc-header .headerBar.fixed {position:fixed; transform:translateY(0); width:100%; background-color:#fff; box-shadow:0 2px 10px 0 rgba(0,0,0,.05);} .pc-header .headerBar.non_fixed {position:absolute;} .pc-header .headerBar.fixed .logo .logo_img {background-image:url(/img/common/logo.png);} .pc-header .headerBar.fixed .main_menu>a {color:#444} .pc-header .logo {margin-right:40px;} .pc-header .logo .logo_img {display:inline-block; vertical-align:middle; width:240px; height:48px; background-position:50%; background-repeat:no-repeat; background-size:contain;} .pc-header .logo .logo_img {background-image:url(/img/common/logo_white.png);} /* Main Menu */ .pc-nav {text-align:right; /*text-align:center;*/} .pc-nav .main_menu {position:relative; display:inline-block; margin-left:80px; height:100px; text-align:center; vertical-align:middle;} .pc-nav .main_menu:first-child {margin-left:0 !important;} .pc-nav .main_menu>a {display:block; position:relative; font-family:celmonHG; font-size:20px; letter-spacing:-0.5px; font-weight:800; color:#fff; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);} .pc-nav .main_menu>a:hover {text-decoration:none;} .pc-nav .main_menu .menu_line {position:relative;} .pc-nav .main_menu .menu_line:after {content:""; position:absolute; bottom:-5px; display:block; width:100%; height:2px; background-color:#0c61d5; -webkit-transform:scaleX(0); transform: scaleX(0); -webkit-transition:transform .3s; transition:transform .3s;} .pc-nav .main_menu.on .menu_line:after {-webkit-transform:scaleX(1); transform:scaleX(1);} /* [Language Change ]*/ .pc-nav.en .main_menu {margin-left:50px;} .pc-nav.cn .main_menu {margin-left:70px;} .pc-nav.ru .main_menu {margin-left:40px; width:200px; line-height:14px;} .pc-nav.mg .main_menu {margin-left:40px; width:200px; line-height:14px;} .pc-nav.en .main_menu>a {display:block; font-size:16px; letter-spacing:-0.04em; font-weight:600;} .pc-nav.cn .main_menu>a {display:block; font-family:celmonKr; font-size:20px; letter-spacing:-0.5px; font-weight:700;} .pc-nav.ru .main_menu>a {display:block; font-family:celmonKr; font-size:15px; letter-spacing:0px; font-weight:700;} .pc-nav.mg .main_menu>a {display:block; font-family:celmonKr; font-size:15px; letter-spacing:0px; font-weight:700;} .pc-nav.ru .main_menu .menu_line:after {position:relative;} /* 메뉴가 2줄 이상일때*/ .pc-nav.mg .main_menu .menu_line:after {position:relative;} /* Sub Menu */ .pc-nav .sub_menu_wrap {position:absolute; top:99px; left:50%; display:none; width:180px; -webkit-transform:translateX(-50%); transform:translateX(-50%);} .pc-nav .sub_menu {height:42px; line-height:42px; background-color:var(--IDTcolor); -webkit-transition:background-color .6s; transition:background-color .6s;} .pc-nav .sub_menu>a {display:block; font-family:GongGothic; font-size:14px; font-weight:400; color:#fff; text-decoration:none;} /* [Language Change ]*/ .pc-nav.en .sub_menu_wrap {position:absolute; top:99px; left:50%; display:none; width:300px; -webkit-transform:translateX(-50%); transform:translateX(-50%);} .pc-nav.cn .sub_menu_wrap {position:absolute; top:99px; left:50%; display:none; width:300px; -webkit-transform:translateX(-50%); transform:translateX(-50%);} .pc-nav.ru .sub_menu_wrap {position:absolute; top:99px; left:50%; display:none; width:360px; -webkit-transform:translateX(-50%); transform:translateX(-50%);} .pc-nav.mg .sub_menu_wrap {position:absolute; top:99px; left:50%; display:none; width:350px; -webkit-transform:translateX(-50%); transform:translateX(-50%);} .pc-nav.en .sub_menu, .pc-nav.cn .sub_menu, .pc-nav.ru .sub_menu, .pc-nav.mg .sub_menu {height:auto !important; line-height:18px; padding:12px 10px;} .pc-nav.en .sub_menu>a, .pc-nav.cn .sub_menu>a, .pc-nav.ru .sub_menu>a, .pc-nav.mg .sub_menu>a {display:block; font-family:celmonKr;} .pc-nav .sub_menu:hover {background-color:rgba(0,0,0,.9)} .pc-nav .sub_menu:first-child {border-top:0;} /* If there is a select menu */ .pc-nav .main_menu.select_menu {float:right; position:relative; right:0px; top:30px; width:130px; height:40px; line-height:40px; padding:0 8px 0 15px; outline:1px solid rgba(225,225,225,.3); text-align:left;} .pc-nav .main_menu.select_menu>a {font-size:14px; letter-spacing:normal; font-weight:400; color:#DDDDDD; text-decoration:none;} .pc-nav .main_menu.select_menu>a i {position:relative; display:inline-block; width:12px; height:12px; margin-left:10px;} .pc-nav .main_menu.select_menu .sub_menu_wrap {top:40px; width:132px;} .pc-nav .main_menu.select_menu .sub_menu {height:40px; line-height:40px; padding:0 15px; background-color:rgba(0,0,0,.6)} .pc-nav .main_menu.select_menu .sub_menu:hover {background-color:#2798ef;} .pc-header .headerBar.fixed i.cssIcon.bottomarrow:before {top:2px; right:0; border-width:5px 5px 5px; border-radius:2px; border-style:solid; border-color:#666 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);} .pc-header .headerBar.fixed .main_menu.select_menu {outline:1px solid rgba(225,225,225,.8);} .pc-header .headerBar.fixed .main_menu.select_menu .sub_menu {background-color:#fff;} .pc-header .headerBar.fixed .main_menu.select_menu .sub_menu:hover {background-color:#2798ef;} .pc-header .headerBar.fixed .main_menu.select_menu .sub_menu>a {color:#333;} .pc-header .headerBar.fixed .main_menu.select_menu .sub_menu:hover>a {color:#fff} @media screen and (max-width:1421px) { .pc-header .logo .logo_img {width:200px; height:50px;} .pc-nav .main_menu {margin-left:60px;} .pc-nav.en .main_menu {margin-left:20px;} .pc-nav.en .main_menu>a {font-size:15px;} } @media screen and (max-width:1312px) { .pc-nav .main_menu {margin-left:30px;} .pc-nav.en .main_menu {margin-left:10px;} .pc-nav.en .main_menu>a {font-size:13px;} .pc-nav.ru .main_menu {margin-left:30px;} .pc-nav.ru .main_menu>a {font-size:13px;} } @media screen and (max-width:1200px) { .pc-header .logo {margin-right:50px;} .pc-nav .main_menu {margin-left:30px;} .pc-nav.en .main_menu {margin-left:10px;} .pc-nav.en .main_menu>a {font-size:12px;} .pc-nav.ru .main_menu {margin-left:20px;} .pc-nav.ru .main_menu>a {font-size:13px;} } @media screen and (max-width:1120px) { .pc-header .logo {margin-right:10px;} .pc-nav .main_menu {margin-left:15px;} .pc-header .logo.en {margin-right:20px;} .pc-nav.ru .main_menu {margin-left:10px;} .pc-nav.ru .main_menu>a {font-size:12px;} } @media screen and (max-width:997px) { .pc-header {display:none;} } /******************** MOBILE *******************/ @media screen and (max-width:997px) { /* Header Fixed */ .mobile-header {position:fixed; left:0; top:0; width:100%; height:50px; line-height:50px; background-color:rgba(0,0,0,.6); -weblkit-transition:background-color .5s; transition:background-color .5s; z-index:1000;} .mobile-header.fixed {background-color:#fff; box-shadow: 0 2px 10px 4px rgba(0,0,0,.04);} .mobile-header.non_fixed {background-color:#fff; box-shadow: 0 2px 10px 4px rgba(0,0,0,.04);} .mobile-header .logo .logo_img {display:inline-block; width:150px; height:35px; margin-left:0px; margin-top:-5px; background-repeat:no-repeat; background-size:contain; vertical-align:middle;} .mobile-header .logo .logo_img {background-image:url(/img/common/logo_white.png);} .mobile-header.fixed .logo .logo_img {background-image:url(/img/common/logo.png);} .mobile-header.non_fixed .logo .logo_img {background-image:url(/img/common/logo.png);} /* Toggle Navigation */ .all_menu {position:fixed; right:0; top:0; height:0; z-index:510;} .all_menu .toggle-nav {width:100%; max-width:320px; background-color:#fff; -webkit-transition-property:-webkit-transform; -moz-transition-property:transform; -o-transition-property:transform; transition-property:transform; -webkit-transform:translateX(0); transform translateX(0); -webkit-transition-duration:0.6s; -moz-transition-duration:0.6s; -o-transition-duration:0.6s; transition-duration:0.6s} .toggle {position:absolute; right:100%; top:6px; margin:10px 5px; padding:15px 15px; background-color:transparent; cursor:pointer; z-index:20} .toggle span {position:absolute; top:0; left:0; width:22px; height:2px; background:#FFF; transition:all .3s} .toggle span:nth-child(2) {top:7px} .toggle span:nth-child(3) {top:14px} .toggle.on span {width:24px; background-color:#FFF;} .toggle.on span:nth-child(1) {top:8px;-webkit-transform:rotate(135deg)!important;-moz-transform:rotate(135deg)!important;-o-transform:rotate(135deg)!important;transform:rotate(135deg)!important} .toggle.on span:nth-child(2) {opacity:0; left:60px} .toggle.on span:nth-child(3) {top:8px;-webkit-transform:rotate(-135deg)!important;-moz-transform:rotate(-135deg)!important;-o-transform:rotate(-135deg)!important;transform:rotate(-135deg)!important} .mobile-header.on .toggle-nav {-webkit-transform:translateX(-320px); transform:translateX(-320px);} .mobile-header.fixed .toggle span {background-color:#000;} .mobile-header.non_fixed .toggle span {background-color:#000;} .mobile-header.on.fixed .toggle span {background-color:#fff;} /* Global Slide Menu */ .GSM {position: fixed; top:0; right:0; width:320px; padding:0 20px; background-color:#fff; height:100%; z-index: 700; overflow: auto; -webkit-transform: translateX(100%); transform: translateX(100%);} .mobile-header.on .GSM {-webkit-transform: translateX(0); transform: translateX(0);} .GSM .headerGSM {display:block; } .GSM .headerGSM .langArea {display:block; width:100%; margin:0px auto 15px auto; box-sizing:border-box} .m-nav .main_menu {display:block; font-size:15px; font-weight:600; letter-spacing:-0.04em; border-bottom:1px solid #EEE; padding:5px 0;} .m-nav .main_menu a {display:block; padding:0 10px; color:#555; text-decoration:none; } .m-nav .main_menu .menu_line {position:relative;} .m-nav .main_menu .menu_line:after {content: ""; position: absolute; bottom:-11px; display: block; width: 100%; height: 2px; background-color:#0c61d5; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform .3s; transition: transform .3s;} .m-nav .main_menu.on .menu_line:after {-webkit-transform: scaleX(1); transform: scaleX(1);} .main_menu em {position:relative; float:right;} .main_menu em:after {content:''; clear:both; position:absolute; transition:all 0.2s; top:15px; right:0px; width:9px; height:9px; border:2px solid #555; border-top:none; border-right:none; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:'';} .m-nav .main_menu.on em:after {transform:rotate(135deg); top:20px; border:2px solid #0c61d5; border-top:none; border-right:none;} .sub_menu_wrap {display:none;} .main_menu.on .sub_menu_wrap {display:block;} .m-nav .sub_menu {background-color:#f6f6f6; -webkit-transition:background-color .6s; transition:background-color .6s;} .m-nav .sub_menu>a {padding:15px 20px; display:block; font-size:13px; line-height:14px; font-weight:500; color:#666; text-decoration:none;} .m-nav .sub_menu:hover {background-color:rgba(0,0,0,.1)} /* DIMMER */ .mobile-header .dim {display:none;} .mobile-header .dim {position:fixed; top:0; bottom:0; width:100%; background-color:rgba(0,0,0,.7);} /* Login */ .GSM .headerGSM .loggedArea {display:block; width:100%; margin:20px auto; box-sizing:border-box} .GSM .headerGSM .loggedArea .greeting {float:left; text-align:left; width:50%; font-size:14px; font-weight:700; color:#111; letter-spacing:-1px;} .GSM .headerGSM .loginActArea {display:flex; width:100%; margin-bottom:20px;} .GSM .headerGSM .loginActArea li {float:left; width:50%; text-align:left; box-sizing:border-box;} .GSM .headerGSM .loginActArea li:last-child {float:right; text-align:right;} .GSM .headerGSM .loginActArea li a {display:inline-block; width:calc(100% - 5px); border-radius:4px; padding:0px 10px; font-size:15px; font-weight:500; height:40px; line-height:38px; letter-spacing:-1.3px; text-align:center; vertical-align:middle; cursor:pointer; text-decoration:none;} .GSM .headerGSM .loginActArea li a::after {display:inline-block; height: 1.7em; content: "";} /* Because IE */ .GSM .headerGSM .loginActArea li a:hover {-webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; -o-transition:.3s ease-out; -ms-transition:.3s ease-out; transition:.3s ease-out; transform:translateY(-5px);} .GSM .headerGSM .loginActArea li a.btnfull {background:var(--IDTcolor) !important; border:1px solid var(--IDTcolor); color:#FFFFFF !important; text-decoration:none;} .GSM .headerGSM .loginActArea li a.btnstroke {background:#FFFFFF !important; border:1px solid var(--IDTcolor); color:var(--IDTcolor) !important; text-decoration:none;} } /****************************************************************************************************************************************** * FOOTER /******************************************************************************************************************************************/ FOOTER {position:relative; z-index:1; background-color:#333; font-size:14px; font-weight:400; color:#919191; padding:40px 0 40px 0;} FOOTER:after {clear:both; content:""; display:block;} .footer_logo {text-align:left;} .footer_logo .logo_img {display:inline-block; vertical-align:middle; width:100px; height:30px; background-position:50%; background-repeat:no-repeat; background-size:contain;} .footer_logo .logo_img {background-image:url(/img/common/logo_white.png);} .sns_area {position:absolute; right:0px; top:0px} .sns_area ul > li {float:left; margin-right:3px; /*background-color:rgba(0,0,0,0.4); border-radius:4px;*/} .sns_area ul > li > a {display:block; width:40px; height:40px; text-align:center;} .sns_area ul > li > a > img {width:80%; height:80%; opacity:0.6} .sns_area ul > li > a:hover > img{opacity:1} address {width:100%; margin-top:15px; padding:0px;} address li {display:inline-block; font-size:14px; line-height:20px; text-align:left; font-style:normal; margin-right:10px;} address li a, address li em {font-family:Roboto; color:#919191} address li a:hover {color:#EEEEEE; text-decoration:none;} .copyright {display:inline-block; width:100%; margin-top:10px; letter-spacing: -0.02em; font-size:12px;} @media screen and (max-width:997px) { .footer_logo {width:100%; text-align:center;} .footer_logo .logo_img {text-align:center;} address {float:none; text-align:center;} address li {display:block; margin-right:0px; font-size:12px; margin-bottom:5px; text-align:center;} .copyright {text-align:center;} } /* Bottom Menu (이용약관 등) */ .footMenuWrap {width:100%; height:35px; margin-bottom:20px;} .footMenuWrap ul li {float:left;} .footMenuWrap ul li a {display:block; margin-right:40px; text-align:left; line-height:35px; height:35px; font-size:16px; font-weight:700; color:#888; letter-spacing:-1.3px; letter-spacing:-0.08em;} .footMenuWrap ul li:last-child a{margin-right:0px;} .footMenuWrap ul li a:hover {color:#FFF; text-decoration:none;} @media screen and (max-width:997px) { .footMenuWrap {text-align:center;} .footMenuWrap ul li {float:none; display:inline-block; width:calc(33.3333% - 25px); text-align:center; margin-left:0px;} .footMenuWrap ul li a {display:inline; margin-right:20px; border:0px; background:none; font-size:14px; letter-spacing:-0.5px;} } @media screen and (max-width:517px) { .footMenuWrap ul li {width:auto; padding:0 10px; margin:0px auto; text-align:center;} } .footMenuWrap.en, .footMenuWrap.cn, .footMenuWrap.ru, .footMenuWrap.mg {display:none;} /* Terms of Use */ .TOU:after {content:''; clear:both;} .TOU > H7 {display:inline-block; width:100%; height:40px; font-size:20px; margin-bottom:0px; font-weight:800; color:#222; border:none !important;} .TOU > H8 {display:inline-block; width:100%; font-size:17px; font-weight:900; color:#111; border-bottom:1px solid #ddd; padding:14px 0 14px 0px} .TOU > H9 {font-size:14px; font-weight:700; color:#222; line-height:24px} .TOU p {line-height:24px; font-size:14px !important; font-weight:500; letter-spacing:-0.75px; margin:0px !important;} .TOU b {color:#222;} .TOU > .strokeBox {border:5px solid #ededed; padding:20px; margin-bottom:30px} @media screen and (max-width:517px) { .TOU > H7 {font-size:16px;} } /****************************************************************************************************************************************** * List Paging - 2021.02.22 *******************************************************************************************************************************************/ .listPaging {clear:both; width:100%; margin:15px auto; text-align:center;} .listPaging ul {width:auto; text-align:center; margin:0} .listPaging li {display:inline-block; padding:0;} .listPaging a {display:inline-block; margin-right:4px; min-width:30px; height:30px; padding:0 3px; border:1px solid #333; background-color:#FFF; border:1px solid #E1E1E1; border-radius:2px; font-size:16px; color:#666; line-height:30px; text-align:center; text-decoration:none; cursor:pointer;} .listPaging a.current {background:var(--IDTcolor); border:1px solid var(--IDTcolor); font-weight:500; color:#FFF;} .listPaging a.current:hover {border:1px solid var(--IDTcolor); color:var(--IDTcolor); background:#FFF;} .listPaging a:hover {border:1px solid #999999; background:#EFEFEF; color:#000;} .listPaging a.jumpBTN {min-width:38px; padding:0 2px; font-size:14px; line-height:30px;vertical-align:1px; color:#999; font-weight:500;} .listPaging a.lastnumBTN {border-width:1px; border-style:solid; background:#FFFFFF; font-weight:700; letter-spacing:0em;} /* [[THEME_COLOR]] */ /* COL TABLE */ .simcolBL {width:100%; text-align:center; font-size:var(--FS-medium); line-height:22px; border-top:2px solid var(--IDTcolor); border-collapse:collapse; padding:0px; border-spacing:0px;} .simcolBL caption {display:none;} .simcolBL thead th {color:#111; background-color:#F4F4F4; border:1px solid #D8D8D8; margin-bottom:3px; padding:16px 10px; font-weight:600; text-align:center; border-top:1px solid #222} .simcolBL thead td {background-color:#F4F4F4; border:1px solid #D8D8D8; margin-bottom:3px; padding:15px 8px; font-weight:500; text-align:center;} .simcolBL thead th:first-child {border-left:none;} .simcolBL thead th:last-child {border-right:none;} .simcolBL thead td:last-child {border-right:none;} .simcolBL tbody th {text-align:center; background-color:#F7F7F7; border:1px solid #D8D8D8; } .simcolBL tbody th:first-child {border-left:none;} .simcolBL tbody td {position:relative; text-align:center; background:#FFF; font-size:15px; font-weight:500; border:1px solid #D8D8D8; padding:15px 15px;} .simcolBL tbody td:first-child {border-left:none;} .simcolBL tbody td:last-child {border-right:none;} .simcolBL tbody td .CIIBOX {position:initial; top:50%; margin-top: -10px; font-size:initial;} .simcolBL tbody td i {vertical-align:-3px; text-align:center} .simcolBL tfoot td {border-top:2px solid #000;} /* ROW TABLE */ .simrowBL {width:100%; text-align:center; font-size:16px; line-height:22px; border-top:2px solid #0c61d5; border-collapse:collapse; padding:0px; border-spacing:0px;} .simrowBL caption {display:none;} .simrowBL tbody th {text-align:center; background-color:#F7F7F7; border:1px solid #D8D8D8; padding:14px 10px;} .simrowBL tbody th:first-child {border-left:none;} .simrowBL tbody td {text-align:left; background:#FFF; font-size:14px; font-weight:500; border:1px solid #D8D8D8; padding:10px 8px;} .simrowBL tbody td:first-child {border-left:none;} .simrowBL tbody td:last-child {border-right:none;} .simrowBL tfoot td {border-top:2px solid #000;} /* ROW TABLE NUDE */ .simrowBL.nude {width:100%; text-align:center; font-size:16px; line-height:22px; border-top:none; border-collapse:collapse; padding:0px; border-spacing:0px;} .simrowBL.nude tbody th {position:relative; text-align:justify; background-color:#FFFFFF; border:1px solid #EEEEEE; padding:14px 10px;} .simrowBL.nude tbody th:before {content: ''; display:block; position:absolute; left:0px; top:calc(50% - 2px); width:4px; height:4px; border-radius:2px; background-color:#666;} .simrowBL.nude tbody th:first-child {border-top:none; border-left:none; border-right:none;} .simrowBL.nude tbody td {text-align:left; background-color:#FFFFFF; border-bottom:1px solid #EEEEEE; font-size:16px; font-weight:500; padding:10px 8px;} .simrowBL.nude tbody td:first-child {border-top:none; border-left:none; border-right:none;} .simrowBL.nude tbody td:last-child {border-top:none; border-right:none;} .simrowBL.nude tbody tr:last-child th {border-bottom:none;} .simrowBL.nude tbody tr:last-child td {border-bottom:none;} @media all and (max-width:997px) { .con-table {position:relative; overflow-x:hidden;} .con-table table {width:1000px;} .con-table:before {position:absolute; width:90%; margin:20px auto; padding:20px 0; font-size:14px; font-weight:500; line-height:1.2; color:#FFF; text-align:center; top:0;left:50%; -ms-transform: translate(-50%, 0%);-webkit-transform: translate(-50%, 0%);transform: translate(-50%, 0%); opacity:0.9; filter:alpha(opacity=90); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; content:'하단의 스크롤을 좌우로 드래그 하면 내용이 보입니다. \A 본 안내문은 클릭시 사라집니다.'; white-space:pre; background:var(--IDTcolor); border-radius:8px; z-index:2;} .con-table:after {content:''; position:absolute; right:0px; top:0px; width:100%; height:100%; background:rgba(0, 0, 0, .3); z-index:1;} .con-table.on:before {display:none;} .con-table.on:after {display:none;} } .nicescroll-cursors {cursor:pointer; margin-top:5px; border:3px solid var(--IDTcolor) !important; background-clip: padding-box; border-radius:3px !important;} /****************************************************************************************************************************************** * Responsive Table - 2019.09.25 : FUNNY *******************************************************************************************************************************************/ /* List */ table.RTBL {border-spacing:0; border-collapse:collapse; width:100%; font-size:15px;} table.RTBL caption {display:none;} table.RTBL tbody th {min-width:80px; min-height:40px; text-align:left; color:#333; font-weight:700; border-bottom:1px solid #e5e5e5; padding:10px 10px;} table.RTBL tbody td {line-height:20px; text-align:left; letter-spacing:-1px; padding:12px 15px; border-bottom:1px solid #e5e5e5; color:#656565; border-right:none;} table.RTBL tbody td a {display:inline-block; color:#888;} table.RTBL tbody td a:hover {color:#111;} table.RTBL tbody td i {margin:0 2px; color:#5db626;} table.RTBL th, table.RTBL td {text-align:center;} table.RTBL td span {display:block;} @media (max-width:600px){ table.RTBL colgroup {display:none;} table.RTBL td {display:block; text-align:left;} table.RTBL td:first-child {display:table-cell;} table.RTBL td:last-child {display:table-cell;} table.RTBL td span {margin:0 10px 0 0; display:inline-block; color:#333; letter-spacing:-0.08em;} table.RTBL td.noborder {border:none;} } /* View */ table.RTBV {border-spacing:0; border-collapse:collapse; width:100%;} table.RTBV caption {display:none;} /****************************************************************************************************************************************** * Sub Page Common - 2021.02.18 /******************************************************************************************************************************************/ .pathCateWrap {position:relative; width:100%; font-size:14px; color:#FFF; background-color:#0c61d5; z-index:5;} .pathCateWrap .depth-1-wrap {height:52px; line-height:52px;} .pathCateWrap .depth-1 {position:relative; float:left; min-width:200px; border-right:1px solid rgba(255,255,255,.2);} .pathCateWrap .depth-1 .text {font-weight:500; letter-spacing:-0.5px;} .pathCateWrap .depth-2-wrap {position:absolute; width:100%; display:none;} .pathCateWrap .depth-2 {height:52px; line-height:14px; padding:0 20px; background-color:#0c61d5; -webkit-transition:background-color .5s; transition:background-color .5s;} .pathCateWrap .depth-2.on, .pathCateWrap .depth-2:hover {background-color:#333;} .pathCateWrap .depth-2 a {position:relative; display:block; color:#FFF; text-decoration:none; letter-spacing:-0.5px; top:50%; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%);} .nowPage {width:100%; height:52px; line-height:52px; padding:0 35px 0 20px; text-align:left; border:none; outline:none; background-color:#0c61d5;} .nowPage i {position:absolute; top:20px; right:10px;} /* Home Icon */ .pathCateWrap .depth-1.home {position:relative; width:60px; min-width:40px; height:52px; border-left:1px solid rgba(255,255,255,.2); text-align:center;} .pathCateWrap .depth-1.home a {position:relative; display:block; width:34px; height:34px; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .pathCateWrap .depth-1.home a i {top:5px; right:11px;} @media screen and (max-width:997px) { .pathCateWrap {font-size:13px;} .pathCateWrap .depth-1-wrap {height:40px; line-height:40px; min-width:350px;} .pathCateWrap .depth-1 {min-width:140px;} .pathCateWrap .depth-2 {padding:0 10px;} .pathCateWrap .depth-1.home {width:40px; height:40px; border-left:none;} .nowPage {height:40px; line-height:40px;} .nowPage i {top:16px;} } /* Sub Visual Area */ .SVA {position:relative; height:400px; overflow:hidden;} .SVA_bg {position:relative; height:400px; background-position:center center;} .bg-overlay {position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.5); opacity:0; z-index:2; -webkit-transition:all 1s; transition:all 1s;} .SVA .bg-overlay {animation:opacityAnimation 1s .5s ease 1 forwards} .SVA_txtWRAP {position:relative; width:100%; height:100%; padding:0px; text-align:center; word-break:keep-all; z-index:10} .pageTitleWRAP {position:absolute; top:calc(50% + 0px); left:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%);} .pageTitleWRAP .pageTitle {padding:0 20px; text-align:center; opacity:0; color:#fff; font-size:36px; font-family:celmonHG; font-weight:800; letter-spacing:-1.0px;} .pageTitleWRAP .divider {position:relative; top:10px; width: 0px; height:2px; margin:0px auto 0; opacity:0; background:rgba(255, 255, 255, .7); -webkit-animation: fade 1s 0.75s linear, stretch 1s 0.4s linear;-webkit-animation-fill-mode: forwards;} .pageTitleWRAP .pageTitle.cn {font-size:36px; font-family:celmonKr; font-weight:800; letter-spacing:-1.0px;} .pageTitleWRAP .pageTitle.ru {font-size:36px; font-family:celmonKr; font-weight:800; letter-spacing:-1.0px;} .pageTitleWRAP .pageTitle.mg {font-size:36px; font-family:celmonKr; font-weight:800; letter-spacing:-1.0px;} .pageTitleWRAP .divider:before {content:""; display:block; position:absolute; left:0; top:-2.5px; width:6px; height:6px; background-color:#FFF; border-radius:3px;} .pageTitleWRAP .divider:after {content:""; display:block; position:absolute; right:0; top:-2.5px; width:6px; height:6px; background-color:#FFF; border-radius:3px;} @-webkit-keyframes fade {from {opacity:0;} to {opacity:1;}} @-webkit-keyframes stretch {from {width:0px;} to {width:100%;}} .SVA_txtWRAP .sub_character.left {position:absolute; float:left; left:0px; bottom:-100px; z-index:10} .SVA_txtWRAP .sub_character.right {position:absolute; float:right; right:0px; bottom:-100px; z-index:9} .SVA_txtWRAP .sub_character img {display:block; width:100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .sub_character {display:block; -webkit-animation:slide-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;} @-webkit-keyframes slide-top { 0% {-webkit-transform: translateY(0); transform:translateY(0);} 100% {-webkit-transform: translateY(-100px); transform:translateY(-100px);} } @keyframes slide-top { 0% {-webkit-transform:translateY(0); transform:translateY(0);} 100% {-webkit-transform:translateY(-100px); transform:translateY(-100px);} } @media screen and (max-width:997px) { .pageTitleWRAP .divider:before, .pageTitleWRAP .divider:after{display:none;} .SVA {height:215px;} .SVA_bg {height:215px; background-position:50% !important; background-size:cover;} .SVA_txtWRAP .pageTitle {font-size:16px; top:calc(50% + 15px);} .SVA_txtWRAP .sub_character.right img {float:right} .SVA_txtWRAP .sub_character img {width:50%;} } /* Efeect Lib. */ .pageTitle.on[data-effect='scaleUp'] {animation:scaleUpAnimation 1s .5s ease 1 forwards} .pageTitle.on[data-effect='scaleDown'] {animation:scaleDownAnimation 1s .5s ease 1 forwards} .pageTitle.on[data-effect='slideUp'] {animation:slideUpAnimation 1s .5s ease 1 forwards} .pageTitle.on[data-effect='slideDown'] {animation:slideDownAnimation 1s .5s ease 1 forwards} .pageTitle.on[data-effect='opacity'] {animation:opacityAnimation 1s .5s ease 1 forwards} .pageTitle.on[data-effect='sway'] {animation:swayAnimation 1s .5s ease 1 forwards; opacity:1;} .pageTitle.on[data-effect='flash'] {animation:flash .5s .5s ease 1 forwards;} .pageTitle.on[data-effect='move_opa'] {animation:move_opa .5s .5s ease 1 forwards;} .pageTitle.on[data-effect='bounce'] {animation:bounce 1s .5s ease 1 forwards;} .pageTitle.on[data-effect='slide_right'] {animation:slide_right 1s .5s ease 1 forwards;} .pageTitle.on[data-effect='slide_right_fast']{animation:slide_right_fast .5s .3s cubic-bezier(0.680, -0.550, 0.265, 1.550) 1 forwards;} /* Sub Contents */ .pageBG_Anideco {position:absolute; width:100%; z-index:-10; overflow:hidden; top:450px; left:0; animation:slide_left 1s forwards;} .pageBG_Anideco img {width:auto;} .subArticle {position:relative; width:100%; height:100%; font-size:16px; padding:80px 0px 60px 0;} @media screen and (max-width:997px) { .subArticle {font-size:14px; padding:30px 5px;} .pageBG_Anideco {top:300px;} .pageBG_Anideco img {width:100%; height:100%; min-height:100%; } } H4 {display:block; margin:25px 0 15px 0; font-size:28px; font-family:GongGothic; font-weight:900; color:#000; letter-spacing:-1.2px;} H4 .h4_sub {display:block; font-size:14px} .en H4 {font-family:celmonKr; font-weight:900;} .cn H4 {font-family:celmonKr; font-weight:900;} .ru H4 {font-family:celmonKr; font-weight:900;} .mg H4 {font-family:celmonKr; font-weight:900;} H5 {position:relative; display:block; margin:35px 0 15px 25px; font-size:22px; font-weight:600; color:#111; letter-spacing:-1.2px;} H5:before, H5:after {position:absolute; content:""; outline:0.1px solid transparent; box-sizing:content-box; -moz-box-sizing:content-box;} H5:before {background:var(--IDTcolor); border-radius:2px; width:6px; height:18px; left:-19px; top:-1px;} H5:after {background:var(--IDTcolor); border-radius:2px; width:18px; height:6px; left:-25px; top:5px; transform:rotate(0deg);} H6 {position:relative; display:block; margin:5px 0; font-size:20px; font-weight:600; color:#0c61d5;letter-spacing:-1.2px;} /* Numbering */ H6 em {position:relative; top:; display:inline-block; text-align:center; font-weight:400; line-height:32px; width:32px; height:32px; background:var(--IDTcolor); color: #fff; margin-right:15px; font-size:22px;} .ru H6 {position:relative; display:block; margin:5px 0; font-size:14px; font-weight:600; color:#0c61d5;letter-spacing:-1.2px;} H7 {display:inline-block; width:100%; height:40px; margin-bottom:15px; border-bottom:1px solid #777; font-size:20px; font-weight:500; line-height:40px; color:#222; letter-spacing:-1px;} @media screen and (max-width:997px) { H4 {font-size:22px;} } /* List Style */ .ul_style li {width:100%; padding-left:15px; position:relative; margin-bottom:5px; line-height:180%} .ul_style li:last-child {margin-bottom:0} .ul_style li:before {content: ''; display:block; position:absolute; left:5px; top:14px; width:4px; height:4px; border-radius:5px; background-color:var(--IDTcolor);} .ul_style li.nodot {padding-left:15px;} .ul_style li.nodot:before {content: ''; display:block; position:absolute; left:; top:; width:0; height:0; border-radius:0px; background-color:transparent;} .ul_style li.pointList {clear:both; width:auto; display:inline-block; margin-top:8px; padding:2px 20px 2px 15px; font-weight:700; color:#FFF; background:var(--IDTcolor); border-radius:4px 4px 20px 4px;} .ul_style li.pointList:before {content: ''; display:block; position:absolute; left:5px; top:16px; width:4px; height:4px; border-radius:5px; background-color:#FFF;} .simcolBL .ul_style {text-align:left;} .simcolBL .ul_style li {text-align:left;} .simcolBL .ul_style li:before {content: ''; display:block; position:absolute; left:5px; top:10px; width:4px; height:4px; border-radius:5px; background-color:var(--IDTcolor);} .simcolBL .ul_style li.nodot {padding-left:15px;} .simcolBL .ul_style li.nodot:before {content: ''; display:block; position:absolute; left:; top:; width:0; height:0; border-radius:0px; background-color:transparent;} .simcolBL .ul_style li.pointList {clear:both; width:auto; text-align:left !important; display:inline-block; margin-top:8px; padding:2px 20px 2px 15px; font-weight:700; color:#FFF; background:var(--IDTcolor); border-radius:4px 4px 20px 4px;} .simcolBL .ul_style li.pointList:before {content: ''; display:block; position:absolute; left:5px; top:14px; width:4px; height:4px; border-radius:5px; background-color:#FFF;} .ul_style.nodot li {padding-left:0px;} .ul_style.nodot li:before {left:0; top:0; width:0; height:0; border-radius:0px; background-color:transparent;} /* Article Composition */ .articleGroup {position:relative; display:inline-block; width:100%; margin:0 auto; font-size:18px; line-height:180%;} .articleGroup img {max-width:100%; height:auto; text-align:center;} .articleGroup > * {-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;} .articleGroup > ul {display:-webkit-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap: wrap; flex-wrap:wrap; box-sizing: border-box; flex-direction:row; align-items:auto; justify-content:space-between; align-content:start;} /*.articleGroup > ul:after {display:block; content:""; margin:15px; flex:999 999 auto;}*/ .articleGroup > ul > li > ol {list-style-position:outside; padding:10px 10px 10px 50px; color:#555; /*text-align:justify;*/ margin-bottom:10px;} .articleGroup > ul > li > ol > li {margin:5px 5px 5px 7px; list-style-type:square !important; font-size:16px; line-height:28px; letter-spacing:-1px; overflow:visible; padding:0;} .articleGroup > ul > li .decomargin_20 {margin-left:20px; padding:20px;} .boom {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .boom:hover {transform:translateY(-6px); box-shadow:0 10px 15px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.06); transition: 0.3s; -webkit-box-shadow:0 10px 15px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.06); -moz-box-shadow:0 10px 15px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.06);} @media screen and (max-width:997px) { .articleGroup {font-size:14px; line-height:160%;} .articleGroup > ul > li .decomargin_20 {margin-left:0px; padding:10px 0;} } @media screen and (max-width:500px) { .articleGroup {font-size:16px;} .articleGroup > ul > li > ol {padding:10px 10px 10px 30px;} } .articleGroup > ul.depth1 {list-style-position:outside; margin-left:30px; padding:0; word-break:break-all;} .articleGroup > ul.depth1 > li {width:100%; list-style-type:circle; margin-bottom:10px; padding:0px;} .articleGroup > ul.depth1 > li:hover{transition:none; transform:translate(0); box-shadow:none} .articleGroup > ul > li .decomargin_20 {margin-left:20px; padding:20px;} /* Animation Collection */ @keyframes ani_updown { 0% {transform:translateY(-7px);} 50% {transform:translateY(7px);} 100% {transform:translateY(-7px);} } .articleGroup a.absBtn {display:flex; align-items:center; justify-content:center; position:absolute; animation:ani_updown 3s ease infinite; right:0px; top:0px; background-color:var(--IDTcolor); height:80px; width:80px; border-radius:40px; color:#FFF; font-weight:600; text-align:center; border:2px solid var(--IDTcolor_dark)} /******************************************************************************************************************************************* * Help Ment Txt - 2019.04.18 : FUNNY *******************************************************************************************************************************************/ .HMT {font-size:16px; line-height:22px; margin:10px; padding:10px; color:#444; position:relative; z-index:2; text-align:left;} .HMT strong {font-weight:500; color:#0c61d5;} .HMT ul {list-style-position:outside; margin:0; padding:0; word-break:break-all;} .HMT li {list-style-type:disc; margin-bottom:10px;} .HMT li:last-child {margin-bottom:0px;} @media all and (max-width:997px) { .HMT {font-size:14px;} } .DOT_inTBL {font-size:14px; display:block;line-height:16px; margin:10px; padding:10px; position:relative; z-index:2; color:#414141; text-align:left;} .DOT_inTBL li {display:block; position:relative; padding-left:10px; line-height:24px; text-align:left;} .DOT_inTBL li:before {content:''; position:absolute; top:12px; left:0; right:; width:4px; height:2px; border:1px solid #444; border-radius:2px;} .txtBanner_Wrap {width:100%; margin:0 auto; clear:both; display:table;} .txtBanner_Wrap h5 {font-size:22px; margin: 30px auto 10px; color:#002D66; line-height:1.2em;} .txtBanner_Wrap .txtBanner {width:25%; float:left; margin:0;} .txtBanner_Wrap .txtBanner .inBan {margin: auto; width: 95%; margin-bottom: 2.5%; } .txtBanner_Wrap .txtBanner .inBan a {display:block; position:relative; padding:33px 26px; border:1px solid #d7d7d7; background-color:#fff; margin-left: -2.5%;} .txtBanner_Wrap .txtBanner .inBan a:hover {text-decoration:none; -webkit-transform: translateY(-5px); transform: translateY(-5px);} .txtBanner_Wrap .txtBanner .inBan a b {display: block; position: relative; margin: 0; padding: 0; margin-bottom:15px; padding-bottom: 10px; color: #0067a4; font-size: 18px; line-height: 26px; word-wrap: break-word; word-break: keep-all; text-align: left; font-weight: bold; } .txtBanner_Wrap .txtBanner .inBan a b::after{content: ""; display: block; position: absolute; bottom: 0; left: 0; margin-left: 0; width: 25px; height: 1px; background-color: #d7d7d7; } .txtBanner_Wrap .txtBanner .inBan a em {display: block; color: #333; font-size: 14px; line-height: 20px; text-align: left; } @media all and (max-width:997px) { .txtBanner_Wrap .txtBanner {width:100%;} .txtBanner_Wrap .txtBanner .inBan {width:98%;} .txtBanner_Wrap .txtBanner .inBan a {margin-left:0;} } /******************************************************************************************************************************************* * SubPage Path Menu *******************************************************************************************************************************************/ #contentWrap {position:relative;width:100%;margin:0 auto;} .snb {position:absolute;top:-30px;width:100%;height:60px;z-index:20;} .snb .allWrap {position:absolute; top:0; left:50%; width:100%; max-width:1460px; margin:0 auto; background:#07348c; -moz-box-shadow:0 10px 7px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 10px 7px rgba(0, 0, 0, 0.12);box-shadow:0 10px 7px rgba(0, 0, 0, 0.12);transition:all .3s ease;transform:translate(-50%, 0);} .snb .allWrap .snbWrap {position:relative;width:1460px;height:60px;margin:0 auto; background-color:var(--IDTcolor);} .snb.fix .allWrap {position:fixed;max-width:100%;} .snb.fix .allWrap:before {content:'';position:absolute;top:0;left:0;width:50%;height:60px; background-color:var(--IDTcolor-darker);} .snbWrap a.home {float:left; position:relative; display:block; width:60px; height:60px; background:url(/img/icon/icon_home.png) 50% 50% no-repeat; background-color:var(--IDTcolor-darker); text-indent:-9999px;} .snbWrap .snbList {padding-left:60px;} .snbWrap .snbList > li {float:left;position:relative;min-width:196px;height:60px;list-style:none; } .snbWrap .snbList > li > .currentMenu {width:100%; height:60px; border:0; background:none; text-align:left; outline:none; padding-right:50px} .snbWrap .snbList > li > .currentMenu:after {content:''; position:absolute; top:calc(50% - 6px); right:15px; width:8px; height:8px; border:2px solid #FFF; border-top:none; border-right:none; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); transition:all .3s;} .snbWrap .snbList > li > .currentMenu span {display:block; padding-left:30px; color:#fff; font-family:GongGothic; line-height:34px; font-size:15px; font-weight:400; letter-spacing:-0.5px;} .snbWrap .snbList > li.on > .currentMenu:after {-webkit-transform: rotate(135deg); transform: rotate(135deg); top:calc(50% - 4px); border-color:rgba(255, 255, 255, 0.6);} .snbWrap .snbList > li:after {content:''; position:absolute; top:0; right:0; width:1px; height:60px; background:rgba(255, 255, 255, .10);} .snbWrap .snbList > li > ul {display:none; position:absolute; top:60px; width:100%; background-color:var(--IDTcolor); list-style:none; z-index:15;} .snbWrap .snbList > li > ul > li {height:52px; line-height:14px; padding:0px;} .snbWrap .snbList > li > ul > li a {position:relative; display:block; padding:5px 20px; font-family:GongGothic; font-size:14px; color:#FFF; text-decoration:none; letter-spacing:-0.5px; top:50%; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); transition:all .3s;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;} .snbWrap .snbList > li > ul > li.on, .snbWrap .snbList > li > ul > li:hover {background-color:rgba(0, 0, 0, 0.6); transition:all .3s;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;} @media screen and (max-width:980px) { .subContainer{padding-top:0px;} .snb{position:relative;width:calc(100% - 30px);height:50px;margin:0 15px;} .snb .allWrap{width:100%; max-width:100%;left:0;transform:translate(0, 0);} .snb.fix .allWrap {position:fixed;top:50px;} .snb.fix .allWrap:before{display:none;} .snb .allWrap .snbWrap{width:100%;height:50px;} .snbWrap a.home{display:none;} .snbWrap .snbList{padding-left:0;} .snbWrap .snbList > li{width:100%;height:50px;} .snbWrap .snbList > li.pathDepth2::after{display:none;} .snbWrap .snbList > li > .currentMenu{height:50px;} .snbWrap .snbList > li > ul{top:50px;} } .snb.en .snbWrap .snbList > li > .currentMenu span, .snb.cn .snbWrap .snbList > li > .currentMenu span, .snb.ru .snbWrap .snbList > li > .currentMenu span, .snb.mg .snbWrap .snbList > li > .currentMenu span {font-family:celmonKr;} .snb.en .snbWrap .snbList > li > ul > li a, .snb.cn .snbWrap .snbList > li > ul > li a, .snb.ru .snbWrap .snbList > li > ul > li a, .snb.mg .snbWrap .snbList > li > ul > li a {font-family:celmonKr; font-size:14px;} /******************************************************************************************************************************************* * 3 Depth 탭메뉴 - *******************************************************************************************************************************************/ /*** 3 Depth Menu ***/ .depth3Wrap {position:relative; display:inline-block; width:100%; margin:10px auto 50px auto; text-align:center;} .depth3_inWrap {max-width:100%; margin:0 auto;} .depth3_TAB {display:inline-block;} .depth3_TAB li {display:inline-block; text-align:center; margin:0px 8px 10px 0} .depth3_TAB li a {display:inline-block; padding:0 20px; min-width:120px; height:50px; font-size:16px; font-weight:700; line-height:49px; color:#AAA; letter-spacing:-1px; border-width:1px; border-style:solid; border-color:var(--lightgray_color); border-radius:25px; -webkit-transform: translateZ(0); transform: translateZ(0); background:#FFF;} .depth3_TAB li a:hover {background:#F2F2F2; color:#777; -webkit-transform: translateY(-5px); transform: translateY(-5px); text-decoration:none;} .depth3_TAB li.on a {border-width:1px; border-style:solid; border-color:var(--IDTcolor-darker); background-color:var(--IDTcolor-darker); color:#FFF;} @media only screen and (max-width:997px){ .depth3Wrap {position:relative; display:inline-block; width:100%; margin:0 auto; height:auto; border-bottom:none;} .depth3_inWrap {width:100%; margin:20px auto; height:auto; padding:0px 0px;} .depth3_TAB {display:block;} .depth3_TAB li {display:inline-block; width:100%; margin:-1px 0 0 0; text-align:center;} .depth3_TAB li a {width:100% !important; height:40px; font-size:13px; line-height:39px; border-radius:0px;} .depth3_TAB li a:hover {-webkit-transform: translateY(0px); transform: translateY(0px);} .depth3_TAB li.on a {font-size:13px; line-height:39px;} } /******************************************************************************************************************************************* * MODAL LAYERPOPUP *******************************************************************************************************************************************/ /* modal layer */ .modal-fixed-pop-wrapper {display:none; overflow-y:auto; overflow-x:hidden; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);} .modal-fixed-pop-inner {position:absolute; display:table; width:100%; height:100%; text-align:center;} .modal-inner-box {position:relative; display:table-cell; vertical-align:middle;} .modal-loading {position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;} .modal-inner-content {text-align:left;} .loading {display:inline-block; width:50px; height:50px; border:8px solid rgba(255,255,255,.3); border-radius:50%; border-top-color:#fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite;} @keyframes spin { to {-webkit-transform: rotate(360deg);} } @-webkit-keyframes spin { to {-webkit-transform: rotate(360deg);} } /* Layer Popup Modal (경고 등) */ .modal{display:none;position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.7);z-index:1000;} .modal.on{display:block;} .modal .modal_inner{position:absolute;top:50%;left:50%;background-color:#fff;} .modal .modal_inner .modal_contents{position:relative;height:100%;} .modal .modal_inner .modal_contents .btn_close{position:absolute;top:0;right:0;width:56px;height:58px;background:url(/img/common/modal_close.png) no-repeat 50% 50%;overflow:hidden;text-indent:-9999px;} .modal .btn_wrap {width:100%;height:60px;overflow:hidden;} .modal .btn_wrap a {text-decoration:none; font-weight:700;} .modal .btn_wrap .button{width:100%;float:left;} .modal .btn_wrap.double .button{width:50%;} .modal_alert .modal_inner, .modal_fail .modal_inner, .modal_confirm .modal_inner{width:430px;min-height:260px;margin:-130px 0 0 -215px;} .modal_alert .modal_inner .modal_contents, .modal_fail .modal_inner .modal_contents, .modal_confirm .modal_inner .modal_contents{display:table;width:100%;height:200px;font-size:18px;font-weight:300;color:#666;line-height:28px;padding:60px 30px;word-break:keep-all;word-wrap:break-word;text-align:center;} .modal_alert .modal_inner .modal_contents .incont, .modal_fail .modal_inner .modal_contents .incont, .modal_confirm .modal_inner .modal_contents .incont {display:table-cell ;vertical-align:middle; font-weight:600; letter-spacing:-1px;} .modal_alert .modal_inner .modal_contents .incont .weight{font-weight:500;color:#333;} .modal_confirm .btn_wrap .button{width:50%;} .modal.modal_verticalFixed .modal_inner{top:10%;bottom:10%;} .modal.modal_verticalFixed .modal_inner .contents_wrap{overflow-y:auto;} /* button */ .button{display:inline-block;width:196px;height:60px;line-height:60px;background-color:#fff;font-size:16px;color:#666;text-align:center;} .button.btn_solid{background-color:var(--IDTcolor);line-height:60px;color:#fff;} .button.btn_line{border:1px solid #ddd;line-height:58px;} .button.btn_gdline{border:1px solid #b39579;color:#b39579;} .button.btn_gd{background-color:#b39579;color:#fff;} .button.btn_sm{height:50px;line-height:48px;} .button.btn_lg{height:70px;line-height:68px;} .button.btn_solid.disable{background-color:#999;color:rgba(255,255,255,.5);} .button.btn_solid.disable i{opacity:.5;} .errorBox1, .messageBox1 {position:relative; font-size:20px; text-align:center; color:#F00;} .errorBox2, .messageBox2 {position:relative; font-size:20px; text-align:center; color:#0373b8;} /* modal layer content */ .footer-modal-content {position:relative; width:1000px; margin:20px auto; background-color:#fff;} .footer-modal-content > h1 {height:60px; line-height:60px; font-family:GongGothic; font-size:24px; font-weight:900; letter-spacing:-1px; text-align:center; padding:0; color:#FFF; background-color:var(--IDTcolor);} .footer-modal-content > p {/*text-align:center; color:#fff; opacity:0.5;*/ margin-top:10px;} .footer-modal-content img {width:100%;} .modal-close-btn {position:absolute; top:5px; right:10px; color:#fff; font-size:38px;} .modal-close-btn > i {font-size:inherit} .modal-close-btn > i:hover {color:#000} /* 개인정보, 이용약관 등 */ .footer-inner-box {padding:30px} .footer-inner {padding:20px; min-height:200px; max-height:600px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; line-height:20px;} @media all and (max-width:997px){ .footer-modal-content {width:94%;} } /* chatbot */ .iotalk-chat-wrap { position: fixed !important; left: -360px; width: 360px !important; min-height: 380px !important; max-height: 684px !important; height: 100% !important; background: transparent !important; z-index: 1000000000 !important; overflow: hidden !important; border-radius: 5px !important; } .iotalk-chat-wrap.on { display: block !important; left: auto !important; right: 14px; bottom: 14px; box-shadow: rgba(81, 99, 120, 0.3) 0px 6px 60px 0px; /* animation: 2s ease-out 0s 1 normal none running fXAEQw !important; */ } .iotalk-chat { width: 100% !important; height: 100% !important; border: 0; visibility: visible; } @media screen and (max-height: 610px) and (min-height: 400px) { .iotalk-chat-wrap { height: 95vh !important; } .iotalk-chat { height: 95vh !important; } }