/*# sourceURL=http://deutschkultur.iceserver.co.kr/theme/prix/css/layout.css?ver=2022.06.23-11:20:40 */ /*@ sourceURL=http://deutschkultur.iceserver.co.kr/theme/prix/css/layout.css?ver=2022.06.23-11:20:40 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); /*[s] Reset Css */ html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none; word-break: keep-all; position:relative; padding: 0; font-size: 0.625em;} input,button,textarea{} input[type=submit],input[type=image],input[type=button],button,a{cursor: pointer; text-decoration: none;} img,video,audio,object,embed,iframe{max-width:100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,legend{margin:0;padding:0} fieldset,img,abbr,acronym{border:none} fieldset{display:block} ol,ul{list-style:none outside} h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,th,var{font-size:100%;font-weight:normal} hr,legend,caption,hr{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-1000em} img{ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; } body,th,td,input,select,textarea,h2,h3,h4,h5,address,code{font-family:'Pretendard', sans-serif; font-style:normal; font-weight:normal; font-size: 1.6rem; color:#666;} ul>li>a { text-decoration:none; } a {color: #333; text-decoration: none;} table { border-collapse: collapse; } textarea {box-sizing: border-box; resize: none;} select {-webkit-border-radius: 0; -moz-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;} input,select,textarea,strong,em,p,h1,h2,h3,h4,span,td,button,th,li,a,i,b {font-style:normal; margin: 0; } ul { margin: 0;padding: 0;list-style: none;} img {max-width:100%;} button {cursor: pointer;} .clear:after {content: ""; display: block; clear: both;} html.scrollHidden, body.scrollHidden { overflow: hidden !important; } .wrap1400 {max-width: 1420px; width: 100%; padding: 0 10px; margin: 0 auto;} /********************************************/ #hd {position: relative;} .sound_only, #hd_h1, #skip_to_container, #hd_login_msg {display: none;} /*[s] Transition Style */ #header, #header .gnbBg, #header .gnbBg:before, #header h1, #header h1>a, #header h1>a img, #header .mMenu, #header .mMenu>span, #header .mMenu:before, #header .mMenu:after, #header #gnb:after, #header #gnb:before, #header #gnb>li>a:before, #header #gnb>li>a i:before, #header #gnb>li>a i:after, #header #gnb>li, #header #gnb a, #header #gnb>li>a>span:before, #header #gnb .gnbSub>li>a, #header #gnb>li>a em, #header #gnb>li>a em:after, #header #gnb>li>a em:before, #header #pcMenu, #header #pcMenu:before, #header #pcMenu .bg, #header #pcMenu #list:before, #header #pcMenu #list>li, #header #pcMenu #list>li>a, #header #pcMenu #list>li>a i, #header #pcMenu #list>li>a>span:before, #header #pcMenu #list .gnbSub>li>a, #header .utill .appDown, #header .language:before, #header .tSchArea, #header .tSchArea .tSch:before, #header .tSchArea .tSch:after, #header .tSchArea .tSch_in, .menuLayer .gnb>li>a, .menuLayer .gnb>li>a i, .menuLayer .gnb>li>a i:after, .menuLayer .gnb>li>a i:before, .menuLayer .gnb .gnbSub>li>a, .quickWrap, #snb #nav>li>a, #snb #nav>li>a i, #snb #nav>li>a i:after, #snb #nav>li>a i:before, #snb #nav .lnbSub>a, #snbPc .inConts a, #snbMobile>a i, #snbD3 .inConts a, #snbD3 .inConts a>span:before, #container.portrait #snb #nav>li>a, #container.portrait #snb #nav>li .d3>li>a{transition: all .3s ease-out; transform-origin: 50% 50%;} a.goTop, a.goTop:before{transition: all .5s ease-out;} .menuLayer{transition: all .5s ease-in-out; transform-origin: 50% 50%;} /*[e] Transition Style */ /*[s] Bace Css */ :root, html{font-size: 10px} :root { /* color */ --point : #ff5827; --event__color--point : #035ab6; --event__color--end : #b3b3b3; /* font size */ --f__size--12 : 1.2rem; --f__size--13 : 1.3rem; --f__size--14 : 1.4rem; --f__size--15 : 1.5rem; --f__size--16 : 1.6rem; --f__size--17 : 1.7rem; --f__size--18 : 1.8rem; --f__size--19 : 1.9rem; --f__size--20 : 2rem; --f__size--21 : 2.1rem; --f__size--22 : 2.2rem; --f__size--23 : 2.3rem; --f__size--24 : 2.4rem; --f__size--36 : 3.6rem; /* min size */ --min__size : 140rem; } .pVar, .ptVar{display:block;} img.pVar, img.ptVar{display:inline-block;} th.pVar, td.pVar{display:table-cell;} .tVar, .mVar, .tmVar, .br_t{display:none;} .br_p{} .tal{text-align: left !important;} .tac{text-align: center !important;} .tar{text-align: right !important;} html.hide{height:100vh; overflow:hidden;} .inConts{width:100%; max-width:146rem; margin:0 auto; padding:0 3rem; position: relative;} #wrap{width:100%; margin:0 auto; background-color:#fff; position:relative; overflow:hidden;} #wrap *{letter-spacing:-0.04em; word-break:keep-all; word-wrap:break-word; box-sizing: border-box;} /*[e] Bace Css */ /*[s] HEADER */ #progressBar{width:0%; height:3px; background-color:var(--point); font-size:0; line-height:0; position:fixed;left:0; top:0; z-index:11;} #header{width:100%; background-color: transparent; font-size:0; line-height:0; position: absolute; z-index:7;} #header .gnbBg{width: 100vw; height:0; background-color:#fff; border-top:1px solid #ddd; display: block; position:absolute; left:50%; top:100%; transform: translateX(-50%); opacity:0; overflow:hidden;} #header .inConts{position: relative; max-width:1460px; height: 11rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between;} #header h1{ display:inline-block;} #header h1>a{display:inline-block; position: absolute; opacity: 1; top: 50%; transform: translateY(-50%); left: 3rem;} #header h1>a:last-of-type {opacity: 0;} #header h1>a img{width:22.3rem;} #header #pcMenu, #header #pcMenu #list, #header #pcMenu #list>li{height:100%;} #header #pcMenu #list>li>a{height:100%;} #header #pcMenu{text-align: center; position: absolute; left:245px; right:160px; top:0; z-index:6; display:block;} #header #pcMenu #list{display:inline-block;} #header #pcMenu #list>li{padding:0 4rem; display:inline-block; vertical-align: top; position: relative;} #header #pcMenu #list>li>a{width:100%; font-weight: 700; font-size:20px; line-height:1; color: #fff; text-align: center; display:table; box-sizing: border-box; position: relative; z-index:3;} #header #pcMenu #list>li>a>span{display:table-cell; vertical-align:middle;} #header #pcMenu #list .gnbSub{margin-top:-16px; background-color: var(--point); text-align: center; box-sizing: border-box; display:none; position: absolute; left:46px; top:100%; white-space: nowrap; z-index:6; padding: 20px 17px;} #header #pcMenu #list .gnbSub>li{padding:0 15px 0 16px; display:block; vertical-align: top; position: relative;} #header #pcMenu #list .gnbSub>li>a{width:100%; height:36px; font-size:16px; line-height:1.4; color:#f0b986; text-align:center; display:table;} #header #pcMenu #list .gnbSub>li>a>span {display:table-cell; vertical-align: middle; word-break:keep-all; word-wrap:break-word;} #header #pcMenu #list>li:hover>a, #header #pcMenu #list>li.oPage>a{color: var(--point);} #header #pcMenu #list .gnbSub>li:hover>a, #header #pcMenu #list .gnbSub>li.oPage>a{color: #fff;} #header #pcMenu #list>li:hover>a>span:before, #header #pcMenu #list>li.active>a>span:before, #header #pcMenu #list>li.oPage>a>span:before{width: 100%; margin-left:0; left: 0; opacity: 1} #header .mMenu{width:3.4rem; height:2.9rem; background-color:transparent; border:none; font-size:0; line-height:0; position: absolute; right:0; top:50%; transform: translateY(-50%); z-index:9; cursor: pointer; overflow:hidden; box-sizing: border-box;} #header .mMenu>span, #header .mMenu:before, #header .mMenu:after{content: ""; width: 100%; height: 0.3rem; background-color:#fff; display: inline-block; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);} #header .mMenu>span{width:50%; margin-top:0; background-color: var(--point); left:auto; right:0; transform: translate(0, -50%);} #header .mMenu:before{width:75%; margin-top:-1.2rem; left:auto; right:0; transform: translate(0, -50%);} #header .mMenu:after{margin-top:1.3rem;} #header .mMenu.open>span{width:100%; opacity:0;} #header .mMenu.open:before{width:100%;margin:-0.1rem 0 0 -1.7rem; transform:rotate(45deg);} #header .mMenu.open:after{margin:-0.1rem 0 0 -1.7rem; transform:rotate(-45deg);} #header .language{width:80px; margin-top:-20px; background-color: var(--point); border:2px solid #fff; display:inline-block; vertical-align: top; box-sizing: border-box; overflow: hidden; cursor: pointer; position: absolute; right:30px; top:50%; border-radius:18px;} #header .language:before{content: ""; width: 0; height: 0; border-top:5px solid #ededed; border-bottom:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent; position: absolute; right:14px; top:15px;} #header .language a{width:100%; height:34px; padding:0 23px 0 13px; font-weight: 400; font-size:16px; line-height:1.2; color: #fff; display:table; table-layout: fixed; box-sizing: border-box;} #header .language a>span{display:table-cell; vertical-align: middle;} #header .language ul{display:none;} #header .language ul>li{border-top:1px solid #ccc;} #header .language ul>li>a{color: #fff;} #header .language.open:before{transform:rotate(180deg);} #header .utill{position: relative; white-space: nowrap;} #header .utill .appDown{width:13rem; height:4.2rem; background-color: #000; font-size:1.7rem; line-height:4.2rem; color: #fff; text-align: center; position: relative; border-radius:99px; display:inline-block; vertical-align: top;} #header .tUtill{position: absolute; right:95px; top:0; display:inline-block; z-index:4;} #header .tUtill>a{font-weight: 300; font-size:15px; line-height:111px; color: #fff; letter-spacing: -0.04em; display:inline-block; vertical-align: top; position: relative;} #header .tUtill>a+a{margin-left:21px;} #header .tUtill>a+a:before {content: ""; width:1px; height: 10px; background-color:rgba(255,255,255,0.5); display:inline-block; position:absolute; left:-11px; top:50%; transform: translateY(-50%);} #header .tUtill.on{right:64px;} /*subPage*/ /* .subPage #header{background-color: #fff;} .subPage #header #pcMenu #list>li>a {color: #111} .subPage #header .mMenu:before, .subPage #header .mMenu:after {background: #111;} */ /**/ /*quickWrap*/ .quickWrap {position: fixed; top:0; z-index:13; right:-58rem; background: #fff;} .quickWrap.open {right:-0%;} .quick {position: relative;} .quick__inner {/* position: absolute; */top: 0;right: -999px;width: 58rem; padding: 7rem 8rem 3rem;height: 100vh; overflow: auto;} .quick__txt b{display: block; font-size: 2.6rem; color: #111;} .quick__txt strong {display: block; font-size: 4rem; color: #ff5827; padding: 0.5rem 0;} .quick__txt p {font-size: 1.8rem; font-weight: 400; color: #666666;} .quick__form {border: 1px solid #ddd; border-left: none; border-right: none; margin-top: 4rem; padding: 4rem 0; } .quick__form b {font-size: 2.6rem; color: #111;} .quick__writ {margin: 0.5rem 0 3rem;} .quick__writ input {width: 100%; border: 1px solid #ddd; border-radius: 3px; height: 40px; margin-top: 1rem; padding: 0 1rem;} .quick__form label {display: block;} .quick__form label +label {margin-top: 1rem;} .chkWrap label {display: flex; cursor: pointer; } .chkWrap label span {position: relative; display: inline-block; width: 20px; height: 20px; border: 1px solid #999; border-radius: 50%;} .chkWrap label span::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; background: #ff5827; border-radius: 50%; opacity: 0; transition: .3s ease;} .chkWrap label input:checked + span::before {opacity: 1;} .chkWrap label p {font-size: 1.8; font-weight: 400; color: #333333; padding-left: 1rem;} .quick__form button {width: 100%; height: 5rem; background: #ff5827; color: #fff; border: none; border-radius: 3px; margin-top: 3rem;} .quick__link {display: flex; justify-content: space-between; text-align: center;} .quick__link a {padding: 4rem 0;} .quick__link a p {font-size: 1.8rem; font-weight: 600; color: #111; margin-top: 1rem;} .quick__menu {position: absolute;top: 20%;left: -11rem;} .menu__open {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; width: 11rem; height: 12rem; font-size: 1.8rem; font-weight: 600; color: #333; text-align: center; background: #fff;} .menu__open:nth-child(1) { border-radius: 5px 0 0 0 ; cursor: pointer; background: #ff5827; color: #fff;} .menu__open:nth-child(2) {border: 1px solid #ddd; border-right: 1px solid #ddd;} .menu__open:nth-child(3) {border-radius: 0 0 0 5px ; border: 1px solid #ddd; border-top: none;} .quick__inner.open {right: 0;} .quick__bg {top: 0 ; left: 0; background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; z-index: 12; display: none; } .quick__bg.open {display: block;} .quickWrap.none {display: none;} .hiding {position: absolute; top: 50%; left: -2.5rem; transform: translateY(-50%); cursor: pointer; } .quick__menu.close {left: 0; } /*quickWrap*/ /*hamburger_menu*/ .hamburger_menu {width: 100%; position: absolute; top: 0 ; left: 0; text-align: center; background: rgba(0,0,0,0.8); display: none; z-index: 14;} .hamburger_menu.open {display: block;} .hamburger_menu .wrap1400 {position: relative;} .hamburger_list {display: flex; justify-content: space-between; height: 100vh; } .hamburger_list > li {width: calc(100%/5); padding-top: 11rem;} .hamburger_list > li + li {border-left: 1px solid rgba(255,255,255,0.5);} .hamburger_list > li a {display: inline-block; color: #dfe0e8; font-weight: 800; font-size: 2.8rem;line-height: normal; margin: 2rem 0; } .hamburger_list .gnbSub.d2 li a { line-height: normal; color: rgba(255,255,255,0.5); font-size: 1.8rem; font-weight: 400; transition: .3s ease;} .hamburger_list .gnbSub.d2 li a:hover {color: #fff;} .hamburger_close{ top:60px; right: -20px; position:absolute; width: 4.4rem; height: 4.4rem;background-color: transparent;border:none;font-size:0;line-height:0;display:inline-block;cursor: pointer;z-index:10;overflow:hidden;transform: translate(-50%, -50%) scale(0.8);} .hamburger_close>span, .hamburger_close:before, .hamburger_close:after{content: ""; width: 100%; height: 0.2rem; background-color: #fff; display: inline-block; position:absolute; right:0;} .hamburger_close>span, .hamburger_close:before, .hamburger_close:after{background-color: #fff;} .hamburger_close:after{width: 100%;margin-top: -0.95rem;transform:rotate(45deg);bottom: 2.2rem;} .hamburger_close:before{margin-top: -0.25rem;transform:rotate(-45deg);width:100%;top: 2.2rem;} .hamburger_close>span{margin-left:0; opacity: 0;} .mMenu.none {opacity: 0;} /**/ .menuLayer{width:100%; background-color: rgba(0,0,0,0.7); font-size:0; line-height:0; position: fixed; top:6.875rem; bottom:0; z-index:12; overflow:hidden; overflow-y:auto;} .menuLayer>.language{width:100%; background-color: #fff; border-top:1px solid #ccc; display:table; table-layout: fixed;} .menuLayer>.language>a{height:8rem; font-size:2.2rem; line-height:1.2; color: #434343; text-align: center; display:table-cell; vertical-align: middle; position: relative; box-sizing: border-box;} .menuLayer>.language>a>span{padding-left:3.25rem; background-repeat:no-repeat; background-position: left center; background-size:2.625rem 1.75rem;} .menuLayer>.language>a.ko>span{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/flag_ko.gif");} .menuLayer>.language>a.en>span{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/flag_en.gif");} .menuLayer>.language>a+a{border-left:1px solid #ccc} .menuLayer>.language>a.active{font-weight: 500; color: var(--point);} .menuLayer .gnb{background-color: #fff; border-top:1px solid #ccc;} .menuLayer .gnb>li{border-bottom:1px solid #ccc; position: relative;} .menuLayer .gnb>li>a{width:100%; height:9rem; padding:0 7rem 0 3rem; font-weight: 500; font-size:2.2rem; line-height:1.4; color: #1b1b1b; display:table; position: relative; box-sizing: border-box;} .menuLayer .gnb>li>a>span{display:table-cell; vertical-align:middle; position: relative;} .menuLayer .gnb>li>a i{width:2.6rem; height:1.4rem; margin-top:-0.7rem; position: absolute; right:3rem; top:50%; display:inline-block;} .menuLayer .gnb>li>a i:after, .menuLayer .gnb>li>a i:before{content: ""; width:2rem; height: 0.2rem; margin:0 0 0 0; background-color: #aaa; display: block; position:absolute; top:50%;} .menuLayer .gnb>li>a i:after{right:1.3rem; transform:rotate(45deg);} .menuLayer .gnb>li>a i:before{right:0px; transform:rotate(-45deg);} .menuLayer .gnb .gnbSub{background-color: #f7f7f7; display:none;} .menuLayer .gnb .gnbSub>li{border-top:1px solid #ccc;} .menuLayer .gnb .gnbSub>li>a{width:100%; height:7.4rem; padding-left:3rem; font-weight: 400; font-size:2rem; line-height:1.3; color: #666; text-align: left; letter-spacing: -1px; display:table; position: relative; box-sizing: border-box;} .menuLayer .gnb .gnbSub>li>a>span{display:table-cell; vertical-align:middle; position: relative;} .menuLayer .gnb>li.active>a, .menuLayer .gnb>li.oPage>a{background-color: var(--point); color: #fff;} .menuLayer .gnb>li.active>a em, .menuLayer .gnb>li.oPage>a em{color: #fff;} .menuLayer .gnb>li.active>a i, .menuLayer .gnb>li.oPage>a i{transform:rotate(-180deg);} .menuLayer .gnb>li.active>a i:after, .menuLayer .gnb>li.oPage>a i:after, .menuLayer .gnb>li.active>a i:before, .menuLayer .gnb>li.oPage>a i:before{background-color:#fff !important;} .menuLayer .gnb>li.one>a i{transform:rotate(-90deg);} #menuArea{right:-100%;} #menuArea.open{right:0;} /*[e] HEADER */ /*[s] SUB */ #sVisual{width:100%; height:50rem; background-repeat: no-repeat; background-position: center bottom; background-size: cover; font-size:0; line-height:0; overflow:hidden; position: relative; display:table; table-layout: fixed;} #sVisual h2{text-align: center; display:table-cell; vertical-align: middle;}/* text-shadow:0px 0 10px rgba(0,0,0,0.5); */ #sVisual h2>*{display:block; line-height:1; color: #fff; position: relative;} #sVisual h2>strong{font-weight: bold; font-size:5.4rem;} #sVisual h2>span{padding-top:2.5rem; font-size:1.8rem;} #sVisual.bg_1{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_01.jpg");} #sVisual.bg_2{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_02.jpg");} #sVisual.bg_3{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_03.jpg");} #sVisual.bg_4{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_04.jpg");} #sVisual.bg_5{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_05.jpg");} #sVisual.bg_6{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_06.jpg");} #sVisual.bg_7{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_01.jpg");} #sVisual.bg_8{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_01.jpg");} #sVisual.bg_9{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_01.jpg");} #sVisual.bg_10, #sVisual.bg_11, #sVisual.bg_12, #sVisual.bg_99{background-image:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/img_sVisual_01.jpg");} /* #snb{width:1px; height:1px; font-size:0; line-height:0; position: fixed; left:-1px; top:-1px; z-index:-999; overflow:hidden; opacity: 0;} */ #snb{ background-color: #fff; border-bottom:1px solid rgba(191,191,191,0.6); position: relative; z-index:6;} #snb:before{content: ""; width: 25%; height: 100%; background-color: var(--point); display: inline-block; position:absolute; left: 0; top:0px;} /* #snb #nav{width:100%; background-color: #fff; border-left:1px solid rgba(191,191,191,0.6); position: relative; z-index:2; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: flex-start;} #snb #nav>li{flex:0 1 18%; border-top:1px solid rgba(191,191,191,0.6); border-right:1px solid rgba(191,191,191,0.6); display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; position:relative;} #snb #nav>li>a{width:100%; height:5rem; padding:0 5rem 0 2rem; font-weight: 300; font-size:1.5rem; line-height:1.2; color:#666; display:table; position: relative;} #snb #nav>li>a>span{padding:0.5rem 0; display:table-cell; vertical-align: middle; word-break:break-all !important;} #snb #nav>li>a i{width:1.5rem; height:1rem; margin-top:-0.5rem; position: absolute; right:2rem; top:50%; display:inline-block;} #snb #nav>li>a i:after, #snb #nav>li>a i:before{content: ""; width:1rem; height: 0.2rem; margin:0 0 0 0; background-color: #b2b2b2; display: block; position:absolute; top:50%;} #snb #nav>li>a i:after{right:0.6rem; transform:rotate(45deg);} #snb #nav>li>a i:before{right:0px; transform:rotate(-45deg);} #snb #nav>li.home{flex-basis: 6rem; max-width:6rem;} #snb #nav>li.home>a{width:100%; height:5rem; padding:0; background:url("http://deutschkultur.iceserver.co.kr/theme/prix/css/../img/icon_home.png") no-repeat center center; font-size:0; line-height:0;} #snb #nav>li.home>a:before{content: ""; display:none;} #snb #nav>li:last-child{flex-basis: 25%;} #snb #nav>li:last-child>a{font-weight: 400; color: #333;} #snb #nav .lnbSub{background-color: #fff; border:1px solid rgba(191,191,191,0.6); position:absolute; left:-1px; right:-1px; top:100%; z-index:3; display:none;} #snb #nav .lnbSub>a{width:100%; height:5rem; padding:0px 2rem; font-weight: 300; font-size:1.5rem; line-height:1.4; color:#717171; display:table;} #snb #nav .lnbSub>a>span{padding:0.5rem 0; display:table-cell; vertical-align: middle; word-break:break-all !important;} #snb #nav .lnbSub>a+a{border-top:1px solid rgba(191,191,191,0.6);} #snb #nav .lnbSub>a:hover, #snb #nav .lnbSub>a.active{background-color: #f0f0f0; color: #333;} #snb #nav .lnbSub>a.active{font-weight: 400;} */ /* #snb #nav>li.active>a i{transform:rotate(180deg);} */ #pageTop{padding:6rem 0 8rem; font-size:0; line-height:0; text-align: center; position: relative;} #pageTop>h3{padding-top:7.5rem; font-weight: bold; font-size:4.5rem; line-height:1; color: #1b1b1b; text-align: center; position: relative;} #pageTop>p{padding-top:3rem; font-weight: 400; font-size:2rem; line-height:1; color: #333;} #container{width:100%; max-width:146rem; min-height:400px; margin:0 auto; padding:0 3rem 12rem; background-color: #fff; position: relative; box-sizing: border-box;} .fullBox{width:100vw; margin-left:-50vw; font-size:0; line-height:0; text-align: center; position: relative; left:50%; display:block;} .fullBox.gray{background-color: #f7f7f7;} /*[e] SUB */ @media only screen and (min-width : 1025px){ #snb .inConts {text-align: center; padding: 0;height: 5rem;position: absolute;top: -210px;left: 50%;transform: translateX(-50%);} #snb #nav{position: relative;margin: 0 auto;/* width: 100%; *//* max-width: 40rem; *//* min-width: 36rem; */ display: inline-flex; align-items: center;justify-content: center;flex-wrap: nowrap;height: 100%;background: transparent;overflow: hidden;border: none;z-index: 1;border-radius: 30px;} #snb #nav::before {content: ""; position: absolute; width: 100%; height: 100%; border-radius: 30px; top: 0; left: 0; filter: blur(20px); z-index: 0; background: rgba(255,255,255,0.2) ;} #snb #nav>li>a>span{font-size: 1.5rem; font-weight: 400; color: #fff;} #snb #nav>li:last-of-type>a>span{font-size: 1.5rem; font-weight: 700; color: #fff;} #snb #nav>li.home{padding: 0;height: 100%; max-width: none; flex-basis:auto} #snb #nav>li.home>a{display: block; text-indent: -9999px; width: 100%;height: 100%;background: url("http://canamiracle.iceserver.co.kr/images/sub/subtop__home.png") no-repeat center; } #snb #nav .lnbSub{display: none;} #snb #nav>li{ border: none; flex: none; text-align: center; flex-basis: auto; min-width: 8rem; padding: 0 2rem;} #snb #nav>li>a{padding: 0 1rem;} #snb #nav>li>a i{display: none;} #snb #nav>li {position: relative;} #snb #nav>li::before {position: absolute; content: ""; top: 50%; left: 100%; transform: translateY(-50%); width: 6px; height: 10px; background: url("/images/sub/subtop__arr.png") no-repeat center; } #snb #nav>li:last-of-type:before {display: none;} } /*[s] FOOTER */ #footer{width:100%; padding:0 0 8rem; background-color: #000; font-size:0; line-height:0; position: relative;} #footer .footTop{} #footer .footTop .footTop_re{width:43%; display:inline-block; vertical-align: top;} #footer .footTop .footTop_re .tit{font-size:1.8rem; line-height:1; color: #aaa;} #footer .footTop .footTop_re .text{padding-top:2rem; white-space: normal;} #footer .footTop .footTop_re .text>p{} #footer .footTop .footTop_re .text>address, #footer .footTop .footTop_re .text>p>span{padding-right:2rem; font-style: normal; font-size:1.6rem; line-height:2.4rem; color:#878787; display:inline-block; vertical-align: top; position: relative;} #footer .footTop .footTop_re .text>p>span+span{} #footer .footTop .footTop_re .text>address{padding-top:1rem;} #footer .footTop .footTop_re .text>address>a{color: #aaa;} #footer .footTop .footTop_re .info{padding-top:2.5rem;} #footer .footTop .footTop_re .info>dl{font-weight: 300; font-size:1.6rem; line-height:2.4rem; color: #878787; display: flex; justify-content: flex-start;} #footer .footTop .footTop_re .info>dl>dt{min-width:8rem; font-weight: 400; color: #aaa;} #footer .footTop .footTop_re .social{margin-top:3rem;} #footer .footTop .footTop_re .social>a{margin-right:1.2rem; display:inline-block; vertical-align: top;} #footer .footTop .footTop_re ul.ps{padding-top:1.5rem;} #footer .footTop .footTop_re ul.ps>li{padding-left:1rem; font-weight: 300; font-size:1.5rem; line-height:2.9rem; color: #878787; position: relative;} #footer .footTop .footTop_re ul.ps>li:before{content: "*"; position:absolute; left: 0; top:0px;} #footer .footTop .footTop_re + .footTop_re{width:57%;} #footer .link{padding-top:3rem;} #footer .link>a{margin-right:3.5rem; font-weight: 400; font-size:1.6rem; line-height:2.8rem; color: #878787; display:inline-block; vertical-align: top; position: relative;} #footer .link>a+a:before{content: ""; width: 1px; height: 1.2rem; background-color: #414141; display: inline-block; position:absolute; left: -1.8rem; top:57%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} #footer .link>a.point{color: #cbcbcb;} #footer .banner{padding-top:2.5rem; display: flex; flex-wrap: wrap; justify-content: flex-start;} #footer .banner>dl{margin:3rem 5rem 0 0; display: flex; justify-content: flex-start;} #footer .banner>dl>dd{padding-left:1.2rem; font-size:1.6rem; line-height:2rem; color: #aaa;} #footer .banner>dl img{height:4.1rem;} a.goTop{width:50px; height:50px; background-color: #acacac; font-size:0; line-height:0; position: fixed; right:15px; bottom:15px; z-index:9; display:block; overflow:hidden; opacity: 0;} a.goTop.open{opacity: 1;} a.goTop:before{content: ""; width: 100%; height: 100%; background:url("http://deutschkultur.iceserver.co.kr/img/arr_goTop.png") no-repeat center center; display: block; position:absolute; left: 0; top:0px;} a.goTop:hover{background-color: var(--point); border-radius:50%; transform:rotate(180deg);} a.goTop:hover:before{transform:rotate(-180deg);} /*[s] FOOTER */ .footerTop .wrap1400 {display: flex; align-items: center; justify-content: space-between;} .footerTop {padding: 2rem 0; border-bottom: 2px solid #2f3033;} .footerTopList , .footerTop > div {height: 100%;} .footerTopList__item {position: relative; display: inline-block; float: left; height: 100%; margin: 0 2rem 0 0; padding: 0 2rem 0 0; line-height: normal;} .footerTopList__item::after {content : ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 12px; background: #31353f;} .footerTopList__item:last-child {margin: 0; padding: 0;} .footerTopList__item:last-child::after {display: none;} .footerTopList__item a {position: relative; display: table; width: 100%; height: 100%;} .footerTopList__item a span {display: table-cell; vertical-align: middle; font-size: 1.6rem; color: #77797d; font-weight: 400; transition: .3s ease;} .footerTopList__item a:hover span {color: #fff;} .footer__sns {display: flex; align-items: center; gap: 1rem;} .footer_btmwrap {display: flex; padding: 4rem 0 0 ;} .footer_btm_right {margin-left: 7rem; width: calc(100% - 4rem - 22.3rem);} .footer_btm_right .right__list {display: flex; flex-wrap: wrap; margin-bottom: 4rem;} .footer_btm_right .right__list > li {padding: 0 2rem; position: relative; font-size: 1.6rem; font-weight: 400; color: #77797d; line-height: normal;} .footer_btm_right .right__list > li + li::after {position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 1px ; height: 12px; background: #31353f;} .footer_btm_right .right__list > li:first-of-type {padding: 0 2rem 0 0;} .footer_btm_right .right__list > li:last-of-type {width: 100%; padding: 1rem 0 0;} .footer_btm_right .right__list > li:last-of-type::after {display: none;} /* .footer_btm_right .right__list > li:last-of-type */ .footer_btm_right a p{ font-size: 1.6rem; font-weight: 400; color: #77797d; margin-top: 1rem;} .footer_btm_right a p span { font-size: 1.6rem; font-weight: 400; color: #f68246;} /* 팝업창!!!!!!!!!!!!*/ .modal {/* cursor: pointer; */position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow: auto; z-index: 100; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: .3s ease;} .modal.active {opacity: 1; visibility: visible;} .modal__inner {background: #fff; max-width: 95rem; width: calc(100% - 2rem); margin: 15rem auto 5rem; padding: 3rem; cursor: auto; box-shadow: 8px 8px 20px 0 rgba(0,0,0,0.6);position: relative;} .modal--close {position: absolute;top: -5rem;right: 0rem; padding: 1rem;} .modal__table table {border-top: 1px solid #000; width: 100%;} .modal__table table tr {border-bottom: 1px solid #ddd; } .modal__table table tr th {background: #f7f7f7; border-right: 1px solid #ddd; padding: 2rem; width: 20rem; font-size: 1.8rem; font-weight: 700; color: #000;} .modal__table table tr td {padding: 2rem; font-size: 1.8rem; font-weight: 400; color: #000;} .admGo a {display: block; display: flex; align-items: center; justify-content: center; width: 20rem; height: 5rem; border-radius: 3px; background-color: #000; color: #fff; font-size: 1.6rem; margin: 1rem auto 0;} .mobile {display: none;} @media only screen and (max-width : 1440px){ } @media only screen and (max-width : 1320px){ .inConts {padding: 0 2rem;} #header h1>a {left: 2rem;} /* #header #pcMenu #list>li {padding: 0 1.5rem;} */ #header #pcMenu #list>li {padding: 0 0.5rem;} } @media only screen and (max-width : 1280px){ #container{padding:0 3rem 14rem;} .footer_btm_right .right__list > li {padding: 0 2rem 0; margin-bottom: 1rem;} .footer_btm_right .right__list > li:last-of-type {/* width: auto; */ padding: 0; margin-bottom: 1rem;} } @media only screen and (max-width : 1024px){ .pc {display: none;} .mobile {display: block;} #header {position: fixed;} #header.scrolled {position: fixed; background: #fff;} #header.scrolled .mMenu:before, #header.scrolled .mMenu:after {background: #111;} #header.scrolled h1>a {opacity: 0;} #header.scrolled h1>a:last-of-type {opacity: 1;} #header.all {position: fixed; background: #fff;} #header.all .mMenu:before, #header.all .mMenu:after {background: #111;} #header.all h1>a {opacity: 0;} #header.all h1>a:last-of-type {opacity: 1;} /* #snb{width:1px; height:1px; font-size:0; line-height:0; position: fixed; left:-1px; top:-1px; z-index:-999; overflow:hidden; opacity: 0;} */ #snb{width:100%; background-color: #fff; border-bottom:1px solid rgba(191,191,191,0.6); position: relative; z-index:10;} #snb:before{content: ""; width: 25%; height: 100%; background-color: var(--point); display: inline-block; position:absolute; left: 0; top:0px;} #snb #nav{width:100%; background-color: #fff; border-left:1px solid rgba(191,191,191,0.6); position: relative; z-index:2; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: flex-start;} #snb #nav>li{flex:0 1 18%; border-top:1px solid rgba(191,191,191,0.6); border-right:1px solid rgba(191,191,191,0.6); display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; position:relative;} #snb #nav>li>a{width:100%; height:5rem; padding:0 5rem 0 2rem; font-weight: 300; font-size:1.5rem; line-height:1.2; color:#666; display:table; position: relative;} #snb #nav>li>a>span{padding:0.5rem 0; display:table-cell; vertical-align: middle; word-break:break-all !important;} #snb #nav>li>a i{width:1.5rem; height:1rem; margin-top:-0.5rem; position: absolute; right:2rem; top:50%; display:inline-block;} #snb #nav>li>a i:after, #snb #nav>li>a i:before{content: ""; width:1rem; height: 0.2rem; margin:0 0 0 0; background-color: #b2b2b2; display: block; position:absolute; top:50%;} #snb #nav>li>a i:after{right:0.6rem; transform:rotate(45deg);} #snb #nav>li>a i:before{right:0px; transform:rotate(-45deg);} #snb #nav>li.home{flex-basis: 6rem; max-width:6rem;} #snb #nav>li.home>a{width:100%; height:5rem; padding:0; background:url("http://canamiracle.iceserver.co.kr/theme/prix/css/../img/icon_home.png") no-repeat center center; font-size:0; line-height:0;} #snb #nav>li.home>a:before{content: ""; display:none;} #snb #nav>li:last-child{flex-basis: 25%;} #snb #nav>li:last-child>a{font-weight: 400; color: #333;} #snb #nav .lnbSub{background-color: #fff; border:1px solid rgba(191,191,191,0.6); position:absolute; left:-1px; right:-1px; top:100%; z-index:3; display:none;} #snb #nav .lnbSub>a{width:100%; height:5rem; padding:0px 2rem; font-weight: 300; font-size:1.5rem; line-height:1.4; color:#717171; display:table;} #snb #nav .lnbSub>a>span{padding:0.5rem 0; display:table-cell; vertical-align: middle; word-break:break-all !important;} #snb #nav .lnbSub>a+a{border-top:1px solid rgba(191,191,191,0.6);} #snb #nav .lnbSub>a:hover, #snb #nav .lnbSub>a.active{background-color: #f0f0f0; color: #333;} #snb #nav .lnbSub>a.active{font-weight: 400;} #snb #nav>li.active>a i{transform:rotate(180deg);} #snb #nav::before {display: none; } .pVar, th.pVar, td.pVar{display:none !important;} .mVar, .br_p{display:none;} .tVar{display:block;} .br_t{display:block;} .ptVar{display:block;} .tmVar{display:block;} img.tVar, img.ptVar, img.tmVar{display:inline-block;} table .br_t{display:table-cell;} /*[s] HEADER */ #header .utill{padding-right:5rem;} #header .language{right:9rem;} #header .mMenu{display:block;} #header #pcMenu, #header .utill .appDown{width: 1px; height: 1px; margin: -1px; border: 0; overflow: hidden; display: inline-block; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);} .menuLayer{padding-left:30%;} /*[e] HEADER */ /*[s] SUB */ #sVisual{} #sVisual .inConts{} #sVisual h2{padding:0;} #snb>.inConts{padding:0 !important;} #snb #nav>li{flex:1 1 30%;} #snb #nav>li:last-child{flex-basis: 45%;} .fullBox{width:100vw; margin-left:-3rem; left:0%;} /*[e] SUB */ /*[s] FOOTER */ #footer .footTop .footTop_re{width:100%; display:block;} #footer .footTop .footTop_re.toja{width:100%; display:none;} /*[s] FOOTER */ #header .inConts {height: 10rem;} /* #header h1>a img {width: 12rem;} */ .quickWrap{right:calc(-100% + 70px); width:calc(100% - 70px);} .hiding {display: none;} .quick__inner{width:100%; padding:7rem 2rem 3rem;} .footer_btmwrap {flex-direction: column; align-items: center; gap: 4rem;} .footer_btm_right {margin: 0 auto; width: 100%;} .footer_btm_right .right__list {margin-bottom: 2rem; justify-content: center;} .footer_btm_right .right__list > li:last-of-type {text-align: center;} .footer__sns {margin: 0 auto; text-align: center;} .footer__sns a + a {margin-left: 1rem;} .footer_btm_right a p {line-height: normal; margin: 3rem auto 0; text-align: center;} #sVisual {height: 40rem;} #pageTop {padding: 4rem 0 8rem;} } @media only screen and (max-width : 840px){ :root, html{font-size:6.5px;} :root { --f__size--12 : 2rem; --f__size--13 : 2rem; --f__size--14 : 2rem; --f__size--15 : 2rem; --f__size--16 : 2rem; --f__size--17 : 2.2rem; --f__size--18 : 2.2rem; --f__size--19 : 2.2rem; --f__size--20 : 2.4rem; --f__size--21 : 2.4rem; --f__size--22 : 2.4rem; --f__size--23 : 2.6rem; --f__size--24 : 2.6rem; --f__size--36 : 3rem; } .br_p, .pVar, .tVar, .ptVar{display:none !important;} .mVar, .tmVar, .br_t{display:block !important;} img.mVar, img.tmVar{display:inline-block !important;} table .br_t{display:table-cell !important;} /*[s] HEADER */ #header{} #header h1{padding:3rem 0;} /* #header h1>a img{width:13rem;} */ #header .tSchArea{right:9.4rem;} #header .tSchArea{padding-right:4.6rem;} #header .tSchArea .tSch{width:4.6rem;} #header .tSchArea .tSch:before{width:2rem; height:2rem; margin:-1.2rem 0 0 -1.3rem;} #header .tSchArea .tSch:after{width:1.2rem; height:2px; margin:0.8rem 0 0 1px;} #header .language{width:10rem; margin-top:-2.5rem; border-radius:2.2rem;} #header .language:before{border-top-width:0.8rem; border-bottom:0; border-left-width:0.4rem; border-right-width:0.4rem; right:1.4rem; top:1.7rem;} #header .language a{height:4.2rem; padding:0 3rem 0 1.7rem; font-size:2rem;} .menuLayer{padding-left:0;} /*[e] HEADER */ /*[s] SUB */ #sVisual h2>strong{font-size:4rem;} #sVisual h2>span{font-size:2.6rem;} #snb{} #snb:before{display:none;} #snb #nav{} #snb #nav>li{flex:1 1 80%;} #snb #nav>li>a{height:7rem; font-size:2.2rem;} #snb #nav>li>a>span{} #snb #nav>li>a i{width:2rem; height:1.6rem; margin-top:-0.8rem;} #snb #nav>li>a i:after, #snb #nav>li>a i:before{width:1.5rem;} #snb #nav>li>a i:after{right:1rem;} #snb #nav>li>a i:before{} #snb #nav>li.home{flex-basis: 7rem; max-width:7rem;} #snb #nav>li.home>a{width:100%; height:7rem;} #snb #nav>li.sDepth01{flex-basis: 35%;} #snb #nav>li.sDepth02{flex-basis: 45%;} #snb #nav>li.sDepth03{} #snb #nav>li.sDepth04{} #snb #nav>li:last-child{flex-basis: 45%;} #snb #nav .lnbSub{} #snb #nav .lnbSub>a{height:6rem; font-size:2.2rem;} #snb.four #nav>li.sDepth01{flex-basis: 70%;} #snb.four #nav>li.sDepth02{} #snb.four #nav>li.sDepth03{} #snb.four #nav>li.sDepth04{} #snb.four #nav>li:last-child{flex-basis: 80%;} #pageTop>h3{font-size:4.2rem;} #container{min-height:34.6rem;} /*[e] SUB */ /*[s] FOOTER */ #footer .footTop{} #footer .footTop .footTop_re{} #footer .footTop .footTop_re .tit{font-size:2.2rem;} #footer .footTop .footTop_re .text{padding-top:2.5rem;} #footer .footTop .footTop_re .text>p{} #footer .footTop .footTop_re .text>address, #footer .footTop .footTop_re .text>p>span{padding-right:2.5rem; font-size:2rem; line-height:2.8rem;} #footer .footTop .footTop_re .text>p>span+span{} #footer .footTop .footTop_re .text>address{padding-top:1.5rem;} #footer .footTop .footTop_re .text>address>a{} #footer .footTop .footTop_re .info{padding-top:3rem;} #footer .footTop .footTop_re .info>dl{ font-size:2rem; line-height:3.2rem;} #footer .footTop .footTop_re .info>dl>dt{min-width:9.3rem;} #footer .footTop .footTop_re .social{margin-top:4rem;} #footer .footTop .footTop_re .social>a{} #footer .link{padding-top:3rem;} #footer .link>a{font-size:2rem; line-height:3.2rem;} #footer .link>a+a:before{height: 1.4rem;} #footer .banner{} #footer .banner>dl{width:50%; margin-right:0;} #footer .banner>dl>dd{padding-left:1.6rem;} /*[s] FOOTER */ .modal__table table tr th {width: 16rem;} } /* -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */