@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');


/* CSS Reset, Personal Reset_Yu Bomi*/

/* CSS Reset */
img{vertical-align: top; padding: 0; margin: 0;border:0 none;}
a{text-decoration: none; color: inherit;}
li{list-style: none; }
em{font-style: normal}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Montserrat", "NanumSquare", "Apple SD Gothic Neo",'Noto Sans KR',sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	color: #333;
	font-weight: 400;
	letter-spacing: -0.5px; word-spacing: -0.5px;
}
input, select, textarea, button{font-family: "Montserrat", "NanumSquare", "Apple SD Gothic Neo",'Noto Sans KR',sans-serif; color: #333; font-size: 16px; -webkit-font-smoothing: antialiased;letter-spacing: -0.5px; word-spacing: -0.5px; font-weight: 400;}

body.jpn,.jpn div, .jpn span, .jpn applet, .jpn object, .jpn iframe,
.jpn h1, .jpn h2, .jpn h3, .jpn h4, .jpn h5, .jpn h6, .jpn p, .jpn blockquote, .jpn pre,
.jpn a, .jpn em, .jpn img, .jpn strong, .jpn sub,.jpn b, .jpn u, .jpn i, .jpn center,
.jpn dl, .jpn dt, .jpn dd, .jpn ol, .jpn ul, .jpn li,
.jpn fieldset, .jpn form, .jpn label, .jpn legend,
.jpn table, .jpn caption, .jpn tbody, .jpn tfoot, .jpn thead, .jpn tr, .jpn th, .jpn td,
.jpn article, .jpn aside, .jpn canvas, .jpn details, .jpn embed, 
.jpn footer, .jpn header, .jpn hgroup, 
.jpn menu, .jpn nav, .jpn output, .jpn ruby, .jpn section, .jpn summary,
.jpn time, .jpn mark, .jpn audio, .jpn video, .jpn input, .jpn select, .jpn textarea, .jpn button{font-family: "Montserrat", 'Sawarabi Gothic', "Apple SD Gothic Neo",'Noto Sans KR', sans-serif; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
    box-sizing: border-box;
	-webkit-text-size-adjust:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);	
}
:focus {
	outline: 0;
	border:none;
	/*color: rgba(0, 0, 0, 0);*/
}

input[type='password'],input[type='button'],input[type='text'],input[type='email'],input[type='search'],input[type='date'],input[type='tel'],input[type='time'],input[type='number'],textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #aeaeae;
	border-radius: 3px;
	padding: 0 10px;
	height: 40px;
	transition:0.2s all;
	line-height: 1.2em;
}
input[type='checkbox']{
	-webkit-appearance: none;
	 -moz-appearance: none; 
	 appearance: none;
	 width: 20px; 
	 height: 20px; 
	 border: 1px solid #aeaeae; 
	 background-color: #fff; 
	 border-radius: 1px; 
	 display: inline-block;
	}
input[type='checkbox']:checked{
	background: url(/qt/m/img/checked.png) no-repeat 50% 50%; background-color: #fff;
}
input[type='radio']{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #ccc;
	vertical-align: middle;	
	display: inline-block;
}
input[type='radio']:checked{
	border: 1px solid #aaa;
	padding: 2px;
	position: relative;
}
input[type='radio']:checked:after{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background: #f96b6b;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -4px;
	margin-left: -4px
}
select{
	all: unset;	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background:url(../img/select.svg) no-repeat 100% 0;
	padding: 0 40px 0 15px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	box-sizing:border-box;
	background-color: transparent;
	border: 1px solid #333; 
	color: #333;
	font-size: 15px;
	transition: 0.2s all;
}
select:hover,
textarea:hover,
input:hover{background-color: inherit; color: inherit;}
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus{background-color: inherit; color: inherit;}
option{color: inherit;}

button{background-color: transparent; cursor: pointer;}
button,
button:active,
button:focus,
button:hover{border: 1px solid #333; padding: 12px 20px; line-height: 1; font-size: 15px; font-weight: 400; display: flex; align-items: center;}


input[type='button']{-webkit-appearance: none; -moz-appearance: none; padding: 0; border: 0; cursor: pointer;}

/* IE 10, 11 */
select::-ms-expand { 
  display: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
    font-size: inherit;
    }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ccc;
   opacity:  1;
   font-size: inherit;
   }
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ccc;
   opacity:  1;
   font-size: inherit;
   }
input:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:#ccc;
   font-size: inherit;
   }


ul{ 
	list-style:none;
}
a:link{
	text-decoration:none;
}
a:visited{
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
body{
	border:0;
	margin:0px auto;
	min-width:320px;
	width:100%;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling:touch;
}

.chinese{font-family: "Apple SD Gothic Neo", 'sans-serif'; font-size: inherit; color: inherit; font-weight: inherit;}

@media screen and (max-width: 768px){
	body,html,ul,li,ol,li,dl,dt,dd,*{letter-spacing: -1px;}
}

/* icon setting */
i{display: inline-block; line-height: inherit; vertical-align: middle;}
i.arrow{width: 14px; height: 8px; background: url(../img/icon-company.svg) -13px -223px;}
i.arrow.top{transform: rotate(0deg);}
i.arrow.right{transform: rotate(90deg);}
i.arrow.left{transform: rotate(-90deg);}
i.arrow.bottom{transform: rotate(180deg);}
i.download{width: 20px; height: 20px; background: url(../img/icon-company.svg) -10px -257px;}
i.blank{width: 20px; height: 20px; background: url(../img/icon-company.svg) -10px -337px;}

/* Css Reset End */


/* Skip */
.skip{
	position: absolute;
	left: 0;
	top: -9999em;
	z-index: 9999;
	display: block;
	width: 100%;
	background: #039;
	color: #eee;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 30px;
}
.skip a:focus{
	top: 0;
}
/*Skip End*/



/* Personal Reset */
.clearfix{
	*zoom:1;
}
.clearfix:after{
	content: '';
	display: block;
	clear: both;
}
.flex{display: flex; display: -ms-flexbox;}
.f-left{float: left;}
.f-right{float: right;}
.table{display: table;}
.cell{display: table-cell;}
.hidden{display: none;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.w100{width: 100%; max-width: 1120px; box-sizing: border-box; margin: 0 auto; padding: 0;}
.box{padding-left: 20px; padding-right: 20px; box-sizing: border-box;}

.dis-bl{display: block;}
.dis-in{display: inline;}

.pa{padding: 20px;}
.pari{padding-right: 20px!important;}
.pale{padding-left: 20px;}
.patop-1{padding-top: 10px;}
.pabo-1{padding-bottom: 10px;}
.patop{padding-top: 25px;}
.pabo{padding-bottom: 25px;}
.patop-2x{padding-top: 50px;}
.pabo-2x{padding-bottom: 50px;}
.pa0{padding: 0!important;}
.pabo-0{padding-bottom: 0!important;}

.ma-0{margin: 0!important;}
.ma{margin: 20px;}
.mari{margin-right: 20px;}
.male{margin-left: 20px;}
.male-5{margin-left: 5px;}
.matop{margin-top: 30px;}
.mabo{margin-bottom: 30px;}
.matop-2x{margin-top: 60px;}
.mabo-2x{margin-bottom: 60px;}
.last-div{padding-bottom: 100px!important;}
.gray-back{background: #fafafa!important;}
.white-back{background: #fff!important;}

/* changable color area (light/dark mode) S */
.fc-999{color: #999;}
.fc-777{color: #777;}
.fc-555{color: #555;}
.fc-333{color: #333;}
.fc-point{color: #0EBBC2;}
.fc-red{color: #FF6565!important;}
.fc-link{color: #2E9AFF!important;}
.fc-fff,.fff{color: #fff!important;}
.bg-000{background: #000!important;}

/* fixed font-size S */
.fs-12{font-size: 12px!important;}
.fs-14{font-size: 14px!important;}
.fs-16{font-size: 16px!important;}
.fs-18{font-size: 18px!important;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400; color: inherit;}
.fw-500{font-weight: 500;}
.fw-700{font-weight: 700;}
.bobo-0{border-bottom: 0!important;}
.bobo-1{border-bottom: 0.8px solid #efefef}
.nowrap{white-space: nowrap;}
.question{font-style: italic;}
.break-all{word-break: break-all!important;}

/* Personal End */


/* loading S*/
.loading{width: 100%; height: 100%; position: fixed; top:0; left:0; background: rgba(255,255,255,0.9); z-index: 100; display: flex; justify-content: center; align-items: center; transition: 0.5s all; }
.main+.loading{background: rgba(0,0,0,0.9);}
.loading img{animation: loading 0.5s infinite linear; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 50%;}
@keyframes loading{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
/* loading E */

/* header S */
header#mobile{display: none;}
header{position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: all 0.2s;}
header h1{background: url(../img/duranno-logo.svg) 0 0 no-repeat; width: 132px; height: 18px; display: inline-block; background-size: 132px; text-indent: -9999em; cursor: pointer;}
header select{min-width: 158px;}
header select:focus{border-width: 1px; border-style: solid;}
header .main-nav-bg{width: 100%; background-color: #fff; justify-content: space-between; align-items: center; padding: 0 4%; transition: 0.2s all; border-bottom: 1px solid #ccc; box-sizing: border-box; height: 79px;}
header.on{top: -80px;}

header .sub-nav-bg{width: 100%; height: 60px; position: absolute; bottom: 0; left: 0; background: #fff; z-index: -2; transition: 0.2s all ease-in-out; border-bottom: 1px solid #ccc;}
header .sub-nav-bg.on{bottom: -60px;}

header .menu-ul>li>a{display: inline-block; font-size: 15px; text-transform: uppercase; margin: 0 10px; transition: 0.2s all; height: 80px; line-height: 80px; position: relative; font-weight: 700; color: #888}
header .menu-ul>li a:after{content:""; display: block; position: absolute; bottom:0; left:0; width:0; border-bottom: 1px solid #49957B; transition: 0.2s all ease-in-out;}
header .menu-ul>li.on a:after,
header .menu-ul>li a:hover:after{width:100%;}
header .menu-ul>li.this a{color: #49957B;}

header .menu-ul>li .sub-menu{position: absolute; bottom: -60px; left:0; width: 100%; text-align: center; display: none; height: 60px; width: 100%; background: #fff; border-bottom: 1px solid #ccc;}
header .menu-ul>li .sub-menu>a{display: inline-block; font-size: 15px; text-transform: uppercase; margin: 0 10px; transition: 0.2s all ease-in-out; height: 60px; line-height: 60px; font-weight: 300; position: relative; font-weight: 700; color: #888; min-width: 50px;}

header .menu-ul>li .sub-menu>a:after{content:""; display: block; position: absolute; bottom:0; left:0; width:0; border-bottom: 1px solid #49957B; transition: 0.2s all ease-in-out;}
header .menu-ul>li .sub-menu>a.this:after,
header .menu-ul>li .sub-menu>a.on:after,
header .menu-ul>li .sub-menu>a:hover:after{width:100%;}
header .menu-ul>li .sub-menu>a.this{color: #49957B;}

/* header-black-mode */
header.bl .main-nav-bg{background-color: #323435; border-color: #555;}
header.bl h1{background-image: url(../img/duranno-logo-w.svg);}
header.bl .menu-ul>li>a{color: #fff;}
header.bl .menu-ul>li a:after{border-color: #fff;}
header.bl select{border-color: #fff; color: #fff; background-image: url(../img/select-w.svg); background-color: transparent;}
header.bl select option{color: #333;}
header.bl select:focus{border: 1px solid #fff}
header.bl .menu-ul>li .sub-menu{color: #fff; background-color: #323435; border-color: #555;}
header.bl .sub-nav-bg{background-color: #2a2a2b; border-color: #555;}
/* header E */

/* footer S */
footer{background: #fff; position: relative; z-index: 10;}
footer .wrap{justify-content: space-between;}
footer .address-area ul{justify-content: flex-start; align-items: center; margin-bottom: 18px;}
footer .address-area ul li a{display: block; width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 50%; background: url(../img/icon-company.svg) 0 -47px; box-sizing: content-box; margin-right: 15px;}
footer .address-area p{width: 310px; line-height: 1.8em;}
footer .address-area ul li:nth-child(2) a{background-position: 0 -87px;}
footer .address-area ul li:nth-child(3) a{background-position: 0 -127px;}
footer .address-area ul li:nth-child(4) a{background-position: 0 -167px;}
footer .address-area ul li:nth-child(5) a{background-position: 0 -367px;}
footer .address-area ul li:last-child a{margin-right: 0;}
footer .link-area{justify-content: space-between; margin-bottom: 160px;}
footer .link-area dl{width: 120px; border-top: 1px solid #CCCCCC; margin-left: 20px; line-height: 1.8em; font-size: 15px;}
footer .link-area dl dt{margin: 10px 0;}
footer .copyright{font-size: 15px; line-height: 1.8em; text-align: center; padding-bottom: 100px;}
/* footer E */

@media screen and (max-width: 1024px){
	header#web{display: none;}
	header#mobile{display: block; position: fixed; z-index: 100; transition: 0.2s all; top: 0; left: 0;}
	header#mobile.shadow{box-shadow: 0px 3px 3px rgba(0,0,0,0.05);}
	header{all: unset; display: block; width: 100%; height: 60px; background: #fff; border: none; transition: 0.2s all;}
	header .mobile-nav{display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 100%; }
	header .mobile-nav .menu{display: block; border: 0; width: 20px; height: 13px; position: relative; padding: 0;}
	header .mobile-nav .menu .line{width: 20px; height: 2px; background: #14171C; display: block; transition: 0.2s all; position: absolute; left: 0; right: 0;}
	header .mobile-nav .menu .line:first-child{top: 0;}
	header .mobile-nav .menu .line:last-child{bottom: 0;}
	header.bl{background: #323435;}
	header.bl .mobile-nav .menu .line{background: #fff;}
	header .mobile-nav.close{background-color: #fff; width: 100%; position: absolute; z-index: 100;}
	header .mobile-nav.close .menu{z-index: 101; top: 0; right: 0;}
	header .mobile-nav.close .menu .line{background: #14171C; margin-bottom: 0;}
	header .mobile-nav.close .menu .line:first-child{transform: rotate(45deg); top: 5.5px;}
	header .mobile-nav.close .menu .line:last-child{transform: rotate(-45deg); bottom: 5.5px;}

	header .mobile-menu{all: unset; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; color: #888; overflow-y: scroll; transition: 0.2s all;}
	header .mobile-menu.on{left: 0;}
	header h1{background-image: url(../img/duranno-logo.svg); background-size: 100%; width: 115px; height: 16px; z-index: 100;}
	header .mobile-nav.close h1{background-image: url(../img/duranno-logo.svg);}
	header .mobile-menu .menu-ul{flex-wrap: wrap; margin-top: 65px;}
	header .mobile-menu .menu-ul li{width: 100%; margin: 25px 30px;}
	header .mobile-menu .menu-ul li a{display: inline-block; color: #888; font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: uppercase; height: auto; margin: 0; -webkit-text-fill-color: #888;}
	header .mobile-menu .menu-ul li.on>a{color: #49957B; -webkit-text-fill-color: #49957B;}
	header .mobile-menu .menu-ul li i{margin-left: 10px; opacity: 0.8; transition: 0.2s all;}
	header .mobile-menu .menu-ul li.on i{transform: rotate(0)}
	header .mobile-menu .menu-ul>li .sub-menu-m{overflow: hidden; height: 0; transition: 0.2s all; position: static; text-align: left;}
	header .mobile-menu .menu-ul>li:nth-child(2).on .sub-menu-m{height: 290px;}
	header .mobile-menu .menu-ul>li.on .sub-menu-m{height: 213px;}
	header .mobile-menu .menu-ul>li .sub-menu-m>a{display: block; margin-left: 60px; position: relative; margin: 50px 30px 0; width: fit-content; color: #888;}
	header .mobile-menu .menu-ul>li .sub-menu-m>a:hover,
	header .mobile-menu .menu-ul>li .sub-menu-m>a.on{color: #49957B; -webkit-text-fill-color: #49957B;}
	header .mobile-menu .menu-ul>li .sub-menu-m>a:after{content:""; display: block; position: absolute; bottom:0; left:0; width:0; border-bottom: 1px solid #49957B; transition: 0.2s all ease-in-out;}
	header .mobile-menu .menu-ul>li .sub-menu-m>a:hover:after,
	header .mobile-menu .menu-ul>li .sub-menu-m>a.on:after{width: 100%;}
	header#mobile .language{margin: 25px 30px; border: 1px solid #333; color: #333; background: url(../img/select.svg) no-repeat 100% 0;}
	header .menu-ul>li>a:after{display: none;}

	footer .wrap{display: block;}
	footer .address-area ul{justify-content: center;}
	footer .address-area p{width: 100%; text-align: center;}
	footer .link-area{flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; max-width: 500px; margin: 0 auto;}
	footer .link-area dl{width: 48%; margin-left: 0; margin-top: 30px;}
	footer .copyright{margin-top: 80px; padding: 0 20px 100px; box-sizing: border-box;}
}

@media screen and (max-width: 320px){
	header .mobile-menu{left: -320px;}
}